themelia-ui 3.0.0 → 3.2.0

package/dist/styles/tailwind.css

@@ -2,151 +2,100 @@
  * themelia-ui → Tailwind CSS v4.
  *
  * GENERATED by scripts/gen-tailwind-bridge.mjs — run `npm run tokens:tailwind`.
- * Edit the tokens, not this file. `verify docs-freshness` fails if the two disagree.
+ * Edit the theme, not this file. `verify docs-freshness` fails if the two disagree.
  *
- * Import it AFTER Tailwind and after the kit's stylesheet:
+ * Import it after Tailwind; the kit's own CSS arrives with its components:
  *
  *   @import "tailwindcss";
- *   @import "themelia-ui/core.css";
  *   @import "themelia-ui/tailwind.css";
  *
- * It is a theme declaration only — no utilities, no rules, nothing to ship at runtime that
- * Tailwind does not already emit. Tailwind drops every key no utility uses.
+ * A theme declaration only: no utilities and no rules. Tailwind drops every key no utility
+ * uses.
  *
- * Two things it does. It makes the kit's contract addressable from Tailwind, so
- * `bg-primary`, `text-muted-foreground`, `rounded-sm` and `p-md` mean what they mean
- * everywhere else in the kit. And it stops Tailwind's own defaults from overwriting the token
- * names the two projects share — both descend from shadcn, so 41 names collide and 23 of them
- * are silently re-pointed without this file. The kit's small radius, six type steps and three
- * font stacks quietly become Tailwind's, and `--text-sm` loses its type-factor fallback so
- * scoped type scaling stops working. The 39 restated names below are the fix.
+ * It makes the theme addressable from Tailwind, so `bg-primary`, `text-muted-foreground`,
+ * `rounded-sm` and `p-padding` mean what they mean in the kit, and `text-sm` follows the type
+ * factor as Text does. And it keeps Tailwind's defaults
+ * off the names both declare: `--radius-sm`, `--shadow-lg`, the type steps and the font stacks
+ * would otherwise take Tailwind's values. A name the kit leaves unset (`initial`) removes
+ * Tailwind's default, so the kit's fallback holds.
  *
