pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -0,0 +1,374 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const brandInk_1 = require("../../builders/brandInk");
+// NOTE: hexes ported verbatim from Mobile-Components' zinc (the shadcn-clone brand) — authoritative, not an approximation.
+const PRIMARY_500 = "#18181b";
+const SECONDARY_500 = "#71717a";
+const primary = {
+    50: "#f4f4f5",
+    100: "#e4e4e7",
+    200: "#d4d4d8",
+    300: "#a1a1aa",
+    400: "#3f3f46",
+    500: PRIMARY_500,
+    600: "#141417",
+    700: "#101013",
+    800: "#0c0c0e",
+    900: "#09090b",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const secondary = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: SECONDARY_500,
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_500),
+};
+const tertiary = { ...(0, brandInk_1.rotateScaleHue)(secondary), opacity: secondary.opacity };
+// Shared status ramps — identical across every brand (status is universal, brand is the hue).
+const semantic = {
+    success: {
+        50: "#e9f8ef",
+        100: "#bbe9cc",
+        200: "#9adeb4",
+        300: "#6ccf92",
+        400: "#4fc67d",
+        500: "#23b85c",
+        600: "#20a754",
+        700: "#198341",
+        800: "#136533",
+        900: "#0f4d27",
+    },
+    error: {
+        50: "#feedeb",
+        100: "#fbc6c2",
+        200: "#f9aaa4",
+        300: "#f6837b",
+        400: "#f56b61",
+        500: "#f2463a",
+        600: "#dc4035",
+        700: "#ac3229",
+        800: "#852720",
+        900: "#661d18",
+    },
+    warning: {
+        50: "#fff4ef",
+        100: "#ffddce",
+        200: "#ffccb7",
+        300: "#ffb596",
+        400: "#ffa781",
+        500: "#ff9162",
+        600: "#e88459",
+        700: "#b56746",
+        800: "#8c5036",
+        900: "#6b3d29",
+    },
+    info: {
+        50: "#eff9fc",
+        100: "#cdedf5",
+        200: "#b5e4f0",
+        300: "#94d7e9",
+        400: "#7fd0e5",
+        500: "#5fc4de",
+        600: "#56b2ea",
+        700: "#438b9e",
+        800: "#346c78",
+        900: "#28525d",
+    },
+};
+const gray = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+};
+// Shared utility hues — same values as every brand.
+const red = {
+    50: "#feedeb",
+    100: "#fbc6c2",
+    200: "#f9aaa4",
+    300: "#f6837b",
+    400: "#f56b61",
+    500: "#f2463a",
+    600: "#dc4035",
+    700: "#ac3229",
+    800: "#852720",
+    900: "#661d18",
+};
+const orange = {
+    50: "#fff4ef",
+    100: "#ffddce",
+    200: "#ffccb7",
+    300: "#ffb596",
+    400: "#ffa781",
+    500: "#ff9162",
+    600: "#e88459",
+    700: "#b56746",
+    800: "#8c5036",
+    900: "#6b3d29",
+};
+const yellow = {
+    50: "#fefbec",
+    100: "#fdf1c5",
+    200: "#fbeba9",
+    300: "#fae281",
+    400: "#f9dc69",
+    500: "#f7d343",
+    600: "#e1c03d",
+    700: "#af9630",
+    800: "#887425",
+    900: "#68591c",
+};
+const green = {
+    50: "#e9f8ef",
+    100: "#bbe9cc",
+    200: "#9adeb4",
+    300: "#6ccf92",
+    400: "#4fc67d",
+    500: "#23b85c",
+    600: "#20a754",
+    700: "#198341",
+    800: "#136533",
+    900: "#0f4d27",
+};
+const teal = {
+    50: "#eff9fc",
+    100: "#cdedf5",
+    200: "#b5e4f0",
+    300: "#94d7e9",
+    400: "#7fd0e5",
+    500: "#5fc4de",
+    600: "#56b2ea",
+    700: "#438b9e",
+    800: "#346c78",
+    900: "#28525d",
+};
+const blue = {
+    50: "#ebf8ff",
+    100: "#bee3f8",
+    200: "#90cdf4",
+    300: "#63b3ed",
+    400: "#4299e1",
+    500: "#3182ce",
+    600: "#2b6cb0",
+    700: "#2c5282",
+    800: "#2a4365",
+    900: "#1a365d",
+};
+const cyan = {
+    50: "#edfdfd",
+    100: "#c4f1f9",
+    200: "#9decf9",
+    300: "#76e4f7",
+    400: "#0bc5ea",
+    500: "#00b5d8",
+    600: "#00a3c4",
+    700: "#0987a0",
+    800: "#086f83",
+    900: "#065666",
+};
+const purple = {
+    50: "#faf5ff",
+    100: "#e9d8fd",
+    200: "#d6bcfa",
+    300: "#b794f4",
+    400: "#9f7aea",
+    500: "#805ad5",
+    600: "#6b46c1",
+    700: "#553c9a",
+    800: "#44337a",
+    900: "#322659",
+};
+const pink = {
+    50: "#fff5f7",
+    100: "#fed7e2",
+    200: "#fbb6ce",
+    300: "#f687b3",
+    400: "#ed64a6",
+    500: "#d53f8c",
+    600: "#b83280",
+    700: "#97266d",
+    800: "#702459",
+    900: "#521b41",
+};
+const backgroundColor = {
+    main: "#ffffff",
+    secondary: "#fafafa",
+    tertiary: "#f4f4f5",
+    quaternary: "#e4e4e7",
+    light: "#ffffff",
+    medium: "#f4f4f5",
+    accent: "#e4e4e7",
+    subtle: "#fafafa",
+    muted: "#f4f4f5",
+    neutral: "#f4f4f5",
+    base: "#fafafa",
+    tableHeader: "#f4f4f5",
+};
+// background[50] is the elevated-surface token and must BE the literal canvas colour (#ffffff),
+// so a "white surface" resolves through a token, never a hardcoded "white".
+const background = {
+    50: "#ffffff",
+    100: "#fafafa",
+    200: "#f4f4f5",
+    300: "#e4e4e7",
+    400: "#d4d4d8",
+    500: "#a1a1aa",
+    600: "#71717a",
+    700: "#52525b",
+    800: "#3f3f46",
+    900: "#27272a",
+};
+const text = {
+    50: "#a1a1aa",
+    100: "#71717a",
+    200: "#52525b",
+    300: "#3f3f46",
+    400: "#27272a",
+    500: "#18181b",
+    600: "#141417",
+    700: "#101013",
+    800: "#0c0c0e",
+    900: "#09090b",
+};
+const header = {
+    50: "#71717a",
+    100: "#52525b",
+    200: "#3f3f46",
+    300: "#27272a",
+    400: "#1f1f22",
+    500: "#18181b",
+    600: "#121215",
+    700: "#0e0e11",
+    800: "#0b0b0d",
+    900: "#09090b",
+};
+const placeholder = {
+    50: "#d4d4d8",
+    100: "#a1a1aa",
+    200: "#8a8a93",
+    300: "#71717a",
+    400: "#63636b",
+    500: "#52525b",
+    600: "#47474e",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+};
+const boxShadow = {
+    primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+    error: "#F2463A47",
+    default: "#00000033",
+};
+const sidebar = {
+    background: {
+        50: "#d4d4d8",
+        100: "#a1a1aa",
+        200: "#71717a",
+        300: "#52525b",
+        400: "#3f3f46",
+        500: "#18181b",
+        600: "#141417",
+        700: "#101013",
+        800: "#0c0c0e",
+        900: "#09090b",
+    },
+};
+const boxborder = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#c4c4c9",
+    500: "#a1a1aa",
+    600: "#8a8a93",
+    700: "#71717a",
+    800: "#52525b",
+    900: "#3f3f46",
+};
+// border[200] = decorative (#e4e4e7); border[500] = interactive input outline (#8a8a93, 3.42:1 on
+// canvas — a 1px control outline is a UI component under WCAG 1.4.11 and needs 3:1, not 4.5:1).
+const border = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#b4b4bb",
+    500: "#8a8a93",
+    600: "#71717a",
+    700: "#52525b",
+    800: "#3f3f46",
+    900: "#27272a",
+};
+const table = {
+    hover: {
+        50: "#fcfcfc",
+        100: "#fafafa",
+        200: "#f4f4f5",
+        300: "#efeff0",
+        400: "#e9e9eb",
+        500: "#e4e4e7",
+        600: "#d4d4d8",
+        700: "#a1a1aa",
+        800: "#78787f",
+        900: "#5a5a60",
+    },
+};
+const disabled = {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#c4c4c9",
+    500: "#a1a1aa",
+    600: "#8a8a93",
+    700: "#71717a",
+    800: "#52525b",
+    900: "#3f3f46",
+};
+const gradient = { from: "#18181b", to: "#52525b" };
+const palette = {
+    gradient,
+    primary,
+    secondary,
+    tertiary,
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic,
+    gray,
+    red,
+    orange,
+    yellow,
+    green,
+    teal,
+    blue,
+    cyan,
+    purple,
+    pink,
+    backgroundColor,
+    background,
+    text,
+    header,
+    placeholder,
+    boxShadow,
+    sidebar,
+    boxborder,
+    border,
+    table,
+    disabled,
+};
+exports.default = palette;

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

