@pickle-ui/react 1.0.0-beta.7 → 1.0.0-beta.8

package/README.md

@@ -231,8 +231,8 @@ own:
   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`.
+  the `.dark` variant, the `Text` type scale (from
+  `@pickle-ui/tokens/typography.css`), shared utilities, and element resets. Import it with a token set of your own instead of `theme.css`.
 
 Tokens follow one naming rule: `--x` is a fill and `--x-foreground` is the text
 placed on that fill. Status colors (`destructive`, `info`, `success`,
@@ -273,6 +273,8 @@ and `Card.Description` keeps `text-sm`.
 `--primary-foreground`, `--ring`, and their sidebar counterparts) for both
 schemes from one color, picking a readable foreground automatically. Radius
 and fonts pass through. Everything else keeps the defaults from `theme.css`.
+It comes from `@pickle-ui/tokens/theme`, so React Native apps derive the same
+theme from the same color.
 
 ```ts
 import { createTheme, themeToCss } from '@pickle-ui/react/theme';

package/dist/entries/theme.d.ts

@@ -1,3 +1,3 @@
-export { createTheme, themeToCss } from '../lib/theme.js';
-export type { Theme, ThemeCssOptions, ThemeFonts, ThemeOptions, ThemeVariables, } from '../lib/theme.js';
+export { createTheme, themeToCss } from '@pickle-ui/tokens/theme';
+export type { Theme, ThemeCssOptions, ThemeFonts, ThemeOptions, ThemeVariables, } from '@pickle-ui/tokens/theme';
 //# sourceMappingURL=theme.d.ts.map

package/dist/entries/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EACV,KAAK,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,cAAc,GACf,MAAM,cAAc,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAClE,YAAY,EACV,KAAK,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,cAAc,GACf,MAAM,yBAAyB,CAAC"}

package/dist/entries/theme.js

@@ -1,2 +1,2 @@
-export { createTheme, themeToCss } from '../lib/theme.js';
+export { createTheme, themeToCss } from '@pickle-ui/tokens/theme';
 //# sourceMappingURL=theme.js.map

package/dist/entries/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/entries/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pickle-ui/react",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "type": "module",
   "description": "React component library built with Base UI, shadcn/ui, Tailwind CSS, and reui.",
   "main": "dist/index.js",
@@ -56,7 +56,7 @@
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
-    "@pickle-ui/tokens": "1.0.0-beta.6"
+    "@pickle-ui/tokens": "1.0.0-beta.7"
   },
   "devDependencies": {
     "@fontsource-variable/geist": "5.2.9",

package/src/base.css

@@ -6,6 +6,13 @@
 
 @import 'tw-animate-css';
 
+/**
+ * Type scale behind `Text`'s variants and the `text-<variant>` utilities,
+ * shared with React Native. It comes from here rather than `theme.css`
+ * because the components need it whatever token set an app brings.
+ */
+@import '@pickle-ui/tokens/typography.css';
+
 @source './components/**/*.{ts,tsx}';
 
 /**
@@ -52,31 +59,6 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-/**
- * Type scale behind `Text`'s variants and the `text-<variant>` utilities.
- * It lives here rather than in `theme.css` because the components need it
- * whatever token set an app brings. Not inlined, so each size stays a CSS
- * variable an app can override from `:root` or its own `@theme`.
- */
-@theme {
-  --text-h1: 1.875rem;
-  --text-h1--line-height: calc(2.25 / 1.875);
-  --text-h2: 1.5rem;
-  --text-h2--line-height: calc(2 / 1.5);
-  --text-h3: 1.25rem;
-  --text-h3--line-height: calc(1.75 / 1.25);
-  --text-h4: 1.125rem;
-  --text-h4--line-height: calc(1.75 / 1.125);
-  --text-lead: 1rem;
-  --text-lead--line-height: 1.5;
-  --text-body: 0.875rem;
-  --text-body--line-height: 1.5;
-  --text-small: 0.75rem;
-  --text-small--line-height: 1;
-  --text-code: 0.75rem;
-  --text-code--line-height: calc(1 / 0.75);
-}
-
 /**
  * Shared focus-visible ring for components that opt into focus-ring.
  */

package/src/entries/theme.ts

@@ -1,8 +1,8 @@
-export { createTheme, themeToCss } from '../lib/theme';
+export { createTheme, themeToCss } from '@pickle-ui/tokens/theme';
 export type {
   Theme,
   ThemeCssOptions,
   ThemeFonts,
   ThemeOptions,
   ThemeVariables,
-} from '../lib/theme';
+} from '@pickle-ui/tokens/theme';

