@greese/ui 0.0.0-stage → 1.1.0

package/dist/theme.d.ts

@@ -0,0 +1,71 @@
+import { type TypeSpec, type TypeVariant } from './typography.ts';
+import { scalarTokens, type ColorRole, type ScalarGroup, type TokenPair } from './tokens.ts';
+/** A color override: one value for both schemes, or a light/dark pair. */
+export type ColorValue = string | TokenPair;
+/** Tokens the system doesn't have, by group: `{ color: { 'brand-ink': '#1b1340' } }`. */
+export type ExtendTokens = {
+    /** A new color role: one value, or a light/dark pair. */
+    color?: Record<string, ColorValue>;
+} & {
+    [G in ScalarGroup]?: Record<string, string>;
+};
+export type ThemeOptions = {
+    /** Scopes the theme: `[data-greese-theme="<name>"]`. Letters, digits, `-`. */
+    name: string;
+    color?: Partial<Record<ColorRole, ColorValue>>;
+    /**
+     * Adds tokens that don't exist yet, each declared as
+     * `--greese-<group>-<key>` in this theme (in both schemes, for a color).
+     * Names that already exist, and groups that don't, throw: set an existing
+     * token through its group above.
+     */
+    extend?: ExtendTokens;
+    /**
+     * Type system values by variant, then `base` or a breakpoint, then property
+     * (`{ h1: { base: { size: '2rem' }, lg: { size: '4rem' } } }`). What you set
+     * replaces the default at that point and the rest stays. The breakpoints are
+     * the defaults' widths; a build with its own uses the SCSS kit's
+     * `typography()` instead.
+     */
+    typography?: Partial<Record<TypeVariant, TypeSpec>>;
+} & {
+    [G in ScalarGroup]?: Partial<Record<keyof (typeof scalarTokens)[G], string>>;
+};
+export interface Theme {
+    readonly name: string;
+    /**
+     * Static CSS for this theme, in `@layer greese.theme`. Generated once, here;
+     * nothing is computed per render. ThemeProvider injects it, or serve it
+     * yourself and set `data-greese-theme` on any element (`<html>` included).
+     */
+    readonly css: string;
+}
+/**
+ * Fills in what follows a brand color the theme set: its `Content` color,
+ * the more readable of white and near-black (WCAG AA), measured per scheme,
+ * and its `Strong` shade, mixed by the browser from the color itself
+ * (darker in light, lighter in dark). Anything the theme sets wins, and a
+ * color that can't be measured (not a hex) keeps the default content.
+ */
+export declare const deriveColors: (overrides: Partial<Record<ColorRole, ColorValue>>) => Partial<Record<ColorRole, ColorValue>>;
+/**
+ * Builds a theme: the default tokens with your overrides applied. Setting a
+ * brand color (`primary`, `secondary`, `tertiary`, `accent`, `negative`)
+ * also sets its `Content` and `Strong` colors unless you set them: see
+ * {@link deriveColors}.
+ *
+ * ```ts
+ * export const brand = createTheme({
+ *   name: 'brand',
+ *   color: { primary: { light: '#7c3aed', dark: '#c4b5fd' } },
+ *   radius: { md: '12px' },
+ * })
+ * ```
+ *
+ * A theme is complete, not a delta: its CSS declares every token, so a
+ * ThemeProvider renders exactly that theme whatever its ancestors are. Themes
+ * do not stack; to extend one, create another with more overrides.
+ *
+ * Call it at module scope, not during render: the result is meant to be static.
+ */
+export declare const createTheme: (options: ThemeOptions) => Theme;

package/dist/theme.js