@@ -0,0 +1,19 @@
+import type { ColorScale } from "../types";
+/** WCAG AA for normal-size text. Accent-as-text must clear this against the canvas. */
+declare const AA_NORMAL_TEXT = 4.5;
+export declare const pickAccentText: (primary: ColorScale, canvas: string) => string;
+/** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
+export declare const DEFAULT_CANVAS = "#ffffff";
+/** Mode-stable ink absolutes, used when no theme supplies `colors.white` / `colors.black`. */
+export declare const DEFAULT_WHITE = "#ffffff";
+export declare const DEFAULT_BLACK = "#000000";
+/** Below this relative luminance a canvas is treated as dark. Well clear of both real canvases. */
+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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+exports.AA_NORMAL_TEXT = AA_NORMAL_TEXT;
+// NOTE: 500->900 order, since light ramps run light->dark and dark ramps dark->light — always steps away from canvas.
+const SEARCH_ORDER = [500, 600, 700, 800, 900];
+// NOTE: primary[500] can't serve both a filled-button label and canvas text at one lightness — text gets its own rung.
+const pickAccentText = (primary, canvas) => {
+    const found = SEARCH_ORDER.find((rung) => (0, color_1.contrastRatio)(primary[rung], canvas) >= AA_NORMAL_TEXT);
+    return primary[found !== null && found !== void 0 ? found : SEARCH_ORDER[SEARCH_ORDER.length - 1]];
+};
+exports.pickAccentText = pickAccentText;
+/** Canvas assumed when no Pixelize theme is mounted. Never painted; only fed to contrast math. */
+exports.DEFAULT_CANVAS = "#ffffff";
+/** Mode-stable ink absolutes, used when no theme supplies `colors.white` / `colors.black`. */
+exports.DEFAULT_WHITE = "#ffffff";
+exports.DEFAULT_BLACK = "#000000";
+/** Below this relative luminance a canvas is treated as dark. Well clear of both real canvases. */
+const DARK_CANVAS_LUMINANCE = 0.2;
+exports.DARK_CANVAS_LUMINANCE = DARK_CANVAS_LUMINANCE;
+/** True when `canvas` is a dark surface. Lets style configs branch without threading color mode. */
+const isDarkCanvas = (canvas) => (0, color_1.relativeLuminance)(canvas) < DARK_CANVAS_LUMINANCE;
+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;
+// NOTE: resolves against whichever gradient stop is lighter — the harder case for ink to clear.
+const onGradient = (from, to, white, black) => (0, exports.onFilled)((0, color_1.relativeLuminance)(from) >= (0, color_1.relativeLuminance)(to) ? from : to, white, black);
+exports.onGradient = onGradient;

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