- * `inline` is load-bearing, not a style choice. Without it every key resolves once at
- * `:root`, and `bg-primary` inside a `.dark` subtree paints the light colour. The second
- * block is the exception that proves it: literals, which resolve the same everywhere and
- * must stay readable at the element so a theme can move them.
+ * `inline` is load-bearing in the first block: a plain @theme resolves each key once at
+ * `:root`, and `bg-primary` in a dark region would paint the light colour. The second block
+ * restates literals, which must stay readable at the element so a theme can move them.
  */
 @theme inline {
 	/* ── colour ────────────────────────────────────────────────────────────────────
-	 * The key is Tailwind's, the value reads the kit's. Nothing of the kit's is overridden,
-	 * so a consumer re-pointing a token at any scope — including .dark — is followed.
+	 * The key is Tailwind's, the value reads the kit's variable at the element.
 	 */
-	--color-background:                 var(--background);
-	--color-foreground:                 var(--foreground);
-	--color-card:                       var(--card);
-	--color-card-foreground:            var(--card-foreground);
-	--color-popover:                    var(--popover);
-	--color-popover-foreground:         var(--popover-foreground);
-	--color-primary:                    var(--primary);
-	--color-primary-foreground:         var(--primary-foreground);
-	--color-secondary:                  var(--secondary);
-	--color-secondary-foreground:       var(--secondary-foreground);
-	--color-muted:                      var(--muted);
-	--color-muted-foreground:           var(--muted-foreground);
-	--color-accent:                     var(--accent);
-	--color-accent-foreground:          var(--accent-foreground);
-	--color-destructive:                var(--destructive);
-	--color-destructive-foreground:     var(--destructive-foreground);
-	--color-border:                     var(--border);
-	--color-input:                      var(--input);
-	--color-ring:                       var(--ring);
-	--color-chart-1:                    var(--chart-1);
-	--color-chart-2:                    var(--chart-2);
-	--color-chart-3:                    var(--chart-3);
-	--color-chart-4:                    var(--chart-4);
-	--color-chart-5:                    var(--chart-5);
-	--color-sidebar:                    var(--sidebar);
-	--color-sidebar-foreground:         var(--sidebar-foreground);
-	--color-sidebar-primary:            var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent:             var(--sidebar-accent);
-	--color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
-	--color-sidebar-border:             var(--sidebar-border);
-	--color-sidebar-ring:               var(--sidebar-ring);
-	--color-success:                    var(--success);
-	--color-success-foreground:         var(--success-foreground);
-	--color-info:                       var(--info);
-	--color-info-foreground:            var(--info-foreground);
-	--color-link:                       var(--link-color);
-	--color-primary-accent:             var(--primary-accent);
-	--color-warning:                    var(--warning);
-	--color-warning-foreground:         var(--warning-foreground);
-	--color-warning-accent:             var(--warning-accent);
-	--color-destructive-accent:         var(--destructive-accent);
-	--color-inverse-background:         var(--inverse-background);
-	--color-inverse-foreground:         var(--inverse-foreground);
-	--color-inverse-muted:              var(--inverse-muted);
-	--color-inverse-subtle:             var(--inverse-subtle);
-	--color-inverse-disabled:           var(--inverse-disabled);
-	--color-inverse-surface:            var(--inverse-surface);
-	--color-inverse-surface-strong:     var(--inverse-surface-strong);
-	--color-inverse-border:             var(--inverse-border);
-	--color-inverse-decoration:         var(--inverse-decoration);
+	--color-accent:                    var(--accent);
+	--color-accent-foreground:         var(--accent-foreground);
+	--color-background:                var(--background);
+	--color-border:                    var(--border);
+	--color-card:                      var(--card);
+	--color-card-foreground:           var(--card-foreground);
+	--color-chart-1:                   var(--chart-1);
+	--color-chart-2:                   var(--chart-2);
+	--color-chart-3:                   var(--chart-3);
+	--color-chart-4:                   var(--chart-4);
+	--color-chart-5:                   var(--chart-5);
+	--color-destructive:               var(--destructive);
+	--color-destructive-foreground:    var(--destructive-foreground);
+	--color-foreground:                var(--foreground);
+	--color-info:                      var(--info);
+	--color-info-foreground:           var(--info-foreground);
+	--color-input:                     var(--input);
+	--color-link:                      var(--link);
+	--color-muted:                     var(--muted);
+	--color-muted-foreground:          var(--muted-foreground);
+	--color-overlay-backdrop:          var(--overlay-backdrop);
+	--color-popover:                   var(--popover);
+	--color-popover-foreground:        var(--popover-foreground);
+	--color-primary:                   var(--primary);
+	--color-primary-foreground:        var(--primary-foreground);
+	--color-ring:                      var(--ring);
+	--color-secondary:                 var(--secondary);
+	--color-secondary-foreground:      var(--secondary-foreground);
+	--color-sidebar:                   var(--sidebar);
+	--color-sidebar-accent:            var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border:            var(--sidebar-border);
+	--color-sidebar-foreground:        var(--sidebar-foreground);
+	--color-sidebar-ring:              var(--sidebar-ring);
+	--color-success:                   var(--success);
+	--color-success-foreground:        var(--success-foreground);
+	--color-warning:                   var(--warning);
+	--color-warning-foreground:        var(--warning-foreground);
 
 	/* ── spacing ───────────────────────────────────────────────────────────────────
-	 * Tailwind's namespace is `--spacing-*`, the kit's ladder is `--space-*`. A different name,
-	 * so `p-md` follows a scoped `--density-scale` the way the kit's own padding does.
+	 * The kit's four lengths, which density and scale move.
 	 */
-	--spacing-2xs: var(--space-2xs);
-	--spacing-xs:  var(--space-xs);
-	--spacing-sm:  var(--space-sm);
-	--spacing-md:  var(--space-md);
-	--spacing-lg:  var(--space-lg);
-	--spacing-xl:  var(--space-xl);
-	--spacing-2xl: var(--space-2xl);
+	--spacing-padding:    var(--padding);
+	--spacing-padding-sm: var(--padding-sm);
+	--spacing-gap:        var(--gap);
+	--spacing-gap-sm:     var(--gap-sm);
 
-	/* ── names the kit and Tailwind both use — formulas ────────────────────────────
-	 * These restate the kit's own declared values. `--text-sm: var(--text-sm)` would
-	 * reference itself and resolve to nothing; restating makes the override a no-op and
-	 * takes Tailwind's default — which silently re-points every kit token the two share — out of the way.
-	 * Inlined, each formula reads its inputs at the element.
+	/* ── type ──────────────────────────────────────────────────────────────────────
+	 * Each step times the type factor, as Text sizes it; nothing reaches `:root`.
 	 */
-	--shadow-2xs:    0 1px 2px 0px color-mix(in oklab, var(--shadow-ink) 4%, transparent);
-	--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);
-	--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);
-	--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);
-	--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);
-	--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);
-	--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);
-	--text-xs:       calc(0.75rem * var(--text-scale, var(--scale)));
-	--text-pxs:      calc(0.8125rem * var(--text-scale, var(--scale)));
-	--text-sm:       calc(0.875rem * var(--text-scale, var(--scale)));
-	--text-base:     calc(1rem * var(--text-scale, var(--scale)));
-	--text-lg:       calc(1.125rem * var(--text-scale, var(--scale)));
-	--text-xl:       calc(1.25rem * var(--text-scale, var(--scale)));
-	--text-2xl:      calc(1.5rem * var(--text-scale, var(--scale)));
-	--font-heading:  var(--font-sans);
-	--animate-ping:  ping 1s var(--ease-out) infinite;
-	--animate-pulse: pulse 2s var(--ease-in-out) infinite;
+	--text-2xl:  calc(1.5rem * var(--text-scale));
+	--text-base: calc(1rem * var(--text-scale));
+	--text-lg:   calc(1.125rem * var(--text-scale));
+	--text-pxs:  calc(0.8125rem * var(--text-scale));
+	--text-sm:   calc(0.875rem * var(--text-scale));
+	--text-xl:   calc(1.25rem * var(--text-scale));
+	--text-xs:   calc(0.75rem * var(--text-scale));
 }
 
 @theme {
-	/* ── names the kit and Tailwind both use — literals ────────────────────────────
-	 * Not inline: an inlined literal is frozen into the utility, so a theme or provider that
-	 * re-points one of these would move the kit and not `rounded-sm` or `font-sans`. Here the
-	 * utility reads the variable at the element, and the value Tailwind emits to `:root` is
-	 * the kit's own, so it overrides nothing.
+	/* ── names the kit and Tailwind both use ───────────────────────────────────────
+	 * The kit's own values, so Tailwind's defaults replace nothing.
 	 */
-	--radius-sm:              0.5rem;
-	--radius-pill:            999px;
-	--text-xs--line-height:   calc(1 / 0.75);
-	--text-pxs--line-height:  calc(1.125 / 0.8125);
-	--text-sm--line-height:   calc(1.25 / 0.875);
-	--text-base--line-height: calc(1.5 / 1);
-	--text-lg--line-height:   calc(1.75 / 1.125);
-	--text-xl--line-height:   calc(1.75 / 1.25);
-	--text-2xl--line-height:  calc(2 / 1.5);
-	--font-sans:              'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-	--font-serif:             Merriweather, ui-serif, serif;
-	--font-mono:              'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-	--leading-none:           1;
-	--leading-tight:          1.25;
-	--leading-snug:           1.375;
-	--leading-normal:         1.5;
-	--leading-relaxed:        1.625;
-	--tracking-tight:         -0.025em;
-	--tracking-widest:        0.1em;
-	--ease-out:               cubic-bezier(0.23, 1, 0.32, 1);
-	--ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
-	--animate-spin:           spin 1s linear infinite;
+	--font-heading: initial;
+	--font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	--font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--radius:       1rem;
+	--radius-pill:  999px;
+	--radius-sm:    0.5rem;
+	--shadow:       0 1px 2px 0 oklch(0 0 0 / 6%), 0 1px 1px -1px oklch(0 0 0 / 6%);
+	--shadow-lg:    0 4px 8px -2px oklch(0 0 0 / 10%), 0 12px 24px -12px oklch(0 0 0 / 18%);
 }

