themelia-ui 1.0.0

package/dist/styles/theming/layers.css

@@ -0,0 +1,32 @@
+/*
+ * Stacking order.
+ *
+ * Upstream this was raw `z-10`, `z-50`, `z-1000`, and `z-[100]` scattered across
+ * components — 90 uses with no shared meaning, so "is a tooltip above a dropdown?" could
+ * only be answered by grepping. Naming the tiers makes the stacking contract legible and
+ * gives consumers one place to slot their own chrome in.
+ *
+ * Gaps between tiers are deliberate: an app needs room to insert a layer without
+ * renumbering the kit.
+ *
+ * ── `:root` only, and this file is all raw inputs ────────────────────────────────────
+ * Every value here is a literal, so restating it at each scope boundary would stop a
+ * consumer overriding it from `:root` — the nearest declaring ancestor wins, and every
+ * provider, density and theme element is one. Measured: a `:root` override of
+ * `--z-popover` read back as 99 at the root and as the kit's 50 inside `[data-ui-scope]`.
+ * Nothing here derives from anything, so nothing needs re-deriving per scope, and setting
+ * a tier ON a scope element still works.
+ */
+:root {
+	--z-raised: 1; /* Lifted within its own stacking context — a selected row, a chip. */
+	--z-sticky: 10; /* Sticky table headers and toolbars. Was z-10, 36 uses. */
+	--z-docked: 20; /* A floating batch bar: above a sticky header, below any menu it opens. */
+	--z-popover: 50; /* Menus, selects, popovers. Was z-50, 32 uses. */
+	/*
+	 * Toasts, above any menu that might still be open when one arrives. The comment above
+	 * counted `z-[100]` among the upstream tiers and then did not name it, so the toaster
+	 * kept the raw number and "is a toast above a dropdown?" stayed a grep.
+	 */
+	--z-toast: 100;
+	--z-tooltip: 1000; /* Always last: a tooltip may describe anything, including a toast. */
+}

package/dist/styles/theming/layout.css

@@ -0,0 +1,27 @@
+/*
+ * Layout — component variable contract for the page containers.
+ *
+ * The gutter and the column gap are page-level measurements, so they scale off the space
+ * factor rather than a component family: a page's breathing room should not change because
+ * a card family was retuned.
+ */
+/*
+ * Declared at every scope boundary, not at `:root`. A custom property's var()
+ * references resolve where the property is DECLARED, so a single `:root` block
+ * freezes these at root values and scoped density/theming silently do nothing.
+ * See 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: calc(2rem * var(--space-scale));
+	--layout-aside-min: calc(18rem * var(--scale));
+
+	/* ── Resource shells ──────────────────────────────────────────────────────── */
+	--resource-media: calc(var(--avatar) * 1.5 * var(--space-scale));
+}

package/dist/styles/theming/mentions.css

@@ -0,0 +1,44 @@
+/*
+ * Mentions — the chip palette, the picker, and the inline suggestion panel.
+ *
+ * A chip is a wash of its tone with a ring of the same, not a solid fill. A mention sits
+ * inside a sentence, and a solid badge in running text stops the sentence being read.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+
+	--mention-destructive-fg: var(--destructive);
+
+}
+
+/*
+ * The destructive chip, lightened for dark.
+ *
+ * `--destructive` on the dark card measures 4.36:1 through the chip's own wash — under
+ * 4.5, and the only tone in the set that fails. Mixing it toward the foreground lifts the
+ * text without turning the chip into a solid badge, which is what pairing it with
+ * `--destructive-foreground` (the warning chip's answer) would have done.
+ */
+.dark,
+[data-theme="dark"] {
+	--mention-destructive-fg: color-mix(in oklab, var(--destructive) 72%, var(--foreground));
+}
+
+/*
+ * The same values under the OS preference.
+ *
+ * A bare `.dark` block is DEAD whenever the theme comes from the system rather than an
+ * explicit class — which is what `colorScheme: "system"` does, and what the docs site
+ * itself runs. Both forms are needed, and `verify:dark-overrides` fails if they drift.
+ */
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]),
+	[data-ui-scope]:not([data-theme="light"]),
+	[data-density]:not([data-theme="light"]) {
+		--mention-destructive-fg: color-mix(in oklab, var(--destructive) 72%, var(--foreground));
+	}
+}

