feat(admonition): polish

- sort by type names
- tweak colors of some types
- improve dark mode contrast
- prune css
- simplify render hook
This commit is contained in:
ZhenShuo Leo
2025-12-22 18:02:43 +08:00
parent 3f2891cc32
commit 07f2fec870
8 changed files with 306 additions and 366 deletions

View File

@@ -410,6 +410,9 @@
.ms-6 {
margin-inline-start: calc(var(--spacing) * 6);
}
.ms-auto {
margin-inline-start: auto;
}
.-me-48 {
margin-inline-end: calc(var(--spacing) * -48);
}
@@ -985,9 +988,6 @@
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-auto {
margin-left: auto;
}
.box-border {
box-sizing: border-box;
}
@@ -1092,9 +1092,6 @@
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
@@ -1173,9 +1170,6 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
@@ -1452,11 +1446,6 @@
.self-center {
align-self: center;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.\!overflow-hidden {
overflow: hidden !important;
}
@@ -1978,10 +1967,6 @@
--tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed);
}
.leading-snug {
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
@@ -2029,9 +2014,6 @@
.\!text-neutral {
color: rgba(var(--color-neutral), 1) !important;
}
.text-current {
color: currentcolor;
}
.text-inherit {
color: inherit;
}
@@ -2406,20 +2388,6 @@
border-top-color: transparent;
}
}
.marker\:hidden {
& *::marker {
display: none;
}
&::marker {
display: none;
}
& *::-webkit-details-marker {
display: none;
}
&::-webkit-details-marker {
display: none;
}
}
.before\:absolute {
&::before {
content: var(--tw-content);
@@ -3340,26 +3308,11 @@
}
}
}
.print\:block {
@media print {
display: block;
}
}
.print\:hidden {
@media print {
display: none;
}
}
.print\:break-inside-avoid {
@media print {
break-inside: avoid;
}
}
.\[\&\:\:-webkit-details-marker\]\:hidden {
&::-webkit-details-marker {
display: none;
}
}
}
@layer utilities {
.prose .chroma {
@@ -3601,12 +3554,12 @@ body.zen-mode-enable {
}
@layer components {
:root {
--adm-note-border: oklch(62.3% 0.214 259.815);
--adm-note-bg: oklch(97% 0.014 254.604);
--adm-note-text: oklch(37.9% 0.146 265.522);
--adm-tip-border: oklch(70.4% 0.14 182.503);
--adm-tip-bg: oklch(98.4% 0.014 180.72);
--adm-tip-text: oklch(38.6% 0.063 188.416);
--adm-note-border: oklch(68.5% 0.169 237.323);
--adm-note-bg: oklch(97.7% 0.013 236.62);
--adm-note-text: oklch(39.1% 0.09 240.876);
--adm-tip-border: oklch(69.6% 0.17 162.48);
--adm-tip-bg: oklch(97.9% 0.021 166.113);
--adm-tip-text: oklch(37.8% 0.077 168.94);
--adm-important-border: oklch(62.7% 0.265 303.9);
--adm-important-bg: oklch(97.7% 0.014 308.299);
--adm-important-text: oklch(38.1% 0.176 304.987);
@@ -3619,78 +3572,75 @@ body.zen-mode-enable {
--adm-abstract-border: oklch(71.5% 0.143 215.221);
--adm-abstract-bg: oklch(98.4% 0.019 200.873);
--adm-abstract-text: oklch(39.8% 0.07 227.392);
--adm-info-border: oklch(68.5% 0.169 237.323);
--adm-info-bg: oklch(97.7% 0.013 236.62);
--adm-info-text: oklch(39.1% 0.09 240.876);
--adm-todo-border: oklch(55.4% 0.046 257.417);
--adm-todo-bg: oklch(98.4% 0.003 247.858);
--adm-todo-text: oklch(27.9% 0.041 260.031);
--adm-success-border: oklch(72.3% 0.219 149.579);
--adm-success-bg: oklch(98.2% 0.018 155.826);
--adm-success-text: oklch(39.3% 0.095 152.535);
--adm-question-border: oklch(76.9% 0.188 70.08);
--adm-question-bg: oklch(98.7% 0.022 95.277);
--adm-question-text: oklch(41.4% 0.112 45.904);
--adm-failure-border: oklch(65.6% 0.241 354.308);
--adm-failure-bg: oklch(97.1% 0.014 343.198);
--adm-failure-text: oklch(40.8% 0.153 2.432);
--adm-danger-border: oklch(63.7% 0.237 25.331);
--adm-danger-bg: oklch(97.1% 0.013 17.38);
--adm-danger-text: oklch(39.6% 0.141 25.723);
--adm-bug-border: oklch(64.5% 0.246 16.439);
--adm-bug-bg: oklch(96.9% 0.015 12.422);
--adm-bug-text: oklch(41% 0.159 10.272);
--adm-danger-border: oklch(63.7% 0.237 25.331);
--adm-danger-bg: oklch(97.1% 0.013 17.38);
--adm-danger-text: oklch(39.6% 0.141 25.723);
--adm-example-border: oklch(55.8% 0.288 302.321);
--adm-example-bg: oklch(97.7% 0.014 308.299);
--adm-example-text: oklch(38.1% 0.176 304.987);
--adm-failure-border: oklch(65.6% 0.241 354.308);
--adm-failure-bg: oklch(97.1% 0.014 343.198);
--adm-failure-text: oklch(40.8% 0.153 2.432);
--adm-info-border: oklch(62.3% 0.214 259.815);
--adm-info-bg: oklch(97% 0.014 254.604);
--adm-info-text: oklch(37.9% 0.146 265.522);
--adm-question-border: oklch(76.9% 0.188 70.08);
--adm-question-bg: oklch(98.7% 0.022 95.277);
--adm-question-text: oklch(41.4% 0.112 45.904);
--adm-quote-border: oklch(55.1% 0.027 264.364);
--adm-quote-bg: oklch(98.5% 0.002 247.839);
--adm-quote-text: oklch(27.8% 0.033 256.848);
--adm-success-border: oklch(69.6% 0.17 162.48);
--adm-success-bg: oklch(97.9% 0.021 166.113);
--adm-success-text: oklch(37.8% 0.077 168.94);
--adm-todo-border: oklch(68.5% 0.169 237.323);
--adm-todo-bg: oklch(97.7% 0.013 236.62);
--adm-todo-text: oklch(44.3% 0.11 240.79);
}
html.dark {
--adm-note-bg: color-mix(in oklab, oklch(37.9% 0.146 265.522) 60%, transparent);
--adm-note-text: oklch(93.2% 0.032 255.585);
--adm-tip-bg: color-mix(in oklab, oklch(38.6% 0.063 188.416) 60%, transparent);
--adm-tip-text: oklch(95.3% 0.051 180.801);
--adm-important-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent);
--adm-note-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.1% 0.09 240.876) 40%, transparent), black 15%);
--adm-note-text: oklch(95.1% 0.026 236.824);
--adm-tip-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
--adm-tip-text: oklch(95% 0.052 163.051);
--adm-important-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
--adm-important-text: oklch(94.6% 0.033 307.174);
--adm-warning-bg: color-mix(in oklab, oklch(40.8% 0.123 38.172) 60%, transparent);
--adm-warning-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.123 38.172) 40%, transparent), black 15%);
--adm-warning-text: oklch(95.4% 0.038 75.164);
--adm-caution-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent);
--adm-caution-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
--adm-caution-text: oklch(93.6% 0.032 17.717);
--adm-abstract-bg: color-mix(in oklab, oklch(39.8% 0.07 227.392) 60%, transparent);
--adm-abstract-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.8% 0.07 227.392) 40%, transparent), black 15%);
--adm-abstract-text: oklch(95.6% 0.045 203.388);
--adm-info-bg: color-mix(in oklab, oklch(39.1% 0.09 240.876) 60%, transparent);
--adm-info-text: oklch(95.1% 0.026 236.824);
--adm-todo-bg: oklch(27.9% 0.041 260.031);
--adm-todo-text: oklch(96.8% 0.007 247.896);
--adm-success-bg: color-mix(in oklab, oklch(39.3% 0.095 152.535) 60%, transparent);
--adm-success-text: oklch(96.2% 0.044 156.743);
--adm-question-bg: color-mix(in oklab, oklch(41.4% 0.112 45.904) 60%, transparent);
--adm-question-text: oklch(96.2% 0.059 95.617);
--adm-failure-bg: color-mix(in oklab, oklch(40.8% 0.153 2.432) 60%, transparent);
--adm-failure-text: oklch(94.8% 0.028 342.258);
--adm-danger-bg: color-mix(in oklab, oklch(39.6% 0.141 25.723) 60%, transparent);
--adm-danger-text: oklch(93.6% 0.032 17.717);
--adm-bug-bg: color-mix(in oklab, oklch(41% 0.159 10.272) 60%, transparent);
--adm-bug-bg: color-mix(in srgb, color-mix(in oklab, oklch(41% 0.159 10.272) 40%, transparent), black 15%);
--adm-bug-text: oklch(94.1% 0.03 12.58);
--adm-example-bg: color-mix(in oklab, oklch(38.1% 0.176 304.987) 60%, transparent);
--adm-danger-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
--adm-danger-text: oklch(93.6% 0.032 17.717);
--adm-example-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
--adm-example-text: oklch(94.6% 0.033 307.174);
--adm-quote-bg: color-mix(in oklab, oklch(21% 0.034 264.665) 60%, transparent);
--adm-failure-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.153 2.432) 40%, transparent), black 15%);
--adm-failure-text: oklch(94.8% 0.028 342.258);
--adm-info-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.9% 0.146 265.522) 40%, transparent), black 15%);
--adm-info-text: oklch(93.2% 0.032 255.585);
--adm-question-bg: color-mix(in srgb, color-mix(in oklab, oklch(41.4% 0.112 45.904) 40%, transparent), black 15%);
--adm-question-text: oklch(96.2% 0.059 95.617);
--adm-quote-bg: color-mix(in srgb, color-mix(in oklab, oklch(21% 0.034 264.665) 40%, transparent), black 15%);
--adm-quote-text: oklch(96.7% 0.003 264.542);
--adm-success-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
--adm-success-text: oklch(95% 0.052 163.051);
--adm-todo-bg: color-mix(in srgb, color-mix(in oklab, oklch(44.3% 0.11 240.79) 40%, transparent), black 15%);
--adm-todo-text: oklch(95.1% 0.026 236.824);
}
.admonition .admonition-content > * {
.admonition-content > :first-child {
margin-top: 0 !important;
}
.admonition-content > :last-child {
margin-bottom: 0 !important;
}
.admonition-content pre {
margin-block: 0 !important;
}
.admonition .admonition-content > * + * {
margin-top: 1.25em !important;
}
.admonition {
margin-block: calc(var(--spacing) * 3);
}
.prose .admonition + * {
margin-top: calc(var(--spacing) * 0);
}
.admonition[data-type="note"] {
border-color: var(--adm-note-border);
background-color: var(--adm-note-bg);
@@ -3721,51 +3671,51 @@ body.zen-mode-enable {
background-color: var(--adm-abstract-bg);
color: var(--adm-abstract-text);
}
.admonition[data-type="info"] {
border-color: var(--adm-info-border);
background-color: var(--adm-info-bg);
color: var(--adm-info-text);
}
.admonition[data-type="todo"] {
border-color: var(--adm-todo-border);
background-color: var(--adm-todo-bg);
color: var(--adm-todo-text);
}
.admonition[data-type="success"] {
border-color: var(--adm-success-border);
background-color: var(--adm-success-bg);
color: var(--adm-success-text);
}
.admonition[data-type="question"] {
border-color: var(--adm-question-border);
background-color: var(--adm-question-bg);
color: var(--adm-question-text);
}
.admonition[data-type="failure"] {
border-color: var(--adm-failure-border);
background-color: var(--adm-failure-bg);
color: var(--adm-failure-text);
.admonition[data-type="bug"] {
border-color: var(--adm-bug-border);
background-color: var(--adm-bug-bg);
color: var(--adm-bug-text);
}
.admonition[data-type="danger"] {
border-color: var(--adm-danger-border);
background-color: var(--adm-danger-bg);
color: var(--adm-danger-text);
}
.admonition[data-type="bug"] {
border-color: var(--adm-bug-border);
background-color: var(--adm-bug-bg);
color: var(--adm-bug-text);
}
.admonition[data-type="example"] {
border-color: var(--adm-example-border);
background-color: var(--adm-example-bg);
color: var(--adm-example-text);
}
.admonition[data-type="failure"] {
border-color: var(--adm-failure-border);
background-color: var(--adm-failure-bg);
color: var(--adm-failure-text);
}
.admonition[data-type="info"] {
border-color: var(--adm-info-border);
background-color: var(--adm-info-bg);
color: var(--adm-info-text);
}
.admonition[data-type="question"] {
border-color: var(--adm-question-border);
background-color: var(--adm-question-bg);
color: var(--adm-question-text);
}
.admonition[data-type="quote"] {
border-color: var(--adm-quote-border);
background-color: var(--adm-quote-bg);
color: var(--adm-quote-text);
}
.admonition[data-type="success"] {
border-color: var(--adm-success-border);
background-color: var(--adm-success-bg);
color: var(--adm-success-text);
}
.admonition[data-type="todo"] {
border-color: var(--adm-todo-border);
background-color: var(--adm-todo-bg);
color: var(--adm-todo-text);
}
}
body a, body button {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;