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

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

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.liftScale = exports.accentLightnessDelta = exports.shiftLighter = exports.reverseScale = void 0;
+exports.buildDarkPalette = buildDarkPalette;
+const buildBrandTokens_1 = require("./buildBrandTokens");
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+/**
+ * Derives a brand's dark palette from its light palette.
+ *
+ * Every value is computed from the brand's OWN hue, so each brand keeps its identity in
+ * dark mode instead of collapsing onto one shared grey.
+ *
+ * Three different strategies are used, because a single rule gives wrong results:
+ *
+ * - **Structural ramps** (surfaces, text, borders) are rebuilt at explicit lightness
+ *   targets around the brand hue. They are NOT simply reversed: the light ramps bottom out
+ *   around 35% lightness, which is nowhere near dark enough for a dark-mode canvas.
+ * - **Utility hue ramps** (red/green/…) are reversed, so index roles survive: `red.50` is a
+ *   pale badge background in light and becomes a deep one in dark, while `red.900` flips to
+ *   near-white for text on it.
+ * - **Brand + semantic ramps** are shifted one step lighter, preserving hue while lifting
+ *   the accent to a legible lightness against a dark canvas.
+ *
+ * `white`, `black` and `transparent` are deliberately untouched — `white` is a *text* color
+ * on filled buttons (see `Button.styles.ts`), not a surface. Components that use `white` as a
+ * surface are migrated to a surface token instead.
+ */
+const SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const fromTargets = (hueSource, targets, saturation) => {
+    const { h } = (0, color_1.hexToHsl)(hueSource);
+    const out = {};
+    for (const k of SCALE_KEYS) {
+        out[k] = (0, color_1.hslToHex)({ h, s: saturation, l: targets[k] });
+    }
+    return out;
+};
+/** Mirrors index roles: 50↔900, 100↔800, 200↔700, 300↔600, 400↔500. */
+const reverseScale = (scale) => ({
+    50: scale[900],
+    100: scale[800],
+    200: scale[700],
+    300: scale[600],
+    400: scale[500],
+    500: scale[400],
+    600: scale[300],
+    700: scale[200],
+    800: scale[100],
+    900: scale[50],
+});
+exports.reverseScale = reverseScale;
+/** Shifts a ramp one step lighter, keeping hue. Used for brand + semantic accents. */
+const shiftLighter = (scale) => ({
+    50: (0, color_1.withLightness)(scale[50], Math.min((0, color_1.hexToHsl)(scale[50]).l + 4, 97)),
+    100: scale[50],
+    200: scale[100],
+    300: scale[200],
+    400: scale[300],
+    500: scale[400],
+    600: scale[500],
+    700: scale[600],
+    800: scale[700],
+    900: scale[800],
+});
+exports.shiftLighter = shiftLighter;
+/** WCAG AA for normal text — the bar for a solid button's white label. */
+const WHITE_LABEL_TARGET = 4.5;
+const MAX_ACCENT_LIGHTNESS = 85;
+const LIGHTNESS_STEP = 0.5;
+/**
+ * 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.
+ */
+const accentLightnessDelta = (accent500, white) => {
+    const originalL = (0, color_1.hexToHsl)(accent500).l;
+    const floor = Math.min(WHITE_LABEL_TARGET, (0, color_1.contrastRatio)(white, accent500));
+    let best = originalL;
+    // Contrast against white falls monotonically as lightness rises, so stop at the first miss.
+    for (let l = originalL; l <= MAX_ACCENT_LIGHTNESS; l += LIGHTNESS_STEP) {
+        if ((0, color_1.contrastRatio)(white, (0, color_1.withLightness)(accent500, l)) < floor)
+            break;
+        best = l;
+    }
+    return best - originalL;
+};
+exports.accentLightnessDelta = accentLightnessDelta;
+/** Raises every rung by the same lightness delta, preserving the ramp's shape and hue. */
+const liftScale = (scale, delta) => {
+    const out = {};
+    for (const k of SCALE_KEYS) {
+        out[k] = (0, color_1.withLightness)(scale[k], Math.min((0, color_1.hexToHsl)(scale[k]).l + delta, 97));
+    }
+    return out;
+};
+exports.liftScale = liftScale;
+/**
+ * Dark-ramp endpoints for a brand/semantic scale.
+ *
+ * `[50]`/`[100]` are the SUBTLE TINT rungs — chips, avatars, ghost hovers. On a dark canvas they
+ * must be dark, not near-white. `[800]`/`[900]` are the STRONG rungs and get read as text, so on
+ * a dark canvas they must be light. Both roles invert versus light mode.
+ */
+const BRAND_DARK_MIN_L = 12;
+const BRAND_DARK_MAX_L = 93;
+/** Rung order, used to interpolate lightness on each side of the pinned accent. */
+const RUNG_ORDER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const ACCENT_INDEX = RUNG_ORDER.indexOf(500);
+/**
+ * Rebuild a scale as a proper DARK ramp: monotonically dark -> light across 50 -> 900, with `[500]`
+ * pinned to the accent.
+ *
+ * Replaces a flat lift for brand/semantic scales. A flat lift adds the same delta to every rung, so
+ * `[50]` stayed near-white (it clamps at L97) and `[600]`+ stayed DARKER than the accent — which is
+ * wrong in both directions on a dark canvas: the tint rungs painted white chips, and components
+ * that use `[600]` as text (e.g. Accordion) rendered dark-on-dark at ~1.3 contrast.
+ *
+ * Interpolating around the pinned accent (rather than using fixed lightness targets) keeps the ramp
+ * monotonic for every brand, whatever lightness that brand's accent lands on. Hue and saturation are
+ * taken from the light scale's OWN matching rung, so each brand keeps its character and its tint
+ * rungs stay as desaturated as they were designed to be.
+ */
+const toDarkRamp = (scale, accentHex) => {
+    const accentL = (0, color_1.hexToHsl)(accentHex).l;
+    const out = {};
+    RUNG_ORDER.forEach((key, i) => {
+        let l;
+        if (i === ACCENT_INDEX) {
+            l = accentL;
+        }
+        else if (i < ACCENT_INDEX) {
+            // 50 -> just below the accent.
+            const t = i / ACCENT_INDEX;
+            l = BRAND_DARK_MIN_L + (accentL - BRAND_DARK_MIN_L) * t;
+        }
+        else {
+            // Just above the accent -> 900.
+            const t = (i - ACCENT_INDEX) / (RUNG_ORDER.length - 1 - ACCENT_INDEX);
+            l = accentL + (BRAND_DARK_MAX_L - accentL) * t;
+        }
+        const { s } = (0, color_1.hexToHsl)(scale[key]);
+        out[key] = (0, color_1.hslToHex)({ h: (0, color_1.hexToHsl)(accentHex).h, s, l });
+    });
+    return out;
+};
+/** Dark accent scale: accent pinned as light as the white label allows, ramp rebuilt around it. */
+const liftAccent = (scale, white) => {
+    const accent = (0, color_1.withLightness)(scale[500], (0, color_1.hexToHsl)(scale[500]).l + (0, exports.accentLightnessDelta)(scale[500], white));
+    return { ...toDarkRamp(scale, accent), 500: accent };
+};
+const liftBrand = (brand, white) => {
+    const lifted = liftAccent(brand, white);
+    return { ...lifted, opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(lifted[500]) };
+};
+// Lightness targets per structural ramp. Index roles match light mode; only lightness flips.
+const SURFACE_TARGETS = {
+    50: 7, 100: 9, 200: 11, 300: 14, 400: 17, 500: 21, 600: 30, 700: 45, 800: 60, 900: 75,
+};
+const TEXT_TARGETS = {
+    50: 30, 100: 38, 200: 45, 300: 55, 400: 62, 500: 70, 600: 76, 700: 82, 800: 88, 900: 95,
+};
+const PLACEHOLDER_TARGETS = {
+    50: 25, 100: 30, 200: 35, 300: 42, 400: 48, 500: 54, 600: 60, 700: 66, 800: 72, 900: 80,
+};
+const BORDER_TARGETS = {
+    50: 12, 100: 15, 200: 18, 300: 21, 400: 24, 500: 27, 600: 33, 700: 42, 800: 52, 900: 62,
+};
+const DISABLED_TARGETS = {
+    50: 14, 100: 18, 200: 22, 300: 26, 400: 30, 500: 34, 600: 42, 700: 52, 800: 62, 900: 72,
+};
+const TABLE_HOVER_TARGETS = {
+    50: 9, 100: 11, 200: 13, 300: 15, 400: 17, 500: 19, 600: 24, 700: 32, 800: 42, 900: 52,
+};
+/**
+ * `gray[500]` is the library's de-facto muted-text token (~43 call sites), so its rung is set by
+ * contrast, not by an even ramp — and it must clear AA against the LIGHTEST named surface it can
+ * land on, not merely against the canvas. Tuning it to the canvas alone is what shipped the first
+ * two misses: L48 measured 4.18 on the canvas, then L52 cleared the canvas (4.81) but still failed
+ * on every surface above `secondary` (3.39 on `muted`). L64 clears all of them (5.66 worst case).
+ *
+ * That lands on shadcn's own answer independently: its dark `muted-foreground` is zinc-400
+ * (#a1a1aa, L65) against a near-black canvas. Ours is #a49ea9 — same lightness, brand hue kept.
+ * Rungs at/below 400 stay decorative (borders, dividers, disabled) and are not held to text AA.
+ */
+const GRAY_TARGETS = {
+    50: 10, 100: 14, 200: 22, 300: 32, 400: 48, 500: 64, 600: 72, 700: 79, 800: 86, 900: 93,
+};
+/**
+ * Named surface lightness. Elevation INVERTS versus light mode: in light, `muted`/`accent`
+ * are the strongest tints away from white; in dark, "stronger" means lighter than the canvas.
+ *
+ * The top of the ramp is deliberately compressed (accent 18->17, muted 20->18): dark elevation
+ * reads through small lightness steps plus borders, so a wide spread just looks washed out rather
+ * than layered. `light`/`tertiary` share a rung by design (they are aliases); no other pair may,
+ * or that step of elevation silently disappears.
+ */
+const NAMED_SURFACE_L = {
+    main: 7,
+    base: 8,
+    subtle: 10,
+    secondary: 11,
+    tableHeader: 12,
+    light: 13,
+    tertiary: 13,
+    medium: 14,
+    neutral: 15,
+    quaternary: 16,
+    accent: 17,
+    muted: 18,
+};
+const SURFACE_SAT = 14;
+const TEXT_SAT = 12;
+const PLACEHOLDER_SAT = 10;
+const BORDER_SAT = 12;
+const DISABLED_SAT = 8;
+const GRAY_SAT = 6;
+function buildDarkPalette(light) {
+    const hueSource = light.primary[500];
+    const { h } = (0, color_1.hexToHsl)(hueSource);
+    const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
+        key,
+        (0, color_1.hslToHex)({ h, s: SURFACE_SAT, l }),
+    ]));
+    const white = light.white;
+    const primary = liftBrand(light.primary, white);
+    return {
+        ...light,
+        // Brand identity: hue preserved, accent lifted as far as the white label allows.
+        primary,
+        secondary: liftBrand(light.secondary, white),
+        tertiary: liftBrand(light.tertiary, white),
+        gradient: light.gradient,
+        semantic: {
+            success: liftAccent(light.semantic.success, white),
+            error: liftAccent(light.semantic.error, white),
+            warning: liftAccent(light.semantic.warning, white),
+            info: liftAccent(light.semantic.info, white),
+        },
+        // `white` stays white on purpose: it is the label color on filled buttons.
+        transparent: light.transparent,
+        black: light.black,
+        white: light.white,
+        // Utility hues keep their meaning; only the light/dark role of each index flips.
+        gray: fromTargets(hueSource, GRAY_TARGETS, GRAY_SAT),
+        red: (0, exports.reverseScale)(light.red),
+        orange: (0, exports.reverseScale)(light.orange),
+        yellow: (0, exports.reverseScale)(light.yellow),
+        green: (0, exports.reverseScale)(light.green),
+        teal: (0, exports.reverseScale)(light.teal),
+        blue: (0, exports.reverseScale)(light.blue),
+        cyan: (0, exports.reverseScale)(light.cyan),
+        purple: (0, exports.reverseScale)(light.purple),
+        pink: (0, exports.reverseScale)(light.pink),
+        backgroundColor: namedSurfaces,
+        background: fromTargets(hueSource, SURFACE_TARGETS, SURFACE_SAT),
+        text: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT),
+        header: fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT + 2),
+        placeholder: fromTargets(hueSource, PLACEHOLDER_TARGETS, PLACEHOLDER_SAT),
+        border: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
+        boxborder: fromTargets(hueSource, BORDER_TARGETS, BORDER_SAT),
+        table: { hover: fromTargets(hueSource, TABLE_HOVER_TARGETS, BORDER_SAT) },
+        disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
+        // Derived from the LIFTED accent against the dark canvas: the lift stops at the white-label
+        // floor (~4.55), which leaves primary[500] short of AA as text, so text needs its own rung.
+        accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main, "dark"),
+        // Sidebar is already near-black in light mode, so it needs no inversion.
+        sidebar: light.sidebar,
+        boxShadow: {
+            primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(primary[500]),
+            error: light.boxShadow.error,
+            default: "#00000080",
+        },
+    };
+}
+exports.default = buildDarkPalette;

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

