@tradalab/lyra 3.2.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tradalab/lyra",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Tradalab UI kit — shadcn (radix-lyra) primitives, composed components, and app shell for React 19 / Next 16 / Tailwind v4.",
   "license": "UNLICENSED",
   "private": false,

package/styles/globals.css

@@ -48,6 +48,9 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -85,6 +88,15 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  /* The palette is otherwise achromatic, which left every state but a failure rendering as the
+     same grey: `secondary` and `outline` differ by a fill, not a hue, so "running" and "archived"
+     arrived as two identical pills. Measured as TEXT on --card, not picked by eye: success 5.49:1
+     light / 9.32:1 dark, warning 5.03 / 8.35, info 5.56 / 8.13. No *-foreground counterparts,
+     because nothing fills a shape with these yet and a token nothing renders is a claim nobody
+     checks. */
+  --success: oklch(0.508 0.105 165.6);
+  --warning: oklch(0.555 0.146 49);
+  --info: oklch(0.52 0.16 253);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -120,6 +132,10 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  /* Lighter ends of the same three ramps: on a dark card the light values drop under the bar. */
+  --success: oklch(0.773 0.153 163.2);
+  --warning: oklch(0.769 0.165 70.1);
+  --info: oklch(0.75 0.14 245);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -149,3 +165,618 @@
     @apply font-sans;
   }
 }
