@greese/ui 0.0.0-stage → 1.1.0

package/dist/palette.js

@@ -0,0 +1,334 @@
+/**
+ * The color palette: 22 hues, each in 11 shades from 50 (lightest) to 999
+ * (darkest). GENERATED by scripts/generate-palette.ts: the
+ * values are fixed, so a palette name means the same color in TypeScript, the
+ * SCSS kit and CSS.
+ *
+ * The semantic roles in tokens.ts are built from these, and you can use them
+ * wherever a color goes, without hex literals:
+ *
+ * - TypeScript: `palette.lavender[600]`, or import one hue: `lavender[600]`.
+ * - The SCSS kit: `lavender-600` as a token value, or `greese.palette(lavender, 600)`.
+ * - CSS: `var(--greese-lavender-600)`, with `@greese/ui/palette.css`.
+ *
+ * Each hue is its own export, so a bundle keeps only the hues it imports.
+ */
+/** Shades, lightest first: `--greese-<hue>-<shade>`. */
+export const paletteShades = [
+    50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 999,
+];
+/** The two colors that aren't a hue: the ends of every ramp. */
+export const white = '#ffffff';
+export const black = '#000000';
+// Greys first, then around the color wheel.
+export const steel = {
+    50: '#f5f7f9',
+    100: '#e9edf2',
+    200: '#d7dfe7',
+    300: '#bfcbd8',
+    400: '#a3b3c4',
+    500: '#8597a9',
+    600: '#687889',
+    700: '#505e6d',
+    800: '#3c4854',
+    900: '#2a333c',
+    999: '#11171c',
+};
+export const gray = {
+    50: '#f7f7f7',
+    100: '#ededed',
+    200: '#dedede',
+    300: '#cacaca',
+    400: '#b1b1b1',
+    500: '#949494',
+    600: '#767676',
+    700: '#5c5c5c',
+    800: '#464646',
+    900: '#323232',
+    999: '#161616',
+};
+export const silver = {
+    50: '#f6f7f7',
+    100: '#ebedee',
+    200: '#dadfe1',
+    300: '#c5cbce',
+    400: '#aab3b7',
+    500: '#8d969b',
+    600: '#6f777c',
+    700: '#565e61',
+    800: '#41474b',
+    900: '#2e3335',
+    999: '#141618',
+};
+export const ash = {
+    50: '#f7f7f6',
+    100: '#ededeb',
+    200: '#dfdeda',
+    300: '#cbcac4',
+    400: '#b3b1aa',
+    500: '#97958d',
+    600: '#78766e',
+    700: '#5e5c56',
+    800: '#484641',
+    900: '#33322e',
+    999: '#171614',
+};
+export const taupe = {
+    50: '#f8f6f5',
+    100: '#f0ece9',
+    200: '#e4dcd6',
+    300: '#d3c7be',
+    400: '#bdaea2',
+    500: '#a29184',
+    600: '#827366',
+    700: '#67594f',
+    800: '#4f443b',
+    900: '#38302a',
+    999: '#1a1511',
+};
+export const red = {
+    50: '#fff4f2',
+    100: '#ffe6e3',
+    200: '#ffd2cc',
+    300: '#ffb4ab',
+    400: '#ff8b7f',
+    500: '#fd4c45',
+    600: '#d52727',
+    700: '#ae0914',
+    800: '#88030c',
+    900: '#620407',
+    999: '#330000',
+};
+export const orange = {
+    50: '#fff4ee',
+    100: '#ffe8da',
+    200: '#ffd8c1',
+    300: '#ffc19c',
+    400: '#ff9d5e',
+    500: '#ef7500',
+    600: '#c05d00',
+    700: '#964700',
+    800: '#733400',
+    900: '#522300',
+    999: '#290d00',
+};
+export const gold = {
+    50: '#fff5e7',
+    100: '#ffeaca',
+    200: '#ffe1b5',
+    300: '#ffd593',
+    400: '#feb93d',
+    500: '#df9c00',
+    600: '#b37d00',
+    700: '#8a5f00',
+    800: '#664500',
+    900: '#472e00',
+    999: '#211300',
+};
+export const yellow = {
+    50: '#fcf8df',
+    100: '#f8efb6',
+    200: '#fce873',
+    300: '#fbe136',
+    400: '#f4d90b',
+    500: '#d3bb00',
+    600: '#ab9700',
+    700: '#817100',
+    800: '#5c5000',
+    900: '#3d3500',
+    999: '#1b1600',
+};
+export const lime = {
+    50: '#f2fae9',
+    100: '#e2f4ce',
+    200: '#d2f4a9',
+    300: '#c0ee82',
+    400: '#a6dc51',
+    500: '#87bf0e',
+    600: '#6b9a00',
+    700: '#517600',
+    800: '#3a5600',
+    900: '#263b00',
+    999: '#0e1a00',
+};
+export const green = {
+    50: '#effaf1',
+    100: '#dcf5e0',
+    200: '#bdeec6',
+    300: '#95e2a5',
+    400: '#61cf7e',
+    500: '#25b459',
+    600: '#009141',
+    700: '#007231',
+    800: '#005724',
+    900: '#003e17',
+    999: '#001d06',
+};
+export const jade = {
+    50: '#eefaf4',
+    100: '#daf4e8',
+    200: '#baedd6',
+    300: '#8ee1be',
+    400: '#54cea1',
+    500: '#00b283',
+    600: '#008e68',
+    700: '#006f51',
+    800: '#00553d',
+    900: '#003c2a',
+    999: '#001c11',
+};
+export const turquoise = {
+    50: '#eefaf8',
+    100: '#daf3f0',
+    200: '#bcece7',
+    300: '#94e1da',
+    400: '#5dcec5',
+    500: '#13b3aa',
+    600: '#009088',
+    700: '#007069',
+    800: '#00544f',
+    900: '#003b38',
+    999: '#001b19',
+};
+export const aqua = {
+    50: '#eef9fb',
+    100: '#daf2f5',
+    200: '#beecf2',
+    300: '#98e3ec',
+    400: '#64d0de',
+    500: '#23b5c4',
+    600: '#00919f',
+    700: '#00707b',
+    800: '#00545c',
+    900: '#003b41',
+    999: '#001b1e',
+};
+export const azure = {
+    50: '#eef9ff',
+    100: '#daf1ff',
+    200: '#bde6ff',
+    300: '#91d6ff',
+    400: '#5ac0f7',
+    500: '#15a4e1',
+    600: '#0082b6',
+    700: '#00668f',
+    800: '#004d6e',
+    900: '#003750',
+    999: '#001927',
+};
+export const blue = {
+    50: '#f2f7ff',
+    100: '#e2eeff',
+    200: '#cbdfff',
+    300: '#aaccff',
+    400: '#81b2ff',
+    500: '#4c92ff',
+    600: '#2771e0',
+    700: '#1356b8',
+    800: '#0b4290',
+    900: '#072e68',
+    999: '#001337',
+};
+export const royal = {
+    50: '#f4f6ff',
+    100: '#e7ecff',
+    200: '#d4dcff',
+    300: '#bac6ff',
+    400: '#9aaaff',
+    500: '#7787ff',
+    600: '#5963e5',
+    700: '#444abc',
+    800: '#333894',
+    900: '#23276b',
+    999: '#0d0f39',
+};
+export const lavender = {
+    50: '#f7f5ff',
+    100: '#edeaff',
+    200: '#dfd8ff',
+    300: '#cdbfff',
+    400: '#b69fff',
+    500: '#9d79f6',
+    600: '#7e5bd0',
+    700: '#6443ab',
+    800: '#4c3285',
+    900: '#362361',
+    999: '#190c33',
+};
+export const purple = {
+    50: '#fbf4ff',
+    100: '#f6e6ff',
+    200: '#eed1ff',
+    300: '#e4b4ff',
+    400: '#d78cff',
+    500: '#be68ea',
+    600: '#9d49c5',
+    700: '#7e33a1',
+    800: '#61257d',
+    900: '#46195a',
+    999: '#22062f',
+};
+export const magenta = {
+    50: '#fff3fb',
+    100: '#ffe3f7',
+    200: '#ffccf1',
+    300: '#ffa9ea',
+    400: '#f97cde',
+    500: '#e053c6',
+    600: '#bb32a3',
+    700: '#971c83',
+    800: '#761266',
+    900: '#550c49',
+    999: '#2b0124',
+};
+export const pink = {
+    50: '#fff3f7',
+    100: '#ffe5ee',
+    200: '#ffcfe0',
+    300: '#ffaecd',
+    400: '#ff81b6',
+    500: '#e75a9a',
+    600: '#c13b7b',
+    700: '#9c2661',
+    800: '#7a1a4a',
+    900: '#581235',
+    999: '#2d0318',
+};
+export const ruby = {
+    50: '#fff4f4',
+    100: '#ffe6e8',
+    200: '#ffd0d5',
+    300: '#ffb2ba',
+    400: '#ff8798',
+    500: '#f94b72',
+    600: '#d12655',
+    700: '#aa0b40',
+    800: '#85042f',
+    900: '#600421',
+    999: '#32000b',
+};
+/** Every hue by name, for lookups by a name that's only known at run time. */
+export const palette = {
+    steel,
+    gray,
+    silver,
+    ash,
+    taupe,
+    red,
+    orange,
+    gold,
+    yellow,
+    lime,
+    green,
+    jade,
+    turquoise,
+    aqua,
+    azure,
+    blue,
+    royal,
+    lavender,
+    purple,
+    magenta,
+    pink,
+    ruby,
+};

