themelia-react-ui 1.0.1 → 2.0.0

package/dist/theme.css

@@ -57,37 +57,39 @@
 
 :root {
 	/* Radius is shared geometry, not a light-palette reset. Mode scopes inherit it. */
-	--radius: 1rem; /* Default corners throughout the package; opt-in nested corners derive from this root. */
+	--radius: 0.75rem; /* Shared 12px outer corners; inner control/row corners derive from this root and stay rectangular. */
 }
 
 :root,
 .light {
-	--background: oklch(1 0 0); /* Application canvas and default page background. */
+	color-scheme: light; /* Native scrollbars, form controls and pickers follow the active mode. */
+	--background: oklch(0.985 0 0); /* Application canvas and default page background. */
 	--foreground: oklch(0.28 0 0); /* Primary text and icon color on the application canvas. */
 	--card: oklch(1 0 0); /* Card and framed content-surface background. */
 	--card-foreground: oklch(0.28 0 0); /* Primary text and icons on card surfaces. */
-	--popover: var(--background); /* Popover, menu, select, and transient-surface background. */
+	--popover: var(--card); /* Popover, menu, select, and transient-surface background. */
 	--popover-foreground: var(--foreground); /* Primary text and icons on popover surfaces. */
-	--primary: oklch(0.45 0.124 167.35); /* Brand and primary-action color. */
+	--primary: oklch(0.205 0 0); /* Primary-action color: near-black by default so status colors never compete with it; a brand stylesheet such as themes/green.css replaces it. */
 	--primary-foreground: oklch(0.985 0 0); /* Text and icons on solid primary fills. */
-	--secondary: oklch(0.97 0 0); /* Neutral secondary-control and supporting-surface fill. */
+	--secondary: oklch(0.94 0 0); /* Neutral secondary-control and supporting-surface fill. */
 	--secondary-foreground: oklch(0.205 0 0); /* Text and icons on secondary fills. */
-	--muted: oklch(0.97 0 0); /* Subdued backgrounds for passive regions and skeletons. */
+	--muted: oklch(0.96 0 0); /* Subdued backgrounds for passive regions and skeletons. */
 	--muted-foreground: oklch(0.50 0 0); /* Secondary text, metadata, and passive icons. */
-	--accent: oklch(0.97 0 0); /* Hover, selected-row, and emphasized neutral fill. */
+	--accent: oklch(0.945 0 0); /* Hover, selected-row, and emphasized neutral fill. */
 	--accent-foreground: oklch(0.205 0 0); /* Text and icons on accent fills. */
-	--destructive: oklch(0.50 0.245 27.325); /* Destructive action, error, and invalid-state color. */
+	--destructive: oklch(0.50 0.2039 27.325); /* Destructive action, error, and invalid-state color. */
 	--destructive-foreground: oklch(0.99 0 0); /* Text and icons on solid destructive fills. */
 	--border: oklch(0.922 0 0); /* Default divider, outline, and surface-border color. */
-	--input: oklch(0.922 0 0); /* Default form-control border color. */
-	--ring: oklch(0.708 0 0); /* Focus-visible ring and outline color. */
+	--input: oklch(0.62 0 0); /* Form-control boundary: inputs, selects, checkbox, radio and switch tracks. Keeps 3:1 against every surface (WCAG 1.4.11); dividers use --border. */
+	--ring: oklch(0.60 0 0); /* Focus-visible ring and outline color. */
 	/*
 	 * Categorical chart series. Hues are held identical in light and dark so a
 	 * series keeps its identity when the theme flips; only lightness moves, to
-	 * suit the surface it is drawn on. Hues sit clear of the status hues
-	 * (destructive 27, warning 90, success 145) so a series never reads as a
-	 * state. Chroma is kept inside sRGB, so the authored value is what renders
-	 * rather than something the browser clamps.
+	 * suit the surface it is drawn on. Hues are offset from the status hues
+	 * (destructive 27, warning 75, success 145); series 1 and 5 sit nearest
+	 * (22° from success, 15° from warning), so charts that encode state use the
+	 * status tokens, never series colors. Chroma is kept inside sRGB, so the
+	 * authored value is what renders rather than something the browser clamps.
 	 */
 	--chart-1: oklch(0.56 0.11 167); /* First categorical chart-series color; never a status color. */
 	--chart-2: oklch(0.56 0.11 230); /* Second categorical chart-series color; never a status color. */
@@ -101,7 +103,7 @@
 	--sidebar-accent: oklch(0.98 0 0 / 1); /* Sidebar hover and selected-row neutral fill. */
 	--sidebar-accent-foreground: oklch(0.205 0 0); /* Text and icons on sidebar accent fills. */
 	--sidebar-border: oklch(0.922 0 0); /* Sidebar dividers and shell border. */
-	--sidebar-ring: oklch(0.708 0 0); /* Focus-visible ring inside the sidebar. */
+	--sidebar-ring: oklch(0.60 0 0); /* Focus-visible ring inside the sidebar. */
 	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05); /* Minimal elevation for compact controls. */
 	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05); /* Extra-small elevation for controls and rows. */
 	--shadow-sm: 0 1px 2px 0px oklch(0 0 0 / 0.06), 0 3px 8px -3px oklch(0 0 0 / 0.08); /* Small elevation for raised controls and cards. */
