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

package/dist/Theme/tokens/brands/lavender/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;
+        };
+    };
+    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;
+    };
+};
+export default palette;
+//# sourceMappingURL=palette.light.d.ts.map

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

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

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

@@ -0,0 +1,316 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const buildBrandTokens_1 = require("../../builders/buildBrandTokens");
+const PRIMARY_500 = "#8B3FC8";
+const SECONDARY_ANCHOR = "#1e0f30";
+const primary = {
+    50: "#f7edfc",
+    100: "#eacff7",
+    200: "#d4a0ef",
+    300: "#bc70e6",
+    400: "#a552db",
+    500: PRIMARY_500,
+    600: "#7632b0",
+    700: "#5e2789",
+    800: "#481d69",
+    900: "#33154c",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const secondary = {
+    50: "#ede8f5",
+    100: "#d4c8e8",
+    200: "#b3a0d4",
+    300: "#8a6aaa",
+    400: "#6b4d8a",
+    500: SECONDARY_ANCHOR,
+    600: "#180b26",
+    700: "#12081c",
+    800: "#0d0514",
+    900: "#08030b",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_ANCHOR),
+};
+const tertiary = { ...secondary };
+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: "#f9f7fb",
+    100: "#f0eaf6",
+    200: "#e4d9f0",
+    300: "#cdbde3",
+    400: "#a897cc",
+    // 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.
+    500: "#746499",
+    600: "#5e527a",
+    700: "#4a4060",
+    800: "#342d45",
+    900: "#221e2e",
+};
+// These global color scales stay unchanged — they are
+// utility palettes, not theme-specific
+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: "#f9f7fc",
+    secondary: "#f2edf8",
+    tertiary: "#ebe3f4",
+    quaternary: "#e2d8ef",
+    light: "#fdfcfe",
+    medium: "#e8e0f2",
+    accent: "#e0d5ed",
+    subtle: "#f5f1fa",
+    muted: "#d8cde8",
+    neutral: "#e8e2f2",
+    base: "#fbfafd",
+    tableHeader: "#f2edf8",
+};
+const background = {
+    50: "#ffffff",
+    100: "#fdfcfe",
+    200: "#f8f5fc",
+    300: "#f2edf8",
+    400: "#ede6f4",
+    500: "#e7def0",
+    600: "#d2c8de",
+    700: "#a59ab0",
+    800: "#7c7386",
+    900: "#5e5867",
+};
+const text = {
+    50: "#f0eef5",
+    100: "#d4cee6",
+    200: "#bcb4d9",
+    300: "#9890c4",
+    400: "#8278b5",
+    500: "#5f5490",
+    600: "#564c83",
+    700: "#433b66",
+    800: "#332d4f",
+    900: "#26213c",
+};
+const header = {
+    50: "#edeaf4",
+    100: "#cdc8e2",
+    200: "#b4aed4",
+    300: "#9488be",
+    400: "#7e70b2",
+    500: "#5e5196",
+    600: "#564a89",
+    700: "#433a6b",
+    800: "#332d52",
+    900: "#26223f",
+};
+const placeholder = {
+    50: "#f2f0f7",
+    100: "#d8d3ea",
+    200: "#c4bde0",
+    300: "#a89ed0",
+    400: "#9690c5",
+    500: "#7a72b0",
+    600: "#6f68a0",
+    700: "#56507d",
+    800: "#423e60",
+    900: "#322f4a",
+};
+const boxShadow = {
+    primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+    error: "#F2463A47",
+    default: "#00000033",
+};
+const sidebar = {
+    background: {
+        50: "#e9eaf0",
+        100: "#d4d6e0",
+        200: "#212747",
+        300: "#7d84a2",
+        400: "#525b83",
+        500: "#161B32",
+        600: "#12162a",
+        700: "#0e1221",
+        800: "#0a0d19",
+        900: "#060911",
+    },
+};
+const boxborder = {
+    50: "#fefefe",
+    100: "#f5f3f9",
+    200: "#ece8f3",
+    300: "#e3deed",
+    400: "#dad4e8",
+    500: "#d1c9e2",
+    600: "#bdb5cf",
+    700: "#918ba1",
+    800: "#6d6879",
+    900: "#52505b",
+};
+const border = {
+    50: "#fefefe",
+    100: "#f6f4f9",
+    200: "#ede9f4",
+    300: "#e5dfef",
+    400: "#dcd5e9",
+    500: "#d3cbe3",
+    600: "#beb7d0",
+    700: "#938da3",
+    800: "#6f6a7c",
+    900: "#54505e",
+};
+const table = {
+    hover: {
+        50: "#fefefe",
+        100: "#faf8fd",
+        200: "#f5f1fb",
+        300: "#f0ebf8",
+        400: "#ebe5f5",
+        500: "#e5dff2",
+        600: "#d0cadf",
+        700: "#a49faf",
+        800: "#7c7886",
+        900: "#5d5a65",
+    },
+};
+const disabled = {
+    50: "#f5f3f9",
+    100: "#eae6f4",
+    200: "#dfd9ef",
+    300: "#d0c8e8",
+    400: "#c5bce2",
+    500: "#b5aadb",
+    600: "#a59bc7",
+    700: "#807898",
+    800: "#625d75",
+    900: "#4b4759",
+};
+// Two-tone brand gradient (violet → pink). Each theme overrides with its own pair.
+// `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
+// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
+// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
+// margin to trust against rounding/rendering variance.
+const gradient = { from: "#8B3FC8", to: "#df187a" };
+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/brands/meadow/palette.dark.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dark palette for the meadow 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/meadow/palette.dark.d.ts.map

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

package/dist/Theme/tokens/brands/meadow/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 meadow 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;