Fix compact control foregrounds

README.md

@@ -52,8 +52,9 @@ preference.
   and sizing.
 
 `tailwind.css` exposes utilities such as `bg-background`, `text-foreground-muted`,
-`border-rule`, `bg-accent-clay`, `font-sans`, `text-body`, `rounded-tight`, `duration-quick`,
-`ease-edit`, and `size-control-compact`.
+`border-rule`, `bg-accent-clay`, `font-sans`, `text-body`, `text-signal`, `rounded-tight`,
+`duration-quick`, `ease-edit`, and `size-control-compact`. `text-signal` is the compact
+typography role; use `text-brand-signal` when the semantic gold signal color is intended.
 
 ## React UI
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protocol-works/design-tokens",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Shared [protocol]works brand, theme, typography, motion, and geometry tokens.",
   "type": "module",
   "workspaces": [

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protocol-works/ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Portable React primitives for [protocol]works products.",
   "type": "module",
   "sideEffects": [
@@ -170,7 +170,7 @@
     "prepack": "npm run test"
   },
   "peerDependencies": {
-    "@protocol-works/design-tokens": ">=0.2.0 <1",
+    "@protocol-works/design-tokens": ">=0.2.1 <1",
     "react": ">=19 <20",
     "react-dom": ">=19 <20"
   },

packages/ui/test/tailwind.test.mjs

@@ -25,6 +25,14 @@ test("Tailwind discovers utilities used by the installed component package", ()
     assert.match(output, /\.font-display/);
     assert.match(output, /\.border-state-error/);
     assert.match(output, /\.text-caption/);
+    assert.match(
+      output,
+      /\.text-signal\s*\{[^}]*font-size:\s*var\(--pw-text-signal\)/,
+    );
+    assert.doesNotMatch(
+      output,
+      /\.text-signal\s*\{[^}]*color:\s*var\(--pw-color-signal\)/,
+    );
     assert.match(output, /\.min-h-control-compact/);
     assert.match(output, /\.w-control-compact/);
     assert.match(output, /var\(--pw-width-narrow\)/);

tailwind.css

@@ -6,7 +6,7 @@
   --color-foreground-subtle: var(--pw-color-foreground-subtle);
   --color-rule: var(--pw-color-rule);
   --color-accent: var(--pw-color-accent);
-  --color-signal: var(--pw-color-signal);
+  --color-brand-signal: var(--pw-color-signal);
   --color-state-success: var(--pw-color-success);
   --color-state-warning: var(--pw-color-warning);
   --color-state-error: var(--pw-color-error);

test/contracts.test.mjs

@@ -49,7 +49,9 @@ test("generates the public Tailwind utility vocabulary", async () => {
   const compiler = await compile(`${tailwindCss}\n@tailwind utilities;`);
   const output = compiler.build([
     "bg-background",
+    "text-brand-signal",
     "text-foreground-muted",
+    "text-signal",
     "border-rule",
     "bg-accent-clay",
     "font-sans",
@@ -68,7 +70,9 @@ test("generates the public Tailwind utility vocabulary", async () => {
 
   for (const className of [
     "bg-background",
+    "text-brand-signal",
     "text-foreground-muted",
+    "text-signal",
     "border-rule",
     "bg-accent-clay",
     "font-sans",
@@ -89,4 +93,17 @@ test("generates the public Tailwind utility vocabulary", async () => {
       new RegExp(`\\.${className.replaceAll("-", "\\-")}\\s*\\{`),
     );
   }
+
+  assert.match(
+    output,
+    /\.text-signal\s*\{[^}]*font-size:\s*var\(--pw-text-signal\)/,
+  );
+  assert.doesNotMatch(
+    output,
+    /\.text-signal\s*\{[^}]*color:\s*var\(--pw-color-signal\)/,
+  );
+  assert.match(
+    output,
+    /\.text-brand-signal\s*\{[^}]*color:\s*var\(--pw-color-signal\)/,
+  );
 });