@invana/styling 0.0.31 → 0.0.32

package/README.md

@@ -95,10 +95,16 @@ All colors follow the CSS variable pattern and can be used with TailwindCSS util
 
 ### Border Radius
 
-- `--radius`: Base radius (0.5rem)
-- `--radius-lg`: Large radius
-- `--radius-md`: Medium radius
-- `--radius-sm`: Small radius
+Three dials set every corner; no component takes a radius prop. See the rationale at the top
+of `src/index.css` and try them live in Storybook (`Others/CornerRadius`).
+
+| Dial | Class | Draws | Default |
+| --- | --- | --- | --- |
+| `--radius` | `rounded`, `rounded-sm` … `rounded-4xl` (every step reads `--radius`) | tables, rows, boxes inside a card | `0px` |
+| `--radius-surface` | `rounded-surface` | cards, panels, dialogs, popovers, menus, tooltips | `var(--radius)` |
+| `--radius-control` | `rounded-control` | buttons, badges, chips, inputs, selects, tabs, toggles | `4px` |
+
+Round objects (avatars, dots, switch thumbs) keep `rounded-full` and follow no dial.
 
 ### Animations
 
@@ -120,7 +126,11 @@ You can override any variable by defining it after importing:
 
 @theme {
   --color-primary: hsl(270 100% 50%); /* Override primary color */
-  --radius: 1rem; /* Increase border radius */
+}
+
+:root {
+  --radius-surface: 6px; /* Round cards, panels and floating surfaces */
+  --radius-control: 2px; /* Soften buttons, badges and inputs less */
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/styling",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Invana TailwindCSS 4 Design System - Reusable styling configuration",
   "homepage": "https://github.com/invana/design-kit#readme",
   "type": "module",
@@ -32,6 +32,7 @@
     },
     "./themes": "./src/themes/index.ts",
     "./themes.config": "./src/themes.config.ts",
