themelia-ui 3.0.0 → 3.2.0

package/dist/styles/SCOPES.md

@@ -1,86 +0,0 @@
-# Why derived tokens are not declared on `:root`
-
-A custom property's `var()` references are substituted **where the property is declared**.
-So a derived token declared once at `:root`:
-
-```css
-:root {
-  --control-h: calc(var(--height-control) * var(--density-scale));
-  --button-default-bg: var(--primary);
-}
-```
-
-…resolves `--density-scale` and `--primary` at `:root`, and the RESULT is what inherits.
-Setting `--density-scale: 0.875` or `--primary: red` on a nested element then changes
-nothing: `--control-h` is already `calc(2.125rem * 1)` and `--button-default-bg` is already
-the root colour.
-
-So derived tokens are declared at every **scope boundary**, and each boundary re-derives from
-its own inputs:
-
-```css
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-  --control-h: calc(var(--height-control) * var(--density-scale));
-}
-```
-
-`<UIProvider>`, `<UIScope>` and `<Scope>` render `[data-ui-scope]`, so any provider, nested
-or not, re-derives the system from whatever it overrides. `[data-density]` and `[data-theme]`
-do the same without a provider. Only these elements recompute, not every element.
-
-**Raw inputs are the opposite.** Literals a theme sets (the radii, border widths, font
-stacks, palette steps, the three factors `--scale`, `--density-scale` and `--text-scale`,
-`--height-control`, `--surface-x/y`, `--row-x/y`) are declared at `:root` only, so a value
-you set on `:root` inherits through every boundary. Semantic colours are derived: a value set
-on `:root` alone is re-declared at the first boundary. Set those through the provider or at
-the boundary list; see [Theming](../../docs/learn/theming.md#setting-a-theme).
-
-## Theme mode at a bare boundary
-
-A bare boundary (`[data-ui-scope]` or `[data-density]` with no theme of its own) re-derives
-in the mode it inherits. The explicit dark block therefore also matches bare boundaries
-nested under a dark ancestor, or the light value would win one level down:
-
-```css
-.dark,
-[data-theme="dark"],
-:is(.dark, [data-theme="dark"]) :is([data-ui-scope], [data-density]):not(.light, [data-theme="light"]) {
-  --background: var(--neutral-900);
-}
-```
-
-The `prefers-color-scheme: dark` block (`colorScheme: "system"`) does the same, and honours an
-explicit light choice however it is spelled: the `.light` class (next-themes' class strategy)
-or `data-theme="light"`, on the boundary itself or on any ancestor:
-
-```css
-@media (prefers-color-scheme: dark) {
-  :root:not(.light, [data-theme="light"]),
-  [data-ui-scope]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *),
-  [data-density]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *) {
-    --background: var(--neutral-900);
-  }
-}
-```
-
-A dark override of your own needs both blocks, with exactly these selectors.
-
-**The one nesting a descendant selector cannot see.** An explicit light island inside a
-`.dark` tree keeps its own boundary light, but a bare boundary nested inside that island
-matches `.dark …` again and re-derives dark. CSS has no "nearest theme ancestor". Give each
-boundary inside the island its own `data-theme`, or use `UIScope`, which writes the resolved
-scheme on every boundary it renders. (Under the OS preference alone the island holds: the
-media block skips every descendant of a light scope.)
-
-**A surface's ground is reset at a colour island.** `--surface-ground` carries the colour a
-surface painted, resolved where that surface set it. A `[data-theme]`, `.light` or `.dark`
-element resets it to `initial`, so a reader inside the island falls back to its own
-`--background` instead of a ground from the other mode.
-
-**In a CSS Module the theme classes are hashed.** `.light` and `.dark` in a boundary list
-become local classes and match nothing. Write `:global(.light)` and `:global(.dark)`.

package/dist/styles/themes/default.css

@@ -1,164 +0,0 @@
-/*
- * Theme — the swappable palette.
- *
- * GENERATED from scripts/theme-manifest.mjs by scripts/gen-theme.mjs.
- * Do not hand-edit; edit the manifest and re-run `npm run tokens:theme`.
- *
- * This file owns only the shadcn-compatible contract: palette, radius, shadows, sidebar
- * palette, and charts. Package state, layout, density, and component knobs live in
- * styles/tokens/* and styles/theming/*.
- *
- * Every colour resolves through a primitive in styles/tokens/palette.css — there are no
- * colour literals here — so a rebrand moves the ramp, not forty separate values.
- */
-/*
- * Raw inputs — `:root` ONLY, so a consumer's override inherits everywhere
- * instead of being restated (and overwritten) at each scope boundary.
- */
-:root {
-	--radius: 1rem; /* The container radius — cards, dialogs, popovers, menus. */
-	--radius-sm: 0.5rem; /* Everything inside a container or smaller than one — controls, rows, chips, badges, tooltips. */
-	--border-width: 1px; /* Default hairline weight for dividers, outlines, and control borders. */
-	--border-width-strong: 2px; /* Emphasized rail weight for quote bars and active navigation indicators. */
-	--radius-pill: 999px; /* Fully rounded ends for pills, switches, tracks, and status dots. True circles (avatars, radios) use 50%. */
-}
-
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-	color-scheme: light;
-	--background: var(--neutral-0); /* Application canvas and default page background. */
-	--foreground: var(--neutral-800); /* Primary text and icon color on the application canvas. */
-	--card: var(--neutral-0); /* Card and framed content-surface background. */
-	--card-foreground: var(--neutral-800); /* Primary text and icons on card surfaces. */
-	--popover: var(--background); /* Popover, menu, select, and transient-surface background. */
-	--popover-foreground: var(--foreground); /* Primary text and icons on popover surfaces. */
-	--primary: var(--brand-600); /* Brand and primary-action color. */
-	--primary-foreground: var(--neutral-50); /* Text and icons on solid primary fills. */
-	--secondary: var(--neutral-100); /* Neutral secondary-control and supporting-surface fill. */
-	--secondary-foreground: var(--neutral-900); /* Text and icons on secondary fills. */
-	--muted: var(--neutral-100); /* Subdued backgrounds for passive regions and skeletons. */
-	--muted-foreground: var(--neutral-550); /* Secondary text, metadata, and passive icons. */
-	--accent: var(--neutral-100); /* Hover, selected-row, and emphasized neutral fill. */
-	--accent-foreground: var(--neutral-900); /* Text and icons on accent fills. */
-	--destructive: var(--danger-600); /* Destructive action, error, and invalid-state color. */
-	--destructive-foreground: var(--neutral-25); /* Text and icons on solid destructive fills. */
-	--border: var(--neutral-200); /* Default divider, outline, and surface-border color. */
-	--input: var(--neutral-200); /* Default form-control border color. */
-	--ring: var(--neutral-400); /* Focus-visible ring and outline color. */
-	--chart-1: var(--series-1); /* First categorical chart-series color; never a status color. */
-	--chart-2: var(--series-2); /* Second categorical chart-series color; never a status color. */
-	--chart-3: var(--series-3); /* Third categorical chart-series color; never a status color. */
-	--chart-4: var(--series-4); /* Fourth categorical chart-series color; never a status color. */
-	--chart-5: var(--series-5); /* Fifth categorical chart-series color; never a status color. */
-	--sidebar: var(--neutral-150); /* Sidebar shell background. */
-	--sidebar-foreground: var(--neutral-800); /* Primary sidebar text and icon color. */
-	--sidebar-primary: var(--neutral-900); /* Strong sidebar selection or primary action fill. */
-	--sidebar-primary-foreground: var(--neutral-50); /* Text and icons on sidebar primary fills. */
-	--sidebar-accent: var(--neutral-75); /* Sidebar hover and selected-row neutral fill. */
-	--sidebar-accent-foreground: var(--neutral-900); /* Text and icons on sidebar accent fills. */
-	--sidebar-border: var(--neutral-200); /* Sidebar dividers and shell border. */
-	--sidebar-ring: var(--neutral-400); /* The sidebar's focus-ring seed, as --ring is the page's: sidebar surfaces mix it 70/30 toward --sidebar-foreground in light, read it unmixed in dark, and compose --focus-ring, --focus-ring-inset and --field-focus-ring from it. */
-	--shadow-ink: var(--pure-black); /* Ink every elevation tier tints with. */
-	--shadow-2xs: 0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 4%, transparent); /* shadcn compatibility only; no kit surface reads it. Resting lift is --shadow-xs. */
-	--shadow-xs: 0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 6%, transparent), 0 1px 1px -1px color-mix(in oklab, var(--shadow-ink) 6%, transparent); /* Resting lift: a framed card's bezel, a raised chip, a slider thumb, a floating sidebar. */
-	--shadow-sm: 0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 6%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--shadow-ink) 10%, transparent); /* Hover lift for every clickable card and tile, and controls over artwork. */
-	--shadow: 0 1px 3px 0px color-mix(in oklab, var(--shadow-ink) 8%, transparent), 0 4px 8px -4px color-mix(in oklab, var(--shadow-ink) 12%, transparent); /* shadcn compatibility only; no kit surface reads it. Hover lift is --shadow-sm. */
-	--shadow-md: 0 2px 4px -1px color-mix(in oklab, var(--shadow-ink) 8%, transparent), 0 8px 16px -8px color-mix(in oklab, var(--shadow-ink) 16%, transparent); /* The lift inside --popover-shadow; anchored popups read that, with its hairline ring. */
-	--shadow-lg: 0 4px 8px -2px color-mix(in oklab, var(--shadow-ink) 10%, transparent), 0 12px 24px -12px color-mix(in oklab, var(--shadow-ink) 18%, transparent); /* Free-floating transient surfaces: toast, drag ghost, floating batch bar, submenu. */
-	--shadow-xl: 0 8px 16px -4px color-mix(in oklab, var(--shadow-ink) 12%, transparent), 0 20px 40px -20px color-mix(in oklab, var(--shadow-ink) 22%, transparent); /* Modals and command palettes. */
-	--shadow-2xl: 0 16px 32px -8px color-mix(in oklab, var(--shadow-ink) 18%, transparent), 0 32px 64px -28px color-mix(in oklab, var(--shadow-ink) 28%, transparent); /* shadcn compatibility only; no kit surface reads it. Modals and palettes use --shadow-xl. */
-}
-
-/*
- * Dark theme — overrides only.
- *
- * Every token not listed here inherits its light value through the cascade, which is
- * declared explicitly as `inherits: true` in scripts/theme-manifest.mjs rather than
- * left to chance. GENERATED: edit the manifest, then run `npm run tokens:theme`.
- */
-.dark,
-[data-theme="dark"],
-:is(.dark, [data-theme="dark"]) :is([data-ui-scope], [data-density]):not(.light, [data-theme="light"]) {
-	color-scheme: dark;
-	--background: var(--neutral-900);
-	--foreground: var(--neutral-50);
-	--card: var(--neutral-850);
-	--card-foreground: var(--neutral-50);
-	--popover: var(--neutral-800);
-	--popover-foreground: var(--foreground);
-	--primary: var(--brand-350);
-	--primary-foreground: var(--brand-950);
-	--secondary: var(--neutral-850);
-	--secondary-foreground: var(--neutral-50);
-	--muted: var(--neutral-875);
-	--muted-foreground: var(--neutral-400);
-	--accent: var(--neutral-750);
-	--accent-foreground: var(--neutral-50);
-	--destructive: var(--danger-400);
-	--destructive-foreground: var(--danger-950);
-	--border: var(--white-a10);
-	--input: var(--white-a15);
-	--ring: var(--neutral-500);
-	--chart-1: var(--series-1-dark);
-	--chart-2: var(--series-2-dark);
-	--chart-3: var(--series-3-dark);
-	--chart-4: var(--series-4-dark);
-	--chart-5: var(--series-5-dark);
-	--sidebar: var(--neutral-950);
-	--sidebar-foreground: var(--neutral-50);
-	--sidebar-primary: var(--neutral-50);
-	--sidebar-primary-foreground: var(--neutral-900);
-	--sidebar-accent: var(--neutral-800);
-	--sidebar-accent-foreground: var(--neutral-50);
-	--sidebar-border: var(--white-a10);
-	--sidebar-ring: var(--neutral-500);
-}
-
-/*
- * The same values under the OS preference, for `colorScheme: "system"`.
- *
- * Emitted rather than hand-written so it cannot drift from the block above.
- */
-@media (prefers-color-scheme: dark) {
-	:root:not(.light, [data-theme="light"]),
-	[data-ui-scope]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *),
-	[data-density]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *) {
-		color-scheme: dark;
-		--background: var(--neutral-900);
-		--foreground: var(--neutral-50);
-		--card: var(--neutral-850);
-		--card-foreground: var(--neutral-50);
-		--popover: var(--neutral-800);
-		--popover-foreground: var(--foreground);
-		--primary: var(--brand-350);
-		--primary-foreground: var(--brand-950);
-		--secondary: var(--neutral-850);
-		--secondary-foreground: var(--neutral-50);
-		--muted: var(--neutral-875);
-		--muted-foreground: var(--neutral-400);
-		--accent: var(--neutral-750);
-		--accent-foreground: var(--neutral-50);
-		--destructive: var(--danger-400);
-		--destructive-foreground: var(--danger-950);
-		--border: var(--white-a10);
-		--input: var(--white-a15);
-		--ring: var(--neutral-500);
-		--chart-1: var(--series-1-dark);
-		--chart-2: var(--series-2-dark);
-		--chart-3: var(--series-3-dark);
-		--chart-4: var(--series-4-dark);
-		--chart-5: var(--series-5-dark);
-		--sidebar: var(--neutral-950);
-		--sidebar-foreground: var(--neutral-50);
-		--sidebar-primary: var(--neutral-50);
-		--sidebar-primary-foreground: var(--neutral-900);
-		--sidebar-accent: var(--neutral-800);
-		--sidebar-accent-foreground: var(--neutral-50);
-		--sidebar-border: var(--white-a10);
-		--sidebar-ring: var(--neutral-500);
-	}
-}