@@ -113,38 +115,39 @@
 }
 
 .dark {
-	--background: oklch(0.28 0 0);
+	color-scheme: dark;
+	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: var(--background);
+	--popover: oklch(0.235 0 0);
 	--popover-foreground: var(--foreground);
-	--primary: oklch(0.70 0.13 167.35); /* Lightened for readable brand text and controls on dark surfaces. */
-	--primary-foreground: oklch(0.18 0.03 167.35); /* Dark ink on the lightened dark-theme primary fill. */
+	--primary: oklch(0.922 0 0); /* Near-white primary fill and ink on dark surfaces. */
+	--primary-foreground: oklch(0.205 0 0); /* Dark ink on the near-white dark-theme primary fill. */
 	--secondary: oklch(0.269 0 0);
 	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
+	--muted: oklch(0.175 0 0);
 	--muted-foreground: oklch(0.74 0 0); /* Secondary copy stays readable on muted and accent surfaces. */
 	--accent: oklch(0.36 0 0);
 	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
+	--destructive: oklch(0.704 0.1876 22.216);
 	--destructive-foreground: oklch(0.18 0.05 22);
 	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
+	--input: oklch(1 0 0 / 40%);
+	--ring: oklch(0.65 0 0);
 	--chart-1: oklch(0.74 0.13 167);
 	--chart-2: oklch(0.72 0.14 230);
 	--chart-3: oklch(0.72 0.15 285);
 	--chart-4: oklch(0.74 0.15 330);
 	--chart-5: oklch(0.78 0.14 60);
-	--sidebar: oklch(0.205 0 0);
+	--sidebar: oklch(0.175 0 0);
 	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-primary: var(--primary);
+	--sidebar-primary-foreground: var(--primary-foreground);
 	--sidebar-accent: oklch(0.28 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
+	--sidebar-ring: oklch(0.65 0 0);
 	--shadow-2xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
 	--shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.05);
 	--shadow-sm: 0 1px 2px 0px oklch(0 0 0 / 0.18), 0 3px 8px -3px oklch(0 0 0 / 0.22);
@@ -212,6 +215,7 @@
 	--spacing-space-lg: calc(0.75rem * var(--space-scale));
 	--spacing-space-xl: calc(1rem * var(--space-scale));
 	--spacing-space-2xl: calc(1.5rem * var(--space-scale));
+	--spacing-space-3xl: calc(2rem * var(--space-scale)); /* Page-level rhythm between a page header and its body or between major sections. */
 }
 
 :root {
@@ -226,8 +230,8 @@
 	--density-scale: 1; /* Multiplies controls, actions, rows, and other density-sensitive geometry. */
 
 	/* Shared copy gaps: normal surfaces and dense rows/collections. */
-	--gap-normal: 0.5rem; /* Vertical rhythm between titles and structural descriptions. */
-	--gap-dense: 0.25rem; /* Vertical rhythm between row titles and compact supporting copy. */
+	--gap-normal: 0.25rem; /* Vertical rhythm between titles and structural descriptions. */
+	--gap-dense: 0.125rem; /* Vertical rhythm between row titles and compact supporting copy. */
 
 	/* Typography scale.
 	 * Override individual --text-* tokens for precise theme sizing. Line-height
@@ -308,15 +312,15 @@
 
 :root,
 .light {
-	--success: oklch(0.4 0.16 145); /* Semantic success fill, border, and foreground accent. */
+	--success: oklch(0.4 0.1257 145); /* Semantic success fill, border, and foreground accent. */
 	--success-foreground: oklch(0.985 0 0); /* Text and icons on solid success fills. */
 	--info: oklch(0.45 0.214 276.966); /* Semantic informational fill, border, and foreground accent. */
 	--info-foreground: oklch(0.99 0 0); /* Text and icons on solid informational fills. */
 	--link-color: oklch(0.462 0.1776 259.13); /* Inline links and link-like copyable values. */
-	--primary-accent: oklch(0.45 0.124 167.35); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Matches --primary in light and provides a dedicated foreground accent in dark. Primary fills and their paired foreground remain owned by the shadcn theme. Distinct from --accent, the muted hover surface. */
-	--warning: oklch(0.78 0.13 75); /* Semantic warning fill, border, and foreground accent. */
+	--primary-accent: var(--primary); /* Brand color drawn AS foreground — icons, spinners, active marks — on the app surface. Follows --primary, so a rebrand needs one root; a brand theme may set a dedicated dark foreground accent. Primary fills and their paired foreground remain owned by the shadcn theme. Distinct from --accent, the muted hover surface. */
+	--warning: oklch(0.78 0.13 75); /* Semantic warning fill and decorative highlight; use warning-accent for ink on ordinary surfaces. */
 	--warning-foreground: oklch(0.28 0.035 60); /* Text and icons on solid warning fills. */
-	--warning-accent: oklch(0.54 0.11 65); /* Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber. */
+	--warning-accent: oklch(0.53 0.11 65); /* Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber. */
 	--inverse-background: oklch(0.28 0 0); /* Base background for explicit dark or artwork-backed surfaces. */
 	--inverse-foreground: oklch(0.985 0 0); /* Primary text and icons on inverse backgrounds. */
 	--inverse-muted: oklch(0.985 0 0 / 0.74); /* Secondary text on inverse backgrounds. */
@@ -334,7 +338,7 @@
 	--info: oklch(0.72 0.14 250);
 	--info-foreground: oklch(0.18 0.05 250);
 	--link-color: oklch(0.72 0.12 259.13);
-	--primary-accent: oklch(0.72 0.124 167.35);
+	--primary-accent: var(--primary);
 	--warning: oklch(0.81 0.12 75);
 	--warning-foreground: oklch(0.28 0.035 60);
 	--warning-accent: oklch(0.81 0.12 75);
@@ -356,60 +360,22 @@
  * compact canonical override surface. Radius utilities read shadcn directly.
  */
 @theme inline {
-	/*
-	 * RADIUS SCALE — xs 0.4×, sm 0.6×, md 0.8×, base 1×, lg 1.4×, xl 1.8×, all derived
-	 * from `--radius` so one consumer override moves the whole family.
-	 *
-	 * `rounded-full` is deliberately NOT a tier and must not be abstracted into
-	 * one. A pill is a *shape*, not a size: its radius is always half the box's
-	 * shorter side, so it has no fixed value to theme and gains nothing from a
-	 * token. Write `rounded-full` directly, and expect to see it on:
-	 *
-	 *   - status dots and presence indicators
-	 *   - avatars and initials circles
-	 *	 *   - scrollbar tracks and thumbs
-	 *   - icon-only buttons intended to read as circular
-	 *
-	 * The tell is that the element should stay a pill at ANY size or theme. If
-	 * a shape would look wrong when the box grows — a card, a dialog, an input,
-	 * a chat bubble — it belongs on the scale above, not on `rounded-full`.
-	 *
-	 * `rounded-none` is likewise a reset, not a tier: use it to square a corner
-	 * where a child meets its container's edge.
-	 */
-
-	/*
-	 * Small-control tier for checkboxes, radios, and swatches, whose boxes are
-	 * too small for the base radius to read as anything but a squircle. It
-	 * exists so those controls stay on the radius family instead of pinning a
-	 * literal `rounded-[4px]`, which no consumer theme could reach. Derived
-	 * rather than mapped — shadcn has no tier below `--radius-sm`.
+	/* One public radius root, two shared roles: outer shells use rounded-radius;
+	 * controls, collection rows and nested bodies use rounded-inner. The bound
+	 * preserves short controls under large roots and independent height settings.
+	 * Circular shapes and joined-edge resets retain their explicit mechanics.
 	 */
 	--radius-radius-xs: calc(var(--radius) * 0.4);
 	--radius-radius-sm: var(--radius-sm);
-	/*
-	 * The intermediate 0.8× step. Without a package
-	 * name for it, that tier lived only in Tailwind's own radius scale, so a
-	 * consumer retheming the package family silently missed every control using
-	 * it. Same computed value, now reachable from one vocabulary.
-	 */
 	--radius-radius-md: var(--radius-md);
-	/* Default corners throughout the package; inner corners are an opt-in nested shape. */
 	--radius-radius: var(--radius);
-	--radius-inner: calc(var(--radius) * 0.6);
+	--radius-inner: min(calc(var(--radius) * 0.75), calc(min(var(--height-action), var(--height-control)) * var(--density-scale) / 4));
 	--radius-radius-lg: var(--radius-xl);
-	/*
-	 * Conversational tier. Chat bubbles read as speech rather than as surfaces,
-	 * so they sit a step above the `radius-lg` used for cards and dialogs. It
-	 * exists because that shape was previously written as `rounded-2xl`, which
-	 * lived only in Tailwind's scale — a consumer retheming the package radius
-	 * family moved every card and left the bubbles behind.
-	 */
 	--radius-radius-xl: var(--radius-2xl);
 
 	/* Generated geometry aliases:start */
-	--spacing-action-xs: calc(var(--height-action) * 0.7777778 * var(--density-scale));
-	--spacing-action-sm: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	--spacing-action-xs: calc(var(--height-action) * 7 / 9 * var(--density-scale));
+	--spacing-action-sm: calc(var(--height-action) * 8 / 9 * var(--density-scale));
 	--spacing-action: calc(var(--height-action) * var(--density-scale));
 	--spacing-action-lg: calc(var(--height-action) * 10 / 9 * var(--density-scale));
 	--spacing-control-gap-small: calc(0.375rem * var(--space-scale));
@@ -417,29 +383,29 @@
 	--spacing-control-px: calc(var(--control-x) * var(--space-scale));
 	--spacing-control-px-xs: calc(var(--control-x) * 0.5 * var(--space-scale));
 	--spacing-control-y-offset: calc(0.25rem * var(--space-scale));
-	--spacing-control-icon-sm: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
-	--spacing-control-icon: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
-	--spacing-control-addon-sm: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
-	--spacing-control-addon: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
-	--spacing-control-count-sm: calc((var(--control-x) * 0.8333333 + 2.25rem) * var(--space-scale));
-	--spacing-control-count: calc((var(--control-x) + 2.5rem) * var(--space-scale));
+	--spacing-control-icon-sm: calc((var(--control-x) * 0.8333333 + 0.375rem) * var(--space-scale) + var(--icon) * 0.75);
+	--spacing-control-icon: calc((var(--control-x) + 0.5rem) * var(--space-scale) + var(--icon));
+	--spacing-control-addon-sm: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 1.25rem + 0.375rem * var(--space-scale));
+	--spacing-control-addon: calc(var(--control-x) * var(--space-scale) + 1.5rem + 0.375rem * var(--space-scale));
+	--spacing-control-count-sm: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 2.25rem);
+	--spacing-control-count: calc(var(--control-x) * var(--space-scale) + 2.5rem);
 	--spacing-control-actions-sm: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
 	--spacing-control-actions: calc(var(--control-x) * var(--space-scale) + 2.75rem * var(--density-scale) + 0.25rem * var(--space-scale));
 	--spacing-control-clear: calc(1.375rem * var(--density-scale));