+
+/* A sidebar row marks "you are here" with `data-active:bg-sidebar-accent`, which is the SAME
+   background `hover:` paints. Only `font-medium` separated the two, so pointing at any row made it
+   look like the open one and the open one was findable only by elimination. A rail marks POSITION,
+   which is the one thing on that row you cannot also do.
+ *
+ * Three choices that each cost a bug to learn:
+ *   - `::before`, not `box-shadow`. An unlayered box-shadow beats every layered utility whatever
+ *     its specificity, so it overwrote `focus-visible:ring-2`; since the button also carries
+ *     `outline-hidden`, the row for the current page had NO keyboard focus indicator at all.
+ *   - the attribute, not `NavItem`. Apps render `SidebarMenuButton` directly for rows that carry a
+ *     count or a custom body, and those are rows you can be standing on too.
+ *   - `--sidebar-accent-foreground` as the fallback, which measures 16.4:1 on the active row in
+ *     light and 14.5:1 in dark. `--ring` reads better in prose and measures 2.38:1 here, so it is
+ *     invisible until an app happens to remap it. An app with an accent sets
+ *     `--sidebar-active-rail` and changes nothing else. */
+@layer components {
+  [data-slot="sidebar-menu-button"][data-active="true"] {
+    position: relative;
+  }
+
+  [data-slot="sidebar-menu-button"][data-active="true"]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 2px;
+    background: var(--sidebar-active-rail, var(--sidebar-accent-foreground));
+  }
+}
+
+/* COMPACT - denser UI, from ONE lever: the root font size.
+ *
+ * `data-compact="true"` anywhere in the tree (an app usually puts it on `<html>`, beside the theme
+ * class) and every rem-sized thing in the kit tightens together: text, padding, control heights, gaps,
+ * icon boxes. That is the whole mechanism, and it is here rather than in each app because the sizes
+ * it acts on are lyra's.
+ *
+ * It came out of redishub, which had three "density tokens" beside it - `--tab-height`,
+ * `--tree-item-py`, `--sidebar-header-p`. Measured before moving: the first two had ZERO readers.
+ * Only the font size was doing anything, and it works for every app, so only the font size moved.
+ *
+ * No combinator in the selector, deliberately: unlike the dark plate blocks this matches wherever the
+ * attribute lands, on the root or on a wrapper. And `rem` in a root `font-size` resolves against the
+ * INITIAL 16px rather than itself, so 0.875rem is 14px whichever element carries the attribute.
+ *
+ * ⚠️ It reaches rem sizes only. 32 places in this kit use an explicit px value; most should not scale
+ * (hairlines, `ring-[3px]`, a 2px rail), but about ten are content sizes - `text-[10px]`, `h-[14px]`,
+ * `w-[32px]` - and those stay put while everything around them tightens. Prefer the rem scale in a new
+ * primitive, or compact will leave it behind.
+ *
+ * An app that wants a different density sets `--compact-font-size` and nothing else. */
+:root {
+  --compact-font-size: 0.875rem;
+}
+
+[data-compact="true"] {
+  font-size: var(--compact-font-size);
+}
+
+/* TOAST above every overlay. Not a style preference.
+ *
+ * A toast reports the outcome of something the reader just did, and they usually did it in a dialog,
+ * so the case where the message matters is the case where it was hidden. Every overlay in this kit
+ * ships at z-50, which left stacking to DOM order, and the viewport mounts once at app start while a
+ * dialog portals in later: the dialog won every time.
+ *
+ * ⚠️ The per-toast `z-[calc(1000-var(--toast-index))]` inside the viewport is NOT a second chance at
+ * this. `position: fixed` with a z-index other than `auto` makes the viewport its own stacking
+ * context, so that 1000 is trapped inside it - it orders toasts against each other and can never lift
+ * one over a dialog. The viewport is the only element where the fix works.
+ *
+ * Unlayered on purpose: it has to outrank `.z-50` from `@layer utilities`, and an unlayered rule does
+ * that by cascade rather than by source order. It lives here rather than in `ui/primitives/toast.tsx`
+ * so that no primitive carries a hand deviation.
+ *
+ * ⚠️ Nothing checks this. An overlay added later at 60 or above reopens the bug silently, so raise
+ * this number rather than matching it. */
+[data-slot="toast-viewport"] {
+  z-index: 60;
+}
+
+/* PLATES - the palette a READER picks: the action colour, and a tint on every surface.
+ *
+ * A plate paints `--primary` / `--primary-foreground` / `--ring`, and tints `--background` `--card`
+ * `--popover` `--sidebar` `--muted` `--accent`. It never touches `--destructive` `--success`
+ * `--warning` `--info`: letting a chosen colour reach a status token is how a success badge comes to
+ * look like a button (doc/platform/CONVENTIONS.md §19).
+ *
+ * No app sets a plate by default. With no `data-plate` in the tree every token above keeps the
+ * neutral value declared earlier in this file, which is what every app ships.
+ *
+ * ## BOTH dark selectors, and why one alone is a white-on-white bug
+ *
+ * `.dark [data-plate]` is a DESCENDANT selector. An app that sets the theme class and the plate on
+ * the same element - `<html class="dark" data-plate=teal>`, which is where next-themes and a one-line
+ * effect both land - does not match it. The dark block is skipped, the LIGHT block wins, and
+ * `--background` goes near-white while `.dark` keeps `--foreground` near-white: white text on a white
+ * page. Measured with a real DOM, not reasoned: for a plate on `<html class=dark>` the descendant
+ * form is false and the same-element form true, and for a plate on `<body>` it is the other way
+ * round. Neither form covers both placements, so every dark block carries both.
+ *
+ * ## The label colour is per plate, and that is what makes the yellow band yellow
+ *
+ * Every plate used to carry a near-WHITE label, so it had to be dark enough for 4.6:1. Yellow, amber
+ * and gold are intrinsically light in sRGB, so that rule turned them brown: `gold` was #746208 (dark
+ * olive) and `orange` #803703. A yellow button in any real palette carries BLACK text. Each plate now
+ * takes whichever label lets it be more saturated, and `orange` went from #803703 C0.115 to #ef6c01
+ * C0.185.
+ *
+ * Two consequences worth stating. The swatch row is NOT one lightness, and it should not be - yellow
+ * IS lighter than blue, and levelling them is what made mud. And the switch needs a MARGIN (0.03
+ * chroma): without one, picking the more saturated family flips a plate over a rounding difference,
+ * so the row stops being consistent. That margin is what separates the yellow band (a real gain) from
+ * pink (0.200 to 0.215, noise).
+ *
+ * ⚠️ In DARK mode there is only one family: a button on a near-black page has to be the light thing.
+ * Allowing the alternative let chroma-maximising choose a navy button on a black page.
+ *
+ * ## Nineteen hues: 12 degrees through red and yellow, 24 elsewhere, one gap
+ *
+ * The step is finer where the palette was thinnest and where names are most distinct to the eye -
+ * red (0 to 36) and yellow (48 to 120). Adjacent plates measure dE76 10 to 21 in the fine bands and
+ * 15 to 57 in the 24-degree ones; 10 is still four times the just-noticeable difference, so they read
+ * as neighbours rather than duplicates.
+ *
+ * The single 48 degree gap is where `emerald` would go, and it is empty because `--success` sits at
+ * hue 165.6 - measured, no rotation of the grid avoids it. There is no emerald plate because emerald
+ * is what success means.
+ *
+ * Every plate clears, in both themes: its own label at 4.6:1, dE76 >= 25 from `--destructive` and
+ * >= 18 from the other three. The bars are this low - and red and orange plates exist at all - because
+ * NO status token fills a shape here: `--destructive` on a button is `bg-destructive/10
+ * text-destructive` and the other three only ever paint text or a border, so a solid plate block is
+ * already a different object.
+ *
+ * Nine of the nineteen - pink rust amber olive green teal azure blue violet - additionally sit
+ * >= 29.7 from EACH OTHER, an exact maximum rather than a greedy one, and are the only plates an app
+ * may derive from an id, where the difference between two plates IS the signal.
+ *
+ * ## The surface tint, and the white it costs
+ *
+ * You cannot tint white. At L 1.0 sRGB admits chroma 0.000, so `--background` `--card` `--popover`
+ * come down to L 0.99 - a light-mode plate is paid for with pure white, and that is the one visible
+ * concession the feature makes. The other three keep their neutral lightness, because lowering
+ * `--sidebar` or `--muted` took `--muted-foreground` under the contrast it already has.
+ *
+ * Chroma is UNIFORM across the nineteen, at the weakest value every hue can hold at that lightness
+ * (0.004 on the page, 0.007 on the sidebar, 0.014 on muted). Per-hue maxima would have tinted green
+ * ten times harder than red for no reason a reader could see. The lightness ladder is preserved -
+ * 0.99 page, 0.985 sidebar, 0.97 muted - because inverting it would flip which surface reads as
+ * "on top". The contrast check is relative: 4.5:1 is the bar, and where lyra already leaves a pair
+ * under it (`--muted-foreground` on `--muted` is 4.32 with no plate at all) the tint must merely not
+ * make it worse.
+ *
+ * `plate.test.ts` PARSES THIS BLOCK and re-measures every axis, including the surfaces, both dark
+ * selectors, and each plate's own label whichever one it chose. It reads the stylesheet rather than a
+ * copy of the numbers in TypeScript on purpose: the same table in two languages is a table that
+ * drifts, and chat shipped exactly that. */
+
+[data-plate="pink"] {
+  --primary: oklch(0.500 0.200 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.200 0);
+  --background: oklch(0.990 0.004 0);
+  --card: oklch(0.990 0.004 0);
+  --popover: oklch(0.990 0.004 0);
+  --sidebar: oklch(0.985 0.007 0);
+  --muted: oklch(0.970 0.014 0);
+  --accent: oklch(0.970 0.014 0);
+}
+.dark[data-plate="pink"],
+.dark [data-plate="pink"] {
+  --primary: oklch(0.780 0.140 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.140 0);
+  --background: oklch(0.145 0.014 0);
+  --card: oklch(0.205 0.014 0);
+  --popover: oklch(0.205 0.014 0);
+  --sidebar: oklch(0.205 0.014 0);
+  --muted: oklch(0.269 0.016 0);
+  --accent: oklch(0.269 0.016 0);
+}
+
+[data-plate="rose"] {
+  --primary: oklch(0.500 0.200 12);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.200 12);
+  --background: oklch(0.990 0.004 12);
+  --card: oklch(0.990 0.004 12);
+  --popover: oklch(0.990 0.004 12);
+  --sidebar: oklch(0.985 0.007 12);
+  --muted: oklch(0.970 0.014 12);
+  --accent: oklch(0.970 0.014 12);
+}
+.dark[data-plate="rose"],
+.dark [data-plate="rose"] {
+  --primary: oklch(0.780 0.130 12);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.130 12);
+  --background: oklch(0.145 0.014 12);
+  --card: oklch(0.205 0.014 12);
+  --popover: oklch(0.205 0.014 12);
+  --sidebar: oklch(0.205 0.014 12);
+  --muted: oklch(0.269 0.016 12);
+  --accent: oklch(0.269 0.016 12);
+}
+
+[data-plate="crimson"] {
+  --primary: oklch(0.500 0.200 24);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.200 24);
+  --background: oklch(0.990 0.004 24);
+  --card: oklch(0.990 0.004 24);
+  --popover: oklch(0.990 0.004 24);
+  --sidebar: oklch(0.985 0.007 24);
+  --muted: oklch(0.970 0.014 24);
+  --accent: oklch(0.970 0.014 24);
+}
+.dark[data-plate="crimson"],
+.dark [data-plate="crimson"] {
+  --primary: oklch(0.780 0.125 24);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.125 24);
+  --background: oklch(0.145 0.014 24);
+  --card: oklch(0.205 0.014 24);
+  --popover: oklch(0.205 0.014 24);
+  --sidebar: oklch(0.205 0.014 24);
+  --muted: oklch(0.269 0.016 24);
+  --accent: oklch(0.269 0.016 24);
+}
+
+[data-plate="rust"] {
+  --primary: oklch(0.440 0.150 36);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.440 0.150 36);
+  --background: oklch(0.990 0.004 36);
+  --card: oklch(0.990 0.004 36);
+  --popover: oklch(0.990 0.004 36);
+  --sidebar: oklch(0.985 0.007 36);
+  --muted: oklch(0.970 0.014 36);
+  --accent: oklch(0.970 0.014 36);
+}
+.dark[data-plate="rust"],
+.dark [data-plate="rust"] {
+  --primary: oklch(0.780 0.130 36);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.130 36);
+  --background: oklch(0.145 0.014 36);
+  --card: oklch(0.205 0.014 36);
+  --popover: oklch(0.205 0.014 36);
+  --sidebar: oklch(0.205 0.014 36);
+  --muted: oklch(0.269 0.016 36);
+  --accent: oklch(0.269 0.016 36);
+}
+
+[data-plate="orange"] {
+  --primary: oklch(0.680 0.185 48);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.680 0.185 48);
+  --background: oklch(0.990 0.004 48);
+  --card: oklch(0.990 0.004 48);
+  --popover: oklch(0.990 0.004 48);
+  --sidebar: oklch(0.985 0.007 48);
+  --muted: oklch(0.970 0.014 48);
+  --accent: oklch(0.970 0.014 48);
+}
+.dark[data-plate="orange"],
+.dark [data-plate="orange"] {
+  --primary: oklch(0.780 0.140 48);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.140 48);
+  --background: oklch(0.145 0.014 48);
+  --card: oklch(0.205 0.014 48);
+  --popover: oklch(0.205 0.014 48);
+  --sidebar: oklch(0.205 0.014 48);
+  --muted: oklch(0.269 0.016 48);
+  --accent: oklch(0.269 0.016 48);
+}
+
+[data-plate="ochre"] {
+  --primary: oklch(0.680 0.155 60);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.680 0.155 60);
+  --background: oklch(0.990 0.004 60);
+  --card: oklch(0.990 0.004 60);
+  --popover: oklch(0.990 0.004 60);
+  --sidebar: oklch(0.985 0.007 60);
+  --muted: oklch(0.970 0.014 60);
+  --accent: oklch(0.970 0.014 60);
+}
+.dark[data-plate="ochre"],
+.dark [data-plate="ochre"] {
+  --primary: oklch(0.790 0.145 60);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.790 0.145 60);
+  --background: oklch(0.145 0.014 60);
+  --card: oklch(0.205 0.014 60);
+  --popover: oklch(0.205 0.014 60);
+  --sidebar: oklch(0.205 0.014 60);
+  --muted: oklch(0.269 0.016 60);
+  --accent: oklch(0.269 0.016 60);
+}
+
+[data-plate="amber"] {
+  --primary: oklch(0.670 0.140 72);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.670 0.140 72);
+  --background: oklch(0.990 0.004 72);
+  --card: oklch(0.990 0.004 72);
+  --popover: oklch(0.990 0.004 72);
+  --sidebar: oklch(0.985 0.007 72);
+  --muted: oklch(0.970 0.014 72);
+  --accent: oklch(0.970 0.014 72);
+}
+.dark[data-plate="amber"],
+.dark [data-plate="amber"] {
+  --primary: oklch(0.830 0.135 72);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.830 0.135 72);
+  --background: oklch(0.145 0.014 72);
+  --card: oklch(0.205 0.014 72);
+  --popover: oklch(0.205 0.014 72);
+  --sidebar: oklch(0.205 0.014 72);
+  --muted: oklch(0.269 0.016 72);
+  --accent: oklch(0.269 0.016 72);
+}
+
+[data-plate="honey"] {
+  --primary: oklch(0.670 0.135 84);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.670 0.135 84);
+  --background: oklch(0.990 0.004 84);
+  --card: oklch(0.990 0.004 84);
+  --popover: oklch(0.990 0.004 84);
+  --sidebar: oklch(0.985 0.007 84);
+  --muted: oklch(0.970 0.014 84);
+  --accent: oklch(0.970 0.014 84);
+}
+.dark[data-plate="honey"],
+.dark [data-plate="honey"] {
+  --primary: oklch(0.700 0.140 84);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.700 0.140 84);
+  --background: oklch(0.145 0.014 84);
+  --card: oklch(0.205 0.014 84);
+  --popover: oklch(0.205 0.014 84);
+  --sidebar: oklch(0.205 0.014 84);
+  --muted: oklch(0.269 0.016 84);
+  --accent: oklch(0.269 0.016 84);
+}
+
+[data-plate="gold"] {
+  --primary: oklch(0.660 0.135 96);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.660 0.135 96);
+  --background: oklch(0.990 0.004 96);
+  --card: oklch(0.990 0.004 96);
+  --popover: oklch(0.990 0.004 96);
+  --sidebar: oklch(0.985 0.007 96);
+  --muted: oklch(0.970 0.014 96);
+  --accent: oklch(0.970 0.014 96);
+}
+.dark[data-plate="gold"],
+.dark [data-plate="gold"] {
+  --primary: oklch(0.780 0.160 96);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.160 96);
+  --background: oklch(0.145 0.014 96);
+  --card: oklch(0.205 0.014 96);
+  --popover: oklch(0.205 0.014 96);
+  --sidebar: oklch(0.205 0.014 96);
+  --muted: oklch(0.269 0.016 96);
+  --accent: oklch(0.269 0.016 96);
+}
+
+[data-plate="olive"] {
+  --primary: oklch(0.660 0.140 108);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.660 0.140 108);
+  --background: oklch(0.990 0.004 108);
+  --card: oklch(0.990 0.004 108);
+  --popover: oklch(0.990 0.004 108);
+  --sidebar: oklch(0.985 0.007 108);
+  --muted: oklch(0.970 0.014 108);
+  --accent: oklch(0.970 0.014 108);
+}
+.dark[data-plate="olive"],
+.dark [data-plate="olive"] {
+  --primary: oklch(0.780 0.165 108);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.165 108);
+  --background: oklch(0.145 0.014 108);
+  --card: oklch(0.205 0.014 108);
+  --popover: oklch(0.205 0.014 108);
+  --sidebar: oklch(0.205 0.014 108);
+  --muted: oklch(0.269 0.016 108);
+  --accent: oklch(0.269 0.016 108);
+}
+
+[data-plate="lime"] {
+  --primary: oklch(0.660 0.155 120);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.660 0.155 120);
+  --background: oklch(0.990 0.004 120);
+  --card: oklch(0.990 0.004 120);
+  --popover: oklch(0.990 0.004 120);
+  --sidebar: oklch(0.985 0.007 120);
+  --muted: oklch(0.970 0.014 120);
+  --accent: oklch(0.970 0.014 120);
+}
+.dark[data-plate="lime"],
+.dark [data-plate="lime"] {
+  --primary: oklch(0.780 0.185 120);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.185 120);
+  --background: oklch(0.145 0.014 120);
+  --card: oklch(0.205 0.014 120);
+  --popover: oklch(0.205 0.014 120);
+  --sidebar: oklch(0.205 0.014 120);
+  --muted: oklch(0.269 0.016 120);
+  --accent: oklch(0.269 0.016 120);
+}
+
+[data-plate="green"] {
+  --primary: oklch(0.500 0.160 144);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.160 144);
+  --background: oklch(0.990 0.004 144);
+  --card: oklch(0.990 0.004 144);
+  --popover: oklch(0.990 0.004 144);
+  --sidebar: oklch(0.985 0.007 144);
+  --muted: oklch(0.970 0.014 144);
+  --accent: oklch(0.970 0.014 144);
+}
+.dark[data-plate="green"],
+.dark [data-plate="green"] {
+  --primary: oklch(0.780 0.220 144);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.220 144);
+  --background: oklch(0.145 0.014 144);
+  --card: oklch(0.205 0.014 144);
+  --popover: oklch(0.205 0.014 144);
+  --sidebar: oklch(0.205 0.014 144);
+  --muted: oklch(0.269 0.016 144);
+  --accent: oklch(0.269 0.016 144);
+}
+
+[data-plate="teal"] {
+  --primary: oklch(0.530 0.090 192);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.530 0.090 192);
+  --background: oklch(0.990 0.004 192);
+  --card: oklch(0.990 0.004 192);
+  --popover: oklch(0.990 0.004 192);
+  --sidebar: oklch(0.985 0.007 192);
+  --muted: oklch(0.970 0.014 192);
+  --accent: oklch(0.970 0.014 192);
+}
+.dark[data-plate="teal"],
+.dark [data-plate="teal"] {
+  --primary: oklch(0.780 0.130 192);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.130 192);
+  --background: oklch(0.145 0.014 192);
+  --card: oklch(0.205 0.014 192);
+  --popover: oklch(0.205 0.014 192);
+  --sidebar: oklch(0.205 0.014 192);
+  --muted: oklch(0.269 0.016 192);
+  --accent: oklch(0.269 0.016 192);
+}
+
+[data-plate="cyan"] {
+  --primary: oklch(0.510 0.090 216);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.510 0.090 216);
+  --background: oklch(0.990 0.004 216);
+  --card: oklch(0.990 0.004 216);
+  --popover: oklch(0.990 0.004 216);
+  --sidebar: oklch(0.985 0.007 216);
+  --muted: oklch(0.970 0.014 216);
+  --accent: oklch(0.970 0.014 216);
+}
+.dark[data-plate="cyan"],
+.dark [data-plate="cyan"] {
+  --primary: oklch(0.780 0.135 216);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.135 216);
+  --background: oklch(0.145 0.014 216);
+  --card: oklch(0.205 0.014 216);
+  --popover: oklch(0.205 0.014 216);
+  --sidebar: oklch(0.205 0.014 216);
+  --muted: oklch(0.269 0.016 216);
+  --accent: oklch(0.269 0.016 216);
+}
+
+[data-plate="azure"] {
+  --primary: oklch(0.660 0.150 240);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.660 0.150 240);
+  --background: oklch(0.990 0.004 240);
+  --card: oklch(0.990 0.004 240);
+  --popover: oklch(0.990 0.004 240);
+  --sidebar: oklch(0.985 0.007 240);
+  --muted: oklch(0.970 0.014 240);
+  --accent: oklch(0.970 0.014 240);
+}
+.dark[data-plate="azure"],
+.dark [data-plate="azure"] {
+  --primary: oklch(0.830 0.090 240);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.830 0.090 240);
+  --background: oklch(0.145 0.014 240);
+  --card: oklch(0.205 0.014 240);
+  --popover: oklch(0.205 0.014 240);
+  --sidebar: oklch(0.205 0.014 240);
+  --muted: oklch(0.269 0.016 240);
+  --accent: oklch(0.269 0.016 240);
+}
+
+[data-plate="blue"] {
+  --primary: oklch(0.500 0.220 264);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.220 264);
+  --background: oklch(0.990 0.004 264);
+  --card: oklch(0.990 0.004 264);
+  --popover: oklch(0.990 0.004 264);
+  --sidebar: oklch(0.985 0.007 264);
+  --muted: oklch(0.970 0.014 264);
+  --accent: oklch(0.970 0.014 264);
+}
+.dark[data-plate="blue"],
+.dark [data-plate="blue"] {
+  --primary: oklch(0.710 0.150 264);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.710 0.150 264);
+  --background: oklch(0.145 0.014 264);
+  --card: oklch(0.205 0.014 264);
+  --popover: oklch(0.205 0.014 264);
+  --sidebar: oklch(0.205 0.014 264);
+  --muted: oklch(0.269 0.016 264);
+  --accent: oklch(0.269 0.016 264);
+}
+
+[data-plate="indigo"] {
+  --primary: oklch(0.500 0.220 288);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.220 288);
+  --background: oklch(0.990 0.004 288);
+  --card: oklch(0.990 0.004 288);
+  --popover: oklch(0.990 0.004 288);
+  --sidebar: oklch(0.985 0.007 288);
+  --muted: oklch(0.970 0.014 288);
+  --accent: oklch(0.970 0.014 288);
+}
+.dark[data-plate="indigo"],
+.dark [data-plate="indigo"] {
+  --primary: oklch(0.780 0.115 288);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.115 288);
+  --background: oklch(0.145 0.014 288);
+  --card: oklch(0.205 0.014 288);
+  --popover: oklch(0.205 0.014 288);
+  --sidebar: oklch(0.205 0.014 288);
+  --muted: oklch(0.269 0.016 288);
+  --accent: oklch(0.269 0.016 288);
+}
+
+[data-plate="violet"] {
+  --primary: oklch(0.500 0.220 312);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.220 312);
+  --background: oklch(0.990 0.004 312);
+  --card: oklch(0.990 0.004 312);
+  --popover: oklch(0.990 0.004 312);
+  --sidebar: oklch(0.985 0.007 312);
+  --muted: oklch(0.970 0.014 312);
+  --accent: oklch(0.970 0.014 312);
+}
+.dark[data-plate="violet"],
+.dark [data-plate="violet"] {
+  --primary: oklch(0.780 0.155 312);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.155 312);
+  --background: oklch(0.145 0.014 312);
+  --card: oklch(0.205 0.014 312);
+  --popover: oklch(0.205 0.014 312);
+  --sidebar: oklch(0.205 0.014 312);
+  --muted: oklch(0.269 0.016 312);
+  --accent: oklch(0.269 0.016 312);
+}
+
+[data-plate="magenta"] {
+  --primary: oklch(0.500 0.220 336);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.500 0.220 336);
+  --background: oklch(0.990 0.004 336);
+  --card: oklch(0.990 0.004 336);
+  --popover: oklch(0.990 0.004 336);
+  --sidebar: oklch(0.985 0.007 336);
+  --muted: oklch(0.970 0.014 336);
+  --accent: oklch(0.970 0.014 336);
+}
+.dark[data-plate="magenta"],
+.dark [data-plate="magenta"] {
+  --primary: oklch(0.780 0.185 336);
+  --primary-foreground: oklch(0.205 0 0);
+  --ring: oklch(0.780 0.185 336);
+  --background: oklch(0.145 0.014 336);
+  --card: oklch(0.205 0.014 336);
+  --popover: oklch(0.205 0.014 336);
+  --sidebar: oklch(0.205 0.014 336);
+  --muted: oklch(0.269 0.016 336);
+  --accent: oklch(0.269 0.016 336);
+}