package/dist/shapes.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Shapes (ADR 0024): custom outlines for any element, as plain CSS.
+ *
+ * A shape is a list of points in the element's box. Each coordinate is a
+ * percentage of the box plus pixels plus multiples of named parameters, so a
+ * 12px corner stays 12px whatever the element's size. It compiles to:
+ *
+ * - **one geometry**: a `polygon()` clip on the element, and a ring (its
+ *   border) on the element's own pseudo-element, computed from the same points;
+ * - **animated parameters**: each parameter is a registered custom property
+ *   (`--greese-shape-<param>`). Hover, press, focus and entrance change the
+ *   parameters, never `clip-path`, so the clip and its border interpolate
+ *   together by construction, and transforms (the `greese` prop) move both;
+ * - **no runtime**: nothing in the browser, and no extra markup.
+ *
+ * This module only builds CSS: the Studio and build scripts import it, apps
+ * don't (it isn't in the package's main entry).
+ */
+/** One coordinate: `pct`% of the box, plus `px`, plus `k` times parameter `param`. */
+export interface ShapeLength {
+    pct?: number;
+    px?: number;
+    param?: string;
+    /** How many of `param` (negative to subtract). @default 1 */
+    k?: number;
+}
+export interface ShapePoint {
+    x: ShapeLength;
+    y: ShapeLength;
+    /**
+     * Rounds this corner: a radius in px, or a parameter's name. The arc is
+     * flattened into points at build time, so it animates like any other.
+     */
+    round?: number | string;
+}
+/** Parameter values: name → px. */
+export type ShapeParams = Record<string, number>;
+export interface ShapeDef {
+    /** The outline, clockwise from the top start. */
+    points: ShapePoint[];
+    /** Parameters at rest, in px. */
+    params?: ShapeParams;
+    /** Parameters while hovered (fine pointers only). */
+    hover?: ShapeParams;
+    /** Parameters while pressed. */
+    active?: ShapeParams;
+    /** The border drawn along the shape. Width in px; color any CSS color, `auto` for the component's own. */
+    border?: {
+        width?: number;
+        color?: string;
+    };
+    /**
+     * How keyboard focus shows. `box`: the shape eases back to its box and the
+     * usual focus ring draws round it (needs every parameter at 0 to be the
+     * box). `ring`: a thicker border in the focus color, inside the shape.
+     * @default 'box' when possible, else 'ring'
+     */
+    focus?: 'box' | 'ring';
+    /** Mirror it for right-to-left text: for shapes with a direction, like a tag's point. */
+    mirror?: boolean;
+}
+/** How a shape fits a particular element: which pseudo-element draws its border, and so on. */
+export interface ShapeTarget {
+    /** The element's selector. */
+    selector: string;
+    /** In SHAPE_TARGETS: the element a component's shape goes on, when not its root (`.greese-SpeedDial-trigger`). */
+    select?: string;
+    /**
+     * Where the element faces the other way, as in right-to-left text: a
+     * selector suffix (`.greese-ChatBubble--end &`) that takes the shape mirrored.
+     */
+    mirrorOn?: string;
+    /** The pseudo-element free for the border. @default '::after' */
+    pseudo?: '::before' | '::after';
+    /** Selector suffix for hover (`:hover`), or a selector of its own (`&--interactive:hover`). */
+    hover?: string | false;
+    /** Selector suffix for press. */
+    active?: string | false;
+    /** The element is already positioned (fixed, sticky, absolute): don't make it relative. */
+    positioned?: boolean;
+    /** The border color when the shape's is `auto`: the component's own border color. */
+    borderColor?: string;
+    /** Extra rules for variants, e.g. a different border color per modifier: selector → declarations. */
+    variants?: Record<string, Record<string, string>>;
+    /** The element's own transitions, restated (a `transition` replaces the whole list). */
+    transitions?: string[];
+    /**
+     * Transitions only some of its variants have (selector suffix → list), so
+     * the restated list doesn't give every element one: a moving property that
+     * transitions lags whatever animates it, a mask included.
+     */
+    variantTransitions?: Record<string, string[]>;
+    /** Don't animate parameters (the element's transitions are its own, e.g. a dialog's). */
+    still?: boolean;
+    /**
+     * At least 44px on touch screens, since the shape clips the hit area too.
+     * It changes the element's size, so the library's own targets don't use it.
+     */
+    touch?: boolean;
+    /**
+     * Draw a border along the shape (a pseudo-element). Off for elements with
+     * no border, no pseudo-element to spare, or that scroll their own content
+     * (the layer would scroll with it): the element is only clipped.
+     * @default true
+     */
+    ring?: boolean;
+    /**
+     * How focus shows, over the shape's own choice: `ring` (a focus-colored
+     * ring inside the shape, for elements that stay focused while used, like
+     * fields), or `keep` (the element's own focus style, drawn inside the box,
+     * already survives the clip).
+     */
+    focus?: 'ring' | 'keep';
+    /** Selector suffix for focus. @default ':focus-visible' */
+    focusOn?: string;
+    /**
+     * Smaller elements, smaller features: selector suffix → a factor for every
+     * parameter, so a cut that suits a button doesn't swallow an icon button.
+     */
+    scale?: Record<string, number>;
+}
+/** The custom property behind a parameter. */
+export declare const shapeVar: (param: string) => string;
+/** The parameters a shape uses, in a stable order. */
+export declare const shapeParams: (def: ShapeDef) => string[];
+/** True when the shape with every parameter at 0 is its whole box, so `box` focus works. */
+export declare const opensToBox: (def: ShapeDef) => boolean;
+/**
+ * The outline at one size, as numbers: for editors and previews. `inset`
+ * gives the border's inner edge instead.
+ */
+export declare const shapePoints: (def: ShapeDef, w: number, h: number, params?: ShapeParams, inset?: number) => Array<[number, number]>;
+/** `@property` rules for the parameters: registered, so they animate. Once per page is enough. */
+export declare const shapeProperties: (params: Iterable<string>) => string;
+/** The shape flipped start to end, still clockwise. */
+export declare const mirrored: (def: ShapeDef) => ShapeDef;
+/** Where a shape is used: an element's selector and how it takes the shape. */
+export interface ShapeUse extends ShapeTarget {
+    /** The shape's name. */
+    shape: string;
+}
+/**
+ * The CSS for a set of shapes and the elements that take them. Each shape's
+ * geometry is written once, on every element that takes it, as two custom
+ * properties computed on the element itself (`--greese-shape-clip` and
+ * `--greese-shape-ring-clip`), so its border layer inherits the ring already
+ * resolved with the element's parameters, mid-transition included. The
+ * mechanics (the clip, the border layer, transitions) are written once per
+ * kind of element. Pair it with `shapeProperties()` once.
+ */
+export declare const shapesCss: (shapes: Record<string, ShapeDef>, uses: ShapeUse[]) => string;
+/** One shape on one element: `shapesCss` for a single use. */
+export declare const shapeCss: (def: ShapeDef, target: ShapeTarget) => string;
+/**
+ * How each component takes a shape: which element, whether a pseudo-element
+ * is free for the border, how it shows focus, its own transitions. A
+ * component not listed takes the defaults (its root, `::after`, the border
+ * token). Clipping removes shadows and anything drawn outside the box, so an
+ * entry also says what replaces them.
+ */
+export declare const SHAPE_TARGETS: Record<string, Omit<ShapeTarget, 'selector'>>;
+/** The element a component's shape goes on. */
+export declare const shapeSelector: (component: string) => string;
+/** The class that gives any element a shape: `greese-shape-<name>`. */
+export declare const shapeClass: (name: string) => string;
+/** A component's target for a shape, or the default for an element with the shape's class. */
+export declare const shapeTarget: (component?: string) => Omit<ShapeTarget, "selector">;
+/** The box itself. */
+export declare const rectangle: () => ShapeDef;
+/** Corners cut on the diagonal: `a` top-start and bottom-end, `b` the other two. */
+export declare const bevel: (a?: number, b?: number) => ShapeDef;
+/** Square notches out of every corner. */
+export declare const notch: (n?: number) => ShapeDef;
+/** A tag: square at the start, pointed at the end by `t`. */
+export declare const tag: (t?: number) => ShapeDef;
+/** Pointed at both ends: a hexagon, `h` deep. */
+export declare const hexagon: (h?: number) => ShapeDef;
+/** Leaning like italic type: top edge shifted by `s` toward the end. */
+export declare const slant: (s?: number) => ShapeDef;
+/** The top-end corner folded down by `f`. */
+export declare const dogEar: (f?: number) => ShapeDef;
+/** A ticket: a half-round notch `r` deep in each side, halfway down. */
+export declare const ticket: (r?: number) => ShapeDef;
+/** Top corners cut by `c`: a tab, or a folder's. */
+export declare const tabTop: (c?: number) => ShapeDef;
+/** A zigzag hem along the bottom edge: `teeth` teeth, `z` deep. */
+export declare const zigzag: (z?: number, teeth?: number) => ShapeDef;
+/** A diamond: the midpoints of the box's sides, for marks (avatars, status dots). */
+export declare const diamond: () => ShapeDef;
+/** A shield: free-form, in percentages, rounded at the top corners. */
+export declare const shield: () => ShapeDef;
+/** The presets by name, for pickers. */
+export declare const SHAPE_PRESETS: Record<string, () => ShapeDef>;