package/dist/styles/theming/motion.css

@@ -0,0 +1,53 @@
+/*
+ * Motion — the global transition wiring layer.
+ *
+ * Tailwind supplied duration and easing as utility defaults, so the source kit wrote
+ * `transition-all` with no value anywhere in its own CSS. These are those defaults, named.
+ *
+ * Every module transitions an explicit property list rather than `all`: `all` animates
+ * layout properties too, which is what makes menus and popovers judder on open.
+ */
+/*
+ * RAW INPUTS — `:root` only. See styles/SCOPES.md for why derived tokens are the opposite.
+ *
+ * These are literals, and restating a literal at every scope boundary means an override
+ * cannot reach past the first one. That is not hypothetical here: the reduced-motion block
+ * below sets them on `:root`, and while they were declared at `[data-ui-scope]` too, a
+ * button inside the app shell still measured 150ms with the preference on. Every shell is
+ * a scope, so the preference reached almost nothing.
+ */
+:root {
+	--duration-instant: 75ms;
+	--duration-fast: 150ms;
+	--duration-normal: 200ms;
+
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*
+ * DERIVED — every scope boundary, because a var() resolves where the property is DECLARED.
+ * Restated here so it re-derives from whatever the durations above currently are, which is
+ * what makes the reduced-motion override reach it.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+	/* The default interactive transition: colour and elevation only. */
+	--transition-control:
+		background-color var(--duration-fast) var(--ease-in-out),
+		border-color var(--duration-fast) var(--ease-in-out),
+		color var(--duration-fast) var(--ease-in-out),
+		box-shadow var(--duration-fast) var(--ease-in-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--duration-instant: 0ms;
+		--duration-fast: 0ms;
+		--duration-normal: 0ms;
+	}
+}

package/dist/styles/theming/overlay.css

@@ -0,0 +1,64 @@
+/*
+ * RAW INPUTS — `:root` only. See styles/SCOPES.md for why derived tokens are the opposite.
+ *
+ * A literal restated at every scope boundary cannot be overridden from `:root`: the nearest
+ * declaring ancestor wins, and every provider, density and theme element is one. Measured
+ * rather than assumed — a `:root` override of these read back as the override at the root
+ * and as the kit's own value inside `[data-ui-scope]`. Declared once here, an override
+ * reaches every scope; setting one ON a scope still works, because the derived tokens
+ * below re-resolve at each boundary.
+ */
+:root {
+	/* Room for the floating close control so a long title never runs under it. */
+
+	--overlay-max-width: 32rem;
+	--overlay-enter-scale: 0.95;
+	--overlay-edge-inset: 0px;
+
+	/*
+	 * Named cross-axis steps. Percentages, so a side panel is a share of the viewport on a
+	 * phone and `--overlay-max-width` caps it on a desktop.
+	 */
+	--overlay-edge-sm: 55%;
+	--overlay-edge-md: 75%;
+	--overlay-edge-lg: 90%;
+	--overlay-edge-full: 100%;
+}
+
+/*
+ * Overlay — the single modal-surface contract.
+ *
+ * Dialog, alert dialog, sheet, and drawer are one primitive with different placement,
+ * modality, and dismissal. Their shared chrome lives here; each preset overrides only the
+ * handful of variables that make it that preset.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+		/*
+		 * Enter and exit are NOT the same.
+		 *
+		 * A surface that arrives and leaves on identical timing feels sluggish to dismiss: the
+		 * reader has already decided, and the animation is now the only thing between them and
+		 * the page. Arriving eases OUT and takes its time; leaving eases IN and is quicker.
+		 *
+		 * --overlay-duration stays as the single knob a consumer retunes; the two below derive
+		 * from it so overriding one value still moves both.
+		 */
+		--overlay-duration-exit: calc(var(--duration-fast) * 0.75);
+
+		/* Region insets. The shell is flush so regions can own these without stacking. */
+		--overlay-region-p: calc(var(--surface-x) * var(--space-scale));
+
+		/*
+		 * Full length is the space BETWEEN the insets, not the whole viewport. At the default
+		 * inset of zero the two are identical, so a flush sheet is unchanged; once there is a
+		 * gap, this is what makes the gap above, beside, and below the panel the same one.
+		 */
+		--overlay-edge-length: calc(100% - var(--overlay-edge-inset) * 2);
+		/* The gap `inset` opens when a caller asks for one without naming a length. */
+		--overlay-edge-inset-default: var(--space-lg);
+}

