pixelize-design-library 2.2.146 → 2.2.148

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

@@ -0,0 +1,370 @@
+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

@@ -0,0 +1,121 @@
+"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

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

package/dist/Theme/Slate/theme.js

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

@@ -2,10 +2,12 @@ import lavender from "./Default/theme";
 import meadow from "./Meadow/theme";
 import radiant from "./Radiant/theme";
 import skyline from "./Skyline/theme";
-export { skyline, meadow, radiant, lavender };
+import slate from "./Slate/theme";
+export { skyline, meadow, radiant, lavender, slate };
 export declare const ThemesList: {
     skyline: Record<string, any>;
     meadow: Record<string, any>;
     radiant: Record<string, any>;
     lavender: Record<string, any>;
+    slate: Record<string, any>;
 };

package/dist/Theme/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemesList = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
+exports.ThemesList = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
 var theme_1 = __importDefault(require("./Default/theme"));
 exports.lavender = theme_1.default;
 var theme_2 = __importDefault(require("./Meadow/theme"));
@@ -12,9 +12,12 @@ var theme_3 = __importDefault(require("./Radiant/theme"));
 exports.radiant = theme_3.default;
 var theme_4 = __importDefault(require("./Skyline/theme"));
 exports.skyline = theme_4.default;
+var theme_5 = __importDefault(require("./Slate/theme"));
+exports.slate = theme_5.default;
 exports.ThemesList = {
     skyline: theme_4.default,
     meadow: theme_2.default,
     radiant: theme_3.default,
     lavender: theme_1.default,
+    slate: theme_5.default,
 };

package/dist/Theme/theme.d.ts

@@ -1,2 +1,2 @@
-export type ThemeName = 'skyline' | 'midnight' | 'sunset' | 'lavender';
+export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate";
 export declare const themes: Record<ThemeName, string>;

package/dist/Theme/theme.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themes = void 0;
 exports.themes = {
-    skyline: 'skyline',
-    midnight: 'midnight',
-    sunset: 'sunset',
-    lavender: 'lavender',
+    lavender: "lavender",
+    meadow: "meadow",
+    radiant: "radiant",
+    skyline: "skyline",
+    slate: "slate",
 };

package/dist/global.css

@@ -237,3 +237,7 @@
 [data-theme="skyline"] {
     --color-primary-500: #0088cc;
 }
+
+[data-theme="slate"] {
+    --color-primary-500: #475569;
+}

package/package.json

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