@spaethtech/svelte-ui 0.16.0 → 0.16.1-dev.76.a0169fa

package/.claude/skills/themes/SKILL.md

@@ -22,7 +22,7 @@ per-component `--dt-*`/`--card-*` namespaces have all been removed — don't rei
 ### Palette — `--ui-color-*`
 
 ```
---ui-color-background   --ui-color-text
+--ui-color-background   --ui-color-text      --ui-color-neutral
 --ui-color-primary      --ui-color-secondary
 --ui-color-success      --ui-color-warning
 --ui-color-error        --ui-color-info
@@ -30,14 +30,23 @@ per-component `--dt-*`/`--card-*` namespaces have all been removed — don't rei
 
 These are the only palette colours a component references. The `variant` axis
 (`types/variants.ts` → `variantToken`) maps each `Variant` to one of these (`danger`→`error`; the two
-non-accent variants `neutral` and `ghost` → `--ui-color-text`). Canonical order:
+non-accent variants `neutral` and `ghost` → **`--ui-color-neutral`**). Canonical order:
 `neutral · primary · secondary · success · info · warning · danger · ghost`.
 
+**`neutral` is the default/undefined variant** — every sizeable/themeable component defaults to
+`variant="neutral"`, so out of the box the whole library is **monochrome**; a colour appears only when
+you set an explicit `variant`. **`--ui-color-neutral`** is the themeable neutral base: it **defaults to
+`var(--ui-color-text)`** (so it flips opposite `--ui-color-background` per theme, and a border mixed
+toward `transparent` always reads against the background), but a theme can override it **independently
+of body text** to recolour every neutral border/surface at once. Every neutral border/divider — and
+`--ui-border-color` — derives from it, so it's the single knob for "the colour of all neutral borders".
+
 - `ghost` — borderless, transparent, hover-tint only (the minimal control). For the box-shaped
   **fields** (Input/Select/TextArea) this also drives the **field background**: `ghost` → transparent,
   every other variant → `--ui-color-background` (so a field reads as a field on any surface).
-- `neutral` — the _uncoloured_ variant (mixes from `--ui-color-text`): **solid** in solid contexts
-  (Button/Toggle/Banner → black-on-white / white-on-black), a **tint** in soft contexts (Badge/Alert).
+- `neutral` — the _uncoloured_, **default** variant (mixes from `--ui-color-neutral`, which defaults to
+  `--ui-color-text`): **solid** in solid contexts (Button/Toggle/Banner → black-on-white /
+  white-on-black), a **tint** in soft/bordered contexts (Badge/Alert/Input/Card frame).
 - (`plain` was removed — it's now `ghost`. Old bordered-`ghost` → `neutral`.)
 
 Field **help/error text** uses no new token: the muted `description` row is an inline
@@ -68,7 +77,7 @@ variant token at shared strengths, so every tinted surface is calculated identic
 ```
 --ui-tint-soft         12%   soft resting fill        (Badge fill, Alert `filled`)
 --ui-tint-divider      30%   soft internal divider    (CardHeader/CardFooter separators; the default
-                                                        secondary divider is `--ui-border-color`)
+                                                        NEUTRAL divider is `--ui-border-color`)
 --ui-tint-border       50%   bordered surface, REST   (Badge/Alert/Banner ring · Card/DataTable/Input/
                                                         TextArea frame · Button outline)
 --ui-tint-border-hover 80%   bordered field, HOVER    (Input/TextArea/Card/DataTable/Button — the
@@ -77,14 +86,16 @@ variant token at shared strengths, so every tinted surface is calculated identic
 ```
 
 e.g. `color-mix(in srgb, var(<variant-token>) var(--ui-tint-soft), transparent)`. A `primary` badge is
-primary@these; a `neutral` one is text@these. Theme-independent (a theme MAY override them to tune the
-whole tint language). **Every bordered surface uses ONE calc** — `--ui-tint-border` at rest,
-`--ui-tint-border-hover` on hover/focus, from the variant token — with **no `secondary` special case**.
-Internal **dividers** (Card header/footer separators) use the softer `--ui-tint-divider` (30%) tier,
-likewise one calc per variant — so a divider always reads lighter than the frame at any variant.
-`--ui-border-color-strong`/`-strong-hover` have been **REMOVED** (migrate any consumer use to
-`color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)`, hover →
-`--ui-tint-border-hover`). (Distinct from the interactive tints above, which mix from `--ui-accent`.)
+primary@these; a `neutral` (default) one is **`--ui-color-neutral`**@these. Theme-independent (a theme
+MAY override them to tune the whole tint language). **Every bordered surface uses ONE calc** —
+`--ui-tint-border` at rest, `--ui-tint-border-hover` on hover/focus, from the variant token — with **no
+`secondary` special case**. A default (neutral) frame is therefore `--ui-color-neutral` @ these; a
+default divider is `--ui-color-neutral` @ `--ui-tint-divider` (= `--ui-border-color`). Internal
+**dividers** use the softer `--ui-tint-divider` (30%) tier, likewise one calc per variant — so a
+divider always reads lighter than the frame at any variant. `--ui-border-color-strong`/`-strong-hover`
+have been **REMOVED** (migrate to `color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border),
+transparent)`, hover → `--ui-tint-border-hover`). (Distinct from the interactive tints above, which mix
+from `--ui-accent`.)
 
 ### The `borderless` prop (border-colour swap, never a border-width change)
 
@@ -107,11 +118,21 @@ NOT take `borderless`.
 ```
 --ui-border-radius              corner radius — ONE fixed value for every rectangular surface; NOT
                                 scaled by `size`, no -sm/-lg (pills use rounded-full)
