@timmo001/groundwork-tokens 0.5.0 → 0.7.0

package/generated/themes.css

@@ -2,6 +2,7 @@
 
 :root {
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -67,7 +68,7 @@ gw-button:not(:defined),
 gw-menu-button:not(:defined),
 gw-segmented:not(:defined) {
   display: inline-block;
-  min-block-size: 2.5rem;
+  min-block-size: calc(2.5rem * var(--gw-control-scale, 1));
   vertical-align: middle;
 }
 
@@ -75,30 +76,46 @@ gw-button:not(:defined) {
   padding-inline: calc(var(--gw-space-4) + 1px);
   font-size: var(--gw-font-size-s);
   font-weight: var(--gw-font-weight-strong);
-  line-height: 2.5rem;
+  line-height: calc(2.5rem * var(--gw-control-scale, 1));
   white-space: nowrap;
   text-transform: var(--gw-label-transform);
   letter-spacing: var(--gw-label-tracking);
 }
 
 gw-button[size="xs"]:not(:defined) {
-  min-block-size: 1.5rem;
-  line-height: 1.5rem;
+  min-block-size: calc(1.5rem * var(--gw-control-scale, 1));
+  line-height: calc(1.5rem * var(--gw-control-scale, 1));
 }
 
 gw-button[size="small"]:not(:defined) {
-  min-block-size: 2rem;
-  line-height: 2rem;
+  min-block-size: calc(2rem * var(--gw-control-scale, 1));
+  line-height: calc(2rem * var(--gw-control-scale, 1));
 }
 
 gw-button[size="large"]:not(:defined) {
-  min-block-size: 3rem;
-  line-height: 3rem;
+  min-block-size: calc(3rem * var(--gw-control-scale, 1));
+  line-height: calc(3rem * var(--gw-control-scale, 1));
 }
 
 gw-button[size="xl"]:not(:defined) {
-  min-block-size: 3.5rem;
-  line-height: 3.5rem;
+  min-block-size: calc(3.5rem * var(--gw-control-scale, 1));
+  line-height: calc(3.5rem * var(--gw-control-scale, 1));
+}
+
+gw-menu-button[size="xs"]:not(:defined) {
+  min-block-size: calc(1.5rem * var(--gw-control-scale, 1));
+}
+
+gw-menu-button[size="small"]:not(:defined) {
+  min-block-size: calc(2rem * var(--gw-control-scale, 1));
+}
+
+gw-menu-button[size="large"]:not(:defined) {
+  min-block-size: calc(3rem * var(--gw-control-scale, 1));
+}
+
+gw-menu-button[size="xl"]:not(:defined) {
+  min-block-size: calc(3.5rem * var(--gw-control-scale, 1));
 }
 
 gw-card:not(:defined) {
@@ -168,16 +185,44 @@ gw-button:not(:defined) > [slot="icon"] {
 
 gw-chip:not(:defined) {
   display: inline-flex;
-  min-block-size: 2rem;
+  min-block-size: calc(2rem * var(--gw-control-scale, 1));
+}
+
+gw-chip[size="xs"]:not(:defined) {
+  min-block-size: calc(1.2rem * var(--gw-control-scale, 1));
+}
+
+gw-chip[size="small"]:not(:defined) {
+  min-block-size: calc(1.6rem * var(--gw-control-scale, 1));
+}
+
+gw-chip[size="large"]:not(:defined) {
+  min-block-size: calc(2.4rem * var(--gw-control-scale, 1));
+}
+
+gw-chip[size="xl"]:not(:defined) {
+  min-block-size: calc(2.8rem * var(--gw-control-scale, 1));
 }
 
 gw-badge:not(:defined) {
   display: inline-flex;
-  min-block-size: 2.25rem;
+  min-block-size: calc(2.25rem * var(--gw-control-scale, 1));
+}
+
+gw-badge[size="xs"]:not(:defined) {
+  min-block-size: calc(1.35rem * var(--gw-control-scale, 1));
 }
 
 gw-badge[size="small"]:not(:defined) {
-  min-block-size: 1.75rem;
+  min-block-size: calc(1.8rem * var(--gw-control-scale, 1));
+}
+
+gw-badge[size="large"]:not(:defined) {
+  min-block-size: calc(2.7rem * var(--gw-control-scale, 1));
+}
+
+gw-badge[size="xl"]:not(:defined) {
+  min-block-size: calc(3.15rem * var(--gw-control-scale, 1));
 }
 
 gw-dot:not(:defined) {
@@ -211,19 +256,19 @@ gw-skeleton-icon:not(:defined) {
 gw-input:not(:defined),
 gw-select:not(:defined) {
   display: flex;
-  min-block-size: 4.5rem;
+  min-block-size: calc(2rem + calc(2.5rem * var(--gw-control-scale, 1)));
 }
 
 gw-input:is([hint]:not(:defined),
 [error]):not(:defined),
 gw-select:is([hint]:not(:defined),
 [error]):not(:defined) {
-  min-block-size: 6.25rem;
+  min-block-size: calc(3.75rem + calc(2.5rem * var(--gw-control-scale, 1)));
 }
 
 gw-select:is([label-hidden]:not(:defined),
 [inline-label]):not(:defined) {
-  min-block-size: 2.5rem;
+  min-block-size: calc(2.5rem * var(--gw-control-scale, 1));
 }
 
 gw-select[inline-label]:not(:defined) {
@@ -270,6 +315,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -524,6 +570,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1.2;
+  --gw-control-scale: 1.1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -778,6 +825,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 500;
   --gw-font-weight-strong: 700;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -1032,6 +1080,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -1286,6 +1335,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -1540,6 +1590,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 0.85;
+  --gw-control-scale: 0.85;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -1794,6 +1845,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -1994,6 +2046,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2090,6 +2143,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2290,6 +2344,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2490,6 +2545,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2690,6 +2746,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2786,6 +2843,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));
@@ -2986,6 +3044,7 @@ gw-option-list:not(:defined) {
   --gw-font-weight-regular: 400;
   --gw-font-weight-strong: 600;
   --gw-density: 1;
+  --gw-control-scale: 1;
   --gw-space-0-5: calc(0.125rem * var(--gw-density));
   --gw-space-1: calc(0.25rem * var(--gw-density));
   --gw-space-2: calc(0.5rem * var(--gw-density));

package/generated/themes.json

@@ -39,6 +39,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -258,6 +259,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1.2",
+        "control-scale": "1.1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -477,6 +479,7 @@
         "font-weight-regular": "500",
         "font-weight-strong": "700",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -696,6 +699,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -917,6 +921,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1138,6 +1143,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "0.85",
+        "control-scale": "0.85",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1357,6 +1363,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1529,6 +1536,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1654,6 +1662,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1826,6 +1835,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1998,6 +2008,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2170,6 +2181,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2295,6 +2307,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2467,6 +2480,7 @@
         "font-weight-regular": "400",
         "font-weight-strong": "600",
         "density": "1",
+        "control-scale": "1",
         "space-0-5": "calc(0.125rem * var(--gw-density))",
         "space-1": "calc(0.25rem * var(--gw-density))",
         "space-2": "calc(0.5rem * var(--gw-density))",

package/generated/themes.ts

@@ -40,6 +40,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -259,6 +260,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1.2",
+      "control-scale": "1.1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -478,6 +480,7 @@ export const themes = [
       "font-weight-regular": "500",
       "font-weight-strong": "700",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -697,6 +700,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -918,6 +922,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1139,6 +1144,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "0.85",
+      "control-scale": "0.85",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1358,6 +1364,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1530,6 +1537,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1655,6 +1663,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1827,6 +1836,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -1999,6 +2009,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2171,6 +2182,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2296,6 +2308,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",
@@ -2468,6 +2481,7 @@ export const themes = [
       "font-weight-regular": "400",
       "font-weight-strong": "600",
       "density": "1",
+      "control-scale": "1",
       "space-0-5": "calc(0.125rem * var(--gw-density))",
       "space-1": "calc(0.25rem * var(--gw-density))",
       "space-2": "calc(0.5rem * var(--gw-density))",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-tokens",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Groundwork's design tokens: the theme schema, the OKLCH solver and every theme as CSS and JSON",
   "license": "Apache-2.0",
   "type": "module",
@@ -11,7 +11,8 @@
     "./webmcp": "./src/webmcp.ts",
     "./opentui": "./generated/opentui.ts",
     "./themes.css": "./generated/themes.css",
-    "./themes.json": "./generated/themes.json"
+    "./themes.json": "./generated/themes.json",
+    "./themes/*.json": "./themes/*.json"
   },
   "files": [
     "src",

package/src/generate.ts

@@ -32,6 +32,9 @@ const fontStack = (font: Font | MonoFont) => {
 
 const density = { compact: 0.85, normal: 1, roomy: 1.2 } as const;
 
+/** How much controls grow or shrink with density, less than spacing does. */
+const controlScale = { compact: 0.85, normal: 1, roomy: 1.1 } as const;
+
 const borderColor = {
   none: "transparent",
   hairline: "var(--gw-color-border-quiet)",
@@ -47,6 +50,7 @@ const styleProperties = (style: Style) => ({
   "font-weight-regular": String(style.weights.regular),
   "font-weight-strong": String(style.weights.strong),
   density: String(density[style.density]),
+  "control-scale": String(controlScale[style.density]),
   ...spacing,
   "radius-panel": `${style.radius.panel}px`,
   "radius-control": `${style.radius.control}px`,
@@ -103,6 +107,7 @@ const spacing = {
 
 const foundations = {
   density: "1",
+  "control-scale": "1",
   ...spacing,
   "font-size-multiplier": "1",
   "font-size-2xs": "calc(0.6875rem * var(--gw-font-size-multiplier))",
@@ -151,40 +156,74 @@ const modeBlock = (roles: Roles, dark: boolean, indent = "  ") =>
     declarations({ ...colorProperties(roles), ...shadows(dark) }, indent),
   ].join("\n");
 
-/** One theme's `--gw-*` rules under `[data-gw-theme]`, in each of its modes. */
-export const themeCss = (theme: ResolvedTheme) => {
+/**
+ * A rule under `theme`'s selector for each of its modes, matching how
+ * `data-gw-mode` and the system's scheme pick one. `block` writes a mode's
+ * declarations at the indent it's given.
+ */
+export const modeRules = (
+  theme: ResolvedTheme,
+  block: (roles: Roles, dark: boolean, indent: string) => string,
+) => {
   const selector = `[data-gw-theme="${theme.id}"]`;
-  const style = `${selector} {\n${declarations(styleProperties(theme.style))}\n}`;
   const { light, dark, darker } = theme.modes;
-  const blocks = [style];
+  const rules: string[] = [];
 
   if (light !== undefined) {
-    blocks.push(`${selector} {\n${modeBlock(light, false)}\n}`);
+    rules.push(`${selector} {\n${block(light, false, "  ")}\n}`);
   } else if (dark !== undefined) {
-    blocks.push(`${selector} {\n${modeBlock(dark, true)}\n}`);
+    rules.push(`${selector} {\n${block(dark, true, "  ")}\n}`);
   }
 
   if (dark !== undefined) {
-    blocks.push(
-      `${selector}[data-gw-mode="dark"] {\n${modeBlock(dark, true)}\n}`,
+    rules.push(
+      `${selector}[data-gw-mode="dark"] {\n${block(dark, true, "  ")}\n}`,
     );
 
     if (light !== undefined) {
-      blocks.push(
-        `@media (prefers-color-scheme: dark) {\n  ${selector}:not([data-gw-mode]) {\n${modeBlock(dark, true, "    ")}\n  }\n}`,
+      rules.push(
+        `@media (prefers-color-scheme: dark) {\n  ${selector}:not([data-gw-mode]) {\n${block(dark, true, "    ")}\n  }\n}`,
       );
     }
   }
 
   if (darker !== undefined) {
-    blocks.push(
-      `${selector}[data-gw-mode="darker"] {\n${modeBlock(darker, true)}\n}`,
+    rules.push(
+      `${selector}[data-gw-mode="darker"] {\n${block(darker, true, "  ")}\n}`,
     );
   }
 
-  return blocks.join("\n\n");
+  return rules;
 };
 
+/** One theme's `--gw-*` rules under `[data-gw-theme]`, in each of its modes. */
+export const themeCss = (theme: ResolvedTheme) =>
+  [
+    `[data-gw-theme="${theme.id}"] {\n${declarations(styleProperties(theme.style))}\n}`,
+    ...modeRules(theme, modeBlock),
+  ].join("\n\n");
+
+/** A control height that follows the theme's density, as the elements do. */
+const dense = (rem: number) =>
+  `calc(${Number(rem.toFixed(4))}rem * var(--gw-control-scale, 1))`;
+
+/** Pre-upgrade heights for each size preset, matching `controlSizes`. */
+const sized = (
+  tag: string,
+  rem: number,
+  properties: readonly string[] = ["min-block-size"],
+) =>
+  Object.fromEntries(
+    Object.entries({ xs: 0.6, small: 0.8, large: 1.2, xl: 1.4 }).map(
+      ([size, scale]) => [
+        `${tag}[size="${size}"]`,
+        Object.fromEntries(
+          properties.map((property) => [property, dense(rem * scale)]),
+        ),
+      ],
+    ),
+  );
+
 /**
  * What each `gw-` element looks like before its script defines it: the
  * display and block size it will have, so nothing moves when it upgrades.
@@ -193,34 +232,20 @@ const preUpgrade = {
   "gw-fade-in": { opacity: "0" },
   "gw-button, gw-menu-button, gw-segmented": {
     display: "inline-block",
-    "min-block-size": "2.5rem",
+    "min-block-size": dense(2.5),
     "vertical-align": "middle",
   },
   "gw-button": {
     "padding-inline": "calc(var(--gw-space-4) + 1px)",
     "font-size": "var(--gw-font-size-s)",
     "font-weight": "var(--gw-font-weight-strong)",
-    "line-height": "2.5rem",
+    "line-height": dense(2.5),
     "white-space": "nowrap",
     "text-transform": "var(--gw-label-transform)",
     "letter-spacing": "var(--gw-label-tracking)",
   },
-  'gw-button[size="xs"]': {
-    "min-block-size": "1.5rem",
-    "line-height": "1.5rem",
-  },
-  'gw-button[size="small"]': {
-    "min-block-size": "2rem",
-    "line-height": "2rem",
-  },
-  'gw-button[size="large"]': {
-    "min-block-size": "3rem",
-    "line-height": "3rem",
-  },
-  'gw-button[size="xl"]': {
-    "min-block-size": "3.5rem",
-    "line-height": "3.5rem",
-  },
+  ...sized("gw-button", 2.5, ["min-block-size", "line-height"]),
+  ...sized("gw-menu-button", 2.5),
   "gw-card": {
     display: "block",
     padding: "var(--gw-space-4)",
@@ -264,9 +289,10 @@ const preUpgrade = {
     "margin-inline-end": "var(--gw-space-2)",
     "vertical-align": "middle",
   },
-  "gw-chip": { display: "inline-flex", "min-block-size": "2rem" },
-  "gw-badge": { display: "inline-flex", "min-block-size": "2.25rem" },
-  'gw-badge[size="small"]': { "min-block-size": "1.75rem" },
+  "gw-chip": { display: "inline-flex", "min-block-size": dense(2) },
+  ...sized("gw-chip", 2),
+  "gw-badge": { display: "inline-flex", "min-block-size": dense(2.25) },
+  ...sized("gw-badge", 2.25),
   "gw-dot": {
     display: "inline-block",
     "inline-size": "0.5rem",
@@ -283,12 +309,15 @@ const preUpgrade = {
     display: "inline-flex",
     "min-block-size": "1.25rem",
   },
-  "gw-input, gw-select": { display: "flex", "min-block-size": "4.5rem" },
+  "gw-input, gw-select": {
+    display: "flex",
+    "min-block-size": `calc(2rem + ${dense(2.5)})`,
+  },
   "gw-input:is([hint], [error]), gw-select:is([hint], [error])": {
-    "min-block-size": "6.25rem",
+    "min-block-size": `calc(3.75rem + ${dense(2.5)})`,
   },
   "gw-select:is([label-hidden], [inline-label])": {
-    "min-block-size": "2.5rem",
+    "min-block-size": dense(2.5),
   },
   "gw-select[inline-label]": { display: "inline-flex" },
   "gw-checkbox, gw-switch": { display: "flex", "min-block-size": "1.5rem" },

package/src/index.ts

@@ -9,3 +9,5 @@ export * from "./color.ts";
 export * from "./schema.ts";
 
 export * from "./solve.ts";
+
+export * from "./tones.ts";

package/src/page.ts

@@ -79,6 +79,12 @@ export interface PageThemeOptions {
   readonly defaultMode?: ThemeMode;
   /** The element the attributes go on. Defaults to `<html>`. */
   readonly root?: HTMLElement;
+  /**
+   * The app's own tones, solved into an imported theme's CSS beside its
+   * roles. The built-in themes' tones come from `appTones` in the runtime
+   * entry, on the page with their CSS.
+   */
+  readonly tones?: Readonly<Record<string, string>>;
 }
 
 export interface PageTheme {
@@ -210,12 +216,17 @@ export const pageTheme = (options: PageThemeOptions): PageTheme => {
 
   /** Solves a document under the custom id, applies it and keeps it. */
   const applyCustom = async (document: Theme, text: string) => {
-    const { runtimeTheme } = await import("./runtime.ts");
+    const { appTonesCss, runtimeTheme } = await import("./runtime.ts");
     const runtime = runtimeTheme(document, customThemeId);
 
-    setStyle(runtime.css);
+    const css =
+      options.tones === undefined
+        ? runtime.css
+        : `${runtime.css}\n\n${appTonesCss(options.tones, runtime.theme)}`;
+
+    setStyle(css);
     write(stored.document, text);
-    write(stored.css, runtime.css);
+    write(stored.css, css);
     write(stored.name, document.name);
     write(stored.theme, customThemeId);
     commit({ ...state, theme: customThemeId, custom: document.name });

package/src/runtime.ts

@@ -10,9 +10,12 @@ import baseDocument from "../themes/base.json" with { type: "json" };
 import { themeCss } from "./generate.ts";
 import { SolvedTheme, Theme } from "./schema.ts";
 import { check, resolve, type Check, type ResolvedTheme } from "./solve.ts";
+import { appTonesCss, type AppTones } from "./tones.ts";
 
 export { omarchyTheme } from "./omarchy.ts";
 
+export { appTonesCss, type AppTones } from "./tones.ts";
+
 const base = Schema.decodeUnknownSync(SolvedTheme)(baseDocument);
 
 /** A theme solved at runtime, with its CSS and every contrast check. */
@@ -37,6 +40,21 @@ export const runtimeTheme = (theme: Theme, id = theme.id): RuntimeTheme => {
   return { theme: resolved, css: themeCss(resolved), checks: check(resolved) };
 };
 
+/**
+ * An app's own tones as CSS for each of `themes`: `--app-tone-<name>`,
+ * `-fill` and `-border`, solved against each theme's surfaces in every mode
+ * so they meet the status colors' contrast. Put it beside the themes' CSS,
+ * such as at build time, then point a component's tone at one:
+ *
+ * ```css
+ * .regressed { --gw-tone: var(--app-tone-regressed); }
+ * ```
+ */
+export const appTones = (tones: AppTones, themes: readonly Theme[]) =>
+  themes
+    .map((theme) => appTonesCss(tones, resolve(theme, base.style)))
+    .join("\n\n");
+
 /**
  * Where an app keeps a user's theme document. The document is stored, not
  * its CSS, so it's solved again when the solver changes. Local storage is

package/src/tones.ts

@@ -0,0 +1,87 @@
+/**
+ * App tones: an app's own state colors, such as an issue's "regressed" or
+ * "muted", solved against each theme's surfaces the way the status colors
+ * are, so they read in every theme and mode.
+ *
+ * @module
+ */
+import {
+  contrast,
+  fromHex,
+  solveLightness,
+  toCss,
+  withAlpha,
+  type Oklch,
+} from "./color.ts";
+import { modeRules } from "./generate.ts";
+import { targets, type ResolvedTheme, type Roles } from "./solve.ts";
+
+/** An app's tones: each name and the hex color it starts from. */
+export type AppTones = Readonly<Record<string, string>>;
+
+const textSurfaces = [
+  "surface-lower",
+  "surface-low",
+  "surface-default",
+  "surface-raised",
+  "surface-overlay",
+] as const;
+
+/**
+ * Each tone in one mode: its text color, kept as given where it already meets
+ * the status contrast target on every surface and moved lighter or darker
+ * until it does where not, with a quiet fill and a border from it.
+ */
+export const appToneRoles = (
+  tones: AppTones,
+  roles: Roles,
+  dark: boolean,
+): Roles =>
+  Object.fromEntries(
+    Object.entries(tones).flatMap(([name, hex]) => {
+      const seed = fromHex(hex);
+
+      const surfaces = textSurfaces.flatMap((surface) => {
+        const color = roles[surface];
+
+        return color === undefined ? [] : [color];
+      });
+
+      // Where the tone reads worst
+      const ground = surfaces.reduce<Oklch | undefined>(
+        (worst, surface) =>
+          worst === undefined || contrast(seed, surface) < contrast(seed, worst)
+            ? surface
+            : worst,
+        undefined,
+      );
+
+      const text =
+        ground === undefined || contrast(seed, ground) >= targets.status
+          ? seed
+          : solveLightness(
+              seed,
+              ground,
+              targets.status,
+              dark ? "lighter" : "darker",
+            );
+
+      return [
+        [name, text],
+        [`${name}-fill`, withAlpha(text, 0.14)],
+        [`${name}-border`, withAlpha(text, 0.45)],
+      ];
+    }),
+  );
+
+/**
+ * `--app-tone-<name>`, `-fill` and `-border` for each tone, under the same
+ * selectors as `theme`'s own CSS. Set a component's `--gw-tone`,
+ * `--gw-tone-fill` and `--gw-tone-border` from them.
+ */
+export const appTonesCss = (tones: AppTones, theme: ResolvedTheme) =>
+  modeRules(theme, (roles, dark, indent) =>
+    Object.entries(appToneRoles(tones, roles, dark))
+      .map(([name, color]) => `${indent}--app-tone-${name}: ${toCss(color)};`)
+      .join("\n"),
+  ).join("\n\n");