@cupped/tokens 0.1.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/README.md

@@ -5,9 +5,9 @@ community-first coffee-logging platform. The canonical source is
 platform-neutral [DTCG](https://www.designtokens.org/TR/drafts/format/)-style
 JSON under [`tokens/`](./tokens); every consumable artifact in
 [`dist/`](./dist) is **generated** from it and committed. The package is
-published to **GitHub Packages** (`@cupped` scope), and because `dist/` is
-committed it also works as a plain git dependency — no registry auth, no
-install-time build — for consumers that prefer that.
+published **public on npm** (`npm install @cupped/tokens` — no auth), and
+because `dist/` is committed it also works as a plain git dependency with no
+install-time build, for consumers that prefer pinning a commit.
 
 > Never hard-code a hex or pixel value that exists as a token.
 
@@ -28,7 +28,7 @@ fonts are self-hosted per platform (documented).
 ## Consuming
 
 - **Phoenix LiveView (Tailwind v4):** [docs/phoenix.md](./docs/phoenix.md) —
-  pinned CSS from the GitHub Release, npm git-dep, or zero-npm vendor mode;
+  pinned CSS from the GitHub Release, npm dependency, or zero-npm vendor mode;
   fonts, lint recipe.
 - **Expo / React Native (SDK 53+):** [docs/expo.md](./docs/expo.md) — the
   `theme.ts` pattern, expo-font, ESLint recipe.
@@ -71,7 +71,7 @@ npm run check   # build, fail on dist/ drift, then test — what CI runs
 ## Releasing & versioning
 
 Releases are automated with [Changesets](https://github.com/changesets/changesets)
-and published to GitHub Packages; each release also attaches version-pinned CSS
+and published to public npm; each release also attaches version-pinned CSS
 to its GitHub Release. Add a changeset with `npx changeset` in any PR that
 changes tokens.
 

package/dist/css/components.css

@@ -94,6 +94,7 @@
 /* ——— Inputs ——— */
 .input {
   width: 100%;
+  min-height: var(--hit-target-min);   /* ≥44pt tap target — matches .btn */
   padding: 12px 14px;
   border: 1px solid var(--canvas-border);
   border-radius: var(--radius-md);
@@ -103,21 +104,28 @@
   color: var(--ink);
   transition: border-color .15s, box-shadow .15s;
 }
-.input::placeholder { color: var(--ink-muted); }
+/* Placeholder is essential text — ink-secondary clears AA; ink-muted does not. */
+.input::placeholder { color: var(--ink-secondary); }
+.input:hover:not(:focus):not([disabled]):not(.error) { border-color: var(--ink-muted); }
 .input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+  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,
+.input.error:focus {
   border-color: var(--error);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 12%, transparent);
+  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; }
-.input-label { font-size: 12px; font-weight: 500; color: var(--ink-secondary); }
-.input-hint { font-size: 12px; color: var(--ink-secondary); }
+.input-label { font-size: var(--text-caption); font-weight: 500; color: var(--ink-secondary); }
+/* Hint: neutral helper by default; .error turns it red + pairs an icon (never color alone, WCAG 1.4.1). */
+.input-hint { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--ink-secondary); }
+.input-hint .icon { width: 14px; height: 14px; flex-shrink: 0; }
 .input-hint.error { color: var(--error-ink); }
+/* Validating — async check (e.g. "checking bean name"); pair with .spinner.spinner-ink */
+.input-hint.validating { color: var(--ink-secondary); }
 
 /* ——— Cards ——— */
 .card {
@@ -177,7 +185,13 @@
 }
 @keyframes cupped-spin { to { transform: rotate(360deg); } }
 
+/* Dark spinner for light surfaces (input validating, secondary/ghost buttons) */
+.spinner-ink {
+  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
+  border-top-color: var(--ink-secondary);
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .btn { transition: none; }
+  .btn, .input { transition: none; }
   .spinner { animation: none; }
 }

package/dist/css/tokens.css

@@ -119,6 +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: 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

@@ -1304,6 +1304,40 @@
           "outerWidthPx": 2
         }
       }