package/dist/styles/targets.css

@@ -13,8 +13,8 @@
 		top: 50%;
 		left: 50%;
 		translate: -50% -50%;
-		/* `max()`: only ever grows the target. */
-		width: max(100%, var(--hit-area-min));
-		height: max(100%, var(--hit-area-min));
+		/* `max()`: only ever grows the target. A fixed 24px: the minimum does not scale. */
+		width: max(100%, 1.5rem);
+		height: max(100%, 1.5rem);
 	}
 }

package/dist/styles/theme/colour.css

@@ -0,0 +1,86 @@
+/*
+ * Colour. Every value is a literal, declared once at `:root`, and every colour is
+ * `light-dark(light, dark)`: the used `color-scheme` of the element that paints picks the half.
+ * `.light`, `.dark` and `[data-theme]` set only `color-scheme`, so a dark island inside a light
+ * page, and a consumer's `:root { --primary: … }`, reach every component without re-declaring
+ * anything below `:root`.
+ *
+ * The names are shadcn's where shadcn has one, so a shadcn theme drops in.
+ */
+:root {
+	color-scheme: light dark;
+
+	/* Surfaces and ink. */
+	--background: light-dark(oklch(1 0 0), oklch(0.205 0 0)); /* The page and the app shell. */
+	--foreground: light-dark(oklch(0.28 0 0), oklch(0.985 0 0)); /* Primary text and icons. */
+	--card: light-dark(oklch(1 0 0), oklch(0.25 0 0)); /* Framed regions: cards, table frames, panels. */
+	--card-foreground: light-dark(oklch(0.28 0 0), oklch(0.985 0 0));
+	--popover: light-dark(oklch(1 0 0), oklch(0.28 0 0)); /* Anchored popups, menus, palettes, toasts. */
+	--popover-foreground: light-dark(oklch(0.28 0 0), oklch(0.985 0 0));
+	--muted: light-dark(oklch(0.97 0 0), oklch(0.23 0 0)); /* Wells and placeholders. */
+	--muted-foreground: light-dark(oklch(0.5 0 0), oklch(0.708 0 0)); /* Supporting text. */
+	--accent: light-dark(oklch(0.97 0 0), oklch(0.33 0 0)); /* The one hover and current fill. */
+	--accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+	--border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%)); /* Every divider and frame. */
+	--input: light-dark(oklch(0.73 0 0), oklch(1 0 0 / 28%)); /* Control frames. */
+	--ring: light-dark(oklch(0.58 0 0), oklch(0.62 0 0)); /* Focus. */
+
+	/* Tones: a solid fill and the text on it. */
+	--primary: light-dark(oklch(0.45 0.124 167.35), oklch(0.7 0.13 167.35));
+	--primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.18 0.03 167.35));
+	--secondary: light-dark(oklch(0.97 0 0), oklch(0.25 0 0));
+	--secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+	--destructive: light-dark(oklch(0.5 0.245 27.325), oklch(0.74 0.158 22.216));
+	--destructive-foreground: light-dark(oklch(0.99 0 0), oklch(0.18 0.05 22));
+	--success: light-dark(oklch(0.4 0.16 145), oklch(0.76 0.16 145));
+	--success-foreground: light-dark(oklch(0.985 0 0), oklch(0.18 0.05 145));
+	--warning: light-dark(oklch(0.72 0.16 90), oklch(0.82 0.16 90));
+	--warning-foreground: light-dark(oklch(0.2 0.05 80), oklch(0.18 0.05 80));
+	--info: light-dark(oklch(0.45 0.214 276.966), oklch(0.72 0.14 250));
+	--info-foreground: light-dark(oklch(0.99 0 0), oklch(0.18 0.05 250));
+	--link: light-dark(oklch(0.462 0.1776 259.13), oklch(0.72 0.12 259.13));
+
+	/*
+	 * Two tint strengths, applied at the use site:
+	 * `color-mix(in oklab, var(--tone) var(--tint), transparent)`.
+	 */
+	--tint: 10%; /* Soft fills: a selected row, a soft badge, an alert's wash. */
+	--tint-strong: 30%; /* Tinted lines and edges. */
+
+	/* Categorical chart series. Hue is the series' identity; only lightness moves by mode. */
+	--chart-1: light-dark(oklch(0.56 0.11 167), oklch(0.74 0.13 167));
+	--chart-2: light-dark(oklch(0.56 0.11 230), oklch(0.72 0.14 230));
+	--chart-3: light-dark(oklch(0.56 0.17 285), oklch(0.72 0.15 285));
+	--chart-4: light-dark(oklch(0.58 0.16 330), oklch(0.74 0.15 330));
+	--chart-5: light-dark(oklch(0.6 0.14 60), oklch(0.78 0.14 60));
+
+	/* The application sidebar. */
+	--sidebar: light-dark(oklch(0.96 0 0), oklch(0.16 0 0));
+	--sidebar-foreground: light-dark(oklch(0.28 0 0), oklch(0.985 0 0));
+	--sidebar-accent: light-dark(oklch(0.98 0 0), oklch(0.28 0 0));
+	--sidebar-accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+	--sidebar-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
+	--sidebar-ring: light-dark(oklch(0.58 0 0), oklch(0.62 0 0));
+
+	/* The scrim behind a modal. */
+	--overlay-backdrop: oklch(0 0 0 / 0.5);
+}
+
+.light,
+[data-theme="light"] {
+	color-scheme: light;
+}
+
+.dark,
+[data-theme="dark"] {
+	color-scheme: dark;
+}
+
+/*
+ * `--surface-ground` is the ground a surface painted, for a sticky cell or a fade that must
+ * match it. A colour island resets it, so a reader inside falls back to the island's own
+ * `--background` instead of a ground resolved in the other mode.
+ */
+:where([data-theme], .light, .dark) {
+	--surface-ground: initial;
+}