package/dist/styles/theming/sizing.css

@@ -0,0 +1,204 @@
+/*
+ * Sizing — the global measurement wiring layer.
+ *
+ * Hand-maintained. It was generated once, and the generator has been deleted rather than
+ * left to be believed: running it would have removed nine tokens with forty-nine uses
+ * between them — `--menu-surface-p`, `--menu-row-px`, `--size-icon-xl` among them — and
+ * added fifty with none, which `verify:token-budget` forbids as dead names. The header
+ * said "do not hand-edit; re-run the generator" the whole time, so the one instruction it
+ * gave was the one that would have broken the kit.
+ *
+ * One variable per measurement. Upstream, the same value was expressed up to five
+ * times (`size-control`, `h-control`, `w-control`, `min-h-control` are one length);
+ * 82 @utility blocks and 56 @theme entries collapse to 77 variables here.
+ *
+ * Raw tunable inputs — --height-action, --height-control, --control-x, --icon,
+ * --avatar, --surface-x/y, --row-x/y, --space-scale, --density-scale, --radius —
+ * stay in styles/tokens and styles/themes. This file only derives from them.
+ *
+ * Declared at every scope boundary rather than `:root`: a custom property's var()
+ * references resolve where the property is DECLARED, so a single `:root` block would
+ * freeze every measurement at the root density and scoped density could never work.
+ * See styles/SCOPES.md.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+
+	/* Spacing scale — Gap and padding steps. Scale with --space-scale, not --density-scale. */
+	--space-2xs: calc(0.125rem * var(--space-scale));
+	--space-xs: calc(0.25rem * var(--space-scale));
+	--space-sm: calc(0.375rem * var(--space-scale));
+	--space-md: calc(0.5rem * var(--space-scale));
+	--space-lg: calc(0.75rem * var(--space-scale));
+	--space-xl: calc(1rem * var(--space-scale));
+	--space-2xl: calc(1.5rem * var(--space-scale));
+
+	/* Action heights — Buttons and action triggers, derived from --height-action. */
+	--action-2xs: calc(var(--height-action) * 0.6666667 * var(--density-scale));
+	--action-sm: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	--action: calc(var(--height-action) * var(--density-scale));
+
+	/* Control heights — Inputs, selects, and field controls, derived from --height-control. */
+	--control-h: calc(var(--height-control) * var(--density-scale));
+
+	/* Control inline padding — Derived from --control-x. The 2xs and lg steps cover the 0.5rem and 1rem insets ui/ wrote as raw `px-2` and `px-4`. */
+	--control-px-2xs: calc(var(--control-x) * 0.6666667 * var(--space-scale));
+	--control-px-sm: calc(var(--control-x) * 0.8333333 * var(--space-scale));
+
+	/*
+	 * Media sizes — Computed from the raw --icon and --avatar contract tokens, which keep
+	 * their bare names.
+	 *
+	 * ── Which step, and why it has to be written down ──────────────────────────────────
+	 *
+	 * The ladder had no stated rule, so usage split almost evenly between two steps — 112
+	 * uses of `sm` against 72 of the base — which is not a scale, it is two conventions that
+	 * never met. `/page` rendered FOUR icon sizes in one view.
+	 *
+	 *   sm    a dense row's own furniture: a chevron, a caret, a separator, a metadata glyph
+	 *   md    a row icon that carries meaning rather than direction
+	 *   base  an icon beside body text, and any icon inside a control (Button derives its
+	 *         own --button-icon from --icon for exactly this reason)
+	 *   lg    a standalone icon that is the subject of its block
+	 *   xl/2xl illustration, below
+	 *
+	 * And it is set HERE, in CSS, never by a `size` prop on the element. A numeric size is a
+	 * second sizing mechanism that no module rule can see, no density scale reaches, and no
+	 * consumer override can retune — and it silently loses to any CSS rule that does size the
+	 * icon, so half of the twenty that shipped were dead code setting a number nobody got.
+	 * `verify:composition`'s `literal-icon-size` rule fails the build on one now.
+	 */
+	--size-icon-sm: calc(var(--icon) * 0.75 * var(--space-scale));
+	--size-icon-md: calc(var(--icon) * 0.875 * var(--space-scale));
+	--size-icon: calc(var(--icon) * var(--space-scale));
+	--size-icon-lg: calc(var(--icon) * 1.25 * var(--space-scale));
+	/*
+	 * The two decorative sizes. An empty state's glyph and a dropzone's arrow are not
+	 * interface icons at reading size — they are illustration — but they were reaching past
+	 * the scale for a raw 1.5rem / 2rem / 2.5rem each, so three components that all draw
+	 * "a big icon" drew three different big icons.
+	 */
+	--size-icon-xl: calc(var(--icon) * 1.5 * var(--space-scale));
+	--size-icon-2xl: calc(var(--icon) * 2.5 * var(--space-scale));
+	--size-avatar-sm: calc(var(--avatar) * 0.75 * var(--space-scale));
+	--size-avatar: calc(var(--avatar) * var(--space-scale));
+	--size-avatar-lg: calc(var(--avatar) * 1.25 * var(--space-scale));
+
+	/* Surface padding — Cards and multi-content surfaces, derived from --surface-x / --surface-y. */
+	--surface-px-xs: calc(var(--surface-x) * 0.5 * var(--space-scale));
+	--surface-px: calc(var(--surface-x) * var(--space-scale));
+	--surface-px-lg: calc(var(--surface-x) * 1.8 * var(--space-scale));
+	--surface-py-xs: calc(var(--surface-y) * 0.5 * var(--space-scale));
+	--surface-py: calc(var(--surface-y) * var(--space-scale));
+	--surface-py-lg: calc(var(--surface-y) * 1.8 * var(--space-scale));
+
+	/* Row insets — List, menu, command, and table rows, derived from --row-x / --row-y. */
+	/*
+	 * The medallion — a glyph in a tinted, rounded box beside a title.
+	 *
+	 * IconBadge, a choice card's icon, and a SwitchCard's icon are the same object in
+	 * three families. Sized once here so they cannot drift: they sit beside each other on
+	 * a settings page, and a 36px one next to a 40px one reads as a mistake even when
+	 * nobody can say which is wrong.
+	 *
+	 * An UNSCALED base, deliberately. Each caller multiplies it by the density factor, so
+	 * the number lives in one place and the scaling happens where it is used.
+	 */
+	--medallion-base: 2.5rem;
+
+	/*
+	 * Menu rows — the popover menu, the command list, the select popup, and the dropdown
+	 * menu.
+	 *
+	 * One rhythm behind all four, because they are the same row in four surfaces: a
+	 * picker, a command palette, a select popup, and an overflow menu at four different
+	 * row heights is the drift this file exists to prevent. The minimum height is what
+	 * keeps a single-line row from reading as cramped beside a two-line one.
+	 *
+	 * ONE row size for every menu-like surface — the dropdown menu, the popover menu, the
+	 * command list, the select list. They are the same object seen from different angles,
+	 * and a reader who opens two of them in one screen sees the difference immediately.
+	 *
+	 * These used to disagree: the picker family took these values raw (12/8/36) while the
+	 * dropdown multiplied them by a 0.875 "one notch under" factor (10.5/7/31.5). The
+	 * rationale was that an overflow menu should carry less weight than a picker, but the
+	 * result was just two menus that did not match. The numbers below are the midpoint, so
+	 * the picker came down slightly and the dropdown came up slightly to meet it.
+	 */
+	--menu-row-px: calc(0.75rem * var(--space-scale));
+	/*
+	 * A 14px label sits in a ~21px line box. At the old 0.5rem the row was 8 + 21 + 8 in a
+	 * 36px box — 16px of chrome around 21px of content, 43% of the row — which is a reading
+	 * menu, not a dense admin one.
+	 *
+	 * 4px, not 5: verify:token-budget holds every length to a 2px grid and 0.3125rem is off
+	 * it. 4 also lands the row on the 32px min-height exactly rather than a pixel over it.
+	 */
+	--menu-row-py: calc(0.25rem * var(--density-scale));
+	/*
+	 * A literal, like the three tokens around it, and deliberately NOT --height-action.
+	 *
+	 * It derived from the button height, which is a different decision that happened to
+	 * share a number: a row in a list is not a button, and the coupling meant any change to
+	 * button height silently retuned every menu, select, combobox and command palette in
+	 * the kit. Nothing said so, because 36px was right for both by coincidence.
+	 */
+	--menu-row-min-h: calc(2rem * var(--density-scale));
+
+	/*
+	 * The inset from a popup's edge to its first row. ONE value for every popup surface —
+	 * dropdown menu, action menu, popover menu, combobox, select, command palette.
+	 *
+	 * It was not one value before, and not because anyone chose four: each surface set its
+	 * own 4px and then NESTED. PopoverMenu is a Command inside a Popover, so the Command
+	 * root's 4px, the list's 4px, and the group's 4px stacked into a 12px inset beside a
+	 * dropdown menu's 4 — three times the padding for the same job, with nothing in any one
+	 * file to reveal it. The group padding is gone (it duplicated the root's) and the two
+	 * that remain resolve here, so the number cannot drift again.
+	 */
+	--menu-surface-p: calc(0.25rem * var(--space-scale));
+
+	--row-px: calc(var(--row-x) * var(--space-scale));
+	--row-py: calc(var(--row-y) * var(--density-scale));
+
+	/*
+	 * The TABLE's row geometry, which is not --row-py: a table cell pays 10px where a menu
+	 * row pays 8. It lives here rather than in table.module.css because TableSkeleton has to
+	 * reserve exactly this much, and a module's token does not exist on a page that loads
+	 * the skeleton's sheet and not the table's — the height falls back to auto, silently.
+	 *
+	 * A skeleton reserving a different height is the one bug that component exists to
+	 * prevent: it stood 36px against a 41px row, so a head and five rows jumped 47px when
+	 * the data landed.
+	 */
+	--table-cell-py: calc(0.625rem * var(--density-scale));
+	/* The head reads as chrome rather than data, so it is taller than a body row. */
+	--table-head-h: calc(3rem * var(--density-scale));
+
+	/*
+	 * Line height for component text at each size, in PIXELS rather than as a ratio.
+	 *
+	 * The scale's ratios (`calc(1 / 0.75)` and friends) are built to land on whole pixels
+	 * at their own size — but a component sets `font-size` and `line-height` separately, so
+	 * one that picks a 12px size while inheriting the 14px ratio gets 17.14px. Every box
+	 * built on that is fractional, and every circle centred inside it lands on a half
+	 * pixel and renders visibly soft.
+	 *
+	 * These are for a component that bounds its own height and centres something inside it:
+	 * a chip, a tag, a badge. Prose keeps the ratios, where a fractional line box is
+	 * invisible and unitless inheritance is the point.
+	 */
+	--leading-12: 1rem;
+
+	/*
+	 * The smallest a control may be to hit. WCAG 2.2 Target Size (Minimum) is 24x24 CSS
+	 * pixels; a control smaller than this expands its hit area with a pseudo-element rather
+	 * than growing, so the drawn glyph keeps the size the design needs.
+	 */
+	--hit-area-min: 1.5rem;
+
+}

