pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

package/dist/Theme/tokens/brands/zinc/palette.light.d.ts

@@ -1,374 +1,3 @@
-declare const palette: {
-    gradient: {
-        from: string;
-        to: string;
-    };
-    primary: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        opacity: {
-            4: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            40: string;
-            48: string;
-        };
-    };
-    secondary: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        opacity: {
-            4: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            40: string;
-            48: string;
-        };
-    };
-    tertiary: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        opacity: {
-            4: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            40: string;
-            48: string;
-        };
-    };
-    transparent: string;
-    black: string;
-    white: string;
-    semantic: {
-        success: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        error: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        warning: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        info: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-    };
-    gray: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    red: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    orange: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    yellow: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    green: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    teal: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    blue: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    cyan: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    purple: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    pink: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    backgroundColor: {
-        main: string;
-        secondary: string;
-        tertiary: string;
-        quaternary: string;
-        light: string;
-        medium: string;
-        accent: string;
-        subtle: string;
-        muted: string;
-        neutral: string;
-        base: string;
-        tableHeader: 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;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    header: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    placeholder: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    boxShadow: {
-        primary: string;
-        error: string;
-        default: string;
-    };
-    sidebar: {
-        background: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-    };
-    boxborder: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    border: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        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;
-        };
-    };
-    disabled: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-};
+import type { BrandPaletteSource } from "../../types";
+declare const palette: BrandPaletteSource;
 export default palette;

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

@@ -18,7 +18,7 @@ declare const AA_NORMAL_TEXT = 4.5;
  * 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;
+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`. */
@@ -36,7 +36,7 @@ export declare const isDarkCanvas: (canvas: string) => boolean;
  * 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;
+export declare const accentTextOnCanvas: (scale: ColorScale, 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

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

@@ -6,19 +6,11 @@ const color_1 = require("./color");
 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.
+ * Ordered nearest-to-accent first, so brand identity survives as far as contrast allows.
+ * One order serves both modes: light ramps run light -> dark and dark ramps run dark -> light,
+ * so 500 -> 900 always steps AWAY from that mode's own canvas.
  */
-const SEARCH_ORDER = {
-    light: [500, 600, 700, 800, 900],
-    dark: [500, 600, 700, 800, 900],
-};
+const SEARCH_ORDER = [500, 600, 700, 800, 900];
 /**
  * Pick the accent rung to use for accent-COLORED TEXT sitting on the canvas.
  *
@@ -36,20 +28,9 @@ const SEARCH_ORDER = {
  * 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();
+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. */
@@ -71,7 +52,7 @@ exports.isDarkCanvas = isDarkCanvas;
  * 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");
+const accentTextOnCanvas = (scale, canvas) => (0, exports.pickAccentText)(scale, canvas);
 exports.accentTextOnCanvas = accentTextOnCanvas;
 /**
  * Ink for text drawn ON a filled swatch (a button/tag/badge fill), not the canvas. `white`/`black`

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

@@ -0,0 +1,11 @@
+import type { BrandScale, ColorScale } from "../types";
+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,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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],
+};
+// 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;
+};
+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: { ...secondary },
+        text: ramp(primary500, TEXT),
+        header: ramp(primary500, HEADER),
+        placeholder: ramp(primary500, PLACEHOLDER),
+        disabled: ramp(primary500, DISABLED),
+    };
+}

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

@@ -1,4 +1,4 @@
-import type { ColorScale, PaletteProps } from "../types";
+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. */
@@ -18,5 +18,5 @@ 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: PaletteProps): PaletteProps;
+export declare function buildDarkPalette(light: BrandPaletteSource): PaletteProps;
 export default buildDarkPalette;

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

@@ -5,6 +5,9 @@ exports.buildDarkPalette = buildDarkPalette;
 const buildBrandTokens_1 = require("./buildBrandTokens");
 const color_1 = require("./color");
 const accentText_1 = require("./accentText");
+const sidebarAccent_1 = require("./sidebarAccent");
+const mutedText_1 = require("./mutedText");
+const semanticText_1 = require("./semanticText");
 /**
  * Derives a brand's dark palette from its light palette.
  *
@@ -243,6 +246,12 @@ function buildDarkPalette(light) {
     ]));
     const white = light.white;
     const primary = liftBrand(light.primary, white);
+    const 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),
+    };
     return {
         ...light,
         // Brand identity: hue preserved, accent lifted as far as the white label allows.
@@ -250,12 +259,7 @@ function buildDarkPalette(light) {
         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),
-        },
+        semantic,
         // `white` stays white on purpose: it is the label color on filled buttons.
         transparent: light.transparent,
         black: light.black,
@@ -284,9 +288,13 @@ function buildDarkPalette(light) {
         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"),
+        accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main),
+        textMuted: (0, mutedText_1.buildMutedText)(fromTargets(hueSource, TEXT_TARGETS, TEXT_SAT), namedSurfaces.main),
+        semanticText: (0, semanticText_1.buildSemanticText)(semantic, namedSurfaces.main),
+        onPrimary: (0, accentText_1.onFilled)(primary[500], light.white, light.black),
+        onSemantic: (0, semanticText_1.buildOnSemantic)(semantic, light.white, light.black),
         // Sidebar is already near-black in light mode, so it needs no inversion.
-        sidebar: light.sidebar,
+        sidebar: (0, sidebarAccent_1.withSidebarTokens)(light),
         boxShadow: {
             primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(primary[500]),
             error: light.boxShadow.error,

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

@@ -34,7 +34,7 @@ function chartInk(colors) {
         surface,
         text: colors.text[900],
         muted: colors.text[500],
-        grid: colors.border[500],
+        grid: colors.boxborder[200],
         axis: colors.text[500],
         tooltipBg: colors.backgroundColor.secondary,
     };

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

@@ -0,0 +1,22 @@
+export type Gradient = {
+    from: string;
+    to: string;
+};
+/** A gradient already safe to paint, plus the ink that is guaranteed legible on it. */
+export type ResolvedGradient = Gradient & {
+    ink: string;
+};
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+export declare const resolveGradient: (gradient: Gradient, white: string, black: string) => ResolvedGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export declare const gradientCss: (g: Gradient, angle?: string) => string;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gradientCss = exports.resolveGradient = exports.inkSafeGradient = void 0;
+const accentText_1 = require("./accentText");
+const statusTone_1 = require("./statusTone");
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+const inkSafeGradient = (gradient) => ({
+    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
+    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
+});
+exports.inkSafeGradient = inkSafeGradient;
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+const resolveGradient = (gradient, white, black) => {
+    const { from, to } = (0, exports.inkSafeGradient)(gradient);
+    return { from, to, ink: (0, accentText_1.onGradient)(from, to, white, black) };
+};
+exports.resolveGradient = resolveGradient;
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;
+exports.gradientCss = gradientCss;