npm - pixelize-design-library - Versions diffs - 2.2.147 → 2.2.148 - Mend

pixelize-design-library 2.2.147 → 2.2.148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/Components/Table/Components/TableHeader.js +10 -10
package/dist/Theme/Default/palette.d.ts +12 -12
package/dist/Theme/Default/palette.js +276 -334
package/dist/Theme/Meadow/palette.js +52 -52
package/dist/Theme/Radiant/palette.js +82 -82
package/dist/Theme/Skyline/palette.js +82 -82
package/dist/Theme/Slate/palette.js +81 -81
package/package.json +1 -1

package/dist/Theme/Meadow/palette.js CHANGED Viewed

@@ -16,55 +16,55 @@ 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 = "#2caa3d";
+var PRIMARY_500 = "#2d6a4f"; // was #2caa3d — deeper, forest-toned
 var primary = {
-    50: "#ecfdf3",
-    100: "#d2f7dd",
-    200: "#a8ecc0",
-    300: "#6fda97",
-    400: "#3ccd73",
-    500: PRIMARY_500,
-    600: "#238f32",
-    700: "#1c7229",
-    800: "#155620",
-    900: "#0e3a16",
+    50: "#edf7f2",
+    100: "#d0edde",
+    200: "#a3d9bc",
+    300: "#6dbf96",
+    400: "#3fa872",
+    500: PRIMARY_500, // #2d6a4f
+    600: "#245840",
+    700: "#1b4531",
+    800: "#123223",
+    900: "#0a2016",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
-        50: "#f7faf8",
-        100: "#eef2ef",
-        200: "#dfe6e1",
-        300: "#c8d2cc",
-        400: "#9db0a6",
-        500: "#6f8478",
-        600: "#4e6656",
-        700: "#3d5146",
-        800: "#2b3a31",
-        900: "#1c261f",
+        50: "#f6f9f7",
+        100: "#ecf1ee",
+        200: "#dce5e0",
+        300: "#c4d2cb",
+        400: "#93a99f",
+        500: "#637d72",
+        600: "#445f52",
+        700: "#344a3f",
+        800: "#24342b",
+        900: "#16221c",
     }, backgroundColor: {
-        main: "#f6faf7",
-        secondary: "#eef4f0",
-        tertiary: "#e7efe9",
-        quaternary: "#dee8e1",
-        light: "#fafcf9",
-        medium: "#e6ebe8",
-        accent: "#dce5df",
-        subtle: "#f3f7f4",
-        muted: "#d6e0d9",
-        neutral: "#e8ede9",
-        base: "#fafdfb",
-        tableHeader: "#eef4f0",
+        main: "#f4f8f6",
+        secondary: "#ecf3ef",
+        tertiary: "#e4ede7",
+        quaternary: "#dae7e1",
+        light: "#f8fbf9",
+        medium: "#e3eae6",
+        accent: "#d8e4de",
+        subtle: "#f1f6f3",
+        muted: "#d2ddd7",
+        neutral: "#e5ece8",
+        base: "#f9fcfa",
+        tableHeader: "#ecf3ef",
     }, background: {
         50: "#ffffff",
-        100: "#fafcf9",
-        200: "#f4f8f5",
-        300: "#eef4f0",
-        400: "#e8efe9",
-        500: "#e2eae4",
-        600: "#cdd8cf",
-        700: "#a3b0a6",
-        800: "#7a887d",
-        900: "#5c665e",
+        100: "#f8fbf9",
+        200: "#f2f7f4",
+        300: "#ecf3ef",
+        400: "#e5ede8",
+        500: "#dfe8e2",
+        600: "#c9d5ce",
+        700: "#9eada6",
+        800: "#768178",
+        900: "#586259",
     }, border: {
         50: "#fbfcfb",
         100: "#f3f6f4",
@@ -102,16 +102,16 @@ var palette = __assign(__assign({}, palette_1.default), { primary: primary, tert
         },
     }, sidebar: {
         background: {
-            50: "#edf5ef",
-            100: "#dbe8de",
-            200: "#2a3830",
-            300: "#7a9687",
-            400: "#4d6b57",
-            500: "#152219",
-            600: "#111b14",
-            700: "#0d1510",
-            800: "#09100c",
-            900: "#060b08",
+            50: "#e8f0eb",
+            100: "#d0e0d6",
+            200: "#244030", // slightly lighter surface
+            300: "#5f7d6c",
+            400: "#3a5a47",
+            500: "#0f2318", // main sidebar bg — very deep forest
+            600: "#0c1c13",
+            700: "#09150e",
+            800: "#060e09",
+            900: "#030705",
         },
     }, boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),

