@pickle-ui/react 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -228,7 +228,8 @@ own:
 
 - `@pickle-ui/react/theme.css` holds the tokens only: the Tailwind theme mapping and
   the light and dark values. Import it to share Pickle's palette in a project
-  that does not use the components.
+  that does not use the components. It re-exports `@pickle-ui/tokens/theme.css`,
+  which `@pickle-ui/react` installs as a dependency.
 - `@pickle-ui/react/base.css` holds everything else: animation and variant plugins,
   the `.dark` variant, the `Text` type scale, shared utilities, and element
   resets. Import it with a token set of your own instead of `theme.css`.
@@ -482,9 +483,11 @@ pnpm run lint
 
 ## Releasing
 
-Run the manually dispatched `Release` GitHub Actions workflow and choose a
-patch, minor, or major bump. The workflow publishes the npm package, version
-commit, tag, and GitHub Release.
+Releases use [Changesets](https://changesets.dev). Add a changeset to every
+pull request that changes a package (`pnpm changeset`). On `main`, the
+`Release` workflow keeps a "Version Packages" pull request up to date; merging
+it publishes each package that changed. Packages version independently, and a
+new `@pickle-ui/tokens` release always comes with a new `@pickle-ui/react`.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pickle-ui/react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "type": "module",
   "description": "React component library built with Base UI, shadcn/ui, Tailwind CSS, and reui.",
   "main": "dist/index.js",
@@ -36,18 +36,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
-    "build": "pnpm run clean && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths",
-    "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "test": "vitest run",
-    "doctor": "react-doctor",
-    "prepublishOnly": "pnpm run build",
-    "release": "release-it"
-  },
   "keywords": [
     "react",
     "components",
@@ -65,7 +53,8 @@
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "@pickle-ui/tokens": "1.0.0-beta.6"
   },
   "devDependencies": {
     "@fontsource-variable/geist": "5.2.9",
@@ -90,7 +79,6 @@
     "react-doctor": "^0.5.6",
     "react-dom": "^19.2.7",
     "react-hook-form": "^7.79.0",
-    "release-it": "^20.2.0",
     "storybook": "^10.6.3",
     "storybook-addon-pseudo-states": "^10.6.3",
     "tailwindcss": "^4.3.0",
@@ -105,5 +93,15 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "tailwindcss": "^4.0.0"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "doctor": "react-doctor"
   }
-}
+}

package/src/base.css

