@greese/ui 0.0.0-stage → 1.1.0

package/dist/tokens.d.ts

@@ -0,0 +1,343 @@
+/** Light and dark values for one semantic role. */
+export interface TokenPair {
+    light: string;
+    dark: string;
+}
+/**
+ * Semantic color roles, light and dark. Every value is a palette color, read
+ * from palette.ts so a change there reaches every role. The palette is one
+ * export per hue, so a bundle carries only the hues named here, and only if
+ * it uses `color` at all: the pure annotation tells bundlers that reading the
+ * palette has no side effects, so an unused `color` drops its hues with it.
+ * `white` and `black` are the ends of every ramp.
+ *
+ * The brand colors, in order: `primary` (what components use for
+ * interactive emphasis: solid buttons, links, focus, selection),
+ * `secondary`, `tertiary` and `accent`. Each has a `Strong` shade (hover,
+ * text on the canvas) and a `Content` color for text and icons drawn on it,
+ * which meets WCAG AA (4.5:1) against it in both schemes (tokens.test.ts).
+ * `createTheme` derives both when a theme sets only the main color.
+ */
+export declare const color: {
+    readonly canvas: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly surface: {
+        readonly light: "#f5f7f9";
+        readonly dark: "#2a333c";
+    };
+    readonly surfaceOverlay: {
+        readonly light: "#ffffff";
+        readonly dark: "#3c4854";
+    };
+    readonly fg: {
+        readonly light: "#11171c";
+        readonly dark: "#e9edf2";
+    };
+    readonly fgMuted: {
+        readonly light: "#505e6d";
+        readonly dark: "#a3b3c4";
+    };
+    readonly border: {
+        readonly light: "#d7dfe7";
+        readonly dark: "#3c4854";
+    };
+    readonly borderStrong: {
+        readonly light: "#a3b3c4";
+        readonly dark: "#505e6d";
+    };
+    readonly track: {
+        readonly light: "#d7dfe7";
+        readonly dark: "#687889";
+    };
+    readonly primary: {
+        readonly light: "#2771e0";
+        readonly dark: "#81b2ff";
+    };
+    readonly primaryStrong: {
+        readonly light: "#1356b8";
+        readonly dark: "#aaccff";
+    };
+    readonly primaryContent: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly secondary: {
+        readonly light: "#7e5bd0";
+        readonly dark: "#b69fff";
+    };
+    readonly secondaryStrong: {
+        readonly light: "#6443ab";
+        readonly dark: "#cdbfff";
+    };
+    readonly secondaryContent: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly tertiary: {
+        readonly light: "#007069";
+        readonly dark: "#5dcec5";
+    };
+    readonly tertiaryStrong: {
+        readonly light: "#00544f";
+        readonly dark: "#94e1da";
+    };
+    readonly tertiaryContent: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly accent: {
+        readonly light: "#c13b7b";
+        readonly dark: "#ff81b6";
+    };
+    readonly accentStrong: {
+        readonly light: "#9c2661";
+        readonly dark: "#ffaecd";
+    };
+    readonly accentContent: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly focusRing: {
+        readonly light: "var(--greese-color-primary)";
+        readonly dark: "var(--greese-color-primary-strong)";
+    };
+    readonly positive: {
+        readonly light: "#007231";
+        readonly dark: "#61cf7e";
+    };
+    readonly negative: {
+        readonly light: "#ae0914";
+        readonly dark: "#ff8b7f";
+    };
+    readonly negativeContent: {
+        readonly light: "#ffffff";
+        readonly dark: "#11171c";
+    };
+    readonly warning: {
+        readonly light: "#8a5f00";
+        readonly dark: "#feb93d";
+    };
+    readonly info: {
+        readonly light: "#00668f";
+        readonly dark: "#5ac0f7";
+    };
+    /** The ends of every ramp, the same in both schemes: ink and paper for anything drawn on a color. */
+    readonly white: {
+        readonly light: "#ffffff";
+        readonly dark: "#ffffff";
+    };
+    readonly black: {
+        readonly light: "#000000";
+        readonly dark: "#000000";
+    };
+    /** Dims the page behind modal dialogs and drawers. */
+    readonly scrim: {
+        readonly light: "color-mix(in srgb, var(--greese-color-black) 45%, transparent)";
+        readonly dark: "color-mix(in srgb, var(--greese-color-black) 60%, transparent)";
+    };
+};
+export type ColorRole = keyof typeof color;
+/** Spacing scale, indexed: `space[2]` is `--greese-space-2`. */
+export declare const space: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.5rem";
+    readonly 6: "2rem";
+    readonly 7: "3rem";
+    readonly 8: "4rem";
+};
+export type SpaceToken = keyof typeof space;
+export declare const radius: {
+    readonly none: "0";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "16px";
+    readonly xl: "24px";
+    readonly pill: "999px";
+    readonly round: "50%";
+};
+/**
+ * The radius roles: what each kind of part takes from the radius scale. The
+ * components read these, never the scale directly, so a shape theme reassigns
+ * a role (`control: var(--greese-radius-none)`) and every token keeps its
+ * value (ADR 0025): `--greese-radius-md` is 8px under every theme.
+ */
+export declare const corner: {
+    /** Buttons, segmented controls, file pickers. */
+    readonly control: "var(--greese-radius-md)";
+    /** Text fields and selects, OTP cells. */
+    readonly field: "var(--greese-radius-md)";
+    /** Cards, dialogs, fieldsets, lists, stats, chat bubbles. */
+    readonly surface: "var(--greese-radius-lg)";
+    /** Alerts, tiles, tables, code, media, popovers and menus. */
+    readonly panel: "var(--greese-radius-md)";
+    /** Small parts inside others: tabs, menu items, tooltips, keys, checkboxes. */
+    readonly inset: "var(--greese-radius-sm)";
+    /** Badges, chips, tracks, progress bars. */
+    readonly pill: "var(--greese-radius-pill)";
+    /**
+     * Round parts that stand for something: knobs and thumbs, radios, step
+     * markers, avatars, status dots.
+     */
+    readonly round: "var(--greese-radius-round)";
+};
+export declare const font: {
+    readonly body: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, monospace";
+};
+export declare const fontWeight: {
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const lineHeight: {
+    readonly tight: "1.25";
+    readonly snug: "1.375";
+    readonly normal: "1.5";
+};
+export declare const shadow: {
+    readonly sm: "0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent)";
+    readonly md: "0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent)";
+    readonly lg: "0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent)";
+};
+export declare const zIndex: {
+    readonly dropdown: "1000";
+    readonly sticky: "1100";
+    readonly overlay: "1300";
+    readonly modal: "1400";
+    readonly popover: "1500";
+    readonly toast: "1600";
+    readonly tooltip: "1700";
+};
+/** Collapsed to near-zero under `prefers-reduced-motion: reduce`. */
+export declare const duration: {
+    readonly fast: "120ms";
+    readonly normal: "200ms";
+    readonly slow: "320ms";
+};
+export declare const easing: {
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly enter: "cubic-bezier(0, 0, 0, 1)";
+    readonly exit: "cubic-bezier(0.3, 0, 1, 1)";
+};
+/**
+ * Scheme-independent token groups, keyed by the custom-property group name:
+ * `lineHeight.tight` is `--greese-line-height-tight`.
+ */
+export declare const scalarTokens: {
+    readonly space: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.5rem";
+        readonly 6: "2rem";
+        readonly 7: "3rem";
+        readonly 8: "4rem";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "16px";
+        readonly xl: "24px";
+        readonly pill: "999px";
+        readonly round: "50%";
+    };
+    readonly corner: {
+        /** Buttons, segmented controls, file pickers. */
+        readonly control: "var(--greese-radius-md)";
+        /** Text fields and selects, OTP cells. */
+        readonly field: "var(--greese-radius-md)";
+        /** Cards, dialogs, fieldsets, lists, stats, chat bubbles. */
+        readonly surface: "var(--greese-radius-lg)";
+        /** Alerts, tiles, tables, code, media, popovers and menus. */
+        readonly panel: "var(--greese-radius-md)";
+        /** Small parts inside others: tabs, menu items, tooltips, keys, checkboxes. */
+        readonly inset: "var(--greese-radius-sm)";
+        /** Badges, chips, tracks, progress bars. */
+        readonly pill: "var(--greese-radius-pill)";
+        /**
+         * Round parts that stand for something: knobs and thumbs, radios, step
+         * markers, avatars, status dots.
+         */
+        readonly round: "var(--greese-radius-round)";
+    };
+    readonly font: {
+        readonly body: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+        readonly mono: "ui-monospace, SFMono-Regular, Menlo, monospace";
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+    };
+    readonly shadow: {
+        readonly sm: "0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent)";
+        readonly md: "0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent)";
+        readonly lg: "0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent)";
+    };
+    readonly zIndex: {
+        readonly dropdown: "1000";
+        readonly sticky: "1100";
+        readonly overlay: "1300";
+        readonly modal: "1400";
+        readonly popover: "1500";
+        readonly toast: "1600";
+        readonly tooltip: "1700";
+    };
+    readonly duration: {
+        readonly fast: "120ms";
+        readonly normal: "200ms";
+        readonly slow: "320ms";
+    };
+    readonly easing: {
+        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly enter: "cubic-bezier(0, 0, 0, 1)";
+        readonly exit: "cubic-bezier(0.3, 0, 1, 1)";
+    };
+};
+export type ScalarGroup = keyof typeof scalarTokens;
+/**
+ * Mobile-first breakpoints: each value is a `min-width` in px. The defaults
+ * every responsive prop is resolved against.
+ *
+ * Media queries cannot read custom properties, so these are compile-time
+ * constants in the CSS; changing them means recompiling the SCSS.
+ */
+export declare const breakpoints: Readonly<Record<Breakpoint, number>>;
+/**
+ * The breakpoint names. Open for more: a build that adds keys to the SCSS
+ * `$breakpoints` (`tablet: 700px`) tells TypeScript with
+ *
+ * ```ts
+ * declare module '@greese/ui' {
+ *   interface BreakpointKeys { tablet: true }
+ * }
+ * ```
+ *
+ * so `Responsive<T>` accepts `{ tablet: … }` too.
+ */
+export interface BreakpointKeys {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+}
+export type Breakpoint = keyof BreakpointKeys;
+/** The built-in breakpoint keys, smallest first. */
+export declare const breakpointKeys: Breakpoint[];

