pixelize-design-library 2.2.142 → 2.2.144

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.142",
+  "version": "2.2.144",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",