pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.64

package/dist/Theme/tokens/brands/rosewood/palette.light.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const neutrals_1 = require("../neutrals");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
 const brandInk_1 = require("../../builders/brandInk");
-const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const PRIMARY_500 = "#cb6b94";
 const primary = {
-    50: "#fdf2f5",
-    100: "#f9d6de",
-    200: "#f2aaba",
-    300: "#ea7f96",
-    400: "#de627d",
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
     500: PRIMARY_500,
-    600: "#b9556b",
-    700: "#984558",
-    800: "#763646",
-    900: "#552634",
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 const palette = {

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts

@@ -66,18 +66,6 @@ declare const palette: {
         800: string;
         900: string;
     };
-    background: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
     text: {
         50: string;
         100: string;
@@ -103,9 +91,6 @@ declare const palette: {
         900: string;
     };
     gray: {
-        50: string;
-        100: string;
-        200: string;
         300: string;
         400: string;
         500: string;
@@ -113,6 +98,9 @@ declare const palette: {
         700: string;
         800: string;
         900: string;
+        50: string;
+        100: string;
+        200: string;
     };
     border: {
         50: string;
@@ -162,20 +150,6 @@ declare const palette: {
         800: string;
         900: string;
     };
-    table: {
-        hover: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-    };
     accentText: string;
     onPrimary: string;
     boxShadow: {
@@ -197,8 +171,12 @@ declare const palette: {
     purple: import("../..").ColorScale;
     pink: import("../..").ColorScale;
     backgroundColor: import("../..").NamedSurfaces;
+    background: import("../..").ColorScale;
     focusRing: import("../..").FocusRingTokens;
     sidebar: import("../..").SidebarTokens;
+    table: {
+        hover: import("../..").ColorScale;
+    };
     semanticText: import("../..").SemanticTextTokens;
     textMuted: string;
     onSemantic: import("../..").SemanticTextTokens;

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -38,19 +38,6 @@ const secondary = {
     900: "#fafafa",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_500),
 };
-// background[50] = the elevated surface (#0e0e11), resolved through a token, not a literal.
-const background = {
-    50: "#0e0e11",
-    100: "#131316",
-    200: "#18181b",
-    300: "#212124",
-    400: "#27272a",
-    500: "#3f3f46",
-    600: "#52525b",
-    700: "#71717a",
-    800: "#a1a1aa",
-    900: "#d4d4d8",
-};
 const text = {
     50: "#71717a",
     100: "#8a8a93",
@@ -76,10 +63,7 @@ const header = {
     900: "#ffffff",
 };
 // NOTE: gray[400] is the one value here NOT ported verbatim — pinned to clear the 3:1 non-text bar (shadcn's own measures 2.81).
-const gray = {
-    50: "#18181b",
-    100: "#27272a",
-    200: "#3f3f46",
+const grayInk = {
     300: "#52525b",
     400: "#7a7a83",
     500: "#a1a1aa",
@@ -137,20 +121,6 @@ const disabled = {
     800: "#a1a1aa",
     900: "#d4d4d8",
 };
-const table = {
-    hover: {
-        50: "#0e0e11",
-        100: "#131316",
-        200: "#18181b",
-        300: "#1f1f22",
-        400: "#27272a",
-        500: "#2f2f33",
-        600: "#3f3f46",
-        700: "#52525b",
-        800: "#71717a",
-        900: "#a1a1aa",
-    },
-};
 const buildPalette = () => {
     const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
     return {
@@ -159,16 +129,14 @@ const buildPalette = () => {
         primary,
         secondary,
         tertiary: { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity },
-        // NOTE: backgroundColor/sidebar fall through to `...derived` — mobile's literals collapse distinct elevation steps, breaking darkSurfaces.test.ts.
-        background,
+        // NOTE: the planes (backgroundColor, background, table, gray fills) stay derived — they rise with the card.
         text,
         header,
-        gray,
+        gray: { ...derived.gray, ...grayInk },
         border,
         boxborder,
         placeholder,
         disabled,
-        table,
         accentText: (0, accentText_1.pickAccentText)(primary, derived.backgroundColor.main),
         onPrimary: (0, accentText_1.onFilled)(PRIMARY_500, derived.white, derived.black),
         boxShadow: {

package/dist/Theme/tokens/builders/accentText.d.ts

@@ -12,6 +12,8 @@ declare const DARK_CANVAS_LUMINANCE = 0.2;
 /** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
 export declare const isDarkCanvas: (canvas: string) => boolean;
 export declare const accentTextOnCanvas: (scale: ColorScale, canvas: string) => string;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+export declare const accentTextOnPlanes: (scale: ColorScale, planes: readonly string[]) => string;
 export declare const onFilled: (fill: string, white: string, black: string) => string;
 export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };

package/dist/Theme/tokens/builders/accentText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
+exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.onGradient = exports.onFilled = exports.accentTextOnPlanes = exports.accentTextOnCanvas = exports.isDarkCanvas = exports.DEFAULT_BLACK = exports.DEFAULT_WHITE = exports.DEFAULT_CANVAS = exports.pickAccentText = void 0;
 const color_1 = require("./color");
 /** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
 const AA_NORMAL_TEXT = 4.5;
@@ -27,6 +27,12 @@ exports.isDarkCanvas = isDarkCanvas;
 // NOTE: held to AA in both modes now — some brands' light [500] no longer passes through untouched.
 const accentTextOnCanvas = (scale, canvas) => (0, exports.pickAccentText)(scale, canvas);
 exports.accentTextOnCanvas = accentTextOnCanvas;
+/** Accent ink for chrome that can land on any plane (canvas, card, overlay): the first rung clearing AA on all. */
+const accentTextOnPlanes = (scale, planes) => {
+    const found = SEARCH_ORDER.find((rung) => planes.every((plane) => (0, color_1.contrastRatio)(scale[rung], plane) >= AA_NORMAL_TEXT));
+    return scale[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
+};
+exports.accentTextOnPlanes = accentTextOnPlanes;
 // NOTE: white/black must be the mode-stable absolutes, not an adaptive token — always clears AA.
 const onFilled = (fill, white, black) => (0, color_1.contrastRatio)(white, fill) >= AA_NORMAL_TEXT ? white : black;
 exports.onFilled = onFilled;

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts

@@ -6,5 +6,10 @@ export declare const shiftLighter: (scale: ColorScale) => ColorScale;
 export declare const accentLightnessDelta: (accent500: string, white: string) => number;
 /** Raises every rung by the same lightness delta, preserving the ramp's shape and hue. */
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
-export declare function buildDarkPalette(light: BrandPaletteSource): PaletteProps;
+/** `lifted`: brand-tinted canvas, card a CARD_LIFT step above it. `flat`: the hue-neutral canvas the card shares. */
+export type DarkPlanes = "lifted" | "flat";
+export interface DarkPaletteOptions {
+    planes?: DarkPlanes;
+}
+export declare function buildDarkPalette(light: BrandPaletteSource, { planes }?: DarkPaletteOptions): PaletteProps;
 export default buildDarkPalette;

package/dist/Theme/tokens/builders/buildDarkPalette.js

@@ -11,6 +11,7 @@ const semanticText_1 = require("./semanticText");
 const focusRing_1 = require("./focusRing");
 const surfaceRaised_1 = require("./surfaceRaised");
 const star_1 = require("./star");
+const planes_1 = require("./planes");
 // Structural ramps are rebuilt at explicit targets (not reversed — light ramps bottom near 35%);
 // utility hues are reversed so index roles survive; brand/semantic ramps shift one step lighter.
 const SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -150,23 +151,49 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-// NOTE: surfaces are hue-neutral in dark (a tint wash reads as a different product per brand); accent lives in primary/semantic/text.
-const SURFACE_SAT = 0;
+const SURFACE_SAT = { lifted: 14, flat: 0 };
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
 const DISABLED_SAT = 8;
 const GRAY_SAT = 0;
-function buildDarkPalette(light) {
+// Fill rungs drawn ON a card keep their step above it, so they rise with the card; ink and chrome rungs stay.
+const BACKGROUND_FILLS = [100, 200, 300, 400, 500];
+// NOTE: table.hover[500] gates every ink (it is a named surface), so it climbs one rung per step, not the card's full rise.
+const TABLE_HOVER_ABOVE_CARD = {
+    50: 1, 100: 3, 200: 5, 300: 6, 400: 6.5, 500: 7,
+};
+const GRAY_FILLS = [50, 100, 200];
+const raise = (targets, rungs, by) => ({
+    ...targets,
+    ...Object.fromEntries(rungs.map((k) => [k, targets[k] + by])),
+});
+const cardPlane = (canvas, white, planes) => {
+    if (planes === "flat")
+        return { card: canvas, rise: 0, tableHover: TABLE_HOVER_TARGETS };
+    const card = (0, planes_1.lift)(white, canvas, planes_1.CARD_LIFT);
+    const cardL = (0, color_1.hexToHsl)(card).l;
+    const tableHover = {
+        ...TABLE_HOVER_TARGETS,
+        ...Object.fromEntries(Object.entries(TABLE_HOVER_ABOVE_CARD).map(([k, step]) => [k, cardL + step])),
+    };
+    return { card, rise: cardL - (0, color_1.hexToHsl)(canvas).l, tableHover };
+};
+function buildDarkPalette(light, { planes = "lifted" } = {}) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
+    const surfaceSat = SURFACE_SAT[planes];
     const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
         key,
-        (0, color_1.hslToHex)({ h, s: SURFACE_SAT, l }),
+        (0, color_1.hslToHex)({ h, s: surfaceSat, l }),
     ]));
     const white = light.white;
+    const { card, rise, tableHover } = cardPlane(namedSurfaces.main, white, planes);
     const primary = liftBrand(light.primary, white);
-    const background = fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT);
+    const background = {
+        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), surfaceSat),
+        50: card,
+    };
     const semantic = {
         success: liftAccent(light.semantic.success, white),
         error: liftAccent(light.semantic.error, white),
@@ -186,7 +213,7 @@ function buildDarkPalette(light) {
         transparent: light.transparent,
         black: light.black,
         white: light.white,
-        gray: fromTargets(hueSource, GRAY_TARGETS, GRAY_SAT),
+        gray: fromTargets(hueSource, raise(GRAY_TARGETS, GRAY_FILLS, rise), GRAY_SAT),
         red: (0, exports.reverseScale)(light.red),
         orange: (0, exports.reverseScale)(light.orange),
         yellow: (0, exports.reverseScale)(light.yellow),
@@ -203,7 +230,9 @@ function buildDarkPalette(light) {
         placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
         border: dividerRamp,
         boxborder: dividerRamp,
-        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, SURFACE_SAT) },
+        table: {
+            hover: fromTargets(hueSource, tableHover, surfaceSat),
+        },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main),
         textMuted: (0, mutedText_1.buildMutedText)(fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT), namedSurfaces.main),
@@ -211,7 +240,7 @@ function buildDarkPalette(light) {
         onPrimary: (0, accentText_1.onFilled)(primary[500], light.white, light.black),
         onSemantic: (0, semanticText_1.buildOnSemantic)(semantic, light.white, light.black),
         focusRing: (0, focusRing_1.buildFocusRing)({ primary, background, backgroundColor: namedSurfaces }),
-        surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)({ backgroundColor: namedSurfaces, background, white }),
+        surfaceRaised: (0, surfaceRaised_1.buildSurfaceRaised)({ backgroundColor: namedSurfaces, background, white }, (0, surfaceRaised_1.filledMarks)({ primary, semantic })),
         star: (0, star_1.buildStar)(namedSurfaces.main),
         sidebar: (0, sidebarAccent_1.withSidebarTokens)(light),
         boxShadow: {

package/dist/Theme/tokens/builders/filledSurface.d.ts

@@ -12,7 +12,11 @@ export type FilledSurface = {
     activeColor: string;
 };
 export declare const solidFillRung: (scale: ColorScale, white: string, canvas?: string) => keyof ColorScale;
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 export declare const darkerFillRung: (scale: ColorScale, canvas: string, white: string, step: 0 | 1) => keyof ColorScale;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 export declare const labelOnFill: (fill: string, white: string, black: string) => string;

package/dist/Theme/tokens/builders/filledSurface.js

@@ -44,15 +44,28 @@ const steppedRung = (base, canvas, step) => {
     const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
     return Math.min(900, Math.max(50, base + dir * step));
 };
-/** Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. */
+const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
+/**
+ * Hover (step 0) or active (step 1) fill rung, one step darker than `solidFillRung`. A step may not
+ * flip the label's side of AA (zinc dark: near-white fill, black ink) or fall below `CHROME_BORDER`
+ * against the canvas (a pressed warning solid used to reach 1.00:1 on the card).
+ */
 const darkerFillRung = (scale, canvas, white, step) => {
     const base = (0, exports.solidFillRung)(scale, white, canvas);
+    const wantsWhite = (0, color_1.contrastRatio)(white, scale[base]) >= accentText_1.AA_NORMAL_TEXT;
+    const holds = (rung) => (0, color_1.contrastRatio)(scale[rung], canvas) >= outlineRung_1.CHROME_BORDER &&
+        ((0, color_1.contrastRatio)(white, scale[rung]) >= accentText_1.AA_NORMAL_TEXT) === wantsWhite;
+    let rung;
     if (base === 500) {
         const mode = (0, accentText_1.isDarkCanvas)(canvas) ? "dark" : "light";
-        return FILL_STEP_RUNGS[mode][step];
+        rung = FILL_STEP_RUNGS[mode][step];
     }
-    const stepped = steppedRung(base, canvas, step === 0 ? 1 : 2);
-    return stepped;
+    else {
+        rung = steppedRung(base, canvas, step === 0 ? 1 : 2);
+    }
+    while (rung !== base && !holds(rung))
+        rung = steppedTowardBase(rung, base);
+    return rung;
 };
 exports.darkerFillRung = darkerFillRung;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */

package/dist/Theme/tokens/builders/mutedText.d.ts

@@ -1,5 +1,5 @@
 import type { ColorScale } from "../types";
 /** WCAG 1.4.3 — muted is still body text. */
 export declare const AA_NORMAL_TEXT = 4.5;
-/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
+export declare const MUTED_TEXT_CEILING = 8;
 export declare const buildMutedText: (text: ColorScale, canvas: string) => string;

package/dist/Theme/tokens/builders/mutedText.js

@@ -1,9 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildMutedText = exports.AA_NORMAL_TEXT = void 0;
+exports.buildMutedText = exports.MUTED_TEXT_CEILING = exports.AA_NORMAL_TEXT = void 0;
+const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 /** WCAG 1.4.3 — muted is still body text. */
 exports.AA_NORMAL_TEXT = 4.5;
-/** Seeded from the ramp's muted rung so brand tint survives, then lifted until it clears AA. */
-const buildMutedText = (text, canvas) => (0, outlineRung_1.liftToContrast)(text[400], canvas, exports.AA_NORMAL_TEXT);
+exports.MUTED_TEXT_CEILING = 8;
+const settleUnder = (hex, canvas, ceiling) => {
+    const { s, l } = (0, color_1.hexToHsl)(hex);
+    const toward = (0, color_1.relativeLuminance)(canvas) < 0.5 ? -1 : 1;
+    let settled = hex;
+    for (let next = l; (0, color_1.contrastRatio)(settled, canvas) > ceiling; next += toward) {
+        settled = (0, color_1.withLightness)(hex, next, s);
+    }
+    return settled;
+};
+const buildMutedText = (text, canvas) => (0, outlineRung_1.liftToContrast)(settleUnder(text[400], canvas, exports.MUTED_TEXT_CEILING), canvas, exports.AA_NORMAL_TEXT);
 exports.buildMutedText = buildMutedText;

package/dist/Theme/tokens/builders/planeStep.d.ts

@@ -0,0 +1,5 @@
+import type { PaletteProps } from "../types";
+export declare const bandOn: (fill: string, plane: string) => string;
+export declare const recessOn: (fill: string, plane: string) => string;
+export declare const ruleOn: (colors: Pick<PaletteProps, "boxborder">, plane: string) => string;
+export declare const cardRule: (colors: Pick<PaletteProps, "boxborder" | "background">) => string;

package/dist/Theme/tokens/builders/planeStep.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRule = exports.ruleOn = exports.recessOn = exports.bandOn = void 0;
+const accentText_1 = require("./accentText");
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const holds = (fill, plane, target) => !(0, accentText_1.isDarkCanvas)(plane) || (0, color_1.contrastRatio)(fill, plane) >= target;
+const bandOn = (fill, plane) => holds(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP) ? fill : (0, outlineRung_1.tintStep)(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+exports.bandOn = bandOn;
+const recessOn = (fill, plane) => holds(fill, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP)
+    ? fill
+    : (0, planes_1.lift)(accentText_1.DEFAULT_BLACK, plane, outlineRung_1.MIN_PERCEPTIBLE_STEP);
+exports.recessOn = recessOn;
+const ruleOn = (colors, plane) => {
+    const rule = colors.boxborder[200];
+    return holds(rule, plane, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, plane, outlineRung_1.CHROME_RULE);
+};
+exports.ruleOn = ruleOn;
+const cardRule = (colors) => (0, exports.ruleOn)(colors, colors.background[50]);
+exports.cardRule = cardRule;

package/dist/Theme/tokens/builders/planes.d.ts

@@ -0,0 +1,4 @@
+export declare const CARD_LIFT = 1.16;
+export declare const RAISED_LIFT = 1.15;
+export declare function lift(ink: string, base: string, target: number): string;
+export declare function liftUnder(ink: string, base: string, target: number, marks: readonly string[]): string;

package/dist/Theme/tokens/builders/planes.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RAISED_LIFT = exports.CARD_LIFT = void 0;
+exports.lift = lift;
+exports.liftUnder = liftUnder;
+const color_1 = require("./color");
+const outlineRung_1 = require("./outlineRung");
+exports.CARD_LIFT = 1.16;
+exports.RAISED_LIFT = 1.15;
+const STEP = 0.005;
+const MAX_WEIGHT = 0.4;
+function lift(ink, base, target) {
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = (0, color_1.mix)(base, ink, t);
+        if ((0, color_1.contrastRatio)(next, base) >= target)
+            return next;
+    }
+    return (0, color_1.mix)(base, ink, MAX_WEIGHT);
+}
+const clearsMarks = (surface, marks) => marks.every((mark) => (0, color_1.contrastRatio)(mark, surface) >= outlineRung_1.AA_NON_TEXT);
+// NOTE: stops one step early rather than drop a filled mark under 3:1 on the lifted plane.
+function liftUnder(ink, base, target, marks) {
+    let settled = base;
+    for (let t = STEP * 4; t < MAX_WEIGHT; t += STEP) {
+        const next = (0, color_1.mix)(base, ink, t);
+        if (!clearsMarks(next, marks))
+            return settled;
+        if ((0, color_1.contrastRatio)(next, base) >= target)
+            return next;
+        settled = next;
+    }
+    return settled;
+}

package/dist/Theme/tokens/builders/skeletonShimmer.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../types";
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+export declare const SKELETON_SHIMMER_CONTRAST = 1.35;
+export interface SkeletonShimmer {
+    start: string;
+    end: string;
+}
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+export declare const skeletonShimmer: (palette: PaletteProps) => SkeletonShimmer;

package/dist/Theme/tokens/builders/skeletonShimmer.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.skeletonShimmer = exports.SKELETON_SHIMMER_CONTRAST = void 0;
+const color_1 = require("./color");
+/** Same pulse depth as the mobile library's `SKELETON_SHIMMER_CONTRAST`. */
+exports.SKELETON_SHIMMER_CONTRAST = 1.35;
+const settleAway = (seed, base, target) => {
+    const { s } = (0, color_1.hexToHsl)(seed);
+    let near = (0, color_1.hexToHsl)(base).l;
+    let far = (0, color_1.relativeLuminance)(base) < 0.5 ? 100 : 0;
+    for (let i = 0; i < 20; i += 1) {
+        const mid = (near + far) / 2;
+        if ((0, color_1.contrastRatio)((0, color_1.withLightness)(seed, mid, s), base) < target)
+            near = mid;
+        else
+            far = mid;
+    }
+    return (0, color_1.withLightness)(seed, far, s);
+};
+/** The two colours a Skeleton pulses between: `gray[100]`, and `gray[300]`'s tint settled to the amplitude. */
+const skeletonShimmer = (palette) => ({
+    start: palette.gray[100],
+    end: settleAway(palette.gray[300], palette.gray[100], exports.SKELETON_SHIMMER_CONTRAST),
+});
+exports.skeletonShimmer = skeletonShimmer;

package/dist/Theme/tokens/builders/surfaceRaised.d.ts

@@ -1,6 +1,8 @@
 import type { PaletteProps } from "../types";
 export declare const RAISED_OVERLAY = 0.07;
 export type SurfaceRaisedSource = Pick<PaletteProps, "backgroundColor" | "background" | "white">;
-export declare const buildSurfaceRaised: (source: SurfaceRaisedSource) => string;
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+export declare const filledMarks: (colors: Pick<PaletteProps, "primary" | "semantic">) => string[];
+export declare const buildSurfaceRaised: (source: SurfaceRaisedSource, marks?: readonly string[]) => string;
 export declare const withSurfaceRaised: (palette: PaletteProps) => PaletteProps;
 export declare const raisedRule: (colors: Pick<PaletteProps, "boxborder" | "background" | "surfaceRaised">) => string;

package/dist/Theme/tokens/builders/surfaceRaised.js

@@ -1,21 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.RAISED_OVERLAY = void 0;
+exports.raisedRule = exports.withSurfaceRaised = exports.buildSurfaceRaised = exports.filledMarks = exports.RAISED_OVERLAY = void 0;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planes_1 = require("./planes");
+const planeStep_1 = require("./planeStep");
+const semanticText_1 = require("./semanticText");
 exports.RAISED_OVERLAY = 0.07;
-// Never below the card, and at least one white-overlay step above the canvas.
-const buildSurfaceRaised = (source) => {
-    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+/** The filled fills a raised plane must keep at 3:1, or a button on a menu stops reading. */
+const filledMarks = (colors) => [
+    colors.primary[500],
+    ...semanticText_1.SEMANTIC_TONES.map((tone) => colors.semantic[tone][500]),
+];
+exports.filledMarks = filledMarks;
+// Never below the card: the lighter of one white-overlay step off the canvas and a RAISED_LIFT step off the card.
+const buildSurfaceRaised = (source, marks = []) => {
     const card = source.background[50];
-    return (0, color_1.relativeLuminance)(overlay) > (0, color_1.relativeLuminance)(card) ? overlay : card;
+    const overlay = (0, color_1.mix)(source.backgroundColor.main, source.white, exports.RAISED_OVERLAY);
+    const stepped = (0, planes_1.liftUnder)(source.white, card, planes_1.RAISED_LIFT, marks);
+    return [overlay, stepped].reduce((top, c) => ((0, color_1.relativeLuminance)(c) > (0, color_1.relativeLuminance)(top) ? c : top), card);
 };
 exports.buildSurfaceRaised = buildSurfaceRaised;
 const withSurfaceRaised = (palette) => ({
     ...palette,
-    surfaceRaised: (0, exports.buildSurfaceRaised)(palette),
+    surfaceRaised: (0, exports.buildSurfaceRaised)(palette, (0, exports.filledMarks)(palette)),
 });
 exports.withSurfaceRaised = withSurfaceRaised;
-// A divider inside an overlay, at the weight `boxborder[200]` has on a card.
-const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)(colors.boxborder[200], colors.background[50]));
+// A divider inside an overlay, at the weight a rule has inside a card.
+const raisedRule = (colors) => (0, outlineRung_1.liftToContrast)(colors.boxborder[200], colors.surfaceRaised, (0, color_1.contrastRatio)((0, planeStep_1.cardRule)(colors), colors.background[50]));
 exports.raisedRule = raisedRule;

package/dist/Theme/tokens/builders/surfaceRungs.js

@@ -6,6 +6,7 @@ const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const accentText_1 = require("./accentText");
 const semanticText_1 = require("./semanticText");
+const rowStates_1 = require("./rowStates");
 // NOTE: hint held to the non-text floor, not body-text — at 4.5 an empty field reads as typed-into. See CHROME-CONSISTENCY.md.
 exports.PLACEHOLDER_TEXT = outlineRung_1.AA_NON_TEXT;
 const namedSurfaces = (palette) => [
@@ -21,6 +22,7 @@ exports.hardestSurface = hardestSurface;
 // Runs last: `table.hover` is one of the surfaces, and it settles in its own rung.
 function withSurfaceRungs(palette) {
     const surfaces = (0, exports.namedSurfaces)(palette);
+    const accentSurfaces = [...surfaces, ...Object.values((0, rowStates_1.listRowBackgrounds)(palette))];
     const lift = (ink, target) => (0, outlineRung_1.liftToContrast)(ink, (0, exports.hardestSurface)(ink, surfaces), target);
     const settle = (ink, target) => (0, outlineRung_1.settleAcross)(ink, surfaces, target);
     const rule = (ink) => (0, outlineRung_1.ruleInk)(ink, [palette.backgroundColor.main, palette.background[50]], outlineRung_1.CHROME_RULE);
@@ -31,7 +33,7 @@ function withSurfaceRungs(palette) {
     return {
         ...palette,
         textMuted: lift(palette.textMuted, accentText_1.AA_NORMAL_TEXT),
-        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, surfaces)),
+        accentText: (0, accentText_1.pickAccentText)(palette.primary, (0, exports.hardestSurface)(palette.accentText, accentSurfaces)),
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], accentText_1.AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], accentText_1.AA_NORMAL_TEXT) },

package/dist/Theme/tokens/primitives/index.d.ts

@@ -4,8 +4,8 @@ export { default as radii, RADIUS_ROLE } from "./radii";
 export type { RadiusToken, RadiusRole } from "./radii";
 export * from "./borderWidths";
 export * from "./states";
-export { default as shadows, shadowsDark, shadowsFor } from "./shadows";
-export type { ShadowRamp } from "./shadows";
+export { default as shadows, shadowsDark, shadowsFor, shadowCss, ELEVATION_LAYERS, SHADOW_INK } from "./shadows";
+export type { ShadowLayer, ElevationRole, ShadowRamp } from "./shadows";
 export { default as zIndices } from "./zIndices";
 export { default as breakpoints } from "./breakpoints";
 export { default as lineHeights } from "./lineHeights";

package/dist/Theme/tokens/primitives/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = exports.typography = exports.letterSpacings = exports.lineHeights = exports.breakpoints = exports.zIndices = exports.SHADOW_INK = exports.ELEVATION_LAYERS = exports.shadowCss = exports.shadowsFor = exports.shadowsDark = exports.shadows = exports.RADIUS_ROLE = exports.radii = exports.sizes = exports.space = void 0;
 var space_1 = require("./space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return __importDefault(space_1).default; } });
 var sizes_1 = require("./sizes");
@@ -31,6 +31,9 @@ var shadows_1 = require("./shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return __importDefault(shadows_1).default; } });
 Object.defineProperty(exports, "shadowsDark", { enumerable: true, get: function () { return shadows_1.shadowsDark; } });
 Object.defineProperty(exports, "shadowsFor", { enumerable: true, get: function () { return shadows_1.shadowsFor; } });
+Object.defineProperty(exports, "shadowCss", { enumerable: true, get: function () { return shadows_1.shadowCss; } });
+Object.defineProperty(exports, "ELEVATION_LAYERS", { enumerable: true, get: function () { return shadows_1.ELEVATION_LAYERS; } });
+Object.defineProperty(exports, "SHADOW_INK", { enumerable: true, get: function () { return shadows_1.SHADOW_INK; } });
 var zIndices_1 = require("./zIndices");
 Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return __importDefault(zIndices_1).default; } });
 var breakpoints_1 = require("./breakpoints");

package/dist/Theme/tokens/primitives/motion.d.ts

@@ -23,6 +23,7 @@ export declare const MOTION_LOOP_MS: {
     readonly spin: 800;
     readonly sweep: 1200;
 };
+export declare const MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
 export declare const transitionFor: (properties: readonly string[], speed?: MotionSpeed, curve?: MotionCurve) => string;
 export declare const motionTransition: (speed?: MotionSpeed, curve?: MotionCurve) => {

package/dist/Theme/tokens/primitives/motion.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.motionTransition = exports.transitionFor = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
+exports.motionTransition = exports.transitionFor = exports.MOTION_PRESS_SCALE = exports.MOTION_LOOP_MS = exports.MOTION_EASE_IN = exports.MOTION_EASE_OUT = exports.MOTION_EASE = exports.cubicBezierCss = exports.MOTION_BEZIER = exports.MOTION_MS = void 0;
 exports.MOTION_MS = { fast: 150, base: 200, enter: 200, exit: 200 };
 /** Pebble easing curves (mobile `pebble-spec.json` motion.easing); `in` is Pebble's `accelerate`. */
 exports.MOTION_BEZIER = {
@@ -15,6 +15,7 @@ exports.MOTION_EASE_OUT = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.out)
 exports.MOTION_EASE_IN = (0, exports.cubicBezierCss)(exports.MOTION_BEZIER.in);
 /** Periods for loops that are feedback, not transitions: skeleton pulse, spinner turn, progress sweep. */
 exports.MOTION_LOOP_MS = { pulse: 700, spin: 800, sweep: 1200 };
+exports.MOTION_PRESS_SCALE = 0.98;
 /** A `transition` value for named properties only — `all` also animates layout and colour flips. */
 const transitionFor = (properties, speed = "fast", curve = "standard") => {
     if (properties.includes("all"))