package/dist/styles/theme/density.css

@@ -0,0 +1,31 @@
+/*
+ * Density presets. Each overrides the spacing and control geometry on its own element, and
+ * the values inherit from there; type keeps its size. `default` resets a preset set further
+ * out. UIProvider's `scale` writes the same variables inline, computed in JavaScript.
+ */
+[data-density="compact"] {
+	--padding: 0.75rem;
+	--padding-sm: 0.375rem;
+	--gap: 0.75rem;
+	--gap-sm: 0.375rem;
+	--control-height: 2rem;
+	--control-height-sm: 1.75rem;
+}
+
+[data-density="default"] {
+	--padding: 1rem;
+	--padding-sm: 0.5rem;
+	--gap: 1rem;
+	--gap-sm: 0.5rem;
+	--control-height: 2.125rem;
+	--control-height-sm: 1.875rem;
+}
+
+[data-density="comfortable"] {
+	--padding: 1.25rem;
+	--padding-sm: 0.625rem;
+	--gap: 1.25rem;
+	--gap-sm: 0.625rem;
+	--control-height: 2.25rem;
+	--control-height-sm: 2rem;
+}

package/dist/styles/theme/elevation.css

@@ -0,0 +1,9 @@
+/*
+ * Elevation: two shadows. `--shadow` lifts a surface a little off the page (a framed card,
+ * a raised chip, a slider thumb); `--shadow-lg` floats one above it (popovers, menus, dialogs,
+ * toasts). A popup pairs `--shadow-lg` with a hairline in `--border`.
+ */
+:root {
+	--shadow: 0 1px 2px 0 oklch(0 0 0 / 6%), 0 1px 1px -1px oklch(0 0 0 / 6%);
+	--shadow-lg: 0 4px 8px -2px oklch(0 0 0 / 10%), 0 12px 24px -12px oklch(0 0 0 / 18%);
+}

