diff --git a/README.md b/README.md index b3e35a0..bf904fc 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index f0f28be..063d792 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,13 @@ { "name": "@protocol-works/design-tokens", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 3, "requires": true, "dev": true, "packages": { "": { "name": "@protocol-works/design-tokens", - "version": "0.2.0", + "version": "0.2.1", "dev": true, "license": "MIT", "workspaces": [ @@ -3381,7 +3381,7 @@ }, "packages/ui": { "name": "@protocol-works/ui", - "version": "0.3.1", + "version": "0.3.2", "license": "MIT", "dependencies": { "@radix-ui/react-dialog": "^1.1.19", @@ -3395,7 +3395,7 @@ "node": ">=20" }, "peerDependencies": { - "@protocol-works/design-tokens": ">=0.2.0 <1", + "@protocol-works/design-tokens": ">=0.2.1 <1", "react": ">=19 <20", "react-dom": ">=19 <20" } diff --git a/package.json b/package.json index b916087..9efe1f2 100644 --- a/package.json +++ b/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": [ diff --git a/packages/ui/package.json b/packages/ui/package.json index 763c610..d7c881f 100644 --- a/packages/ui/package.json +++ b/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" }, diff --git a/packages/ui/test/tailwind.test.mjs b/packages/ui/test/tailwind.test.mjs index 3dfe060..135a776 100644 --- a/packages/ui/test/tailwind.test.mjs +++ b/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\)/); diff --git a/tailwind.css b/tailwind.css index 0bafe86..e63b31c 100644 --- a/tailwind.css +++ b/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); diff --git a/test/contracts.test.mjs b/test/contracts.test.mjs index 8ea06c2..4a7ddd7 100644 --- a/test/contracts.test.mjs +++ b/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\)/, + ); });