pixelize-design-library 2.3.22 → 2.4.1-beta.2

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

@@ -0,0 +1,375 @@
+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;
+        };
+    };
+    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;
+        };
+    };
+    gray: {
+        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;
+    };
+    border: {
+        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;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    sidebar: {
+        background: {
+            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;
+    };
+    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;
+        };
+    };
+    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;
+        };
+    };
+    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;
+    };
+    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;
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export default palette;
+//# sourceMappingURL=palette.light.d.ts.map

package/dist/Theme/tokens/brands/slate/palette.light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.light.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/slate/palette.light.ts"],"names":[],"mappings":"AAmBA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_light_1 = __importDefault(require("../lavender/palette.light"));
+const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const PRIMARY_500 = "#6b7280"; // was #475569 — pure neutral gray, no blue cast
+const primary = {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: PRIMARY_500, // #6b7280
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const palette = {
+    ...palette_light_1.default,
+    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
+    // original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
+    // Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
+    // margin to trust against rounding/rendering variance.
+    gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
+    primary,
+    tertiary: { ...primary },
+    gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
+        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
+        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
+        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
+        // none pair them with gray[500] text; going dark enough to also clear those would push
+        // past gray[600]'s own lightness and break the ramp order.
+        //
+        // First pass (#6a707e) measured 4.509 against `secondary` — a 0.009 margin, too thin to
+        // trust (same failure mode as the gradient-stop retune). Darkened ~0.7 lightness points
+        // (hue/saturation preserved) to restore the safe margin below.
+        500: "#686e7c",
+        600: "#4b5563",
+        700: "#374151",
+        800: "#1f2937",
+        900: "#111827",
+    },
+    backgroundColor: {
+        main: "#f9fafb",
+        secondary: "#f3f4f6",
+        tertiary: "#edeef1",
+        quaternary: "#e5e7eb",
+        light: "#fcfcfd",
+        medium: "#eaebee",
+        accent: "#e1e3e7",
+        subtle: "#f5f6f7",
+        muted: "#d8dadf",
+        neutral: "#eeeef1",
+        base: "#fafafa",
+        tableHeader: "#f3f4f6",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fafafa",
+        200: "#f4f4f5",
+        300: "#f0f0f1",
+        400: "#eaeaec",
+        500: "#e4e4e7",
+        600: "#cdced2",
+        700: "#9a9ba1",
+        800: "#6b6d75",
+        900: "#4f5057",
+    },
+    border: {
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#ececee",
+        300: "#e4e4e7",
+        400: "#dcdcdf",
+        500: "#d4d4d8",
+        600: "#bebebf",
+        700: "#909096",
+        800: "#6b6b70",
+        900: "#505054",
+    },
+    boxborder: {
+        50: "#fafafa",
+        100: "#f3f3f4",
+        200: "#eaeaec",
+        300: "#e1e1e4",
+        400: "#d9d9dc",
+        500: "#d0d0d4",
+        600: "#bcbcc0",
+        700: "#8e8e93",
+        800: "#6a6a6e",
+        900: "#4f4f52",
+    },
+    table: {
+        hover: {
+            50: "#fefefe",
+            100: "#f7f7f8",
+            200: "#f1f1f3",
+            300: "#ebebed",
+            400: "#e5e5e8",
+            500: "#dfdfе2",
+            600: "#cbcbcf",
+            700: "#a0a0a5",
+            800: "#787880",
+            900: "#5a5a60",
+        },
+    },
+    sidebar: {
+        background: {
+            50: "#d4d4d8",
+            100: "#a1a1aa",
+            200: "#71717a", // hover surface
+            300: "#52525b",
+            400: "#3f3f46",
+            500: "#18181b", // ← near-black charcoal, pure gray no blue
+            600: "#141417",
+            700: "#101013",
+            800: "#0c0c0e",
+            900: "#08080a",
+        },
+    },
+    boxShadow: {
+        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+        error: palette_light_1.default.boxShadow.error,
+        default: palette_light_1.default.boxShadow.default,
+    },
+};
+exports.default = palette;

package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dark palette for the storefront brand, derived from its own light palette so the brand hue
+ * carries through. Override individual tokens here if this brand needs a bespoke dark value.
+ */
+declare const palette: import("../..").PaletteProps;
+export default palette;
+//# sourceMappingURL=palette.dark.d.ts.map

package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/storefront/palette.dark.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,OAAO,8BAA0B,CAAC;AAExC,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/storefront/palette.dark.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const palette_light_1 = __importDefault(require("./palette.light"));
+/**
+ * Dark palette for the storefront brand, derived from its own light palette so the brand hue
+ * carries through. Override individual tokens here if this brand needs a bespoke dark value.
+ */
+const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+exports.default = palette;