@aortl/admin-css 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admin.css +295 -20
- package/dist/admin.min.css +1 -1
- package/dist/admin.scoped.css +293 -20
- package/dist/admin.scoped.min.css +53 -16
- package/package.json +1 -1
- package/src/components/button-group.css +2 -2
- package/src/components/card.css +2 -3
- package/src/components/chart.css +3 -4
- package/src/components/checkbox.css +24 -0
- package/src/components/dialog.css +13 -3
- package/src/components/index.css +1 -0
- package/src/components/kbd.css +1 -2
- package/src/components/property-list.css +7 -13
- package/src/components/prose.css +115 -0
- package/src/components/radio.css +17 -0
- package/src/components/select.css +7 -3
- package/src/components/sidebar.css +1 -1
- package/src/components/tabs.css +89 -3
- package/src/components/textarea.css +3 -3
- package/src/theme.css +5 -0
|
@@ -64,7 +64,9 @@
|
|
|
64
64
|
:scope[data-theme=dark], :scope [data-theme=dark]{color-scheme:dark}
|
|
65
65
|
:scope[data-theme=light], :scope [data-theme=light]{color-scheme:light}
|
|
66
66
|
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
|
|
67
|
-
:scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fff;--color-black:#0f0f0f;--color-base-50:#fafafa;--color-base-100:#f4f4f4;--color-base-150:#e7e7e7;--color-base-200:#d4d4d4;--color-base-300:#b3b3b3;--color-base-400:#9b9b9b;--color-base-500:#848484;--color-base-600:#6c6c6c;--color-base-700:#555;--color-base-800:#3e3e3e;--color-base-850:#333;--color-base-900:#272727;--color-base-950:#1b1b1b;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-code-surface:light-dark(var(--color-base-150),var(--color-base-950));--color-code-text:light-dark(var(--color-base-800),var(--color-base-200));--color-
|
|
67
|
+
:scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fff;--color-black:#0f0f0f;--color-base-50:#fafafa;--color-base-100:#f4f4f4;--color-base-150:#e7e7e7;--color-base-200:#d4d4d4;--color-base-300:#b3b3b3;--color-base-400:#9b9b9b;--color-base-500:#848484;--color-base-600:#6c6c6c;--color-base-700:#555;--color-base-800:#3e3e3e;--color-base-850:#333;--color-base-900:#272727;--color-base-950:#1b1b1b;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-code-surface:light-dark(var(--color-base-150),var(--color-base-950));--color-code-text:light-dark(var(--color-base-800),var(--color-base-200));--color-scrim:#0f0f0f66}
|
|
68
|
+
@supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-scrim:color-mix(in oklab, var(--color-black) 40%, transparent)}}
|
|
69
|
+
:scope, :scope:host, :scope :host{--color-primary:light-dark(var(--color-black),var(--color-paper));--color-primary-hover:light-dark(var(--color-base-800),var(--color-base-200));--color-primary-muted:light-dark(var(--color-base-150),var(--color-base-800));--color-primary-content:light-dark(var(--color-paper),var(--color-black));--color-link:light-dark(var(--color-blue-600),var(--color-blue-400));--color-link-hover:light-dark(var(--color-blue-700),var(--color-blue-300));--color-focus:light-dark(var(--color-blue-600),var(--color-blue-400));--color-system-accent:light-dark(var(--color-base-600),var(--color-base-400));--color-system-accent-hover:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)), light-dark(var(--color-black),var(--color-base-200)) 12%)}
|
|
68
70
|
@supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-hover:color-mix(in oklch, var(--color-system-accent), var(--color-text) 12%)}}
|
|
69
71
|
:scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)) 12%, light-dark(var(--color-paper),var(--color-black)))}
|
|
70
72
|
@supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, var(--color-system-accent) 12%, var(--color-surface))}}
|
|
@@ -173,7 +175,7 @@
|
|
|
173
175
|
:scope._ao-badge-sm, :scope ._ao-badge-sm{height:calc(var(--spacing) * 4);gap:calc(var(--spacing) * .5);padding-inline:calc(var(--spacing) * 1.5);font-size:.625rem}
|
|
174
176
|
:scope._ao-badge-lg, :scope ._ao-badge-lg{height:calc(var(--spacing) * 6);gap:calc(var(--spacing) * 1.5);padding-inline:calc(var(--spacing) * 2.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
|
|
175
177
|
:scope._ao-brand-tile, :scope ._ao-brand-tile{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);background-color:var(--color-system-accent);--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);font-size:11px;line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-system-accent-content);-webkit-user-select:none;user-select:none;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}
|
|
176
|
-
:scope._ao-kbd, :scope ._ao-kbd{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-strong);vertical-align:middle;min-width:1.25em;height:1.4em;font-family:var(--font-mono);--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);font-variant-numeric:
|
|
178
|
+
:scope._ao-kbd, :scope ._ao-kbd{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-strong);vertical-align:middle;min-width:1.25em;height:1.4em;font-family:var(--font-mono);--tw-leading:1;white-space:nowrap;color:var(--color-text-muted);--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);border-radius:.25rem;justify-content:center;align-items:center;padding-inline:.35em;font-size:.75em;line-height:1;display:inline-flex}
|
|
177
179
|
:scope._ao-kbd-group, :scope ._ao-kbd-group{align-items:center;gap:calc(var(--spacing) * 1);vertical-align:middle;display:inline-flex}
|
|
178
180
|
:scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd{color:currentColor;background-color:currentColor}
|
|
179
181
|
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn ._ao-kbd, :scope ._ao-btn ._ao-kbd, :scope._ao-menu-item ._ao-kbd, :scope ._ao-menu-item ._ao-kbd{background-color:color-mix(in srgb, currentColor 12%, transparent)}}
|
|
@@ -243,11 +245,11 @@
|
|
|
243
245
|
:scope._ao-property-list, :scope ._ao-property-list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);flex-direction:column;display:flex}
|
|
244
246
|
:scope._ao-property-list-title, :scope ._ao-property-list-title{margin-bottom:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-text)}
|
|
245
247
|
:scope._ao-property-list-items, :scope ._ao-property-list-items{grid-template-columns:max-content 1fr;display:grid}
|
|
246
|
-
:scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value{
|
|
248
|
+
:scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value{min-height:calc(var(--spacing) * 8);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);align-items:center;display:flex}
|
|
247
249
|
:scope._ao-property-list-label, :scope ._ao-property-list-label{color:var(--color-text-muted)}
|
|
248
|
-
:scope._ao-property-list-value, :scope ._ao-property-list-value{overflow-wrap:break-word
|
|
250
|
+
:scope._ao-property-list-value, :scope ._ao-property-list-value{min-width:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 2);overflow-wrap:break-word}
|
|
249
251
|
:scope._ao-property-list-compact ._ao-property-list-title, :scope ._ao-property-list-compact ._ao-property-list-title{margin-bottom:calc(var(--spacing) * 1)}
|
|
250
|
-
:scope._ao-property-list-compact ._ao-property-list-label, :scope ._ao-property-list-compact ._ao-property-list-label, :scope._ao-property-list-compact ._ao-property-list-value, :scope ._ao-property-list-compact ._ao-property-list-value{min-height:
|
|
252
|
+
:scope._ao-property-list-compact ._ao-property-list-label, :scope ._ao-property-list-compact ._ao-property-list-label, :scope._ao-property-list-compact ._ao-property-list-value, :scope ._ao-property-list-compact ._ao-property-list-value{min-height:calc(var(--spacing) * 6);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5)}
|
|
251
253
|
:scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);justify-content:flex-end}
|
|
252
254
|
:scope._ao-property-list-striped dt:nth-of-type(2n+2), :scope ._ao-property-list-striped dt:nth-of-type(2n+2), :scope._ao-property-list-striped dd:nth-of-type(2n+2), :scope ._ao-property-list-striped dd:nth-of-type(2n+2){background-color:var(--color-surface-muted)}
|
|
253
255
|
:scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))){display:none}
|
|
@@ -296,14 +298,14 @@
|
|
|
296
298
|
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:first-child>._ao-menu-trigger{border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
|
|
297
299
|
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:last-child>._ao-menu-trigger{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
|
|
298
300
|
:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:currentColor}
|
|
299
|
-
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:color-mix(in
|
|
301
|
+
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical)>._ao-menu:not(:first-child)>._ao-menu-trigger{border-left-color:color-mix(in oklab, currentColor 25%, transparent)}}
|
|
300
302
|
:scope._ao-btn-group-vertical, :scope ._ao-btn-group-vertical{flex-direction:column;display:inline-flex}
|
|
301
303
|
:scope._ao-btn-group-vertical>._ao-btn, :scope ._ao-btn-group-vertical>._ao-btn{justify-content:flex-start}
|
|
302
304
|
:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child){margin-top:-1px}
|
|
303
305
|
:scope._ao-btn-group-vertical>._ao-btn:first-child, :scope ._ao-btn-group-vertical>._ao-btn:first-child, :scope._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:first-child>._ao-menu-trigger{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}
|
|
304
306
|
:scope._ao-btn-group-vertical>._ao-btn:last-child, :scope ._ao-btn-group-vertical>._ao-btn:last-child, :scope._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:last-child>._ao-menu-trigger{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}
|
|
305
307
|
:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:currentColor}
|
|
306
|
-
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:color-mix(in
|
|
308
|
+
@supports (color:color-mix(in lab, red, red)){:scope._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical>._ao-btn:not(:first-child), :scope._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger, :scope ._ao-btn-group-vertical>._ao-menu:not(:first-child)>._ao-menu-trigger{border-top-color:color-mix(in oklab, currentColor 25%, transparent)}}
|
|
307
309
|
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical), :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical){width:100%;display:flex}
|
|
308
310
|
:scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical)>._ao-menu{flex:1}
|
|
309
311
|
:scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical{width:100%}
|
|
@@ -374,6 +376,12 @@
|
|
|
374
376
|
@media (hover:hover){:scope:is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover, :scope :is(._ao-checkbox[data-checked],._ao-checkbox[data-indeterminate]):hover{background-color:var(--color-primary-hover)}}
|
|
375
377
|
:scope._ao-checkbox[data-disabled], :scope ._ao-checkbox[data-disabled]{cursor:not-allowed;opacity:.5}
|
|
376
378
|
:scope._ao-checkbox-indicator, :scope ._ao-checkbox-indicator{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);color:var(--color-primary-content);justify-content:center;align-items:center;display:inline-flex}
|
|
379
|
+
:scope input._ao-checkbox{appearance:none;border-color:var(--color-border-strong)}
|
|
380
|
+
@media (hover:hover){:scope input._ao-checkbox:hover{border-color:var(--color-text-muted)}}
|
|
381
|
+
:scope input._ao-checkbox{--checkbox-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
|
|
382
|
+
:scope input._ao-checkbox:checked, :scope input._ao-checkbox:indeterminate{border-color:var(--color-primary);background-color:var(--color-primary)}
|
|
383
|
+
@media (hover:hover){:scope:is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover, :scope :is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover{background-color:var(--color-primary-hover)}}
|
|
384
|
+
:scope input._ao-checkbox:checked:after, :scope input._ao-checkbox:indeterminate:after{content:"";width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);background-color:var(--color-primary-content);-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;mask:var(--checkbox-check) center / contain no-repeat}
|
|
377
385
|
:scope label:has(>._ao-checkbox){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
|
|
378
386
|
:scope label:has(>._ao-checkbox:disabled), :scope label:has(>._ao-checkbox[data-disabled]){cursor:not-allowed;opacity:.6}
|
|
379
387
|
:scope._ao-radio, :scope ._ao-radio{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-surface);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-width:1px;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
|
|
@@ -385,6 +393,11 @@
|
|
|
385
393
|
@media (hover:hover){:scope._ao-radio[data-checked]:hover, :scope ._ao-radio[data-checked]:hover{background-color:var(--color-primary-hover)}}
|
|
386
394
|
:scope._ao-radio[data-disabled], :scope ._ao-radio[data-disabled]{cursor:not-allowed;opacity:.5}
|
|
387
395
|
:scope._ao-radio-indicator, :scope ._ao-radio-indicator{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);background-color:var(--color-primary-content);border-radius:3.40282e38px;display:inline-flex}
|
|
396
|
+
:scope input._ao-radio{appearance:none;border-color:var(--color-border-strong)}
|
|
397
|
+
@media (hover:hover){:scope input._ao-radio:hover{border-color:var(--color-text-muted)}}
|
|
398
|
+
:scope input._ao-radio:checked{border-color:var(--color-primary);background-color:var(--color-primary)}
|
|
399
|
+
@media (hover:hover){:scope input._ao-radio:checked:hover{background-color:var(--color-primary-hover)}}
|
|
400
|
+
:scope input._ao-radio:checked:after{content:"";width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);background-color:var(--color-primary-content);border-radius:3.40282e38px}
|
|
388
401
|
:scope._ao-radio-group, :scope ._ao-radio-group{gap:calc(var(--spacing) * 4);flex-wrap:wrap;display:inline-flex}
|
|
389
402
|
:scope._ao-radio-group-vertical, :scope ._ao-radio-group-vertical{align-items:flex-start;gap:calc(var(--spacing) * 2);flex-direction:column}
|
|
390
403
|
:scope label:has(>._ao-radio){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
|
|
@@ -416,7 +429,7 @@
|
|
|
416
429
|
:scope._ao-select-danger:focus-visible, :scope ._ao-select-danger:focus-visible{outline-color:var(--color-danger)}
|
|
417
430
|
:scope._ao-select-sm, :scope ._ao-select-sm{padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
|
|
418
431
|
:scope._ao-select-lg, :scope ._ao-select-lg{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2.5);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
|
|
419
|
-
:scope select._ao-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%
|
|
432
|
+
:scope select._ao-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2rem}
|
|
420
433
|
:scope select._ao-select-sm{background-size:.875rem;padding-right:1.75rem}
|
|
421
434
|
:scope select._ao-select-lg{padding-right:2.25rem}
|
|
422
435
|
:scope._ao-select-icon, :scope ._ao-select-icon{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);color:var(--color-text-muted);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
|
|
@@ -430,7 +443,7 @@
|
|
|
430
443
|
:scope._ao-select-item[data-disabled], :scope ._ao-select-item[data-disabled]{cursor:not-allowed;opacity:.5}
|
|
431
444
|
:scope._ao-select-item-indicator, :scope ._ao-select-item-indicator{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);color:var(--color-primary);justify-content:center;align-items:center;margin-left:auto;display:inline-flex}
|
|
432
445
|
:scope._ao-select-group-label, :scope ._ao-select-group-label{padding-inline:calc(var(--spacing) * 3);padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);text-transform:uppercase}
|
|
433
|
-
:scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex
|
|
446
|
+
:scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex}
|
|
434
447
|
:scope._ao-card-body, :scope ._ao-card-body{gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 5);flex-direction:column;display:flex}
|
|
435
448
|
:scope._ao-card-title, :scope ._ao-card-title{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);display:flex}
|
|
436
449
|
:scope._ao-card-header, :scope ._ao-card-header{align-items:center;gap:calc(var(--spacing) * 2);display:flex}
|
|
@@ -462,14 +475,15 @@
|
|
|
462
475
|
:scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value{color:var(--color-danger)}
|
|
463
476
|
:scope._ao-dialog, :scope ._ao-dialog{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * 0);color:var(--color-text);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);opacity:1;width:calc(100% - 2rem);max-width:32rem;max-height:calc(100dvh - 2rem);transition:display .15s allow-discrete, overlay .15s allow-discrete, opacity .15s ease-out, transform .15s ease-out;flex-direction:column;margin:auto;transform:translateY(0)scale(1)}
|
|
464
477
|
:scope._ao-dialog[open], :scope ._ao-dialog[open]{display:flex}
|
|
465
|
-
:scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop{transition:display .15s allow-discrete, overlay .15s allow-discrete, background .15s ease-out
|
|
478
|
+
:scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop{background:var(--color-scrim);transition:display .15s allow-discrete, overlay .15s allow-discrete, background .15s ease-out}
|
|
466
479
|
@starting-style{:scope._ao-dialog[open], :scope ._ao-dialog[open]{opacity:0;transform:translateY(-.5rem)scale(.98)}:scope._ao-dialog[open]::backdrop, :scope ._ao-dialog[open]::backdrop{background:0 0}}
|
|
467
480
|
:scope._ao-dialog-sm, :scope ._ao-dialog-sm{max-width:24rem}
|
|
468
481
|
:scope._ao-dialog-lg, :scope ._ao-dialog-lg{max-width:48rem}
|
|
469
482
|
:scope._ao-dialog-header, :scope ._ao-dialog-header{align-items:flex-start;gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-top:calc(var(--spacing) * 5);padding-bottom:calc(var(--spacing) * 3);display:flex}
|
|
470
483
|
:scope._ao-dialog-title, :scope ._ao-dialog-title{margin:calc(var(--spacing) * 0);align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);flex:1;display:flex}
|
|
471
484
|
:scope._ao-dialog-description, :scope ._ao-dialog-description{margin-top:calc(var(--spacing) * -2);margin-bottom:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
|
|
472
|
-
:scope._ao-dialog-body, :scope ._ao-dialog-body{gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-direction:column;display:flex;overflow-y:auto}
|
|
485
|
+
:scope._ao-dialog-body, :scope ._ao-dialog-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-direction:column;flex:1;display:flex;overflow-y:auto}
|
|
486
|
+
:scope._ao-dialog>form, :scope ._ao-dialog>form{min-height:calc(var(--spacing) * 0);flex-direction:column;flex:1;display:flex}
|
|
473
487
|
:scope._ao-dialog-footer, :scope ._ao-dialog-footer{justify-content:flex-end;align-items:center;gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;flex-wrap:wrap;display:flex}
|
|
474
488
|
:scope._ao-dialog-close, :scope ._ao-dialog-close{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7);cursor:pointer;border-radius:var(--radius-md);color:var(--color-text-muted);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
|
|
475
489
|
@media (hover:hover){:scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover{background-color:var(--color-surface-strong);color:var(--color-text)}}
|
|
@@ -594,9 +608,7 @@
|
|
|
594
608
|
:scope._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible), :scope ._ao-sidebar-collapse-toggle:has(._ao-sidebar-toggle:focus-visible){outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
|
|
595
609
|
:scope._ao-sidebar-collapse-toggle:before, :scope ._ao-sidebar-collapse-toggle:before{content:"";border-bottom:2px solid;border-left:2px solid;width:.5rem;height:.5rem;transition:transform .15s;transform:rotate(45deg)}
|
|
596
610
|
:scope._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle:before, :scope ._ao-sidebar:has(._ao-sidebar-toggle:checked) ._ao-sidebar-collapse-toggle:before{transform:rotate(-135deg)}
|
|
597
|
-
:scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{inset:calc(var(--spacing) * 0);z-index:40;background-color
|
|
598
|
-
@supports (color:color-mix(in lab, red, red)){:scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}
|
|
599
|
-
:scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}
|
|
611
|
+
:scope._ao-sidebar-drawer-backdrop, :scope ._ao-sidebar-drawer-backdrop{inset:calc(var(--spacing) * 0);z-index:40;background-color:var(--color-scrim);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s;position:fixed}
|
|
600
612
|
:scope._ao-sidebar-drawer-backdrop[data-starting-style], :scope ._ao-sidebar-drawer-backdrop[data-starting-style], :scope._ao-sidebar-drawer-backdrop[data-ending-style], :scope ._ao-sidebar-drawer-backdrop[data-ending-style]{opacity:0}
|
|
601
613
|
:scope._ao-sidebar-drawer, :scope ._ao-sidebar-drawer{inset-block:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);z-index:50;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;width:min(var(--app-shell-sidebar-w,240px), 80vw);flex-direction:column;transition-duration:.15s;display:flex;position:fixed}
|
|
602
614
|
:scope._ao-sidebar-drawer[data-starting-style], :scope ._ao-sidebar-drawer[data-starting-style], :scope._ao-sidebar-drawer[data-ending-style], :scope ._ao-sidebar-drawer[data-ending-style]{--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}
|
|
@@ -615,8 +627,9 @@
|
|
|
615
627
|
:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{content:"";background-color:var(--color-primary);block-size:2px;transition:transform .15s;position:absolute;inset-block-end:-1px;inset-inline:0;transform:scaleX(0)}
|
|
616
628
|
:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked+._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-input:checked+._ao-tab:after{transform:scaleX(1)}
|
|
617
629
|
:scope._ao-tabs-boxed ._ao-tab-list, :scope ._ao-tabs-boxed ._ao-tab-list{gap:calc(var(--spacing) * 0);border-radius:var(--radius-md);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);padding:calc(var(--spacing) * .5)}
|
|
618
|
-
:scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab{border-radius:.25rem}
|
|
630
|
+
:scope._ao-tabs-boxed ._ao-tab, :scope ._ao-tabs-boxed ._ao-tab{z-index:1;border-radius:.25rem;position:relative}
|
|
619
631
|
:scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{background-color:var(--color-surface);color:var(--color-text);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
|
|
632
|
+
@supports (anchor-scope:--x){:scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list{anchor-scope:--tab-thumb}:scope._ao-tabs ._ao-tab[data-selected], :scope ._ao-tabs ._ao-tab[data-selected], :scope._ao-tabs ._ao-tab[aria-selected=true], :scope ._ao-tabs ._ao-tab[aria-selected=true], :scope._ao-tabs ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs ._ao-tab-input:checked+._ao-tab{anchor-name:--tab-thumb}:scope._ao-tabs ._ao-tab-list:before, :scope ._ao-tabs ._ao-tab-list:before{content:"";position-anchor:--tab-thumb;position:absolute}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{display:none}:scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab-list:before{background-color:var(--color-primary);left:anchor(left);right:anchor(right);block-size:2px;transition:left .18s,right .18s;inset-block-end:-1px}:scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab-list:before{inline-size:2px;inset-inline:auto -1px;top:anchor(top);bottom:anchor(bottom);block-size:auto;transition:top .18s,bottom .18s}:scope._ao-tabs-boxed ._ao-tab[data-selected], :scope ._ao-tabs-boxed ._ao-tab[data-selected], :scope._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope ._ao-tabs-boxed ._ao-tab[aria-selected=true], :scope._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab, :scope ._ao-tabs-boxed ._ao-tab-input:checked+._ao-tab{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000}:scope._ao-tabs-boxed ._ao-tab-list:before, :scope ._ao-tabs-boxed ._ao-tab-list:before{top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);z-index:0;background-color:var(--color-surface);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-radius:.25rem;transition:top .18s,right .18s,bottom .18s,left .18s}}
|
|
620
633
|
:scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab-list{width:100%;display:flex}
|
|
621
634
|
:scope._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab, :scope ._ao-tabs-full-width:not([data-orientation=vertical]) ._ao-tab{flex:1;justify-content:center}
|
|
622
635
|
:scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab{height:calc(var(--spacing) * 7);padding-inline:calc(var(--spacing) * 2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
|
|
@@ -628,6 +641,7 @@
|
|
|
628
641
|
:scope._ao-tabs[data-orientation=vertical] ._ao-tab, :scope ._ao-tabs[data-orientation=vertical] ._ao-tab{justify-content:flex-start;width:100%}
|
|
629
642
|
:scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab:after{block-size:auto;inline-size:2px;inset-block:0;inset-inline:auto -1px;transform:scaleY(0)}
|
|
630
643
|
:scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[data-selected]:after, :scope._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after, :scope ._ao-tabs[data-orientation=vertical]:not(._ao-tabs-boxed) ._ao-tab[aria-selected=true]:after{transform:scaleY(1)}
|
|
644
|
+
@media (prefers-reduced-motion:reduce){:scope._ao-tabs ._ao-tab-list:before, :scope ._ao-tabs ._ao-tab-list:before, :scope._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after, :scope ._ao-tabs:not(._ao-tabs-boxed) ._ao-tab:after{transition:none}}
|
|
631
645
|
:scope._ao-table, :scope ._ao-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text)}
|
|
632
646
|
:scope._ao-table :where(th,td), :scope ._ao-table :where(th,td), :scope._ao-table-cell, :scope ._ao-table-cell, :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);text-align:left;vertical-align:middle}
|
|
633
647
|
:scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-color:var(--color-border-strong);background-color:var(--color-surface-muted);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-text-muted)}
|
|
@@ -664,11 +678,34 @@
|
|
|
664
678
|
:scope._ao-tooltip-wrap:hover>._ao-tooltip, :scope ._ao-tooltip-wrap:hover>._ao-tooltip, :scope._ao-tooltip-wrap:focus-within>._ao-tooltip, :scope ._ao-tooltip-wrap:focus-within>._ao-tooltip{visibility:visible;opacity:1;transition:opacity .15s ease-out .2s,visibility 0s linear .2s}
|
|
665
679
|
:scope._ao-code-block, :scope ._ao-code-block{border-radius:var(--radius-lg);background-color:var(--color-code-surface);padding:calc(var(--spacing) * 3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-code-text);white-space:pre-wrap;word-wrap:break-word;overflow:auto}
|
|
666
680
|
:scope._ao-code-block-nowrap, :scope ._ao-code-block-nowrap{white-space:pre;word-wrap:normal}
|
|
681
|
+
:scope._ao-prose, :scope ._ao-prose{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal);color:var(--color-text)}
|
|
682
|
+
:scope._ao-prose :where(p,ul,ol,blockquote,pre,table,figure), :scope ._ao-prose :where(p,ul,ol,blockquote,pre,table,figure){margin-block:calc(var(--spacing) * 3)}
|
|
683
|
+
:scope._ao-prose>:first-child, :scope ._ao-prose>:first-child{margin-top:0}
|
|
684
|
+
:scope._ao-prose>:last-child, :scope ._ao-prose>:last-child{margin-bottom:0}
|
|
685
|
+
:scope._ao-prose :where(h1,h2,h3,h4,h5,h6), :scope ._ao-prose :where(h1,h2,h3,h4,h5,h6){margin-top:calc(var(--spacing) * 6);margin-bottom:calc(var(--spacing) * 2);--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
|
|
686
|
+
:scope._ao-prose :where(h4), :scope ._ao-prose :where(h4){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
|
|
687
|
+
:scope._ao-prose :where(h5,h6), :scope ._ao-prose :where(h5,h6){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);text-transform:uppercase}
|
|
688
|
+
:scope._ao-prose :where(ul), :scope ._ao-prose :where(ul){padding-inline-start:calc(var(--spacing) * 5);list-style-type:disc}
|
|
689
|
+
:scope._ao-prose :where(ol), :scope ._ao-prose :where(ol){padding-inline-start:calc(var(--spacing) * 5);list-style-type:decimal}
|
|
690
|
+
:scope._ao-prose :where(li), :scope ._ao-prose :where(li), :scope._ao-prose :where(li) :where(p), :scope ._ao-prose :where(li) :where(p), :scope._ao-prose :where(li>ul,li>ol), :scope ._ao-prose :where(li>ul,li>ol){margin-block:calc(var(--spacing) * 1)}
|
|
691
|
+
:scope._ao-prose :where(a), :scope ._ao-prose :where(a){border-radius:var(--radius-sm);color:var(--color-link);text-underline-offset:2px;text-decoration-line:underline}
|
|
692
|
+
@media (hover:hover){:scope._ao-prose :where(a):hover, :scope ._ao-prose :where(a):hover{color:var(--color-link-hover)}}
|
|
693
|
+
:scope._ao-prose :where(a):focus-visible, :scope ._ao-prose :where(a):focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
|
|
694
|
+
:scope._ao-prose :where(code), :scope ._ao-prose :where(code){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-code-surface);padding-inline:calc(var(--spacing) * 1);padding-block:calc(var(--spacing) * .5);font-family:var(--font-mono);color:var(--color-code-text);border-radius:.25rem;font-size:.85em}
|
|
695
|
+
:scope._ao-prose :where(pre), :scope ._ao-prose :where(pre){border-radius:var(--radius-lg);background-color:var(--color-code-surface);padding:calc(var(--spacing) * 3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-code-text);white-space:pre;overflow-x:auto}
|
|
696
|
+
:scope._ao-prose :where(pre) code, :scope ._ao-prose :where(pre) code{border-style:var(--tw-border-style);padding:calc(var(--spacing) * 0);font-size:inherit;background-color:#0000;border-width:0;border-radius:0}
|
|
697
|
+
:scope._ao-prose :where(blockquote), :scope ._ao-prose :where(blockquote){border-inline-start-style:var(--tw-border-style);border-inline-start-width:2px;border-color:var(--color-border-strong);color:var(--color-text-muted);padding-inline-start:calc(var(--spacing) * 3)}
|
|
698
|
+
:scope._ao-prose :where(hr), :scope ._ao-prose :where(hr){margin-block:calc(var(--spacing) * 6);border-style:var(--tw-border-style);border-width:0;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border)}
|
|
699
|
+
:scope._ao-prose :where(table), :scope ._ao-prose :where(table){border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
|
|
700
|
+
:scope._ao-prose :where(th,td), :scope ._ao-prose :where(th,td){border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);text-align:start;vertical-align:top}
|
|
701
|
+
:scope._ao-prose :where(thead th), :scope ._ao-prose :where(thead th){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
|
|
702
|
+
:scope._ao-prose :where(img), :scope ._ao-prose :where(img){border-radius:var(--radius-md);max-width:100%;height:auto}
|
|
703
|
+
:scope._ao-prose :where(figcaption), :scope ._ao-prose :where(figcaption){margin-top:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}
|
|
704
|
+
:scope._ao-prose :where(strong), :scope ._ao-prose :where(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
|
|
667
705
|
:scope._ao-chart, :scope ._ao-chart{--chart-max:100;--chart-height:8rem;--chart-size:8rem;--chart-gap:.25rem;color:var(--color-info)}
|
|
668
706
|
:scope._ao-chart-success, :scope ._ao-chart-success{color:var(--color-success)}
|
|
669
707
|
:scope._ao-chart-warning, :scope ._ao-chart-warning{color:var(--color-warning)}
|
|
670
708
|
:scope._ao-chart-danger, :scope ._ao-chart-danger{color:var(--color-danger)}
|
|
671
|
-
:scope._ao-chart-info, :scope ._ao-chart-info{color:var(--color-info)}
|
|
672
709
|
:scope._ao-chart-bars, :scope ._ao-chart-bars{row-gap:var(--chart-gap);grid-template-columns:auto 1fr auto;align-items:center;inline-size:100%;display:grid}
|
|
673
710
|
:scope._ao-chart-bar, :scope ._ao-chart-bar{grid-template-columns:subgrid;grid-column:1/-1;align-items:center;display:grid}
|
|
674
711
|
:scope._ao-chart-bar-label, :scope ._ao-chart-bar-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted);text-align:end;white-space:nowrap;grid-column:1;padding-inline-end:.5rem}
|
package/package.json
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
rules. */
|
|
48
48
|
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
|
|
49
49
|
.btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
|
|
50
|
-
border-left-color: color-mix(in
|
|
50
|
+
border-left-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.btn-group-vertical {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
|
|
76
76
|
.btn-group-vertical > .btn:not(:first-child),
|
|
77
77
|
.btn-group-vertical > .menu:not(:first-child) > .menu-trigger {
|
|
78
|
-
border-top-color: color-mix(in
|
|
78
|
+
border-top-color: color-mix(in oklab, currentColor 25%, transparent);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
/* Full width — the group stretches across its container instead of
|
package/src/components/card.css
CHANGED
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
bg-surface-muted text-text
|
|
5
5
|
border border-border
|
|
6
6
|
rounded-xl
|
|
7
|
-
shadow-xs
|
|
8
|
-
overflow-auto;
|
|
7
|
+
shadow-xs;
|
|
9
8
|
}
|
|
10
9
|
|
|
11
10
|
.card-body {
|
|
@@ -55,7 +54,7 @@
|
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
/* Neutral variant — sits flush with the page (`--color-surface`, the same
|
|
58
|
-
fill as `html`/`.app-shell`) instead of the raised `surface-
|
|
57
|
+
fill as `html`/`.app-shell`) instead of the raised `surface-muted` of a
|
|
59
58
|
default card. For de-emphasised or grouped panels that shouldn't pop off
|
|
60
59
|
the background. No accent, no status meaning. */
|
|
61
60
|
.card-muted {
|
package/src/components/chart.css
CHANGED
|
@@ -33,7 +33,9 @@
|
|
|
33
33
|
color: var(--color-info);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
/* Single-series semantic variants — recolour currentColor, like progress.
|
|
36
|
+
/* Single-series semantic variants — recolour currentColor, like progress.
|
|
37
|
+
`info` is the base colour (`.chart` above), so it needs no class — the
|
|
38
|
+
default `variant="info"` simply emits no modifier. */
|
|
37
39
|
.chart-success {
|
|
38
40
|
color: var(--color-success);
|
|
39
41
|
}
|
|
@@ -43,9 +45,6 @@
|
|
|
43
45
|
.chart-danger {
|
|
44
46
|
color: var(--color-danger);
|
|
45
47
|
}
|
|
46
|
-
.chart-info {
|
|
47
|
-
color: var(--color-info);
|
|
48
|
-
}
|
|
49
48
|
|
|
50
49
|
/* --------------------------------------------------------------------- *
|
|
51
50
|
* BAR CHART — horizontal (default) *
|
|
@@ -25,6 +25,30 @@
|
|
|
25
25
|
@apply inline-flex items-center justify-center size-3 text-primary-content;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
/* Native input variant: state is driven by :checked / :indeterminate, the
|
|
29
|
+
glyph is masked onto ::after. Mirrors the Base UI button variant above so a
|
|
30
|
+
vanilla <input class="checkbox"> renders identically (indeterminate reads
|
|
31
|
+
the same as checked, matching the data-* rule). The mask is the same
|
|
32
|
+
checkmark polyline the React indicator draws. */
|
|
33
|
+
input.checkbox {
|
|
34
|
+
@apply appearance-none border-border-strong hover:border-text-muted;
|
|
35
|
+
--checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
input.checkbox:checked,
|
|
39
|
+
input.checkbox:indeterminate {
|
|
40
|
+
@apply bg-primary border-primary hover:bg-primary-hover;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
input.checkbox:checked::after,
|
|
44
|
+
input.checkbox:indeterminate::after {
|
|
45
|
+
content: "";
|
|
46
|
+
@apply size-3;
|
|
47
|
+
background-color: var(--color-primary-content);
|
|
48
|
+
-webkit-mask: var(--checkbox-check) center / contain no-repeat;
|
|
49
|
+
mask: var(--checkbox-check) center / contain no-repeat;
|
|
50
|
+
}
|
|
51
|
+
|
|
28
52
|
/* A <label> wrapping a checkbox + text lays out inline with a small gap.
|
|
29
53
|
Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
|
|
30
54
|
label:has(> .checkbox) {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.dialog::backdrop {
|
|
29
|
-
background:
|
|
29
|
+
background: var(--color-scrim);
|
|
30
30
|
transition:
|
|
31
31
|
display 150ms allow-discrete,
|
|
32
32
|
overlay 150ms allow-discrete,
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
transform: translateY(-0.5rem) scale(0.98);
|
|
41
41
|
}
|
|
42
42
|
.dialog[open]::backdrop {
|
|
43
|
-
background:
|
|
43
|
+
background: transparent;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -66,8 +66,18 @@
|
|
|
66
66
|
@apply px-5 -mt-2 mb-3 text-sm text-text-muted;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
/* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
|
|
70
|
+
its content (a flex item's default `min-height: auto` would refuse to), so
|
|
71
|
+
tall content scrolls here while the header/footer stay pinned. */
|
|
69
72
|
.dialog-body {
|
|
70
|
-
@apply px-5 py-3 overflow-y-auto flex flex-col gap-3;
|
|
73
|
+
@apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
|
|
77
|
+
becomes the dialog's sole flex child — make it the flex column so the body's
|
|
78
|
+
`flex-1 min-h-0` still resolves and scrolls. */
|
|
79
|
+
.dialog > form {
|
|
80
|
+
@apply flex flex-col min-h-0 flex-1;
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
.dialog-footer {
|
package/src/components/index.css
CHANGED
package/src/components/kbd.css
CHANGED
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
rounded border border-border
|
|
8
8
|
bg-surface-strong text-text-muted
|
|
9
9
|
text-[0.75em] font-mono leading-none align-middle
|
|
10
|
-
whitespace-nowrap;
|
|
11
|
-
font-variant-numeric: tabular-nums;
|
|
10
|
+
whitespace-nowrap tabular-nums;
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
/* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
/* Outer section — owns striped,
|
|
2
|
+
/* Outer section — owns striped, hide-if-empty modifiers. Title
|
|
3
3
|
(optional) and the items grid stack vertically. */
|
|
4
4
|
.property-list {
|
|
5
5
|
@apply flex flex-col text-sm text-text;
|
|
@@ -18,23 +18,18 @@
|
|
|
18
18
|
|
|
19
19
|
.property-list-label,
|
|
20
20
|
.property-list-value {
|
|
21
|
-
|
|
22
|
-
align-items: center;
|
|
23
|
-
padding: 0.375rem 0.75rem;
|
|
24
|
-
min-height: 2rem;
|
|
21
|
+
@apply flex items-center px-3 py-1.5 min-h-8;
|
|
25
22
|
}
|
|
26
23
|
|
|
27
24
|
.property-list-label {
|
|
28
25
|
@apply text-text-muted;
|
|
29
26
|
}
|
|
30
27
|
|
|
31
|
-
/* `min-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
/* `min-w-0` lets the value's grid track shrink below its content; pair it
|
|
29
|
+
with `break-words` so long unbreakable values (IDs, hashes, emails, URLs,
|
|
30
|
+
file paths) break instead of overflowing the column. */
|
|
34
31
|
.property-list-value {
|
|
35
|
-
gap
|
|
36
|
-
min-width: 0;
|
|
37
|
-
overflow-wrap: break-word;
|
|
32
|
+
@apply gap-2 min-w-0 break-words;
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
/* Compact density — tighter rows for sidebar info blocks or very many
|
|
@@ -45,8 +40,7 @@
|
|
|
45
40
|
|
|
46
41
|
.property-list-compact .property-list-label,
|
|
47
42
|
.property-list-compact .property-list-value {
|
|
48
|
-
|
|
49
|
-
min-height: 1.5rem;
|
|
43
|
+
@apply px-2 py-0.5 min-h-6;
|
|
50
44
|
}
|
|
51
45
|
|
|
52
46
|
/* Numeric — right-align + tabular-nums on the value. */
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
/*
|
|
3
|
+
* Long-form rendered HTML — markdown output, CMS bodies, anything you can't
|
|
4
|
+
* annotate with the system's semantic class names. The global reset strips
|
|
5
|
+
* margins, list markers, and link styling from bare elements (so admin chrome
|
|
6
|
+
* stays neutral); `.prose` re-establishes them for its descendants only, using
|
|
7
|
+
* the semantic tokens so it follows dark mode and `--color-*` overrides.
|
|
8
|
+
*
|
|
9
|
+
* Descendant rules use `:where()` to stay at specificity 0 — a consumer's own
|
|
10
|
+
* `.prose a { … }` wins without `!important`.
|
|
11
|
+
*/
|
|
12
|
+
.prose {
|
|
13
|
+
@apply text-sm leading-normal text-text;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Vertical rhythm — space between flow blocks, none at the container edges. */
|
|
17
|
+
.prose :where(p, ul, ol, blockquote, pre, table, figure) {
|
|
18
|
+
@apply my-3;
|
|
19
|
+
}
|
|
20
|
+
.prose > :first-child {
|
|
21
|
+
margin-top: 0;
|
|
22
|
+
}
|
|
23
|
+
.prose > :last-child {
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Headings — base.css already sizes h1–h3; here we add h4–h6 and the
|
|
28
|
+
sectioning rhythm. The edge reset above zeroes a leading heading's margin. */
|
|
29
|
+
.prose :where(h1, h2, h3, h4, h5, h6) {
|
|
30
|
+
@apply mt-6 mb-2 font-semibold leading-tight;
|
|
31
|
+
}
|
|
32
|
+
.prose :where(h4) {
|
|
33
|
+
@apply text-sm;
|
|
34
|
+
}
|
|
35
|
+
.prose :where(h5, h6) {
|
|
36
|
+
@apply text-xs uppercase tracking-wide text-text-muted;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Lists — restore the markers the reset removes. */
|
|
40
|
+
.prose :where(ul) {
|
|
41
|
+
@apply list-disc ps-5;
|
|
42
|
+
}
|
|
43
|
+
.prose :where(ol) {
|
|
44
|
+
@apply list-decimal ps-5;
|
|
45
|
+
}
|
|
46
|
+
.prose :where(li) {
|
|
47
|
+
@apply my-1;
|
|
48
|
+
}
|
|
49
|
+
/* Loose lists wrap each item's text in <p> — tighten those back down. */
|
|
50
|
+
.prose :where(li) :where(p) {
|
|
51
|
+
@apply my-1;
|
|
52
|
+
}
|
|
53
|
+
/* Nested lists hug their parent item rather than taking full block spacing. */
|
|
54
|
+
.prose :where(li > ul, li > ol) {
|
|
55
|
+
@apply my-1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Links — the .link treatment without needing the class on every anchor. */
|
|
59
|
+
.prose :where(a) {
|
|
60
|
+
@apply rounded-sm text-link underline underline-offset-2
|
|
61
|
+
hover:text-link-hover
|
|
62
|
+
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Inline code — a tinted chip. */
|
|
66
|
+
.prose :where(code) {
|
|
67
|
+
@apply rounded border border-border bg-code-surface px-1 py-0.5
|
|
68
|
+
font-mono text-code-text;
|
|
69
|
+
font-size: 0.85em;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Code blocks — the .code-block surface; strip the inline chip off nested
|
|
73
|
+
<code> so a highlighter's own tokens show through. */
|
|
74
|
+
.prose :where(pre) {
|
|
75
|
+
@apply rounded-lg bg-code-surface p-3 font-mono text-sm text-code-text;
|
|
76
|
+
white-space: pre;
|
|
77
|
+
overflow-x: auto;
|
|
78
|
+
}
|
|
79
|
+
.prose :where(pre) code {
|
|
80
|
+
@apply rounded-none border-0 bg-transparent p-0;
|
|
81
|
+
font-size: inherit;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Blockquote — a quiet inline-start rule. */
|
|
85
|
+
.prose :where(blockquote) {
|
|
86
|
+
@apply border-s-2 border-border-strong ps-3 text-text-muted;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Thematic break. */
|
|
90
|
+
.prose :where(hr) {
|
|
91
|
+
@apply my-6 border-0 border-t border-border;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Tables — adopt the .table look for markdown's simple grids. */
|
|
95
|
+
.prose :where(table) {
|
|
96
|
+
@apply w-full border-collapse text-sm;
|
|
97
|
+
}
|
|
98
|
+
.prose :where(th, td) {
|
|
99
|
+
@apply border-b border-border px-3 py-2 text-start align-top;
|
|
100
|
+
}
|
|
101
|
+
.prose :where(thead th) {
|
|
102
|
+
@apply font-semibold text-text-muted;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Media + emphasis. */
|
|
106
|
+
.prose :where(img) {
|
|
107
|
+
@apply h-auto max-w-full rounded-md;
|
|
108
|
+
}
|
|
109
|
+
.prose :where(figcaption) {
|
|
110
|
+
@apply mt-1 text-xs text-text-muted;
|
|
111
|
+
}
|
|
112
|
+
.prose :where(strong) {
|
|
113
|
+
@apply font-semibold;
|
|
114
|
+
}
|
|
115
|
+
}
|
package/src/components/radio.css
CHANGED
|
@@ -24,6 +24,23 @@
|
|
|
24
24
|
@apply inline-flex size-1.5 rounded-full bg-primary-content;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/* Native input variant: state is driven by :checked, the dot is ::after.
|
|
28
|
+
Mirrors the Base UI span variant above so a vanilla <input class="radio">
|
|
29
|
+
renders identically (the dot matches .radio-indicator's size + colour). */
|
|
30
|
+
input.radio {
|
|
31
|
+
@apply appearance-none border-border-strong hover:border-text-muted;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
input.radio:checked {
|
|
35
|
+
@apply bg-primary border-primary hover:bg-primary-hover;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
input.radio:checked::after {
|
|
39
|
+
content: "";
|
|
40
|
+
@apply size-1.5 rounded-full;
|
|
41
|
+
background-color: var(--color-primary-content);
|
|
42
|
+
}
|
|
43
|
+
|
|
27
44
|
.radio-group {
|
|
28
45
|
@apply inline-flex flex-wrap gap-4;
|
|
29
46
|
}
|
|
@@ -37,12 +37,16 @@
|
|
|
37
37
|
|
|
38
38
|
/* Native <select> usage: same class, but suppress the native chevron and
|
|
39
39
|
supply our own via background-image so the look matches the Base UI
|
|
40
|
-
trigger.
|
|
41
|
-
|
|
40
|
+
trigger. A bare native <select> is a replaced element and can't host a
|
|
41
|
+
tinted `::after` (the React trigger uses a real `.select-icon` SVG), and
|
|
42
|
+
data URIs can't read CSS variables — so the chevron can't ride the
|
|
43
|
+
`--color-text-muted` token directly. The stroke is Flexoki `base-500`
|
|
44
|
+
(#848484), the same mid-gray as the token's dark-mode value, which reads
|
|
45
|
+
as a neutral chevron in both light and dark mode. */
|
|
42
46
|
select.select {
|
|
43
47
|
appearance: none;
|
|
44
48
|
padding-right: 2rem;
|
|
45
|
-
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%
|
|
49
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
|
|
46
50
|
background-repeat: no-repeat;
|
|
47
51
|
background-position: right 0.5rem center;
|
|
48
52
|
background-size: 1rem;
|