pixelize-design-library 2.2.143 → 2.2.145

package/dist/Theme/Skyline/palette.js

@@ -15,342 +15,107 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette_1 = __importDefault(require("../Default/palette"));
-var palette = __assign(__assign({}, palette_1.default), { primary: {
-        50: "#e3f2f9",
-        100: "#c5e4f3",
-        200: "#a2d4ec",
-        300: "#7ac1e4",
-        400: "#47a9da",
-        500: "#0088cc", // primary shade
-        600: "#007ab8",
-        700: "#006ba1",
-        800: "#005885",
-        900: "#003f5e",
-        opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
-        }
-    }, secondary: {
-        50: "#e8e8e9",
-        100: "#b7b8bb",
-        200: "#94989b",
-        300: "#63666d",
-        400: "#454951",
-        500: "#161b25", // secondary shade
-        600: "#141922",
-        700: "#10131a",
-        800: "#0c0f14",
-        900: "#090b10",
-        opacity: {
-            4: "#161b250a",
-            8: "#161b2514",
-            16: "#161b2529",
-            24: "#161b253d",
-            32: "#161b2552",
-            40: "#161b2566",
-            48: "#161b257a",
-        }
-    }, tertiary: {
-        50: "#e3f2f9",
-        100: "#c5e4f3",
-        200: "#a2d4ec",
-        300: "#7ac1e4",
-        400: "#47a9da",
-        500: "#0088cc", // primary shade
-        600: "#007ab8",
-        700: "#006ba1",
-        800: "#005885",
-        900: "#003f5e",
-        opacity: {
-            4: "#9A4FE50a",
-            8: "#9A4FE514",
-            16: "#9A4FE529",
-            24: "#9A4FE53d",
-            32: "#9A4FE552",
-            40: "#9A4FE566",
-            48: "#9A4FE57a",
-        }
-    }, transparent: "transparent", black: "#000", white: "#fff", semantic: {
-        success: {
-            50: "#e6f9f0",
-            100: "#c0f0d8",
-            200: "#8be6bb",
-            300: "#5bdb9e",
-            400: "#33d181",
-            500: "#00b768", // Main success color
-            600: "#00a05a",
-            700: "#00854b",
-            800: "#006b3c",
-            900: "#004c28",
-        },
-        error: {
-            50: "#ffe6e6",
-            100: "#fbbcbc",
-            200: "#f28f8f",
-            300: "#e66060",
-            400: "#db3a3a",
-            500: "#c21e1e", // Main error color
-            600: "#a01919",
-            700: "#7e1313",
-            800: "#5c0d0d",
-            900: "#3d0909",
-        },
-        warning: {
-            50: "#fff4e6",
-            100: "#ffe1b8",
-            200: "#ffcc85",
-            300: "#ffb653",
-            400: "#ffa31a",
-            500: "#ff8a00", // Main warning color
-            600: "#db7000",
-            700: "#b75800",
-            800: "#934300",
-            900: "#702f00",
-        },
-        info: {
-            50: "#e3f5ff",
-            100: "#b8e4ff",
-            200: "#85d1ff",
-            300: "#52bdff",
-            400: "#1fa9ff",
-            500: "#008df5", // Main info color
-            600: "#0077db",
-            700: "#005cb3",
-            800: "#004489",
-            900: "#002d5c",
-        },
-    }, gray: {
-        50: "#f7fafc",
-        100: "#edf2f7",
-        200: "#e2e8f0",
-        300: "#cbd5e0",
-        400: "#a0aec0",
-        500: "#718096",
-        600: "#4a5568",
-        700: "#2d3748",
-        800: "#1a202c",
-        900: "#171923",
-    }, red: {
-        50: "#fff5f5",
-        100: "#fed7d7",
-        200: "#feb2b2",
-        300: "#fc8181",
-        400: "#f56565",
-        500: "#e53e3e",
-        600: "#c53030",
-        700: "#9b2c2c",
-        800: "#822727",
-        900: "#63171b",
-    }, orange: {
-        50: "#fffaf0",
-        100: "#feebc8",
-        200: "#fbd38d",
-        300: "#f6ad55",
-        400: "#ed8936",
-        500: "#dd6b20",
-        600: "#c05621",
-        700: "#9c4221",
-        800: "#7b341e",
-        900: "#652b19",
-    }, yellow: {
-        50: "#fffff0",
-        100: "#fefcbf",
-        200: "#faf089",
-        300: "#f6e05e",
-        400: "#ecc94b",
-        500: "#d69e2e",
-        600: "#b7791f",
-        700: "#975a16",
-        800: "#744210",
-        900: "#5f370e",
-    }, green: {
-        50: "#f0fff4",
-        100: "#c6f6d5",
-        200: "#9ae6b4",
-        300: "#68d391",
-        400: "#48bb78",
-        500: "#38a169",
-        600: "#2f855a",
-        700: "#276749",
-        800: "#22543d",
-        900: "#1c4532",
-    }, teal: {
-        50: "#e6fffa",
-        100: "#b2f5ea",
-        200: "#81e6d9",
-        300: "#4fd1c5",
-        400: "#38b2ac",
-        500: "#319795",
-        600: "#2c7a7b",
-        700: "#285e61",
-        800: "#234e52",
-        900: "#1d4044",
-    }, blue: {
-        50: "#ebf8ff",
-        100: "#bee3f8",
-        200: "#90cdf4",
-        300: "#63b3ed",
-        400: "#4299e1",
-        500: "#3182ce",
-        600: "#2b6cb0",
-        700: "#2c5282",
-        800: "#2a4365",
-        900: "#1a365d",
-    }, cyan: {
-        50: "#edfdfd",
-        100: "#c4f1f9",
-        200: "#9decf9",
-        300: "#76e4f7",
-        400: "#0bc5ea",
-        500: "#00b5d8",
-        600: "#00a3c4",
-        700: "#0987a0",
-        800: "#086f83",
-        900: "#065666",
-    }, purple: {
-        50: "#faf5ff",
-        100: "#e9d8fd",
-        200: "#d6bcfa",
-        300: "#b794f4",
-        400: "#9f7aea",
-        500: "#805ad5",
-        600: "#6b46c1",
-        700: "#553c9a",
-        800: "#44337a",
-        900: "#322659",
-    }, pink: {
-        50: "#fff5f7",
-        100: "#fed7e2",
-        200: "#fbb6ce",
-        300: "#f687b3",
-        400: "#ed64a6",
-        500: "#d53f8c",
-        600: "#b83280",
-        700: "#97266d",
-        800: "#702459",
-        900: "#521b41",
+var buildBrandTokens_1 = require("../buildBrandTokens");
+var PRIMARY_500 = "#0088cc";
+var primary = {
+    50: "#e6f4fb",
+    100: "#cce9f7",
+    200: "#99d2ef",
+    300: "#66bbe6",
+    400: "#33a4de",
+    500: PRIMARY_500,
+    600: "#0077b3",
+    700: "#006399",
+    800: "#004f7a",
+    900: "#003a5c",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
+        50: "#f5f9fb",
+        100: "#e8f0f6",
+        200: "#d7e4ed",
+        300: "#b8cedc",
+        400: "#8aa8bd",
+        500: "#5f8299",
+        600: "#456178",
+        700: "#364d5f",
+        800: "#273845",
+        900: "#1a262f",
+    }, backgroundColor: {
+        main: "#f5f9fc",
+        secondary: "#eaf2f8",
+        tertiary: "#e2ecf4",
+        quaternary: "#d8e4ef",
+        light: "#fafcfe",
+        medium: "#e4edf4",
+        accent: "#dae6f1",
+        subtle: "#f2f7fb",
+        muted: "#cfdce8",
+        neutral: "#e2eaf1",
+        base: "#f9fbfd",
+        tableHeader: "#eaf2f8",
     }, background: {
         50: "#ffffff",
-        100: "#fefefe",
-        200: "#fdfdfd",
-        300: "#fcfcfc",
-        400: "#fcfcfc",
-        500: "#fbfbfb",
-        600: "#e4e4e4",
-        700: "#b2b2b2",
-        800: "#8a8a8a",
-        900: "#696969",
-    }, backgroundColor: {
-        main: "#f8f9fa", // Light greyish white
-        secondary: "#f1f1f1", // Very light grey
-        tertiary: "#ececec", // Soft grey
-        quaternary: "#e2e6ea", // Pale blueish-grey
-        light: "#fafafa", // Almost pure white
-        medium: "#eaeaea", // Medium light grey
-        accent: "#e5e5e5", // A slightly deeper grey
-        subtle: "#f5f6f7", // Slightly off-white with a cooler tone
-        muted: "#dfe3e6", // Light muted blue-grey
-        neutral: "#ebedef", // Neutral grey with a balanced tone
-    }, text: {
-        50: "#eeeff0",
-        100: "#cacccf",
-        200: "#b1b3b8",
-        300: "#8d9097",
-        400: "#777b83",
-        500: "#555a64",
-        600: "#4d525b",
-        700: "#3c4047",
-        800: "#2f3237",
-        900: "#24262a",
-    }, header: {
-        50: "#ecedec",
-        100: "#c5c6ca",
-        200: "#a9abb0",
-        300: "#81848c",
-        400: "#696b75",
-        500: "#434853",
-        600: "#3d424c",
-        700: "#30333b",
-        800: "#25282e",
-        900: "#1c1e23",
-    }, placeholder: {
-        50: "#f1f1f2",
-        100: "#d3d5d8",
-        200: "#bec0c5",
-        300: "#a0a3aa",
-        400: "#8d9199",
-        500: "#717680",
-        600: "#676b74",
-        700: "#50545b",
-        800: "#3e4146",
-        900: "#2f3236",
-    }, boxShadow: {
-        primary: "#9A52E247",
-        error: "#F2463A47",
-        default: "",
-    }, sidebar: {
-        background: {
-            50: "#f1f1f2",
-            100: "#d3d5d8",
-            200: "#bec0c5",
-            300: "#a0a3aa",
-            400: "#8d9199",
-            500: "#161B32",
-            600: "#676b74",
-            700: "#50545b",
-            800: "#3e4146",
-            900: "#2f3236",
-        }
-    }, boxborder: {
-        50: "#fbfbfb",
-        100: "#f2f3f4",
-        200: "#ecedee",
-        300: "#e4e5e7",
-        400: "#dee0e2",
-        500: "#d6d8db",
-        600: "#c3c5c7",
-        700: "#98999b",
-        800: "#767778",
-        900: "#5a5b5c",
+        100: "#fafcfe",
+        200: "#f2f7fb",
+        300: "#eaf2f8",
+        400: "#e3edf5",
+        500: "#dce7f1",
+        600: "#c5d4e0",
+        700: "#9aaab8",
+        800: "#74808d",
+        900: "#57616c",
     }, border: {
-        50: "#fdfdfd",
-        100: "#f8f8f8",
-        200: "#f4f4f4",
-        300: "#f0f0f0",
-        400: "#ededed",
-        500: "#e8e8e8",
-        600: "#d3d3d3",
-        700: "#a5a5a5",
-        800: "#808080",
-        900: "#616161",
+        50: "#fbfcfd",
+        100: "#f1f5f9",
+        200: "#eaeff4",
+        300: "#e2e9ef",
+        400: "#dce4eb",
+        500: "#d4dde6",
+        600: "#c0cad4",
+        700: "#96a0ab",
+        800: "#727a83",
+        900: "#575d64",
+    }, boxborder: {
+        50: "#fbfcfd",
+        100: "#f0f4f8",
+        200: "#e9eef3",
+        300: "#e1e7ee",
+        400: "#dae1e9",
+        500: "#d2dae3",
+        600: "#bec7d1",
+        700: "#949ca4",
+        800: "#70767c",
+        900: "#565a5f",
     }, table: {
         hover: {
-            50: "#fefefe",
-            100: "#fcfcfc",
-            200: "#fbfbfb",
-            300: "#f9f9f9",
-            400: "#f8f8f8",
-            500: "#f6f6f6",
-            600: "#e0e0e0",
-            700: "#afafaf",
-            800: "#878787",
-            900: "#676767",
-        }
-    }, disabled: {
-        50: "#fcfcfc",
-        100: "#f7f7f7",
-        200: "#f3f3f3",
-        300: "#ededed",
-        400: "#e9e9e9",
-        500: "#e4e4e4",
-        600: "#cfcfcf",
-        700: "#a2a2a2",
-        800: "#7d7d7d",
-        900: "#606060",
+            50: "#feffff",
+            100: "#f6fafd",
+            200: "#eff5fa",
+            300: "#e9f1f7",
+            400: "#e3edf5",
+            500: "#dde8f2",
+            600: "#c8d5e0",
+            700: "#9eabb8",
+            800: "#78828c",
+            900: "#5a636b",
+        },
+    }, sidebar: {
+        background: {
+            50: "#e8f0f7",
+            100: "#d3e2ee",
+            200: "#243646",
+            300: "#6d8aa3",
+            400: "#4a6578",
+            500: "#162534",
+            600: "#121f2b",
+            700: "#0e1822",
+            800: "#0a1219",
+            900: "#070c11",
+        },
+    }, boxShadow: {
+        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+        error: palette_1.default.boxShadow.error,
+        default: palette_1.default.boxShadow.default,
     } });
 exports.default = palette;

