@ponti-studios/ui 0.4.0 → 0.4.2

package/README.md

@@ -4,11 +4,23 @@ The canonical Ponti Studios UI package. It is published from this repository to
 
 ## Release
 
-1. Set `packages/ui/package.json` to the intended immutable version.
-2. Merge the change to `main`.
-3. Create and push a matching `ui-v<version>` tag, for example `ui-v0.1.0`.
+Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The workflow is defined once, in `.github/workflows/publish-ui.yml`, and has three jobs:
 
-The `publish-ui` workflow validates that the tag and package version match, then publishes with the repository’s npm publishing credentials. Do not publish from a workstation.
+1. **`release-ui`** — runs on every push to `main`. It scans commits under `packages/ui/` since the last release and keeps a standing pull request, `chore(main): release ui X.Y.Z`, up to date: `packages/ui/package.json`'s `version`, `.release-please-manifest.json`, and `packages/ui/CHANGELOG.md` are all written by this PR, never by a person. **Never hand-edit the `version` field in `packages/ui/package.json`** — the next push will regenerate the release PR from the real commit history and overwrite whatever you set.
+2. **`publish-ui`** — gated on `release-ui`'s `release_created` output, i.e. it only runs the push immediately after the release PR is *merged*. Merging that PR is what creates the `ui-v<version>` tag and triggers this job. It checks out that exact tag, re-verifies the tag matches `package.json`'s version and `HEAD`, runs `npm publish --provenance --access public`, then confirms the version resolves on the registry.
+3. **`publish-ui-manual`** — a `workflow_dispatch` break-glass path that checks out an arbitrary ref and publishes whatever version is in `package.json` there, with none of `publish-ui`'s tag/version consistency checks. Only use this to recover from a `publish-ui` run that failed for a reason unrelated to versioning (e.g. a broken `prepack` step) after a real release PR already merged — never as a way to skip release-please.
+
+**So the actual release flow is:**
+
+1. Land commits under `packages/ui/` using [Conventional Commits](https://www.conventionalcommits.org/) — the version bump is computed from the commit type: `fix:` → patch, `feat:` → minor, `feat!:`/a `BREAKING CHANGE:` footer → major. This is the *only* way to control the bump; there is no manual override.
+2. Once on `main`, find or wait for the `chore(main): release ui X.Y.Z` PR that `release-ui` opens/updates.
+3. Review and merge it. That merge creates the `ui-v<version>` tag and triggers `publish-ui` automatically. Nothing further to push or tag by hand.
+
+`prepack` (`tokens:check && check:source && typecheck`) runs as part of `pnpm install`/publish tooling and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
+
+### Generated files must never be hand-edited
+
+`src/styles/tokens/generated/**` and `.storybook/generated/**` are produced only by `pnpm run tokens:build` (style-dictionary) from the DTCG source in `src/styles/tokens/source/*.tokens.json`. `tokens:check` enforces this with `git diff --exit-code -- src/styles/tokens/generated` after a fresh rebuild — if the committed file doesn't byte-for-byte match what the tool just produced, the check (and therefore `prepack` and the publish) fails. This has happened in practice when a repo-wide formatter (oxfmt) reformatted a generated CSS file directly; `.oxfmtrc.json`'s `ignorePatterns` now excludes both generated directories specifically to prevent that recurring. If `tokens:check` fails on a file you didn't intend to touch, run `pnpm run tokens:build` and commit the regenerated output — don't hand-format it back into place.
 
 ## Consumers
 
@@ -25,3 +37,17 @@ pnpm config set --location=user //registry.npmjs.org/:_authToken "$NODE_AUTH_TOK
 ```
 
 CI consumers should use a secret-backed npm token with read access.
+
+### Ships TypeScript source, not a bundle
+
+This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). Tailwind v4 class detection for consumers of `./styles.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
+
+```css
+@source "../../../node_modules/@ponti-studios/ui/src";
+```
+
+Bundling the package would break that detection, since Tailwind can't scan generated/minified output for class names. `pnpm run build` only type-checks; it does not emit JS.
+
+### `./native` subpath
+
+`@ponti-studios/ui/native` is the only part of the package that imports `react-native`. Web consumers never pull it in; native consumers get `createMakeStyles`, `nativeShadows`, `useColorMode`, and `useThemeColors`. `react-native` is an optional peer dependency — only declare it in your own `package.json` if you actually import from this subpath.

package/THIRD_PARTY_NOTICES.md

@@ -2,7 +2,7 @@
 
 ## Adobe Spectrum Tokens
 
-The light and dark color snapshots in `src/tokens/generated/*colors.generated.ts`
+The light and dark color snapshots in `src/styles/tokens/generated/*colors.generated.ts`
 are derived from Adobe Spectrum Tokens 14.15.0. Spectrum Tokens is distributed
 under the Apache License 2.0.
 
@@ -10,8 +10,8 @@ Source: https://github.com/adobe/spectrum-tokens
 
 ## Tailwind CSS
 
-The non-color foundations in `src/tokens/generated/foundations.generated.ts`
-and `src/tokens/generated/foundations.css` match the Tailwind CSS 4.3.3 default
+The non-color foundations in `src/styles/tokens/generated/foundations.generated.ts`
+and `src/styles/tokens/generated/foundations.css` match the Tailwind CSS 4.3.3 default
 theme. Tailwind CSS is distributed under the MIT License.
 
 Source: https://github.com/tailwindlabs/tailwindcss

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "description": "Shared UI component library for ponti-studios labs",
   "license": "MIT",
@@ -9,19 +9,14 @@
     "url": "git+https://github.com/ponti-studios/labs.git",
     "directory": "packages/ui"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
   "files": [
-    "dist",
     "src",
     "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
-    "./src/styles.css",
-    "./src/animations.css"
+    "./src/styles/index.css",
+    "./src/styles/animations.css"
   ],
   "exports": {
     ".": {
@@ -61,28 +56,40 @@
       "import": "./src/lib/index.ts"
     },
     "./tokens": {
-      "types": "./src/tokens/index.ts",
-      "import": "./src/tokens/index.ts"
+      "types": "./src/styles/tokens/index.ts",
+      "import": "./src/styles/tokens/index.ts"
+    },
+    "./tokens/css-vars": {
+      "types": "./src/styles/tokens/css-vars.ts",
+      "import": "./src/styles/tokens/css-vars.ts"
+    },
+    "./native": {
+      "types": "./src/native/index.ts",
+      "import": "./src/native/index.ts"
     },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
     },
-    "./styles.css": "./src/styles.css",
-    "./animations.css": "./src/animations.css"
+    "./styles.css": "./src/styles/index.css",
+    "./animations.css": "./src/styles/animations.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "tsc --noEmit",
     "dev": "vite",
-    "storybook": "style-dictionary build --config style-dictionary.dark-storybook.json && storybook dev -p 6006",
-    "check:source": "node tokens/check-source.mjs",
+    "storybook": "style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json && storybook dev -p 6006",
+    "check:source": "node src/styles/tokens/scripts/check-source.mjs",
     "test:a11y": "vitest --run --config vitest.config.ts",
-    "tokens:build": "style-dictionary build --config style-dictionary.foundations.json && style-dictionary build --config style-dictionary.light.json && style-dictionary build --config style-dictionary.dark.json && style-dictionary build --config style-dictionary.dark-storybook.json",
-    "tokens:check": "pnpm run tokens:build && node tokens/check-foundations.mjs && git diff --exit-code -- src/tokens/generated",
+    "tokens:build": "style-dictionary build --config src/styles/tokens/style-dictionary.foundations.json && style-dictionary build --config src/styles/tokens/style-dictionary.light.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json",
+    "tokens:check": "pnpm run tokens:build && node src/styles/tokens/scripts/check-foundations.mjs && git diff --exit-code -- src/styles/tokens/generated",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint src --fix",
     "format": "oxfmt src --write",
-    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck && pnpm run build"
+    "prepack": "pnpm run tokens:check && pnpm run check:source && pnpm run typecheck"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -115,6 +122,7 @@
     "playwright": "catalog:",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-native": "0.86.0",
     "storybook": "^10.5.3",
     "style-dictionary": "5.5.0",
     "tailwindcss": "catalog:",
@@ -124,7 +132,16 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.74"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "packageManager": "pnpm@10.30.3"
 }