@@ -0,0 +1,13 @@
+import type { BrandScale, ColorScale } from "../types";
+/** Rotates a scale's hue while restoring each rung's luminance, so contrast is untouched. */
+export declare const rotateScaleHue: (scale: ColorScale, degrees?: number) => ColorScale;
+export type BrandInkRamps = {
+    secondary: BrandScale;
+    tertiary: BrandScale;
+    text: ColorScale;
+    header: ColorScale;
+    placeholder: ColorScale;
+    disabled: ColorScale;
+};
+/** Brand-hued ink ramps at lavender's verified luminances, so contrast carries over. */
+export declare function buildBrandInk(primary500: string): BrandInkRamps;

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotateScaleHue = void 0;
+exports.buildBrandInk = buildBrandInk;
+const buildBrandTokens_1 = require("./buildBrandTokens");
+const color_1 = require("./color");
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+// Lavender's primary saturation. Each brand's ramps scale away from it.
+const REFERENCE_SATURATION = 55.5;
+const SECONDARY = {
+    50: [39.4, 0.8231],
+    100: [41.0, 0.61132],
+    200: [37.7, 0.39479],
+    300: [27.4, 0.18614],
+    400: [28.4, 0.10269],
+    500: [52.4, 0.00831],
+    600: [55.1, 0.00573],
+    700: [55.6, 0.00386],
+    800: [60.0, 0.00245],
+    900: [57.1, 0.00141],
+};
+const TEXT = {
+    50: [25.9, 0.86267],
+    100: [32.4, 0.63853],
+    200: [32.7, 0.48344],
+    300: [30.6, 0.30607],
+    400: [29.2, 0.21515],
+    500: [26.3, 0.10787],
+    600: [26.6, 0.08786],
+    700: [26.7, 0.05281],
+    800: [27.4, 0.03145],
+    900: [29.0, 0.01826],
+};
+const HEADER = {
+    50: [31.3, 0.83382],
+    100: [31.0, 0.59779],
+    200: [30.6, 0.44729],
+    300: [29.3, 0.27622],
+    400: [30.0, 0.19238],
+    500: [29.9, 0.10467],
+    600: [29.9, 0.08682],
+    700: [29.7, 0.05281],
+    800: [29.1, 0.0319],
+    900: [29.9, 0.01915],
+};
+const PLACEHOLDER = {
+    50: [30.4, 0.87913],
+    100: [35.4, 0.67128],
+    200: [36.1, 0.53513],
+    300: [34.7, 0.37333],
+    400: [31.4, 0.30462],
+    500: [28.2, 0.19307],
+    600: [22.8, 0.15818],
+    700: [22.0, 0.09196],
+    800: [21.5, 0.05448],
+    900: [22.3, 0.03206],
+};
+const DISABLED = {
+    50: [33.3, 0.90353],
+    100: [38.9, 0.80618],
+    200: [40.7, 0.71546],
+    300: [41.0, 0.60545],
+    400: [39.6, 0.53328],
+    500: [40.5, 0.43688],
+    600: [28.2, 0.35566],
+    700: [13.4, 0.20289],
+    800: [11.4, 0.1171],
+    900: [11.2, 0.06724],
+};
+// Material 3's tertiary: a rotated accent. Same luminances as secondary, so contrast is unchanged.
+const TERTIARY_HUE_SHIFT = 60;
+const rotateHue = (hex, degrees) => {
+    const { h, s, l } = (0, color_1.hexToHsl)(hex);
+    return (0, color_1.hslToHex)({ h: (h + degrees + 360) % 360, s, l });
+};
+// Lightness is monotonic in luminance for a fixed hue/saturation, so bisection converges.
+const atLuminance = (anchor, saturation, target) => {
+    let low = 0;
+    let high = 100;
+    for (let i = 0; i < 30; i += 1) {
+        const mid = (low + high) / 2;
+        if ((0, color_1.relativeLuminance)((0, color_1.withLightness)(anchor, mid, saturation)) < target)
+            low = mid;
+        else
+            high = mid;
+    }
+    return (0, color_1.withLightness)(anchor, (low + high) / 2, saturation);
+};
+const ramp = (anchor, profile) => {
+    const ratio = (0, color_1.hexToHsl)(anchor).s / REFERENCE_SATURATION;
+    const scale = {};
+    for (const rung of RUNGS) {
+        const [saturation, luminance] = profile[rung];
+        scale[rung] = atLuminance(anchor, Math.min(100, saturation * ratio), luminance);
+    }
+    return scale;
+};
+/** Rotates a scale's hue while restoring each rung's luminance, so contrast is untouched. */
+const rotateScaleHue = (scale, degrees = TERTIARY_HUE_SHIFT) => {
+    const rotated = {};
+    for (const rung of RUNGS) {
+        const hex = scale[rung];
+        const turned = rotateHue(hex, degrees);
+        rotated[rung] = atLuminance(turned, (0, color_1.hexToHsl)(turned).s, (0, color_1.relativeLuminance)(hex));
+    }
+    return rotated;
+};
+exports.rotateScaleHue = rotateScaleHue;
+const brandRamp = (anchor, profile) => {
+    const scale = ramp(anchor, profile);
+    return { ...scale, opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(scale[500]) };
+};
+/** Brand-hued ink ramps at lavender's verified luminances, so contrast carries over. */
+function buildBrandInk(primary500) {
+    const secondary = brandRamp(primary500, SECONDARY);
+    return {
+        secondary,
+        tertiary: brandRamp(rotateHue(primary500, TERTIARY_HUE_SHIFT), SECONDARY),
+        text: ramp(primary500, TEXT),
+        header: ramp(primary500, HEADER),
+        placeholder: ramp(primary500, PLACEHOLDER),
+        disabled: ramp(primary500, DISABLED),
+    };
+}

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