package/dist/styles/theming/animation.css

@@ -1,143 +0,0 @@
-/* Raw inputs: declared once at :root (styles/SCOPES.md). */
-:root {
-	/* Neutral defaults — a surface overrides only the axis it animates. */
-	--enter-opacity: 1;
-	--enter-scale: 1;
-	--enter-translate-x: 0;
-	--enter-translate-y: 0;
-	--exit-opacity: 1;
-	--exit-scale: 1;
-	--exit-translate-x: 0;
-	--exit-translate-y: 0;
-
-	/* Looping animations. */
-	--animate-spin: spin 1s linear infinite;
-
-	/* The distance menus and popovers enter from. Sheets travel their full width instead. */
-	--slide-nudge: 0.5rem;
-}
-
-/*
- * Animation — one parameterised enter/exit keyframe pair. A surface composes its entrance
- * by setting only the variables it needs; unset ones stay neutral:
- *
- *   .content {
- *     animation: var(--animate-exit);
- *     --enter-opacity: 0;
- *     --enter-scale: 0.95;
- *   }
- *   .content[data-open] { animation: var(--animate-enter); }
- *
- * Derived tokens: declared at every scope boundary (styles/SCOPES.md).
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-		/*
-		 * Shorthands live in this global sheet because CSS Modules renames `@keyframes`
-		 * names: `animation: enter …` written in a module points at a scoped name that does
-		 * not exist. To change speed, set `animation-duration` after the shorthand; the
-		 * duration below is already resolved, so redefining --duration-fast does nothing.
-		 */
-		--animate-enter: enter var(--duration-fast) var(--ease-out);
-		/* Exits start moving immediately; ease-in reads as latency at this duration. */
-		--animate-exit: exit var(--duration-fast) var(--ease-out);
-		/* An expanding halo — a live location on a map, a recording indicator. */
-		--animate-ping: ping 1s var(--ease-out) infinite;
-		--animate-pulse: pulse 2s var(--ease-in-out) infinite;
-}
-
-@keyframes enter {
-	from {
-		opacity: var(--enter-opacity);
-		transform: translate3d(var(--enter-translate-x), var(--enter-translate-y), 0)
-			scale3d(var(--enter-scale), var(--enter-scale), var(--enter-scale));
-	}
-}
-
-@keyframes exit {
-	to {
-		opacity: var(--exit-opacity);
-		transform: translate3d(var(--exit-translate-x), var(--exit-translate-y), 0)
-			scale3d(var(--exit-scale), var(--exit-scale), var(--exit-scale));
-	}
-}
-
-/* Indeterminate progress — spinners and loader buttons. */
-@keyframes spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-/* An expanding, fading halo. Paired with a solid dot that stays put. */
-@keyframes ping {
-	75%,
-	100% {
-		transform: scale(2);
-		opacity: 0;
-	}
-}
-
-/* Skeleton placeholders. */
-@keyframes pulse {
-	50% {
-		opacity: 0.5;
-	}
-}
-
-/*
- * Native top-layer surfaces (dialog, alert dialog, sheet, drawer) use transitions plus
- * `@starting-style`, not the keyframes above: the element leaves the top layer the moment
- * `close()` runs, so only transitioning `overlay` and `display` (allow-discrete) keeps it
- * there to animate out. Unsupported browsers show and hide it instantly.
- */
-
-/*
- * The indeterminate bar's band. Translate percentages are of the band (40% of the track),
- * so 250% carries it fully off the far edge. Keep in step with the band width.
- */
-@keyframes progress-indeterminate {
-	from {
-		transform: translateX(-100%);
-	}
-	to {
-		transform: translateX(250%);
-	}
-}
-
-/* Motion here is decorative, so reduced motion removes it. */
-@media (prefers-reduced-motion: reduce) {
-	:root {
-		--animate-enter: none;
-		--animate-exit: none;
-	}
-
-	/*
-	 * Catches motion not written against the duration tokens (spinners, skeletons, the
-	 * progress crawl, third-party CSS). `0s` animations still fire their end events; `0s`
-	 * transitions fire no `transitionend`, hence 0.01ms. A non-zero animation duration would
-	 * make Base UI see both and warn on every Collapsible and Accordion.
-	 */
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0s !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-	}
-}
-
-/* Right to left across a background twice the element's size: one pass per cycle. */
-@keyframes shimmer-sweep {
-	from {
-		background-position: 200% 0;
-	}
-
-	to {
-		background-position: -200% 0;
-	}
-}