@@ -0,0 +1,180 @@
+import { allDurationKeys, cssVar, decls, kebab, LAYER_ORDER, reducedMotionDecls, SCHEME_ATTR, THEME_ATTR, } from "./css.js";
+import { contentColor } from "./contrast.js";
+import { mergeTypography, typography as defaultTypography, typographyByBreakpoint, } from "./typography.js";
+import { color, scalarTokens, } from "./tokens.js";
+const NAME = /^[a-z][a-z0-9-]*$/i;
+// Theme values land inside a <style> element: refuse anything that could end a
+// declaration, a rule, or the element itself.
+const UNSAFE_VALUE = /[;{}<>]/;
+const check = (property, value) => {
+    if (UNSAFE_VALUE.test(value)) {
+        throw new Error(`createTheme: invalid value for ${property}: ${JSON.stringify(value)}`);
+    }
+    return value;
+};
+/** Colors whose `Content` (and, where it exists, `Strong`) follow them. */
+const DERIVED = ['primary', 'secondary', 'tertiary', 'accent', 'negative'];
+const toPair = (value) => typeof value === 'string' ? { light: value, dark: value } : value;
+/**
+ * Fills in what follows a brand color the theme set: its `Content` color,
+ * the more readable of white and near-black (WCAG AA), measured per scheme,
+ * and its `Strong` shade, mixed by the browser from the color itself
+ * (darker in light, lighter in dark). Anything the theme sets wins, and a
+ * color that can't be measured (not a hex) keeps the default content.
+ */
+export const deriveColors = (overrides) => {
+    const out = { ...overrides };
+    for (const role of DERIVED) {
+        const main = overrides[role];
+        if (main === undefined)
+            continue;
+        const pair = toPair(main);
+        const content = `${role}Content`;
+        if (overrides[content] === undefined) {
+            const fallback = color[content];
+            out[content] = {
+                light: contentColor(pair.light) ?? fallback.light,
+                dark: contentColor(pair.dark) ?? fallback.dark,
+            };
+        }
+        const strong = `${role}Strong`;
+        if (strong in color && overrides[strong] === undefined) {
+            const self = `var(${cssVar('color', role)})`;
+            out[strong] = {
+                light: `color-mix(in oklab, ${self} 80%, #000)`,
+                dark: `color-mix(in oklab, ${self} 70%, #fff)`,
+            };
+        }
+    }
+    return out;
+};
+/**
+ * Builds a theme: the default tokens with your overrides applied. Setting a
+ * brand color (`primary`, `secondary`, `tertiary`, `accent`, `negative`)
+ * also sets its `Content` and `Strong` colors unless you set them: see
+ * {@link deriveColors}.
+ *
+ * ```ts
+ * export const brand = createTheme({
+ *   name: 'brand',
+ *   color: { primary: { light: '#7c3aed', dark: '#c4b5fd' } },
+ *   radius: { md: '12px' },
+ * })
+ * ```
+ *
+ * A theme is complete, not a delta: its CSS declares every token, so a
+ * ThemeProvider renders exactly that theme whatever its ancestors are. Themes
+ * do not stack; to extend one, create another with more overrides.
+ *
+ * Call it at module scope, not during render: the result is meant to be static.
+ */
+export const createTheme = (options) => {
+    const { name, color: colorOverrides = {}, extend = {}, typography: typeChanges, ...scalarOverrides } = options;
+    if (!NAME.test(name)) {
+        throw new Error(`createTheme: name must match ${NAME}, got ${JSON.stringify(name)}`);
+    }
+    const light = [];
+    const dark = [];
+    const colors = deriveColors(colorOverrides);
+    for (const [role, fallback] of Object.entries(color)) {
+        const prop = cssVar('color', role);
+        const pair = toPair(colors[role] ?? fallback);
+        light.push([prop, check(prop, pair.light)]);
+        dark.push([prop, check(prop, pair.dark)]);
+    }
+    const base = [];
+    for (const [group, defaults] of Object.entries(scalarTokens)) {
+        const overrides = scalarOverrides[group] ?? {};
+        for (const [key, fallback] of Object.entries(defaults)) {
+            const prop = cssVar(group, key);
+            base.push([prop, check(prop, overrides[key] ?? fallback)]);
+        }
+    }
+    addExtended(extend, base, light, dark);
+    // Complete like the rest: every variant, the smallest screen's values with
+    // the theme's tokens and the changes in media queries.
+    const steps = typographyByBreakpoint(mergeTypography(defaultTypography, typeChanges));
+    for (const [, list] of steps)
+        for (const [prop, value] of list)
+            check(prop, value);
+    base.push(...steps.filter(([min]) => min === 0).flatMap(([, list]) => list));
+    return {
+        name,
+        css: themeCss(name, base, light, dark, steps.filter(([min]) => min > 0)),
+    };
+};
+const TOKEN_KEY = /^[a-z0-9][a-z0-9-]*$/;
+/** Declares `extend`'s new tokens, refusing names that exist or groups that don't. */
+const addExtended = (extend, base, light, dark) => {
+    for (const [group, values] of Object.entries(extend)) {
+        const known = group === 'color'
+            ? color
+            : scalarTokens[group];
+        if (!known)
+            throw new Error(`createTheme: no token group ${group} to extend`);
+        for (const [key, value] of Object.entries(values ?? {})) {
+            const name = kebab(key);
+            if (!TOKEN_KEY.test(name) || Object.keys(known).some((k) => kebab(k) === name)) {
+                throw new Error(`createTheme: ${group} token ${key} is invalid or already exists`);
+            }
+            const prop = cssVar(group, name);
+            if (group === 'color') {
+                const pair = toPair(value);
+                light.push([prop, check(prop, pair.light)]);
+                dark.push([prop, check(prop, pair.dark)]);
+            }
+            else {
+                base.push([prop, check(prop, value)]);
+            }
+        }
+    }
+};
+/*
+ * Every scheme boundary inside a ThemeProvider stamps both attributes on one
+ * element, so these rules only need compound selectors on that element. The
+ * `:root[scheme] T:not([scheme])` rules cover a scheme forced on <html> (by
+ * useColorScheme) above a theme that sets none itself.
+ *
+ * Layer `greese.theme` sits above `greese.tokens`, so a theme beats the default
+ * scheme rules on the same element regardless of specificity.
+ */
+const themeCss = (name, base, light, dark, media) => {
+    const T = `[${THEME_ATTR}='${name}']`;
+    const S = (scheme) => `[${SCHEME_ATTR}='${scheme}']`;
+    return `${LAYER_ORDER}
+@layer greese.theme {
+  ${T} {
+${decls([...base, ...light], '    ')}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ${T}:not(${S('light')}) {
+${decls(dark, '      ')}
+    }
+  }
+
+  ${T}${S('dark')},
+  :root${S('dark')} ${T}:not([${SCHEME_ATTR}]) {
+${decls(dark, '    ')}
+  }
+
+  :root${S('light')} ${T}:not([${SCHEME_ATTR}]) {
+${decls(light, '    ')}
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ${T} {
+${decls(reducedMotionDecls(allDurationKeys), '      ')}
+    }
+  }
+${media
+        .map(([min, list]) => `
+  @media (width >= ${min}px) {
+    ${T} {
+${decls(list, '      ')}
+    }
+  }`)
+        .join('\n')}
+}
+`;
+};

