pixelize-design-library 2.2.147 → 2.2.148

package/dist/Theme/Default/palette.js

@@ -1,372 +1,314 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var palette = {
-    primary: {
-        50: "#f5edfc",
-        100: "#e0c8f7",
-        200: "#d1aef3",
-        300: "#bb89ee",
-        400: "#ae72ea",
-        500: "#9A4FE5", // primary shade
-        600: "#8c48d0",
-        700: "#6d38a3",
-        800: "#55277e",
-        900: "#412160",
-        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: "#e8e8e9",
-        100: "#b7b8bb",
-        200: "#94989b",
-        300: "#63666d",
-        400: "#454951",
-        500: "#161b25", // tertiary shade
-        600: "#141922",
-        700: "#10131a",
-        800: "#0c0f14",
-        900: "#090b10",
-        opacity: {
-            4: "#161b250a",
-            8: "#161b2514",
-            16: "#161b2529",
-            24: "#161b253d",
-            32: "#161b2552",
-            40: "#161b2566",
-            48: "#161b257a",
+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 });
+var buildBrandTokens_1 = require("../buildBrandTokens");
+var PRIMARY_500 = "#8B3FC8";
+var SECONDARY_ANCHOR = "#1e0f30";
+var primary = {
+    50: "#f7edfc",
+    100: "#eacff7",
+    200: "#d4a0ef",
+    300: "#bc70e6",
+    400: "#a552db",
+    500: PRIMARY_500,
+    600: "#7632b0",
+    700: "#5e2789",
+    800: "#481d69",
+    900: "#33154c",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+var secondary = {
+    50: "#ede8f5",
+    100: "#d4c8e8",
+    200: "#b3a0d4",
+    300: "#8a6aaa",
+    400: "#6b4d8a",
+    500: SECONDARY_ANCHOR,
+    600: "#180b26",
+    700: "#12081c",
+    800: "#0d0514",
+    900: "#08030b",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(SECONDARY_ANCHOR),
+};
+var tertiary = __assign({}, secondary);
+var semantic = {
+    success: {
+        50: "#e9f8ef",
+        100: "#bbe9cc",
+        200: "#9adeb4",
+        300: "#6ccf92",
+        400: "#4fc67d",
+        500: "#23b85c",
+        600: "#20a754",
+        700: "#198341",
+        800: "#136533",
+        900: "#0f4d27",
     },
-    transparent: "transparent",
-    black: "#000",
-    white: "#fff",
-    semantic: {
-        success: {
-            50: "#e9f8ef",
-            100: "#bbe9cc",
-            200: "#9adeb4",
-            300: "#6ccf92",
-            400: "#4fc67d",
-            500: "#23b85c", // Main success color
-            600: "#20a754",
-            700: "#198341",
-            800: "#136533",
-            900: "#0f4d27",
-        },
-        error: {
-            50: "#feedeb",
-            100: "#fbc6c2",
-            200: "#f9aaa4",
-            300: "#f6837b",
-            400: "#f56b61",
-            500: "#f2463a", // Main error color
-            600: "#dc4035",
-            700: "#ac3229",
-            800: "#852720",
-            900: "#661d18",
-        },
-        warning: {
-            50: "#fff4ef",
-            100: "#ffddce",
-            200: "#ffccb7",
-            300: "#ffb596",
-            400: "#ffa781",
-            500: "#ff9162", // Main warning color
-            600: "#e88459",
-            700: "#b56746",
-            800: "#8c5036",
-            900: "#6b3d29",
-        },
-        info: {
-            50: "#eff9fc",
-            100: "#cdedf5",
-            200: "#b5e4f0",
-            300: "#94d7e9",
-            400: "#7fd0e5",
-            500: "#5fc4de", // Main info color
-            600: "#56b2ea",
-            700: "#438b9e",
-            800: "#346c78",
-            900: "#28525d",
-        },
-    },
-    gray: {
-        50: "#f7fafc",
-        100: "#edf2f7",
-        200: "#e2e8f0",
-        300: "#cbd5e0",
-        400: "#a0aec0",
-        500: "#718096",
-        600: "#4a5568",
-        700: "#2d3748",
-        800: "#1a202c",
-        900: "#171923",
-    },
-    red: {
+    error: {
         50: "#feedeb",
         100: "#fbc6c2",
         200: "#f9aaa4",
         300: "#f6837b",
         400: "#f56b61",
-        500: "#f2463a", // Main error color
+        500: "#f2463a",
         600: "#dc4035",
         700: "#ac3229",
         800: "#852720",
         900: "#661d18",
     },
-    orange: {
+    warning: {
         50: "#fff4ef",
         100: "#ffddce",
         200: "#ffccb7",
         300: "#ffb596",
         400: "#ffa781",
-        500: "#ff9162", // Main warning color
+        500: "#ff9162",
         600: "#e88459",
         700: "#b56746",
         800: "#8c5036",
         900: "#6b3d29",
     },
-    yellow: {
-        50: "#fefbec",
-        100: "#fdf1c5",
-        200: "#fbeba9",
-        300: "#fae281",
-        400: "#f9dc69",
-        500: "#f7d343",
-        600: "#e1c03d",
-        700: "#af9630",
-        800: "#887425",
-        900: "#68591c",
-    },
-    green: {
-        50: "#e9f8ef",
-        100: "#bbe9cc",
-        200: "#9adeb4",
-        300: "#6ccf92",
-        400: "#4fc67d",
-        500: "#23b85c", // Main success color
-        600: "#20a754",
-        700: "#198341",
-        800: "#136533",
-        900: "#0f4d27",
-    },
-    teal: {
+    info: {
         50: "#eff9fc",
         100: "#cdedf5",
         200: "#b5e4f0",
         300: "#94d7e9",
         400: "#7fd0e5",
-        500: "#5fc4de", // Main info color
+        500: "#5fc4de",
         600: "#56b2ea",
         700: "#438b9e",
         800: "#346c78",
         900: "#28525d",
     },
-    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 gray = {
+    50: "#f9f7fb",
+    100: "#f0eaf6",
+    200: "#e4d9f0",
+    300: "#cdbde3",
+    400: "#a897cc",
+    500: "#7d6ea0",
+    600: "#5e527a",
+    700: "#4a4060",
+    800: "#342d45",
+    900: "#221e2e",
+};
+// These global color scales stay unchanged — they are
+// utility palettes, not theme-specific
+var red = {
+    50: "#feedeb", 100: "#fbc6c2", 200: "#f9aaa4", 300: "#f6837b",
+    400: "#f56b61", 500: "#f2463a", 600: "#dc4035", 700: "#ac3229",
+    800: "#852720", 900: "#661d18",
+};
+var orange = {
+    50: "#fff4ef", 100: "#ffddce", 200: "#ffccb7", 300: "#ffb596",
+    400: "#ffa781", 500: "#ff9162", 600: "#e88459", 700: "#b56746",
+    800: "#8c5036", 900: "#6b3d29",
+};
+var yellow = {
+    50: "#fefbec", 100: "#fdf1c5", 200: "#fbeba9", 300: "#fae281",
+    400: "#f9dc69", 500: "#f7d343", 600: "#e1c03d", 700: "#af9630",
+    800: "#887425", 900: "#68591c",
+};
+var green = {
+    50: "#e9f8ef", 100: "#bbe9cc", 200: "#9adeb4", 300: "#6ccf92",
+    400: "#4fc67d", 500: "#23b85c", 600: "#20a754", 700: "#198341",
+    800: "#136533", 900: "#0f4d27",
+};
+var teal = {
+    50: "#eff9fc", 100: "#cdedf5", 200: "#b5e4f0", 300: "#94d7e9",
+    400: "#7fd0e5", 500: "#5fc4de", 600: "#56b2ea", 700: "#438b9e",
+    800: "#346c78", 900: "#28525d",
+};
+var blue = {
+    50: "#ebf8ff", 100: "#bee3f8", 200: "#90cdf4", 300: "#63b3ed",
+    400: "#4299e1", 500: "#3182ce", 600: "#2b6cb0", 700: "#2c5282",
+    800: "#2a4365", 900: "#1a365d",
+};
+var cyan = {
+    50: "#edfdfd", 100: "#c4f1f9", 200: "#9decf9", 300: "#76e4f7",
+    400: "#0bc5ea", 500: "#00b5d8", 600: "#00a3c4", 700: "#0987a0",
+    800: "#086f83", 900: "#065666",
+};
+var purple = {
+    50: "#faf5ff", 100: "#e9d8fd", 200: "#d6bcfa", 300: "#b794f4",
+    400: "#9f7aea", 500: "#805ad5", 600: "#6b46c1", 700: "#553c9a",
+    800: "#44337a", 900: "#322659",
+};
+var pink = {
+    50: "#fff5f7", 100: "#fed7e2", 200: "#fbb6ce", 300: "#f687b3",
+    400: "#ed64a6", 500: "#d53f8c", 600: "#b83280", 700: "#97266d",
+    800: "#702459", 900: "#521b41",
+};
+var backgroundColor = {
+    main: "#f9f7fc",
+    secondary: "#f2edf8",
+    tertiary: "#ebe3f4",
+    quaternary: "#e2d8ef",
+    light: "#fdfcfe",
+    medium: "#e8e0f2",
+    accent: "#e0d5ed",
+    subtle: "#f5f1fa",
+    muted: "#d8cde8",
+    neutral: "#e8e2f2",
+    base: "#fbfafd",
+    tableHeader: "#f2edf8",
+};
+var background = {
+    50: "#ffffff",
+    100: "#fdfcfe",
+    200: "#f8f5fc",
+    300: "#f2edf8",
+    400: "#ede6f4",
+    500: "#e7def0",
+    600: "#d2c8de",
+    700: "#a59ab0",
+    800: "#7c7386",
+    900: "#5e5867",
+};
+var text = {
+    50: "#f0eef5",
+    100: "#d4cee6",
+    200: "#bcb4d9",
+    300: "#9890c4",
+    400: "#8278b5",
+    500: "#5f5490",
+    600: "#564c83",
+    700: "#433b66",
+    800: "#332d4f",
+    900: "#26213c",
+};
+var header = {
+    50: "#edeaf4",
+    100: "#cdc8e2",
+    200: "#b4aed4",
+    300: "#9488be",
+    400: "#7e70b2",
+    500: "#5e5196",
+    600: "#564a89",
+    700: "#433a6b",
+    800: "#332d52",
+    900: "#26223f",
+};
+var placeholder = {
+    50: "#f2f0f7",
+    100: "#d8d3ea",
+    200: "#c4bde0",
+    300: "#a89ed0",
+    400: "#9690c5",
+    500: "#7a72b0",
+    600: "#6f68a0",
+    700: "#56507d",
+    800: "#423e60",
+    900: "#322f4a",
+};
+var boxShadow = {
+    primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+    error: "#F2463A47",
+    default: "#00000033",
+};
+var sidebar = {
     background: {
-        50: "#ffffff",
-        100: "#fefefe",
-        200: "#fdfdfd",
-        300: "#fcfcfc",
-        400: "#fcfcfc",
-        500: "#fbfbfb",
-        600: "#e4e4e4",
-        700: "#b2b2b2",
-        800: "#8a8a8a",
-        900: "#696969",
-    },
-    backgroundColor: {
-        main: "#f8f9fa",
-        secondary: "#f1f1f1",
-        tertiary: "#ececec",
-        quaternary: "#e2e6ea",
-        light: "#fafafa",
-        medium: "#eaeaea",
-        accent: "#e5e5e5",
-        subtle: "#f5f6f7",
-        muted: "#dfe3e6",
-        neutral: "#ebedef",
-        base: "#FBFBFB",
-        tableHeader: "#F6F6F6",
+        50: "#e9eaf0",
+        100: "#d4d6e0",
+        200: "#212747",
+        300: "#7d84a2",
+        400: "#525b83",
+        500: "#161B32",
+        600: "#12162a",
+        700: "#0e1221",
+        800: "#0a0d19",
+        900: "#060911",
     },
-    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: "#00000033",
-    },
-    sidebar: {
-        background: {
-            50: "#e9eaf0",
-            100: "#d4d6e0",
-            200: "#212747",
-            300: "#7d84a2",
-            400: "#525b83",
-            500: "#161B32",
-            600: "#12162a",
-            700: "#0e1221",
-            800: "#0a0d19",
-            900: "#060911",
-        }
-    },
-    boxborder: {
-        50: "#fbfbfb",
-        100: "#f2f3f4",
-        200: "#ecedee",
-        300: "#e4e5e7",
-        400: "#dee0e2",
-        500: "#d6d8db",
-        600: "#c3c5c7",
-        700: "#98999b",
-        800: "#767778",
-        900: "#5a5b5c",
-    },
-    border: {
-        50: "#fdfdfd",
-        100: "#f8f8f8",
-        200: "#f4f4f4",
-        300: "#f0f0f0",
-        400: "#ededed",
-        500: "#e8e8e8",
-        600: "#d3d3d3",
-        700: "#a5a5a5",
-        800: "#808080",
-        900: "#616161",
-    },
-    table: {
-        hover: {
-            50: "#fefefe",
-            100: "#fcfcfc",
-            200: "#fbfbfb",
-            300: "#f9f9f9",
-            400: "#f8f8f8",
-            500: "#f6f6f6",
-            600: "#e0e0e0",
-            700: "#afafaf",
-            800: "#878787",
-            900: "#676767",
-        }
+};
+var boxborder = {
+    50: "#fefefe",
+    100: "#f5f3f9",
+    200: "#ece8f3",
+    300: "#e3deed",
+    400: "#dad4e8",
+    500: "#d1c9e2",
+    600: "#bdb5cf",
+    700: "#918ba1",
+    800: "#6d6879",
+    900: "#52505b",
+};
+var border = {
+    50: "#fefefe",
+    100: "#f6f4f9",
+    200: "#ede9f4",
+    300: "#e5dfef",
+    400: "#dcd5e9",
+    500: "#d3cbe3",
+    600: "#beb7d0",
+    700: "#938da3",
+    800: "#6f6a7c",
+    900: "#54505e",
+};
+var table = {
+    hover: {
+        50: "#fefefe",
+        100: "#faf8fd",
+        200: "#f5f1fb",
+        300: "#f0ebf8",
+        400: "#ebe5f5",
+        500: "#e5dff2",
+        600: "#d0cadf",
+        700: "#a49faf",
+        800: "#7c7886",
+        900: "#5d5a65",
     },
-    disabled: {
-        50: "#fcfcfc",
-        100: "#f7f7f7",
-        200: "#f3f3f3",
-        300: "#ededed",
-        400: "#e9e9e9",
-        500: "#e4e4e4",
-        600: "#cfcfcf",
-        700: "#a2a2a2",
-        800: "#7d7d7d",
-        900: "#606060",
-    }
+};
+var disabled = {
+    50: "#f5f3f9",
+    100: "#eae6f4",
+    200: "#dfd9ef",
+    300: "#d0c8e8",
+    400: "#c5bce2",
+    500: "#b5aadb",
+    600: "#a59bc7",
+    700: "#807898",
+    800: "#625d75",
+    900: "#4b4759",
+};
+var palette = {
+    primary: primary,
+    secondary: secondary,
+    tertiary: tertiary,
+    transparent: "transparent",
+    black: "#000",
+    white: "#fff",
+    semantic: semantic,
+    gray: gray,
+    red: red,
+    orange: orange,
+    yellow: yellow,
+    green: green,
+    teal: teal,
+    blue: blue,
+    cyan: cyan,
+    purple: purple,
+    pink: pink,
+    backgroundColor: backgroundColor,
+    background: background,
+    text: text,
+    header: header,
+    placeholder: placeholder,
+    boxShadow: boxShadow,
+    sidebar: sidebar,
+    boxborder: boxborder,
+    border: border,
+    table: table,
+    disabled: disabled,
 };
 exports.default = palette;