+    "./color": "./src/color.ts",
     "./themes/default": {
       "style": "./src/themes/default.css",
       "default": "./src/themes/default.css"

package/src/base.css

@@ -1,6 +1,24 @@
 /* Base styles */
-* {
-  border-color: var(--color-border);
+/*
+ * In the base layer, so a border-colour utility (`border-primary`,
+ * `border-l-warning`) wins. Unlayered, this rule beat every utility and each
+ * coloured border in the kit drew as the plain border.
+ */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  /*
+   * A ring's offset gap is the page, not Tailwind's default white — so a
+   * `ring-offset-2` reads as a gap on a dark theme too. A
+   * `ring-offset-<colour>` utility still wins.
+   */
+  *,
+  ::before,
+  ::after {
+    --tw-ring-offset-color: var(--color-background);
+  }
 }
 
 body {

package/src/color.ts

@@ -0,0 +1,80 @@
+/**
+ * A colour for any string — a node type, a relationship type, a model's name.
+ *
+ * Every categorical thing that needs a default colour gets one slot of the data
+ * palette (`themes/data-palette.css`), chosen by hashing its name. Same string,
+ * same slot, always: a type keeps its colour across canvases, lists and reloads,
+ * and it does not shift when a sibling is added or the list is re-sorted —
+ * colour follows the entity, never its rank.
+ *
+ * A set can hold more names than the palette has slots; past the eighth, slots
+ * repeat. That is admissible only because every use names the thing beside its
+ * swatch — colour is never the only carrier of identity.
+ *
+ * Three rungs, pick the one the surface can take:
+ *
+ * | Function | Returns | For |
+ * |---|---|---|
+ * | `colorSlotByString` | `1`…`8` | storing or binding the slot itself |
+ * | `colorVarByString` | `var(--color-data-N)` | anything that takes CSS |
+ * | `colorByString` | `rgb(…)`, resolved live | a canvas that needs a concrete value |
+ */
+
+/** How many slots the data palette defines. */
+export const DATA_PALETTE_SLOTS = 8;
+
+/** Neutral stand-in when a slot will not resolve (older styling, no theme yet). */
+const FALLBACK_VAR = '--color-muted-foreground';
+
+/** The palette slot (1-based) a string lands in. Empty → slot 1. */
+export function colorSlotByString(value: string | null | undefined): number {
+  if (!value) return 1;
+  let h = 0;
+  for (let i = 0; i < value.length; i++) h = (h * 31 + value.charCodeAt(i)) >>> 0;
+  return (h % DATA_PALETTE_SLOTS) + 1;
+}
+
+/** The slot's token as a CSS value, with a neutral fallback baked in. */
+export function colorVarByString(value: string | null | undefined): string {
+  return `var(--color-data-${colorSlotByString(value)}, var(${FALLBACK_VAR}))`;
+}
+
+/*
+ * Resolved colours, keyed by the root's theme stamp. A canvas asks once per
+ * item on every restyle and each probe forces a style recalc, so reads are
+ * cached; the theme lives on the root's class and inline style, so a theme or
+ * mode switch changes the stamp and the next read re-resolves.
+ */
+let cacheStamp = '';
+const cache = new Map<string, string | undefined>();
+
+/** Resolve any CSS colour value to the concrete `rgb(…)` the browser computes. */
+export function resolveCssColor(css: string): string | undefined {
+  if (typeof document === 'undefined') return undefined;
+  const root = document.documentElement;
+  const stamp = `${root.className}|${root.getAttribute('style') ?? ''}`;
+  if (stamp !== cacheStamp) {
+    cacheStamp = stamp;
+    cache.clear();
+  }
+  if (cache.has(css)) return cache.get(css);
+  const probe = document.createElement('span');
+  probe.style.color = css;
+  probe.style.display = 'none';
+  root.appendChild(probe);
+  const rgb = getComputedStyle(probe).color || undefined;
+  probe.remove();
+  cache.set(css, rgb);
+  return rgb;
+}
+
+/**
+ * The live colour for a string: `explicit` if given, else its palette slot
+ * resolved against the active theme. Falls back to the token string when there
+ * is no DOM to resolve against.
+ */
+export function colorByString(value: string | null | undefined, explicit?: string): string {
+  if (explicit) return explicit;
+  const css = colorVarByString(value);
+  return resolveCssColor(css) ?? css;
+}

package/src/index.css

@@ -141,6 +141,25 @@
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(210 10% 20%);
 
+  /* What frames the work — app header and footer, side panels, a panel's
+     header strip, a table's header — as distinct from the work itself
+     (`card`). A theme that sets no chrome of its own gets the point halfway
+     from its card to its background, so the layer exists, and recedes, in
+     every theme. */
+  --color-chrome: color-mix(in srgb, var(--color-card), var(--color-background));
+
+  /* shadcn's Sidebar names, mapped onto the kit's own: a sidebar is chrome,
+     its hover is accent, so it follows every theme rather than carrying a
+     palette of its own. */
+  --color-sidebar: var(--color-chrome);
+  --color-sidebar-foreground: var(--color-card-foreground);
+  --color-sidebar-primary: var(--color-primary);
+  --color-sidebar-primary-foreground: var(--color-primary-foreground);
+  --color-sidebar-accent: var(--color-accent);
+  --color-sidebar-accent-foreground: var(--color-accent-foreground);
+  --color-sidebar-border: var(--color-border);
+  --color-sidebar-ring: var(--color-ring);
+
   /* The line between two things on a canvas — a graph edge, a dependency
      arrow, a connector. Deliberately NOT --color-border: a border separates
      surfaces and may go invisible against them, while an edge is content and
@@ -148,59 +167,97 @@
   --color-edge: hsl(210 6% 78%);
 
   /* ------------------------------------------------------------------------
-   * Border radius — the design language, decided 01-09-2026.
+   * Border radius — three dials, revised 03-10-2026.
    *
-   *   STRUCTURE is cut.      0      anything that CONTAINS
-   *   CONTROLS are pressed.  2px    anything you PRESS or TYPE INTO
-   *   SHAPE is not radius.   999px  only where round IS the object
+   *   STRUCTURE   --radius          0          anything that CONTAINS
+   *   SURFACES    --radius-surface  --radius   cards, panels, anything floating
+   *   CONTROLS    --radius-control  4px        anything you PRESS, TYPE INTO
+   *                                            or that labels at control height
+   *   SHAPE       rounded-full      999px      only where round IS the object
    *
-   * Structure: cards, panels, dialogs, popovers, menus, tables, ledger rows,
-   * chips, badges, tab panels, canvas surfaces, diagram nodes.
-   * Controls: buttons, inputs, selects, textareas, menu items, tab triggers,
-   * toggles — `rounded-control`, generated from `--radius-control` below.
+   * Structure: tables, ledger rows, boxes inside a card, tab panels, canvas
+   * surfaces, diagram nodes — `rounded`, `rounded-sm` …
+   * `rounded-4xl`, every step of which reads `--radius`.
+   * Surfaces: the frames a block or a screen section sits in — Card (and so
+   * PanelContent), PanelBox — and everything that floats over
+   * the page: Dialog, AlertDialog, Popover, HoverCard, Tooltip, dropdown and
+   * menubar menus, Select's list, Command, the NavigationMenu viewport —
+   * `rounded-surface`, which reads `--radius-surface`. It defaults to
+   * `--radius`; set it to round the frames while what is inside them stays
+   * cut.
+   * Controls: buttons, badges, chips, inputs, selects, textareas, menu items,
+   * tab triggers, toggles — `rounded-control`, which reads `--radius-control`.
    * Shape: avatars, status dots, spinners, slider thumbs, switch capsules,
-   * scrollbar thumbs. These keep `rounded-full` because they are round
-   * objects, not rectangles with soft ends. A rectangle wearing round ends is
-   * a pill, and there are no pills.
+   * scrollbar thumbs keep `rounded-full` because they are round objects, not
+   * rectangles with soft ends. There are no pills.
    *
    * WHY 0 FOR STRUCTURE. The hairline grid is the house component: cells sit
    * on a `bg-border` backdrop separated by `gap-px`, so the "border" is the
    * backdrop showing through a one-pixel gap. Any radius on a cell lets that
    * backdrop through at every corner as a grey notch — radii and hairline
-   * grids cannot both win. It also holds at application density: a radius
-   * that is invisible on a 44px button is loud on a 24px row, and nesting a
-   * chip in a row in a panel in a card stacks four of them into mush. Sharp
-   * nests at any size.
+   * grids cannot both win. Nesting a chip in a row in a panel in a card would
+   * also stack radii into mush. Sharp nests at any size.
    *
-   * WHY 2px FOR CONTROLS, not 0. At touch size a fully cut button reads as
-   * cut metal. 2px is invisible as decoration and legible as affordance: the
-   * difference between a surface and a thing you press is information, and in
-   * a dense application that does real work.
+   * WHY A RADIUS FOR CONTROLS. The difference between a surface and a thing
+   * you press is information. A badge sits with the controls, not the
+   * structure, so a Badge beside a Button of the same height draws the same
+   * corner.
    *
-   * The scale is deliberately flat. `rounded-sm` / `-md` / `-lg` / `-xl` /
-   * `-2xl` all resolve to 0, so the ~79 components already written against
-   * them need no edit, and a `rounded-lg` typed out of habit tomorrow cannot
-   * quietly reintroduce a radius.
+   * ALL THREE ARE DIALS. Tune any on `:root` or per theme
+   * (`[data-theme="…"] { --radius-control: 2px }`) and everything on that side
+   * follows. The structure scale is flat on purpose: every step draws the same
+   * corner, so a `rounded-lg` typed out of habit cannot drift from the rest.
+   * A component with no `rounded-*` class follows neither dial — give it one.
    * ---------------------------------------------------------------------- */
   --radius: 0px;
-  --radius-sm: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-  --radius-2xl: 0px;
-  --radius-3xl: 0px;
+  --radius-xs: var(--radius);
+  --radius-sm: var(--radius);
+  --radius-md: var(--radius);
+  --radius-lg: var(--radius);
+  --radius-xl: var(--radius);
+  --radius-2xl: var(--radius);
+  --radius-3xl: var(--radius);
+  --radius-4xl: var(--radius);
+
+  /* Cards, panels and floating surfaces (dialogs, popovers, menus) point at
+     `rounded-surface`. Follows --radius until set on its own. */
+  --radius-surface: var(--radius);
+
+  /* Every control points at `rounded-control`. */
+  --radius-control: 4px;
 
-  /* The only non-zero rectangle radius in the system. Generates
-     `rounded-control`, which every control component points at. */
-  --radius-control: 2px;
+  /* Retained alias of --radius-control. Prefer `rounded-control`. */
+  --radius-2px: var(--radius-control);
 
-  /* Retained: predates the decision, and is now the same value as
-     --radius-control. Prefer `rounded-control` — it says what it is for. */
-  --radius-2px: 2px;
+  /* ------------------------------------------------------------------------
+   * Control heights — one scale, and a size name means one height.
+   *
+   *   xs   22px   a badge or an icon button inside a row
+   *   sm   26px   the application control: search, input, select, filter
+   *              chip, segmented control, tab, toolbar button
+   *   md   32px   a standalone form, a dialog's buttons — `default` sizes
+   *   lg   40px   a page form, a page's primary action
+   *
+   * Before this, every component picked its own number for each name — a
+   * `sm` badge was 22px, a `sm` button 32px, a `sm` input 26px — so two
+   * controls of the same size never lined up in a toolbar. Every component
+   * with a `size` now maps the name onto these, and nothing else.
+   *
+   * Spacing tokens, so they generate `h-control-sm`, `min-h-control-sm`,
+   * `size-control-sm` and `w-control-sm`. Ratios of the root like the type:
+   * the px above are at the 13px application root, and a 16px site gets
+   * proportionally taller controls. `cn` registers the names with
+   * tailwind-merge, which does not otherwise know them.
+   * ---------------------------------------------------------------------- */
+  --spacing-control-xs: calc(22rem / 13);
+  --spacing-control-sm: calc(26rem / 13);
+  --spacing-control-md: calc(32rem / 13);
+  --spacing-control-lg: calc(40rem / 13);
 
   /* Animations */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-row-in: row-in 1s ease-out;
 }
 
 /*
@@ -279,12 +336,13 @@
     opacity: 0;
     transform: scale(0.9);
     transition: opacity 150ms ease-out, transform 150ms ease-out;
+    --hint-color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
     background-repeat: no-repeat;
     background-image:
-      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
-      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
-      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7)),
-      linear-gradient(hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.7));
+      linear-gradient(var(--hint-color), var(--hint-color)),
+      linear-gradient(var(--hint-color), var(--hint-color)),
+      linear-gradient(var(--hint-color), var(--hint-color)),
+      linear-gradient(var(--hint-color), var(--hint-color));
   }
 
   &::before {
@@ -300,9 +358,7 @@
   &:hover::before,
   &:hover::after,
   &:focus-visible::before,
-  &:focus-visible::after,
-  &:focus-within::before,
-  &:focus-within::after {
+  &:focus-visible::after {
     opacity: 1;
     transform: scale(1);
   }
@@ -326,6 +382,13 @@
   }
 }
 
+/* A row that just streamed in: arrives tinted, fades to its own ground. */
+@keyframes row-in {
+  from {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  }
+}
+
 /* Base styles */
 html,
 body {
@@ -334,8 +397,26 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-* {
-  border-color: var(--color-border);
+/*
+ * In the base layer, so a border-colour utility (`border-primary`,
+ * `border-l-warning`) wins. Unlayered, this rule beat every utility and each
+ * coloured border in the kit drew as the plain border.
+ */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  /*
+   * A ring's offset gap is the page, not Tailwind's default white — so a
+   * `ring-offset-2` reads as a gap on a dark theme too. A
+   * `ring-offset-<colour>` utility still wins.
+   */
+  *,
+  ::before,
+  ::after {
+    --tw-ring-offset-color: var(--color-background);
+  }
 }
 
 body {

package/src/theme.css

@@ -34,21 +34,27 @@
   --color-card-foreground: hsl(222.2 84% 4.9%);
 
   /* Border Radius — see the full rationale in `index.css`.
-     Structure 0 · controls 2px (`rounded-control`) · round only where round
-     IS the object. The scale is flat on purpose so components already written
-     against rounded-sm/md/lg need no edit and cannot drift back. */
+     Three dials: structure `--radius` (0, every step below reads it),
+     surfaces `--radius-surface` (card-like frames, `rounded-surface`, follows
+     --radius) and controls `--radius-control` (4px, `rounded-control`) ·
+     round only where
+     round IS the object. */
   --radius: 0px;
-  --radius-sm: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-  --radius-2xl: 0px;
-  --radius-3xl: 0px;
-  --radius-control: 2px;
+  --radius-xs: var(--radius);
+  --radius-sm: var(--radius);
+  --radius-md: var(--radius);
+  --radius-lg: var(--radius);
+  --radius-xl: var(--radius);
+  --radius-2xl: var(--radius);
+  --radius-3xl: var(--radius);
+  --radius-4xl: var(--radius);
+  --radius-surface: var(--radius);
+  --radius-control: 4px;
 
   /* Animations */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-row-in: row-in 1s ease-out;
 }
 
 @keyframes accordion-down {
@@ -61,6 +67,10 @@
   to { height: 0; }
 }
 
+@keyframes row-in {
+  from { background-color: color-mix(in srgb, var(--color-primary) 12%, transparent); }
+}
+
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   @theme {

package/src/themes/default.css

@@ -1,63 +1,76 @@
 /**
  * Default Theme (Invana Brand Colors)
- * Light and dark variants with green accent
+ * Light and dark variants with green accent, on a cool slate neutral.
+ *
+ * Surfaces are three layers, so a shell reads as structure rather than one
+ * colour with lines on it:
+ *   background  the canvas behind everything (gutters, resize handles)
+ *   chrome      what frames the work: app header and footer, side panels,
+ *               a panel's header strip — it recedes
+ *   card        the work itself: the editor, a panel's body — it comes forward
+ *   popover     what floats over all of them: menus, tooltips, popovers —
+ *               solid, one step past card, with a border and a shadow
+ * Dark runs background < chrome < card; light runs background < chrome < card
+ * the same way, ending on white. Primary passes 4.5:1 against card in both.
  */
 
 /* Light mode - Default theme */
 [data-theme="default-light"],
 .theme-default-light {
   /* Raw HSL values for opacity modifiers */
-  --background: 0 0% 97%;
-  --foreground: 210 10% 20%;
-  --muted: 210 6% 90%;
-  --muted-foreground: 210 8% 45%;
-  --accent: 210 6% 92%;
-  --accent-foreground: 210 10% 20%;
-  --popover: 0 0% 98%;
-  --popover-foreground: 210 10% 20%;
-  --border: 210 6% 85%;
-  --input: 210 6% 92%;
+  --background: 220 14% 92%;
+  --foreground: 220 15% 15%;
+  --chrome: 220 16% 96.5%;
+  --muted: 220 12% 93%;
+  --muted-foreground: 220 9% 42%;
+  --accent: 220 12% 91%;
+  --accent-foreground: 220 15% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 15% 15%;
+  --border: 220 12% 86%;
+  --input: 220 12% 86%;
   --card: 0 0% 100%;
-  --card-foreground: 210 10% 20%;
-  --primary: 142 70% 43%;
+  --card-foreground: 220 15% 15%;
+  --primary: 152 68% 30%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 142 30% 95%;
-  --secondary-foreground: 142 25% 40%;
-  --destructive: 0 70% 60%;
+  --secondary: 152 30% 94%;
+  --secondary-foreground: 152 40% 26%;
+  --destructive: 0 68% 48%;
   --destructive-foreground: 0 0% 100%;
-  --ring: 142 70% 43%;
-  --success: 142 70% 38%;
+  --ring: 152 68% 30%;
+  --success: 152 68% 30%;
   --success-foreground: 0 0% 100%;
-  --warning: 38 92% 42%;
+  --warning: 38 92% 38%;
   --warning-foreground: 0 0% 100%;
-  --info: 210 90% 45%;
+  --info: 212 85% 45%;
   --info-foreground: 0 0% 100%;
 
   /* Full HSL colors for direct use */
-  --color-background: hsl(0 0% 97%);
-  --color-foreground: hsl(210 10% 20%);
+  --color-background: hsl(220 14% 92%);
+  --color-foreground: hsl(220 15% 15%);
+  --color-chrome: hsl(220 16% 96.5%);
+  --color-muted: hsl(220 12% 93%);
+  --color-muted-foreground: hsl(220 9% 42%);
+  --color-accent: hsl(220 12% 91%);
+  --color-accent-foreground: hsl(220 15% 15%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(220 15% 15%);
+  --color-border: hsl(220 12% 86%);
+  --color-input: hsl(220 12% 86%);
   --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(210 10% 20%);
-  --color-popover: hsl(0 0% 98%);
-  --color-popover-foreground: hsl(210 10% 20%);
-  --color-primary: hsl(142 70% 43%);
+  --color-card-foreground: hsl(220 15% 15%);
+  --color-primary: hsl(152 68% 30%);
   --color-primary-foreground: hsl(0 0% 100%);
-  --color-secondary: hsl(142 30% 95%);
-  --color-secondary-foreground: hsl(142 25% 40%);
-  --color-muted: hsl(210 6% 90%);
-  --color-muted-foreground: hsl(210 8% 45%);
-  --color-accent: hsl(210 6% 92%);
-  --color-accent-foreground: hsl(210 10% 20%);
-  --color-destructive: hsl(0 70% 60%);
+  --color-secondary: hsl(152 30% 94%);
+  --color-secondary-foreground: hsl(152 40% 26%);
+  --color-destructive: hsl(0 68% 48%);
   --color-destructive-foreground: hsl(0 0% 100%);
-  --color-border: hsl(210 6% 85%);
-  --color-input: hsl(210 6% 92%);
-  --color-ring: hsl(142 70% 43%);
-  --color-success: hsl(142 70% 38%);
+  --color-ring: hsl(152 68% 30%);
+  --color-success: hsl(152 68% 30%);
   --color-success-foreground: hsl(0 0% 100%);
-  --color-warning: hsl(38 92% 42%);
+  --color-warning: hsl(38 92% 38%);
   --color-warning-foreground: hsl(0 0% 100%);
-  --color-info: hsl(210 90% 45%);
+  --color-info: hsl(212 85% 45%);
   --color-info-foreground: hsl(0 0% 100%);
 }
 
@@ -65,56 +78,58 @@
 [data-theme="default-dark"],
 .theme-default-dark {
   /* Raw HSL values for opacity modifiers */
-  --background: 210 4% 10%;
-  --foreground: 0 0% 85%;
-  --muted: 210 6% 18%;
-  --muted-foreground: 210 8% 60%;
-  --accent: 210 6% 22%;
-  --accent-foreground: 0 0% 85%;
-  --popover: 210 4% 11%;
-  --popover-foreground: 0 0% 85%;
-  --border: 210 6% 22%;
-  --input: 210 6% 22%;
-  --card: 210 4% 14%;
-  --card-foreground: 0 0% 85%;
-  --primary: 142 70% 60%;
-  --primary-foreground: 210 4% 13%;
-  --secondary: 210 8% 28%;
-  --secondary-foreground: 0 0% 85%;
-  --destructive: 0 60% 45%;
-  --destructive-foreground: 0 0% 95%;
-  --ring: 142 70% 60%;
-  --success: 142 65% 55%;
-  --success-foreground: 210 4% 13%;
-  --warning: 45 90% 60%;
-  --warning-foreground: 210 4% 13%;
-  --info: 210 90% 65%;
-  --info-foreground: 210 4% 13%;
+  --background: 220 10% 6%;
+  --foreground: 220 10% 92%;
+  --chrome: 220 9% 9.5%;
+  --muted: 220 8% 17%;
+  --muted-foreground: 220 8% 64%;
+  --accent: 220 8% 20%;
+  --accent-foreground: 220 10% 92%;
+  --popover: 220 8% 16%;
+  --popover-foreground: 220 10% 92%;
+  --border: 220 8% 18%;
+  --input: 220 8% 21%;
+  --card: 220 8% 11%;
+  --card-foreground: 220 10% 92%;
+  --primary: 152 52% 52%;
+  --primary-foreground: 220 10% 6%;
+  --secondary: 220 8% 21%;
+  --secondary-foreground: 220 10% 92%;
+  --destructive: 0 62% 52%;
+  --destructive-foreground: 0 0% 98%;
+  --ring: 152 52% 52%;
+  --success: 152 52% 52%;
+  --success-foreground: 220 10% 6%;
+  --warning: 42 88% 58%;
+  --warning-foreground: 220 10% 6%;
+  --info: 212 85% 64%;
+  --info-foreground: 220 10% 6%;
 
   /* Full HSL colors for direct use */
-  --color-background: hsl(210 4% 10%);
-  --color-foreground: hsl(0 0% 85%);
-  --color-card: hsl(210 4% 14%);
-  --color-card-foreground: hsl(0 0% 85%);
-  --color-popover: hsl(210 4% 11%);
-  --color-popover-foreground: hsl(0 0% 85%);
-  --color-primary: hsl(142 70% 60%);
-  --color-primary-foreground: hsl(210 4% 13%);
-  --color-secondary: hsl(210 8% 28%);
-  --color-secondary-foreground: hsl(0 0% 85%);
-  --color-muted: hsl(210 6% 18%);
-  --color-muted-foreground: hsl(210 8% 60%);
-  --color-accent: hsl(210 6% 22%);
-  --color-accent-foreground: hsl(0 0% 85%);
-  --color-destructive: hsl(0 60% 45%);
-  --color-destructive-foreground: hsl(0 0% 95%);
-  --color-border: hsl(210 6% 22%);
-  --color-input: hsl(210 6% 22%);
-  --color-ring: hsl(142 70% 60%);
-  --color-success: hsl(142 65% 55%);
-  --color-success-foreground: hsl(210 4% 13%);
-  --color-warning: hsl(45 90% 60%);
-  --color-warning-foreground: hsl(210 4% 13%);
-  --color-info: hsl(210 90% 65%);
-  --color-info-foreground: hsl(210 4% 13%);
+  --color-background: hsl(220 10% 6%);
+  --color-foreground: hsl(220 10% 92%);
+  --color-chrome: hsl(220 9% 9.5%);
+  --color-muted: hsl(220 8% 17%);
+  --color-muted-foreground: hsl(220 8% 64%);
+  --color-accent: hsl(220 8% 20%);
+  --color-accent-foreground: hsl(220 10% 92%);
+  --color-popover: hsl(220 8% 16%);
+  --color-popover-foreground: hsl(220 10% 92%);
+  --color-border: hsl(220 8% 18%);
+  --color-input: hsl(220 8% 21%);
+  --color-card: hsl(220 8% 11%);
+  --color-card-foreground: hsl(220 10% 92%);
+  --color-primary: hsl(152 52% 52%);
+  --color-primary-foreground: hsl(220 10% 6%);
+  --color-secondary: hsl(220 8% 21%);
+  --color-secondary-foreground: hsl(220 10% 92%);
+  --color-destructive: hsl(0 62% 52%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-ring: hsl(152 52% 52%);
+  --color-success: hsl(152 52% 52%);
+  --color-success-foreground: hsl(220 10% 6%);
+  --color-warning: hsl(42 88% 58%);
+  --color-warning-foreground: hsl(220 10% 6%);
+  --color-info: hsl(212 85% 64%);
+  --color-info-foreground: hsl(220 10% 6%);
 }

package/src/themes/presets-base.css

@@ -92,6 +92,6 @@
   color: var(--color-primary);
   background: var(--kbd-bg);
   border: 1px solid var(--color-border-medium);
-  border-radius: 0.25rem;
+  border-radius: var(--radius-control);
   box-shadow: 0 1px 0 var(--scrollbar-thumb);
 }

package/src/themes/presets.css

@@ -27,12 +27,12 @@ html[data-theme^="minimal-"] {
   --background: 0 0% 4%;
   --color-foreground: #eee1d3;
   --foreground: 31 44% 88%;
-  --color-card: #1a1a1a;
-  --card: 0 0% 10%;
+  --color-card: #171717;
+  --card: 0 0% 9%;
   --color-card-foreground: #eee1d3;
   --card-foreground: 31 44% 88%;
-  --color-popover: #141414;
-  --popover: 0 0% 8%;
+  --color-popover: #1f1f1f;
+  --popover: 0 0% 12%;
   --color-popover-foreground: #eee1d3;
   --popover-foreground: 31 44% 88%;
   --color-muted: #111111;
@@ -165,12 +165,12 @@ html[data-theme^="minimal-"] {
   --background: 216 33% 6%;
   --color-foreground: #ccdeeb;
   --foreground: 205 44% 86%;
-  --color-card: #1a222c;
-  --card: 213 26% 14%;
+  --color-card: #151b23;
+  --card: 213 26% 11%;
   --color-card-foreground: #ccdeeb;
   --card-foreground: 205 44% 86%;
-  --color-popover: #141c24;
-  --popover: 210 29% 11%;
+  --color-popover: #19242e;
+  --popover: 210 29% 14%;
   --color-popover-foreground: #ccdeeb;
   --popover-foreground: 205 44% 86%;
   --color-muted: #111820;
@@ -303,12 +303,12 @@ html[data-theme^="minimal-"] {
   --background: 120 23% 5%;
   --color-foreground: #cfe1d4;
   --foreground: 137 23% 85%;
-  --color-card: #1a241a;
-  --card: 120 16% 12%;
+  --color-card: #151e15;
+  --card: 120 16% 10%;
   --color-card-foreground: #cfe1d4;
   --card-foreground: 137 23% 85%;
-  --color-popover: #141c14;
-  --popover: 120 17% 9%;
+  --color-popover: #1c271c;
+  --popover: 120 17% 13%;
   --color-popover-foreground: #cfe1d4;
   --popover-foreground: 137 23% 85%;
   --color-muted: #111811;
@@ -441,12 +441,12 @@ html[data-theme^="minimal-"] {
   --background: 0 23% 5%;
   --color-foreground: #ebd2d7;
   --foreground: 348 38% 87%;
-  --color-card: #221a1a;
-  --card: 0 13% 12%;
+  --color-card: #1d1616;
+  --card: 0 13% 10%;
   --color-card-foreground: #ebd2d7;
   --card-foreground: 348 38% 87%;
-  --color-popover: #1c1414;
-  --popover: 0 17% 9%;
+  --color-popover: #271c1c;
+  --popover: 0 17% 13%;
   --color-popover-foreground: #ebd2d7;
   --popover-foreground: 348 38% 87%;
   --color-muted: #181111;
@@ -579,12 +579,12 @@ html[data-theme^="minimal-"] {
   --background: 220 17% 6%;
   --color-foreground: #d7dce4;
   --foreground: 218 18% 87%;
-  --color-card: #1a1d23;
-  --card: 222 13% 12%;
+  --color-card: #181b20;
+  --card: 222 13% 11%;
   --color-card-foreground: #d7dce4;
   --card-foreground: 218 18% 87%;
-  --color-popover: #15171c;
-  --popover: 222 15% 10%;
+  --color-popover: #1e2229;
+  --popover: 222 15% 14%;
   --color-popover-foreground: #d7dce4;
   --popover-foreground: 218 18% 87%;
   --color-muted: #16181d;