package/dist/styles/theming/text.css

@@ -0,0 +1,47 @@
+/*
+ * RAW INPUTS — `:root` only. See styles/SCOPES.md for why derived tokens are the opposite.
+ *
+ * A literal restated at every scope boundary cannot be overridden from `:root`: the nearest
+ * declaring ancestor wins, and every provider, density and theme element is one. Measured
+ * rather than assumed — a `:root` override of these read back as the override at the root
+ * and as the kit's own value inside `[data-ui-scope]`. Declared once here, an override
+ * reaches every scope; setting one ON a scope still works, because the derived tokens
+ * below re-resolve at each boundary.
+ */
+:root {
+	--rich-text-list-indent: 1.5em;
+	--rich-text-quote-indent: 1em;
+}
+
+/*
+ * Text — component variable contract.
+ *
+ * The type scale itself lives in tokens/foundation.css; these are the semantic ROLES the
+ * Text primitive exposes, so a consumer can retune "secondary copy" without knowing which
+ * grey it resolves to.
+ */
+/*
+ * Declared at every scope boundary, not at `:root`. A custom property's var()
+ * references resolve where the property is DECLARED, so a single `:root` block
+ * freezes these at root values and scoped density/theming silently do nothing.
+ * See styles/SCOPES.md.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+		/* ── RichText ──────────────────────────────────────────────────────────────── */
+		/*
+		 * The role layer. A surface that inverts — the auth panel, a dark hero — overrides
+		 * these in its OWN scope, and every Text inside it follows without knowing why. That
+		 * indirection is the whole point: inline the default here and the override is dead.
+		 */
+		--text-role-main: var(--foreground);
+		--text-role-inverse: var(--background);
+		--text-role-secondary: var(--muted-foreground);
+		--text-role-discrete: var(--muted-foreground);
+		--rich-text-block-gap: calc(0.75em * var(--text-scale, var(--scale)));
+		--rich-text-item-gap: calc(0.25em * var(--text-scale, var(--scale)));
+}