package/dist/tokens.css

@@ -0,0 +1,253 @@
+/* GENERATED by @greese/ui from src/tokens.ts - do not edit. */
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.tokens {
+  :root {
+    --greese-loaded: 1;
+    --greese-space-0: 0;
+    --greese-space-1: 0.25rem;
+    --greese-space-2: 0.5rem;
+    --greese-space-3: 0.75rem;
+    --greese-space-4: 1rem;
+    --greese-space-5: 1.5rem;
+    --greese-space-6: 2rem;
+    --greese-space-7: 3rem;
+    --greese-space-8: 4rem;
+    --greese-radius-none: 0;
+    --greese-radius-sm: 4px;
+    --greese-radius-md: 8px;
+    --greese-radius-lg: 16px;
+    --greese-radius-xl: 24px;
+    --greese-radius-pill: 999px;
+    --greese-radius-round: 50%;
+    --greese-corner-control: var(--greese-radius-md);
+    --greese-corner-field: var(--greese-radius-md);
+    --greese-corner-surface: var(--greese-radius-lg);
+    --greese-corner-panel: var(--greese-radius-md);
+    --greese-corner-inset: var(--greese-radius-sm);
+    --greese-corner-pill: var(--greese-radius-pill);
+    --greese-corner-round: var(--greese-radius-round);
+    --greese-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --greese-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --greese-font-weight-regular: 400;
+    --greese-font-weight-medium: 500;
+    --greese-font-weight-semibold: 600;
+    --greese-font-weight-bold: 700;
+    --greese-line-height-tight: 1.25;
+    --greese-line-height-snug: 1.375;
+    --greese-line-height-normal: 1.5;
+    --greese-shadow-sm: 0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent);
+    --greese-shadow-md: 0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent);
+    --greese-shadow-lg: 0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent);
+    --greese-z-index-dropdown: 1000;
+    --greese-z-index-sticky: 1100;
+    --greese-z-index-overlay: 1300;
+    --greese-z-index-modal: 1400;
+    --greese-z-index-popover: 1500;
+    --greese-z-index-toast: 1600;
+    --greese-z-index-tooltip: 1700;
+    --greese-duration-fast: 120ms;
+    --greese-duration-normal: 200ms;
+    --greese-duration-slow: 320ms;
+    --greese-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --greese-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --greese-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --greese-breakpoint-xs: 0px;
+    --greese-breakpoint-sm: 600px;
+    --greese-breakpoint-md: 900px;
+    --greese-breakpoint-lg: 1200px;
+    --greese-breakpoint-xl: 1536px;
+    --greese-type-p1-font-size: 1.125rem;
+    --greese-type-p1-font-weight: 400;
+    --greese-type-p1-line-height: 1.6;
+    --greese-type-p1-letter-spacing: 0;
+    --greese-type-p2-font-size: 1rem;
+    --greese-type-p2-font-weight: 400;
+    --greese-type-p2-line-height: 1.55;
+    --greese-type-p2-letter-spacing: 0;
+    --greese-type-p3-font-size: 0.875rem;
+    --greese-type-p3-font-weight: 400;
+    --greese-type-p3-line-height: 1.5;
+    --greese-type-p3-letter-spacing: 0;
+    --greese-type-h1-font-size: 2.25rem;
+    --greese-type-h1-font-weight: 700;
+    --greese-type-h1-line-height: 1.15;
+    --greese-type-h1-letter-spacing: -0.02em;
+    --greese-type-h1-text-wrap: balance;
+    --greese-type-h2-font-size: 1.875rem;
+    --greese-type-h2-font-weight: 700;
+    --greese-type-h2-line-height: 1.2;
+    --greese-type-h2-letter-spacing: -0.015em;
+    --greese-type-h2-text-wrap: balance;
+    --greese-type-h3-font-size: 1.5rem;
+    --greese-type-h3-font-weight: 600;
+    --greese-type-h3-line-height: 1.25;
+    --greese-type-h3-letter-spacing: -0.01em;
+    --greese-type-h3-text-wrap: balance;
+    --greese-type-h4-font-size: 1.25rem;
+    --greese-type-h4-font-weight: 600;
+    --greese-type-h4-line-height: 1.3;
+    --greese-type-h4-letter-spacing: 0;
+    --greese-type-h4-text-wrap: balance;
+    --greese-type-h5-font-size: 1.125rem;
+    --greese-type-h5-font-weight: 600;
+    --greese-type-h5-line-height: 1.35;
+    --greese-type-h5-letter-spacing: 0;
+    --greese-type-h5-text-wrap: balance;
+    --greese-type-h6-font-size: 1rem;
+    --greese-type-h6-font-weight: 600;
+    --greese-type-h6-line-height: 1.4;
+    --greese-type-h6-letter-spacing: 0;
+    --greese-type-h6-text-wrap: balance;
+    --greese-type-s1-font-size: 1.25rem;
+    --greese-type-s1-font-weight: 500;
+    --greese-type-s1-line-height: 1.4;
+    --greese-type-s1-letter-spacing: 0;
+    --greese-type-s2-font-size: 1.125rem;
+    --greese-type-s2-font-weight: 500;
+    --greese-type-s2-line-height: 1.45;
+    --greese-type-s2-letter-spacing: 0;
+    --greese-type-caption-font-size: 0.75rem;
+    --greese-type-caption-font-weight: 400;
+    --greese-type-caption-line-height: 1.4;
+    --greese-type-caption-letter-spacing: 0.02em;
+    --greese-type-button-font-size: 0.9375rem;
+    --greese-type-button-font-weight: 600;
+    --greese-type-button-line-height: 1.25;
+    --greese-type-button-letter-spacing: 0;
+  }
+
+  @media (width >= 900px) {
+    :root {
+      --greese-type-p1-font-size: 1.25rem;
+      --greese-type-h1-font-size: 2.75rem;
+      --greese-type-h2-font-size: 2.25rem;
+      --greese-type-h3-font-size: 1.75rem;
+      --greese-type-h4-font-size: 1.375rem;
+      --greese-type-h5-font-size: 1.25rem;
+      --greese-type-h6-font-size: 1.0625rem;
+      --greese-type-s1-font-size: 1.375rem;
+    }
+  }
+
+  @media (width >= 1200px) {
+    :root {
+      --greese-type-h1-font-size: 3.5rem;
+      --greese-type-h1-line-height: 1.1;
+      --greese-type-h2-font-size: 2.75rem;
+      --greese-type-h3-font-size: 2rem;
+      --greese-type-h4-font-size: 1.5rem;
+    }
+  }
+
+  :root,
+  [data-greese-scheme='light'],
+  [data-greese-scheme='system'] {
+    color-scheme: light;
+    --greese-color-canvas: #ffffff;
+    --greese-color-surface: #f5f7f9;
+    --greese-color-surface-overlay: #ffffff;
+    --greese-color-fg: #11171c;
+    --greese-color-fg-muted: #505e6d;
+    --greese-color-border: #d7dfe7;
+    --greese-color-border-strong: #a3b3c4;
+    --greese-color-track: #d7dfe7;
+    --greese-color-primary: #2771e0;
+    --greese-color-primary-strong: #1356b8;
+    --greese-color-primary-content: #ffffff;
+    --greese-color-secondary: #7e5bd0;
+    --greese-color-secondary-strong: #6443ab;
+    --greese-color-secondary-content: #ffffff;
+    --greese-color-tertiary: #007069;
+    --greese-color-tertiary-strong: #00544f;
+    --greese-color-tertiary-content: #ffffff;
+    --greese-color-accent: #c13b7b;
+    --greese-color-accent-strong: #9c2661;
+    --greese-color-accent-content: #ffffff;
+    --greese-color-focus-ring: var(--greese-color-primary);
+    --greese-color-positive: #007231;
+    --greese-color-negative: #ae0914;
+    --greese-color-negative-content: #ffffff;
+    --greese-color-warning: #8a5f00;
+    --greese-color-info: #00668f;
+    --greese-color-white: #ffffff;
+    --greese-color-black: #000000;
+    --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 45%, transparent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-greese-scheme='light']),
+    [data-greese-scheme='system'] {
+      color-scheme: dark;
+      --greese-color-canvas: #11171c;
+      --greese-color-surface: #2a333c;
+      --greese-color-surface-overlay: #3c4854;
+      --greese-color-fg: #e9edf2;
+      --greese-color-fg-muted: #a3b3c4;
+      --greese-color-border: #3c4854;
+      --greese-color-border-strong: #505e6d;
+      --greese-color-track: #687889;
+      --greese-color-primary: #81b2ff;
+      --greese-color-primary-strong: #aaccff;
+      --greese-color-primary-content: #11171c;
+      --greese-color-secondary: #b69fff;
+      --greese-color-secondary-strong: #cdbfff;
+      --greese-color-secondary-content: #11171c;
+      --greese-color-tertiary: #5dcec5;
+      --greese-color-tertiary-strong: #94e1da;
+      --greese-color-tertiary-content: #11171c;
+      --greese-color-accent: #ff81b6;
+      --greese-color-accent-strong: #ffaecd;
+      --greese-color-accent-content: #11171c;
+      --greese-color-focus-ring: var(--greese-color-primary-strong);
+      --greese-color-positive: #61cf7e;
+      --greese-color-negative: #ff8b7f;
+      --greese-color-negative-content: #11171c;
+      --greese-color-warning: #feb93d;
+      --greese-color-info: #5ac0f7;
+      --greese-color-white: #ffffff;
+      --greese-color-black: #000000;
+      --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 60%, transparent);
+    }
+  }
+
+  [data-greese-scheme='dark'] {
+    color-scheme: dark;
+    --greese-color-canvas: #11171c;
+    --greese-color-surface: #2a333c;
+    --greese-color-surface-overlay: #3c4854;
+    --greese-color-fg: #e9edf2;
+    --greese-color-fg-muted: #a3b3c4;
+    --greese-color-border: #3c4854;
+    --greese-color-border-strong: #505e6d;
+    --greese-color-track: #687889;
+    --greese-color-primary: #81b2ff;
+    --greese-color-primary-strong: #aaccff;
+    --greese-color-primary-content: #11171c;
+    --greese-color-secondary: #b69fff;
+    --greese-color-secondary-strong: #cdbfff;
+    --greese-color-secondary-content: #11171c;
+    --greese-color-tertiary: #5dcec5;
+    --greese-color-tertiary-strong: #94e1da;
+    --greese-color-tertiary-content: #11171c;
+    --greese-color-accent: #ff81b6;
+    --greese-color-accent-strong: #ffaecd;
+    --greese-color-accent-content: #11171c;
+    --greese-color-focus-ring: var(--greese-color-primary-strong);
+    --greese-color-positive: #61cf7e;
+    --greese-color-negative: #ff8b7f;
+    --greese-color-negative-content: #11171c;
+    --greese-color-warning: #feb93d;
+    --greese-color-info: #5ac0f7;
+    --greese-color-white: #ffffff;
+    --greese-color-black: #000000;
+    --greese-color-scrim: color-mix(in srgb, var(--greese-color-black) 60%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --greese-duration-fast: 0.01ms;
+      --greese-duration-normal: 0.01ms;
+      --greese-duration-slow: 0.01ms;
+    }
+  }
+}