@cupped/tokens 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @cupped/tokens
 
+## 0.2.1
+
+### Patch Changes
+
+- [#6](https://github.com/ybird-labs/cupped-design-system/pull/6) [`6a9ce2a`](https://github.com/ybird-labs/cupped-design-system/commit/6a9ce2ab72710b30c1d8c12a4a4fe3a412aca246) Thanks [@JeancarloBarrios](https://github.com/JeancarloBarrios)! - Distribute via **public npm**: consumers install `@cupped/tokens` with no registry auth or `.npmrc`. The release pipeline publishes to npmjs with provenance.
+
+- [#5](https://github.com/ybird-labs/cupped-design-system/pull/5) [`e67f352`](https://github.com/ybird-labs/cupped-design-system/commit/e67f35207e1ee75149e6a0607d7a38a87f47e089) Thanks [@JeancarloBarrios](https://github.com/JeancarloBarrios)! - Harden the release pipeline and tighten the package manifest:
+
+  - **release.yml** — resilient GitHub Release `create`-or-`upload` for the CSS
+    assets (no more half-published versions), plus a `.sha256` sidecar so
+    consumers can verify pinned downloads.
+  - **ci.yml** — enforce a changeset on PRs that change the package, so a release
+    never silently no-ops on a token/API change.
+  - **package.json** — add a `default` export condition (resolvers matching none
+    of `react-native`/`import`/`require` now resolve), and drop the `engines`
+    Node gate that wrongly constrained _consumers_ (Node 22 is a build-only need).
+  - **docs** — fine-grained-PAT first-publish runbook; Phoenix download now
+    verifies the checksum sidecar.
+
+- [#7](https://github.com/ybird-labs/cupped-design-system/pull/7) [`c27e9f4`](https://github.com/ybird-labs/cupped-design-system/commit/c27e9f42b3c700807873a6265b5126f43a4391ac) Thanks [@JeancarloBarrios](https://github.com/JeancarloBarrios)! - Revise the text input to design v0.3 and change the focus/error glow tokens to carry geometry.
+
+  Shipped as a 0.2.1 follow-up to the 0.2.0 glow tokens. Note — the shape of `focus-glow`/`error-glow`/`focusGlow`/`errorGlow` changes vs the published `@cupped/tokens@0.2.0` (a breaking shape change; called out here so consumers of 0.2.0's color-only glows can migrate):
+
+  - CSS/Tailwind: `--focus-glow`/`--error-glow` previously resolved to a bare **color** (e.g. `rgba(192, 85, 57, 0.22)`); they now resolve to a full **`box-shadow`** value (e.g. `0 0 6px 2px color-mix(...)` / `0 0 6px 2px rgba(...)`). Consumers that wrote `box-shadow: 0 0 6px 2px var(--focus-glow)` must change to `box-shadow: var(--focus-glow)` (using the token as a color now produces an invalid doubled box-shadow).
+  - Flat JSON: `"focus-glow"`/`"error-glow"` change from a color string (`"rgba(192, 85, 57, 0.22)"`) to a box-shadow string (`"0 0 6px 2px rgba(192, 85, 57, 0.22)"`).
+  - Native theme object: `focusGlow`/`errorGlow` change from a **string** (`"rgba(192, 85, 57, 0.22)"`) to an **object** `{ color, blur, spread }`. Consumers reading `theme.focusGlow`/`theme.errorGlow` as a color string (e.g. passing to `shadowColor`) must migrate to `theme.focusGlow.color`.
+
+  Other changes (additive):
+
+  - `.input` revised: 44pt min-height, hover border, AA placeholder (ink-secondary), accessible focus (primary-strong border + soft `--focus-glow` halo), error that persists on focus with `--error-glow`, icon-paired error hint, and a `validating` state with a new `.spinner-ink`. Hint is neutral by default, red on `.error`, neutral on `.validating`.
+  - Web `Input` wrapper gains `validating`, `leading`, and `trailing` props, an error alert icon, `aria-busy`, `aria-describedby` linking the hint, and a live-region hint (assertive on error, polite while validating). The existing `label`/`hint`/`error` API is unchanged.
+
 ## 0.1.0
 
 Initial release. DTCG token source under `tokens/` with generated, committed

package/dist/css/components.css

@@ -106,16 +106,16 @@
 }
 /* Placeholder is essential text — ink-secondary clears AA; ink-muted does not. */
 .input::placeholder { color: var(--ink-secondary); }
-.input:hover:not(:focus):not([disabled]) { border-color: var(--ink-muted); }
+.input:hover:not(:focus):not([disabled]):not(.error) { border-color: var(--ink-muted); }
 .input:focus {
   outline: none;
-  border-color: var(--primary-strong);          /* #C05539, ≥3:1 vs field — carries the contrast */
-  box-shadow: 0 0 6px 2px var(--focus-glow);     /* soft glow, decorative; buttons keep the two-tone ring */
+  border-color: var(--primary-strong);   /* #C05539, ≥3:1 vs field — carries the contrast */
+  box-shadow: var(--focus-glow);          /* soft glow, decorative; buttons keep the two-tone ring */
 }
 .input.error,
 .input.error:focus {
   border-color: var(--error);
-  box-shadow: 0 0 6px 2px var(--error-glow);     /* soft glow, error color — shown focused or not */
+  box-shadow: var(--error-glow);          /* soft glow, error color — shown focused or not */
 }
 .input[disabled] { background: var(--canvas); color: var(--ink-muted); cursor: not-allowed; }
 .input-row { display: flex; flex-direction: column; gap: 6px; }

package/dist/css/tokens.css

@@ -119,8 +119,8 @@
   --shimmer-duration: 1.5s;
   --motion-reduced: 120ms;
   --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--primary-strong);
-  --focus-glow: color-mix(in srgb, var(--primary-strong) 22%, transparent);
-  --error-glow: color-mix(in srgb, var(--error) 22%, transparent);
+  --focus-glow: 0 0 6px 2px color-mix(in srgb, var(--primary-strong) 22%, transparent);
+  --error-glow: 0 0 6px 2px color-mix(in srgb, var(--error) 22%, transparent);
   --hit-target-min: 44px;
 
   /* ── Materials ── */

package/dist/json/tokens.dtcg.json

@@ -1306,24 +1306,36 @@
       }
     },
     "glow": {
-      "$type": "color",
-      "$value": "rgba(192, 85, 57, 0.22)",
-      "$description": "Decorative input focus halo — primary-strong @ 22%. The primary-strong border carries the ≥3:1 contrast; this glow is decorative. Buttons keep the two-tone focus ring.",
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "6px",
+        "spread": "2px",
+        "color": "rgba(192, 85, 57, 0.22)"
+      },
+      "$description": "Decorative input focus halo — 6px blur, 2px spread, primary-strong @ 22%. The primary-strong border carries the ≥3:1 contrast; this glow is decorative. Buttons keep the two-tone focus ring.",
       "$extensions": {
         "app.cupped": {
           "cssName": "focus-glow",
-          "cssValue": "color-mix(in srgb, var(--primary-strong) 22%, transparent)"
+          "cssValue": "0 0 6px 2px color-mix(in srgb, var(--primary-strong) 22%, transparent)"
         }
       }
     },
     "errorGlow": {
-      "$type": "color",
-      "$value": "rgba(239, 68, 68, 0.22)",
-      "$description": "Decorative input error halo — error @ 22%. Pairs with the error border; shown whether or not the field is focused.",
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "6px",
+        "spread": "2px",
+        "color": "rgba(239, 68, 68, 0.22)"
+      },
+      "$description": "Decorative input error halo — 6px blur, 2px spread, error @ 22%. Pairs with the error border; shown whether or not the field is focused.",
       "$extensions": {
         "app.cupped": {
           "cssName": "error-glow",
-          "cssValue": "color-mix(in srgb, var(--error) 22%, transparent)"
+          "cssValue": "0 0 6px 2px color-mix(in srgb, var(--error) 22%, transparent)"
         }
       }
     }

