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

package/dist/Theme/chakra/common.web.d.ts

@@ -132,6 +132,10 @@ declare const common: {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: {
         none: string;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -94,10 +94,15 @@ export declare const componentStyles: {
                     [x: string]: string;
                 };
             };
+            elevated: {
+                container: {
+                    [x: string]: string;
+                };
+            };
         } | undefined;
         defaultProps?: {
             size?: "sm" | "md" | "lg" | undefined;
-            variant?: "outline" | undefined;
+            variant?: "elevated" | "outline" | undefined;
             colorScheme?: string | undefined;
         } | undefined;
         parts: ("header" | "container" | "body" | "footer")[];
@@ -168,7 +173,8 @@ export declare const componentStyles: {
     Menu: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             list: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;
@@ -180,6 +186,7 @@ export declare const componentStyles: {
                 px: string;
                 py: string;
                 mx: string;
+                width: string;
                 fontSize: string;
                 borderRadius: "md";
                 bg: string;
@@ -284,7 +291,8 @@ export declare const componentStyles: {
     Popover: {
         baseStyle?: (({ theme }: StyleFunctionProps) => {
             content: {
-                [x: string]: string;
+                borderRadius: "xl";
+                boxShadow: "md";
                 bg: string;
                 color: string;
                 borderWidth: string;

package/dist/Theme/chakra/componentStyles.js

@@ -15,6 +15,7 @@ const accentText_1 = require("../tokens/builders/accentText");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
 const outlineRung_1 = require("../tokens/builders/outlineRung");
 const tone_1 = require("../tokens/builders/tone");
+const skeletonShimmer_1 = require("../tokens/builders/skeletonShimmer");
 const tooltipSurface_1 = require("../tokens/builders/tooltipSurface");
 const Drawer_styles_1 = require("./Drawer.styles");
 const Menu_styles_1 = require("./Menu.styles");
@@ -145,12 +146,15 @@ const $skeletonStart = (0, react_1.cssVar)("skeleton-start-color");
 const $skeletonEnd = (0, react_1.cssVar)("skeleton-end-color");
 // NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[100],
-        [$skeletonEnd.variable]: (0, paletteFromTheme_1.paletteOf)(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = (0, skeletonShimmer_1.skeletonShimmer)((0, paletteFromTheme_1.paletteOf)(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
 // NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {

package/dist/Theme/chakra/motion.d.ts

@@ -1,5 +1,6 @@
 import type { SystemStyleObject } from "@chakra-ui/react";
 export declare const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export declare const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 export declare const usePrefersReducedMotion: () => boolean;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export declare const reducedMotionSx: (overrides?: SystemStyleObject) => SystemStyleObject;

package/dist/Theme/chakra/motion.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
+exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.MOTION_OK_QUERY = exports.REDUCED_MOTION_QUERY = void 0;
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+exports.MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 const usePrefersReducedMotion = () => (0, useMatchMedia_1.useMatchMedia)(MEDIA, false);
 exports.usePrefersReducedMotion = usePrefersReducedMotion;

package/dist/Theme/chakra/overlay.styles.d.ts

@@ -1,5 +1,10 @@
 import type { PaletteProps } from "../tokens/types";
 export declare const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export declare const POPUP_SURFACE: {
+    readonly borderRadius: "xl";
+    readonly boxShadow: "md";
+};
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export declare const overlayScrimStyles: (colors: Pick<PaletteProps, "black">) => {
     bg: string;

package/dist/Theme/chakra/overlay.styles.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogPartStyles = exports.overlayScrimStyles = exports.OVERLAY_BLUR = void 0;
+exports.dialogPartStyles = exports.overlayScrimStyles = exports.POPUP_SURFACE = exports.OVERLAY_BLUR = void 0;
 const scrim_1 = require("../tokens/builders/scrim");
 const surfaceRaised_1 = require("../tokens/builders/surfaceRaised");
+const radii_1 = require("../tokens/primitives/radii");
 exports.OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+exports.POPUP_SURFACE = { borderRadius: radii_1.RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 const overlayScrimStyles = (colors) => ({
     bg: (0, scrim_1.overlayScrim)(colors),

package/dist/Theme/themeProps.d.ts

@@ -86,6 +86,10 @@ export type CustomThemeProps = {
         inner: string;
         none: string;
         darkLg: string;
+        card: string;
+        float: string;
+        dialog: string;
+        sheet: string;
     };
     radii: ChakraTheme["radii"] & {
         none: string;

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

@@ -17,6 +17,7 @@ import rosewoodDark from "./rosewood/palette.dark";
 import storefrontDark from "./storefront/palette.dark";
 import zincDark from "./zinc/palette.dark";
 import type { BrandPaletteSource, PaletteProps, ResolvedColorMode, ThemeName } from "../types";
+export declare const LIGHT_CANVAS_STEP = 1.09;
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export declare const finalizeLightPalette: (source: BrandPaletteSource) => PaletteProps;
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };

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"));
@@ -51,9 +51,25 @@ 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),

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.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/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/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,4 @@
+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 cardRule: (colors: Pick<PaletteProps, "boxborder" | "background">) => string;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRule = 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 cardRule = (colors) => {
+    const rule = colors.boxborder[200];
+    const card = colors.background[50];
+    return holds(rule, card, outlineRung_1.CHROME_RULE) ? rule : (0, outlineRung_1.liftToContrast)(rule, card, outlineRung_1.CHROME_RULE);
+};
+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;