package/dist/lib/theme.d.ts

@@ -1,40 +0,0 @@
-/**
- * Theme generator: derives Pickle's brand-dependent tokens from a single
- * primary color so consumers can theme the library without hand-writing CSS
- * variables. Tokens that do not depend on the brand (neutrals, status colors)
- * keep the values from `@pickle-ui/react/theme.css`.
- */
-type Theme = {
-    dark: ThemeVariables;
-    light: ThemeVariables;
-};
-type ThemeCssOptions = {
-    darkSelector?: string;
-    lightSelector?: string;
-};
-type ThemeFonts = {
-    heading?: string;
-    mono?: string;
-    sans?: string;
-};
-type ThemeOptions = {
-    /** Font stacks, written to `--font-sans`, `--font-heading` and `--font-mono`. */
-    fonts?: ThemeFonts;
-    /** Brand color in any CSS notation (hex, rgb, hsl, oklch, …). */
-    primary: string;
-    /** Brand color for the dark scheme. Defaults to a lighter version of `primary`. */
-    primaryDark?: string;
-    /** Base radius, e.g. `'0.5rem'`. Every `rounded-*` scale derives from it. */
-    radius?: string;
-};
-type ThemeVariables = Record<`--${string}`, string>;
-/**
- * Build the light and dark token sets for a brand color. Apply the result
- * with `themeToCss` in a stylesheet, or spread `theme.light` / `theme.dark`
- * as the `style` of a wrapper element.
- */
-export declare function createTheme(options: ThemeOptions): Theme;
-/** Serialize a theme as CSS rules for the light and dark selectors. */
-export declare function themeToCss(theme: Theme, { darkSelector, lightSelector }?: ThemeCssOptions): string;
-export type { Theme, ThemeCssOptions, ThemeFonts, ThemeOptions, ThemeVariables, };
-//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,cAAc,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAOpD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,KAAK,CAWxD;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CACxB,KAAK,EAAE,KAAK,EACZ,EAAE,YAAsB,EAAE,aAAuB,EAAE,GAAE,eAAoB,GACxE,MAAM,CAOR;AAyDD,YAAY,EACV,KAAK,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,cAAc,GACf,CAAC"}

package/dist/lib/theme.js

@@ -1,82 +0,0 @@
-/**
- * Theme generator: derives Pickle's brand-dependent tokens from a single
- * primary color so consumers can theme the library without hand-writing CSS
- * variables. Tokens that do not depend on the brand (neutrals, status colors)
- * keep the values from `@pickle-ui/react/theme.css`.
- */
-import { clampChroma, converter, formatCss, parse, wcagContrast, } from 'culori';
-const toOklch = converter('oklch');
-const LIGHT_FOREGROUND = { c: 0, h: 0, l: 1, mode: 'oklch' };
-const DARK_FOREGROUND = { c: 0.006, h: 285.9, l: 0.21, mode: 'oklch' };
-/**
- * Build the light and dark token sets for a brand color. Apply the result
- * with `themeToCss` in a stylesheet, or spread `theme.light` / `theme.dark`
- * as the `style` of a wrapper element.
- */
-export function createTheme(options) {
-    const primary = parseColor(options.primary, 'primary');
-    const primaryDark = options.primaryDark
-        ? parseColor(options.primaryDark, 'primaryDark')
-        : lightenForDark(primary);
-    const shared = sharedVariables(options);
-    return {
-        dark: { ...shared, ...brandVariables(primaryDark) },
-        light: { ...shared, ...brandVariables(primary) },
-    };
-}
-/** Serialize a theme as CSS rules for the light and dark selectors. */
-export function themeToCss(theme, { darkSelector = '.dark', lightSelector = ':root' } = {}) {
-    const block = (selector, variables) => `${selector} {\n${Object.entries(variables)
-        .map(([name, value]) => `  ${name}: ${value};`)
-        .join('\n')}\n}`;
-    return `${block(lightSelector, theme.light)}\n\n${block(darkSelector, theme.dark)}\n`;
-}
-function brandVariables(primary) {
-    const foreground = foregroundFor(primary);
-    return {
-        '--primary': format(primary),
-        '--primary-foreground': format(foreground),
-        '--ring': format({ ...primary, c: primary.c * 0.6 }),
-        '--sidebar-primary': format(primary),
-        '--sidebar-primary-foreground': format(foreground),
-        '--sidebar-ring': format({ ...primary, c: primary.c * 0.6 }),
-    };
-}
-/** White or near-black, whichever reads better on the given fill. */
-function foregroundFor(fill) {
-    return wcagContrast(fill, LIGHT_FOREGROUND) >=
-        wcagContrast(fill, DARK_FOREGROUND)
-        ? LIGHT_FOREGROUND
-        : DARK_FOREGROUND;
-}
-function format(color) {
-    return formatCss(clampChroma(color, 'oklch'));
-}
-/** Lift a brand color so it stays vivid on dark surfaces. */
-function lightenForDark(color) {
-    return {
-        ...color,
-        c: color.c * 0.92,
-        l: Math.min(Math.max(color.l + 0.12, 0.6), 0.85),
-    };
-}
-function parseColor(value, name) {
-    const color = parse(value);
-    if (!color) {
-        throw new Error(`createTheme: ${name} is not a valid CSS color: ${value}`);
-    }
-    return toOklch(color);
-}
-function sharedVariables({ fonts, radius }) {
-    const variables = {};
-    if (radius)
-        variables['--radius'] = radius;
-    if (fonts?.sans)
-        variables['--font-sans'] = fonts.sans;
-    if (fonts?.heading)
-        variables['--font-heading'] = fonts.heading;
-    if (fonts?.mono)
-        variables['--font-mono'] = fonts.mono;
-    return variables;
-}
-//# sourceMappingURL=theme.js.map