package/dist/json/tokens.flat.json

@@ -77,8 +77,8 @@
   "shimmer-duration": "1.5s",
   "motion-reduced": "120ms",
   "focus-ring": "0 0 0 2px #FFFFFF, 0 0 0 4px #C05539",
-  "focus-glow": "rgba(192, 85, 57, 0.22)",
-  "error-glow": "rgba(239, 68, 68, 0.22)",
+  "focus-glow": "0 0 6px 2px rgba(192, 85, 57, 0.22)",
+  "error-glow": "0 0 6px 2px rgba(239, 68, 68, 0.22)",
   "hit-target-min": "44px",
   "radius-sm": "8px",
   "radius-md": "12px",

package/dist/native/index.cjs

@@ -271,8 +271,16 @@ const tokens = {
     "innerColor": "#FFFFFF",
     "color": "#C05539"
   },
-  "focusGlow": "rgba(192, 85, 57, 0.22)",
-  "errorGlow": "rgba(239, 68, 68, 0.22)",
+  "focusGlow": {
+    "color": "rgba(192, 85, 57, 0.22)",
+    "blur": 6,
+    "spread": 2
+  },
+  "errorGlow": {
+    "color": "rgba(239, 68, 68, 0.22)",
+    "blur": 6,
+    "spread": 2
+  },
   "material": {
     "chromeBg": "rgba(255, 255, 255, 0.95)",
     "scrim": "rgba(15, 23, 42, 0.45)",

package/dist/native/index.d.ts

@@ -271,8 +271,16 @@ export declare const tokens: {
     readonly "innerColor": "#FFFFFF";
     readonly "color": "#C05539";
   };
-  readonly "focusGlow": "rgba(192, 85, 57, 0.22)";
-  readonly "errorGlow": "rgba(239, 68, 68, 0.22)";
+  readonly "focusGlow": {
+    readonly "color": "rgba(192, 85, 57, 0.22)";
+    readonly "blur": 6;
+    readonly "spread": 2;
+  };
+  readonly "errorGlow": {
+    readonly "color": "rgba(239, 68, 68, 0.22)";
+    readonly "blur": 6;
+    readonly "spread": 2;
+  };
   readonly "material": {
     readonly "chromeBg": "rgba(255, 255, 255, 0.95)";
     readonly "scrim": "rgba(15, 23, 42, 0.45)";

package/dist/native/index.js

@@ -270,8 +270,16 @@ export const tokens = {
     "innerColor": "#FFFFFF",
     "color": "#C05539"
   },
-  "focusGlow": "rgba(192, 85, 57, 0.22)",
-  "errorGlow": "rgba(239, 68, 68, 0.22)",
+  "focusGlow": {
+    "color": "rgba(192, 85, 57, 0.22)",
+    "blur": 6,
+    "spread": 2
+  },
+  "errorGlow": {
+    "color": "rgba(239, 68, 68, 0.22)",
+    "blur": 6,
+    "spread": 2
+  },
   "material": {
     "chromeBg": "rgba(255, 255, 255, 0.95)",
     "scrim": "rgba(15, 23, 42, 0.45)",

package/dist/tailwind/theme.css

@@ -143,8 +143,8 @@
   --shimmer-duration: 1.5s;
   --motion-reduced: 120ms;
   --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #C05539;
-  --focus-glow: rgba(192, 85, 57, 0.22);
-  --error-glow: rgba(239, 68, 68, 0.22);
+  --focus-glow: 0 0 6px 2px rgba(192, 85, 57, 0.22);
+  --error-glow: 0 0 6px 2px rgba(239, 68, 68, 0.22);
   --hit-target-min: 44px;
   --material-chrome-bg: rgba(255, 255, 255, 0.95);
   --material-chrome-blur: saturate(1.4) blur(20px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupped/tokens",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Cupped design tokens — canonical DTCG source with generated CSS custom properties, Tailwind v4 @theme, React Native theme object, and raw JSON.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/semantic/motion.tokens.json

@@ -42,21 +42,33 @@
       "$extensions": { "app.cupped": { "innerWidthPx": 2, "outerWidthPx": 2 } }
     },
     "glow": {
-      "$type": "color",
-      "$value": "rgba(192, 85, 57, 0.22)",
-      "$description": "Decorative input focus halo — primary-strong @ 22%. The primary-strong border carries the ≥3:1 contrast; this glow is decorative. Buttons keep the two-tone focus ring.",
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "6px",
+        "spread": "2px",
+        "color": "rgba(192, 85, 57, 0.22)"
+      },
+      "$description": "Decorative input focus halo — 6px blur, 2px spread, primary-strong @ 22%. The primary-strong border carries the ≥3:1 contrast; this glow is decorative. Buttons keep the two-tone focus ring.",
       "$extensions": { "app.cupped": {
         "cssName": "focus-glow",
-        "cssValue": "color-mix(in srgb, var(--primary-strong) 22%, transparent)"
+        "cssValue": "0 0 6px 2px color-mix(in srgb, var(--primary-strong) 22%, transparent)"
       } }
     },
     "errorGlow": {
-      "$type": "color",
-      "$value": "rgba(239, 68, 68, 0.22)",
-      "$description": "Decorative input error halo — error @ 22%. Pairs with the error border; shown whether or not the field is focused.",
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "6px",
+        "spread": "2px",
+        "color": "rgba(239, 68, 68, 0.22)"
+      },
+      "$description": "Decorative input error halo — 6px blur, 2px spread, error @ 22%. Pairs with the error border; shown whether or not the field is focused.",
       "$extensions": { "app.cupped": {
         "cssName": "error-glow",
-        "cssValue": "color-mix(in srgb, var(--error) 22%, transparent)"
+        "cssValue": "0 0 6px 2px color-mix(in srgb, var(--error) 22%, transparent)"
       } }
     }
   },