@eos-ui/tokens 0.1.0 → 0.2.0

package/README.md

@@ -24,7 +24,7 @@ All variables are prefixed `--e-` (`--e-primary`, `--e-space-4`). Documentation:
 
 ## Inputs
 
-`defineTheme()` takes 15 inputs and emits every token. Any token can also be set by name in `tokens`, which wins over everything derived. `name` labels the theme (`data-e-theme`), and `strict` throws on a contrast failure instead of listing it in `issues`.
+`defineTheme()` takes 16 inputs and emits every token. Any token can also be set by name in `tokens`, which wins over everything derived. `name` labels the theme (`data-e-theme`), and `strict` throws on a contrast failure instead of listing it in `issues`.
 
 | Input                                                  | Derives                                                                                         |
 | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
@@ -33,7 +33,8 @@ All variables are prefixed `--e-` (`--e-primary`, `--e-space-4`). Documentation:
 | `background`, `surface`, `foreground`                  | the grounds, `ink`, `muted`, `border`, `border-strong`; a dark surface lifts the action colours |
 | `fonts`, `radius`                                      | `font-sans`, `font-mono`; `radius-sm` to `radius-lg`                                            |
 | `textScale`, `spaceScale`                              | `text-xs` to `text-4xl`; `space-1` to `space-8` (1 is the default)                              |
-| `strokes` `{ hair, focus }`                            | `stroke-hair`, `stroke-edge`, `stroke-focus`, `focus-gap`, `focus-gap-field`                    |
+| `strokes` `{ hair, focus, edge, card }`                | `stroke-hair`, `stroke-card`, `stroke-edge`, `stroke-focus`, `focus-gap`, `focus-gap-field`     |
+| `contrast` `"standard" | "high"`                      | `high`: `border`, `border-strong` = `ink`; `muted` at 15:1; neutral `surface-tint`; darker `scrim` |
 | `motion` `"default" \| "snappy" \| "gentle" \| "none"` | `duration-tap`, `duration-move`, `easing-out`                                                   |
 | `elevation` `"outline" \| "lifted" \| "bold"`          | `edge`, `well`, `float`; shadow tint follows `background`                                       |
 | `controlHeight`                                        | `control-height`, `chip-height`                                                                 |

package/dist/generated/defaults.d.ts