package/dist/Theme/buildBrandTokens.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Builds 8-digit hex alpha tokens from a 6-digit brand color (Chakra primary.500).
+ */
+export declare function normalizeHex(hex: string): string;
+export declare function buildPrimaryOpacity(primary500: string): {
+    4: string;
+    8: string;
+    16: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+};
+/** Tint used for focus rings / primary-tinted shadows (matches ~28% alpha pattern). */
+export declare function buildPrimaryShadowTint(primary500: string): string;

package/dist/Theme/buildBrandTokens.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeHex = normalizeHex;
+exports.buildPrimaryOpacity = buildPrimaryOpacity;
+exports.buildPrimaryShadowTint = buildPrimaryShadowTint;
+/**
+ * Builds 8-digit hex alpha tokens from a 6-digit brand color (Chakra primary.500).
+ */
+function normalizeHex(hex) {
+    var trimmed = hex.trim();
+    var withHash = trimmed.startsWith("#") ? trimmed : "#".concat(trimmed);
+    if (!/^#[0-9a-fA-F]{6}$/.test(withHash)) {
+        throw new Error("Invalid hex color (expected #RRGGBB): ".concat(hex));
+    }
+    return withHash.toLowerCase();
+}
+function buildPrimaryOpacity(primary500) {
+    var h = normalizeHex(primary500);
+    return {
+        4: "".concat(h, "0a"),
+        8: "".concat(h, "14"),
+        16: "".concat(h, "29"),
+        24: "".concat(h, "3d"),
+        32: "".concat(h, "52"),
+        40: "".concat(h, "66"),
+        48: "".concat(h, "7a"),
+    };
+}
+/** Tint used for focus rings / primary-tinted shadows (matches ~28% alpha pattern). */
+function buildPrimaryShadowTint(primary500) {
+    var h = normalizeHex(primary500);
+    return "".concat(h, "47");
+}

