@inui/design-system 0.0.0-stage → 1.22.0

package/dist/theme-tokens.css

@@ -0,0 +1,537 @@
+/*
+ * The palette. EDIT HERE to rebrand. Bare declarations (no selector) so
+ * `:scope` (index.css) and `:root` (theme.css) can each place them —
+ * theme.css also mirrors this list into `@theme`, since `@theme` can't
+ * `@import` a file that has rules (like the dark-mode block below).
+ */
+/* "DM Sans Variable" first — see the matching note in theme.css. */
+--font-sans:
+  "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  ui-sans-serif, system-ui, sans-serif;
+--font-mono:
+  "DM Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
+
+/*
+ * Light-mode values from MDS's Figma color palette, renumbered to this
+ * repo's Tailwind-convention shade numbers (50…950 + a 1000/1100/1200
+ * extension) rather than Figma's own step labels. warning/info/destructive
+ * deliberately use a darker step than Figma's "Default" for WCAG contrast —
+ * see git history for the exact ratios. Dark mode is untouched (hand-tuned
+ * separately, no counterpart to this palette exists yet).
+ */
+/*
+ * Level 1 — raw color primitives, 13 hue families x 14 steps, real usable
+ * Tailwind utilities (bg-blue-500, etc.) — see the "Primitives" Storybook
+ * story. NOT the recommended way to color anything: every semantic token
+ * below (--color-primary, --color-destructive, etc.) is Level 2, built by
+ * referencing these via var(), and is what components actually consume.
+ * Hue-to-role mapping: blue -> primary/info; red -> destructive;
+ * green -> success; yellow -> warning; neutral -> surfaces/borders/text;
+ * orange/violet/indigo/lime/cyan/pink/teal/fuchsia -> Accent 1-8, currently
+ * unused by any semantic token. white -> card/popover/foregrounds.
+ */
+--color-indigo-50: #f5f6ff;
+--color-indigo-100: #e5e8ff;
+--color-indigo-200: #d6daff;
+--color-indigo-300: #c7ccff;
+--color-indigo-400: #b3baff;
+--color-indigo-500: #9faafe;
+--color-indigo-600: #8993fa;
+--color-indigo-700: #7380f7;
+--color-indigo-800: #5a67f6;
+--color-indigo-900: #4256d7;
+--color-indigo-950: #2f4aac;
+--color-indigo-1000: #223987;
+--color-indigo-1100: #192b66;
+--color-indigo-1200: #101c46;
+--color-red-50: #fff7f5;
+--color-red-100: #ffe1db;
+--color-red-200: #ffd4cc;
+--color-red-300: #fec0b4;
+--color-red-400: #fcac9c;
+--color-red-500: #f49480;
+--color-red-600: #ed765e;
+--color-red-700: #e45b3f;
+--color-red-800: #df3011;
+--color-red-900: #bd1c00;
+--color-red-950: #9e200a;
+--color-red-1000: #791a06;
+--color-red-1100: #5c1305;
+--color-red-1200: #3f0e03;
+--color-cyan-50: #eefafc;
+--color-cyan-100: #cff1f7;
+--color-cyan-200: #b6e8f2;
+--color-cyan-300: #96dfee;
+--color-cyan-400: #6ed3e7;
+--color-cyan-500: #33c4e1;
+--color-cyan-600: #00b2d6;
+--color-cyan-700: #009fc7;
+--color-cyan-800: #008cb3;
+--color-cyan-900: #007599;
+--color-cyan-950: #006080;
+--color-cyan-1000: #004766;
+--color-cyan-1100: #003952;
+--color-cyan-1200: #002738;
+--color-violet-50: #faf6fe;
+--color-violet-100: #f0e7fd;
+--color-violet-200: #e4d5fb;
+--color-violet-300: #dcc7fa;
+--color-violet-400: #cfb4f8;
+--color-violet-500: #c0a0f3;
+--color-violet-600: #ac87ee;
+--color-violet-700: #9e72e9;
+--color-violet-800: #8854e8;
+--color-violet-900: #6f47cd;
+--color-violet-950: #5b3ba5;
+--color-violet-1000: #462d80;
+--color-violet-1100: #322361;
+--color-violet-1200: #211844;
+--color-yellow-50: #fff9e5;
+--color-yellow-100: #fff5d6;
+--color-yellow-200: #fff0c2;
+--color-yellow-300: #ffe9a8;
+--color-yellow-400: #fee18b;
+--color-yellow-500: #fbd86f;
+--color-yellow-600: #f8cd4f;
+--color-yellow-700: #f5c32e;
+--color-yellow-800: #f5ba0a;
+--color-yellow-900: #d6a100;
+--color-yellow-950: #ad8200;
+--color-yellow-1000: #856300;
+--color-yellow-1100: #664d00;
+--color-yellow-1200: #473600;
+--color-green-50: #f1f9f0;
+--color-green-100: #dcf0db;
+--color-green-200: #cbe8c9;
+--color-green-300: #b6dfb3;
+--color-green-400: #9dd49b;
+--color-green-500: #7ec57d;
+--color-green-600: #5eb55e;
+--color-green-700: #3aa63c;
+--color-green-800: #009900;
+--color-green-900: #008000;
+--color-green-950: #006b00;
+--color-green-1000: #005200;
+--color-green-1100: #003d04;
+--color-green-1200: #002904;
+--color-orange-50: #ffeed1;
+--color-orange-100: #ffe8c2;
+--color-orange-200: #ffdca3;
+--color-orange-300: #ffca7a;
+--color-orange-400: #ffb657;
+--color-orange-500: #ffa333;
+--color-orange-600: #ff9114;
+--color-orange-700: #eb7900;
+--color-orange-800: #d66c00;
+--color-orange-900: #bd5b00;
+--color-orange-950: #a34c00;
+--color-orange-1000: #8a3b00;
+--color-orange-1100: #6b2900;
+--color-orange-1200: #4d1c00;
+--color-pink-50: #fff5f9;
+--color-pink-100: #fee1eb;
+--color-pink-200: #fccfdf;
+--color-pink-300: #fabdd2;
+--color-pink-400: #f6a7c4;
+--color-pink-500: #ef8fb2;
+--color-pink-600: #e7739e;
+--color-pink-700: #de5487;
+--color-pink-800: #d62974;
+--color-pink-900: #bb165b;
+--color-pink-950: #991a44;
+--color-pink-1000: #751538;
+--color-pink-1100: #5a112d;
+--color-pink-1200: #3d0b20;
+--color-teal-50: #effaf9;
+--color-teal-100: #cff2ef;
+--color-teal-200: #b8eae5;
+--color-teal-300: #98e2dc;
+--color-teal-400: #6fd8d2;
+--color-teal-500: #2fcac0;
+--color-teal-600: #00b8ae;
+--color-teal-700: #00a89d;
+--color-teal-800: #008f88;
+--color-teal-900: #007a74;
+--color-teal-950: #00665f;
+--color-teal-1000: #004d47;
+--color-teal-1100: #003d3a;
+--color-teal-1200: #002926;
+--color-fuchsia-50: #fdf6fc;
+--color-fuchsia-100: #f8e2f5;
+--color-fuchsia-200: #f3d3ef;
+--color-fuchsia-300: #efc2e9;
+--color-fuchsia-400: #e7ace1;
+--color-fuchsia-500: #dd92d5;
+--color-fuchsia-600: #d17acd;
+--color-fuchsia-700: #c55ec1;
+--color-fuchsia-800: #b83db8;
+--color-fuchsia-900: #9d2d9f;
+--color-fuchsia-950: #842a82;
+--color-fuchsia-1000: #651f64;
+--color-fuchsia-1100: #4e184d;
+--color-fuchsia-1200: #371036;
+--color-lime-50: #f5faed;
+--color-lime-100: #e4efd3;
+--color-lime-200: #d5e6bb;
+--color-lime-300: #c5dc9e;
+--color-lime-400: #b2d07d;
+--color-lime-500: #9dc057;
+--color-lime-600: #87b018;
+--color-lime-700: #779d00;
+--color-lime-800: #688900;
+--color-lime-900: #577400;
+--color-lime-950: #476000;
+--color-lime-1000: #364900;
+--color-lime-1100: #283800;
+--color-lime-1200: #1a2700;
+--color-blue-50: #f0f9ff;
+--color-blue-100: #d6eeff;
+--color-blue-200: #c2e4ff;
+--color-blue-300: #a8d8ff;
+--color-blue-400: #8bcafe;
+--color-blue-500: #6fb7fb;
+--color-blue-600: #4fa3f8;
+--color-blue-700: #2e8ef5;
+--color-blue-800: #0a74f5;
+--color-blue-900: #0060d6;
+--color-blue-950: #0051ad;
+--color-blue-1000: #003e85;
+--color-blue-1100: #003066;
+--color-blue-1200: #002147;
+--color-neutral-50: #f7f7f7;
+--color-neutral-100: #ebebeb;
+--color-neutral-200: #e0e0e0;
+--color-neutral-300: #d4d4d4;
+--color-neutral-400: #c4c4c4;
+--color-neutral-500: #b5b5b5;
+--color-neutral-600: #a3a3a3;
+--color-neutral-700: #858585;
+--color-neutral-800: #636363;
+--color-neutral-900: #575757;
+--color-neutral-950: #424242;
+--color-neutral-1000: #333333;
+--color-neutral-1100: #242424;
+--color-neutral-1200: #1a1a1a;
+--color-white: #ffffff;
+
+--color-background: var(--color-neutral-50);
+--color-foreground: var(--color-neutral-1200);
+--color-card: var(--color-white);
+--color-card-foreground: var(--color-neutral-1200);
+--color-popover: var(--color-white);
+--color-popover-foreground: var(--color-neutral-1200);
+--color-primary: var(--color-blue-900);
+--color-primary-foreground: var(--color-white);
+--color-primary-hover: var(--color-blue-1000);
+--color-primary-active: var(--color-blue-1100);
+--color-secondary: var(--color-neutral-50);
+--color-secondary-foreground: var(--color-neutral-1200);
+--color-muted: var(--color-neutral-100);
+--color-muted-foreground: var(--color-neutral-900);
+--color-muted-hover: var(--color-neutral-200);
+--color-muted-active: var(--color-neutral-300);
+/* Lighter than muted-foreground on purpose, so disabled reads as its own state. */
+--color-disabled-foreground: var(--color-neutral-800);
+/* Matches --color-muted, not border/input — accent is a hover wash, not an outline. */
+--color-accent: var(--color-neutral-100);
+--color-accent-foreground: var(--color-neutral-1200);
+--color-destructive: var(--color-red-900);
+--color-destructive-foreground: var(--color-white);
+--color-destructive-hover: var(--color-red-950);
+--color-destructive-active: var(--color-red-1100);
+--color-destructive-light: var(--color-red-100);
+--color-destructive-ultra-light: var(--color-red-50);
+--color-destructive-text: var(--color-red-950);
+--color-success: var(--color-green-800);
+--color-success-foreground: var(--color-neutral-1200);
+--color-success-light: var(--color-green-100);
+--color-success-ultra-light: var(--color-green-50);
+--color-success-text: var(--color-green-1000);
+--color-warning: var(--color-yellow-950);
+--color-warning-foreground: var(--color-neutral-1200);
+--color-warning-light: var(--color-yellow-100);
+--color-warning-ultra-light: var(--color-yellow-50);
+--color-warning-text: var(--color-yellow-1100);
+--color-warning-solid-text: var(--color-neutral-1200);
+--color-alert: var(--color-orange-800);
+--color-alert-foreground: var(--color-neutral-1200);
+--color-alert-light: var(--color-orange-100);
+--color-alert-ultra-light: var(--color-orange-50);
+--color-alert-text: var(--color-orange-1000);
+--color-info: var(--color-blue-950);
+--color-info-foreground: var(--color-white);
+--color-info-light: var(--color-blue-100);
+--color-info-ultra-light: var(--color-blue-50);
+--color-info-text: var(--color-blue-1100);
+--color-surface: var(--color-white);
+--color-surface-foreground: var(--color-neutral-1200);
+--color-surface-chat: var(--color-white);
+--color-surface-chat-foreground: var(--color-neutral-1200);
+--color-surface-canvas: var(--color-neutral-50);
+--color-surface-canvas-foreground: var(--color-neutral-1200);
+/* Lighter than a strict WCAG 3:1 border, matching shadcn's own subtle
+   default look — a deliberate tradeoff, not an oversight. */
+--color-border: var(--color-neutral-200);
+--color-border-subtle: var(--color-neutral-100);
+--color-input: var(--color-neutral-200);
+/* A darker step of Primary, not neutral gray, so focus reads as "the
+   interactive color, emphasized". */
+--color-ring: var(--color-blue-950);
+--color-ring-destructive: var(--color-red-400);
+--color-overlay: rgb(26 26 26 / 0.35);
+
+/* AI identity gradient */
+--color-ai-grad-from: #e81f76;
+--color-ai-grad-to: #eb5324;
+--color-ai-grad-from-alpha: 0.8;
+--color-ai-wash: #ffc208;
+--color-ai-wash-alpha: 0.24;
+/* pre-baked for linear-gradient() */
+--color-ai-grad-from-fade: color-mix(in srgb, #e81f76 80%, transparent);
+--color-ai-wash-fade: color-mix(in srgb, #ffc208 24%, transparent);
+
+/* Sidebar — matches --color-background, not --color-card, so a card sits
+   visibly raised against it. */
+--color-sidebar: var(--color-neutral-50);
+--color-sidebar-foreground: var(--color-neutral-1200);
+--color-sidebar-primary: var(--color-blue-900);
+--color-sidebar-primary-foreground: var(--color-white);
+--color-sidebar-accent: var(--color-neutral-100);
+--color-sidebar-accent-foreground: var(--color-neutral-1200);
+--color-sidebar-border: var(--color-neutral-200);
+--color-sidebar-ring: var(--color-blue-950);
+
+/*
+ * Chart ramp — the Level 1 Accent 1-8 primitives at their -900 step, in
+ * numeric order. Deliberately independent from the status colors and from
+ * primary — a data series shouldn't read as "failing," "fine," or "brand
+ * action." cyan and teal are visually near-identical under tritanopia —
+ * flagged, not fixed; avoid using both if that matters for your audience.
+ * avatar.tsx uses a 6-of-8 subset — chart-1/3/4/6/7/8.
+ */
+--color-chart-1: var(--color-orange-900);
+--color-chart-2: var(--color-violet-900);
+--color-chart-3: var(--color-indigo-900);
+--color-chart-4: var(--color-lime-900);
+--color-chart-5: var(--color-cyan-900);
+--color-chart-6: var(--color-pink-900);
+--color-chart-7: var(--color-teal-900);
+--color-chart-8: var(--color-fuchsia-900);
+
+/* Shadows — neutral gray-1200 base (Night), not pure black */
+--shadow-md:
+  0 4px 6px -1px rgb(26 26 26 / 0.1), 0 2px 4px -2px rgb(26 26 26 / 0.1);
+--shadow-lg:
+  0 10px 15px -3px rgb(26 26 26 / 0.1), 0 4px 6px -4px rgb(26 26 26 / 0.1);
+--shadow-popover: 0 0 20px -4px rgb(26 26 26 / 0.18);
+/* AI glow, outward, blur layer — box-shadow can't paint the ring's
+   gradient (see the `@utility shadow-ai-glow` in theme.css, which composes
+   this blur with a masked `::before` ring using the same ai-wash/
+   ai-grad-from gradient the AI Card recipe's outline uses, rather than a
+   flat approximation). Reuses the ai-wash-fade color-mix() token above
+   (built for linear-gradient(), equally valid here — box-shadow's color
+   argument accepts any color) instead of introducing a new opacity value:
+   a soft yellow-tinted blur spreading outward. ai-wash doesn't vary
+   between light/dark (a brand color, not a surface token), so this
+   doesn't need a .dark override either. This file documents the value
+   only — the `@utility` itself lives in theme.css, since a plain CSS
+   variable can't hold a `::before`/mask rule; a consumer on the
+   own-Tailwind-build path still needs that `@utility` block (copy it
+   alongside this file, or import theme.css instead of this file alone). */
+--shadow-ai-glow-blur: 0 0 16px 4px var(--color-ai-wash-fade);
+/* AI glow, inward — bleeds in from an edge and fades out, instead of
+   outlining the whole shape (that's the outward glow above). A
+   background-image, not box-shadow — this needs to render correctly on
+   `<tr>` (DataTable's row-level marker), and box-shadow doesn't paint
+   reliably there in every browser, while background-image does. Applied
+   once on a `<tr>` for row-level marking, or identically on every cell in
+   a column for column-level marking — same width every time, so the
+   repeated gradient tiles seamlessly into one continuous glow down the
+   whole column instead of a visible seam at each cell boundary. Fades out
+   at 20% of whatever it's painted on — the row's own width for
+   `aiRowPredicate`, that cell's own width for `aiColumnIds` (every cell
+   in a column shares the column's width, so 20% resolves to the same
+   px value down the whole column anyway) — a percentage, not a fixed
+   px value, since a background-image's percentage stops are relative to
+   the element's own box by default, and this needs to track that box's
+   size rather than a constant. */
+--background-image-ai-glow: linear-gradient(
+  to right,
+  var(--color-ai-wash-fade),
+  transparent 20%
+);
+/* AI glow, inward, bottom variant — for whole-table AI presence
+   specifically (DataTable wrapped in a Card): a background-image too, not
+   box-shadow — backgrounds are always clipped to the element's own box, so
+   this reads as glowing up from inside the card's bottom edge, never
+   spilling outside it the way the outward glow above would (box-shadow
+   isn't clipped by an element's own `overflow-hidden`, only its children
+   are). Fades at 15% of the Card's own height — the Card IS the table
+   container in this recipe (see the "WithAIWholeTable" story) — shorter
+   than the 20% edge glow above since this is meant as a whole-surface
+   accent, not a boundary to scan the eye along. */
+--background-image-ai-glow-bottom: linear-gradient(
+  to top,
+  var(--color-ai-wash-fade),
+  transparent 15%
+);
+
+/* Animation */
+--animate-step-in: mmds-step-in 180ms ease-out both;
+
+/* Document/scope-root setup and the unprefixed shadcn aliases. */
+color-scheme: light;
+
+/*
+ * Unprefixed aliases for the shadcn component contract, which reads raw
+ * names like `--secondary`/`--popover` directly, not `--color-secondary`.
+ * Aliasing (not renaming) keeps the palette above the single source of
+ * truth; dark mode flows through for free since these just point at it.
+ */
+--background: var(--color-background);
+--foreground: var(--color-foreground);
+--card: var(--color-card);
+--card-foreground: var(--color-card-foreground);
+--popover: var(--color-popover);
+--popover-foreground: var(--color-popover-foreground);
+--primary: var(--color-primary);
+--primary-foreground: var(--color-primary-foreground);
+--secondary: var(--color-secondary);
+--secondary-foreground: var(--color-secondary-foreground);
+--muted: var(--color-muted);
+--muted-foreground: var(--color-muted-foreground);
+--accent: var(--color-accent);
+--accent-foreground: var(--color-accent-foreground);
+--destructive: var(--color-destructive);
+--destructive-foreground: var(--color-destructive-foreground);
+--border: var(--color-border);
+--input: var(--color-input);
+--ring: var(--color-ring);
+
+--sidebar: var(--color-sidebar);
+--sidebar-foreground: var(--color-sidebar-foreground);
+--sidebar-primary: var(--color-sidebar-primary);
+--sidebar-primary-foreground: var(--color-sidebar-primary-foreground);
+--sidebar-accent: var(--color-sidebar-accent);
+--sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
+--sidebar-border: var(--color-sidebar-border);
+--sidebar-ring: var(--color-sidebar-ring);
+
+--chart-1: var(--color-chart-1);
+--chart-2: var(--color-chart-2);
+--chart-3: var(--color-chart-3);
+--chart-4: var(--color-chart-4);
+--chart-5: var(--color-chart-5);
+--chart-6: var(--color-chart-6);
+--chart-7: var(--color-chart-7);
+--chart-8: var(--color-chart-8);
+
+/* No radius token in the palette; sonner/input-group read a bare --radius directly. */
+--radius: 0.625rem;
+
+/*
+ * Dark mode, nested so it travels with the light values. The three
+ * `:where(.dark)` arms cover `.dark` on the element itself, above it, or
+ * below it, whichever selector `&` resolves to (`:root` vs `:scope`) for a
+ * given importer. Only `--color-*` is overridden — the aliases point at
+ * those through `var()`.
+ */
+&:where(.dark),
+& :where(.dark),
+:where(.dark) & {
+  color-scheme: dark;
+
+  --color-background: #2f2925;
+  --color-foreground: #fbfafb;
+  --color-card: #49413b;
+  --color-card-foreground: #fbfafb;
+  --color-popover: #49413b;
+  --color-popover-foreground: #fbfafb;
+  --color-primary: #d6e6ff;
+  --color-primary-foreground: #2f2925;
+  --color-primary-hover: #adceff;
+  --color-primary-active: #75acff;
+  --color-secondary: #49413b;
+  --color-secondary-foreground: #fbfafb;
+  --color-muted: #3c3430;
+  --color-muted-foreground: #b0a69f;
+  --color-muted-hover: #655c55;
+  --color-muted-active: #7c7269;
+  /* Already far enough from foreground to read as disabled. */
+  --color-disabled-foreground: #b0a69f;
+  /* Matches --color-muted — see the light-mode block's comment. */
+  --color-accent: #3c3430;
+  --color-accent-foreground: #fbfafb;
+  --color-destructive: #e46d58;
+  --color-destructive-foreground: #201c19;
+  --color-destructive-hover: #ee9a84;
+  --color-destructive-active: #db4429;
+  --color-destructive-light: #742416;
+  --color-destructive-ultra-light: #3c130b;
+  --color-destructive-text: #fdddd5;
+  --color-success: #67c162;
+  --color-success-foreground: #2f2925;
+  --color-success-light: #256223;
+  --color-success-ultra-light: #1a3c1a;
+  --color-success-text: #c8ebb8;
+  --color-warning: #f9cb55;
+  --color-warning-foreground: #2f2925;
+  --color-warning-light: #7d560d;
+  --color-warning-ultra-light: #422c07;
+  --color-warning-text: #fdedb9;
+  --color-warning-solid-text: #422c07;
+  --color-alert: #f09f5c;
+  --color-alert-foreground: #2f2925;
+  --color-alert-light: #874712;
+  --color-alert-ultra-light: #402107;
+  --color-alert-text: #ffd3ae;
+  --color-info: #75acff;
+  --color-info-foreground: #2f2925;
+  --color-info-light: #0e3472;
+  --color-info-ultra-light: #081d3a;
+  --color-info-text: #d6e6ff;
+  --color-surface: #49413b;
+  --color-surface-foreground: #fbfafb;
+  --color-surface-chat: #49413b;
+  --color-surface-chat-foreground: #fbfafb;
+  --color-surface-canvas: #2f2925;
+  --color-surface-canvas-foreground: #fbfafb;
+  --color-border: #655c55;
+  --color-border-subtle: #574e47;
+  --color-input: #655c55;
+  --color-ring: #e3deda;
+  --color-ring-destructive: #e46d58;
+  --color-overlay: rgb(32 28 25 / 0.5);
+
+  /* Sidebar — sits at background level so the inset (card) reads as raised */
+  --color-sidebar: #2f2925;
+  --color-sidebar-foreground: #fbfafb;
+  --color-sidebar-primary: #d6e6ff;
+  --color-sidebar-primary-foreground: #2f2925;
+  --color-sidebar-accent: #3c3430;
+  --color-sidebar-accent-foreground: #fbfafb;
+  --color-sidebar-border: #574e47;
+  --color-sidebar-ring: #e3deda;
+
+  /* Chart ramp — dark values, same series order as light. chart-1 stays
+     independent here since dark primary is a near-white pastel, not a
+     usable chart color; the rest are hand-lightened from light-mode. */
+  --color-chart-1: #75acff;
+  --color-chart-2: #c669b4;
+  --color-chart-3: #70878f;
+  --color-chart-4: #79d5f4;
+  --color-chart-5: #45a163;
+  --color-chart-6: #a6c059;
+  --color-chart-7: #996ec4;
+  --color-chart-8: #ee81b9;
+
+  /* AI identity gradient */
+  --color-ai-grad-from: #e81f76;
+  --color-ai-grad-to: #eb5324;
+  --color-ai-grad-from-alpha: 0.8;
+  --color-ai-wash: #ffc208;
+  --color-ai-wash-alpha: 0.24;
+  /* pre-baked for linear-gradient() */
+  --color-ai-grad-from-fade: color-mix(in srgb, #e81f76 80%, transparent);
+  --color-ai-wash-fade: color-mix(in srgb, #ffc208 24%, transparent);
+}