pixelize-design-library 2.3.21 → 2.4.1-beta.1

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

@@ -0,0 +1,383 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+/**
+ * zinc — the shadcn-clone brand already shipped on Mobile-Components (the mobile design
+ * library's own default brand). These exact hexes are ported verbatim from mobile's
+ * `src/theme/tokens/brands/zinc/palette.light.ts` — the mobile file's own comment calls them
+ * "the shared source of truth: web is adopting them verbatim" — so every rung here is
+ * authoritative, not an approximation or a rehue.
+ *
+ * Unlike every other web brand, zinc's filled primary is the near-black anchor itself:
+ * `primary[500]` is `#18181b`, a white label lands at 16.97:1. `background[50]` is the literal
+ * canvas white as a real surface token, never a hardcoded `"white"`.
+ */
+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 = { ...secondary };
+// 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,56 @@
+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;
+/**
+ * Pick the accent rung to use for accent-COLORED TEXT sitting on the canvas.
+ *
+ * `primary[500]` cannot serve both roles: it must stay dark enough for a white label on a
+ * filled button (>=4.5) yet be light enough to read as text on a dark canvas (>=4.5). Those
+ * constraints are mutually exclusive at a single lightness, so text gets its own token.
+ *
+ * Falls back to the most extreme rung when no candidate clears AA, so the result is always a
+ * real brand color rather than a throw. If `primary` itself is missing (a caller rendered
+ * outside a Pixelize theme, so the scale never got merged in), there is no brand rung to pick
+ * from at all — fall back to whichever of white/black clears AA against `canvas`, using the
+ * same proven-always-safe math as `onFilled` below, rather than throwing on `primary[rung]`.
+ *
+ * `ColorScale` requires every rung 50-900, but a caller can still hand in a partial object (a
+ * sparse test theme mock, a hand-built scale) — treat a missing rung as "doesn't clear AA" and
+ * keep walking rather than crashing `contrastRatio` on `undefined`.
+ */
+export declare const pickAccentText: (primary: ColorScale | undefined, canvas: string, mode: "light" | "dark") => string;
+/** 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;
+/**
+ * Accent text color for any scale (primary, secondary, red, …) drawn on `canvas`.
+ *
+ * Held to AA in BOTH modes. This deliberately no longer returns light's `[500]` untouched: that
+ * concession existed only while light mode was frozen for consumers, and it shipped known AA
+ * failures (radiant 4.15, emerald 3.24, rosewood 3.29). Those brands now step to the nearest rung
+ * that clears AA, which changes their light pixels — the accepted cost of meeting WCAG.
+ */
+export declare const accentTextOnCanvas: (scale: ColorScale | undefined, canvas: string) => string;
+/**
+ * Ink for text drawn ON a filled swatch (a button/tag/badge fill), not the canvas. `white`/`black`
+ * must be the mode-stable absolutes (`theme.colors.white` / `theme.colors.black`) — NOT a
+ * mode-adaptive token like `text[900]`, which is dark ink in light mode but near-white in dark and
+ * would silently flip which candidate is "the dark one" depending on mode.
+ *
+ * Provably always clears AA: brute-forcing the sRGB cube shows `max(contrast(white,X),
+ * contrast(black,X)) >= 4.583` for every X, so whichever of the two fails, the other clears 4.5 —
+ * this never needs to step the fill's rung. Prefers white first (brand-conventional look) and
+ * only falls back to black when white itself fails.
+ */
+export declare const onFilled: (fill: string, white: string, black: string) => string;
+/**
+ * Ink for text on a two-stop gradient fill. Picks `onFilled` against whichever stop is LIGHTER —
+ * the harder case for either ink to clear. Each brand's `gradient` token is tuned so this
+ * resolves to the same ink at both ends (see palette.light.ts `gradient` comments); a caller
+ * that overrides the gradient (e.g. `UpgradeButton`'s `gradient` prop) isn't guaranteed the same
+ * safety, since an arbitrary pair can still need different inks at each end.
+ */
+export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
+export { AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE };
+//# sourceMappingURL=accentText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accentText.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/accentText.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,uFAAuF;AACvF,QAAA,MAAM,cAAc,MAAM,CAAC;AAiB3B;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GACzB,SAAS,UAAU,GAAG,SAAS,EAC/B,QAAQ,MAAM,EACd,MAAM,OAAO,GAAG,MAAM,KACrB,MAaF,CAAC;AAEF,mGAAmG;AACnG,QAAA,MAAM,qBAAqB,MAAM,CAAC;AAElC,oGAAoG;AACpG,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,KAAG,OACK,CAAC;AAEpD;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,UAAU,GAAG,SAAS,EAAE,QAAQ,MAAM,KAAG,MAKhF,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,MACR,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,EAAE,IAAI,MAAM,EAAE,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,MACE,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAC"}

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