package/dist/lib/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"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"}

package/src/lib/theme.test.ts

@@ -1,64 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { createTheme, themeToCss } from './theme';
-
-describe('createTheme', () => {
-  it('derives primary tokens for both schemes', () => {
-    const theme = createTheme({ primary: '#16a34a' });
-
-    expect(theme.light['--primary']).toMatch(/^oklch\(/);
-    expect(theme.dark['--primary']).toMatch(/^oklch\(/);
-    expect(theme.light['--primary']).not.toBe(theme.dark['--primary']);
-    expect(theme.light['--sidebar-primary']).toBe(theme.light['--primary']);
-  });
-
-  it('picks a readable foreground for light and dark fills', () => {
-    const onDarkFill = createTheme({ primary: '#1e3a8a' });
-    const onLightFill = createTheme({ primary: '#fde047' });
-
-    expect(onDarkFill.light['--primary-foreground']).toBe('oklch(1 0 0)');
-    expect(onLightFill.light['--primary-foreground']).not.toBe('oklch(1 0 0)');
-  });
-
-  it('uses primaryDark as given and passes radius and fonts through', () => {
-    const theme = createTheme({
-      fonts: { mono: 'Menlo', sans: 'Inter' },
-      primary: 'rebeccapurple',
-      primaryDark: 'oklch(0.8 0.1 300)',
-      radius: '1rem',
-    });
-
-    expect(theme.dark['--primary']).toBe('oklch(0.8 0.1 300)');
-    expect(theme.light['--radius']).toBe('1rem');
-    expect(theme.dark['--radius']).toBe('1rem');
-    expect(theme.light['--font-sans']).toBe('Inter');
-    expect(theme.light['--font-mono']).toBe('Menlo');
-    expect(theme.light['--font-heading']).toBeUndefined();
-  });
-
-  it('rejects colors it cannot parse', () => {
-    expect(() => createTheme({ primary: 'not-a-color' })).toThrow(
-      /not a valid CSS color/,
-    );
-  });
-});
-
-describe('themeToCss', () => {
-  it('serializes both schemes under their selectors', () => {
-    const css = themeToCss(createTheme({ primary: '#000', radius: '4px' }));
-
-    expect(css).toMatch(/^:root \{\n {2}--radius: 4px;\n/);
-    expect(css).toContain('\n.dark {\n');
-    expect(css).toContain('--primary-foreground: oklch(1 0 0);');
-  });
-
-  it('accepts custom selectors', () => {
-    const css = themeToCss(createTheme({ primary: '#000' }), {
-      darkSelector: '[data-theme="dark"]',
-      lightSelector: 'html',
-    });
-
-    expect(css.startsWith('html {')).toBe(true);
-    expect(css).toContain('[data-theme="dark"] {');
-  });
-});

package/src/lib/theme.ts

@@ -1,143 +0,0 @@
-/**
- * Theme generator: derives Pickle's brand-dependent tokens from a single
- * primary color so consumers can theme the library without hand-writing CSS
- * variables. Tokens that do not depend on the brand (neutrals, status colors)
- * keep the values from `@pickle-ui/react/theme.css`.
- */
-
-import {
-  clampChroma,
-  converter,
-  formatCss,
-  type Oklch,
-  parse,
-  wcagContrast,
-} from 'culori';
-
-type Theme = {
-  dark: ThemeVariables;
-  light: ThemeVariables;
-};
-
-type ThemeCssOptions = {
-  darkSelector?: string;
-  lightSelector?: string;
-};
-
-type ThemeFonts = {
-  heading?: string;
-  mono?: string;
-  sans?: string;
-};
-
-type ThemeOptions = {
-  /** Font stacks, written to `--font-sans`, `--font-heading` and `--font-mono`. */
-  fonts?: ThemeFonts;
-  /** Brand color in any CSS notation (hex, rgb, hsl, oklch, …). */
-  primary: string;
-  /** Brand color for the dark scheme. Defaults to a lighter version of `primary`. */
-  primaryDark?: string;
-  /** Base radius, e.g. `'0.5rem'`. Every `rounded-*` scale derives from it. */
-  radius?: string;
-};
-
-type ThemeVariables = Record<`--${string}`, string>;
-
-const toOklch = converter('oklch');
-
-const LIGHT_FOREGROUND: Oklch = { c: 0, h: 0, l: 1, mode: 'oklch' };
-const DARK_FOREGROUND: Oklch = { c: 0.006, h: 285.9, l: 0.21, mode: 'oklch' };
-
-/**
- * Build the light and dark token sets for a brand color. Apply the result
- * with `themeToCss` in a stylesheet, or spread `theme.light` / `theme.dark`
- * as the `style` of a wrapper element.
- */
-export function createTheme(options: ThemeOptions): Theme {
-  const primary = parseColor(options.primary, 'primary');
-  const primaryDark = options.primaryDark
-    ? parseColor(options.primaryDark, 'primaryDark')
-    : lightenForDark(primary);
-  const shared = sharedVariables(options);
-
-  return {
-    dark: { ...shared, ...brandVariables(primaryDark) },
-    light: { ...shared, ...brandVariables(primary) },
-  };
-}
-
-/** Serialize a theme as CSS rules for the light and dark selectors. */
-export function themeToCss(
-  theme: Theme,
-  { darkSelector = '.dark', lightSelector = ':root' }: ThemeCssOptions = {},
-): string {
-  const block = (selector: string, variables: ThemeVariables) =>
-    `${selector} {\n${Object.entries(variables)
-      .map(([name, value]) => `  ${name}: ${value};`)
-      .join('\n')}\n}`;
-
-  return `${block(lightSelector, theme.light)}\n\n${block(darkSelector, theme.dark)}\n`;
-}
-
-function brandVariables(primary: Oklch): ThemeVariables {
-  const foreground = foregroundFor(primary);
-
-  return {
-    '--primary': format(primary),
-    '--primary-foreground': format(foreground),
-    '--ring': format({ ...primary, c: primary.c * 0.6 }),
-    '--sidebar-primary': format(primary),
-    '--sidebar-primary-foreground': format(foreground),
-    '--sidebar-ring': format({ ...primary, c: primary.c * 0.6 }),
-  };
-}
-
-/** White or near-black, whichever reads better on the given fill. */
-function foregroundFor(fill: Oklch) {
-  return wcagContrast(fill, LIGHT_FOREGROUND) >=
-    wcagContrast(fill, DARK_FOREGROUND)
-    ? LIGHT_FOREGROUND
-    : DARK_FOREGROUND;
-}
-
-function format(color: Oklch) {
-  return formatCss(clampChroma(color, 'oklch'));
-}
-
-/** Lift a brand color so it stays vivid on dark surfaces. */
-function lightenForDark(color: Oklch): Oklch {
-  return {
-    ...color,
-    c: color.c * 0.92,
-    l: Math.min(Math.max(color.l + 0.12, 0.6), 0.85),
-  };
-}
-
-function parseColor(value: string, name: string): Oklch {
-  const color = parse(value);
-
-  if (!color) {
-    throw new Error(`createTheme: ${name} is not a valid CSS color: ${value}`);
-  }
-
-  return toOklch(color);
-}
-
-function sharedVariables({ fonts, radius }: ThemeOptions): ThemeVariables {
-  const variables: ThemeVariables = {};
-
-  if (radius) variables['--radius'] = radius;
-  if (fonts?.sans) variables['--font-sans'] = fonts.sans;
-  if (fonts?.heading) variables['--font-heading'] = fonts.heading;
-  if (fonts?.mono) variables['--font-mono'] = fonts.mono;
-
-  return variables;
-}
-
-export type {
-  Theme,
-  ThemeCssOptions,
-  ThemeFonts,
-  ThemeOptions,
-  ThemeVariables,
-};