/** * The raw ramp, exported so the CSS-agreement test can tell a palette entry from * a semantic role: `colors` spreads this and adds `border`/`background`/`accent` * and friends, which carry no `--lotics-` of their own. */ export declare const palette: { black: string; white: string; red: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; orange: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; amber: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; yellow: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; lime: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; green: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; emerald: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; teal: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; cyan: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; sky: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; blue: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; indigo: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; violet: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; purple: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; fuchsia: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; pink: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; rose: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; slate: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; gray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; zinc: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; neutral: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; stone: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; }; /** * THE FIVE THEMEABLE ROLES are `background`, `border`, `accent`, `accent_wash` * and `primary` — and deliberately nothing else. See `colors.ts`, which * redefines exactly these as CSS variables so an app can carry its own identity. * * The line is drawn at MEANING, not at convenience. A palette family * (`red`, `amber`, `emerald`, `zinc`…) is how this system says what something * IS — a status, a valence, a series — so letting an app repaint those would * not restyle the product, it would make it lie. What is left over is chrome: * the paper, the paper's edge, and the one hue that is the customer's rather * than ours — plus the wash that hue makes, which has to move with it or an * app's accent lights up over a blue ground. An app can own all of that and * change no claim the UI makes. * * This file is the CONTRACT and stays literal — `colors.ts` spreads it and * indirects only those five roles through `var()`. */ export declare const colors: { black: string; white: string; red: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; orange: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; amber: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; yellow: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; lime: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; green: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; emerald: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; teal: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; cyan: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; sky: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; blue: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; indigo: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; violet: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; purple: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; fuchsia: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; pink: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; rose: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; slate: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; gray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; zinc: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; neutral: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; stone: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; }; border: string; border_shadow: string; /** A RAISED surface — Card, Drawer, Dialog, the things that sit on the page. */ background: string; /** * The one brand hue. It paints "WHERE YOU ARE" — the active tab's underline, * the selected row's ground, an active filter — and IDENTITY chrome. * * It deliberately does NOT paint interaction chrome. The focus ring is * `zinc[900]` and the primary action is near-black because those are the KIT's * semantics, shared across every app so a reader learns them once; repainting * them per tenant would make "what does a focus ring look like" a per-app * question. And never for DATA: a series, a status and a valence all come from * a palette family, so an accent can never overwrite a meaning. */ accent: string; /** * The PRIMARY action's fill — the one filled button on a surface, and every * other "this is on": a ticked checkbox, a switch's track, a selected day. * * Separate from `accent` because their jobs differ: an app can own the hue that * says WHERE YOU ARE without owning the shape of a COMMIT, and a near-black * commit reads under any brand. Folding them would force an app that themes its * accent to also repaint every CTA. */ primary: string; /** * The brand's TINT — a selected row's ground, an active filter's ground, a * header band. * * It exists as its own token because it cannot be derived where it is used: * `withAlpha`/`tint` do string surgery on an `rgba()`, and `accent` is a * `var()`, so asking for "accent at 7%" at the call site produces garbage no * type would catch. `tokens.css` derives it with `color-mix`, where the accent * is still a colour; this is the same 7% of the same default. * * IT IS FOR ATTENTION, NEVER FOR SELECTION, and that line is why this comment * is long. Every SELECTED state in the kit is neutral and says so in its own * literal: a register row is zinc-100, a chip and a card are a doubled zinc-900 * EDGE with no ground of their own. What is left for this token is the state * that genuinely wants the brand — a region lighting up under a dragged file, * a moment the eye is meant to be pulled to and that no app would want in grey. * * The confusion cost a round trip in both directions, so the line is worth * holding. Selections were painted through this token, and the kit shipped a * blue nobody had chosen on its busiest surface; the token was then made * neutral, which turned a themed app's drop target grey and made the name a * lie. Pointing selections at their own literals fixes both at once — the token * keeps its meaning, and "is this selected" stops depending on whether a tenant * happened to set an accent. */ accent_wash: string; shadow: string; }; /** * A low-alpha wash of a palette color (hover tints, dimmed chart segments, * icon discs). Handles the palette's rgba() strings plus rgb()/#RRGGBB. */ export declare function withAlpha(color: string, alpha: number): string; /** * A palette FAMILY name — the single, semantic way to reference a color across * the system (a `Status`, a chart series, a breakdown segment). * Reference colors by NAME and let the component resolve the shade it needs; * never thread a raw hex through props — it drifts (one call site picks 500, * another 600, and the same "status" renders two greens). Excludes every * non-scale role key — the four themeable roles included, since `solid("accent")` * would otherwise typecheck and hand back `undefined` from a family that has no * shades. */ export type ColorName = Exclude; /** * THE FALLBACK HUE — what a component paints when the caller named no colour. * * One accent per screen (`constitution.md` §8), and a component that picks a hue * of its own spends the screen's second one on a decision nobody made: a * calendar's today marker and its uncoloured events used to be teal, so every * scheduling screen carried teal BESIDE whatever the app had chosen. A fallback * is the accent's own family, so a screen that states no colour still paints one * hue. * * It is the FAMILY rather than `--lotics-accent`, because what these components * need is a ramp (a 100 ground under a 900 ink), which one variable cannot give * them; `accent_budget.test.ts` holds it to `colors.accent` so the two cannot * part. A theme that moves the accent variable does not move this ramp. */ export declare const ACCENT_FAMILY = "blue"; export declare function solid(name: ColorName): string; /** A low-alpha wash of a family's solid shade — cell/segment tints, dimmed * states. `tint("emerald", 0.2)` === `withAlpha(solid("emerald"), 0.2)`. */ export declare function tint(name: ColorName, alpha: number): string; /** * A point BETWEEN two opaque palette values, `share`% of the first — the sRGB * composite `color-mix(in srgb, a p%, b)` produces, so a mix written in CSS and * the same mix computed here land on one value. * * It lives with the palette rather than beside its one caller because it is * palette arithmetic: the ramp's rungs are 100 apart and a decision does not * always fall on one. `in srgb`, never oklab — an oklab mix of the same * percentage is a different colour, and the sheets composite in sRGB. */ export declare function blend(a: string, b: string, share: number): string; /** * `count` distinct shades of ONE family, strong → light — the monochrome * "one hue family per dimension" data ramp (a Breakdown's segments, an ordered * funnel, any multi-category breakdown of a single dimension). Use this for a * COHERENT dimension instead of hand-picking shades or scattering hues; the * segment LABEL carries identity, the shade only orders. (For semantic * categories whose color carries MEANING — status — give each its own * `ColorName` and `solid()` it, don't ramp.) */ export declare function ramp(name: ColorName, count: number): string[]; /** * Is `value` a usable {@link ColorName} — a palette FAMILY, not a role key * (`border`/`background`/…) and not `black`/`white`? A family resolves to a * shade object; the role/scalar keys resolve to a string, so "value is an * object" is the test (no name list to keep in sync). */ export declare function isColorName(value: unknown): value is ColorName; /** * Coerce an arbitrary color token to a {@link ColorName}, falling back to a * neutral. The single graceful-degradation point for stored option/status * colors: a select option's `color` may be a token a newer table config * introduced that this UI build predates, or absent entirely — either way a * component renders a neutral badge instead of breaking. Used by `Status`. */ export declare function asColorName(value: unknown, fallback?: ColorName): ColorName;