package/dist/Theme/Radiant/palette.js CHANGED Viewed

@@ -16,102 +16,102 @@ 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 = "#fb8c00";
+var PRIMARY_500 = "#d4724a"; // darker + warmer — terracotta coral
 var primary = {
-    50: "#fff8e6",
-    100: "#ffeecc",
-    200: "#ffe0a3",
-    300: "#ffcd70",
-    400: "#ffb547",
-    500: PRIMARY_500,
-    600: "#e57a00",
-    700: "#c26500",
-    800: "#9a4f00",
-    900: "#6f3800",
+    50: "#fdf0ea",
+    100: "#f9dace",
+    200: "#f3b49d",
+    300: "#eb8d6c",
+    400: "#de6e4a",
+    500: PRIMARY_500, // #d4724a
+    600: "#be5c35",
+    700: "#9e4727",
+    800: "#7c341b",
+    900: "#592310",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 var palette = __assign(__assign({}, palette_1.default), { primary: primary, gray: {
-        50: "#faf8f5",
-        100: "#f2ede6",
-        200: "#e8dfd4",
-        300: "#d4c7b8",
-        400: "#b5a390",
-        500: "#8f7a68",
-        600: "#6b5c4f",
-        700: "#524840",
-        800: "#3a332e",
-        900: "#28231f",
+        50: "#faf7f4",
+        100: "#f3ebe3",
+        200: "#e9ddd2",
+        300: "#d6c5b5",
+        400: "#bca290",
+        500: "#967b68",
+        600: "#715c4a",
+        700: "#57473a",
+        800: "#3d3229",
+        900: "#2a211a",
     }, backgroundColor: {
-        main: "#faf8f5",
-        secondary: "#f3ede6",
-        tertiary: "#ece4db",
-        quaternary: "#e3d9cf",
-        light: "#fdfcfa",
-        medium: "#e8dfd6",
-        accent: "#e2d5c9",
-        subtle: "#f7f2ec",
-        muted: "#dcd0c4",
-        neutral: "#e8ded5",
-        base: "#fcfbf9",
-        tableHeader: "#f1ebe4",
+        main: "#faf6f2",
+        secondary: "#f4ebe2",
+        tertiary: "#edded3",
+        quaternary: "#e6d4c7",
+        light: "#fdfbf9",
+        medium: "#ebdbd0",
+        accent: "#e4d0c2",
+        subtle: "#f7f1eb",
+        muted: "#ddc9ba",
+        neutral: "#eadbd0",
+        base: "#fcfaf8",
+        tableHeader: "#f4ebe2",
     }, background: {
         50: "#ffffff",
-        100: "#fdfcfa",
-        200: "#f7f2ec",
-        300: "#f3ede6",
-        400: "#ede6de",
-        500: "#e7dfd5",
-        600: "#d4c9be",
-        700: "#a89e94",
-        800: "#7f776f",
-        900: "#605a54",
+        100: "#fdfbf8",
+        200: "#f7f1ea",
+        300: "#f2eae1",
+        400: "#ece2d7",
+        500: "#e5dacf",
+        600: "#d3c6b9",
+        700: "#a89a8e",
+        800: "#80736a",
+        900: "#615850",
     }, border: {
-        50: "#fdfcfb",
-        100: "#f5f0eb",
-        200: "#eee8e1",
-        300: "#e6ded6",
-        400: "#dfd5cc",
-        500: "#d7ccc2",
-        600: "#c3b8ae",
-        700: "#998f87",
-        800: "#756d66",
-        900: "#59534e",
+        50: "#fefcfb",
+        100: "#f6f0ea",
+        200: "#efe6dc",
+        300: "#e7ddd2",
+        400: "#e0d3c7",
+        500: "#d8c9bc",
+        600: "#c4b5a8",
+        700: "#9b8f86",
+        800: "#776c64",
+        900: "#5b524c",
     }, boxborder: {
-        50: "#fdfcfb",
-        100: "#f4efea",
-        200: "#ede6e0",
-        300: "#e5dcd4",
-        400: "#ded3ca",
-        500: "#d6cac0",
-        600: "#c2b7ad",
-        700: "#988e86",
-        800: "#746d66",
-        900: "#58534e",
+        50: "#fefcfb",
+        100: "#f5efe9",
+        200: "#eee4dc",
+        300: "#e5dbd2",
+        400: "#ddd1c7",
+        500: "#d5c8bc",
+        600: "#c1b4a8",
+        700: "#988e85",
+        800: "#746b63",
+        900: "#585049",
     }, table: {
         hover: {
-            50: "#fffefd",
-            100: "#faf6f0",
-            200: "#f5efe8",
-            300: "#f0e9e1",
-            400: "#ebe3da",
-            500: "#e6ddd3",
-            600: "#d2c9bf",
-            700: "#a8a096",
-            800: "#807971",
-            900: "#615c56",
+            50: "#fffefe",
+            100: "#faf6f1",
+            200: "#f5eeе8",
+            300: "#f0e7df",
+            400: "#ebe0d7",
+            500: "#e5dacf",
+            600: "#d2c5b8",
+            700: "#a99f94",
+            800: "#807870",
+            900: "#625c55",
         },
     }, sidebar: {
         background: {
-            50: "#f5ebe3",
-            100: "#e8d9cc",
-            200: "#3f3227",
-            300: "#a08068",
-            400: "#6f5645",
-            500: "#2c2218",
-            600: "#231b14",
-            700: "#1b1510",
-            800: "#130f0b",
-            900: "#0c0907",
+            50: "#f2ebe5",
+            100: "#e4d4ca",
+            200: "#7a5f50", // hover surface
+            300: "#9c7a68",
+            400: "#6a4e3e",
+            500: "#1c110b", // deep warm near-black — richer than before
+            600: "#160d08",
+            700: "#110a06",
+            800: "#0c0704",
+            900: "#070402",
         },
     }, boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),

package/dist/Theme/Skyline/palette.js CHANGED Viewed

@@ -16,102 +16,102 @@ 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 = "#0088cc";
+var PRIMARY_500 = "#1a3a6b"; // was #0088cc — deep navy
 var primary = {
-    50: "#e6f4fb",
-    100: "#cce9f7",
-    200: "#99d2ef",
-    300: "#66bbe6",
-    400: "#33a4de",
-    500: PRIMARY_500,
-    600: "#0077b3",
-    700: "#006399",
-    800: "#004f7a",
-    900: "#003a5c",
+    50: "#e8ecf4",
+    100: "#c9d3e6",
+    200: "#9aaece",
+    300: "#6888b5",
+    400: "#3d649d",
+    500: PRIMARY_500, // #1a3a6b
+    600: "#152f58",
+    700: "#102446",
+    800: "#0b1a33",
+    900: "#071021",
     opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
 };
 var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
-        50: "#f5f9fb",
-        100: "#e8f0f6",
-        200: "#d7e4ed",
-        300: "#b8cedc",
-        400: "#8aa8bd",
-        500: "#5f8299",
-        600: "#456178",
-        700: "#364d5f",
-        800: "#273845",
-        900: "#1a262f",
+        50: "#f4f6fa",
+        100: "#e6eaf2",
+        200: "#d3dae8",
+        300: "#b0bcd4",
+        400: "#8094b0",
+        500: "#566d8c",
+        600: "#3d526b",
+        700: "#2e3f54",
+        800: "#202d3d",
+        900: "#151e29",
     }, backgroundColor: {
-        main: "#f5f9fc",
-        secondary: "#eaf2f8",
-        tertiary: "#e2ecf4",
-        quaternary: "#d8e4ef",
-        light: "#fafcfe",
-        medium: "#e4edf4",
-        accent: "#dae6f1",
-        subtle: "#f2f7fb",
-        muted: "#cfdce8",
-        neutral: "#e2eaf1",
-        base: "#f9fbfd",
-        tableHeader: "#eaf2f8",
+        main: "#f3f5fa",
+        secondary: "#e7ecf5",
+        tertiary: "#dce3f0",
+        quaternary: "#d0daeb",
+        light: "#f8f9fd",
+        medium: "#dfe6f2",
+        accent: "#d4dcec",
+        subtle: "#eef1f8",
+        muted: "#c8d2e4",
+        neutral: "#dce3ef",
+        base: "#f7f9fc",
+        tableHeader: "#e7ecf5",
     }, background: {
         50: "#ffffff",
-        100: "#fafcfe",
-        200: "#f2f7fb",
-        300: "#eaf2f8",
-        400: "#e3edf5",
-        500: "#dce7f1",
-        600: "#c5d4e0",
-        700: "#9aaab8",
-        800: "#74808d",
-        900: "#57616c",
+        100: "#f7f9fc",
+        200: "#eef2f8",
+        300: "#e4eaf3",
+        400: "#dae3ee",
+        500: "#d0dae9",
+        600: "#b8c4d8",
+        700: "#8d9cb4",
+        800: "#65748e",
+        900: "#4c5870",
     }, border: {
-        50: "#fbfcfd",
-        100: "#f1f5f9",
-        200: "#eaeff4",
-        300: "#e2e9ef",
-        400: "#dce4eb",
-        500: "#d4dde6",
-        600: "#c0cad4",
-        700: "#96a0ab",
-        800: "#727a83",
-        900: "#575d64",
+        50: "#fafbfd",
+        100: "#eef1f7",
+        200: "#e5eaf3",
+        300: "#dce3ee",
+        400: "#d3dbe9",
+        500: "#c9d2e3",
+        600: "#b4bfd5",
+        700: "#8a96ac",
+        800: "#677182",
+        900: "#4f5764",
     }, boxborder: {
-        50: "#fbfcfd",
-        100: "#f0f4f8",
-        200: "#e9eef3",
-        300: "#e1e7ee",
-        400: "#dae1e9",
-        500: "#d2dae3",
-        600: "#bec7d1",
-        700: "#949ca4",
-        800: "#70767c",
-        900: "#565a5f",
+        50: "#fafbfd",
+        100: "#edf0f6",
+        200: "#e3e8f2",
+        300: "#d9e0ed",
+        400: "#d0d8e8",
+        500: "#c6cfe2",
+        600: "#b2bcd4",
+        700: "#8891a8",
+        800: "#656d80",
+        900: "#4d5362",
     }, table: {
         hover: {
-            50: "#feffff",
-            100: "#f6fafd",
-            200: "#eff5fa",
-            300: "#e9f1f7",
-            400: "#e3edf5",
-            500: "#dde8f2",
-            600: "#c8d5e0",
-            700: "#9eabb8",
-            800: "#78828c",
-            900: "#5a636b",
+            50: "#fdfeff",
+            100: "#f4f7fc",
+            200: "#ecf0f8",
+            300: "#e4eaf5",
+            400: "#dce3f1",
+            500: "#d4dced",
+            600: "#bec9de",
+            700: "#95a2b8",
+            800: "#707c90",
+            900: "#545e6e",
         },
     }, sidebar: {
         background: {
-            50: "#e8f0f7",
-            100: "#d3e2ee",
-            200: "#243646",
-            300: "#6d8aa3",
-            400: "#4a6578",
-            500: "#162534",
-            600: "#121f2b",
-            700: "#0e1822",
-            800: "#0a1219",
-            900: "#070c11",
+            50: "#e4e8f0",
+            100: "#c8d0e0",
+            200: "#1e2e45", // lighter surface for hover/items
+            300: "#4d6280",
+            400: "#2e4460",
+            500: "#0d1e33", // main sidebar — near-black navy
+            600: "#0a1829",
+            700: "#07111f",
+            800: "#050b14",
+            900: "#02060a",
         },
     }, boxShadow: {
         primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),