@@ -0,0 +1,17 @@
+import type { PaletteProps } from "../types";
+export type ThemeColorPalette = PaletteProps;
+/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+export declare function getDefaultSeriesColors(colors: ThemeColorPalette): string[];
+export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleStyle?: {
+    color?: string;
+    fontSize?: string;
+    fontWeight?: number | string;
+    fontFamily?: string;
+}): {
+    color: string;
+    fontSize: string;
+    fontWeight: number | string;
+    fontFamily: string;
+};
+export declare function chartAxisLabelColor(colors: ThemeColorPalette): string;
+//# sourceMappingURL=chartColorsFromTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chartColorsFromTheme.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/chartColorsFromTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAE7C,qFAAqF;AACrF,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,EAAE,CAO1E;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,EACzB,UAAU,CAAC,EAAE;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;WAJS,MAAM;cACH,MAAM;gBACJ,MAAM,GAAG,MAAM;gBACf,MAAM;EAUtB;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAErE"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultSeriesColors = getDefaultSeriesColors;
+exports.mergeChartTitleStyle = mergeChartTitleStyle;
+exports.chartAxisLabelColor = chartAxisLabelColor;
+/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+function getDefaultSeriesColors(colors) {
+    return [
+        colors.primary[500],
+        colors.semantic.error[500],
+        colors.semantic.success[500],
+        colors.orange[500],
+    ];
+}
+function mergeChartTitleStyle(colors, titleStyle) {
+    return {
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+        color: colors.primary[500],
+        ...titleStyle,
+    };
+}
+function chartAxisLabelColor(colors) {
+    return colors.gray[700];
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Pure color math. No dependencies, no platform APIs — safe for the mobile port.
+ *
+ * Used by `buildDarkPalette` to derive dark ramps from each brand's own light colors,
+ * and to assert contrast in tests.
+ */
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type Hsl = {
+    h: number;
+    s: number;
+    l: number;
+};
+/**
+ * Accepts `#rgb` or `#rrggbb` only. An `#rrggbbaa` throws ON PURPOSE.
+ *
+ * The old version silently dropped the alpha and returned the fully-opaque rgb. That made
+ * `contrastRatio` score a 16%-alpha hover tint as if it were solid — a measured 4.18 for a fill that
+ * actually renders at 1.17 over the canvas, a 3.6x overstatement — with a doc comment saying "alpha
+ * ignored" that made it look handled. Alpha over an unknown backdrop has no defined luminance, so the
+ * only correct move is to refuse it: composite it first with `compositeOver`, then measure the result.
+ */
+export declare function hexToRgb(hex: string): Rgb;
+/** Alpha in 0..1. `#rgb`/`#rrggbb` read as fully opaque (`a: 1`); `#rgba`/`#rrggbbaa` carry their alpha. */
+export declare function hexToRgba(hex: string): Rgb & {
+    a: number;
+};
+/**
+ * Flatten a translucent foreground onto an opaque backdrop — the ONLY way to get a real color for a
+ * tint before measuring contrast. `contrastRatio(tint, canvas)` now throws; the correct call is
+ * `contrastRatio(compositeOver(tint, canvas), canvas)`.
+ */
+export declare function compositeOver(foreground: string, backdrop: string): string;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsl({ r, g, b }: Rgb): Hsl;
+export declare function hslToRgb({ h, s, l }: Hsl): Rgb;
+export declare const hexToHsl: (hex: string) => Hsl;
+export declare const hslToHex: (hsl: Hsl) => string;
+/** Re-lights a color while keeping its hue (and, unless overridden, its saturation). */
+export declare function withLightness(hex: string, lightness: number, saturation?: number): string;
+/** Linear RGB blend. `weight` is how much of `b` to take (0 → a, 1 → b). */
+export declare function mix(a: string, b: string, weight: number): string;
+/** WCAG 2.1 relative luminance. */
+export declare function relativeLuminance(hex: string): number;
+/** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
+export declare function contrastRatio(a: string, b: string): number;
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/color.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,GAAG,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACtD,MAAM,MAAM,GAAG,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAItD;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAWzC;AAED,4GAA4G;AAC5G,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAQ1D;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAQ1E;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAIjD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CAkB9C;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CA4B9C;AAED,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG,GAA8B,CAAC;AACtE,eAAO,MAAM,QAAQ,GAAI,KAAK,GAAG,KAAG,MAAiC,CAAC;AAEtE,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAGzF;AAED,4EAA4E;AAC5E,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAShE;AAED,mCAAmC;AACnC,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAM1D"}

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

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * Pure color math. No dependencies, no platform APIs — safe for the mobile port.
+ *
+ * Used by `buildDarkPalette` to derive dark ramps from each brand's own light colors,
+ * and to assert contrast in tests.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hslToHex = exports.hexToHsl = void 0;
+exports.hexToRgb = hexToRgb;
+exports.hexToRgba = hexToRgba;
+exports.compositeOver = compositeOver;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.hslToRgb = hslToRgb;
+exports.withLightness = withLightness;
+exports.mix = mix;
+exports.relativeLuminance = relativeLuminance;
+exports.contrastRatio = contrastRatio;
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+/**
+ * Accepts `#rgb` or `#rrggbb` only. An `#rrggbbaa` throws ON PURPOSE.
+ *
+ * The old version silently dropped the alpha and returned the fully-opaque rgb. That made
+ * `contrastRatio` score a 16%-alpha hover tint as if it were solid — a measured 4.18 for a fill that
+ * actually renders at 1.17 over the canvas, a 3.6x overstatement — with a doc comment saying "alpha
+ * ignored" that made it look handled. Alpha over an unknown backdrop has no defined luminance, so the
+ * only correct move is to refuse it: composite it first with `compositeOver`, then measure the result.
+ */
+function hexToRgb(hex) {
+    let h = hex.trim().replace(/^#/, "");
+    if (h.length === 3)
+        h = h.split("").map((c) => c + c).join("");
+    if (!/^[0-9a-fA-F]{6}$/.test(h)) {
+        throw new Error(`hexToRgb needs an opaque #rgb/#rrggbb color, got "${hex}". ` +
+            `If this is an #rrggbbaa tint, composite it over its backdrop first (compositeOver).`);
+    }
+    const int = parseInt(h, 16);
+    return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 };
+}
+/** Alpha in 0..1. `#rgb`/`#rrggbb` read as fully opaque (`a: 1`); `#rgba`/`#rrggbbaa` carry their alpha. */
+function hexToRgba(hex) {
+    let h = hex.trim().replace(/^#/, "");
+    if (h.length === 4)
+        h = h.split("").map((c) => c + c).join("");
+    if (h.length === 8) {
+        const a = parseInt(h.slice(6, 8), 16) / 255;
+        return { ...hexToRgb(`#${h.slice(0, 6)}`), a };
+    }
+    return { ...hexToRgb(`#${h}`), a: 1 };
+}
+/**
+ * Flatten a translucent foreground onto an opaque backdrop — the ONLY way to get a real color for a
+ * tint before measuring contrast. `contrastRatio(tint, canvas)` now throws; the correct call is
+ * `contrastRatio(compositeOver(tint, canvas), canvas)`.
+ */
+function compositeOver(foreground, backdrop) {
+    const f = hexToRgba(foreground);
+    const b = hexToRgb(backdrop);
+    return rgbToHex({
+        r: f.r * f.a + b.r * (1 - f.a),
+        g: f.g * f.a + b.g * (1 - f.a),
+        b: f.b * f.a + b.b * (1 - f.a),
+    });
+}
+function rgbToHex({ r, g, b }) {
+    const to = (n) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+    return `#${to(r)}${to(g)}${to(b)}`;
+}
+function rgbToHsl({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d === 0)
+        return { h: 0, s: 0, l: l * 100 };
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h;
+    if (max === rn)
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+    else if (max === gn)
+        h = ((bn - rn) / d + 2) / 6;
+    else
+        h = ((rn - gn) / d + 4) / 6;
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToRgb({ h, s, l }) {
+    const hn = ((h % 360) + 360) % 360 / 360;
+    const sn = clamp(s, 0, 100) / 100;
+    const ln = clamp(l, 0, 100) / 100;
+    if (sn === 0) {
+        const v = ln * 255;
+        return { r: v, g: v, b: v };
+    }
+    const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
+    const p = 2 * ln - q;
+    const channel = (t) => {
+        let tn = t;
+        if (tn < 0)
+            tn += 1;
+        if (tn > 1)
+            tn -= 1;
+        if (tn < 1 / 6)
+            return p + (q - p) * 6 * tn;
+        if (tn < 1 / 2)
+            return q;
+        if (tn < 2 / 3)
+            return p + (q - p) * (2 / 3 - tn) * 6;
+        return p;
+    };
+    return {
+        r: channel(hn + 1 / 3) * 255,
+        g: channel(hn) * 255,
+        b: channel(hn - 1 / 3) * 255,
+    };
+}
+const hexToHsl = (hex) => rgbToHsl(hexToRgb(hex));
+exports.hexToHsl = hexToHsl;
+const hslToHex = (hsl) => rgbToHex(hslToRgb(hsl));
+exports.hslToHex = hslToHex;
+/** Re-lights a color while keeping its hue (and, unless overridden, its saturation). */
+function withLightness(hex, lightness, saturation) {
+    const { h, s } = (0, exports.hexToHsl)(hex);
+    return (0, exports.hslToHex)({ h, s: saturation !== null && saturation !== void 0 ? saturation : s, l: clamp(lightness, 0, 100) });
+}
+/** Linear RGB blend. `weight` is how much of `b` to take (0 → a, 1 → b). */
+function mix(a, b, weight) {
+    const ca = hexToRgb(a);
+    const cb = hexToRgb(b);
+    const w = clamp(weight, 0, 1);
+    return rgbToHex({
+        r: ca.r + (cb.r - ca.r) * w,
+        g: ca.g + (cb.g - ca.g) * w,
+        b: ca.b + (cb.b - ca.b) * w,
+    });
+}
+/** 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);
+}
+/** WCAG 2.1 contrast ratio, 1–21. AA body text needs >= 4.5. */
+function contrastRatio(a, b) {
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    const light = Math.max(la, lb);
+    const dark = Math.min(la, lb);
+    return (light + 0.05) / (dark + 0.05);
+}

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

@@ -0,0 +1,6 @@
+export * from "./accentText";
+export * from "./buildBrandTokens";
+export * from "./buildDarkPalette";
+export * from "./chartColorsFromTheme";
+export * from "./color";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accentText"), exports);
+__exportStar(require("./buildBrandTokens"), exports);
+__exportStar(require("./buildDarkPalette"), exports);
+__exportStar(require("./chartColorsFromTheme"), exports);
+__exportStar(require("./color"), exports);

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

@@ -0,0 +1,15 @@
+/**
+ * Pixelize design tokens — the portable core of the design system.
+ *
+ * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
+ * TypeScript data + pure functions, so the mobile design library can consume this
+ * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
+ *
+ * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
+ * live in `Theme/chakra/` instead.
+ */
+export * from "./types";
+export * from "./primitives";
+export * from "./brands";
+export * from "./builders";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/dist/Theme/tokens/index.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * Pixelize design tokens — the portable core of the design system.
+ *
+ * PURITY CONTRACT: nothing in this folder imports Chakra, React, or CSS. It is plain
+ * TypeScript data + pure functions, so the mobile design library can consume this
+ * folder as-is. Keep it that way — a single Chakra/CSS import here breaks the mobile port.
+ *
+ * Web-only concerns (Chakra `extendTheme`, `cssVarPrefix`, the Inter font-face CSS import)
+ * live in `Theme/chakra/` instead.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./primitives"), exports);
+__exportStar(require("./brands"), exports);
+__exportStar(require("./builders"), exports);

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

@@ -0,0 +1,9 @@
+declare const breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+};
+export default breakpoints;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/Theme/tokens/primitives/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/breakpoints.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW;;;;;;CAMhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const breakpoints = {
+    sm: "30em",
+    md: "48em",
+    lg: "62em",
+    xl: "80em",
+    "2xl": "96em",
+};
+exports.default = breakpoints;

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

@@ -0,0 +1,10 @@
+export { default as space } from "./space";
+export { default as sizes } from "./sizes";
+export { default as radii } from "./radii";
+export { default as shadows } from "./shadows";
+export { default as zIndices } from "./zIndices";
+export { default as breakpoints } from "./breakpoints";
+export { default as lineHeights } from "./lineHeights";
+export { default as letterSpacings } from "./letterSpacings";
+export { default as typography, fonts, fontSizes, fontWeights } from "./typography";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}