pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = void 0;
+exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.zincDark = exports.storefrontDark = exports.rosewoodDark = exports.emeraldDark = exports.slateDark = exports.skylineDark = exports.radiantDark = exports.meadowDark = exports.lavenderDark = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.skyline = exports.radiant = exports.meadow = exports.lavender = exports.finalizeLightPalette = exports.LIGHT_CANVAS_STEP = void 0;
 const palette_light_1 = __importDefault(require("./lavender/palette.light"));
 exports.lavender = palette_light_1.default;
 const palette_light_2 = __importDefault(require("./meadow/palette.light"));
@@ -50,9 +50,26 @@ const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
 const surfaceRaised_1 = require("../builders/surfaceRaised");
 const star_1 = require("../builders/star");
+const lazy_1 = require("../builders/lazy");
+const color_1 = require("../builders/color");
+exports.LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = (0, color_1.mix)(canvas, ink, weight);
+        if ((0, color_1.contrastRatio)(next, card) >= exports.LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return (0, color_1.mix)(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: (0, sidebarAccent_1.withSidebarTokens)(source),
     accentText: (0, accentText_1.pickAccentText)(source.primary, source.backgroundColor.main),
     textMuted: (0, mutedText_1.buildMutedText)(source.text, source.backgroundColor.main),
@@ -66,8 +83,8 @@ const finalizeLightPalette = (source) => ({
 exports.finalizeLightPalette = finalizeLightPalette;
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, surfaceRaised_1.withSurfaceRaised)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette))))));
-const lightBrand = (source) => resolveRungs((0, exports.finalizeLightPalette)(source));
-/** Light palette per brand. `lavender` is the base the other six extend. */
+const lightBrand = (source) => (0, lazy_1.lazyPalette)(source, () => resolveRungs((0, exports.finalizeLightPalette)(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 exports.lightPalettes = {
     lavender: lightBrand(palette_light_1.default),
     meadow: lightBrand(palette_light_2.default),
@@ -79,18 +96,18 @@ exports.lightPalettes = {
     storefront: lightBrand(palette_light_8.default),
     zinc: lightBrand(palette_light_9.default),
 };
-/** Dark palette per brand, derived from the matching light palette. */
-const darkBrand = (dark) => resolveRungs(dark);
+/** Dark palette per brand, derived from the matching light palette on first read. */
+const darkBrand = (source, dark) => (0, lazy_1.lazyPalette)(source, () => resolveRungs(dark));
 exports.darkPalettes = {
-    lavender: darkBrand(palette_dark_1.default),
-    meadow: darkBrand(palette_dark_2.default),
-    radiant: darkBrand(palette_dark_3.default),
-    skyline: darkBrand(palette_dark_4.default),
-    slate: darkBrand(palette_dark_5.default),
-    emerald: darkBrand(palette_dark_6.default),
-    rosewood: darkBrand(palette_dark_7.default),
-    storefront: darkBrand(palette_dark_8.default),
-    zinc: darkBrand(palette_dark_9.default),
+    lavender: darkBrand(palette_light_1.default, palette_dark_1.default),
+    meadow: darkBrand(palette_light_2.default, palette_dark_2.default),
+    radiant: darkBrand(palette_light_3.default, palette_dark_3.default),
+    skyline: darkBrand(palette_light_4.default, palette_dark_4.default),
+    slate: darkBrand(palette_light_5.default, palette_dark_5.default),
+    emerald: darkBrand(palette_light_6.default, palette_dark_6.default),
+    rosewood: darkBrand(palette_light_7.default, palette_dark_7.default),
+    storefront: darkBrand(palette_light_8.default, palette_dark_8.default),
+    zinc: darkBrand(palette_light_9.default, palette_dark_9.default),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -17,8 +17,22 @@ const primary = {
     900: "#531a14",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutrals_1.neutralTokens,
+    red: danger,
+    semantic: { ...neutrals_1.neutralTokens.semantic, error: danger },
     ...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
     // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
@@ -120,6 +134,7 @@ const palette = {
     boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
         ...neutrals_1.sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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/skyline/palette.dark.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = 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

@@ -7,9 +7,9 @@ const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
 const brandInk_1 = require("../../builders/brandInk");
 const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
 const accentText_1 = require("../../builders/accentText");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
 // NOTE: zinc dark INVERTS the primary (near-white fill, dark label) to match shadcn — every other brand lifts its own hue instead. Most ramps below are literals ported from Mobile-Components.
-const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
 const PRIMARY_500 = "#e4e4e7";
 const SECONDARY_500 = "#a1a1aa";
 const primary = {
@@ -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,42 +121,30 @@ 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 palette = {
-    ...derived,
-    gradient: { from: PRIMARY_500, to: "#a1a1aa" },
-    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,
-    text,
-    header,
-    gray,
-    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: {
-        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
-        error: derived.boxShadow.error,
-        default: "#00000080",
-    },
+const buildPalette = () => {
+    const derived = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+    return {
+        ...derived,
+        gradient: { from: PRIMARY_500, to: "#a1a1aa" },
+        primary,
+        secondary,
+        tertiary: { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity },
+        // NOTE: the planes (backgroundColor, background, table, gray fills) stay derived — they rise with the card.
+        text,
+        header,
+        gray: { ...derived.gray, ...grayInk },
+        border,
+        boxborder,
+        placeholder,
+        disabled,
+        accentText: (0, accentText_1.pickAccentText)(primary, derived.backgroundColor.main),
+        onPrimary: (0, accentText_1.onFilled)(PRIMARY_500, derived.white, derived.black),
+        boxShadow: {
+            primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+            error: derived.boxShadow.error,
+            default: "#00000080",
+        },
+    };
 };
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, buildPalette);
 exports.default = palette;

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/color.js

@@ -1,5 +1,4 @@
 "use strict";
-// Pure color math, no dependencies or platform APIs — safe for the mobile port.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hslToHex = exports.hexToHsl = void 0;
 exports.hexToRgb = hexToRgb;
@@ -12,6 +11,8 @@ exports.withLightness = withLightness;
 exports.mix = mix;
 exports.relativeLuminance = relativeLuminance;
 exports.contrastRatio = contrastRatio;
+// Pure color math, no dependencies or platform APIs — safe for the mobile port.
+const memo_1 = require("./memo");
 const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 // NOTE: #rrggbbaa throws on purpose — alpha over an unknown backdrop has no defined luminance; composite first.
 function hexToRgb(hex) {
@@ -120,14 +121,17 @@ function mix(a, b, weight) {
         b: ca.b + (cb.b - ca.b) * w,
     });
 }
+const linearChannel = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+const luminanceOf = (0, memo_1.memoize)((hex) => {
+    const { r, g, b } = hexToRgb(hex);
+    return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}, (hex) => hex, 4096);
 /** WCAG 2.1 relative luminance. */
 function relativeLuminance(hex) {
-    const { r, g, b } = hexToRgb(hex);
-    const channel = (v) => {
-        const c = v / 255;
-        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+    return luminanceOf(hex);
 }
 /** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
 function contrastRatio(a, b) {

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

@@ -16,4 +16,6 @@ export declare const solidFillRung: (scale: ColorScale, white: string, canvas?:
 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;
-export declare const resolveFilledSurface: (scale: ColorScale, colors: Pick<PaletteProps, "white" | "black" | "backgroundColor" | "background">) => FilledSurface;
+type SurfaceColors = Pick<PaletteProps, "white" | "black" | "backgroundColor" | "background">;
+export declare const resolveFilledSurface: (scale: ColorScale, colors: SurfaceColors) => FilledSurface;
+export {};

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

@@ -4,6 +4,7 @@ exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = ex
 const color_1 = require("./color");
 const accentText_1 = require("./accentText");
 const outlineRung_1 = require("./outlineRung");
+const memo_1 = require("./memo");
 const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 // NOTE: "darker than [500]" is [600]/[700] in light but [400]/[300] in dark, since dark ramps run dark -> light.
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
@@ -57,12 +58,8 @@ exports.darkerFillRung = darkerFillRung;
 /** Label ink for a specific fill swatch — always `onFilled`, exported for style configs. */
 const labelOnFill = (fill, white, black) => (0, accentText_1.onFilled)(fill, white, black);
 exports.labelOnFill = labelOnFill;
-// Consumer-facing helper: fill rung + ink for solid/hover/active. Never pair scale[500] with onFilled by hand.
-const resolveFilledSurface = (scale, colors) => {
-    const { white, black, backgroundColor, background } = colors;
-    const canvas = (0, color_1.contrastRatio)(scale[500], backgroundColor.main) <= (0, color_1.contrastRatio)(scale[500], background[50])
-        ? backgroundColor.main
-        : background[50];
+const filledSurfaceMemo = (0, memo_1.memoize)((scale, white, black, main, card) => {
+    const canvas = (0, color_1.contrastRatio)(scale[500], main) <= (0, color_1.contrastRatio)(scale[500], card) ? main : card;
     const rung = (0, exports.solidFillRung)(scale, white, canvas);
     const fill = scale[rung];
     const hoverRung = (0, exports.darkerFillRung)(scale, canvas, white, 0);
@@ -80,5 +77,8 @@ const resolveFilledSurface = (scale, colors) => {
         activeFill,
         activeColor: (0, exports.labelOnFill)(activeFill, white, black),
     };
-};
+}, (scale, white, black, main, card) => `${(0, memo_1.scaleKey)(scale)}|${white}|${black}|${main}|${card}`);
+const resolveFilledSurface = (scale, colors) => ({
+    ...filledSurfaceMemo(scale, colors.white, colors.black, colors.backgroundColor.main, colors.background[50]),
+});
 exports.resolveFilledSurface = resolveFilledSurface;

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

@@ -0,0 +1,5 @@
+import type { BrandPaletteSource, PaletteProps } from "../types";
+export declare const lazyObject: <T extends object>(keys: ReadonlyArray<keyof T>, build: () => T) => T;
+export declare const paletteKeys: (source: BrandPaletteSource) => Array<keyof PaletteProps>;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+export declare const lazyPalette: <T extends PaletteProps>(source: BrandPaletteSource, build: () => T) => T;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyPalette = exports.paletteKeys = exports.lazyObject = void 0;
+const dataProperty = (value) => ({
+    value,
+    writable: true,
+    enumerable: true,
+    configurable: true,
+});
+// NOTE: first read of any key builds once and swaps every getter for a plain data property.
+const lazyObject = (keys, build) => {
+    const target = {};
+    let built;
+    const materialise = () => {
+        if (built)
+            return built;
+        const value = build();
+        built = value;
+        if (!Object.isSealed(target)) {
+            keys.forEach((key) => Object.defineProperty(target, key, dataProperty(value[key])));
+        }
+        return value;
+    };
+    keys.forEach((key) => Object.defineProperty(target, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => materialise()[key],
+        set: (next) => {
+            materialise();
+            Object.defineProperty(target, key, dataProperty(next));
+        },
+    }));
+    return target;
+};
+exports.lazyObject = lazyObject;
+// NOTE: order matches finalizeLightPalette and buildDarkPalette, which append these after the source keys.
+const DERIVED = {
+    accentText: true,
+    textMuted: true,
+    semanticText: true,
+    onPrimary: true,
+    onSemantic: true,
+    focusRing: true,
+    surfaceRaised: true,
+    star: true,
+};
+const DERIVED_KEYS = Object.keys(DERIVED);
+const paletteKeys = (source) => [
+    ...Object.keys(source),
+    ...DERIVED_KEYS.filter((key) => !(key in source)),
+];
+exports.paletteKeys = paletteKeys;
+/** A palette derived from `source` on its first read; same keys, order and values as `build()`. */
+const lazyPalette = (source, build) => (0, exports.lazyObject)((0, exports.paletteKeys)(source), build);
+exports.lazyPalette = lazyPalette;