@@ -0,0 +1,92 @@
+"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.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;
+/**
+ * Rungs to try, ordered nearest-to-accent first. `primary[500]` is the true brand accent, so
+ * it is always tried first and only stepped away from when it fails AA — that keeps brand
+ * identity as strong as contrast allows instead of flattening every brand to one safe rung.
+ *
+ * Light canvases need darker rungs; dark canvases need lighter ones. Both walk 500 -> 900 because
+ * BOTH ramps put their light end at 900: light mode runs light -> dark (so 900 is the darkest),
+ * while every dark scale runs dark -> light (so 900 is the lightest). Same direction, opposite
+ * meaning — walking 500 -> 100 for dark would step toward the canvas and land at ~1.4 contrast.
+ */
+const SEARCH_ORDER = {
+    light: [500, 600, 700, 800, 900],
+    dark: [500, 600, 700, 800, 900],
+};
+/**
+ * Pick the accent rung to use for accent-COLORED TEXT sitting on the canvas.
+ *
+ * `primary[500]` cannot serve both roles: it must stay dark enough for a white label on a
+ * filled button (>=4.5) yet be light enough to read as text on a dark canvas (>=4.5). Those
+ * constraints are mutually exclusive at a single lightness, so text gets its own token.
+ *
+ * Falls back to the most extreme rung when no candidate clears AA, so the result is always a
+ * real brand color rather than a throw. If `primary` itself is missing (a caller rendered
+ * outside a Pixelize theme, so the scale never got merged in), there is no brand rung to pick
+ * from at all — fall back to whichever of white/black clears AA against `canvas`, using the
+ * same proven-always-safe math as `onFilled` below, rather than throwing on `primary[rung]`.
+ *
+ * `ColorScale` requires every rung 50-900, but a caller can still hand in a partial object (a
+ * sparse test theme mock, a hand-built scale) — treat a missing rung as "doesn't clear AA" and
+ * keep walking rather than crashing `contrastRatio` on `undefined`.
+ */
+const pickAccentText = (primary, canvas, mode) => {
+    const safeInk = () => ((0, color_1.contrastRatio)("#ffffff", canvas) >= AA_NORMAL_TEXT ? "#ffffff" : "#000000");
+    if (!primary)
+        return safeInk();
+    const order = SEARCH_ORDER[mode];
+    const found = order.find((rung) => primary[rung] != null && (0, color_1.contrastRatio)(primary[rung], canvas) >= AA_NORMAL_TEXT);
+    if (found !== undefined)
+        return primary[found];
+    for (let i = order.length - 1; i >= 0; i--) {
+        const rung = primary[order[i]];
+        if (rung != null)
+            return rung;
+    }
+    return safeInk();
+};
+exports.pickAccentText = pickAccentText;
+/** 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;
+/**
+ * Accent text color for any scale (primary, secondary, red, …) drawn on `canvas`.
+ *
+ * Held to AA in BOTH modes. This deliberately no longer returns light's `[500]` untouched: that
+ * concession existed only while light mode was frozen for consumers, and it shipped known AA
+ * failures (radiant 4.15, emerald 3.24, rosewood 3.29). Those brands now step to the nearest rung
+ * that clears AA, which changes their light pixels — the accepted cost of meeting WCAG.
+ */
+const accentTextOnCanvas = (scale, canvas) => (0, exports.pickAccentText)(scale, canvas, (0, color_1.relativeLuminance)(canvas) < DARK_CANVAS_LUMINANCE ? "dark" : "light");
+exports.accentTextOnCanvas = accentTextOnCanvas;
+/**
+ * Ink for text drawn ON a filled swatch (a button/tag/badge fill), not the canvas. `white`/`black`
+ * must be the mode-stable absolutes (`theme.colors.white` / `theme.colors.black`) — NOT a
+ * mode-adaptive token like `text[900]`, which is dark ink in light mode but near-white in dark and
+ * would silently flip which candidate is "the dark one" depending on mode.
+ *
+ * Provably always clears AA: brute-forcing the sRGB cube shows `max(contrast(white,X),
+ * contrast(black,X)) >= 4.583` for every X, so whichever of the two fails, the other clears 4.5 —
+ * this never needs to step the fill's rung. Prefers white first (brand-conventional look) and
+ * only falls back to black when white itself fails.
+ */
+const onFilled = (fill, white, black) => (0, color_1.contrastRatio)(white, fill) >= AA_NORMAL_TEXT ? white : black;
+exports.onFilled = onFilled;
+/**
+ * Ink for text on a two-stop gradient fill. Picks `onFilled` against whichever stop is LIGHTER —
+ * the harder case for either ink to clear. Each brand's `gradient` token is tuned so this
+ * resolves to the same ink at both ends (see palette.light.ts `gradient` comments); a caller
+ * that overrides the gradient (e.g. `UpgradeButton`'s `gradient` prop) isn't guaranteed the same
+ * safety, since an arbitrary pair can still need different inks at each end.
+ */
+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/buildBrandTokens.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Builds 8-digit hex alpha tokens from a 6-digit brand color (Chakra primary.500).
+ */
+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;
+//# sourceMappingURL=buildBrandTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildBrandTokens.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildBrandTokens.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM;;;;;;;;EAWrD;AAED,uFAAuF;AACvF,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAGjE"}

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

@@ -0,0 +1,33 @@
+"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,23 @@
+import type { 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;
+/**
+ * How much lighter this accent can go in dark mode.
+ *
+ * An accent faces two opposing constraints: lighter reads better against a dark canvas, but
+ * worse under the white label of a solid button. There is no single rung that satisfies both
+ * for all seven brands, so this maximizes canvas contrast subject to keeping the white label
+ * legible.
+ *
+ * The floor is `min(AA, whatLightModeAlreadyShips)`: emerald and rosewood already ship white
+ * labels below AA in light mode, so demanding AA here would force their brand color to change.
+ * Dark is held to "no worse than light", never stricter.
+ */
+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: PaletteProps): PaletteProps;
+export default buildDarkPalette;
+//# sourceMappingURL=buildDarkPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildDarkPalette.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/buildDarkPalette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2CrE,uEAAuE;AACvE,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,KAAG,UAW/C,CAAC;AAOH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,MAWvE,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,KAAG,UAM5D,CAAC;AAqIF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAsElE;AAED,eAAe,gBAAgB,CAAC"}