package/dist/styles/theme/layout.css

@@ -0,0 +1,18 @@
+/*
+ * Layout: stacking tiers, with gaps between them so an application can slot its own layer
+ * in, and the shell's three measures.
+ */
+:root {
+	--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. */
+	--z-toast: 100; /* Above a menu still open when a toast arrives. */
+	--z-tooltip: 1000; /* Always last: a tooltip may describe anything, a toast included. */
+
+	--sidebar-width: 16rem;
+	--header-height: 3.5rem;
+	--content-width: 64rem;
+
+	/* The scrim's filter. `none` by default: a blur repaints everything behind it each frame. */
+	--overlay-backdrop-filter: none;
+}

package/dist/styles/theme/motion.css

@@ -0,0 +1,18 @@
+/*
+ * Motion: two durations and one easing. Modules transition an explicit property list, never
+ * `all`. `prefers-reduced-motion` and the provider's `motion.reduced` set both durations to 0.
+ */
+:root {
+	--duration-fast: 150ms;
+	--duration: 200ms;
+	/* A strong ease-out: motion starts at once and settles without a sluggish tail. */
+	--ease: cubic-bezier(0.23, 1, 0.32, 1);
+	--disabled-opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--duration-fast: 0ms;
+		--duration: 0ms;
+	}
+}

package/dist/styles/theme/shape.css

@@ -0,0 +1,12 @@
+/*
+ * Shape: two radii and one border width. `--radius` rounds whatever holds other rounded things
+ * (cards, dialogs, popovers, menus); `--radius-sm` everything inside one or smaller than one
+ * (controls, rows, chips, badges, tooltips). A container insets its items by the difference,
+ * so the corners nest: outer = inner + inset. `--radius-pill` and `50%` are shapes, not steps.
+ */
+:root {
+	--radius: 1rem;
+	--radius-sm: 0.5rem;
+	--radius-pill: 999px;
+	--border-width: 1px;
+}

