pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Theme/Slate/palette.d.ts

@@ -1,370 +0,0 @@
-declare const palette: {
-    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;

package/dist/Theme/Slate/palette.js

@@ -1,121 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var palette_1 = __importDefault(require("../Default/palette"));
-var buildBrandTokens_1 = require("../buildBrandTokens");
-var PRIMARY_500 = "#6b7280"; // was #475569 — pure neutral gray, no blue cast
-var 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),
-};
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
-        50: "#f9fafb",
-        100: "#f3f4f6",
-        200: "#e5e7eb",
-        300: "#d1d5db",
-        400: "#9ca3af",
-        500: "#6b7280",
-        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_1.default.boxShadow.error,
-        default: palette_1.default.boxShadow.default,
-    } });
-exports.default = palette;

package/dist/Theme/Slate/theme.d.ts

@@ -1,2 +0,0 @@
-declare const _default: Record<string, any>;
-export default _default;

package/dist/Theme/Slate/theme.js

@@ -1,23 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var palette_1 = __importDefault(require("./palette"));
-var fonts_1 = __importDefault(require("../fonts"));
-var common_1 = __importDefault(require("../common"));
-var componentStyles_1 = require("../componentStyles");
-var slate = __assign(__assign(__assign({}, fonts_1.default), { colors: palette_1.default }), common_1.default);
-exports.default = (0, react_1.extendTheme)(__assign(__assign({}, slate), { components: componentStyles_1.componentStyles }));

package/dist/Theme/buildBrandTokens.d.ts

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-"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.js

@@ -1,31 +0,0 @@
-"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/chartColorsFromTheme.d.ts

@@ -1,18 +0,0 @@
-import type { CustomThemeProps } from "./themeProps";
-export type ThemeColorPalette = CustomThemeProps["colors"];
-/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
-export declare function getDefaultSeriesColors(colors: ThemeColorPalette): string[];
-export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleStyle?: {
-    color?: string;
-    fontSize?: string;
-    fontWeight?: number | string;
-    fontFamily?: string;
-}): {
-    color: string;
-    fontSize: string;
-    fontWeight: number | string;
-    fontFamily: string;
-};
-export declare function chartAxisLabelColor(colors: ThemeColorPalette): string;
-export declare function chartTooltipBackground(colors: ThemeColorPalette): string;
-export declare function chartTooltipForeground(colors: ThemeColorPalette): string;

package/dist/Theme/chartColorsFromTheme.js

@@ -1,39 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultSeriesColors = getDefaultSeriesColors;
-exports.mergeChartTitleStyle = mergeChartTitleStyle;
-exports.chartAxisLabelColor = chartAxisLabelColor;
-exports.chartTooltipBackground = chartTooltipBackground;
-exports.chartTooltipForeground = chartTooltipForeground;
-/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
-function getDefaultSeriesColors(colors) {
-    return [
-        colors.primary[500],
-        colors.semantic.error[500],
-        colors.semantic.success[500],
-        colors.orange[500],
-    ];
-}
-function mergeChartTitleStyle(colors, titleStyle) {
-    return __assign({ fontSize: "16px", fontWeight: 600, fontFamily: "Arial", color: colors.primary[500] }, titleStyle);
-}
-function chartAxisLabelColor(colors) {
-    return colors.gray[700];
-}
-function chartTooltipBackground(colors) {
-    return colors.gray[700];
-}
-function chartTooltipForeground(colors) {
-    return colors.white;
-}

package/dist/Theme/chartColorsFromTheme.test.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var chartColorsFromTheme_1 = require("./chartColorsFromTheme");
-var mockColors = {
-    primary: { 500: "#111111" },
-    semantic: {
-        error: { 500: "#222222" },
-        success: { 500: "#333333" },
-    },
-    orange: { 500: "#444444" },
-    gray: { 700: "#555555" },
-    white: "#ffffff",
-};
-describe("chartColorsFromTheme", function () {
-    it("getDefaultSeriesColors returns four theme hues", function () {
-        expect((0, chartColorsFromTheme_1.getDefaultSeriesColors)(mockColors)).toEqual([
-            "#111111",
-            "#222222",
-            "#333333",
-            "#444444",
-        ]);
-    });
-    it("mergeChartTitleStyle applies primary then overrides", function () {
-        expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { fontSize: "20px" })).toMatchObject({
-            color: "#111111",
-            fontSize: "20px",
-            fontWeight: 600,
-            fontFamily: "Arial",
-        });
-        expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { color: "#999999" }).color).toBe("#999999");
-    });
-    it("chartAxisLabelColor reads gray scale", function () {
-        expect((0, chartColorsFromTheme_1.chartAxisLabelColor)(mockColors)).toBe("#555555");
-    });
-});