@@ -50,7 +50,7 @@
   }
 }
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 /**
  * Type scale behind `Text`'s variants and the `text-<variant>` utilities.

package/src/theme.css

@@ -1,195 +1 @@
-/**
- * Pickle design tokens: Tailwind theme mapping plus light and dark values.
- * Import this file alone to reuse the tokens without Pickle's base styles,
- * or override any variable after importing `@pickle-ui/react/styles.css`.
- */
-
-@theme inline {
-  --font-sans: var(--font-sans);
-  --font-heading: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive-subtle: var(--destructive-subtle);
-  --color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-info-subtle: var(--info-subtle);
-  --color-info-subtle-foreground: var(--info-subtle-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-success-subtle: var(--success-subtle);
-  --color-success-subtle-foreground: var(--success-subtle-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-warning-subtle: var(--warning-subtle);
-  --color-warning-subtle-foreground: var(--warning-subtle-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --animate-skeleton: skeleton 2s -1s infinite linear;
-  @keyframes skeleton {
-    to {
-      background-position: -200% 0;
-    }
-  }
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: var(--color-white);
-  --foreground: var(--color-neutral-800);
-  --card: var(--color-white);
-  --card-foreground: var(--color-neutral-800);
-  --popover: var(--color-white);
-  --popover-foreground: var(--color-neutral-800);
-  --primary: var(--color-neutral-800);
-  --primary-foreground: var(--color-neutral-50);
-  --secondary: --alpha(var(--color-black) / 4%);
-  --secondary-foreground: var(--color-neutral-800);
-  --muted: --alpha(var(--color-black) / 4%);
-  --muted-foreground: color-mix(
-    in srgb,
-    var(--color-neutral-500) 90%,
-    var(--color-black)
-  );
-  --accent: --alpha(var(--color-black) / 4%);
-  --accent-foreground: var(--color-neutral-800);
-  --destructive: var(--color-red-500);
-  --destructive-foreground: var(--color-white);
-  --destructive-subtle: --alpha(var(--destructive) / 8%);
-  --destructive-subtle-foreground: var(--color-red-700);
-  --info: var(--color-blue-500);
-  --info-foreground: var(--color-white);
-  --info-subtle: --alpha(var(--info) / 8%);
-  --info-subtle-foreground: var(--color-blue-700);
-  --success: var(--color-emerald-500);
-  --success-foreground: var(--color-white);
-  --success-subtle: --alpha(var(--success) / 8%);
-  --success-subtle-foreground: var(--color-emerald-700);
-  --warning: var(--color-amber-500);
-  --warning-foreground: var(--color-amber-950);
-  --warning-subtle: --alpha(var(--warning) / 8%);
-  --warning-subtle-foreground: var(--color-amber-700);
-  --border: --alpha(var(--color-black) / 8%);
-  --input: --alpha(var(--color-black) / 10%);
-  --ring: var(--color-neutral-400);
-  --chart-1: var(--color-blue-600);
-  --chart-2: var(--color-emerald-600);
-  --chart-3: var(--color-amber-600);
-  --chart-4: var(--color-purple-600);
-  --chart-5: var(--color-rose-600);
-  --sidebar: var(--color-neutral-50);
-  --sidebar-foreground: color-mix(
-    in srgb,
-    var(--color-neutral-800) 64%,
-    var(--sidebar)
-  );
-  --sidebar-primary: var(--color-neutral-800);
-  --sidebar-primary-foreground: var(--color-neutral-50);
-  --sidebar-accent: --alpha(var(--color-black) / 4%);
-  --sidebar-accent-foreground: var(--color-neutral-800);
-  --sidebar-border: --alpha(var(--color-black) / 6%);
-  --sidebar-ring: var(--color-neutral-400);
-}
-
-.dark {
-  --background: color-mix(
-    in srgb,
-    var(--color-neutral-950) 96%,
-    var(--color-white)
-  );
-  --foreground: var(--color-neutral-100);
-  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
-  --card-foreground: var(--color-neutral-100);
-  --popover: color-mix(in srgb, var(--background) 96%, var(--color-white));
-  --popover-foreground: var(--color-neutral-100);
-  --primary: var(--color-neutral-100);
-  --primary-foreground: var(--color-neutral-800);
-  --secondary: --alpha(var(--color-white) / 4%);
-  --secondary-foreground: var(--color-neutral-100);
-  --muted: --alpha(var(--color-white) / 4%);
-  --muted-foreground: color-mix(
-    in srgb,
-    var(--color-neutral-500) 90%,
-    var(--color-white)
-  );
-  --accent: --alpha(var(--color-white) / 4%);
-  --accent-foreground: var(--color-neutral-100);
-  --destructive: color-mix(
-    in srgb,
-    var(--color-red-500) 90%,
-    var(--color-white)
-  );
-  --destructive-foreground: var(--color-white);
-  --destructive-subtle: --alpha(var(--destructive) / 16%);
-  --destructive-subtle-foreground: var(--color-red-400);
-  --info: var(--color-blue-500);
-  --info-foreground: var(--color-white);
-  --info-subtle: --alpha(var(--info) / 16%);
-  --info-subtle-foreground: var(--color-blue-400);
-  --success: var(--color-emerald-500);
-  --success-foreground: var(--color-white);
-  --success-subtle: --alpha(var(--success) / 16%);
-  --success-subtle-foreground: var(--color-emerald-400);
-  --warning: var(--color-amber-500);
-  --warning-foreground: var(--color-amber-950);
-  --warning-subtle: --alpha(var(--warning) / 16%);
-  --warning-subtle-foreground: var(--color-amber-400);
-  --border: --alpha(var(--color-white) / 6%);
-  --input: --alpha(var(--color-white) / 8%);
-  --ring: var(--color-neutral-500);
-  --chart-1: var(--color-blue-500);
-  --chart-2: var(--color-emerald-500);
-  --chart-3: var(--color-amber-500);
-  --chart-4: var(--color-purple-500);
-  --chart-5: var(--color-rose-500);
-  --sidebar: color-mix(
-    in srgb,
-    var(--color-neutral-950) 97%,
-    var(--color-white)
-  );
-  --sidebar-foreground: color-mix(
-    in srgb,
-    var(--color-neutral-100) 64%,
-    var(--sidebar)
-  );
-  --sidebar-primary: var(--color-neutral-100);
-  --sidebar-primary-foreground: var(--color-neutral-800);
-  --sidebar-accent: --alpha(var(--color-white) / 4%);
-  --sidebar-accent-foreground: var(--color-neutral-100);
-  --sidebar-border: --alpha(var(--color-white) / 5%);
-  --sidebar-ring: var(--color-neutral-500);
-}
+@import '@pickle-ui/tokens/theme.css';