diff --git a/README.md b/README.md index bf904fc..04157a5 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`, `text-signal`, `rounded-tight`, -`duration-quick`, `ease-edit`, and `size-control-compact`. `text-signal` is the compact +`border-rule`, `bg-accent-clay`, `font-sans`, `text-body`, `text-signal`, +`rounded-tight`, `duration-quick`, `ease-edit`, `ease-reveal`, 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 063d792..f60320a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,13 @@ { "name": "@protocol-works/design-tokens", - "version": "0.2.1", + "version": "0.2.2", "lockfileVersion": 3, "requires": true, "dev": true, "packages": { "": { "name": "@protocol-works/design-tokens", - "version": "0.2.1", + "version": "0.2.2", "dev": true, "license": "MIT", "workspaces": [ diff --git a/package.json b/package.json index 9efe1f2..cf89c2d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@protocol-works/design-tokens", - "version": "0.2.1", + "version": "0.2.2", "description": "Shared [protocol]works brand, theme, typography, motion, and geometry tokens.", "type": "module", "workspaces": [ diff --git a/tailwind.css b/tailwind.css index e63b31c..aa73393 100644 --- a/tailwind.css +++ b/tailwind.css @@ -75,6 +75,7 @@ /* Motion */ --ease-edit: var(--pw-ease-edit); + --ease-reveal: var(--pw-ease-reveal); --ease-cut: var(--pw-ease-cut); --transition-duration-quick: var(--pw-duration-quick); --transition-duration-medium: var(--pw-duration-medium); diff --git a/test/contracts.test.mjs b/test/contracts.test.mjs index 4a7ddd7..90ba1e7 100644 --- a/test/contracts.test.mjs +++ b/test/contracts.test.mjs @@ -45,6 +45,13 @@ test("keeps light and dark themes explicit", () => { assert.match(tokensCss, /--pw-color-accent:\s*#c06a6a/); }); +test("defines the semantic reveal motion curve", () => { + assert.match( + tokensCss, + /--pw-ease-reveal:\s*cubic-bezier\(0\.16, 1, 0\.3, 1\)/, + ); +}); + test("generates the public Tailwind utility vocabulary", async () => { const compiler = await compile(`${tailwindCss}\n@tailwind utilities;`); const output = compiler.build([ @@ -61,6 +68,7 @@ test("generates the public Tailwind utility vocabulary", async () => { "border-hairline", "duration-quick", "ease-edit", + "ease-reveal", "size-hit-target", "size-control-compact", "size-control-default", @@ -82,6 +90,7 @@ test("generates the public Tailwind utility vocabulary", async () => { "border-hairline", "duration-quick", "ease-edit", + "ease-reveal", "size-hit-target", "size-control-compact", "size-control-default", diff --git a/tokens.css b/tokens.css index 6ab6b0e..31fb5da 100644 --- a/tokens.css +++ b/tokens.css @@ -55,6 +55,7 @@ /* Motion */ --pw-ease-edit: cubic-bezier(0.2, 0.7, 0.2, 1); + --pw-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); --pw-ease-cut: linear; --pw-duration-quick: 150ms; --pw-duration-medium: 280ms;