-	--spacing-control-clear-icon: calc(var(--icon) * 0.75 * var(--space-scale));
+	--spacing-control-clear-icon: calc(var(--icon) * 0.75);
 	--spacing-control-file: calc(1.75rem * var(--density-scale));
 	--spacing-textarea-sm: calc(4rem * var(--density-scale));
 	--spacing-textarea: calc(5rem * var(--density-scale));
-	--spacing-icon-sm: calc(var(--icon) * 0.75 * var(--space-scale));
-	--spacing-icon-md: calc(var(--icon) * 0.875 * var(--space-scale));
-	--spacing-icon: calc(var(--icon) * var(--space-scale));
-	--spacing-icon-lg: calc(var(--icon) * 1.25 * var(--space-scale));
-	--spacing-avatar-sm: calc(var(--avatar) * 0.75 * var(--space-scale));
-	--spacing-avatar: calc(var(--avatar) * var(--space-scale));
-	--spacing-avatar-lg: calc(var(--avatar) * 1.25 * var(--space-scale));
-	--spacing-upload-avatar-small: calc(var(--avatar) * 2 * var(--space-scale));
-	--spacing-upload-avatar: calc(var(--avatar) * 2.5 * var(--space-scale));
-	--spacing-upload-avatar-large: calc(var(--avatar) * 3 * var(--space-scale));
+	--spacing-icon-sm: calc(var(--icon) * 0.75);
+	--spacing-icon-md: calc(var(--icon) * 0.875);
+	--spacing-icon: calc(var(--icon));
+	--spacing-icon-lg: calc(var(--icon) * 1.25);
+	--spacing-avatar-sm: calc(var(--avatar) * 0.75);
+	--spacing-avatar: calc(var(--avatar));
+	--spacing-avatar-lg: calc(var(--avatar) * 1.25);
+	--spacing-upload-avatar-small: calc(var(--avatar) * 2);
+	--spacing-upload-avatar: calc(var(--avatar) * 2.5);
+	--spacing-upload-avatar-large: calc(var(--avatar) * 3);
 	/* Generated geometry aliases:end */
 }
 