package/dist/Theme/buildBrandTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Theme/buildBrandTokens.test.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var buildBrandTokens_1 = require("./buildBrandTokens");
+describe("normalizeHex", function () {
+    it("adds hash and lowercases", function () {
+        expect((0, buildBrandTokens_1.normalizeHex)("9A4FE5")).toBe("#9a4fe5");
+        expect((0, buildBrandTokens_1.normalizeHex)("#2CAA3D")).toBe("#2caa3d");
+    });
+    it("rejects invalid hex", function () {
+        expect(function () { return (0, buildBrandTokens_1.normalizeHex)("gggggg"); }).toThrow(/Invalid hex/);
+        expect(function () { return (0, buildBrandTokens_1.normalizeHex)("#fff"); }).toThrow(/Invalid hex/);
+    });
+});
+describe("buildPrimaryOpacity", function () {
+    it("appends alpha steps to brand hex", function () {
+        expect((0, buildBrandTokens_1.buildPrimaryOpacity)("#2caa3d")).toEqual({
+            4: "#2caa3d0a",
+            8: "#2caa3d14",
+            16: "#2caa3d29",
+            24: "#2caa3d3d",
+            32: "#2caa3d52",
+            40: "#2caa3d66",
+            48: "#2caa3d7a",
+        });
+    });
+});
+describe("buildPrimaryShadowTint", function () {
+    it("returns 8-digit hex with shadow alpha", function () {
+        expect((0, buildBrandTokens_1.buildPrimaryShadowTint)("#0088cc")).toBe("#0088cc47");
+    });
+});