package/dist/styles/theming/typography.css

@@ -0,0 +1,64 @@
+/*
+ * RAW INPUTS — `:root` only. See styles/SCOPES.md for why derived tokens are the opposite.
+ *
+ * A literal restated at every scope boundary cannot be overridden from `:root`: the nearest
+ * declaring ancestor wins, and every provider, density and theme element is one. Measured
+ * rather than assumed — a `:root` override of these read back as the override at the root
+ * and as the kit's own value inside `[data-ui-scope]`. Declared once here, an override
+ * reaches every scope; setting one ON a scope still works, because the derived tokens
+ * below re-resolve at each boundary.
+ */
+:root {
+	/* Weights — font-normal 15 uses, font-medium 90, font-semibold 35, font-bold 20 */
+	--weight-normal: 400;
+	--weight-medium: 500;
+	--weight-semibold: 600;
+	--weight-bold: 700;
+
+	/* Leading — unitless so it scales with the element's own font-size */
+	--leading-none: 1;
+	--leading-tight: 1.25;
+	--leading-snug: 1.375;
+	--leading-normal: 1.5;
+	--leading-relaxed: 1.625;
+
+	--tracking-widest: 0.1em;
+}
+
+/*
+ * Typography — the global type wiring layer.
+ *
+ * The size ramp itself (--text-xxs … --text-9xl and its paired --text-*--line-height)
+ * is a raw contract token and lives in styles/tokens/foundation.css. This file adds the
+ * weight, leading, and tracking scales that Tailwind supplied as utility defaults and
+ * that therefore had no definition anywhere in the source kit.
+ *
+ * Values match Tailwind v4's defaults exactly, so ported components render identically.
+ */
+/*
+ * Declared at every scope boundary, not at `:root`. A custom property's var()
+ * references resolve where the property is DECLARED, so a single `:root` block
+ * freezes these at root values and scoped density/theming silently do nothing.
+ * See styles/SCOPES.md.
+ */
+:root,
+[data-ui-scope],
+[data-density],
+[data-theme],
+.light,
+.dark {
+		/* Heading roles — the display side of the type scale. */
+
+		/* A label identifying a value or a group of controls. One fixed style everywhere. */
+
+		/*
+		 * The role layer for headings, labels and links. Overridable per surface — see the
+		 * note on --text-role-* in text.css; the auth panel re-points all of these.
+		 */
+		/* Heading roles — the display side of the type scale. */
+		--heading-fg: var(--foreground);
+		--heading-sub-fg: var(--muted-foreground);
+		/* A label identifying a value or a group of controls. One fixed style everywhere. */
+		--display-label-fg: var(--foreground);
+		--link-fg: var(--link-color);
+}

package/dist/styles/tokens/components.css

@@ -0,0 +1,24 @@
+/*
+ * Component-level token knobs.
+ *
+ * Use this layer for package-owned row, surface, and component adjustments
+ * that are intentionally broader than one component but not part of shadcn.
+ */
+
+:root {
+	/* Rows */
+	--row-x: 0.75rem; /* Shared inline inset for list, menu, command, and table rows. */
+	--row-y: 0.5rem; /* Default vertical row inset with an 8px breathing floor. */
+
+	/* Surface base measurements. Utilities apply --space-scale at use time.
+	 * The xs inset is the 0.5rem collection-shell contract for action menus,
+	 * option lists, selects, and equivalent item popovers. */
+	--surface-x: 1rem; /* Default inline inset for cards and multi-content surfaces. */
+	--surface-y: 1rem; /* Default block inset for cards and multi-content surfaces. */
+
+	/* Data visualization canvas */
+
+	/* Modal scrim */
+	--overlay-backdrop: oklch(0 0 0 / 0.5); /* Shared tint behind dialog, alert dialog, sheet, and drawer surfaces. */
+
+}