@@ -455,29 +421,29 @@
 
 /* Generated geometry utilities:start */
 @utility h-action-xs {
-	height: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+	height: calc(var(--height-action) * 7 / 9 * var(--density-scale));
 }
 
 @utility size-action-xs {
-	width: calc(var(--height-action) * 0.7777778 * var(--density-scale));
-	height: calc(var(--height-action) * 0.7777778 * var(--density-scale));
+	width: calc(var(--height-action) * 7 / 9 * var(--density-scale));
+	height: calc(var(--height-action) * 7 / 9 * var(--density-scale));
 }
 
 @utility top-action-xs-center {
-	top: calc(var(--height-action) * 0.7777778 * var(--density-scale) / 2);
+	top: calc(var(--height-action) * 7 / 9 * var(--density-scale) / 2);
 }
 
 @utility h-action-sm {
-	height: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	height: calc(var(--height-action) * 8 / 9 * var(--density-scale));
 }
 
 @utility size-action-sm {
-	width: calc(var(--height-action) * 0.8888889 * var(--density-scale));
-	height: calc(var(--height-action) * 0.8888889 * var(--density-scale));
+	width: calc(var(--height-action) * 8 / 9 * var(--density-scale));
+	height: calc(var(--height-action) * 8 / 9 * var(--density-scale));
 }
 
 @utility top-action-sm-center {
-	top: calc(var(--height-action) * 0.8888889 * var(--density-scale) / 2);
+	top: calc(var(--height-action) * 8 / 9 * var(--density-scale) / 2);
 }
 
 @utility h-action {
@@ -507,20 +473,20 @@
 }
 
 @utility h-control-sm {
-	height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+	height: calc(var(--height-control) * 8 / 9 * var(--density-scale));
 }
 
 @utility min-h-control-sm {
-	min-height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+	min-height: calc(var(--height-control) * 8 / 9 * var(--density-scale));
 }
 
 @utility w-control-sm {
-	width: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+	width: calc(var(--height-control) * 8 / 9 * var(--density-scale));
 }
 
 @utility size-control-sm {
-	width: calc(var(--height-control) * 0.8888889 * var(--density-scale));
-	height: calc(var(--height-control) * 0.8888889 * var(--density-scale));
+	width: calc(var(--height-control) * 8 / 9 * var(--density-scale));
+	height: calc(var(--height-control) * 8 / 9 * var(--density-scale));
 }
 
 @utility h-control {
@@ -594,43 +560,43 @@
 }
 
 @utility ps-control-icon-sm {
-	padding-inline-start: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
+	padding-inline-start: calc((var(--control-x) * 0.8333333 + 0.375rem) * var(--space-scale) + var(--icon) * 0.75);
 }
 
 @utility pe-control-icon-sm {
-	padding-inline-end: calc((var(--control-x) * 0.8333333 + var(--icon) * 0.75 + 0.375rem) * var(--space-scale));
+	padding-inline-end: calc((var(--control-x) * 0.8333333 + 0.375rem) * var(--space-scale) + var(--icon) * 0.75);
 }
 
 @utility ps-control-icon {
-	padding-inline-start: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
+	padding-inline-start: calc((var(--control-x) + 0.5rem) * var(--space-scale) + var(--icon));
 }
 
 @utility pe-control-icon {
-	padding-inline-end: calc((var(--control-x) + var(--icon) + 0.5rem) * var(--space-scale));
+	padding-inline-end: calc((var(--control-x) + 0.5rem) * var(--space-scale) + var(--icon));
 }
 
 @utility ps-control-addon-sm {
-	padding-inline-start: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
+	padding-inline-start: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 1.25rem + 0.375rem * var(--space-scale));
 }
 
 @utility pe-control-addon-sm {
-	padding-inline-end: calc((var(--control-x) * 0.8333333 + 1.25rem + 0.375rem) * var(--space-scale));
+	padding-inline-end: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 1.25rem + 0.375rem * var(--space-scale));
 }
 
 @utility ps-control-addon {
-	padding-inline-start: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
+	padding-inline-start: calc(var(--control-x) * var(--space-scale) + 1.5rem + 0.375rem * var(--space-scale));
 }
 
 @utility pe-control-addon {
-	padding-inline-end: calc((var(--control-x) + 1.5rem + 0.375rem) * var(--space-scale));
+	padding-inline-end: calc(var(--control-x) * var(--space-scale) + 1.5rem + 0.375rem * var(--space-scale));
 }
 
 @utility pe-control-count-sm {
-	padding-inline-end: calc((var(--control-x) * 0.8333333 + 2.25rem) * var(--space-scale));
+	padding-inline-end: calc(var(--control-x) * 0.8333333 * var(--space-scale) + 2.25rem);
 }
 
 @utility pe-control-count {
-	padding-inline-end: calc((var(--control-x) + 2.5rem) * var(--space-scale));
+	padding-inline-end: calc(var(--control-x) * var(--space-scale) + 2.5rem);
 }
 
 @utility pe-control-actions-sm {
@@ -647,8 +613,8 @@
 }
 
 @utility size-control-clear-icon {
-	width: calc(var(--icon) * 0.75 * var(--space-scale));
-	height: calc(var(--icon) * 0.75 * var(--space-scale));
+	width: calc(var(--icon) * 0.75);
+	height: calc(var(--icon) * 0.75);
 }
 
 @utility h-control-file {
@@ -737,10 +703,10 @@
 	--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,
+	 * The xs inset is half the surface root 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. */
+	--surface-x: 1.25rem; /* Default inline inset for cards and multi-content surfaces. */
+	--surface-y: 1.25rem; /* Default block inset for cards and multi-content surfaces. */
 
 	/* Data visualization canvas */
 	--chart-min-height: 13.75rem; /* Minimum readable canvas height for package chart frames. */

package/dist/themes/green.css

@@ -0,0 +1,24 @@
+/*
+ * Themelia green — an opt-in brand theme.
+ *
+ * Import after the package stylesheet:
+ *   import 'themelia-react-ui/style.css';
+ *   import 'themelia-react-ui/themes/green.css';
+ *
+ * It replaces only the brand roles. The green sits about 22° of hue from the
+ * success color, so pair it with labels or icons wherever state matters.
+ * Both blocks are needed: a later :root rule alone would also win in dark mode.
+ */
+:root,
+.light {
+	--primary: oklch(0.45 0.09 167.35); /* Green primary-action fill and brand ink. */
+	--primary-foreground: oklch(0.985 0 0); /* Text and icons on the green fill. */
+	--chart-1: oklch(0.56 0.11 167); /* The first chart series follows the brand. */
+}
+
+.dark {
+	--primary: oklch(0.70 0.13 167.35); /* Lightened for readable brand text and controls on dark surfaces. */
+	--primary-foreground: oklch(0.18 0.03 167.35); /* Dark ink on the lightened primary fill. */
+	--primary-accent: oklch(0.72 0.124 167.35); /* Brand foreground accent on dark surfaces. */
+	--chart-1: oklch(0.74 0.13 167);
+}