pixelize-design-library 2.2.152 → 2.2.154

package/dist/Theme/Radiant/palette.js

@@ -16,102 +16,108 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette_1 = __importDefault(require("../Default/palette"));
 var buildBrandTokens_1 = require("../buildBrandTokens");
-var PRIMARY_500 = "#c9653f"; // slightly darker + warmer terracotta
+var PRIMARY_500 = "#cf4e3a"; // warm red (terracotta leaning)
 var primary = {
-    50: "#fceee8",
-    100: "#f6d4c3",
-    200: "#eea98e",
-    300: "#e57f5a",
-    400: "#d8653f",
-    500: PRIMARY_500, // #c9653f
-    600: "#b35433",
-    700: "#924129",
-    800: "#70301d",
-    900: "#4f2012",
+    50: "#fdf1ee",
+    100: "#f8d3cc",
+    200: "#f1a69a",
+    300: "#e97969",
+    400: "#dc5d4d",
+    500: PRIMARY_500,
+    600: "#b84533",
+    700: "#983628",
+    800: "#75281e",
+    900: "#531a14",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
-var palette = __assign(__assign({}, palette_1.default), { primary: primary, gray: {
-        50: "#f7f7f6",
-        100: "#eeeeec",
-        200: "#dddcd9",
-        300: "#c6c4c0",
-        400: "#a9a7a2",
-        500: "#8a8883",
-        600: "#6a6863",
-        700: "#504e49",
-        800: "#373530",
-        900: "#24221e",
-    }, backgroundColor: {
-        main: "#f8f3ee",
-        secondary: "#f1e6dc",
-        tertiary: "#e9dbcf",
-        quaternary: "#e1cfc2",
-        light: "#fdfaf7",
-        medium: "#e6d6c9",
-        accent: "#dcc6b7",
-        subtle: "#f5eee7",
-        muted: "#d6c0b0",
-        neutral: "#e6d6c9",
-        base: "#fbf8f5",
-        tableHeader: "#f1e6dc",
+var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+    // 🌫️ Neutral gray (slightly warm, not pink)
+    gray: {
+        50: "#f8f6f5",
+        100: "#efeae7",
+        200: "#e2dad5",
+        300: "#cec2bb",
+        400: "#b3a39a",
+        500: "#928077",
+        600: "#6e6058",
+        700: "#534841",
+        800: "#39312c",
+        900: "#27211d",
+    }, 
+    // 🧴 Warm background system (subtle red undertone)
+    backgroundColor: {
+        main: "#fdf8f6",
+        secondary: "#f6ebe7",
+        tertiary: "#efdfd9",
+        quaternary: "#e8d3cc",
+        light: "#fffafa",
+        medium: "#ecdcd6",
+        accent: "#e2cbc3",
+        subtle: "#fbf4f1",
+        muted: "#d9c2ba",
+        neutral: "#ecdcd6",
+        base: "#fefbfa",
+        tableHeader: "#f6ebe7",
     }, background: {
         50: "#ffffff",
-        100: "#fcf8f4",
-        200: "#f4ece4",
-        300: "#ede3da",
-        400: "#e6dacf",
-        500: "#decfc3",
-        600: "#cbbcae",
-        700: "#a19386",
-        800: "#7a6d63",
-        900: "#5c534c",
+        100: "#fdf9f7",
+        200: "#f6ebe7",
+        300: "#efdfd9",
+        400: "#e8d3cc",
+        500: "#e0c7bf",
+        600: "#cab2aa",
+        700: "#a38f88",
+        800: "#7c6c66",
+        900: "#5e514c",
     }, border: {
-        50: "#fefcfb",
-        100: "#f4ede6",
-        200: "#ebdfd5",
-        300: "#e2d3c8",
-        400: "#d9c7bb",
-        500: "#cfb9ac",
-        600: "#b9a99c",
-        700: "#91857c",
-        800: "#6f655e",
-        900: "#544c46",
+        50: "#fffafa",
+        100: "#f6ede9",
+        200: "#eddeda",
+        300: "#e4cfc9",
+        400: "#dbc0b9",
+        500: "#d1b1a9",
+        600: "#bda098",
+        700: "#94817b",
+        800: "#70635e",
+        900: "#564b47",
     }, boxborder: {
-        50: "#fefcfb",
-        100: "#f3ece6",
-        200: "#e9dfd6",
-        300: "#dfd3c9",
-        400: "#d5c7bc",
-        500: "#cabaae",
-        600: "#b5a79b",
-        700: "#8e837b",
-        800: "#6c625c",
-        900: "#524a44",
+        50: "#fffafa",
+        100: "#f5ece8",
+        200: "#ebdbd6",
+        300: "#e1cbc5",
+        400: "#d7bbb4",
+        500: "#cdaaa3",
+        600: "#b99993",
+        700: "#907a75",
+        800: "#6d5e5a",
+        900: "#534844",
     }, table: {
         hover: {
             50: "#fffefe",
-            100: "#f8f2ec",
-            200: "#f1e7df",
-            300: "#eadfd6",
-            400: "#e3d6cc",
-            500: "#dccdc2",
-            600: "#c8b9ac",
-            700: "#9f948a",
-            800: "#787069",
-            900: "#5b5550",
+            100: "#faf2ef",
+            200: "#f4e6e1",
+            300: "#eedad4",
+            400: "#e7cdc6",
+            500: "#e1c1b9",
+            600: "#caaea6",
+            700: "#a28d87",
+            800: "#7b6e69",
+            900: "#5d5450",
         },
-    }, sidebar: {
+    }, 
+    // 🌑 Sidebar (deep warm red-brown)
+    sidebar: {
         background: {
-            50: "#efe6df",
-            100: "#dcc8bb",
-            200: "#6f5546",
-            300: "#8e6d5c",
-            400: "#5d4436",
-            500: "#160d08", // deeper espresso tone
-            600: "#120a06",
-            700: "#0d0704",
-            800: "#090503",
-            900: "#050302",
+            50: "#f3e9e6",
+            100: "#e0c9c2",
+            200: "#7a5147",
+            300: "#9a6a5f",
+            400: "#5e3c34",
+            500: "#170c09", // deep warm red-black
+            600: "#120906",
+            700: "#0d0604",
+            800: "#090403",
+            900: "#050201",
         },
     }, boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),

package/dist/Theme/Rosewood/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;
+        };
+    };
+    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;

package/dist/Theme/Rosewood/palette.js

@@ -0,0 +1,127 @@
+"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 = "#d16a7e"; // muted warm rose (not neon pink)
+var primary = {
+    50: "#fdf2f5",
+    100: "#f9d6de",
+    200: "#f2aaba",
+    300: "#ea7f96",
+    400: "#de627d",
+    500: PRIMARY_500,
+    600: "#b9556b",
+    700: "#984558",
+    800: "#763646",
+    900: "#552634",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+    // 🌫️ Neutral gray (slightly warm, avoids purple tint)
+    gray: {
+        50: "#f9f7f7",
+        100: "#f1ecec",
+        200: "#e4dada",
+        300: "#d0c1c1",
+        400: "#b4a2a2",
+        500: "#927f7f",
+        600: "#6e5e5e",
+        700: "#534747",
+        800: "#3a3030",
+        900: "#272020",
+    }, 
+    // 🌸 Background system (soft rose tint)
+    backgroundColor: {
+        main: "#fdf8fa",
+        secondary: "#f6ecef",
+        tertiary: "#efe0e5",
+        quaternary: "#e8d4db",
+        light: "#fffafb",
+        medium: "#ecd9df",
+        accent: "#e2c7cf",
+        subtle: "#fbf4f7",
+        muted: "#d9bfc6",
+        neutral: "#ecd9df",
+        base: "#fefbfd",
+        tableHeader: "#f6ecef",
+    }, background: {
+        50: "#ffffff",
+        100: "#fdf9fb",
+        200: "#f6ecef",
+        300: "#efe0e5",
+        400: "#e8d4db",
+        500: "#e0c8d0",
+        600: "#cab3bc",
+        700: "#a38f97",
+        800: "#7c6b73",
+        900: "#5e5157",
+    }, border: {
+        50: "#fffafb",
+        100: "#f6edef",
+        200: "#eddcdf",
+        300: "#e4ccd0",
+        400: "#dbbcc1",
+        500: "#d1acb2",
+        600: "#bd9aa0",
+        700: "#948086",
+        800: "#706266",
+        900: "#564a4d",
+    }, boxborder: {
+        50: "#fffafb",
+        100: "#f5ecef",
+        200: "#ebdade",
+        300: "#e1c9ce",
+        400: "#d7b9bf",
+        500: "#cda8af",
+        600: "#b9979e",
+        700: "#90777f",
+        800: "#6d5a61",
+        900: "#534347",
+    }, table: {
+        hover: {
+            50: "#fffefe",
+            100: "#faf2f5",
+            200: "#f4e6ea",
+            300: "#eedadf",
+            400: "#e7cdd4",
+            500: "#e1c1c9",
+            600: "#caaeb6",
+            700: "#a28d94",
+            800: "#7b6e73",
+            900: "#5d5457",
+        },
+    }, 
+    // 🌑 Sidebar (charcoal rose, not black)
+    sidebar: {
+        background: {
+            50: "#f3eaed",
+            100: "#e0c9cf",
+            200: "#7a4f57",
+            300: "#9a6a73",
+            400: "#5e3a41",
+            500: "#1a1013", // rose-tinted charcoal
+            600: "#140c0e",
+            700: "#0f0809",
+            800: "#0a0506",
+            900: "#060303",
+        },
+    }, 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/Rosewood/theme.d.ts

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