4c761b91a4
One of three candidates for the access-first / maximum-legibility theme family (WCAG AAA as identity): 7:1+ contrast on every pair (passes validate-theme.mjs --aaa), 1.125rem body floor with nothing under 14px, 44px controls for everyone, 3px focus rings, links underlined at rest, reduced-motion built in. Built for IGH/NDIS-facing surfaces first. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
474 lines
18 KiB
CSS
474 lines
18 KiB
CSS
/*
|
||
* Lucent — cool daylight clarity. Access-first: WCAG AAA as identity.
|
||
*
|
||
* One of three candidates in the access-first family (NDIS participants,
|
||
* their families, older support coordinators — IGH portals). The thesis:
|
||
* maximum legibility is not compliance overhead, it IS the personality.
|
||
* Dignity, clarity, zero squinting. GOV.UK / NHS design heritage,
|
||
* modernized: a near-white cool field, pure white cards, TRUE near-black
|
||
* ink, and one deep accessible blue doing all the pointing. Links are the
|
||
* same blue and underlined BY DEFAULT — an affordance, not a decoration.
|
||
* Boundaries are drawn with strong ink-alpha borders (0.25–0.3), not
|
||
* shadows: low-vision users need edges, not atmosphere. Radius is a modest
|
||
* 0.5rem; elevation is low; motion is minimal and quick with all springs
|
||
* aliased to standard eases.
|
||
*
|
||
* Contrast is verified, not hoped for (Y ≈ L³; C = (Y1+.05)/(Y2+.05)):
|
||
* LIGHT body ink 0.15 on bg 0.99 → ~19.1:1 (on white card ~19.7:1)
|
||
* muted-fg 0.35 on white → ~11.3:1 (muted is still reading text)
|
||
* white label on primary 0.42 → ~8.5:1 (blue's real WCAG Y sits
|
||
* below L³, so the true ratio is higher still)
|
||
* DARK body ink 0.96 on bg 0.16 → ~17.3:1 (on card 0.22 ~15.4:1)
|
||
* muted-fg 0.78 on card 0.22 → ~8.7:1 (on bg ~9.7:1)
|
||
* ink 0.15 on primary 0.74 → ~8.5:1
|
||
* Every status pair targets ≥7:1 and never dips below 4.5:1.
|
||
*
|
||
* Type is Atkinson Hyperlegible (designed by the Braille Institute for
|
||
* low-vision readers) for BOTH body and headings — hierarchy comes from
|
||
* weight 700 and the ramp, not a second family. JetBrains Mono for code.
|
||
* The ramp starts larger than the house norm (body 1.125rem/1.65) and the
|
||
* caption never drops below 14px. Touch targets are 44px for EVERYONE,
|
||
* not just coarse pointers.
|
||
*
|
||
* Token contract matches lib-theme-caffe-florian/theme.css (Crema v1).
|
||
*/
|
||
|
||
/*
|
||
* Fonts: consuming apps load Atkinson Hyperlegible + JetBrains Mono at the
|
||
* top of their entry CSS (where @import statements are allowed), via the
|
||
* Google Fonts URL documented in this theme's README. Embedding the
|
||
* @import here — or smuggling the URL in a comment for a build script to
|
||
* lift — breaks PostCSS's ordering rules, so neither is done in this file.
|
||
*/
|
||
|
||
:root {
|
||
--font-sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--font-heading: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||
|
||
/* Tailwind utility families. Distinct names so a consuming app's
|
||
* `@theme inline` can indirect to these (--font-heading/--font-sans
|
||
* collide with Tailwind's own font-* namespace). */
|
||
--heading-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--body-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
||
/* ── Colors ── near-white cool daylight field, pure white cards, true
|
||
* near-black cool ink. Body ink on bg ≈ 19.1:1; on card ≈ 19.7:1. */
|
||
--background: oklch(0.99 0.002 240);
|
||
--foreground: oklch(0.15 0.005 250);
|
||
|
||
--card: oklch(1 0 0);
|
||
--card-foreground: oklch(0.15 0.005 250);
|
||
|
||
--popover: oklch(1 0 0);
|
||
--popover-foreground: oklch(0.15 0.005 250);
|
||
|
||
/* Primary — one deep accessible blue (GOV.UK lineage) with a pure
|
||
* white label. Approx (1+.05)/(0.42³+.05) ≈ 8.5:1; saturated blue's
|
||
* true WCAG luminance is lower than L³, so the real ratio is higher. */
|
||
--primary: oklch(0.42 0.15 255);
|
||
--primary-foreground: oklch(1 0 0);
|
||
|
||
--secondary: oklch(0.93 0.008 245);
|
||
--secondary-foreground: oklch(0.22 0.01 250);
|
||
|
||
/* muted-foreground is still reading text in an access theme — it must
|
||
* clear 7:1 on white too. 0.35³=0.0429 → 1.05/0.0929 ≈ 11.3:1. */
|
||
--muted: oklch(0.945 0.004 245);
|
||
--muted-foreground: oklch(0.35 0.01 250);
|
||
|
||
/* Accent — a pale blue wash for hover/selection, deep blue ink on top
|
||
* (0.854/0.083 ≈ 10.3:1). Never a second competing fill. */
|
||
--accent: oklch(0.93 0.03 250);
|
||
--accent-foreground: oklch(0.32 0.11 255);
|
||
|
||
/* ── Status ── deep solid fills with white labels (destructive /
|
||
* success / info), dark ink on amber for warning — every pair targets
|
||
* ≥7:1. destructive 1.05/(0.45³+.05) ≈ 7.4:1 (red's true Y is lower →
|
||
* real ratio higher); success deepened to 0.40 because green's true Y
|
||
* runs ABOVE L³ (1.05/0.114 ≈ 9.2:1 approx, ≈7.5:1 real); info
|
||
* 1.05/0.124 ≈ 8.5:1; warning ink-on-amber 0.562/0.058 ≈ 9.7:1. */
|
||
--destructive: oklch(0.45 0.17 27);
|
||
--destructive-foreground: oklch(1 0 0);
|
||
--success: oklch(0.40 0.11 155);
|
||
--success-foreground: oklch(1 0 0);
|
||
--warning: oklch(0.80 0.14 80);
|
||
--warning-foreground: oklch(0.20 0.03 80);
|
||
--info: oklch(0.42 0.11 230);
|
||
--info-foreground: oklch(1 0 0);
|
||
|
||
/* Borders STRONG — ink at 0.25–0.3 alpha. Visible boundaries for low
|
||
* vision, not decorative hairlines. */
|
||
--border: oklch(0.15 0.005 250 / 0.28);
|
||
--input: oklch(0.15 0.005 250 / 0.32);
|
||
--ring: oklch(0.42 0.15 255);
|
||
|
||
/* Chart palette — blue lead, adjacent hues ≥60° apart, adjacent-index
|
||
* lightness varied so series separate for color-blind readers too. */
|
||
--chart-1: oklch(0.45 0.14 255);
|
||
--chart-2: oklch(0.58 0.12 150);
|
||
--chart-3: oklch(0.70 0.13 80);
|
||
--chart-4: oklch(0.55 0.16 20);
|
||
--chart-5: oklch(0.48 0.14 310);
|
||
|
||
--sidebar: oklch(0.965 0.004 245);
|
||
--sidebar-foreground: oklch(0.15 0.005 250);
|
||
--sidebar-primary: oklch(0.42 0.15 255);
|
||
--sidebar-primary-foreground: oklch(1 0 0);
|
||
--sidebar-accent: oklch(0.93 0.03 250);
|
||
--sidebar-accent-foreground: oklch(0.32 0.11 255);
|
||
--sidebar-border: oklch(0.15 0.005 250 / 0.25);
|
||
--sidebar-ring: oklch(0.42 0.15 255);
|
||
|
||
/* Syntax — every token deep enough to read as body text on white;
|
||
* comments are NOT faded into illegibility (0.40 ≈ 9:1). */
|
||
--syntax-keyword: oklch(0.42 0.14 310);
|
||
--syntax-string: oklch(0.42 0.10 155);
|
||
--syntax-number: oklch(0.45 0.12 55);
|
||
--syntax-comment: oklch(0.40 0.01 250);
|
||
--syntax-function: oklch(0.42 0.13 255);
|
||
--syntax-type: oklch(0.42 0.09 210);
|
||
|
||
/* ── Chat surfaces ──
|
||
* User bubble is the deep blue with white text (≈8.5:1); assistant is
|
||
* a white card with a strong visible border. */
|
||
--chat-user-bg: oklch(0.42 0.15 255);
|
||
--chat-user-fg: oklch(1 0 0);
|
||
--chat-assistant-bg: oklch(1 0 0);
|
||
--chat-assistant-fg: oklch(0.15 0.005 250);
|
||
--chat-assistant-border: oklch(0.15 0.005 250 / 0.28);
|
||
|
||
/* Modest radius — calm, institutional, never pill-happy. */
|
||
--radius: 0.5rem;
|
||
|
||
/* ── Motion ── minimal and quick; nothing decorative. All springs
|
||
* alias to the standard eases — personality lives in restraint. */
|
||
--duration-fast: 120ms;
|
||
--duration-base: 200ms;
|
||
--duration-slow: 300ms;
|
||
--duration-slower: 400ms;
|
||
--duration-spring: 200ms;
|
||
|
||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
||
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
||
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
--ease-spring-gentle: var(--ease-standard);
|
||
--ease-spring-snappy: var(--ease-decelerate);
|
||
--ease-spring-bouncy: var(--ease-standard);
|
||
|
||
/* ── Typography ── access ramp: starts larger, generous line-heights,
|
||
* caption never below 14px. Fixed rem, product register. */
|
||
--text-hero-size: 3rem;
|
||
--text-hero-lh: 1.15;
|
||
--text-display-size: 2.5rem;
|
||
--text-display-lh: 1.2;
|
||
--text-headline-size: 1.875rem;
|
||
--text-headline-lh: 1.25;
|
||
--text-title-size: 1.5rem;
|
||
--text-title-lh: 1.3;
|
||
--text-subtitle-size: 1.25rem;
|
||
--text-subtitle-lh: 1.45;
|
||
--text-body-size: 1.125rem;
|
||
--text-body-lh: 1.65;
|
||
--text-label-size: 1rem;
|
||
--text-label-lh: 1.5;
|
||
--text-caption-size: 0.875rem;
|
||
--text-caption-lh: 1.4;
|
||
|
||
/* ── Elevation ── low. Separation is the job of borders here; shadows
|
||
* only whisper altitude for popovers and dialogs. */
|
||
--elevation-0: none;
|
||
--elevation-1: 0 1px 2px oklch(0.15 0.005 250 / 0.05);
|
||
--elevation-2: 0 1px 3px oklch(0.15 0.005 250 / 0.07), 0 1px 2px oklch(0.15 0.005 250 / 0.04);
|
||
--elevation-3: 0 4px 8px -2px oklch(0.15 0.005 250 / 0.08), 0 2px 4px -2px oklch(0.15 0.005 250 / 0.04);
|
||
--elevation-4: 0 12px 24px -6px oklch(0.15 0.005 250 / 0.1), 0 4px 8px -4px oklch(0.15 0.005 250 / 0.05);
|
||
--elevation-5: 0 20px 40px -8px oklch(0.15 0.005 250 / 0.14);
|
||
|
||
--spacing: 0.25rem;
|
||
|
||
/* No sub-pixel hairlines in an access theme — thin is a real 1px. */
|
||
--border-width-thin: 1px;
|
||
--border-width-base: 1px;
|
||
--border-width-thick: 2px;
|
||
--border-width-heavy: 4px;
|
||
|
||
/* No glass — inert values so consuming apps referencing these get no-ops. */
|
||
--glass-blur: 0px;
|
||
--glass-saturate: 100%;
|
||
--glass-brightness: 1;
|
||
--glass-contrast: 1;
|
||
}
|
||
|
||
/*
|
||
* Dark mode — very dark cool charcoal with very light ink (≈17.3:1), cards
|
||
* stepping clearly lighter (bg 0.16 → card 0.22 → popover 0.24 → muted
|
||
* 0.26: popover above card, below muted). Primary flips to a lighter blue
|
||
* carrying near-black ink (≈8.5:1) — dark-ink-on-bright beats
|
||
* white-on-mid-tone.
|
||
*/
|
||
.dark {
|
||
--background: oklch(0.16 0.005 250);
|
||
--foreground: oklch(0.96 0.005 250);
|
||
|
||
--card: oklch(0.22 0.005 250);
|
||
--card-foreground: oklch(0.96 0.005 250);
|
||
|
||
--popover: oklch(0.24 0.005 250);
|
||
--popover-foreground: oklch(0.96 0.005 250);
|
||
|
||
/* Lighter blue, near-black ink: (0.74³+.05)/(0.15³+.05) ≈ 8.5:1. */
|
||
--primary: oklch(0.74 0.11 255);
|
||
--primary-foreground: oklch(0.15 0.01 255);
|
||
|
||
--secondary: oklch(0.26 0.006 250);
|
||
--secondary-foreground: oklch(0.93 0.005 250);
|
||
|
||
/* muted-fg 0.78: on card 0.22 ≈ 8.7:1, on bg ≈ 9.7:1, on muted 0.26
|
||
* ≈ 7.8:1 — muted text stays AAA reading text in dark mode too. */
|
||
--muted: oklch(0.26 0.006 250);
|
||
--muted-foreground: oklch(0.78 0.01 250);
|
||
|
||
--accent: oklch(0.30 0.05 255);
|
||
--accent-foreground: oklch(0.85 0.08 255);
|
||
|
||
/* Status flips to bright swatches with near-black ink so every pair
|
||
* clears ≥7:1: destructive 0.423/0.054 ≈ 7.8:1 approx (kept at 0.72
|
||
* because red's true Y runs below L³); success ≈ 9.7:1; warning
|
||
* ≈ 11.1:1; info ≈ 9.0:1. */
|
||
--destructive: oklch(0.72 0.16 25);
|
||
--destructive-foreground: oklch(0.16 0.02 25);
|
||
--success: oklch(0.78 0.14 155);
|
||
--success-foreground: oklch(0.16 0.03 155);
|
||
--warning: oklch(0.82 0.14 80);
|
||
--warning-foreground: oklch(0.16 0.03 80);
|
||
--info: oklch(0.76 0.10 230);
|
||
--info-foreground: oklch(0.15 0.03 230);
|
||
|
||
/* Strong light-ink borders — boundaries stay visible at night too. */
|
||
--border: oklch(0.96 0.005 250 / 0.28);
|
||
--input: oklch(0.96 0.005 250 / 0.32);
|
||
--ring: oklch(0.74 0.11 255);
|
||
|
||
--chart-1: oklch(0.70 0.12 255);
|
||
--chart-2: oklch(0.78 0.13 150);
|
||
--chart-3: oklch(0.82 0.13 80);
|
||
--chart-4: oklch(0.70 0.15 20);
|
||
--chart-5: oklch(0.68 0.13 310);
|
||
|
||
--sidebar: oklch(0.18 0.005 250);
|
||
--sidebar-foreground: oklch(0.96 0.005 250);
|
||
--sidebar-primary: oklch(0.74 0.11 255);
|
||
--sidebar-primary-foreground: oklch(0.15 0.01 255);
|
||
--sidebar-accent: oklch(0.30 0.05 255);
|
||
--sidebar-accent-foreground: oklch(0.85 0.08 255);
|
||
--sidebar-border: oklch(0.96 0.005 250 / 0.25);
|
||
--sidebar-ring: oklch(0.74 0.11 255);
|
||
|
||
--syntax-keyword: oklch(0.78 0.11 310);
|
||
--syntax-string: oklch(0.80 0.11 155);
|
||
--syntax-number: oklch(0.82 0.11 55);
|
||
--syntax-comment: oklch(0.74 0.01 250);
|
||
--syntax-function: oklch(0.78 0.10 255);
|
||
--syntax-type: oklch(0.80 0.08 210);
|
||
|
||
/* ── Chat surfaces (dark) ── user bubble is a deep blue panel with
|
||
* very light ink (≈12:1); assistant matches the card. */
|
||
--chat-user-bg: oklch(0.30 0.06 255);
|
||
--chat-user-fg: oklch(0.96 0.005 250);
|
||
--chat-assistant-bg: oklch(0.22 0.005 250);
|
||
--chat-assistant-fg: oklch(0.96 0.005 250);
|
||
--chat-assistant-border: oklch(0.96 0.005 250 / 0.28);
|
||
|
||
--elevation-1: 0 1px 2px oklch(0 0 0 / 0.3);
|
||
--elevation-2: 0 1px 3px oklch(0 0 0 / 0.4), 0 1px 2px oklch(0 0 0 / 0.25);
|
||
--elevation-3: 0 4px 8px -2px oklch(0 0 0 / 0.4), 0 2px 4px -2px oklch(0 0 0 / 0.25);
|
||
--elevation-4: 0 12px 24px -6px oklch(0 0 0 / 0.45), 0 4px 8px -4px oklch(0 0 0 / 0.25);
|
||
--elevation-5: 0 20px 40px -8px oklch(0 0 0 / 0.55);
|
||
}
|
||
|
||
/*
|
||
* @layer base — Lucent's access-first philosophy.
|
||
*
|
||
* Atkinson Hyperlegible everywhere; no negative tracking (the font was
|
||
* drawn for character disambiguation — don't squeeze it). Links carry a
|
||
* real underline at rest. Boundaries are borders, not shadows.
|
||
*/
|
||
@layer base {
|
||
body {
|
||
min-height: 100vh;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
letter-spacing: 0;
|
||
font-family: var(--font-sans);
|
||
font-size: var(--text-body-size);
|
||
line-height: var(--text-body-lh);
|
||
}
|
||
|
||
/* Headings — same family, weight 700 does the hierarchy work.
|
||
* `color: inherit` (NOT var(--foreground)) so headings sitting on
|
||
* colored slabs keep the slab's foreground pairing. */
|
||
h1, h2, h3, h4,
|
||
[data-slot="card-title"],
|
||
[data-slot="dialog-title"],
|
||
[data-slot="sheet-title"],
|
||
[data-slot="alert-dialog-title"] {
|
||
font-family: var(--font-heading);
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
color: inherit;
|
||
}
|
||
|
||
code, kbd, samp, pre,
|
||
[data-slot="code"],
|
||
[data-slot="code-block"] {
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
/* Inline code — foreground-tint chip with foreground ink (house
|
||
* pattern); slightly stronger tint so the chip boundary is visible. */
|
||
:not(pre) > code {
|
||
padding: 0.1em 0.35em;
|
||
border-radius: calc(var(--radius) * 0.5);
|
||
background: color-mix(in oklch, var(--foreground) 8%, transparent);
|
||
color: var(--foreground);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* Selection — a solid blue tint, ink stays put. */
|
||
::selection {
|
||
background: color-mix(in oklch, var(--primary) 25%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
/* Links — the blue, UNDERLINED AT REST (an affordance you can see,
|
||
* not one you must discover); the underline thickens on hover. */
|
||
a {
|
||
color: var(--primary);
|
||
text-decoration-line: underline;
|
||
text-decoration-thickness: 1px;
|
||
text-decoration-color: currentColor;
|
||
text-underline-offset: 0.2em;
|
||
transition: text-decoration-thickness var(--duration-fast) var(--ease-standard);
|
||
}
|
||
a:hover {
|
||
text-decoration-thickness: 2px;
|
||
}
|
||
|
||
[data-slot="sidebar"] {
|
||
background: var(--sidebar);
|
||
border-right: var(--border-width-base) solid var(--sidebar-border);
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Focus-visible — thicker than the house norm: a 3px solid ring, offset
|
||
* 2px, on every actionable control. Keyboard users are first-class here.
|
||
* Placed outside @layer base so it beats Tailwind's default ring utilities.
|
||
*/
|
||
[data-slot="button"]:focus-visible,
|
||
[data-slot="select-trigger"]:focus-visible,
|
||
[data-slot="checkbox"]:focus-visible,
|
||
[data-slot="radio-group-item"]:focus-visible,
|
||
[data-slot="switch"]:focus-visible,
|
||
[data-slot="tabs-trigger"]:focus-visible,
|
||
a:focus-visible {
|
||
outline: 3px solid var(--ring);
|
||
outline-offset: 2px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Buttons — bold labels (Atkinson ships 400/700; the 700 IS the button
|
||
* voice, GOV.UK style). */
|
||
[data-slot="button"] {
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
[data-slot="button"]:hover:not(:disabled) {
|
||
opacity: 0.9;
|
||
}
|
||
[data-slot="button"]:active:not(:disabled) {
|
||
opacity: 0.82;
|
||
}
|
||
|
||
/* Card titles — pinned to the subtitle role so the scale is the theme's
|
||
* decision, not the card primitive's default. */
|
||
[data-slot="card-title"] {
|
||
font-size: var(--text-subtitle-size);
|
||
line-height: var(--text-subtitle-lh);
|
||
}
|
||
|
||
/* Touch targets — 44px minimum for EVERYONE, not gated behind a coarse-
|
||
* pointer query. Tremor, low vision, and arthritis don't check your
|
||
* pointer type. */
|
||
[data-slot="button"] {
|
||
min-height: 2.75rem;
|
||
min-width: 2.75rem;
|
||
}
|
||
[data-slot="input"],
|
||
[data-slot="select-trigger"] {
|
||
min-height: 2.75rem;
|
||
}
|
||
|
||
/* Coarse pointers keep the same floor (harmless, kept for parity with the
|
||
* house pattern). */
|
||
@media (pointer: coarse) {
|
||
[data-slot="button"] {
|
||
min-height: 2.75rem;
|
||
min-width: 2.75rem;
|
||
}
|
||
[data-slot="input"],
|
||
[data-slot="select-trigger"] {
|
||
min-height: 2.75rem;
|
||
}
|
||
}
|
||
|
||
/* Inputs — white field, strong visible border; focus is a border-color
|
||
* change PLUS a 2px ring so the state change never hides. */
|
||
[data-slot="input"],
|
||
[data-slot="textarea"],
|
||
[data-slot="select-trigger"] {
|
||
background: var(--card);
|
||
border: var(--border-width-base) solid var(--input);
|
||
border-radius: var(--radius);
|
||
color: var(--foreground);
|
||
transition:
|
||
border-color var(--duration-fast) var(--ease-standard),
|
||
box-shadow var(--duration-fast) var(--ease-standard);
|
||
}
|
||
[data-slot="input"]::placeholder,
|
||
[data-slot="textarea"]::placeholder {
|
||
color: var(--muted-foreground);
|
||
opacity: 1;
|
||
}
|
||
[data-slot="input"]:hover:not(:disabled),
|
||
[data-slot="textarea"]:hover:not(:disabled),
|
||
[data-slot="select-trigger"]:hover:not(:disabled) {
|
||
border-color: color-mix(in oklch, var(--foreground) 45%, transparent);
|
||
}
|
||
[data-slot="input"]:focus,
|
||
[data-slot="input"]:focus-visible,
|
||
[data-slot="textarea"]:focus,
|
||
[data-slot="textarea"]:focus-visible,
|
||
[data-slot="select-trigger"]:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 2px var(--ring);
|
||
outline: none;
|
||
}
|
||
|
||
/* Reduced motion — transitions on interactive slots drop to zero; nothing
|
||
* in this theme is motion-dependent. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
[data-slot="button"],
|
||
[data-slot="input"],
|
||
[data-slot="textarea"],
|
||
[data-slot="select-trigger"],
|
||
[data-slot="tabs-trigger"],
|
||
[data-slot="switch"],
|
||
[data-slot="checkbox"],
|
||
a {
|
||
transition: none;
|
||
}
|
||
}
|