package/dist/styles/theming/colors.css

@@ -1,97 +0,0 @@
-/*
- * Alpha ladder — the global colour wiring layer.
- *
- * Every colour/alpha pair the components actually use, declared once. Modules
- * reference `var(--border-60)` rather than repeating color-mix() inline, which
- * gives consumers a single override point per pair and keeps modules value-free.
- *
- * `color-mix(in oklab, …)` is exactly what Tailwind v4 emits for `/nn` opacity,
- * so each pair renders the colour the matching Tailwind utility would.
- *
- * 38 pairs across 13 colours.
- *
- * Declared at every scope boundary rather than `:root`, so a scope that rethemes a colour
- * re-derives its whole ladder. See styles/SCOPES.md.
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-
-	/* border — 1 step */
-	--border-60: color-mix(in oklab, var(--border) 60%, transparent);
-
-	/* muted — 5 steps */
-	--muted-20: color-mix(in oklab, var(--muted) 20%, transparent);
-	--muted-40: color-mix(in oklab, var(--muted) 40%, transparent);
-	--muted-50: color-mix(in oklab, var(--muted) 50%, transparent);
-	--muted-60: color-mix(in oklab, var(--muted) 60%, transparent);
-	--muted-80: color-mix(in oklab, var(--muted) 80%, transparent);
-
-	/* destructive — 5 steps */
-	--destructive-5: color-mix(in oklab, var(--destructive) 5%, transparent);
-	--destructive-10: color-mix(in oklab, var(--destructive) 10%, transparent);
-	--destructive-20: color-mix(in oklab, var(--destructive) 20%, transparent);
-	--destructive-30: color-mix(in oklab, var(--destructive) 30%, transparent);
-	--destructive-40: color-mix(in oklab, var(--destructive) 40%, transparent);
-
-	/* primary — 7 steps */
-	--primary-5: color-mix(in oklab, var(--primary) 5%, transparent);
-	--primary-10: color-mix(in oklab, var(--primary) 10%, transparent);
-	--primary-15: color-mix(in oklab, var(--primary) 15%, transparent);
-	--primary-20: color-mix(in oklab, var(--primary) 20%, transparent);
-	--primary-25: color-mix(in oklab, var(--primary) 25%, transparent);
-	--primary-30: color-mix(in oklab, var(--primary) 30%, transparent);
-	--primary-40: color-mix(in oklab, var(--primary) 40%, transparent);
-
-	/* foreground — 3 steps */
-	--foreground-8: color-mix(in oklab, var(--foreground) 8%, transparent);
-	--foreground-10: color-mix(in oklab, var(--foreground) 10%, transparent);
-	--foreground-20: color-mix(in oklab, var(--foreground) 20%, transparent);
-
-	/* warning — 4 steps */
-	--warning-10: color-mix(in oklab, var(--warning) 10%, transparent);
-	--warning-20: color-mix(in oklab, var(--warning) 20%, transparent);
-	--warning-30: color-mix(in oklab, var(--warning) 30%, transparent);
-	--warning-40: color-mix(in oklab, var(--warning) 40%, transparent);
-
-	/* success — 3 steps */
-	--success-5: color-mix(in oklab, var(--success) 5%, transparent);
-	--success-10: color-mix(in oklab, var(--success) 10%, transparent);
-	--success-30: color-mix(in oklab, var(--success) 30%, transparent);
-
-	/* info — 3 steps */
-	--info-5: color-mix(in oklab, var(--info) 5%, transparent);
-	--info-10: color-mix(in oklab, var(--info) 10%, transparent);
-	--info-30: color-mix(in oklab, var(--info) 30%, transparent);
-
-	/* muted-foreground — 2 steps */
-	--muted-foreground-40: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
-	--muted-foreground-70: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
-
-	/* background — 2 steps */
-	--background-70: color-mix(in oklab, var(--background) 70%, transparent);
-	--background-80: color-mix(in oklab, var(--background) 80%, transparent);
-
-	/* input — 1 step */
-	--input-30: color-mix(in oklab, var(--input) 30%, transparent);
-
-	/* accent — 1 step */
-	--accent-50: color-mix(in oklab, var(--accent) 50%, transparent);
-
-	/* sidebar-accent — the --accent-50 row hover on the sidebar palette */
-	--sidebar-accent-50: color-mix(in oklab, var(--sidebar-accent) 50%, transparent);
-}
-
-/*
- * --surface-ground: "the surface I sit on", for sticky cells, cut-out rings, opaque halos
- * and fades. A surface that paints a ground (Card, popups, the sidebar, table and data-view
- * frames) sets it; readers write var(--surface-ground, var(--background)). A colour island
- * resets it so the fallback re-derives in the island's mode instead of inheriting a ground
- * resolved outside it. Zero specificity, so any surface inside the island still wins.
- */
-:where([data-theme], .light, .dark) {
-	--surface-ground: initial;
-}

