@layer kui.reset, kui.tokens, kui.base, kui.components, kui.utilities; /* ========================================================================= Kernel UI — layer 0: reset Deliberately small. A design system's reset should remove surprises, not impose opinions; opinions belong in kui.base. ========================================================================= */ @layer kui.reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Reserve the scrollbar so opening a modal does not shift the layout. */ scrollbar-gutter: stable; } body { min-block-size: 100%; } img, svg, video, canvas { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; padding: 0; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Mouse users should not see focus rings on click; keyboard users always should. Never `outline: none` without a :focus-visible replacement. */ :focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: var(--kui-ring-offset); } /* forced-colors (Windows High Contrast) strips box-shadow entirely, so the ring must be an `outline` — outline-color is forced to a system colour and survives. */ @media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } } } /* ========================================================================= Kernel UI — layer 1: colour primitives GENERATED by build/gen_tokens.py from build/palette.py. Do not edit. Steps follow the 12-step use-case model: 1 canvas · 2 subtle · 3 component · 4 hover · 5 active/selected 6 subtle border · 7 interactive border · 8 strong border / ring 9 solid · 10 solid hover · 11 low-contrast text · 12 high-contrast text Primitives are redefined per theme; the semantic layer never is. ========================================================================= */ @layer kui.tokens { :root { --kui-ink: oklch(22% 0.007 265); /* fixed dark ink for light solids */ color-scheme: light dark; } /* ---------------- light (default + explicit) ---------------- */ :root, [data-kui-theme="light"] { color-scheme: light; /* --- neutral ramp (hue 265, chroma <= 0.010) --------------- */ --kui-gray-1: oklch(99.2% 0.001 265); --kui-gray-2: oklch(98.1% 0.002 265); --kui-gray-3: oklch(95.6% 0.003 265); --kui-gray-4: oklch(93.2% 0.004 265); --kui-gray-5: oklch(90.8% 0.005 265); --kui-gray-6: oklch(88% 0.005 265); --kui-gray-7: oklch(84.5% 0.006 265); --kui-gray-8: oklch(77% 0.007 265); --kui-gray-9: oklch(64% 0.008 265); --kui-gray-10: oklch(60% 0.008 265); --kui-gray-11: oklch(46.5% 0.008 265); --kui-gray-12: oklch(22% 0.007 265); /* --- alpha ramp: composites correctly on any surface ------- */ --kui-alpha-2: oklch(0 0 0 / 0.025); --kui-alpha-3: oklch(0 0 0 / 0.045); --kui-alpha-4: oklch(0 0 0 / 0.070); --kui-alpha-5: oklch(0 0 0 / 0.095); --kui-alpha-6: oklch(0 0 0 / 0.105); --kui-alpha-7: oklch(0 0 0 / 0.150); --kui-alpha-8: oklch(0 0 0 / 0.220); --kui-alpha-9: oklch(0 0 0 / 0.400); /* --- accent (hue 250) */ --kui-accent-1: oklch(99% 0.004 250); --kui-accent-2: oklch(97.6% 0.01 250); --kui-accent-3: oklch(94.6% 0.0268 250); --kui-accent-4: oklch(91.4% 0.0432 250); --kui-accent-5: oklch(87.6% 0.0632 250); --kui-accent-6: oklch(82.6% 0.086 250); --kui-accent-7: oklch(75.5% 0.106 250); --kui-accent-8: oklch(66% 0.14 250); --kui-accent-9: oklch(53.73% 0.1522 250); --kui-accent-10: oklch(49.73% 0.1409 250); --kui-accent-11: oklch(47% 0.1332 250); --kui-accent-12: oklch(26% 0.0741 250); --kui-accent-contrast: oklch(100% 0 0); --kui-accent-border: oklch(61.51% 0.14 250); /* --- info (hue 237) */ --kui-info-1: oklch(99% 0.004 237); --kui-info-2: oklch(97.6% 0.01 237); --kui-info-3: oklch(94.6% 0.028 237); --kui-info-4: oklch(91.4% 0.0478 237); --kui-info-5: oklch(87.6% 0.068 237); --kui-info-6: oklch(82.6% 0.086 237); --kui-info-7: oklch(75.5% 0.106 237); --kui-info-8: oklch(66% 0.14 237); --kui-info-9: oklch(52% 0.1136 237); --kui-info-10: oklch(48% 0.1049 237); --kui-info-11: oklch(47% 0.1027 237); --kui-info-12: oklch(26% 0.0571 237); --kui-info-contrast: oklch(100% 0 0); --kui-info-border: oklch(61.12% 0.1335 237); /* --- success (hue 155) */ --kui-success-1: oklch(99% 0.004 155); --kui-success-2: oklch(97.6% 0.01 155); --kui-success-3: oklch(94.6% 0.028 155); --kui-success-4: oklch(91.4% 0.048 155); --kui-success-5: oklch(87.6% 0.068 155); --kui-success-6: oklch(82.6% 0.086 155); --kui-success-7: oklch(75.5% 0.106 155); --kui-success-8: oklch(66% 0.14 155); --kui-success-9: oklch(52% 0.1287 155); --kui-success-10: oklch(48% 0.1188 155); --kui-success-11: oklch(47% 0.1163 155); --kui-success-12: oklch(26% 0.0647 155); --kui-success-contrast: oklch(100% 0 0); --kui-success-border: oklch(60.12% 0.14 155); /* --- warning (hue 75) */ --kui-warning-1: oklch(99% 0.006 75); --kui-warning-2: oklch(97.6% 0.016 75); --kui-warning-3: oklch(94.6% 0.038 75); --kui-warning-4: oklch(91.4% 0.058 75); --kui-warning-5: oklch(87.6% 0.076 75); --kui-warning-6: oklch(82.6% 0.092 75); --kui-warning-7: oklch(75.5% 0.108 75); --kui-warning-8: oklch(66% 0.124 75); --kui-warning-9: oklch(80% 0.1161 75); --kui-warning-10: oklch(76.5% 0.1067 75); --kui-warning-11: oklch(47% 0.0993 75); --kui-warning-12: oklch(26% 0.0553 75); --kui-warning-contrast: var(--kui-ink); --kui-warning-border: oklch(61.96% 0.124 75); /* --- danger (hue 27) */ --kui-danger-1: oklch(99% 0.004 27); --kui-danger-2: oklch(97.6% 0.01 27); --kui-danger-3: oklch(94.6% 0.027 27); --kui-danger-4: oklch(91.4% 0.0442 27); --kui-danger-5: oklch(87.6% 0.066 27); --kui-danger-6: oklch(82.6% 0.086 27); --kui-danger-7: oklch(75.5% 0.106 27); --kui-danger-8: oklch(66% 0.14 27); --kui-danger-9: oklch(53% 0.16 27); --kui-danger-10: oklch(49% 0.155 27); --kui-danger-11: oklch(47% 0.15 27); --kui-danger-12: oklch(26% 0.08 27); --kui-danger-contrast: oklch(100% 0 0); --kui-danger-border: oklch(62.79% 0.14 27); /* --- surfaces: elevation is shadow in light, lightness in dark */ --kui-surface-sunken: var(--kui-gray-2); --kui-surface-base: var(--kui-gray-1); --kui-surface-raised: oklch(100% 0 0); --kui-surface-overlay: oklch(100% 0 0); --kui-surface-overlay-2: oklch(100% 0 0); --kui-surface-inset: var(--kui-gray-2); /* --- solved single-purpose primitives ---------------------- */ --kui-border-input-color: oklch(62.13% 0.008 265); --kui-border-input-hover-color: oklch(54.13% 0.008 265); --kui-ring-color-primitive: oklch(60.55% 0.14 250); --kui-fg-disabled-color: oklch(62.13% 0.008 265); /* --- data visualisation: apply strictly in index order ----- */ --kui-chart-1: oklch(53% 0.135 250); --kui-chart-2: oklch(53% 0.1149 70); --kui-chart-3: oklch(53% 0.0935 185); --kui-chart-4: oklch(53% 0.135 305); --kui-chart-5: oklch(53% 0.135 27); --kui-chart-6: oklch(53% 0.0966 220); --kui-chart-7: oklch(53% 0.135 345); --kui-chart-8: oklch(53% 0.135 145); /* --- shadows: ambient + contact, ring baked into floating -- */ --kui-shadow-ring: 0 0 0 1px var(--kui-alpha-6); --kui-shadow-umbra: 0 0% 0%; --kui-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / .04); --kui-shadow-sm: 0 1px 2px -1px oklch(0 0 0 / .06), 0 1px 3px 0 oklch(0 0 0 / .05); --kui-shadow-md: var(--kui-shadow-ring), 0 2px 4px -2px oklch(0 0 0 / .06), 0 4px 8px -2px oklch(0 0 0 / .06); --kui-shadow-lg: var(--kui-shadow-ring), 0 4px 6px -4px oklch(0 0 0 / .07), 0 12px 20px -4px oklch(0 0 0 / .08); --kui-shadow-xl: var(--kui-shadow-ring), 0 8px 12px -6px oklch(0 0 0 / .08), 0 24px 40px -8px oklch(0 0 0 / .12); --kui-shadow-2xl: var(--kui-shadow-ring), 0 12px 16px -8px oklch(0 0 0 / .10), 0 40px 64px -12px oklch(0 0 0 / .16); --kui-shadow-inset: inset 0 1px 0 0 oklch(0 0 0 / .04); --kui-shadow-overflow: 0 4px 6px -4px oklch(0 0 0 / .12); } /* ---------------- dark (OS preference) ---------------------- */ @media (prefers-color-scheme: dark) { :root:where(:not([data-kui-theme="light"])) { color-scheme: dark; /* --- neutral ramp (hue 265, chroma <= 0.010) --------------- */ --kui-gray-1: oklch(17.8% 0.004 265); --kui-gray-2: oklch(21.3% 0.005 265); --kui-gray-3: oklch(25.5% 0.006 265); --kui-gray-4: oklch(28.4% 0.007 265); --kui-gray-5: oklch(31.3% 0.008 265); --kui-gray-6: oklch(35% 0.008 265); --kui-gray-7: oklch(40.5% 0.009 265); --kui-gray-8: oklch(49.5% 0.01 265); --kui-gray-9: oklch(58% 0.01 265); --kui-gray-10: oklch(63.5% 0.01 265); --kui-gray-11: oklch(72.5% 0.009 265); --kui-gray-12: oklch(96% 0.004 265); /* --- alpha ramp: composites correctly on any surface ------- */ --kui-alpha-2: oklch(100% 0 0 / 0.030); --kui-alpha-3: oklch(100% 0 0 / 0.050); --kui-alpha-4: oklch(100% 0 0 / 0.075); --kui-alpha-5: oklch(100% 0 0 / 0.100); --kui-alpha-6: oklch(100% 0 0 / 0.080); --kui-alpha-7: oklch(100% 0 0 / 0.120); --kui-alpha-8: oklch(100% 0 0 / 0.190); --kui-alpha-9: oklch(100% 0 0 / 0.380); /* --- accent (hue 250) */ --kui-accent-1: oklch(18.5% 0.008 250); --kui-accent-2: oklch(22% 0.018 250); --kui-accent-3: oklch(27.5% 0.04 250); --kui-accent-4: oklch(31.5% 0.058 250); --kui-accent-5: oklch(35.5% 0.072 250); --kui-accent-6: oklch(41% 0.09 250); --kui-accent-7: oklch(47% 0.108 250); --kui-accent-8: oklch(54% 0.13 250); --kui-accent-9: oklch(70% 0.15 250); --kui-accent-10: oklch(73.5% 0.1396 250); --kui-accent-11: oklch(78% 0.1163 250); --kui-accent-12: oklch(92% 0.0401 250); --kui-accent-contrast: var(--kui-ink); --kui-accent-border: oklch(55.91% 0.13 250); /* --- info (hue 237) */ --kui-info-1: oklch(18.5% 0.008 237); --kui-info-2: oklch(22% 0.018 237); --kui-info-3: oklch(27.5% 0.04 237); --kui-info-4: oklch(31.5% 0.058 237); --kui-info-5: oklch(35.5% 0.072 237); --kui-info-6: oklch(41% 0.0897 237); --kui-info-7: oklch(47% 0.1027 237); --kui-info-8: oklch(54% 0.118 237); --kui-info-9: oklch(70% 0.15 237); --kui-info-10: oklch(73.5% 0.145 237); --kui-info-11: oklch(78% 0.12 237); --kui-info-12: oklch(92% 0.0444 237); --kui-info-contrast: var(--kui-ink); --kui-info-border: oklch(55.75% 0.118 237); /* --- success (hue 155) */ --kui-success-1: oklch(18.5% 0.008 155); --kui-success-2: oklch(22% 0.018 155); --kui-success-3: oklch(27.5% 0.04 155); --kui-success-4: oklch(31.5% 0.058 155); --kui-success-5: oklch(35.5% 0.072 155); --kui-success-6: oklch(41% 0.09 155); --kui-success-7: oklch(47% 0.108 155); --kui-success-8: oklch(54% 0.13 155); --kui-success-9: oklch(70% 0.15 155); --kui-success-10: oklch(73.5% 0.145 155); --kui-success-11: oklch(78% 0.12 155); --kui-success-12: oklch(92% 0.05 155); --kui-success-contrast: var(--kui-ink); --kui-success-border: oklch(54.68% 0.13 155); /* --- warning (hue 75) */ --kui-warning-1: oklch(18.5% 0.01 75); --kui-warning-2: oklch(22% 0.02 75); --kui-warning-3: oklch(27.5% 0.044 75); --kui-warning-4: oklch(31.5% 0.062 75); --kui-warning-5: oklch(35.5% 0.0751 75); --kui-warning-6: oklch(41% 0.0867 75); --kui-warning-7: oklch(47% 0.0993 75); --kui-warning-8: oklch(54% 0.114 75); --kui-warning-9: oklch(70% 0.1477 75); --kui-warning-10: oklch(73.5% 0.145 75); --kui-warning-11: oklch(78% 0.12 75); --kui-warning-12: oklch(92% 0.045 75); --kui-warning-contrast: var(--kui-ink); --kui-warning-border: oklch(56.19% 0.114 75); /* --- danger (hue 27) */ --kui-danger-1: oklch(18.5% 0.008 27); --kui-danger-2: oklch(22% 0.018 27); --kui-danger-3: oklch(27.5% 0.04 27); --kui-danger-4: oklch(31.5% 0.058 27); --kui-danger-5: oklch(35.5% 0.072 27); --kui-danger-6: oklch(41% 0.09 27); --kui-danger-7: oklch(47% 0.108 27); --kui-danger-8: oklch(54% 0.13 27); --kui-danger-9: oklch(70% 0.15 27); --kui-danger-10: oklch(73.5% 0.145 27); --kui-danger-11: oklch(78% 0.12 27); --kui-danger-12: oklch(92% 0.0409 27); --kui-danger-contrast: var(--kui-ink); --kui-danger-border: oklch(57.28% 0.13 27); /* --- surfaces: elevation is shadow in light, lightness in dark */ --kui-surface-sunken: oklch(13% 0.004 265); --kui-surface-base: var(--kui-gray-1); --kui-surface-raised: var(--kui-gray-2); --kui-surface-overlay: var(--kui-gray-3); --kui-surface-overlay-2: var(--kui-gray-4); --kui-surface-inset: oklch(14.5% 0.004 265); /* --- solved single-purpose primitives ---------------------- */ --kui-border-input-color: oklch(54.61% 0.01 265); --kui-border-input-hover-color: oklch(62.61% 0.01 265); --kui-ring-color-primitive: oklch(56.9% 0.13 250); --kui-fg-disabled-color: oklch(54.61% 0.01 265); /* --- data visualisation: apply strictly in index order ----- */ --kui-chart-1: oklch(72% 0.135 250); --kui-chart-2: oklch(72% 0.135 70); --kui-chart-3: oklch(72% 0.1269 185); --kui-chart-4: oklch(72% 0.135 305); --kui-chart-5: oklch(72% 0.135 27); --kui-chart-6: oklch(72% 0.1311 220); --kui-chart-7: oklch(72% 0.135 345); --kui-chart-8: oklch(72% 0.135 145); /* --- shadows: ambient + contact, ring baked into floating -- */ --kui-shadow-ring: 0 0 0 1px oklch(100% 0 0 / .07); --kui-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / .30); --kui-shadow-sm: 0 1px 2px -1px oklch(0 0 0 / .40), 0 1px 3px 0 oklch(0 0 0 / .32); --kui-shadow-md: var(--kui-shadow-ring), 0 2px 4px -2px oklch(0 0 0 / .40), 0 4px 8px -2px oklch(0 0 0 / .40); --kui-shadow-lg: var(--kui-shadow-ring), 0 4px 6px -4px oklch(0 0 0 / .45), 0 12px 20px -4px oklch(0 0 0 / .50); --kui-shadow-xl: var(--kui-shadow-ring), 0 8px 12px -6px oklch(0 0 0 / .50), 0 24px 40px -8px oklch(0 0 0 / .60); --kui-shadow-2xl: var(--kui-shadow-ring), 0 12px 16px -8px oklch(0 0 0 / .55), 0 40px 64px -12px oklch(0 0 0 / .70); --kui-shadow-inset: inset 0 1px 0 0 oklch(100% 0 0 / .04); --kui-shadow-overflow: 0 4px 6px -4px oklch(0 0 0 / .5); } } /* ---------------- dark (explicit override) ------------------ */ [data-kui-theme="dark"] { color-scheme: dark; /* --- neutral ramp (hue 265, chroma <= 0.010) --------------- */ --kui-gray-1: oklch(17.8% 0.004 265); --kui-gray-2: oklch(21.3% 0.005 265); --kui-gray-3: oklch(25.5% 0.006 265); --kui-gray-4: oklch(28.4% 0.007 265); --kui-gray-5: oklch(31.3% 0.008 265); --kui-gray-6: oklch(35% 0.008 265); --kui-gray-7: oklch(40.5% 0.009 265); --kui-gray-8: oklch(49.5% 0.01 265); --kui-gray-9: oklch(58% 0.01 265); --kui-gray-10: oklch(63.5% 0.01 265); --kui-gray-11: oklch(72.5% 0.009 265); --kui-gray-12: oklch(96% 0.004 265); /* --- alpha ramp: composites correctly on any surface ------- */ --kui-alpha-2: oklch(100% 0 0 / 0.030); --kui-alpha-3: oklch(100% 0 0 / 0.050); --kui-alpha-4: oklch(100% 0 0 / 0.075); --kui-alpha-5: oklch(100% 0 0 / 0.100); --kui-alpha-6: oklch(100% 0 0 / 0.080); --kui-alpha-7: oklch(100% 0 0 / 0.120); --kui-alpha-8: oklch(100% 0 0 / 0.190); --kui-alpha-9: oklch(100% 0 0 / 0.380); /* --- accent (hue 250) */ --kui-accent-1: oklch(18.5% 0.008 250); --kui-accent-2: oklch(22% 0.018 250); --kui-accent-3: oklch(27.5% 0.04 250); --kui-accent-4: oklch(31.5% 0.058 250); --kui-accent-5: oklch(35.5% 0.072 250); --kui-accent-6: oklch(41% 0.09 250); --kui-accent-7: oklch(47% 0.108 250); --kui-accent-8: oklch(54% 0.13 250); --kui-accent-9: oklch(70% 0.15 250); --kui-accent-10: oklch(73.5% 0.1396 250); --kui-accent-11: oklch(78% 0.1163 250); --kui-accent-12: oklch(92% 0.0401 250); --kui-accent-contrast: var(--kui-ink); --kui-accent-border: oklch(55.91% 0.13 250); /* --- info (hue 237) */ --kui-info-1: oklch(18.5% 0.008 237); --kui-info-2: oklch(22% 0.018 237); --kui-info-3: oklch(27.5% 0.04 237); --kui-info-4: oklch(31.5% 0.058 237); --kui-info-5: oklch(35.5% 0.072 237); --kui-info-6: oklch(41% 0.0897 237); --kui-info-7: oklch(47% 0.1027 237); --kui-info-8: oklch(54% 0.118 237); --kui-info-9: oklch(70% 0.15 237); --kui-info-10: oklch(73.5% 0.145 237); --kui-info-11: oklch(78% 0.12 237); --kui-info-12: oklch(92% 0.0444 237); --kui-info-contrast: var(--kui-ink); --kui-info-border: oklch(55.75% 0.118 237); /* --- success (hue 155) */ --kui-success-1: oklch(18.5% 0.008 155); --kui-success-2: oklch(22% 0.018 155); --kui-success-3: oklch(27.5% 0.04 155); --kui-success-4: oklch(31.5% 0.058 155); --kui-success-5: oklch(35.5% 0.072 155); --kui-success-6: oklch(41% 0.09 155); --kui-success-7: oklch(47% 0.108 155); --kui-success-8: oklch(54% 0.13 155); --kui-success-9: oklch(70% 0.15 155); --kui-success-10: oklch(73.5% 0.145 155); --kui-success-11: oklch(78% 0.12 155); --kui-success-12: oklch(92% 0.05 155); --kui-success-contrast: var(--kui-ink); --kui-success-border: oklch(54.68% 0.13 155); /* --- warning (hue 75) */ --kui-warning-1: oklch(18.5% 0.01 75); --kui-warning-2: oklch(22% 0.02 75); --kui-warning-3: oklch(27.5% 0.044 75); --kui-warning-4: oklch(31.5% 0.062 75); --kui-warning-5: oklch(35.5% 0.0751 75); --kui-warning-6: oklch(41% 0.0867 75); --kui-warning-7: oklch(47% 0.0993 75); --kui-warning-8: oklch(54% 0.114 75); --kui-warning-9: oklch(70% 0.1477 75); --kui-warning-10: oklch(73.5% 0.145 75); --kui-warning-11: oklch(78% 0.12 75); --kui-warning-12: oklch(92% 0.045 75); --kui-warning-contrast: var(--kui-ink); --kui-warning-border: oklch(56.19% 0.114 75); /* --- danger (hue 27) */ --kui-danger-1: oklch(18.5% 0.008 27); --kui-danger-2: oklch(22% 0.018 27); --kui-danger-3: oklch(27.5% 0.04 27); --kui-danger-4: oklch(31.5% 0.058 27); --kui-danger-5: oklch(35.5% 0.072 27); --kui-danger-6: oklch(41% 0.09 27); --kui-danger-7: oklch(47% 0.108 27); --kui-danger-8: oklch(54% 0.13 27); --kui-danger-9: oklch(70% 0.15 27); --kui-danger-10: oklch(73.5% 0.145 27); --kui-danger-11: oklch(78% 0.12 27); --kui-danger-12: oklch(92% 0.0409 27); --kui-danger-contrast: var(--kui-ink); --kui-danger-border: oklch(57.28% 0.13 27); /* --- surfaces: elevation is shadow in light, lightness in dark */ --kui-surface-sunken: oklch(13% 0.004 265); --kui-surface-base: var(--kui-gray-1); --kui-surface-raised: var(--kui-gray-2); --kui-surface-overlay: var(--kui-gray-3); --kui-surface-overlay-2: var(--kui-gray-4); --kui-surface-inset: oklch(14.5% 0.004 265); /* --- solved single-purpose primitives ---------------------- */ --kui-border-input-color: oklch(54.61% 0.01 265); --kui-border-input-hover-color: oklch(62.61% 0.01 265); --kui-ring-color-primitive: oklch(56.9% 0.13 250); --kui-fg-disabled-color: oklch(54.61% 0.01 265); /* --- data visualisation: apply strictly in index order ----- */ --kui-chart-1: oklch(72% 0.135 250); --kui-chart-2: oklch(72% 0.135 70); --kui-chart-3: oklch(72% 0.1269 185); --kui-chart-4: oklch(72% 0.135 305); --kui-chart-5: oklch(72% 0.135 27); --kui-chart-6: oklch(72% 0.1311 220); --kui-chart-7: oklch(72% 0.135 345); --kui-chart-8: oklch(72% 0.135 145); /* --- shadows: ambient + contact, ring baked into floating -- */ --kui-shadow-ring: 0 0 0 1px oklch(100% 0 0 / .07); --kui-shadow-xs: 0 1px 1px 0 oklch(0 0 0 / .30); --kui-shadow-sm: 0 1px 2px -1px oklch(0 0 0 / .40), 0 1px 3px 0 oklch(0 0 0 / .32); --kui-shadow-md: var(--kui-shadow-ring), 0 2px 4px -2px oklch(0 0 0 / .40), 0 4px 8px -2px oklch(0 0 0 / .40); --kui-shadow-lg: var(--kui-shadow-ring), 0 4px 6px -4px oklch(0 0 0 / .45), 0 12px 20px -4px oklch(0 0 0 / .50); --kui-shadow-xl: var(--kui-shadow-ring), 0 8px 12px -6px oklch(0 0 0 / .50), 0 24px 40px -8px oklch(0 0 0 / .60); --kui-shadow-2xl: var(--kui-shadow-ring), 0 12px 16px -8px oklch(0 0 0 / .55), 0 40px 64px -12px oklch(0 0 0 / .70); --kui-shadow-inset: inset 0 1px 0 0 oklch(100% 0 0 / .04); --kui-shadow-overflow: 0 4px 6px -4px oklch(0 0 0 / .5); } } /* ========================================================================= Kernel UI — layer 1b: dimensional primitives Typography · spacing · radius · borders · motion · density · shell · z ========================================================================= */ @layer kui.tokens { :root { /* --------------------------------------------------------------------- Typography Body is 14px expressed as 0.875rem. The root font-size is NEVER set by Kernel UI, so a user who raises their browser's default font size gets proportionally larger text everywhere. 14px is the enterprise consensus (Ant, Atlassian, Fluent, Primer, Carbon-productive, Geist, shadcn, AG Grid); 16px costs ~12-15% of rows per viewport, and horizontal scrolling is a worse accessibility outcome than slightly smaller glyphs. --------------------------------------------------------------------- */ --kui-font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; --kui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Geist Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", monospace; /* size / line-height / tracking triplets */ --kui-text-2xs: 0.6875rem; --kui-text-2xs-lh: 1rem; --kui-text-2xs-ls: 0.04em; --kui-text-xs: 0.75rem; --kui-text-xs-lh: 1rem; --kui-text-xs-ls: 0.005em; --kui-text-sm: 0.8125rem; --kui-text-sm-lh: 1.125rem; --kui-text-sm-ls: 0.0025em; --kui-text-md: 0.875rem; --kui-text-md-lh: 1.25rem; --kui-text-md-ls: 0em; --kui-text-md-tight-lh: 1.125rem; --kui-text-lg: 1rem; --kui-text-lg-lh: 1.5rem; --kui-text-lg-ls: -0.0025em; --kui-text-xl: 1.125rem; --kui-text-xl-lh: 1.5rem; --kui-text-xl-ls: -0.005em; --kui-text-2xl: 1.25rem; --kui-text-2xl-lh: 1.75rem; --kui-text-2xl-ls: -0.0075em; --kui-text-3xl: 1.5rem; --kui-text-3xl-lh: 2rem; --kui-text-3xl-ls: -0.01em; --kui-text-4xl: 1.875rem; --kui-text-4xl-lh: 2.25rem; --kui-text-4xl-ls: -0.015em; --kui-weight-normal: 400; --kui-weight-medium: 500; --kui-weight-semibold: 600; /* Numerals are the same face with different features, never a second family — a separate numeric face breaks the texture of a dense table. */ --kui-font-feature-numeric: "tnum" 1, "zero" 1, "cv08" 1; /* --------------------------------------------------------------------- Spacing — rem, named on Tailwind's n x 4px convention so the Tailwind mapping is a no-op and --kui-space-3 is exactly p-3. rem (not px) because type is in rem: px spacing desynchronises from text when the user raises their browser font-size preference. --------------------------------------------------------------------- */ --kui-space-0: 0; --kui-space-px: 1px; --kui-space-0-5: 0.125rem; /* 2 */ --kui-space-1: 0.25rem; /* 4 */ --kui-space-1-5: 0.375rem; /* 6 */ --kui-space-2: 0.5rem; /* 8 */ --kui-space-2-5: 0.625rem; /* 10 */ --kui-space-3: 0.75rem; /* 12 */ --kui-space-4: 1rem; /* 16 */ --kui-space-5: 1.25rem; /* 20 */ --kui-space-6: 1.5rem; /* 24 */ --kui-space-8: 2rem; /* 32 */ --kui-space-10: 2.5rem; /* 40 */ --kui-space-12: 3rem; /* 48 */ --kui-space-16: 4rem; /* 64 */ --kui-space-20: 5rem; /* 80 */ --kui-space-24: 6rem; /* 96 */ /* --------------------------------------------------------------------- Radius — px, because a radius is a visual constant that must not inflate with the user's font-size preference. --------------------------------------------------------------------- */ --kui-radius-none: 0px; --kui-radius-xs: 2px; --kui-radius-sm: 4px; --kui-radius-md: 6px; /* DEFAULT: buttons, inputs, selects */ --kui-radius-lg: 8px; /* cards, popovers, menus */ --kui-radius-xl: 12px; /* modals, drawers, command palette */ --kui-radius-2xl: 16px; --kui-radius-full: 9999px; /* Size-proportional aliases (Spectrum 2's idea): a 24px control should not carry the same radius as a 48px one. Components consume these. */ --kui-radius-control-xs: var(--kui-radius-xs); --kui-radius-control-sm: var(--kui-radius-sm); --kui-radius-control-md: var(--kui-radius-md); --kui-radius-control-lg: var(--kui-radius-md); --kui-radius-control-xl: var(--kui-radius-lg); /* --------------------------------------------------------------------- Borders — 1px is the ONLY hairline. To make a border lighter, lower its alpha, never its width: 0.5px rounds unpredictably on 1x displays and renders some table rules and not others. --------------------------------------------------------------------- */ --kui-border-width: 1px; --kui-border-width-emphasis: 2px; --kui-border-width-focus: 2px; /* --------------------------------------------------------------------- Motion — enterprise bias: fast and near-linear-out. Nothing in a routine flow exceeds 240ms. Every major system's "interaction" tier lands at 50-150ms and the "transition" tier at 150-400ms; this sits at the fast end of that convergence. --------------------------------------------------------------------- */ --kui-dur-0: 0ms; --kui-dur-1: 70ms; /* hover, press, focus ring, checkbox, switch */ --kui-dur-2: 120ms; /* tooltip, small fade, icon swap, toast exit */ --kui-dur-3: 160ms; /* dropdown, accordion, sidebar rail */ --kui-dur-4: 240ms; /* modal, drawer, toast enter, bulk bar */ --kui-dur-5: 320ms; /* full-height side panel */ --kui-dur-6: 480ms; /* expressive only */ --kui-dur-skeleton: 1600ms; --kui-dur-spinner: 900ms; --kui-dur-toast: 5000ms; --kui-dur-undo: 8000ms; --kui-dur-loading-delay: 200ms; /* never show a loader for less work */ --kui-dur-loading-min: 400ms; /* once shown, keep it this long */ --kui-ease-standard: cubic-bezier(0.2, 0, 0, 1); --kui-ease-decelerate: cubic-bezier(0, 0, 0, 1); --kui-ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --kui-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --kui-ease-linear: linear; --kui-motion-state: var(--kui-dur-1) var(--kui-ease-standard); --kui-motion-micro: var(--kui-dur-2) var(--kui-ease-standard); --kui-motion-enter-sm: var(--kui-dur-3) var(--kui-ease-decelerate); --kui-motion-exit-sm: var(--kui-dur-2) var(--kui-ease-accelerate); --kui-motion-enter-md: var(--kui-dur-4) var(--kui-ease-decelerate); --kui-motion-exit-md: var(--kui-dur-3) var(--kui-ease-accelerate); --kui-motion-move: var(--kui-dur-3) var(--kui-ease-standard); /* --------------------------------------------------------------------- App shell. Carbon and shadcn independently agree on 256 / 48. --------------------------------------------------------------------- */ --kui-shell-header-h: 3rem; /* 48 */ --kui-shell-sidebar-w: 16rem; /* 256 */ --kui-shell-rail-w: 3rem; /* 48 */ --kui-shell-drawer-w: 24rem; /* 384 */ --kui-shell-subnav-h: 2.5rem; /* 40 */ --kui-gutter-page: var(--kui-space-6); --kui-content-max-prose: 72ch; --kui-content-max-form: 40rem; --kui-content-max-page: 90rem; /* z-index scale — four tiers inside a table, six in the app */ --kui-z-base: 0; --kui-z-sticky: 10; --kui-z-dropdown: 30; --kui-z-overlay: 40; --kui-z-modal: 50; --kui-z-toast: 60; --kui-opacity-disabled: 0.5; --kui-opacity-loading: 0.6; } /* ----------------------------------------------------------------------- Density. Applied on :root OR any subtree — a compact grid inside a comfortable settings page is a real requirement. Density changes heights, paddings, gaps and row heights. It does NOT change font size: changing type per density invalidates every truncation point, line-clamp, column width and translated string, so the whole product has to be re-QA'd per mode. Carbon, AG Grid, Primer and Spectrum all keep type fixed; only Radix couples them. ----------------------------------------------------------------------- */ :root, [data-kui-density="default"] { --kui-control-h-xs: 1.5rem; /* 24 */ --kui-control-h-sm: 1.75rem; /* 28 */ --kui-control-h-md: 2rem; /* 32 — default button/input/select */ --kui-control-h-lg: 2.25rem; /* 36 */ --kui-control-h-xl: 2.75rem; /* 44 */ --kui-control-px-sm: var(--kui-space-2); --kui-control-px-md: var(--kui-space-3); --kui-control-px-lg: var(--kui-space-4); --kui-row-h: 2.25rem; /* 36 */ --kui-row-h-header: 2.25rem; --kui-row-px: var(--kui-space-3); --kui-menu-item-h: 1.875rem; /* 30 */ --kui-gap-inline: var(--kui-space-2); --kui-gap-stack: var(--kui-space-3); --kui-gap-field: var(--kui-space-4); --kui-pad-card: var(--kui-space-4); --kui-pad-panel: var(--kui-space-6); } [data-kui-density="compact"] { --kui-control-h-xs: 1.25rem; --kui-control-h-sm: 1.5rem; --kui-control-h-md: 1.75rem; /* 28 */ --kui-control-h-lg: 2rem; --kui-control-h-xl: 2.5rem; --kui-control-px-sm: var(--kui-space-1-5); --kui-control-px-md: var(--kui-space-2); --kui-control-px-lg: var(--kui-space-3); --kui-row-h: 1.75rem; /* 28 */ --kui-row-h-header: 2rem; --kui-row-px: var(--kui-space-2); --kui-menu-item-h: 1.625rem; --kui-gap-inline: var(--kui-space-1); /* 4px = the 2.5.8 spacing floor */ --kui-gap-stack: var(--kui-space-2); --kui-gap-field: var(--kui-space-3); --kui-pad-card: var(--kui-space-3); --kui-pad-panel: var(--kui-space-4); } [data-kui-density="comfortable"] { --kui-control-h-xs: 1.75rem; --kui-control-h-sm: 2rem; --kui-control-h-md: 2.25rem; /* 36 */ --kui-control-h-lg: 2.5rem; --kui-control-h-xl: 3rem; --kui-control-px-sm: var(--kui-space-2-5); --kui-control-px-md: var(--kui-space-3); --kui-control-px-lg: var(--kui-space-5); --kui-row-h: 2.75rem; /* 44 */ --kui-row-h-header: 2.75rem; --kui-row-px: var(--kui-space-4); --kui-menu-item-h: 2.125rem; --kui-gap-inline: var(--kui-space-2); --kui-gap-stack: var(--kui-space-4); --kui-gap-field: var(--kui-space-6); --kui-pad-card: var(--kui-space-6); --kui-pad-panel: var(--kui-space-6); } /* The interactive box never shrinks below 24x24 (WCAG 2.2 SC 2.5.8) and grows to 44x44 on a coarse pointer. Density is a visual-rhythm control, not a licence to shrink hit areas. */ :root { --kui-target-min: 1.5rem; } @media (pointer: coarse) { :root { --kui-target-min: 2.75rem; } } /* Reduced motion: kill movement and scale, keep short opacity fades. A blanket `animation: 0.01ms !important` also kills progress indicators and shimmer feedback, which removes real system status. */ @media (prefers-reduced-motion: reduce) { :root { --kui-dur-3: 0ms; --kui-dur-4: 0ms; --kui-dur-5: 0ms; --kui-dur-6: 0ms; --kui-dur-1: 1ms; --kui-dur-2: 100ms; --kui-ease-emphasized: var(--kui-ease-standard); } } [data-kui-reduce-motion="true"] { --kui-dur-3: 0ms; --kui-dur-4: 0ms; --kui-dur-5: 0ms; --kui-dur-6: 0ms; --kui-dur-1: 1ms; --kui-dur-2: 100ms; } } /* ========================================================================= Kernel UI — layer 2: semantic tokens THIS FILE IS NEVER REDEFINED PER THEME. That is the whole architecture: primitives carry the theme, semantics carry the meaning. Adding a third theme touches layer 1 only (~40 lines), never this file. Grammar: --kui-{property}-{role}-{emphasis}-{state} property : bg | fg | icon | border | ring | shadow | chart role : (neutral, implied) | accent | info | success | warning | danger emphasis : subtle | (default) | strong | solid state : hover | active | selected | disabled | visited (omitted at rest) Property first, always: `--kui-bg-danger-subtle`, never `--kui-danger-bg`. ========================================================================= */ @layer kui.tokens { :root { /* --- Surfaces ------------------------------------------------------- */ --kui-bg-canvas: var(--kui-surface-base); --kui-bg-subtle: var(--kui-gray-2); --kui-bg-sunken: var(--kui-surface-sunken); --kui-bg-raised: var(--kui-surface-raised); --kui-bg-overlay: var(--kui-surface-overlay); --kui-bg-overlay-2: var(--kui-surface-overlay-2); --kui-bg-inset: var(--kui-surface-inset); --kui-bg-inverse: var(--kui-gray-12); --kui-bg-scrim: oklch(0 0 0 / 0.45); /* --- Component backgrounds + interaction states ---------------------- */ /* `active` is momentary (pointer down); `selected` is persistent (row checked). A data grid needs both — collapsing them is why generic systems fall over on tables. */ --kui-bg-component: var(--kui-gray-3); --kui-bg-component-hover: var(--kui-gray-4); --kui-bg-component-active: var(--kui-gray-5); --kui-bg-component-selected: var(--kui-accent-3); --kui-bg-component-selected-hover: var(--kui-accent-4); --kui-bg-component-disabled: var(--kui-gray-2); --kui-bg-ghost-hover: var(--kui-alpha-3); --kui-bg-ghost-active: var(--kui-alpha-4); /* Neutral solid that carries text is the inverse surface, not gray-9: gray-9 cannot clear 4.5:1 with white without turning into a dark grey. */ --kui-bg-neutral-solid: var(--kui-gray-12); --kui-bg-neutral-solid-hover: var(--kui-gray-11); --kui-bg-neutral-muted: var(--kui-gray-9); /* non-text only: tracks, avatars */ --kui-bg-accent-subtle: var(--kui-accent-3); --kui-bg-accent-subtle-hover: var(--kui-accent-4); --kui-bg-accent-solid: var(--kui-accent-9); --kui-bg-accent-solid-hover: var(--kui-accent-10); --kui-bg-selection: var(--kui-accent-5); --kui-bg-info-subtle: var(--kui-info-3); --kui-bg-info-solid: var(--kui-info-9); --kui-bg-info-solid-hover: var(--kui-info-10); --kui-bg-success-subtle: var(--kui-success-3); --kui-bg-success-solid: var(--kui-success-9); --kui-bg-success-solid-hover: var(--kui-success-10); --kui-bg-warning-subtle: var(--kui-warning-3); --kui-bg-warning-solid: var(--kui-warning-9); --kui-bg-warning-solid-hover: var(--kui-warning-10); --kui-bg-danger-subtle: var(--kui-danger-3); --kui-bg-danger-subtle-hover: var(--kui-danger-4); --kui-bg-danger-solid: var(--kui-danger-9); --kui-bg-danger-solid-hover: var(--kui-danger-10); /* --- Foreground ------------------------------------------------------ */ /* Three neutral levels, not two: an admin table needs primary value / column label / row metadata. */ --kui-fg-default: var(--kui-gray-12); /* >= 7:1 on every surface */ --kui-fg-muted: var(--kui-gray-11); /* >= 4.5:1 on every surface */ --kui-fg-subtle: var(--kui-gray-10); /* >= 3:1 — non-text use only */ --kui-fg-disabled: var(--kui-fg-disabled-color); --kui-fg-inverse: var(--kui-gray-1); --kui-fg-accent: var(--kui-accent-11); --kui-fg-link: var(--kui-accent-11); --kui-fg-link-hover: var(--kui-accent-12); --kui-fg-info: var(--kui-info-11); --kui-fg-success: var(--kui-success-11); --kui-fg-warning: var(--kui-warning-11); --kui-fg-danger: var(--kui-danger-11); /* `-on-` = foreground over a solid. Always a token, never an assumed white: amber solids need dark ink, and in dark mode every chromatic solid does (Material 3's on-primary = tone 20 convention). */ --kui-fg-on-accent-solid: var(--kui-accent-contrast); --kui-fg-on-info-solid: var(--kui-info-contrast); --kui-fg-on-success-solid: var(--kui-success-contrast); --kui-fg-on-warning-solid: var(--kui-warning-contrast); --kui-fg-on-danger-solid: var(--kui-danger-contrast); --kui-fg-on-neutral-solid: var(--kui-gray-1); /* --- Icons ----------------------------------------------------------- */ /* Icons are non-text under SC 1.4.11 and may legally sit at 3:1 where text needs 4.5:1, so `icon-subtle` is permitted to be lighter than any text token. That is the only reason icons get their own namespace. */ --kui-icon-default: var(--kui-gray-12); --kui-icon-muted: var(--kui-gray-11); --kui-icon-subtle: var(--kui-gray-10); --kui-icon-disabled: var(--kui-fg-disabled-color); --kui-icon-on-solid: var(--kui-accent-contrast); /* --- Borders --------------------------------------------------------- Two families, and the distinction is a conformance claim, not a style: DECORATIVE (alpha, < 3:1 by design): dividers, row rules, card outlines. SC 1.4.11 does not apply — removing them does not stop you identifying a component. FUNCTIONAL (solved, >= 3:1 guaranteed): input/control boundaries, focus rings, status borders. These ARE required to identify a component, so they carry a hard contrast guarantee. --------------------------------------------------------------------- */ --kui-border-subtle: var(--kui-alpha-6); /* row rules, menu dividers */ --kui-border-default: var(--kui-alpha-7); /* cards, panels, table frame */ --kui-border-strong: var(--kui-alpha-8); /* header rules, emphasis */ --kui-border-input: var(--kui-border-input-color); --kui-border-input-hover: var(--kui-border-input-hover-color); --kui-border-selected: var(--kui-accent-border); --kui-border-accent: var(--kui-accent-border); --kui-border-info: var(--kui-info-border); --kui-border-success: var(--kui-success-border); --kui-border-warning: var(--kui-warning-border); --kui-border-danger: var(--kui-danger-border); --kui-border-disabled: var(--kui-gray-6); /* Composed shorthands so components never re-spell the triple */ --kui-hairline: var(--kui-border-width) solid var(--kui-border-subtle); --kui-hairline-default: var(--kui-border-width) solid var(--kui-border-default); --kui-hairline-strong: var(--kui-border-width) solid var(--kui-border-strong); /* --- Focus ----------------------------------------------------------- */ --kui-ring-color: var(--kui-ring-color-primitive); --kui-ring-color-inverse: var(--kui-gray-1); --kui-ring-width: var(--kui-border-width-focus); --kui-ring-offset: 2px; /* --- Feedback / misc -------------------------------------------------- */ --kui-skeleton-base: var(--kui-gray-3); --kui-skeleton-shimmer: var(--kui-gray-4); /* --- Data visualisation chrome (deliberately NOT border-subtle: chart gridlines must be tunable independently of table gridlines) ---------- */ --kui-chart-grid: var(--kui-alpha-4); --kui-chart-axis: var(--kui-alpha-7); --kui-chart-label: var(--kui-fg-muted); --kui-chart-positive: var(--kui-fg-success); --kui-chart-negative: var(--kui-fg-danger); --kui-chart-neutral: var(--kui-fg-muted); } } /* ========================================================================= Kernel UI — layer 3: element defaults ========================================================================= */ @layer kui.base { html { font-family: var(--kui-font-sans); font-feature-settings: "liga" 1, "calt" 1; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; /* NOTE: font-size is deliberately NOT set here. Leaving the root at the browser default is what makes the user's font-size preference work. */ } body { background-color: var(--kui-bg-canvas); color: var(--kui-fg-default); font-size: var(--kui-text-md); line-height: var(--kui-text-md-lh); } ::selection { background-color: var(--kui-bg-selection); color: var(--kui-fg-default); } a { color: var(--kui-fg-link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--kui-fg-link-hover); } h1, h2, h3, h4, h5, h6 { font-weight: var(--kui-weight-semibold); text-wrap: balance; } h1 { font-size: var(--kui-text-3xl); line-height: var(--kui-text-3xl-lh); letter-spacing: var(--kui-text-3xl-ls); } h2 { font-size: var(--kui-text-2xl); line-height: var(--kui-text-2xl-lh); letter-spacing: var(--kui-text-2xl-ls); } h3 { font-size: var(--kui-text-xl); line-height: var(--kui-text-xl-lh); letter-spacing: var(--kui-text-xl-ls); } h4 { font-size: var(--kui-text-lg); line-height: var(--kui-text-lg-lh); } h5, h6 { font-size: var(--kui-text-md); line-height: var(--kui-text-md-lh); } p { text-wrap: pretty; } code, pre, kbd, samp { font-family: var(--kui-font-mono); font-size: 0.9285em; /* 13px inside 14px text */ font-variant-ligatures: none; } hr { border: none; border-block-start: var(--kui-hairline); } /* Native controls follow the theme via color-scheme; accent-color themes the parts (checkbox tick, radio dot, progress fill) we do not restyle. */ :root { accent-color: var(--kui-bg-accent-solid); } [hidden] { display: none !important; } } /* ========================================================================= Kernel UI — layer 4: components Every component is styled against a documented attribute contract (`data-*` + ARIA), never against a framework. Base UI, Radix, Ark UI and React Aria all emit these attributes, so this stylesheet binds to any of them — and to plain HTML. State contract used throughout: [data-state="open|closed|checked|unchecked|indeterminate"] [data-disabled] [aria-disabled] [data-invalid] [data-loading] [data-selected] [aria-selected] [aria-current] [aria-sort] ========================================================================= */ @layer kui.components { /* ======================================================================= Button ======================================================================= */ .kui-btn { --_h: var(--kui-control-h-md); --_px: var(--kui-control-px-md); --_radius: var(--kui-radius-control-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-space-2); block-size: var(--_h); padding-inline: var(--_px); border-radius: var(--_radius); border: var(--kui-border-width) solid transparent; font-size: var(--kui-text-md); line-height: var(--kui-text-md-tight-lh); font-weight: var(--kui-weight-medium); white-space: nowrap; cursor: pointer; user-select: none; position: relative; transition: background-color var(--kui-motion-state), border-color var(--kui-motion-state), color var(--kui-motion-state); /* Hit area never drops below 24x24 even when the visual box does (WCAG 2.2 SC 2.5.8), and inflates on a coarse pointer. */ &::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: max(100%, var(--kui-target-min)); block-size: max(100%, var(--kui-target-min)); } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: var(--kui-ring-offset); } /* aria-disabled keeps the control focusable so screen-reader users can discover it and be told why. Native [disabled] is removed from the tab order entirely and is announced by nothing. */ &:is([disabled], [aria-disabled="true"]) { cursor: not-allowed; color: var(--kui-fg-disabled); background-color: var(--kui-bg-component-disabled); border-color: transparent; box-shadow: none; } &[data-loading] { cursor: progress; } &[data-loading] .kui-btn__label { opacity: var(--kui-opacity-loading); } } .kui-btn--xs { --_h: var(--kui-control-h-xs); --_px: var(--kui-space-1-5); --_radius: var(--kui-radius-control-xs); font-size: var(--kui-text-xs); } .kui-btn--sm { --_h: var(--kui-control-h-sm); --_px: var(--kui-control-px-sm); --_radius: var(--kui-radius-control-sm); font-size: var(--kui-text-sm); } .kui-btn--lg { --_h: var(--kui-control-h-lg); --_px: var(--kui-control-px-lg); --_radius: var(--kui-radius-control-lg); } .kui-btn--xl { --_h: var(--kui-control-h-xl); --_px: var(--kui-space-5); --_radius: var(--kui-radius-control-xl); } .kui-btn--primary { background-color: var(--kui-bg-accent-solid); color: var(--kui-fg-on-accent-solid); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-accent-solid-hover); } &:active:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-accent-solid-hover); } } .kui-btn--neutral { background-color: var(--kui-bg-neutral-solid); color: var(--kui-fg-on-neutral-solid); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-neutral-solid-hover); } } .kui-btn--secondary { background-color: var(--kui-bg-raised); color: var(--kui-fg-default); border-color: var(--kui-border-input); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-component); border-color: var(--kui-border-input-hover); } &:active:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-component-hover); } } .kui-btn--ghost { background-color: transparent; color: var(--kui-fg-default); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-ghost-hover); } &:active:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-ghost-active); } } .kui-btn--danger { background-color: var(--kui-bg-danger-solid); color: var(--kui-fg-on-danger-solid); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-danger-solid-hover); } } .kui-btn--danger-outline { background-color: var(--kui-bg-raised); color: var(--kui-fg-danger); border-color: var(--kui-border-danger); &:hover:not([disabled], [aria-disabled="true"]) { background-color: var(--kui-bg-danger-subtle); } } /* Icon-only: square, and it MUST carry an aria-label. "Empty buttons" is the 5th most common accessibility failure on the web. */ .kui-btn--icon { inline-size: var(--_h); padding-inline: 0; } .kui-btn-group { display: inline-flex; isolation: isolate; > .kui-btn { border-radius: 0; margin-inline-start: calc(var(--kui-border-width) * -1); &:first-child { border-start-start-radius: var(--_radius); border-end-start-radius: var(--_radius); margin-inline-start: 0; } &:last-child { border-start-end-radius: var(--_radius); border-end-end-radius: var(--_radius); } &:hover, &:focus-visible { z-index: 1; } } } /* ======================================================================= Field — the highest-leverage primitive in the system. It makes label association and aria-describedby wiring correct by construction, which is what stops "missing form label" (51% of pages). ======================================================================= */ .kui-field { display: grid; gap: var(--kui-space-1-5); max-inline-size: var(--kui-content-max-form); } .kui-field__label { font-size: var(--kui-text-sm); font-weight: var(--kui-weight-medium); color: var(--kui-fg-default); /* Regular-to-medium weight only: bold labels measured a ~60% saccade penalty in Penzo's eye-tracking work. */ } .kui-field__optional { font-weight: var(--kui-weight-normal); color: var(--kui-fg-muted); } /* Hint sits ABOVE the control when it is needed to answer correctly — a native dropdown, autocomplete popup or on-screen keyboard can cover a message placed below. */ .kui-field__hint { font-size: var(--kui-text-xs); line-height: var(--kui-text-xs-lh); color: var(--kui-fg-muted); } .kui-field__error { display: flex; align-items: flex-start; gap: var(--kui-space-1-5); font-size: var(--kui-text-xs); line-height: var(--kui-text-xs-lh); color: var(--kui-fg-danger); font-weight: var(--kui-weight-medium); } .kui-field:has(> .kui-input[aria-invalid="true"]) .kui-input, .kui-field[data-invalid] .kui-input, .kui-field[data-invalid] .kui-textarea, .kui-field[data-invalid] .kui-select { border-color: var(--kui-border-danger); } /* ======================================================================= Text inputs ======================================================================= */ .kui-input, .kui-textarea, .kui-select { inline-size: 100%; background-color: var(--kui-bg-raised); color: var(--kui-fg-default); border: var(--kui-border-width) solid var(--kui-border-input); border-radius: var(--kui-radius-control-md); font-size: var(--kui-text-md); transition: border-color var(--kui-motion-state), background-color var(--kui-motion-state); &::placeholder { color: var(--kui-fg-muted); } &:hover:not(:disabled, [readonly]) { border-color: var(--kui-border-input-hover); } /* No offset on form fields: an offset ring around a text input reads as a second border. Primer arrived at the same rule. */ &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: 0; border-color: var(--kui-ring-color); } /* :user-invalid, never :invalid — :invalid fires on a required field the user has not touched yet. */ &:user-invalid { border-color: var(--kui-border-danger); } &:disabled { background-color: var(--kui-bg-component-disabled); color: var(--kui-fg-disabled); border-color: var(--kui-border-disabled); cursor: not-allowed; } /* Read-only is NOT disabled: the value is still needed to complete the task, so it stays focusable and stays in the accessibility tree. */ &[readonly] { background-color: var(--kui-bg-subtle); border-color: var(--kui-border-subtle); } } .kui-input, .kui-select { block-size: var(--kui-control-h-md); padding-inline: var(--kui-control-px-md); } .kui-input--sm { block-size: var(--kui-control-h-sm); font-size: var(--kui-text-sm); padding-inline: var(--kui-control-px-sm); } .kui-input--lg { block-size: var(--kui-control-h-lg); } .kui-textarea { padding: var(--kui-space-2) var(--kui-control-px-md); min-block-size: calc(var(--kui-control-h-md) * 2.5); resize: vertical; } .kui-select { appearance: none; padding-inline-end: var(--kui-space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* Numeric input group: the affix is decorative, the input owns the label. */ .kui-input-group { display: flex; align-items: stretch; inline-size: 100%; > .kui-input { border-radius: 0; } > :first-child { border-start-start-radius: var(--kui-radius-control-md); border-end-start-radius: var(--kui-radius-control-md); } > :last-child { border-start-end-radius: var(--kui-radius-control-md); border-end-end-radius: var(--kui-radius-control-md); } > * + * { margin-inline-start: calc(var(--kui-border-width) * -1); } &:focus-within > .kui-input { z-index: 1; } } .kui-input-affix { display: inline-flex; align-items: center; padding-inline: var(--kui-control-px-md); background-color: var(--kui-bg-subtle); border: var(--kui-border-width) solid var(--kui-border-input); color: var(--kui-fg-muted); font-size: var(--kui-text-md); white-space: nowrap; } .kui-numeric { font-variant-numeric: tabular-nums lining-nums; } /* ======================================================================= Selection controls Drawn with borders and a real glyph, never with a background alone, so they survive forced-colors mode where backgrounds collapse. ======================================================================= */ .kui-choice { display: inline-flex; align-items: flex-start; gap: var(--kui-space-2); min-block-size: var(--kui-target-min); cursor: pointer; font-size: var(--kui-text-md); &:has(input:disabled) { cursor: not-allowed; color: var(--kui-fg-disabled); } } .kui-checkbox, .kui-radio { appearance: none; flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.125rem; background-color: var(--kui-bg-raised); border: var(--kui-border-width) solid var(--kui-border-input); display: grid; place-content: center; cursor: inherit; transition: background-color var(--kui-motion-state), border-color var(--kui-motion-state); &::before { content: ""; inline-size: 0.625rem; block-size: 0.625rem; scale: 0; transition: scale var(--kui-motion-state); background-color: var(--kui-fg-on-accent-solid); } &:checked, &:indeterminate { background-color: var(--kui-bg-accent-solid); border-color: var(--kui-bg-accent-solid); &::before { scale: 1; } } &:hover:not(:disabled) { border-color: var(--kui-border-input-hover); } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: var(--kui-ring-offset); } &:disabled { background-color: var(--kui-bg-component-disabled); border-color: var(--kui-border-disabled); cursor: not-allowed; } &:disabled:checked::before { background-color: var(--kui-fg-disabled); } } .kui-checkbox { border-radius: var(--kui-radius-xs); &::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } /* aria-checked="mixed" — the canonical case is a data grid's header checkbox when only some rows on the page are selected. */ &:indeterminate::before { clip-path: none; block-size: 2px; inline-size: 0.5rem; } } .kui-radio { border-radius: var(--kui-radius-full); &::before { border-radius: var(--kui-radius-full); inline-size: 0.5rem; block-size: 0.5rem; } } /* Switch: immediate effect, no form submit. State is never colour-only — the knob position carries it too. */ .kui-switch { appearance: none; flex: none; inline-size: 2rem; block-size: 1.125rem; border-radius: var(--kui-radius-full); background-color: var(--kui-bg-neutral-muted); border: var(--kui-border-width) solid transparent; position: relative; cursor: inherit; transition: background-color var(--kui-motion-state); &::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 2px; translate: 0 -50%; inline-size: 0.875rem; block-size: 0.875rem; border-radius: var(--kui-radius-full); background-color: oklch(100% 0 0); box-shadow: var(--kui-shadow-xs); transition: translate var(--kui-motion-state), inset-inline-start var(--kui-motion-state); } &:checked { background-color: var(--kui-bg-accent-solid); &::before { inset-inline-start: calc(100% - 0.875rem - 2px); } } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: var(--kui-ring-offset); } &:disabled { opacity: var(--kui-opacity-disabled); cursor: not-allowed; } } /* Segmented / toggle group */ .kui-segmented { display: inline-flex; padding: 2px; gap: 2px; background-color: var(--kui-bg-component); border-radius: var(--kui-radius-md); } .kui-segmented__item { display: inline-flex; align-items: center; gap: var(--kui-space-1-5); block-size: calc(var(--kui-control-h-md) - 4px); padding-inline: var(--kui-space-3); border-radius: var(--kui-radius-sm); /* nested radius: 6 - 2 = 4 */ font-size: var(--kui-text-sm); font-weight: var(--kui-weight-medium); color: var(--kui-fg-muted); cursor: pointer; transition: background-color var(--kui-motion-state), color var(--kui-motion-state); &:hover { color: var(--kui-fg-default); } &[aria-pressed="true"], &[data-state="on"], &[aria-selected="true"] { background-color: var(--kui-bg-raised); color: var(--kui-fg-default); box-shadow: var(--kui-shadow-xs); } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: 1px; } } /* ======================================================================= Badge / tag / status Status is never colour-only: every status badge carries a glyph. ======================================================================= */ .kui-badge { display: inline-flex; align-items: center; gap: var(--kui-space-1-5); block-size: 1.25rem; padding-inline: var(--kui-space-2); border-radius: var(--kui-radius-sm); border: var(--kui-border-width) solid transparent; font-size: var(--kui-text-xs); font-weight: var(--kui-weight-medium); line-height: 1; white-space: nowrap; } .kui-badge__dot { inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--kui-radius-full); background-color: currentColor; flex: none; } .kui-badge--neutral { background: var(--kui-bg-component); color: var(--kui-fg-muted); border-color: var(--kui-border-subtle); } .kui-badge--accent { background: var(--kui-bg-accent-subtle); color: var(--kui-fg-accent); border-color: var(--kui-border-accent); } .kui-badge--info { background: var(--kui-bg-info-subtle); color: var(--kui-fg-info); border-color: var(--kui-border-info); } .kui-badge--success { background: var(--kui-bg-success-subtle); color: var(--kui-fg-success); border-color: var(--kui-border-success); } .kui-badge--warning { background: var(--kui-bg-warning-subtle); color: var(--kui-fg-warning); border-color: var(--kui-border-warning); } .kui-badge--danger { background: var(--kui-bg-danger-subtle); color: var(--kui-fg-danger); border-color: var(--kui-border-danger); } .kui-badge--count { background: var(--kui-bg-neutral-solid); color: var(--kui-fg-on-neutral-solid); border-radius: var(--kui-radius-full); font-variant-numeric: tabular-nums; min-inline-size: 1.25rem; justify-content: center; } /* ======================================================================= Surfaces Elevation rule: at level 0-1 use a border and no shadow; at level 2+ use a shadow with its baked-in ring and NO border. Never both — that is the "2px muddy edge" of systems that never decided. ======================================================================= */ .kui-card { background-color: var(--kui-bg-raised); border: var(--kui-hairline-default); border-radius: var(--kui-radius-lg); padding: var(--kui-pad-card); box-shadow: var(--kui-shadow-xs); } .kui-panel { background-color: var(--kui-bg-raised); border: var(--kui-hairline-default); border-radius: var(--kui-radius-lg); } .kui-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--kui-space-3); padding: var(--kui-space-3) var(--kui-pad-card); border-block-end: var(--kui-hairline); } .kui-panel__body { padding: var(--kui-pad-card); } .kui-surface-overlay { background-color: var(--kui-bg-overlay); border-radius: var(--kui-radius-lg); box-shadow: var(--kui-shadow-lg); /* no border — the ring is inside the shadow */ } /* ======================================================================= Menu / dropdown ======================================================================= */ .kui-menu { min-inline-size: 12rem; padding: var(--kui-space-1); background-color: var(--kui-bg-overlay); border-radius: var(--kui-radius-lg); box-shadow: var(--kui-shadow-lg); } .kui-menu__item { display: flex; align-items: center; gap: var(--kui-space-2); inline-size: 100%; block-size: var(--kui-menu-item-h); padding-inline: var(--kui-space-2); border-radius: var(--kui-radius-sm); font-size: var(--kui-text-md); color: var(--kui-fg-default); cursor: pointer; text-align: start; &:where(:hover, [data-highlighted], [aria-selected="true"]) { background-color: var(--kui-bg-ghost-hover); } /* Disabled menu items stay focusable — APG is explicit that discoverability matters more than tab-order tidiness here. */ &[aria-disabled="true"] { color: var(--kui-fg-disabled); cursor: not-allowed; } &[data-danger] { color: var(--kui-fg-danger); } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: -2px; } } .kui-menu__shortcut { margin-inline-start: auto; color: var(--kui-fg-muted); font-size: var(--kui-text-xs); font-variant-numeric: tabular-nums; } .kui-menu__separator { block-size: 1px; background: var(--kui-border-subtle); margin: var(--kui-space-1) calc(var(--kui-space-2) * -1); } .kui-menu__label { padding: var(--kui-space-1-5) var(--kui-space-2) var(--kui-space-1); font-size: var(--kui-text-2xs); letter-spacing: var(--kui-text-2xs-ls); text-transform: uppercase; color: var(--kui-fg-muted); font-weight: var(--kui-weight-medium); } /* ======================================================================= Tooltip — describes, never labels; never contains interactive content. WCAG 1.4.13 requires dismissible + hoverable + persistent. ======================================================================= */ .kui-tooltip { max-inline-size: 18rem; padding: var(--kui-space-1-5) var(--kui-space-2); background-color: var(--kui-bg-inverse); color: var(--kui-fg-inverse); border-radius: var(--kui-radius-sm); font-size: var(--kui-text-xs); line-height: var(--kui-text-xs-lh); box-shadow: var(--kui-shadow-md); } /* ======================================================================= Dialog / drawer ======================================================================= */ .kui-dialog { inline-size: min(32rem, calc(100vw - var(--kui-space-8))); padding: 0; background-color: var(--kui-bg-overlay); color: var(--kui-fg-default); border: none; border-radius: var(--kui-radius-xl); box-shadow: var(--kui-shadow-xl); } .kui-dialog::backdrop { background-color: var(--kui-bg-scrim); } .kui-dialog__header { display: flex; align-items: flex-start; gap: var(--kui-space-3); padding: var(--kui-space-5) var(--kui-space-5) var(--kui-space-3); } .kui-dialog__title { font-size: var(--kui-text-xl); font-weight: var(--kui-weight-semibold); } .kui-dialog__body { padding-inline: var(--kui-space-5); color: var(--kui-fg-muted); } .kui-dialog__footer { display: flex; justify-content: flex-end; gap: var(--kui-gap-inline); padding: var(--kui-space-5); margin-block-start: var(--kui-space-5); border-block-start: var(--kui-hairline); } .kui-drawer { inline-size: var(--kui-shell-drawer-w); max-inline-size: 100vw; block-size: 100%; background-color: var(--kui-bg-overlay); box-shadow: var(--kui-shadow-xl); display: flex; flex-direction: column; } /* ======================================================================= Tabs ======================================================================= */ .kui-tablist { display: flex; gap: var(--kui-space-4); border-block-end: var(--kui-hairline-default); } .kui-tab { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-2); block-size: var(--kui-shell-subnav-h); padding-inline: var(--kui-space-1); font-size: var(--kui-text-md); font-weight: var(--kui-weight-medium); color: var(--kui-fg-muted); cursor: pointer; white-space: nowrap; &::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background-color: transparent; transition: background-color var(--kui-motion-state); } &:hover { color: var(--kui-fg-default); } &[aria-selected="true"] { color: var(--kui-fg-default); &::after { background-color: var(--kui-bg-accent-solid); } } &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: -2px; border-radius: var(--kui-radius-sm); } &[aria-disabled="true"] { color: var(--kui-fg-disabled); cursor: not-allowed; } } /* ======================================================================= Accordion / disclosure ======================================================================= */ .kui-accordion__item { border-block-end: var(--kui-hairline); } .kui-accordion__trigger { display: flex; align-items: center; gap: var(--kui-space-2); inline-size: 100%; min-block-size: var(--kui-control-h-lg); padding-block: var(--kui-space-2); font-size: var(--kui-text-md); font-weight: var(--kui-weight-medium); text-align: start; cursor: pointer; &:focus-visible { outline: var(--kui-ring-width) solid var(--kui-ring-color); outline-offset: -2px; } > .kui-accordion__chevron { margin-inline-start: auto; color: var(--kui-icon-muted); transition: rotate var(--kui-motion-micro); } &[aria-expanded="true"] > .kui-accordion__chevron { rotate: 90deg; } } /* grid-rows 0fr -> 1fr is the cross-browser height:auto animation. interpolate-size is Chromium-only in 2026 and cannot be the mechanism. */ .kui-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--kui-dur-3) var(--kui-ease-standard); > * { overflow: hidden; min-block-size: 0; } &[data-state="open"] { grid-template-rows: 1fr; } } /* ======================================================================= Breadcrumb / pagination ======================================================================= */ .kui-breadcrumb { display: flex; align-items: center; gap: var(--kui-space-1); font-size: var(--kui-text-sm); color: var(--kui-fg-muted); } .kui-breadcrumb ol { display: flex; align-items: center; gap: var(--kui-space-1); list-style: none; padding: 0; margin: 0; } .kui-breadcrumb li { display: flex; align-items: center; gap: var(--kui-space-1); } .kui-breadcrumb li + li::before { content: "/"; color: var(--kui-fg-subtle); } .kui-breadcrumb a { color: var(--kui-fg-muted); text-decoration: none; padding: 2px var(--kui-space-1); border-radius: var(--kui-radius-sm); } .kui-breadcrumb a:hover { color: var(--kui-fg-default); background: var(--kui-bg-ghost-hover); } .kui-breadcrumb [aria-current="page"] { color: var(--kui-fg-default); font-weight: var(--kui-weight-medium); } .kui-pagination { display: flex; align-items: center; gap: var(--kui-space-2); font-size: var(--kui-text-sm); font-variant-numeric: tabular-nums; } .kui-pagination__range { color: var(--kui-fg-muted); } /* ======================================================================= Alert / banner — the destination for errors that require action. ======================================================================= */ .kui-alert { display: flex; align-items: flex-start; gap: var(--kui-space-3); padding: var(--kui-space-3); border-radius: var(--kui-radius-md); border: var(--kui-border-width) solid; border-inline-start-width: 3px; font-size: var(--kui-text-md); } .kui-alert__title { font-weight: var(--kui-weight-semibold); } .kui-alert__body { color: var(--kui-fg-muted); font-size: var(--kui-text-sm); line-height: var(--kui-text-md-lh); } .kui-alert--info { background: var(--kui-bg-info-subtle); border-color: var(--kui-border-info); } .kui-alert--success { background: var(--kui-bg-success-subtle); border-color: var(--kui-border-success); } .kui-alert--warning { background: var(--kui-bg-warning-subtle); border-color: var(--kui-border-warning); } .kui-alert--danger { background: var(--kui-bg-danger-subtle); border-color: var(--kui-border-danger); } .kui-alert--neutral { background: var(--kui-bg-subtle); border-color: var(--kui-border-default); } .kui-alert--info .kui-alert__icon { color: var(--kui-fg-info); } .kui-alert--success .kui-alert__icon { color: var(--kui-fg-success); } .kui-alert--warning .kui-alert__icon { color: var(--kui-fg-warning); } .kui-alert--danger .kui-alert__icon { color: var(--kui-fg-danger); } .kui-alert__icon { flex: none; margin-block-start: 1px; } /* Toast: success/info only, never errors, never a required action. */ .kui-toast { display: flex; align-items: flex-start; gap: var(--kui-space-3); inline-size: 22rem; padding: var(--kui-space-3); background-color: var(--kui-bg-overlay); border-radius: var(--kui-radius-lg); box-shadow: var(--kui-shadow-lg); font-size: var(--kui-text-md); } /* ======================================================================= DATA TABLE — the component the rest of the system exists to support. border-collapse MUST be `separate`: with collapsed borders the rules are painted on the table, not the cell, and they detach from a `position: sticky` header in Chromium and WebKit. Row rules are therefore drawn with an inset box-shadow, not border-bottom. ======================================================================= */ .kui-table-wrap { position: relative; overflow: auto; border: var(--kui-hairline-default); border-radius: var(--kui-radius-lg); background-color: var(--kui-bg-raised); /* A focused cell must not hide under the sticky header (SC 2.4.11). */ scroll-padding-block-start: var(--kui-row-h-header); } .kui-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--kui-text-md); /* Tabular figures on the WHOLE table, not just numeric columns, so column widths do not jitter when data refreshes. */ font-variant-numeric: tabular-nums lining-nums; } .kui-table th, .kui-table td { padding-inline: var(--kui-row-px); text-align: start; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-table thead th { position: sticky; inset-block-start: 0; z-index: 3; block-size: var(--kui-row-h-header); background-color: var(--kui-bg-subtle); color: var(--kui-fg-muted); font-size: var(--kui-text-xs); font-weight: var(--kui-weight-medium); /* Header boundary is structural, row rules are only rhythm — two border strengths, not one. */ box-shadow: inset 0 -1px 0 var(--kui-border-strong); } .kui-table tbody td { block-size: var(--kui-row-h); /* Full-bleed row rule via inset shadow (see border-collapse note above). */ box-shadow: inset 0 -1px 0 var(--kui-border-subtle); } .kui-table tbody tr:last-child td { box-shadow: none; } /* No vertical rules. A 40x12 table with full gridlines draws ~500 lines that out-compete the data; column separation comes from alignment. */ .kui-table tbody tr:hover td { background-color: var(--kui-bg-ghost-hover); } .kui-table tbody tr[aria-selected="true"] td, .kui-table tbody tr[data-selected] td { background-color: var(--kui-bg-component-selected); } .kui-table tbody tr[data-selected]:hover td { background-color: var(--kui-bg-component-selected-hover); } /* Zebra is opt-in, single-row, and replaces the hairline rather than stacking with it — two backgrounds x five states is an unmaintainable state matrix. */ .kui-table--zebra tbody tr:nth-child(odd) td { background-color: var(--kui-bg-subtle); box-shadow: none; } .kui-table--zebra tbody td { box-shadow: none; } .kui-table td[data-align="end"], .kui-table th[data-align="end"] { text-align: end; } .kui-table td[data-numeric] { text-align: end; } .kui-table td[data-mono] { font-family: var(--kui-font-mono); font-size: var(--kui-text-sm); } /* Sort control is a real