package/src/components/feedback/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "border-destructive/50 text-destructive-text bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-text",
       },
     },
     defaultVariants: {

package/src/components/feedback/file-upload-status-badge.tsx

@@ -9,7 +9,7 @@ const STATUS_CONFIG: Record<FileUploadStatusValue, { bg: string; text: string; l
   processing: { bg: "bg-muted", text: "text-foreground", label: "Processing" },
   queued: { bg: "bg-secondary", text: "text-secondary-foreground", label: "Queued" },
   done: { bg: "bg-muted", text: "text-muted-foreground", label: "Complete" },
-  error: { bg: "bg-destructive/10", text: "text-destructive", label: "Error" },
+  error: { bg: "bg-destructive/10", text: "text-destructive-text", label: "Error" },
 };
 
 export const FileUploadStatusBadge = memo(function FileUploadStatusBadge({

package/src/components/feedback/file-upload-status.tsx

@@ -86,7 +86,7 @@ export const FileUploadStatus = memo(function FileUploadStatus({
   if (status === "error") {
     return (
       <output className="mt-2" role="alert">
-        <div className="bg-destructive/10 text-destructive flex items-start gap-2 p-3">
+        <div className="bg-destructive/10 text-destructive-text flex items-start gap-2 p-3">
           <XIcon className="mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
           <span className="text-sm">{error}</span>
         </div>
@@ -125,7 +125,7 @@ const ProcessingStats = memo(function ProcessingStats({ stats }: { stats: FileUp
         <div className="py-2">
           <dt className="text-foreground text-sm font-medium">Errors</dt>
           <dd className="mt-1">
-            <span className="bg-destructive/10 text-destructive inline-flex items-center px-2 py-1 text-xs font-medium">
+            <span className="bg-destructive/10 text-destructive-text inline-flex items-center px-2 py-1 text-xs font-medium">
               {stats.errors.length} error{stats.errors.length > 1 ? "s" : ""}
             </span>
           </dd>

package/src/components/forms/field.tsx

@@ -30,7 +30,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
           htmlFor={id}
           className={cn(
             "text-foreground text-sm font-medium",
-            required && "after:text-destructive after:ml-0.5 after:content-['*']",
+            required && "after:text-destructive-text after:ml-0.5 after:content-['*']",
           )}
         >
           {label}
@@ -50,7 +50,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         : children}
 
       {error ? (
-        <p id={errorId} role="alert" className="text-destructive text-sm">
+        <p id={errorId} role="alert" className="text-destructive-text text-sm">
           {error}
         </p>
       ) : helpText ? (

package/src/components/forms/passkey-management.tsx

@@ -90,7 +90,7 @@ export function PasskeyManagement({
       </div>
 
       {error ? (
-        <p role="alert" className="text-destructive text-sm">
+        <p role="alert" className="text-destructive-text text-sm">
           {error}
         </p>
       ) : null}
@@ -125,7 +125,7 @@ export function PasskeyManagement({
                 onClick={() => void handleDelete(pk.id)}
                 disabled={deletingId === pk.id}
                 aria-label={`Remove passkey ${pk.name ?? pk.id}`}
-                className="hover:text-destructive text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                className="hover:text-destructive-text text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
               >
                 <Trash2 className="size-4" aria-hidden />
               </button>

package/src/components/overlays/dropdown-menu.tsx

@@ -88,7 +88,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive-text data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/components/primitives/button.tsx

@@ -49,6 +49,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       asChild = false,
+      // Defaults to "button" — same safe default the native element loses
+      // once it's rendered inside a <form> — but must stay overridable so
+      // consumers can pass type="submit"/"reset".
+      type = "button",
       "aria-label": ariaLabel,
       ...props
     },
@@ -75,6 +79,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       return (
         <BaseButton
           {...props}
+          type={type}
           render={renderedChild}
           nativeButton={false}
           className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
@@ -93,7 +98,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           ...props.style,
           cursor: disabled || isLoading ? "default" : "pointer",
         }}
-        type="button"
+        type={type}
         ref={ref}
         disabled={disabled || isLoading}
         aria-busy={isLoading}

package/src/index.ts

@@ -9,9 +9,9 @@ export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
 export { copyToClipboard } from "./lib/clipboard";
 export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
+export { colors } from "./styles/tokens/css-vars";
 export {
   animations,
-  colors,
   colorThemes,
   colorTokenNames,
   containers,
@@ -29,7 +29,7 @@ export {
   transitionDurations,
   breakpoints,
   zIndices,
-} from "./tokens/index";
+} from "./styles/tokens/index";
 export type {
   ColorMode,
   ColorTheme,
@@ -41,4 +41,4 @@ export type {
   SpacingToken,
   TextSizeToken,
   TrackingToken,
-} from "./tokens/index";
+} from "./styles/tokens/index";

package/src/native/index.ts

@@ -0,0 +1,11 @@
+/**
+ * React Native entry point.
+ *
+ * Kept as its own subpath (`@ponti-studios/ui/native`) because it is the only
+ * part of the package that imports `react-native`. Nothing here may import web
+ * code, so web consumers never pull React Native into their graph and native
+ * consumers never pull in react-dom.
+ */
+export { createMakeStyles, type NamedStyles } from "./make-styles";
+export { nativeShadows, type NativeShadowLayer } from "./shadows";
+export { useColorMode, useThemeColors } from "./use-theme-colors";

package/src/native/make-styles.ts

@@ -0,0 +1,32 @@
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
+export type NamedStyles = Record<string, ViewStyle | TextStyle | ImageStyle>;
+
+/**
+ * Builds a `makeStyles` helper bound to a consuming app's own theme hook.
+ *
+ * The theme *shape* stays owned by the app — this package supplies only the
+ * mechanism — so `Theme` is a type parameter rather than a type exported from
+ * here. An app calls this once with its `useTheme` and uses the result
+ * everywhere:
+ *
+ * ```ts
+ * export const makeStyles = createMakeStyles(useTheme);
+ *
+ * const useStyles = makeStyles((theme) => ({
+ *   card: { backgroundColor: theme.colors.card },
+ * }));
+ * ```
+ *
+ * The returned `useStyles` is a hook: it calls `useTheme` on every render, so
+ * styles re-resolve when the color mode changes. Styles are returned as plain
+ * objects rather than passed through `StyleSheet.create`, since they are
+ * rebuilt per render and React Native accepts plain style objects directly.
+ */
+export function createMakeStyles<Theme>(useTheme: () => Theme) {
+  return function makeStyles<T extends NamedStyles>(factory: (theme: Theme) => T & NamedStyles) {
+    return function useStyles(): T {
+      return factory(useTheme());
+    };
+  };
+}

package/src/native/shadows.ts

@@ -0,0 +1,38 @@
+import { shadows, type ShadowToken } from "../styles/tokens/index";
+
+/**
+ * One layer of a shadow in the shape React Native's `boxShadow` expects.
+ *
+ * The shared shadow tokens are authored for CSS, where each dimension carries
+ * its own unit. React Native takes bare numbers (density-independent pixels),
+ * so the unit is dropped here rather than at every call site.
+ */
+export interface NativeShadowLayer {
+  color: string;
+  offsetX: number;
+  offsetY: number;
+  blurRadius: number;
+  spreadDistance: number;
+  inset: boolean;
+}
+
+/**
+ * The shared shadow scale translated to React Native's `boxShadow` shape.
+ *
+ * Every token maps to an array of layers, including `none`, which is a single
+ * fully transparent layer rather than an empty array — that keeps the value
+ * assignable wherever a real shadow is expected.
+ */
+export const nativeShadows = Object.fromEntries(
+  Object.entries(shadows).map(([name, layers]) => [
+    name,
+    layers.map((layer) => ({
+      color: layer.color,
+      offsetX: layer.offsetX.value,
+      offsetY: layer.offsetY.value,
+      blurRadius: layer.blur.value,
+      spreadDistance: layer.spread.value,
+      inset: false,
+    })),
+  ]),
+) as Record<ShadowToken, NativeShadowLayer[]>;

package/src/native/use-theme-colors.ts

@@ -0,0 +1,19 @@
+import { useColorScheme } from "react-native";
+
+import { colorThemes, type ColorMode, type ColorTheme } from "../styles/tokens/index";
+
+/**
+ * Resolves the active color mode from the OS appearance setting.
+ *
+ * React Native's `useColorScheme` reports `null` before the appearance module
+ * has settled, so anything that isn't explicitly "dark" resolves to light —
+ * callers always receive a concrete mode rather than having to handle null.
+ */
+export function useColorMode(): ColorMode {
+  return useColorScheme() === "dark" ? "dark" : "light";
+}
+
+/** The full color token set for the active OS appearance. */
+export function useThemeColors(): ColorTheme {
+  return colorThemes[useColorMode()];
+}

package/src/{styles.css → styles/index.css}

@@ -23,6 +23,11 @@
   --color-accent-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  /* Distinct from --color-destructive: that pairs with white for solid
+   * backgrounds (buttons, badges) and is the same value in both themes.
+   * This pairs with the page background for standalone text (error
+   * messages, alert copy) and must differ per theme to stay AA-compliant. */
+  --color-destructive-text: var(--text-destructive);
   --color-success: var(--success);
   --color-warning: var(--warning);
   --color-border: var(--border-default);

package/src/{tokens → styles/tokens}/chart-colors.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { CHART_CSS_VARS } from "../constants/chart-colors";
+import { CHART_CSS_VARS } from "../../constants/chart-colors";
 
 const meta: Meta = { title: "Foundations/Charts", parameters: { layout: "fullscreen" } };
 export default meta;
@@ -78,16 +78,13 @@ export const CategoricalPalette: Story = {
         <p className="text-muted-foreground text-sm">Foundations / charts</p>
         <h1 className="text-4xl font-semibold tracking-tight">Chart colors</h1>
         <p className="text-muted-foreground max-w-2xl text-base">
-          <code className="font-mono">chart-1</code> through <code className="font-mono">
-            chart-5
-          </code>{" "}
-          are an ordinal palette for arbitrary categorical series (e.g. one line per country) —
-          there's no fixed meaning to a given slot, so they're assigned by index, not by what the
-          data represents. That's different from{" "}
-          <code className="font-mono">chart-positive</code>/<code className="font-mono">
-            chart-negative
-          </code>
-          /<code className="font-mono">chart-neutral</code> below, which carry real meaning
+          <code className="font-mono">chart-1</code> through{" "}
+          <code className="font-mono">chart-5</code> are an ordinal palette for arbitrary
+          categorical series (e.g. one line per country) — there's no fixed meaning to a given slot,
+          so they're assigned by index, not by what the data represents. That's different from{" "}
+          <code className="font-mono">chart-positive</code>/
+          <code className="font-mono">chart-negative</code>/
+          <code className="font-mono">chart-neutral</code> below, which carry real meaning
           (up/down/flat) and should stay semantic in any chart that shows a directional delta.
         </p>
       </header>
@@ -112,8 +109,8 @@ export const CategoricalPalette: Story = {
       <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
         <h2 className="text-2xl font-semibold">Grouped bar chart (mock)</h2>
         <p className="text-muted-foreground max-w-2xl text-sm">
-          Three unrelated categories, five series each — a stress test for how distinguishable
-          the palette stays side by side.
+          Three unrelated categories, five series each — a stress test for how distinguishable the
+          palette stays side by side.
         </p>
         <div className="flex items-end gap-8" style={{ height: 220 }}>
           {BAR_DATA.map((group, groupIndex) => (

package/src/{tokens → styles/tokens}/color-systems.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Button } from "../components/primitives/button";
+import { Button } from "../../components/primitives/button";
 import { colorTokenNames } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };

package/src/styles/tokens/css-vars.ts

@@ -0,0 +1,15 @@
+import { colorTokenNames, type ColorToken } from "./index";
+
+/**
+ * Color tokens as CSS `var()` references, for consumers whose runtime resolves
+ * the CSS cascade (i.e. web). Kept out of `./tokens` because React Native has
+ * no cascade — a `var(--token)` string there fails silently, rendering as an
+ * unparseable color rather than throwing.
+ */
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--${string})`>,
+);

package/src/{tokens → styles/tokens}/generated/dark.colors.generated.ts

@@ -11,11 +11,12 @@ export default {
   "text-secondary": "#b0b4ba",
   tertiary: "#777b84",
   primary: "#3e63dd",
-  destructive: "#e5484d",
+  destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
   "primary-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
+  "text-destructive": "#ff9592",
   "border-default": "#43484e",
   "focus-ring": "#3e63dd",
   "chart-1": "#3e63dd",
@@ -26,4 +27,5 @@ export default {
   "chart-positive": "#30a46c",
   "chart-negative": "#e5484d",
   "chart-neutral": "#5a6169",
+  "overlay-scrim": "#000000",
 };

package/src/{tokens → styles/tokens}/generated/dark.css

@@ -11,11 +11,12 @@
   --text-secondary: #b0b4ba;
   --tertiary: #777b84;
   --primary: #3e63dd;
-  --destructive: #e5484d;
+  --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
   --primary-foreground: #ffffff;
   --destructive-foreground: #ffffff;
+  --text-destructive: #ff9592;
   --border-default: #43484e;
   --focus-ring: #3e63dd;
   --chart-1: #3e63dd;
@@ -26,4 +27,5 @@
   --chart-positive: #30a46c;
   --chart-negative: #e5484d;
   --chart-neutral: #5a6169;
+  --overlay-scrim: #000000;
 }

package/src/{tokens → styles/tokens}/generated/light.colors.generated.ts

@@ -11,11 +11,12 @@ export default {
   "text-secondary": "#60646c",
   tertiary: "#80838d",
   primary: "#3e63dd",
-  destructive: "#e5484d",
+  destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
   "primary-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
+  "text-destructive": "#c82c31",
   "border-default": "#cdced6",
   "focus-ring": "#3e63dd",
   "chart-1": "#3e63dd",
@@ -26,4 +27,5 @@ export default {
   "chart-positive": "#30a46c",
   "chart-negative": "#e5484d",
   "chart-neutral": "#b9bbc6",
+  "overlay-scrim": "#000000",
 };

package/src/{tokens → styles/tokens}/generated/light.css

@@ -11,11 +11,12 @@
   --text-secondary: #60646c;
   --tertiary: #80838d;
   --primary: #3e63dd;
-  --destructive: #e5484d;
+  --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
   --primary-foreground: #ffffff;
   --destructive-foreground: #ffffff;
+  --text-destructive: #c82c31;
   --border-default: #cdced6;
   --focus-ring: #3e63dd;
   --chart-1: #3e63dd;
@@ -26,4 +27,5 @@
   --chart-positive: #30a46c;
   --chart-negative: #e5484d;
   --chart-neutral: #b9bbc6;
+  --overlay-scrim: #000000;
 }

package/src/{tokens → styles/tokens}/index.ts

@@ -27,14 +27,6 @@ export const colorThemes = {
   dark: darkTokens,
 } as const satisfies Record<ColorMode, ColorTheme>;
 
-export const colors = colorTokenNames.reduce(
-  (accumulator, token) => {
-    accumulator[token] = `var(--${token})`;
-    return accumulator;
-  },
-  {} as Record<ColorToken, `var(--${string})`>,
-);
-
 export const spacing = Object.fromEntries(
   Object.entries(foundations["spacing-scale"]).map(([key, value]) => [
     key.replace("-", "."),