@@ -14,7 +14,10 @@ export declare const defaults: {
     readonly background: "#ffffff";
     readonly surface: "#ffffff";
     readonly "surface-tint": "#eaf4f8";
+    readonly "surface-hover": "color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%)";
     readonly ink: "#000000";
+    readonly "print-ink": "#000000";
+    readonly "print-paper": "#ffffff";
     readonly scrim: "rgb(11 40 52 / 0.55)";
     readonly muted: "#515151";
     readonly border: "#7f8f96";
@@ -43,6 +46,10 @@ export declare const defaults: {
     readonly "text-3xl": "30px";
     readonly "text-4xl": "36px";
     readonly "control-height": "48px";
+    readonly "shade-hover": "black 8%";
+    readonly "shade-press": "black 16%";
+    readonly "shade-slab": "black 30%";
+    readonly tap: "44px";
     readonly "chip-height": "24px";
     readonly measure: "62ch";
     readonly "stroke-hair": "1px";
@@ -50,31 +57,32 @@ export declare const defaults: {
     readonly "stroke-edge": "1.5px";
     readonly "stroke-focus": "2px";
     readonly "focus-gap": "2px";
-    readonly "focus-gap-field": "-1px";
+    readonly "focus-gap-field": "calc(-1 * var(--e-stroke-edge))";
     readonly depth: "2px";
     readonly "duration-tap": "80ms";
     readonly "duration-move": "220ms";
     readonly "easing-out": "cubic-bezier(0.2, 0.8, 0.2, 1)";
     readonly "z-raised": "1";
-    readonly "z-sticky": "5";
+    readonly "z-sticky": "2";
+    readonly "z-focus": "3";
     readonly "z-tooltip": "55";
     readonly "z-modal": "40";
     readonly "z-popover": "45";
     readonly "z-toast": "50";
-    readonly "font-sans": "\"Jost\", Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif";
-    readonly "font-mono": "\"Spline Sans Mono\", ui-monospace, Menlo, Consolas, monospace";
+    readonly "font-sans": "\"Bricolage Grotesque\", \"Avenir Next\", system-ui, sans-serif";
+    readonly "font-mono": "\"Geist Mono\", ui-monospace, Menlo, Consolas, monospace";
 };
 export declare const groups: {
-    readonly color: readonly ["brand-blue", "brand-green", "primary", "on-primary", "secondary", "on-secondary", "secondary-soft", "danger", "on-danger", "danger-soft", "warning-strong", "warning-soft", "background", "surface", "surface-tint", "ink", "scrim", "muted", "border", "border-strong", "focus-ring", "focus-field"];
+    readonly color: readonly ["brand-blue", "brand-green", "primary", "on-primary", "secondary", "on-secondary", "secondary-soft", "danger", "on-danger", "danger-soft", "warning-strong", "warning-soft", "background", "surface", "surface-tint", "surface-hover", "ink", "print-ink", "print-paper", "scrim", "muted", "border", "border-strong", "focus-ring", "focus-field"];
     readonly spacing: readonly ["space-1", "space-2", "space-3", "space-4", "space-6", "space-8"];
     readonly radius: readonly ["radius-sm", "radius-md", "radius-lg", "radius-pill"];
     readonly shadow: readonly ["edge", "well", "float"];
     readonly fontSize: readonly ["text-xs", "text-sm", "text-md", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl"];
-    readonly size: readonly ["control-height", "chip-height", "measure"];
+    readonly size: readonly ["control-height", "shade-hover", "shade-press", "shade-slab", "tap", "chip-height", "measure"];
     readonly stroke: readonly ["stroke-hair", "stroke-card", "stroke-edge", "stroke-focus", "focus-gap", "focus-gap-field", "depth"];
     readonly duration: readonly ["duration-tap", "duration-move"];
     readonly easing: readonly ["easing-out"];
-    readonly zIndex: readonly ["z-raised", "z-sticky", "z-tooltip", "z-modal", "z-popover", "z-toast"];
+    readonly zIndex: readonly ["z-raised", "z-sticky", "z-focus", "z-tooltip", "z-modal", "z-popover", "z-toast"];
     readonly font: readonly ["font-sans", "font-mono"];
 };
 export declare const usage: Record<string, string>;

package/dist/generated/defaults.js

@@ -15,7 +15,10 @@ export const defaults = {
     "background": "#ffffff",
     "surface": "#ffffff",
     "surface-tint": "#eaf4f8",
+    "surface-hover": "color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%)",
     "ink": "#000000",
+    "print-ink": "#000000",
+    "print-paper": "#ffffff",
     "scrim": "rgb(11 40 52 / 0.55)",
     "muted": "#515151",
     "border": "#7f8f96",
@@ -44,6 +47,10 @@ export const defaults = {
     "text-3xl": "30px",
     "text-4xl": "36px",
     "control-height": "48px",
+    "shade-hover": "black 8%",
+    "shade-press": "black 16%",
+    "shade-slab": "black 30%",
+    "tap": "44px",
     "chip-height": "24px",
     "measure": "62ch",
     "stroke-hair": "1px",
@@ -51,19 +58,20 @@ export const defaults = {
     "stroke-edge": "1.5px",
     "stroke-focus": "2px",
     "focus-gap": "2px",
-    "focus-gap-field": "-1px",
+    "focus-gap-field": "calc(-1 * var(--e-stroke-edge))",
     "depth": "2px",
     "duration-tap": "80ms",
     "duration-move": "220ms",
     "easing-out": "cubic-bezier(0.2, 0.8, 0.2, 1)",
     "z-raised": "1",
-    "z-sticky": "5",
+    "z-sticky": "2",
+    "z-focus": "3",
     "z-tooltip": "55",
     "z-modal": "40",
     "z-popover": "45",
     "z-toast": "50",
-    "font-sans": "\"Jost\", Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif",
-    "font-mono": "\"Spline Sans Mono\", ui-monospace, Menlo, Consolas, monospace"
+    "font-sans": "\"Bricolage Grotesque\", \"Avenir Next\", system-ui, sans-serif",
+    "font-mono": "\"Geist Mono\", ui-monospace, Menlo, Consolas, monospace"
 };
 export const groups = {
     "color": [
@@ -82,7 +90,10 @@ export const groups = {
         "background",
         "surface",
         "surface-tint",
+        "surface-hover",
         "ink",
+        "print-ink",
+        "print-paper",
         "scrim",
         "muted",
         "border",
@@ -121,6 +132,10 @@ export const groups = {
     ],
     "size": [
         "control-height",
+        "shade-hover",
+        "shade-press",
+        "shade-slab",
+        "tap",
         "chip-height",
         "measure"
     ],
@@ -143,6 +158,7 @@ export const groups = {
     "zIndex": [
         "z-raised",
         "z-sticky",
+        "z-focus",
         "z-tooltip",
         "z-modal",
         "z-popover",
@@ -168,12 +184,15 @@ export const usage = {
     "warning-soft": "Tinted backdrop of a warning chip, stamp, notice or toast.",
     "background": "The page ground: the colour behind everything, painted by the app shell and the page. White by default, the same as `surface`. The `background` input of `defineTheme` sets it; when only `surface` is given the page ground follows the surface.",
     "surface": "What sits on the page: cards, fields, popovers, dialogs, panels and headers. Every screen starts on white. The `surface` input of `defineTheme` sets it, and with it derives `surface-tint`, the soft tone backdrops and, on a dark surface, the light action colours.",
-    "surface-tint": "The surface's second step: wells, hovered rows, table headers, footers, empty slots and the information tone's tint. Derived from `surface` by shifting its lightness 0.045 toward the foreground (0.06 the other way on a dark surface) in the brand hue. About 1.1:1 against white, so never a boundary on its own.",
+    "surface-tint": "The surface's second step: wells, hovered rows, table headers, footers, empty slots and the information tone's tint. Derived from `surface` by shifting its lightness 0.045 toward the foreground (0.06 the other way on a dark surface) in the brand hue (a neutral grey with `contrast: \"high\"`). About 1.1:1 against white, so never a boundary on its own.",
+    "surface-hover": "The hover tone for rows, items and tiles that sit on `surface`: `surface-tint` pulled 3% toward `ink`: the same fill as the selected nav item, so a hovered item and a selected one match. Follows a dark surface and a custom brand automatically.",
     "ink": "Body copy, headings and icons on `surface`, `surface-tint`, `primary`, `secondary`, `danger` and the soft tints. Also the neutral chip colour. Set by the `foreground` input of `defineTheme`, which also drives `muted`, `border` and `border-strong`.",
+    "print-ink": "Text and rules when printing, whatever the theme: black.",
+    "print-paper": "The page and fills when printing, whatever the theme: white.",
     "scrim": "The dimmed backdrop behind a dialog or drawer.",
-    "muted": "Secondary text, kickers and captions on `surface` (7.9:1) and `surface-tint` (7.1:1): AAA. Close to the grey of the logo's tagline. From a `foreground` input, `ink` softened toward `surface` until it just holds 7:1.",
-    "border": "Hairlines between rows, the outline of cards and popovers, and the underside of clickable rows. 3.4:1 on `surface` and 3.0:1 on `surface-tint`, so every edge is visible on white. Control edges use `border-strong`. From a `foreground` input, `ink` softened toward `surface` until it just holds 3.4:1.",
-    "border-strong": "Input, checkbox and other control borders on `surface` (4.5:1, above the 3:1 floor). From a `foreground` input, `ink` softened toward `surface` until it just holds 4.5:1.",
+    "muted": "Secondary text, kickers and captions on `surface` (7.9:1) and `surface-tint` (7.1:1): AAA. Close to the grey of the logo's tagline. From a `foreground` input, `ink` softened toward `surface` until it just holds 7:1 (15:1 with `contrast: \"high\"`).",
+    "border": "Hairlines between rows, the outline of cards and popovers, and the underside of clickable rows. 3.4:1 on `surface` and 3.0:1 on `surface-tint`, so every edge is visible on white. Control edges use `border-strong`. From a `foreground` input, `ink` softened toward `surface` until it just holds 3.4:1; `ink` itself with `contrast: \"high\"`.",
+    "border-strong": "Input, checkbox and other control borders on `surface` (4.5:1, above the 3:1 floor). From a `foreground` input, `ink` softened toward `surface` until it just holds 4.5:1; `ink` itself with `contrast: \"high\"`.",
     "focus-ring": "Solid 2px focus outline with 2px offset on buttons, links, tabs, rows and every control that is not a text input; 3:1 or better on every surface and fill.",
     "focus-field": "The focus outline and edge of text inputs and everything built on them (Field, Select, Combobox, DatePicker, NumberField, SearchBar, OtpField). Primary teal, 7.9:1 on `surface`. An invalid input keeps `danger`. Buttons and links use `focus-ring`.",
     "space-1": "Icon-to-text gaps, gap inside a chip.",
@@ -198,20 +217,25 @@ export const usage = {
     "text-3xl": "The one amount a statement leads with.",
     "text-4xl": "Page titles (h1).",
     "control-height": "Height of every control that can be tapped: buttons, inputs, selects, date fields, slots, and one row of a multi-select. One height everywhere, so a Button beside an input lines up and a field never shifts when it changes type.",
+    "shade-hover": "A mix amount for hover feedback: `color-mix(in srgb, <fill>, var(--e-shade-hover))` darkens the fill by 8%. On a dark surface it lightens by 12% instead, since darkening a dark fill is invisible.",
+    "shade-press": "A mix amount for the pressed state, one step past `shade-hover`: `color-mix(in srgb, <fill>, var(--e-shade-press))`. Lightens on a dark surface.",
+    "shade-slab": "A mix amount for the raised bottom edge (the slab) under a fill: `color-mix(in srgb, <fill>, var(--e-shade-slab))`. Darkens on light and dark surfaces alike.",
+    "tap": "Minimum tap target size. Compact controls pad or extend their hit area up to this size.",
     "chip-height": "Height of a Chip or a small Stamp.",
     "measure": "Longest comfortable line of copy.",
     "stroke-hair": "Dividers and the rule between rows.",
-    "stroke-card": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px.",
-    "stroke-edge": "The outline of a control, chip or stamp.",
+    "stroke-card": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px unless `strokes.card` sets it.",
+    "stroke-edge": "The outline of a control, chip or stamp. 1.5 times the hairline unless `strokes.edge` sets it.",
     "stroke-focus": "The focus outline.",
     "focus-gap": "Space between a button or link and its focus outline.",
-    "focus-gap-field": "Space between a text input and its focus outline: a 1px overlap, so the outline sits over the border with no seam.",
+    "focus-gap-field": "Space between a text input and its focus outline: minus the control border, so the outline lies exactly over the border with no seam, whatever its width.",
     "depth": "How far a raised or pressed edge reaches. A button, a statement row and a selected time slot stand out by this much of extra thickness on the bottom edge; a pressed button, the selected item of a list or segmented control and a notice are pressed in by the same amount on the top edge.",
     "duration-tap": "Hover and press feedback.",
     "duration-move": "Things that move: a progress fill, a drawer.",
     "easing-out": "Fast start, soft landing. The only easing in the system.",
     "z-raised": "A part that must sit above its sibling inside one component.",
     "z-sticky": "Sticky table headers and columns.",
+    "z-focus": "A focused part whose outline must show over its siblings, such as a segment in a joined group.",
     "z-tooltip": "Tooltip bubbles: above everything, including dialogs, popovers and toasts.",
     "z-modal": "Dialogs and drawers with their scrim.",
     "z-popover": "Popovers, menus and option lists. Above modals, so a Select inside a Dialog opens over it.",
@@ -234,12 +258,13 @@ export const derivedFrom = {
     "warning-soft": "warning,surface",
     "background": "background,surface",
     "surface": "surface",
-    "surface-tint": "surface,brand",
+    "surface-tint": "surface,brand,contrast",
+    "surface-hover": "surface-tint,ink",
     "ink": "foreground,surface",
-    "scrim": "surface",
-    "muted": "foreground,surface",
-    "border": "foreground,surface",
-    "border-strong": "foreground,surface",
+    "scrim": "surface,contrast",
+    "muted": "foreground,surface,contrast",
+    "border": "foreground,surface,contrast",
+    "border-strong": "foreground,surface,contrast",
     "focus-ring": "foreground",
     "focus-field": "brand",
     "space-1": "spaceScale",
@@ -263,6 +288,9 @@ export const derivedFrom = {
     "text-3xl": "textScale",
     "text-4xl": "textScale",
     "control-height": "controlHeight",
+    "shade-hover": "surface",
+    "shade-press": "surface",
+    "shade-slab": "surface",
     "chip-height": "controlHeight",
     "stroke-hair": "strokes",
     "stroke-card": "strokes,elevation",
@@ -274,6 +302,6 @@ export const derivedFrom = {
     "duration-move": "motion",
     "easing-out": "motion"
 };
-export const constants = ["radius-pill", "measure", "depth", "z-raised", "z-sticky", "z-tooltip", "z-modal", "z-popover", "z-toast"];
+export const constants = ["print-ink", "print-paper", "radius-pill", "tap", "measure", "depth", "z-raised", "z-sticky", "z-focus", "z-tooltip", "z-modal", "z-popover", "z-toast"];
 export const inputTokens = ["font-sans", "font-mono", "brand-blue", "brand-green", "background", "surface", "ink", "control-height", "stroke-hair", "stroke-focus"];
-export const colorNames = new Set(["brand-blue", "brand-green", "primary", "on-primary", "secondary", "on-secondary", "secondary-soft", "danger", "on-danger", "danger-soft", "warning-strong", "warning-soft", "background", "surface", "surface-tint", "ink", "scrim", "muted", "border", "border-strong", "focus-ring", "focus-field"]);
+export const colorNames = new Set(["brand-blue", "brand-green", "primary", "on-primary", "secondary", "on-secondary", "secondary-soft", "danger", "on-danger", "danger-soft", "warning-strong", "warning-soft", "background", "surface", "surface-tint", "surface-hover", "ink", "print-ink", "print-paper", "scrim", "muted", "border", "border-strong", "focus-ring", "focus-field"]);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { defineTheme, checkContrast, LAYER_ORDER, defaults, groups } from "./theme.js";
-export type { Theme, ThemeInput, MotionPreset, ElevationPreset, TokenValues, ContrastIssue, CssOptions, TokenName, } from "./theme.js";
+export type { Theme, ThemeInput, MotionPreset, ElevationPreset, ContrastPreset, TokenValues, ContrastIssue, CssOptions, TokenName, } from "./theme.js";
 export { contrast, luminance, reachContrast, settleContrast, withLightness, tint, toOklch, fromOklch, parseHex, toHex, } from "./color.js";
 export { usage, derivedFrom, constants, inputTokens } from "./generated/defaults.js";

package/dist/theme.d.ts

@@ -2,6 +2,7 @@ import { defaults, groups, type TokenName } from "./generated/defaults.js";
 export type TokenValues = Partial<Record<TokenName, string>>;
 export type MotionPreset = "default" | "snappy" | "gentle" | "none";
 export type ElevationPreset = "outline" | "lifted" | "bold";
+export type ContrastPreset = "standard" | "high";
 export interface ThemeInput {
     /** Identifies the theme. It becomes the value of `data-e-theme` when the theme is scoped to an element. */
     name?: string;
@@ -34,11 +35,15 @@ export interface ThemeInput {
     textScale?: number;
     /** Multiplier for the spacing scale, `space-1` to `space-8`. 1 is the default scale; non-finite or non-positive values are ignored. */
     spaceScale?: number;
-    /** Line weights in px. `hair` sets `stroke-hair` and `stroke-edge` (1.5 times it); `focus` sets `stroke-focus`, `focus-gap` (the same) and `focus-gap-field` (a 1px overlap: a field's focus outline sits over its border). */
+    /** Line weights in px. `hair` sets `stroke-hair`, `stroke-card` and `stroke-edge` (1.5 times it); `focus` sets `stroke-focus` and `focus-gap` (the same). `edge` and `card` set `stroke-edge` (controls) and `stroke-card` (containers, chips) outright and win over what `hair` and a bold `elevation` give. `focus-gap-field` always follows `stroke-edge` in CSS (minus the border width), so a field's focus outline sits exactly over its border. */
     strokes?: {
         hair?: number;
         focus?: number;
+        edge?: number;
+        card?: number;
     };
+    /** `"high"` draws every line and secondary text at full strength: `border` and `border-strong` become the foreground colour, `muted` is softened only until it holds 15:1, `surface-tint` is a neutral grey (no brand tint) and `scrim` is darker. Pair it with heavier `strokes`. Default `"standard"`. */
+    contrast?: ContrastPreset;
     /** How state changes feel: sets `duration-tap`, `duration-move` and `easing-out`. */
     motion?: MotionPreset;
     /** How depth is drawn: sets `edge`, `well` and `float` from the border, ink and hairline. `outline` is flat rings, `lifted` adds soft drops, `bold` uses heavy rings and a hard offset shadow. */
@@ -76,7 +81,7 @@ export interface Theme {
     apply(el?: HTMLElement): void;
 }
 /** Cascade order of the library. Later layers win, and each layer only builds on the ones before it. */
-export declare const LAYER_ORDER = "e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.account, e.page";
+export declare const LAYER_ORDER = "e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page";
 export declare function checkContrast(tokens: Record<string, string>): ContrastIssue[];
 export declare function defineTheme(input?: ThemeInput): Theme;
 export { defaults, groups };

package/dist/theme.js

@@ -1,7 +1,7 @@
 import { defaults, groups } from "./generated/defaults.js";
 import { contrast, fromOklch, luminance, parseHex, reachContrast, settleContrast, tint, toOklch, withLightness, } from "./color.js";
 /** Cascade order of the library. Later layers win, and each layer only builds on the ones before it. */
-export const LAYER_ORDER = "e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.account, e.page";
+export const LAYER_ORDER = "e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page";
 const RADII = {
     sharp: { sm: "0px", md: "2px", lg: "4px" },
     default: { sm: "4px", md: "8px", lg: "16px" },
@@ -54,6 +54,8 @@ function toneHue(soft, strong, tone) {
 function deriveStrokes(input, out) {
     const hair = positive(input.strokes?.hair);
     const focus = positive(input.strokes?.focus);
+    const edge = positive(input.strokes?.edge);
+    const card = positive(input.strokes?.card);
     if (hair !== undefined) {
         out["stroke-hair"] = px(hair);
         out["stroke-card"] = px(hair);
@@ -62,8 +64,11 @@ function deriveStrokes(input, out) {
     if (focus !== undefined) {
         out["stroke-focus"] = px(focus);
         out["focus-gap"] = px(focus);
-        out["focus-gap-field"] = "-1px";
     }
+    if (edge !== undefined)
+        out["stroke-edge"] = px(edge);
+    if (card !== undefined)
+        out["stroke-card"] = px(card);
 }
 const SOFT = [
     [1, 2, 0, 0.08],
@@ -91,10 +96,11 @@ function layers(set, dark, base) {
         .map(([y, blur, spread, alpha]) => `0 ${y}px ${blur}px ${spread}px rgba(${base}, ${Math.round(Math.min(0.9, dark ? alpha * 2.4 : alpha) * 100) / 100})`)
         .join(", ");
 }
-function deriveElevation(style, out, dark) {
+function deriveElevation(style, out, dark, strokes) {
     const ring = (w) => `0 0 0 ${w} ${out["border"]}`;
     const hair = out["stroke-hair"];
-    const card = style === "bold" ? "2px" : hair;
+    const given = positive(strokes?.card);
+    const card = given !== undefined ? px(given) : style === "bold" ? "2px" : hair;
     out["stroke-card"] = card;
     const base = shadowRgb(out, dark);
     if (style === "lifted") {
@@ -135,12 +141,22 @@ function deriveGround(input, out, dark) {
         }
     }
     out["background"] = input.background ?? (input.surface ? surface : out["background"]);
-    const foreground = input.foreground ?? (input.surface ? (dark ? WHITE : defaults["ink"]) : undefined);
+    const foreground = input.foreground ?? (input.surface ? (dark ? WHITE : defaults["ink"]) : input.contrast === "high" ? defaults["ink"] : undefined);
     if (foreground) {
         out["ink"] = foreground;
         out["muted"] = settleContrast(foreground, surface, 7);
         out["border"] = settleContrast(foreground, surface, 3.4);
         out["border-strong"] = settleContrast(foreground, surface, 4.5);
+        if (input.contrast === "high") {
+            out["muted"] = settleContrast(foreground, surface, 15);
+            out["border"] = foreground;
+            out["border-strong"] = foreground;
+        }
+    }
+    if (input.contrast === "high") {
+        const l = toOklch(surface).l;
+        out["surface-tint"] = fromOklch({ l: Math.min(1, Math.max(0, dark ? l + 0.06 : l - 0.04)), c: 0, h: 0 });
+        out["scrim"] = "rgb(0 0 0 / 0.75)";
     }
 }
 function derive(input) {
@@ -152,6 +168,9 @@ function derive(input) {
         out["warning-strong"] = input.warning ?? DARK_WARNING;
         out["scrim"] = "rgb(0 0 0 / 0.7)";
         out["well"] = DARK_WELL;
+        out["shade-hover"] = "white 12%";
+        out["shade-press"] = "white 20%";
+        out["shade-slab"] = "black 45%";
     }
     const dangerBase = input.danger ?? (dark ? DARK_DANGER : undefined);
     if (dangerBase)
@@ -215,8 +234,14 @@ function derive(input) {
         out["control-height"] = px(height);
         out["chip-height"] = px(Math.max(2, Math.round(height / 4) * 2));
     }
-    if (input.elevation || input.background || input.surface || input.foreground || positive(input.strokes?.hair) !== undefined) {
-        deriveElevation(input.elevation ?? "outline", out, dark);
+    if (input.elevation ||
+        input.background ||
+        input.surface ||
+        input.foreground ||
+        input.contrast === "high" ||
+        positive(input.strokes?.hair) !== undefined ||
+        positive(input.strokes?.card) !== undefined) {
+        deriveElevation(input.elevation ?? "outline", out, dark, input.strokes);
     }
     Object.assign(out, input.tokens);
     return out;

package/dist/tokens.css

@@ -1,5 +1,5 @@
 /* Generated from tokens.json. Theme: light. */
-@layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.account, e.page;
+@layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.tokens {
 :root {
   --e-brand-blue: #2c95b4;
@@ -17,7 +17,10 @@
   --e-background: #ffffff;
   --e-surface: #ffffff;
   --e-surface-tint: #eaf4f8;
+  --e-surface-hover: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);
   --e-ink: #000000;
+  --e-print-ink: #000000;
+  --e-print-paper: #ffffff;
   --e-scrim: rgb(11 40 52 / 0.55);
   --e-muted: #515151;
   --e-border: #7f8f96;
@@ -46,6 +49,10 @@
   --e-text-3xl: 30px;
   --e-text-4xl: 36px;
   --e-control-height: 48px;
+  --e-shade-hover: black 8%;
+  --e-shade-press: black 16%;
+  --e-shade-slab: black 30%;
+  --e-tap: 44px;
   --e-chip-height: 24px;
   --e-measure: 62ch;
   --e-stroke-hair: 1px;
@@ -53,19 +60,20 @@
   --e-stroke-edge: 1.5px;
   --e-stroke-focus: 2px;
   --e-focus-gap: 2px;
-  --e-focus-gap-field: -1px;
+  --e-focus-gap-field: calc(-1 * var(--e-stroke-edge));
   --e-depth: 2px;
   --e-duration-tap: 80ms;
   --e-duration-move: 220ms;
   --e-easing-out: cubic-bezier(0.2, 0.8, 0.2, 1);
   --e-z-raised: 1;
-  --e-z-sticky: 5;
+  --e-z-sticky: 2;
+  --e-z-focus: 3;
   --e-z-tooltip: 55;
   --e-z-modal: 40;
   --e-z-popover: 45;
   --e-z-toast: 50;
-  --e-font-sans: "Jost", Futura, "Century Gothic", "Avenir Next", system-ui, sans-serif;
-  --e-font-mono: "Spline Sans Mono", ui-monospace, Menlo, Consolas, monospace;
+  --e-font-sans: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
+  --e-font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
 }
 :root, [data-e-theme] {
   --e-wash-hover: color-mix(in srgb, var(--e-ink) 8%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eos-ui/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Eos design tokens: CSS custom properties, typed values and a theme generator with contrast checks.",
   "type": "module",
   "license": "MIT",

package/src/tokens.json

@@ -100,8 +100,14 @@
       {
         "name": "surface-tint",
         "value": "#eaf4f8",
-        "usage": "The surface's second step: wells, hovered rows, table headers, footers, empty slots and the information tone's tint. Derived from `surface` by shifting its lightness 0.045 toward the foreground (0.06 the other way on a dark surface) in the brand hue. About 1.1:1 against white, so never a boundary on its own.",
-        "from": "surface,brand"
+        "usage": "The surface's second step: wells, hovered rows, table headers, footers, empty slots and the information tone's tint. Derived from `surface` by shifting its lightness 0.045 toward the foreground (0.06 the other way on a dark surface) in the brand hue (a neutral grey with `contrast: \"high\"`). About 1.1:1 against white, so never a boundary on its own.",
+        "from": "surface,brand,contrast"
+      },
+      {
+        "name": "surface-hover",
+        "value": "color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%)",
+        "usage": "The hover tone for rows, items and tiles that sit on `surface`: `surface-tint` pulled 3% toward `ink`: the same fill as the selected nav item, so a hovered item and a selected one match. Follows a dark surface and a custom brand automatically.",
+        "from": "surface-tint,ink"
       },
       {
         "name": "ink",
@@ -110,29 +116,41 @@
         "from": "foreground,surface",
         "input": true
       },
+      {
+        "name": "print-ink",
+        "value": "#000000",
+        "usage": "Text and rules when printing, whatever the theme: black.",
+        "constant": true
+      },
+      {
+        "name": "print-paper",
+        "value": "#ffffff",
+        "usage": "The page and fills when printing, whatever the theme: white.",
+        "constant": true
+      },
       {
         "name": "scrim",
         "value": "rgb(11 40 52 / 0.55)",
         "usage": "The dimmed backdrop behind a dialog or drawer.",
-        "from": "surface"
+        "from": "surface,contrast"
       },
       {
         "name": "muted",
         "value": "#515151",
-        "usage": "Secondary text, kickers and captions on `surface` (7.9:1) and `surface-tint` (7.1:1): AAA. Close to the grey of the logo's tagline. From a `foreground` input, `ink` softened toward `surface` until it just holds 7:1.",
-        "from": "foreground,surface"
+        "usage": "Secondary text, kickers and captions on `surface` (7.9:1) and `surface-tint` (7.1:1): AAA. Close to the grey of the logo's tagline. From a `foreground` input, `ink` softened toward `surface` until it just holds 7:1 (15:1 with `contrast: \"high\"`).",
+        "from": "foreground,surface,contrast"
       },
       {
         "name": "border",
         "value": "#7f8f96",
-        "usage": "Hairlines between rows, the outline of cards and popovers, and the underside of clickable rows. 3.4:1 on `surface` and 3.0:1 on `surface-tint`, so every edge is visible on white. Control edges use `border-strong`. From a `foreground` input, `ink` softened toward `surface` until it just holds 3.4:1.",
-        "from": "foreground,surface"
+        "usage": "Hairlines between rows, the outline of cards and popovers, and the underside of clickable rows. 3.4:1 on `surface` and 3.0:1 on `surface-tint`, so every edge is visible on white. Control edges use `border-strong`. From a `foreground` input, `ink` softened toward `surface` until it just holds 3.4:1; `ink` itself with `contrast: \"high\"`.",
+        "from": "foreground,surface,contrast"
       },
       {
         "name": "border-strong",
         "value": "#767676",
-        "usage": "Input, checkbox and other control borders on `surface` (4.5:1, above the 3:1 floor). From a `foreground` input, `ink` softened toward `surface` until it just holds 4.5:1.",
-        "from": "foreground,surface"
+        "usage": "Input, checkbox and other control borders on `surface` (4.5:1, above the 3:1 floor). From a `foreground` input, `ink` softened toward `surface` until it just holds 4.5:1; `ink` itself with `contrast: \"high\"`.",
+        "from": "foreground,surface,contrast"
       },
       {
         "name": "focus-ring",
@@ -151,8 +169,8 @@
   "type": {
     "fonts": [],
     "families": {
-      "sans": "\"Jost\", Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif",
-      "mono": "\"Spline Sans Mono\", ui-monospace, Menlo, Consolas, monospace"
+      "sans": "\"Bricolage Grotesque\", \"Avenir Next\", system-ui, sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, Menlo, Consolas, monospace"
     },
     "groups": [
       {
@@ -401,7 +419,7 @@
     ]
   },
   "size": {
-    "note": "Sizes that components share.",
+    "note": "Sizes and amounts that components share.",
     "tokens": [
       {
         "name": "control-height",
@@ -410,6 +428,30 @@
         "from": "controlHeight",
         "input": true
       },
+      {
+        "name": "shade-hover",
+        "value": "black 8%",
+        "usage": "A mix amount for hover feedback: `color-mix(in srgb, <fill>, var(--e-shade-hover))` darkens the fill by 8%. On a dark surface it lightens by 12% instead, since darkening a dark fill is invisible.",
+        "from": "surface"
+      },
+      {
+        "name": "shade-press",
+        "value": "black 16%",
+        "usage": "A mix amount for the pressed state, one step past `shade-hover`: `color-mix(in srgb, <fill>, var(--e-shade-press))`. Lightens on a dark surface.",
+        "from": "surface"
+      },
+      {
+        "name": "shade-slab",
+        "value": "black 30%",
+        "usage": "A mix amount for the raised bottom edge (the slab) under a fill: `color-mix(in srgb, <fill>, var(--e-shade-slab))`. Darkens on light and dark surfaces alike.",
+        "from": "surface"
+      },
+      {
+        "name": "tap",
+        "value": "44px",
+        "usage": "Minimum tap target size. Compact controls pad or extend their hit area up to this size.",
+        "constant": true
+      },
       {
         "name": "chip-height",
         "value": "24px",
@@ -437,13 +479,13 @@
       {
         "name": "stroke-card",
         "value": "1px",
-        "usage": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px.",
+        "usage": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px unless `strokes.card` sets it.",
         "from": "strokes,elevation"
       },
       {
         "name": "stroke-edge",
         "value": "1.5px",
-        "usage": "The outline of a control, chip or stamp.",
+        "usage": "The outline of a control, chip or stamp. 1.5 times the hairline unless `strokes.edge` sets it.",
         "from": "strokes"
       },
       {
@@ -461,8 +503,8 @@
       },
       {
         "name": "focus-gap-field",
-        "value": "-1px",
-        "usage": "Space between a text input and its focus outline: a 1px overlap, so the outline sits over the border with no seam.",
+        "value": "calc(-1 * var(--e-stroke-edge))",
+        "usage": "Space between a text input and its focus outline: minus the control border, so the outline lies exactly over the border with no seam, whatever its width.",
         "from": "strokes"
       },
       {
@@ -511,10 +553,16 @@
       },
       {
         "name": "z-sticky",
-        "value": "5",
+        "value": "2",
         "usage": "Sticky table headers and columns.",
         "constant": true
       },
+      {
+        "name": "z-focus",
+        "value": "3",
+        "usage": "A focused part whose outline must show over its siblings, such as a segment in a joined group.",
+        "constant": true
+      },
       {
         "name": "z-tooltip",
         "value": "55",