feat: add reveal motion easing token

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

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": [

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);

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",

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;