pixelize-design-library 2.3.22 → 2.4.1

package/dist/Theme/tokens/brands/storefront/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;
+        };
+    };
+    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;
+        };
+    };
+    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;
+        };
+    };
+    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/storefront/palette.light.d.ts.map

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

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

@@ -0,0 +1,127 @@
+"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 = "#004f4b"; // deep spruce teal — storefront/retail brand anchor
+const primary = {
+    50: "#eafaf9",
+    100: "#b7eeeb",
+    200: "#6de0da",
+    300: "#29ccc4",
+    400: "#168681",
+    500: PRIMARY_500,
+    600: "#00423f",
+    700: "#003532",
+    800: "#002927",
+    900: "#001d1c",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+const palette = {
+    ...palette_light_1.default,
+    // Same hue as primary, darker stop for the "to" end — mirrors emerald's gradient pattern.
+    // White gradient-button text verified AA at both stops (4.98 / 6.96).
+    gradient: { from: "#0c7d77", to: "#095e90" }, // spruce teal → deep blue
+    primary,
+    // 🌫️ Neutral gray (cool, near-teal — same shape as emerald's gray, rehued)
+    gray: {
+        50: "#f6f8f8",
+        100: "#edf2f2",
+        200: "#dce5e5",
+        300: "#c3d2d1",
+        400: "#9fb3b2",
+        500: "#617473",
+        600: "#5e706f",
+        700: "#475554",
+        800: "#2f3a39",
+        900: "#1f2626",
+    },
+    // 🌊 Background system (very subtle teal tint)
+    backgroundColor: {
+        main: "#f7fbfb",
+        secondary: "#eef7f7",
+        tertiary: "#e5f1f0",
+        quaternary: "#dcebea",
+        light: "#fcfefe",
+        medium: "#e2efee",
+        accent: "#d5e7e6",
+        subtle: "#f4f9f9",
+        muted: "#cfe2e1",
+        neutral: "#e2efee",
+        base: "#fafdfd",
+        tableHeader: "#eef7f7",
+    },
+    background: {
+        50: "#ffffff",
+        100: "#fbfefe",
+        200: "#eef7f7",
+        300: "#e5f1f0",
+        400: "#dcebea",
+        500: "#d2e4e3",
+        600: "#bdd1d0",
+        700: "#96a9a8",
+        800: "#707f7e",
+        900: "#545f5e",
+    },
+    border: {
+        50: "#faffff",
+        100: "#edf5f5",
+        200: "#ddebea",
+        300: "#cde1e0",
+        400: "#bdd6d5",
+        500: "#accbc9",
+        600: "#99b7b5",
+        700: "#788f8e",
+        800: "#5b6e6d",
+        900: "#455453",
+    },
+    boxborder: {
+        50: "#faffff",
+        100: "#ecf4f4",
+        200: "#d9e7e6",
+        300: "#c6dad9",
+        400: "#b3cdcc",
+        500: "#a0c0be",
+        600: "#8dadab",
+        700: "#6e8786",
+        800: "#546867",
+        900: "#3f504f",
+    },
+    table: {
+        hover: {
+            50: "#fbfefe",
+            100: "#f0f7f7",
+            200: "#e6f1f0",
+            300: "#dceae9",
+            400: "#d2e3e2",
+            500: "#c8dcdb",
+            600: "#b4c7c6",
+            700: "#909f9e",
+            800: "#6c7776",
+            900: "#525b5b",
+        },
+    },
+    // 🌑 Sidebar (deep teal-black)
+    sidebar: {
+        background: {
+            50: "#eaf4f4",
+            100: "#cfe3e2",
+            200: "#3e6f6d",
+            300: "#5a8c8a",
+            400: "#2f5a58",
+            500: "#0e1f1e", // charcoal teal (instead of near-black)
+            600: "#0b1918",
+            700: "#081312",
+            800: "#060e0e",
+            900: "#040909",
+        },
+    },
+    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/zinc/palette.dark.d.ts

@@ -0,0 +1,204 @@
+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;
+        };
+    };
+    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;
+    };
+    gray: {
+        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;
+    };
+    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;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    accentText: string;
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: import("../..").SemanticColors;
+    red: import("../..").ColorScale;
+    orange: import("../..").ColorScale;
+    yellow: import("../..").ColorScale;
+    green: import("../..").ColorScale;
+    teal: import("../..").ColorScale;
+    blue: import("../..").ColorScale;
+    cyan: import("../..").ColorScale;
+    purple: import("../..").ColorScale;
+    pink: import("../..").ColorScale;
+    backgroundColor: import("../..").NamedSurfaces;
+    sidebar: {
+        background: import("../..").ColorScale;
+    };
+};
+export default palette;
+//# sourceMappingURL=palette.dark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAqLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}