package/dist/tokens.js

@@ -0,0 +1,179 @@
+/**
+ * Design tokens. The single source of truth for every visual value in greese ui.
+ *
+ * `scripts/build-css.ts` turns this module into dist/tokens.css and
+ * dist/_tokens.scss; `createTheme()` overrides any of it at runtime-free cost.
+ *
+ * Semantic names (canvas, surface, fg, primary) rather than palette names
+ * (blue-500) so light/dark and future rebrands change one layer, not markup.
+ *
+ * Imports only the palette, and only the hues it uses: the build script runs
+ * this directly under Node's type stripping, so imports name their `.ts` file.
+ */
+import { azure, black, blue, gold, green, lavender, pink, red, steel, turquoise, white, } from "./palette.js";
+/**
+ * Semantic color roles, light and dark. Every value is a palette color, read
+ * from palette.ts so a change there reaches every role. The palette is one
+ * export per hue, so a bundle carries only the hues named here, and only if
+ * it uses `color` at all: the pure annotation tells bundlers that reading the
+ * palette has no side effects, so an unused `color` drops its hues with it.
+ * `white` and `black` are the ends of every ramp.
+ *
+ * The brand colors, in order: `primary` (what components use for
+ * interactive emphasis: solid buttons, links, focus, selection),
+ * `secondary`, `tertiary` and `accent`. Each has a `Strong` shade (hover,
+ * text on the canvas) and a `Content` color for text and icons drawn on it,
+ * which meets WCAG AA (4.5:1) against it in both schemes (tokens.test.ts).
+ * `createTheme` derives both when a theme sets only the main color.
+ */
+export const color = /* @__PURE__ */ (() => ({
+    canvas: { light: white, dark: steel[999] },
+    surface: { light: steel[50], dark: steel[900] },
+    surfaceOverlay: { light: white, dark: steel[800] },
+    fg: { light: steel[999], dark: steel[100] },
+    fgMuted: { light: steel[700], dark: steel[400] },
+    border: { light: steel[200], dark: steel[800] },
+    borderStrong: { light: steel[400], dark: steel[700] },
+    // The empty part of a progress bar, a slider or a radial progress: lighter
+    // than the borders in dark mode, so it shows on the canvas and on surfaces.
+    track: { light: steel[200], dark: steel[600] },
+    primary: { light: blue[600], dark: blue[400] },
+    primaryStrong: { light: blue[700], dark: blue[300] },
+    primaryContent: { light: white, dark: steel[999] },
+    secondary: { light: lavender[600], dark: lavender[400] },
+    secondaryStrong: { light: lavender[700], dark: lavender[300] },
+    secondaryContent: { light: white, dark: steel[999] },
+    tertiary: { light: turquoise[700], dark: turquoise[400] },
+    tertiaryStrong: { light: turquoise[800], dark: turquoise[300] },
+    tertiaryContent: { light: white, dark: steel[999] },
+    accent: { light: pink[600], dark: pink[400] },
+    accentStrong: { light: pink[700], dark: pink[300] },
+    accentContent: { light: white, dark: steel[999] },
+    focusRing: {
+        light: 'var(--greese-color-primary)',
+        dark: 'var(--greese-color-primary-strong)',
+    },
+    positive: { light: green[700], dark: green[400] },
+    negative: { light: red[700], dark: red[400] },
+    negativeContent: { light: white, dark: steel[999] },
+    warning: { light: gold[700], dark: gold[400] },
+    info: { light: azure[700], dark: azure[400] },
+    /** The ends of every ramp, the same in both schemes: ink and paper for anything drawn on a color. */
+    white: { light: white, dark: white },
+    black: { light: black, dark: black },
+    /** Dims the page behind modal dialogs and drawers. */
+    scrim: {
+        light: 'color-mix(in srgb, var(--greese-color-black) 45%, transparent)',
+        dark: 'color-mix(in srgb, var(--greese-color-black) 60%, transparent)',
+    },
+}))();
+/** Spacing scale, indexed: `space[2]` is `--greese-space-2`. */
+export const space = {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.5rem',
+    6: '2rem',
+    7: '3rem',
+    8: '4rem',
+};
+export const radius = {
+    none: '0',
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+    pill: '999px',
+    round: '50%',
+};
+/**
+ * The radius roles: what each kind of part takes from the radius scale. The
+ * components read these, never the scale directly, so a shape theme reassigns
+ * a role (`control: var(--greese-radius-none)`) and every token keeps its
+ * value (ADR 0025): `--greese-radius-md` is 8px under every theme.
+ */
+export const corner = {
+    /** Buttons, segmented controls, file pickers. */
+    control: 'var(--greese-radius-md)',
+    /** Text fields and selects, OTP cells. */
+    field: 'var(--greese-radius-md)',
+    /** Cards, dialogs, fieldsets, lists, stats, chat bubbles. */
+    surface: 'var(--greese-radius-lg)',
+    /** Alerts, tiles, tables, code, media, popovers and menus. */
+    panel: 'var(--greese-radius-md)',
+    /** Small parts inside others: tabs, menu items, tooltips, keys, checkboxes. */
+    inset: 'var(--greese-radius-sm)',
+    /** Badges, chips, tracks, progress bars. */
+    pill: 'var(--greese-radius-pill)',
+    /**
+     * Round parts that stand for something: knobs and thumbs, radios, step
+     * markers, avatars, status dots.
+     */
+    round: 'var(--greese-radius-round)',
+};
+export const font = {
+    body: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    mono: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+};
+export const fontWeight = {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+};
+export const lineHeight = { tight: '1.25', snug: '1.375', normal: '1.5' };
+export const shadow = {
+    sm: '0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent)',
+    md: '0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent)',
+    lg: '0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent)',
+};
+export const zIndex = {
+    dropdown: '1000',
+    sticky: '1100',
+    overlay: '1300',
+    modal: '1400',
+    popover: '1500',
+    toast: '1600',
+    tooltip: '1700',
+};
+/** Collapsed to near-zero under `prefers-reduced-motion: reduce`. */
+export const duration = { fast: '120ms', normal: '200ms', slow: '320ms' };
+export const easing = {
+    standard: 'cubic-bezier(0.2, 0, 0, 1)',
+    enter: 'cubic-bezier(0, 0, 0, 1)',
+    exit: 'cubic-bezier(0.3, 0, 1, 1)',
+};
+/**
+ * Scheme-independent token groups, keyed by the custom-property group name:
+ * `lineHeight.tight` is `--greese-line-height-tight`.
+ */
+export const scalarTokens = {
+    space,
+    radius,
+    corner,
+    font,
+    fontWeight,
+    lineHeight,
+    shadow,
+    zIndex,
+    duration,
+    easing,
+};
+/**
+ * Mobile-first breakpoints: each value is a `min-width` in px. The defaults
+ * every responsive prop is resolved against.
+ *
+ * Media queries cannot read custom properties, so these are compile-time
+ * constants in the CSS; changing them means recompiling the SCSS.
+ */
+export const breakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536,
+};
+/** The built-in breakpoint keys, smallest first. */
+export const breakpointKeys = Object.keys(breakpoints);