---ui-border-color               soft internal divider (row separators, section splits)
+--ui-border-color               soft internal divider (row separators, section splits) — NEUTRAL:
+                                `--ui-color-neutral` @ `--ui-tint-divider` (30%). Repeated per theme
+                                scope so it re-resolves per theme + survives @theme tree-shaking.
                                 (--ui-border-color-strong/-strong-hover were REMOVED — use the
                                  `--ui-tint-border` / `--ui-tint-border-hover` scheme instead)
+--ui-color-neutral              the neutral/undefined-variant base colour; defaults to
+                                `var(--ui-color-text)`. Override to recolour ALL neutral borders +
+                                surfaces at once, independent of body text + the variant colours.
 ```
 
+**One hue, two weights.** All *neutral* borders share the `--ui-color-neutral` hue; only the tint
+weight differs by role — **divider** `--ui-tint-divider` (30%, `--ui-border-color`) vs **frame**
+`--ui-tint-border` (50%). A `variant`-set border tints from that variant's token instead (a `secondary`
+Card = cyan border) — that's intended; the neutral default is what's monochrome.
+
 ### Density / text / icon — the `size` axis
 
 ```

package/CLAUDE.md

@@ -160,8 +160,11 @@ with its clear/help actions as `<Button>`. A raw interactive element inside a co
 
 Two shared **cross-cutting axes** every sizeable/themeable component consumes (mirror each other):
 
-- **`variant`** (`types/variants.ts`) — color/style: `primary` `secondary` `danger` `info` `success`
-  `warning` `ghost` `plain`. `plain` = borderless/transparent, for dense icon controls.
+- **`variant`** (`types/variants.ts`) — color/style: `neutral` `primary` `secondary` `danger` `info`
+  `success` `warning` `ghost`. **`neutral` is the default** (undefined variant) — components are
+  monochrome out of the box, colour only on an explicit variant. `neutral`/`ghost` mix from
+  `--ui-color-neutral` (defaults to `--ui-color-text`, independently themeable). `ghost` =
+  borderless/transparent, for dense icon controls.
 - **`size`** (`types/sizes.ts`) — `sm` (24px) · `md` (32px, **default**) · `lg` (40px), tied to
   `--ui-height-sm` / `--ui-height` / `--ui-height-lg` (`--ui-height-touch` 44px is a separate token
   for explicit touch targets, not `lg`). Each component maps `size` to its height/text/padding/icon,
@@ -226,7 +229,7 @@ interface Props {
   size?: Size;
   children?: Snippet;
 }
