@cupped/tokens 0.1.0 → 0.2.0

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]) { 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: 0 0 6px 2px 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: 0 0 6px 2px 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: color-mix(in srgb, var(--primary-strong) 22%, transparent);
+  --error-glow: color-mix(in srgb, var(--error) 22%, transparent);
   --hit-target-min: 44px;
 
   /* ── Materials ── */

package/dist/json/tokens.dtcg.json

@@ -1304,6 +1304,28 @@
           "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.",
+      "$extensions": {
+        "app.cupped": {
+          "cssName": "focus-glow",
+          "cssValue": "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.",
+      "$extensions": {
+        "app.cupped": {
+          "cssName": "error-glow",
+          "cssValue": "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": "rgba(192, 85, 57, 0.22)",
+  "error-glow": "rgba(239, 68, 68, 0.22)",
   "hit-target-min": "44px",
   "radius-sm": "8px",
   "radius-md": "12px",

package/dist/native/index.cjs

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

package/dist/native/index.d.ts

@@ -271,6 +271,8 @@ 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 "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,8 @@ export const tokens = {
     "innerColor": "#FFFFFF",
     "color": "#C05539"
   },
+  "focusGlow": "rgba(192, 85, 57, 0.22)",
+  "errorGlow": "rgba(239, 68, 68, 0.22)",
   "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: rgba(192, 85, 57, 0.22);
+  --error-glow: 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.0",
   "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,24 @@
       ],
       "$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": "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.",
+      "$extensions": { "app.cupped": {
+        "cssName": "focus-glow",
+        "cssValue": "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.",
+      "$extensions": { "app.cupped": {
+        "cssName": "error-glow",
+        "cssValue": "color-mix(in srgb, var(--error) 22%, transparent)"
+      } }
     }
   },
   "hit-target": {