package/dist/styles/theming/feedback.css

@@ -1,17 +0,0 @@
-/*
- * Feedback — Empty, Alert and Progress tokens.
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-
-	/* Empty state illustration height. */
-	--empty-art-h: round(calc(6rem * var(--density-scale, var(--scale))), 1px);
-
-	/* Progress bar fill; the .tone* classes re-point it. */
-	--progress-fill: var(--primary);
-
-}

package/dist/styles/theming/field.css

@@ -1,21 +0,0 @@
-/* Raw inputs: declared once at :root (styles/SCOPES.md). */
-:root {
-	--field-bg: transparent;
-
-	/* Label column for horizontal fields, so a settings page aligns down its controls. */
-	--field-label-width: 12rem;
-}
-
-/*
- * Field — tokens shared by every form control (the surface itself is styles/fields.css).
- * Height and inline inset are --control-h and --control-px-sm, read directly.
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-		--field-icon-lane: calc(var(--size-icon) + var(--space-md) * 2);
-		--field-addon-lane: round(calc(2.5rem * var(--density-scale, var(--scale))), 1px);
-}

package/dist/styles/theming/focus.css

@@ -1,88 +0,0 @@
-/* Raw inputs: declared once at :root (styles/SCOPES.md). */
-:root {
-	--focus-ring-width: 2px;
-	--focus-ring-offset: 0px;
-
-	--disabled-opacity: 0.5;
-}
-
-/*
- * Focus — rings composed once, so a module writes `box-shadow: var(--focus-ring)` and a
- * consumer retunes every focus state from one place. The invalid ring is the same shape
- * over --destructive.
- *
- * Derived tokens: declared at every scope boundary (styles/SCOPES.md).
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-	/*
-	 * One edge for every control that sits in a row with others (fields, selects, pickers,
-	 * triggers, filter pills, outline buttons). Derived so scoped --input/--foreground
-	 * overrides recompute it. The idle edge (30% foreground here, re-mixed for dark below) sits
-	 * deliberately below WCAG 1.4.11's 3:1; the hover edge, focus ring and invalid border clear
-	 * it. tests/tokens.spec.ts holds its floor.
-	 */
-	--control-border: color-mix(in oklab, var(--input) 70%, var(--foreground) 30%);
-	--control-border-hover: color-mix(in oklab, var(--input) 45%, var(--foreground) 55%);
-
-	/* Ring-dominant, with foreground mixed in for separation from the canvas. */
-	--focus-ring-color: color-mix(in oklab, var(--ring) 70%, var(--foreground) 30%);
-
-	/* Composite ring. Offset renders as a same-coloured-as-surface inner spread. */
-	--focus-ring:
-		0 0 0 var(--focus-ring-offset) var(--background),
-		0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color);
-
-	/*
-	 * The same ring drawn inside the box, for a control under an `overflow: hidden`
-	 * ancestor. `inset var(--focus-ring)` would inset only the first layer, so both layers
-	 * are restated.
-	 */
-	--focus-ring-inset:
-		inset 0 0 0 var(--focus-ring-offset) var(--background),
-		inset 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color);
-
-	/*
-	 * A field's focus: the edge firms to the ring colour and a soft halo surrounds it,
-	 * matching the invalid state's shape rather than the solid control ring.
-	 */
-	--field-focus-ring: 0 0 0 var(--focus-ring-width) color-mix(in oklab, var(--focus-ring-color) 22%, transparent);
-
-	/* Invalid state (aria-invalid). */
-	--invalid-ring-color: var(--destructive-20);
-	--invalid-ring-border: var(--destructive);
-	--invalid-ring: 0 0 0 var(--focus-ring-width) var(--invalid-ring-color);
-}
-
-/*
- * Dark: the unmixed ring seed, which clears 3:1 against the canvas. The invalid border is
- * the destructive ink, lifted toward the foreground so it stays stronger than the idle border.
- * Dark --input is translucent white, so the light mixes would land the control edges at
- * about 3.8:1; these hold the same 2.4:1 idle and 4.3:1 hover as light.
- */
-.dark,
-[data-theme="dark"],
-:is(.dark, [data-theme="dark"]) :is([data-ui-scope], [data-density]):not(.light, [data-theme="light"]) {
-	--control-border: color-mix(in oklab, var(--input) 85%, var(--foreground) 15%);
-	--control-border-hover: color-mix(in oklab, var(--input) 65%, var(--foreground) 35%);
-	--focus-ring-color: var(--ring);
-	--invalid-ring-color: var(--destructive-40);
-	--invalid-ring-border: var(--destructive-accent);
-}
-
-/* The same values under the OS preference (`colorScheme: "system"`); verify dark-overrides keeps both in step. */
-@media (prefers-color-scheme: dark) {
-	:root:not(.light, [data-theme="light"]),
-	[data-ui-scope]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *),
-	[data-density]:not(.light, [data-theme="light"], :where(.light, [data-theme="light"]) *) {
-		--control-border: color-mix(in oklab, var(--input) 85%, var(--foreground) 15%);
-		--control-border-hover: color-mix(in oklab, var(--input) 65%, var(--foreground) 35%);
-		--focus-ring-color: var(--ring);
-		--invalid-ring-color: var(--destructive-40);
-		--invalid-ring-border: var(--destructive-accent);
-	}
-}