+    },
+    "glow": {
+      "$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": "0 0 6px 2px color-mix(in srgb, var(--primary-strong) 22%, transparent)"
+        }
+      }
+    },
+    "errorGlow": {
+      "$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": "0 0 6px 2px color-mix(in srgb, var(--error) 22%, transparent)"
+        }
+      }
     }
   },
   "hit-target": {

package/dist/json/tokens.flat.json

@@ -77,6 +77,8 @@
   "shimmer-duration": "1.5s",
   "motion-reduced": "120ms",
   "focus-ring": "0 0 0 2px #FFFFFF, 0 0 0 4px #C05539",
+  "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,6 +271,16 @@ const tokens = {
     "innerColor": "#FFFFFF",
     "color": "#C05539"
   },
+  "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,6 +271,16 @@ export declare const tokens: {
     readonly "innerColor": "#FFFFFF";
     readonly "color": "#C05539";
   };
+  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,6 +270,16 @@ export const tokens = {
     "innerColor": "#FFFFFF",
     "color": "#C05539"
   },
+  "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,6 +143,8 @@
   --shimmer-duration: 1.5s;
   --motion-reduced: 120ms;
   --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #C05539;
+  --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/docs/expo.md

@@ -7,15 +7,7 @@ default). The top-level `main`/`types` fallback covers SDK 52. The
 
 ## Install
 
-**Primary — GitHub Packages.** Map the `@cupped` scope to GitHub Packages in
-the app's `.npmrc`:
-
-```ini
-# .npmrc
-@cupped:registry=https://npm.pkg.github.com
-# TODO: this registry needs a read token. Add the auth line for your setup, e.g.
-# //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
-```
+Published **public on npm** — no registry config, no token, no `.npmrc`:
 
 ```bash
 npm install @cupped/tokens
@@ -23,8 +15,8 @@ npm install @cupped/tokens
 
 Pin the version in `package.json` as usual (`"@cupped/tokens": "^0.1.0"`).
 
-**Fallback — git dependency (no registry auth).** Because `dist/` is committed,
-the package also installs straight from git with no `.npmrc` / token setup:
+**Fallback — git dependency.** Because `dist/` is committed, the package also
+installs straight from git (e.g. to pin an unpublished commit):
 
 ```bash
 npm install github:ybird-labs/cupped-design-system#v0.1.0

package/docs/phoenix.md

@@ -38,14 +38,15 @@ gh release download "v${CUPPED_TOKENS_VERSION}" \
 (`gh release download` needs an authenticated `gh` / token with read access to
 the package repo. The filenames are stable: `cupped-tokens-<version>.<target>.css`.)
 
-## Mode 1 — npm git dependency
+## Mode 1 — npm dependency
 
-Create `assets/package.json` (or add to it):
+Create `assets/package.json` (or add to it) — `@cupped/tokens` is public on npm,
+so no registry auth is needed:
 
 ```jsonc
 {
   "dependencies": {
-    "@cupped/tokens": "github:ybird-labs/cupped-design-system#v0.1.0"
+    "@cupped/tokens": "^0.1.0"
   }
 }
 ```

package/docs/releasing.md

@@ -1,11 +1,11 @@
 # Releasing @cupped/tokens
 