package/dist/typography.d.ts

@@ -0,0 +1,55 @@
+import { type Breakpoint } from './tokens.ts';
+import { type Declarations } from './css.ts';
+/**
+ * The type system: named text styles that change across breakpoints.
+ *
+ * Each variant has values for font size, weight, letter spacing and line
+ * height, plus any of a few other text properties. They're custom properties,
+ * `--greese-type-<variant>-<css-property>`, set mobile-first: `base` applies from the
+ * smallest screen, and a value set at a breakpoint applies from there up until
+ * a larger breakpoint sets another. Only values that change are written.
+ * `.greese-Type--<variant>` applies a variant's properties to any element, and
+ * Text and Heading take it as `variant`.
+ */
+export declare const typeVariants: readonly ["p1", "p2", "p3", "h1", "h2", "h3", "h4", "h5", "h6", "s1", "s2", "caption", "button"];
+export type TypeVariant = (typeof typeVariants)[number];
+/**
+ * The four properties every variant has. Names are the CSS properties in
+ * their JavaScript form (`fontSize` for `font-size`), as in React's `style`.
+ */
+export declare const typeCoreProps: readonly ["fontSize", "fontWeight", "letterSpacing", "lineHeight"];
+/**
+ * Other properties a variant may set: unset ones inherit, so a variant that
+ * doesn't mention `textTransform` leaves `text-transform` alone.
+ */
+export declare const typeExtraProps: readonly ["color", "fontFamily", "fontStyle", "textTransform", "fontFeatureSettings", "fontVariationSettings", "fontStretch", "textWrap", "wordSpacing", "fontVariantNumeric"];
+export declare const typeProps: readonly ["fontSize", "fontWeight", "letterSpacing", "lineHeight", "color", "fontFamily", "fontStyle", "textTransform", "fontFeatureSettings", "fontVariationSettings", "fontStretch", "textWrap", "wordSpacing", "fontVariantNumeric"];
+/** `fontSize` → `font-size`: the CSS property a type property sets. */
+export declare const cssProperty: (prop: string) => string;
+/** `font-size` → `fontSize`, for reading CSS back in. */
+export declare const typePropName: (property: string) => string;
+export type TypeCoreProp = (typeof typeCoreProps)[number];
+export type TypeExtraProp = (typeof typeExtraProps)[number];
+export type TypeProp = TypeCoreProp | TypeExtraProp;
+/** One breakpoint's values for a variant. */
+export type TypeStyle = Partial<Record<TypeProp, string>>;
+/** A variant: `base`, and the changes at each breakpoint (`md: { fontSize: '3rem' }`). */
+export type TypeSpec = {
+    base?: TypeStyle;
+} & Partial<Record<Breakpoint, TypeStyle>>;
+export type Typography = Record<TypeVariant, TypeSpec>;
+/** The defaults, in rem so they follow the user's text-size setting. */
+export declare const typography: Typography;
+/** `--greese-type-h1-font-size`, for the type property `fontSize`. */
+export declare const typeVar: (variant: string, prop: string) => string;
+/**
+ * The defaults with your changes on top, per variant and breakpoint: what you
+ * set replaces the default at that exact point, and everything else (the other
+ * breakpoints too) stays.
+ */
+export declare const mergeTypography: (base: Typography, changes?: Partial<Record<TypeVariant, TypeSpec>>) => Typography;
+/**
+ * The declarations of each breakpoint, smallest first: `[min-width in px or
+ * 0 for base, declarations]`. A breakpoint with nothing to say is left out.
+ */
+export declare const typographyByBreakpoint: (spec: Partial<Record<TypeVariant, TypeSpec>>, widths?: Record<string, number>) => Array<[number, Declarations]>;