package/dist/Theme/themeProps.d.ts

@@ -366,6 +366,8 @@ export type CustomThemeProps = {
             subtle: string;
             muted: string;
             neutral: string;
+            base: string;
+            tableHeader: string;
         };
     };
     fonts: ChakraTheme["fonts"] & {

package/dist/global.css

@@ -1,21 +1,22 @@
 :root {
-    --color-primary-50: #ecddfb;
-    --color-primary-100: #d6b7f6;
-    --color-primary-200: #be8ef0;
-    --color-primary-300: #aa6ae9;
-    --color-primary-400: #944cde;
-    --color-primary-500: #9A4FE5;
-    --color-primary-600: #8b48d8;
-    --color-primary-700: #7a3ccc;
-    --color-primary-800: #6933b2;
-    --color-primary-900: #59299a;
-
-    --color-primary-opacity-8: rgba(154, 82, 226, 0.08);
-    --color-primary-opacity-16: rgba(154, 82, 226, 0.16);
-    --color-primary-opacity-24: rgba(154, 82, 226, 0.24);
-    --color-primary-opacity-28: rgba(154, 82, 226, 0.28);
-    --color-primary-opacity-32: rgba(154, 82, 226, 0.32);
-    --color-primary-opacity-40: rgba(154, 82, 226, 0.40);
+    /* Aligned with Theme/Default (lavender) primary ramp */
+    --color-primary-50: #f5edfc;
+    --color-primary-100: #e0c8f7;
+    --color-primary-200: #d1aef3;
+    --color-primary-300: #bb89ee;
+    --color-primary-400: #ae72ea;
+    --color-primary-500: #9a4fe5;
+    --color-primary-600: #8c48d0;
+    --color-primary-700: #6d38a3;
+    --color-primary-800: #55277e;
+    --color-primary-900: #412160;
+
+    --color-primary-opacity-8: rgba(154, 79, 229, 0.08);
+    --color-primary-opacity-16: rgba(154, 79, 229, 0.16);
+    --color-primary-opacity-24: rgba(154, 79, 229, 0.24);
+    --color-primary-opacity-28: rgba(154, 79, 229, 0.28);
+    --color-primary-opacity-32: rgba(154, 79, 229, 0.32);
+    --color-primary-opacity-40: rgba(154, 79, 229, 0.4);
 
     --color-success-50: #e9fdf1;
     --color-success-100: #c8f7d8;
@@ -223,3 +224,16 @@
     --color-success-500: #319795;
     --color-error-500: #d53f8c;
 }
+
+/* Optional: align CSS variables with Chakra named themes when `data-theme` is set on a wrapper */
+[data-theme="meadow"] {
+    --color-primary-500: #2caa3d;
+}
+
+[data-theme="radiant"] {
+    --color-primary-500: #fb8c00;
+}
+
+[data-theme="skyline"] {
+    --color-primary-500: #0088cc;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.143",
+  "version": "2.2.145",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",