-The package is published to **GitHub Packages** (npm registry
-`https://npm.pkg.github.com`, `@cupped` scope, `restricted` access) under
-[`ybird-labs/cupped-design-system`](https://github.com/ybird-labs/cupped-design-system).
-Releases are driven by [Changesets](https://github.com/changesets/changesets);
-the [`release.yml`](../.github/workflows/release.yml) workflow does the publish
-and attaches versioned CSS to the GitHub Release.
+The package is published **public on npm** as
+[`@cupped/tokens`](https://www.npmjs.com/package/@cupped/tokens) — consumers
+install it with no auth. Releases are driven by
+[Changesets](https://github.com/changesets/changesets); the
+[`release.yml`](../.github/workflows/release.yml) workflow does the publish
+(with provenance) and attaches versioned CSS to the GitHub Release.
 
 For *what* bump to choose, see [versioning.md](./versioning.md).
 
@@ -35,7 +35,7 @@ changesets/action sees pending changesets
 release.yml runs again → no pending changesets, version not yet published
    │
    ▼  changesets/action runs `npm run release` (changeset publish)
-changeset publish → publishes to GitHub Packages + creates the git tag vX.Y.Z
+changeset publish → publishes to npm (public) + creates the git tag vX.Y.Z
    the changesets/action wrapper then creates the matching GitHub Release
    │
    ▼  upload step attaches the three CSS files to Release vX.Y.Z:
@@ -47,47 +47,39 @@ changeset publish → publishes to GitHub Packages + creates the git tag vX.Y.Z
 You never bump `package.json` or write `CHANGELOG.md` by hand — merging the
 Version Packages PR does it.
 
-## One-time first publish (manual)
-
-The very first publish of a brand-new scoped package usually **cannot** be done
-by the workflow's `GITHUB_TOKEN`, because creating a new package under the org
-typically requires a personal access token. Do this once:
-
-1. Create a **fine-grained PAT** scoped to just `ybird-labs/cupped-design-system`
-   with **Packages: write** and a short expiry. (A classic PAT with
-   `write:packages` works too, but it is org-wide and long-lived — prefer
-   fine-grained.)
-2. Point npm at GitHub Packages for the scope, and pass the token via an env
-   var so it is never persisted to disk:
-   ```bash
-   echo "@cupped:registry=https://npm.pkg.github.com" >> ~/.npmrc
-   echo '//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}' >> ~/.npmrc
-   export NODE_AUTH_TOKEN=YOUR_PAT   # this shell only — not written to ~/.npmrc
-   ```
-3. From a clean checkout on the released version:
-   ```bash
-   npm ci
-   npm run check
-   npm publish        # prepublishOnly rebuilds dist/ first
-   ```
-
-After the package exists, the workflow's `GITHUB_TOKEN` can publish every
-subsequent release — no PAT needed in CI.
-
-## Granting consumer repos read access
-
-Consuming repos in the same org need **read** access to the package:
-
-- In the package settings on GitHub → *Package settings* → *Manage Actions
-  access* / *Manage access*, grant the consumer repos (e.g. the Phoenix and
-  Expo apps) read access.
-- Consumers then authenticate with a token that has `read:packages`. (Consumer
-  `.npmrc` setup is documented per-app — see [expo.md](./expo.md). **TODO:**
-  finalize and document the consumer read-token model.)
+## CI setup for automated releases (one-time)
+
+Automated releases publish to **public npm** via the Release workflow. Two
+one-time setups in repo settings:
+
+1. **`NPM_TOKEN` secret** — create an npm **Automation** token (npmjs.com →
+   Access Tokens → Generate New Token → *Automation*; it bypasses 2FA) on an
+   account that owns the `@cupped` npm org, and add it as the repo secret
+   **`NPM_TOKEN`** (Settings → Secrets and variables → Actions). The workflow
+   passes it as `NODE_AUTH_TOKEN`.
+2. **Allow Actions to open PRs** — Settings → Actions → General → Workflow
+   permissions → check *"Allow GitHub Actions to create and approve pull
+   requests"* (needed for the Changesets "Version Packages" PR).
+
+The workflow also requests `id-token: write`, so npm attaches build
+**provenance** to each public release.
+
+## First publish (already done for 0.1.0)
+
+`0.1.0` was published manually once to bootstrap the package:
+
+```bash
+npm login                 # browser auth to npmjs (owner of the @cupped org)
+npm ci && npm run check
+npm publish               # public; prepublishOnly rebuilds dist/ first
+```
+
+Every subsequent release is automated — no manual publish.
 
 ## Verifying a published release
 
-- The package version appears under the repo's *Packages*.
-- The GitHub Release `vX.Y.Z` exists with the three `cupped-tokens-X.Y.Z.*.css`
-  assets attached.
+- The version is on npm: <https://www.npmjs.com/package/@cupped/tokens>
+  (or `npm view @cupped/tokens version`). Consumers install with no auth.
+- The GitHub Release `vX.Y.Z` exists with the `cupped-tokens-X.Y.Z.*.css`
+  assets (+ `.sha256`) attached.
 - `CHANGELOG.md` has an entry for the version.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cupped/tokens",
-  "version": "0.1.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

@@ -40,6 +40,36 @@
       ],
       "$description": "Opaque dual focus ring (refreshed export) — ≥3:1 non-text contrast on any surface. Outline is never removed without a replacement.",
       "$extensions": { "app.cupped": { "innerWidthPx": 2, "outerWidthPx": 2 } }
+    },
+    "glow": {
+      "$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": "0 0 6px 2px color-mix(in srgb, var(--primary-strong) 22%, transparent)"
+      } }
+    },
+    "errorGlow": {
+      "$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": "0 0 6px 2px color-mix(in srgb, var(--error) 22%, transparent)"
+      } }
     }
   },
   "hit-target": {