-let { value = "", variant = "secondary", size = "md", children }: Props = $props();
+let { value = "", variant = "neutral", size = "md", children }: Props = $props();
 ```
 
 ## Known Issues (do not "fix" in code)

package/dist/components/Avatar/Avatar.svelte

@@ -24,7 +24,7 @@
     alt,
     icon,
     size = "md",
-    variant = "secondary",
+    variant = "neutral",
     shape = "circle",
     status,
     class: cls = "",

package/dist/components/Avatar/AvatarGroup.svelte

@@ -30,7 +30,7 @@
     max,
     size = "md",
     shape = "circle",
-    variant = "secondary",
+    variant = "neutral",
     class: cls = "",
     children,
   }: {

package/dist/components/Button.svelte

@@ -45,7 +45,7 @@
   let {
     icon,
     text,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     loading = false,
     borderless = true,

package/dist/components/Card.svelte

@@ -23,7 +23,7 @@
   import { variantToken, type Variant } from "../types/variants.js";
 
   let {
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     borderless = false,
     class: cls = "",

package/dist/components/CardFooter.svelte

@@ -14,7 +14,7 @@
   import { variantToken, type Variant } from "../types/variants.js";
 
   let {
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     separator = true,
     class: cls = "",

package/dist/components/CardHeader.svelte

@@ -14,7 +14,7 @@
   import { variantToken, type Variant } from "../types/variants.js";
 
   let {
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     separator = true,
     class: cls = "",

package/dist/components/Chip/Chip.svelte

@@ -19,7 +19,7 @@
   let {
     text,
     icon,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     selected = false,
     removable = false,

package/dist/components/Combobox/Combobox.svelte

@@ -23,7 +23,7 @@
     debounceMs = 200,
     maxResults,
     onselect,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     disabled = false,
     placeholder,

package/dist/components/DataTable.svelte

@@ -218,7 +218,7 @@
   // (If a header-less / footer-less mode is ever added, flip that edge to `bodyBorder` + round the corner.)
   // `ghost` makes every section transparent (bands AND body) for a bare, see-through table.
   const sectionBorder =
-    "color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)";
+    "color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border), transparent)";
   const bandBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-surface)");
   const bodyBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-background)");
   const bandBorder = $derived(borderless ? bandBg : sectionBorder); // header + footer, all 4 sides

package/dist/components/DatePicker.svelte

@@ -216,7 +216,7 @@
 
 <Popup anchor={anchorEl} bind:open offset={6}>
   <div
-    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
     style="--accent: {accent}"
   >
     {#if range}

package/dist/components/EmptyState/EmptyState.svelte

@@ -17,7 +17,7 @@
     description,
     icon,
     action,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     class: cls = "",
     children,

package/dist/components/Input.svelte

@@ -52,7 +52,7 @@
     actions,
     iconPosition = "right",
     size = "md",
-    variant = "secondary",
+    variant = "neutral",
     borderless = false,
     iconClickable = false,
     onIconClick,

package/dist/components/List.svelte

@@ -502,8 +502,8 @@
     <div
       bind:this={listElement}
       class="ui-accent border {disabled
-        ? '[background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] cursor-not-allowed'
-        : '[background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)] focus:[border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border-hover),transparent)] focus:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus:[outline-offset:0px]'} rounded-md overflow-y-scroll custom-list {dropdownClass}"
+        ? '[background-color:color-mix(in_srgb,var(--ui-color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] cursor-not-allowed'
+        : '[background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] hover:[border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border-hover),transparent)] focus:[border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border-hover),transparent)] focus:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus:[outline-offset:0px]'} rounded-md overflow-y-scroll custom-list {dropdownClass}"
       style="{accentVar} height: {maxHeight()}px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain;"
       onscroll={handleScroll}
       onkeydown={handleListKeydown}

package/dist/components/Menu.svelte

@@ -90,12 +90,12 @@
     role="menu"
     tabindex="0"
     {onkeydown}
-    class="ui-accent min-w-48 rounded-md border p-1 shadow-lg outline-none [background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]"
+    class="ui-accent min-w-48 rounded-md border p-1 shadow-lg outline-none [background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)]"
     style={accentVar}
   >
     {#each items as item, i (i)}
       {#if isSeparator(item)}
-        <li role="separator" class="my-1 h-px [background-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]"></li>
+        <li role="separator" class="my-1 h-px [background-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)]"></li>
       {:else}
         <li role="none">
           <button

package/dist/components/NotesEditor.svelte

@@ -16,7 +16,7 @@
     placeholder = "Add your notes...",
     onSave,
     size = "md",
-    variant = "secondary",
+    variant = "neutral",
     copy,
     className = "",
   }: {

package/dist/components/Pagination/Pagination.svelte

@@ -78,7 +78,7 @@
   // Band surface + border: variant re-points --ui-accent so --ui-color-surface/hover re-mix from it
   // (the shared .ui-accent mechanism DataTable's footer uses). `ghost` ⇒ transparent band.
   const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
-  const sectionBorder = "color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)";
+  const sectionBorder = "color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border), transparent)";
   const bandBg = $derived(variant === "ghost" ? "transparent" : "var(--ui-color-surface)");
   const bandBorder = $derived(borderless ? "transparent" : sectionBorder);
 

package/dist/components/Query.svelte

@@ -24,7 +24,7 @@
     dataset,
     placeholder = "Filter…  e.g.  $status == active && $price |= [20..50)",
     size = "md",
-    variant = "secondary",
+    variant = "neutral",
     borderless = false,
   }: {
     dataset: DataSet;

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -320,8 +320,8 @@
   const dockEdge = $derived(dockRight ? "right-0" : "left-0");
   const dockBorder = $derived(
     dockRight
-      ? "[border-left:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]"
-      : "[border-right:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]",
+      ? "[border-left:1px_solid_var(--ui-border-color)]"
+      : "[border-right:1px_solid_var(--ui-border-color)]",
   );
 
   // ── Icon-mode hover-expand ──────────────────────────────────────
@@ -1083,7 +1083,7 @@
     data-sbm-popout=""
     data-open={isOpen}
     style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} max-height: {maxHeight}; --sbm-accent: {accentVar}; --sbm-lbl: inline; --sbm-affix: inline-flex;{bd.nudge ? ` transform: translateY(${bd.nudge}px);` : ''}"
-    class="overflow-hidden shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] {bd.cls}"
+    class="overflow-hidden shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] {bd.cls}"
     onmouseenter={popoutOnHover ? cancelClose : undefined}
     onmouseleave={popoutOnHover ? scheduleClose : undefined}
     onwheel={item.popout
@@ -1136,7 +1136,7 @@
     data-sbm-burger={uid}
     class="fixed top-3 {dockRight
       ? 'right-3'
-      : 'left-3'} z-[80] w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
+      : 'left-3'} z-[80] w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
     aria-label={open ? "Close menu" : "Open menu"}
     aria-expanded={open}
     onclick={() => (open = !open)}

package/dist/components/Stat/Stat.svelte

@@ -21,7 +21,7 @@
     deltaLabel,
     invertDelta = false,
     icon,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     class: cls = "",
   }: {

package/dist/components/TextArea.svelte

@@ -99,7 +99,7 @@
     maxRows,
     lineHeightRem,
     size = "md",
-    variant = "secondary",
+    variant = "neutral",
     borderless = false,
     required = false,
     label = null,

package/dist/components/TimePicker.svelte

@@ -124,7 +124,7 @@
 
 <Popup anchor={anchorEl} bind:open offset={6}>
   <div
-    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
     style="--accent: {accent}"
   >
     <div class="grid place-items-center py-1">

package/dist/components/TimeRangeInput.svelte

@@ -149,7 +149,7 @@
 
 <Popup anchor={anchorEl} bind:open offset={6}>
   <div
-    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
     style="--accent: {accent}"
   >
     <div class="flex flex-col gap-2">

package/dist/components/TokenInput/TokenInput.svelte

@@ -19,7 +19,7 @@
     values = $bindable([]),
     allowDuplicates = false,
     max,
-    variant = "secondary",
+    variant = "neutral",
     size = "md",
     disabled = false,
     placeholder,

package/dist/theme.css

@@ -67,10 +67,11 @@
 	 *                                 Fixed, NOT scaled by `size`, so different-size controls share a
 	 *                                 corner. (Pills like Toggle/Badge use rounded-full; the tiny
 	 *                                 Checkbox box keeps its own small radius — not worth a token.)
-	 *  --ui-border-color              soft internal divider (row separators, section splits) —
-	 *                                 the default (secondary) divider, mixed at `--ui-tint-divider` */
+	 *  --ui-border-color              soft internal divider (row separators, section splits) — the
+	 *                                 NEUTRAL divider (`--ui-color-neutral` @ `--ui-tint-divider`).
+	 *                                 Defined in the token scopes below (not here) so it re-resolves per
+	 *                                 theme and isn't tree-shaken out of @theme. */
   --ui-border-radius: 0.375rem;
-  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-divider), transparent);
 }
 
 /* One interactive-surface language, library-wide. A subtle tint of the ACCENT colour, so it lightens on
@@ -98,6 +99,14 @@
 :root {
   /* light default — no theme class + light system */
   --ui-accent: var(--ui-color-text);
+  /* Neutral = the undefined-variant / monochrome default colour. Defaults to the TEXT colour (so it
+   * flips opposite --ui-color-background per theme — dark text on light, light text on dark — and a
+   * border mixed toward `transparent` always reads against the background). Independently themeable:
+   * override --ui-color-neutral to recolour EVERY neutral border/divider (and the `neutral` variant)
+   * without touching body text or the accent colours. Repeated per theme scope (like --ui-accent) so
+   * it re-resolves per theme and survives Tailwind's @theme tree-shaking. */
+  --ui-color-neutral: var(--ui-color-text);
+  --ui-border-color: color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-divider), transparent);
   --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
   --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
   --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
@@ -151,6 +160,8 @@ body {
     --ui-color-error: #ef4444;
     --ui-color-info: #06b6d4;
     --ui-accent: var(--ui-color-text);
+    --ui-color-neutral: var(--ui-color-text);
+    --ui-border-color: color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-divider), transparent);
     --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
     --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
     --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
@@ -169,6 +180,8 @@ body {
   --ui-color-info: #0ea5e9;
   /* forced light must re-assert the tint (overrides the dark @media above) */
   --ui-accent: var(--ui-color-text);
+  --ui-color-neutral: var(--ui-color-text);
+  --ui-border-color: color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-divider), transparent);
   --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
   --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
   --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
@@ -185,6 +198,8 @@ body {
   --ui-color-error: #ef4444;
   --ui-color-info: #06b6d4;
   --ui-accent: var(--ui-color-text);
+  --ui-color-neutral: var(--ui-color-text);
+  --ui-border-color: color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-divider), transparent);
   --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
   --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
   --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);

package/dist/types/variants.d.ts

@@ -1,8 +1,9 @@
 export type Variant = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
 /** Variant → semantic colour token, used where a variant needs an ACCENT colour (Toggle track,
  *  Checkbox, Card border, DataTable accent…). `danger` maps to `--ui-color-error`. The two non-accent
- *  variants — `ghost` (transparent, hover-tint only) and `neutral` (text-mix surface tint, = the
- *  default DataTable look) — resolve to `--ui-color-text`, so those controls read grey/uncoloured
- *  rather than borrowing an accent. The interactive tints (hover/surface/active) are text-mixes by
- *  default and re-mix off whichever colour this points at. */
+ *  variants — `neutral` (the undefined-variant / monochrome default) and `ghost` (transparent,
+ *  hover-tint only) — resolve to `--ui-color-neutral`, which itself defaults to `--ui-color-text` but
+ *  is independently themeable (see theme.css). So neutral/ghost controls read monochrome, and a theme
+ *  can recolour every neutral border/surface via one token without moving body text. The interactive
+ *  tints (hover/surface/active) re-mix off whichever colour this points at. */
 export declare const variantToken: Record<Variant, string>;

package/dist/types/variants.js

@@ -1,16 +1,17 @@
 /** Variant → semantic colour token, used where a variant needs an ACCENT colour (Toggle track,
  *  Checkbox, Card border, DataTable accent…). `danger` maps to `--ui-color-error`. The two non-accent
- *  variants — `ghost` (transparent, hover-tint only) and `neutral` (text-mix surface tint, = the
- *  default DataTable look) — resolve to `--ui-color-text`, so those controls read grey/uncoloured
- *  rather than borrowing an accent. The interactive tints (hover/surface/active) are text-mixes by
- *  default and re-mix off whichever colour this points at. */
+ *  variants — `neutral` (the undefined-variant / monochrome default) and `ghost` (transparent,
+ *  hover-tint only) — resolve to `--ui-color-neutral`, which itself defaults to `--ui-color-text` but
+ *  is independently themeable (see theme.css). So neutral/ghost controls read monochrome, and a theme
+ *  can recolour every neutral border/surface via one token without moving body text. The interactive
+ *  tints (hover/surface/active) re-mix off whichever colour this points at. */
 export const variantToken = {
-    neutral: "--ui-color-text",
+    neutral: "--ui-color-neutral",
     primary: "--ui-color-primary",
     secondary: "--ui-color-secondary",
     success: "--ui-color-success",
     info: "--ui-color-info",
     warning: "--ui-color-warning",
     danger: "--ui-color-error",
-    ghost: "--ui-color-text",
+    ghost: "--ui-color-neutral",
 };

package/docs/themes.md

@@ -53,12 +53,17 @@ theme-independent** (identical in light and dark) — only the accent color flip
 ## Border & radius — `--ui-border-*`
 
 - `--ui-border-radius` — `0.375rem` — corner radius for every surface (Card, Input, DataTable…)
-- `--ui-border-color` — `color-mix(in srgb, var(--ui-color-secondary) 30%, transparent)` — soft
-  internal divider (row separators, section splits)
-- `--ui-border-color-strong` — `var(--ui-color-secondary)` — prominent outer edge (Card frame,
-  Input, DataTable outer)
-- `--ui-border-color-strong-hover` — `color-mix(in srgb, var(--ui-color-secondary) 80%, black)` —
-  darker edge on hover for interactive controls
+- `--ui-color-neutral` — `var(--ui-color-text)` (default) — the neutral / undefined-variant base
+  colour. **Override it to recolour every neutral border + surface at once**, independent of body text
+  and the variant colours. All neutral borders derive from this one hue.
+- `--ui-border-color` — `color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-divider), transparent)`
+  — the soft internal **neutral divider** (row separators, section splits). One hue, two weights: a
+  **frame** border is the same `--ui-color-neutral` at `--ui-tint-border` (50%) instead of the 30%
+  divider tier. A `variant`-set border tints from that variant's token (a `secondary` Card = cyan) —
+  only the *neutral* default is monochrome.
+- (`--ui-border-color-strong` / `-strong-hover` were **removed** — use
+  `color-mix(in srgb, var(--ui-color-neutral) var(--ui-tint-border), transparent)` for a frame edge,
+  `--ui-tint-border-hover` for its hover.)
 
 ## Sizing — the `size` axis (`sm` / `md` / `lg`)
 
@@ -126,9 +131,9 @@ Components reference these via Tailwind's arbitrary-value syntax:
 <!-- Text / background -->
 <div class="text-[var(--ui-color-text)] bg-[var(--ui-color-background)]">...</div>
 
-<!-- Border (color + radius tokens) -->
+<!-- Border (a neutral frame edge — the 50% tier — + radius) -->
 <div
-  class="border [border-color:var(--ui-border-color-strong)] [border-radius:var(--ui-border-radius)]"
+  class="border [border-color:color-mix(in_srgb,var(--ui-color-neutral)_var(--ui-tint-border),transparent)] [border-radius:var(--ui-border-radius)]"
 >
   ...
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.16.0",
+  "version": "0.16.1-dev.76.a0169fa",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"