package/dist/styles/theme/size.css

@@ -0,0 +1,10 @@
+/*
+ * Size: two control heights and two icon sizes. A glyph button below the small control is an
+ * icon plus the small padding on each side, not a third height.
+ */
+:root {
+	--control-height: 2.125rem;
+	--control-height-sm: 1.875rem;
+	--icon-size: 1rem;
+	--icon-size-sm: 0.75rem;
+}

package/dist/styles/theme/spacing.css

@@ -0,0 +1,11 @@
+/*
+ * Spacing: two paddings and two gaps. The larger one is for containers and between groups
+ * (a card's inset, the gap between fields or sections); the smaller one is for items and
+ * inside a group (a row's inset, icon and label, title and description).
+ */
+:root {
+	--padding: 1rem;
+	--padding-sm: 0.5rem;
+	--gap: 1rem;
+	--gap-sm: 0.5rem;
+}

package/dist/styles/theme/typography.css

@@ -0,0 +1,20 @@
+/*
+ * Typography, read only by Text and Heading: the font stacks, the size ramp and the one type
+ * factor. Text multiplies a size by `--text-scale` where it applies it; line heights, weights
+ * and tracking are Text's and Heading's own values.
+ */
+:root {
+	--font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	/* Optional: headings follow the sans stack until a theme sets this. */
+	--font-heading: initial;
+
+	--text-xs: 0.75rem;
+	--text-pxs: 0.8125rem;
+	--text-sm: 0.875rem; /* The default body size. */
+	--text-base: 1rem;
+	--text-lg: 1.125rem;
+	--text-xl: 1.25rem;
+	--text-2xl: 1.5rem;
+	--text-scale: 1;
+}

package/dist/styles/tone.css

@@ -0,0 +1,61 @@
+/*
+ * The tone rule. A component with a `tone` prop renders `data-tone`, and reads three
+ * variables instead of naming a colour:
+ *
+ *   --tone             the hue: a solid fill, a tint, a line
+ *   --tone-foreground  text and icons on a solid fill
+ *   --tone-ink         the hue as text or a glyph, on the page or on a tint
+ *
+ *   .soft  { background-color: color-mix(in oklab, var(--tone) var(--tint), transparent); color: var(--tone-ink); }
+ *   .solid { background-color: var(--tone); color: var(--tone-foreground); }
+ *
+ * The ink is the hue itself on a dark page. On a light one it mixes toward the text colour
+ * by as much as the hue needs to hold contrast: none for most, more for red, most for amber,
+ * which is light. Secondary's ink is the text colour. In `base`, so a component's own rule
+ * outranks it.
+ */
+@layer base {
+	/* Each toned element restates its share, so a chip nested in a warning one does not inherit 45%. */
+	:is([data-tone], [data-ref-tone]) {
+		--_tone-ink: 100%;
+		--tone-ink: color-mix(in oklab, var(--tone) var(--_tone-ink), light-dark(var(--foreground), var(--tone)));
+	}
+
+	:is([data-tone="neutral"], [data-ref-tone="neutral"]) {
+		--tone: var(--foreground);
+		--tone-foreground: var(--background);
+	}
+
+	:is([data-tone="primary"], [data-ref-tone="primary"]) {
+		--tone: var(--primary);
+		--tone-foreground: var(--primary-foreground);
+	}
+
+	:is([data-tone="secondary"], [data-ref-tone="secondary"]) {
+		--tone: var(--muted-foreground);
+		--tone-foreground: var(--background);
+		--tone-ink: var(--foreground);
+	}
+
+	:is([data-tone="info"], [data-ref-tone="info"]) {
+		--tone: var(--info);
+		--tone-foreground: var(--info-foreground);
+	}
+
+	:is([data-tone="success"], [data-ref-tone="success"]) {
+		--tone: var(--success);
+		--tone-foreground: var(--success-foreground);
+	}
+
+	:is([data-tone="warning"], [data-ref-tone="warning"]) {
+		--tone: var(--warning);
+		--tone-foreground: var(--warning-foreground);
+		--_tone-ink: 45%;
+	}
+
+	:is([data-tone="destructive"], [data-ref-tone="destructive"]) {
+		--tone: var(--destructive);
+		--tone-foreground: var(--destructive-foreground);
+		--_tone-ink: 85%;
+	}
+}