package/dist/styles/theming/layers.css

@@ -1,13 +0,0 @@
-/*
- * Stacking order — named tiers, with gaps so an app can insert its own layer between them.
- * Raw inputs: declared once at :root (styles/SCOPES.md).
- */
-:root {
-	--z-raised: 1; /* Lifted within its own stacking context — a selected row, a chip. */
-	--z-sticky: 10; /* Sticky table headers and toolbars. */
-	--z-docked: 20; /* A floating batch bar: above a sticky header, below any menu it opens. */
-	--z-popover: 50; /* Menus, selects, popovers. */
-	/* Toasts, above any menu still open when one arrives. */
-	--z-toast: 100;
-	--z-tooltip: 1000; /* Always last: a tooltip may describe anything, including a toast. */
-}

package/dist/styles/theming/layout.css

@@ -1,21 +0,0 @@
-/*
- * Layout — page-container tokens. Page-level measurements scale off the global factors,
- * not a component family's. Derived tokens: declared at every scope boundary (styles/SCOPES.md).
- */
-:root,
-[data-ui-scope],
-[data-density],
-[data-theme],
-.light,
-.dark {
-
-	/* The gap between main and aside, and the aside's floor before the columns stack. */
-	--layout-column-gap: round(calc(2rem * var(--density-scale, var(--scale))), 1px);
-	--layout-aside-min: calc(18rem * var(--scale));
-
-	/* The shell's top bar — header, toolbar and stacked header are one height. */
-	--shell-header-h: round(calc(var(--shell-header-height) * var(--density-scale, var(--scale))), 1px);
-
-	/* ── Resource shells ──────────────────────────────────────────────────────── */
-	--resource-media: round(calc(var(--avatar) * 1.5 * var(--density-scale, var(--scale))), 1px);
-}