@@ -0,0 +1,12 @@
+export declare function normalizeHex(hex: string): string;
+export declare function buildPrimaryOpacity(primary500: string): {
+    4: string;
+    8: string;
+    16: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+};
+/** Tint used for focus rings / primary-tinted shadows (matches ~28% alpha pattern). */
+export declare function buildPrimaryShadowTint(primary500: string): string;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeHex = normalizeHex;
+exports.buildPrimaryOpacity = buildPrimaryOpacity;
+exports.buildPrimaryShadowTint = buildPrimaryShadowTint;
+// Builds 8-digit hex alpha tokens from a 6-digit brand color (Chakra primary.500).
+function normalizeHex(hex) {
+    const trimmed = hex.trim();
+    const withHash = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+    if (!/^#[0-9a-fA-F]{6}$/.test(withHash)) {
+        throw new Error(`Invalid hex color (expected #RRGGBB): ${hex}`);
+    }
+    return withHash.toLowerCase();
+}
+function buildPrimaryOpacity(primary500) {
+    const h = normalizeHex(primary500);
+    return {
+        4: `${h}0a`,
+        8: `${h}14`,
+        16: `${h}29`,
+        24: `${h}3d`,
+        32: `${h}52`,
+        40: `${h}66`,
+        48: `${h}7a`,
+    };
+}
+/** Tint used for focus rings / primary-tinted shadows (matches ~28% alpha pattern). */
+function buildPrimaryShadowTint(primary500) {
+    const h = normalizeHex(primary500);
+    return `${h}47`;
+}

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

@@ -0,0 +1,16 @@
+import type { BrandPaletteSource, ColorScale, PaletteProps } from "../types";
+/** Mirrors index roles: 50↔900, 100↔800, 200↔700, 300↔600, 400↔500. */
+export declare const reverseScale: (scale: ColorScale) => ColorScale;
+/** Shifts a ramp one step lighter, keeping hue. Used for brand + semantic accents. */
+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;
+/** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
+export type DarkPlanes = "lifted" | "flat";
+/** Card plane choice; defaults to `lifted`. */
+export interface DarkPaletteOptions {
+    planes?: DarkPlanes;
+}
+export declare function buildDarkPalette(light: BrandPaletteSource, { planes }?: DarkPaletteOptions): PaletteProps;
+export default buildDarkPalette;