pixelize-design-library 2.2.130 → 2.2.131

package/dist/Components/Toaster/Toaster.js

@@ -15,15 +15,26 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToaster = void 0;
+exports.default = ToasterProvider;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var ToasterContext = (0, react_1.createContext)(undefined);
@@ -75,7 +86,6 @@ function ToasterProvider(_a) {
     };
     return (react_1.default.createElement(ToasterContext.Provider, { value: { showToast: showToast } }, children));
 }
-exports.default = ToasterProvider;
 var useToaster = function () {
     var context = (0, react_1.useContext)(ToasterContext);
     if (!context) {

package/dist/Components/ToolTip/ToolTip.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToolTip;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 function ToolTip(_a) {
     var placement = _a.placement, label = _a.label, children = _a.children, hasArrow = _a.hasArrow, fontSize = _a.fontSize, bg = _a.bg, color = _a.color, isDisabled = _a.isDisabled, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, openDelay = _a.openDelay, closeDelay = _a.closeDelay, arrowSize = _a.arrowSize, closeOnClick = _a.closeOnClick, size = _a.size, width = _a.width, height = _a.height, arrowPadding = _a.arrowPadding, arrowShadowColor = _a.arrowShadowColor, direction = _a.direction, gutter = _a.gutter, onClose = _a.onClose, modifiers = _a.modifiers, closeOnPointerDown = _a.closeOnPointerDown, styles = _a.styles;
     return (react_1.default.createElement(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: isDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles }, children));
 }
-exports.default = ToolTip;

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
 export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
     children: React.ReactNode;

package/dist/Components/Trail/EditableCell.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableCell = void 0;
 var react_1 = __importStar(require("react"));

package/dist/Theme/Dark/theme.js

@@ -16,33 +16,33 @@ var theme_tools_1 = require("@chakra-ui/theme-tools");
 var space = {
     px: "1px",
     0: "0",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
+    1: "0.25rem", // 4px
+    2: "0.5rem", // 8px
+    3: "0.75rem", // 12px
+    4: "1rem", // 16px
+    5: "1.25rem", // 20px
+    6: "1.5rem", // 24px
+    7: "1.75rem", // 28px
+    8: "2rem", // 32px
+    9: "2.25rem", // 36px
+    10: "2.5rem", // 40px
+    12: "3rem", // 48px
+    14: "3.5rem", // 56px
+    16: "4rem", // 64px
+    20: "5rem", // 80px
+    24: "6rem", // 96px
+    28: "7rem", // 112px
+    32: "8rem", // 128px
+    36: "9rem", // 144px
+    40: "10rem", // 160px
+    44: "11rem", // 176px
+    48: "12rem", // 192px
+    52: "13rem", // 208px
+    56: "14rem", // 224px
+    60: "15rem", // 240px
+    64: "16rem", // 256px
+    72: "18rem", // 288px
+    80: "20rem", // 320px
     96: "24rem", // 384px
 };
 var darkTheme = (0, react_1.extendTheme)({
@@ -184,33 +184,33 @@ var darkTheme = (0, react_1.extendTheme)({
     space: {
         px: "1px",
         0: "0",
-        1: "0.25rem",
-        2: "0.5rem",
-        3: "0.75rem",
-        4: "1rem",
-        5: "1.25rem",
-        6: "1.5rem",
-        7: "1.75rem",
-        8: "2rem",
-        9: "2.25rem",
-        10: "2.5rem",
-        12: "3rem",
-        14: "3.5rem",
-        16: "4rem",
-        20: "5rem",
-        24: "6rem",
-        28: "7rem",
-        32: "8rem",
-        36: "9rem",
-        40: "10rem",
-        44: "11rem",
-        48: "12rem",
-        52: "13rem",
-        56: "14rem",
-        60: "15rem",
-        64: "16rem",
-        72: "18rem",
-        80: "20rem",
+        1: "0.25rem", // 4px
+        2: "0.5rem", // 8px
+        3: "0.75rem", // 12px
+        4: "1rem", // 16px
+        5: "1.25rem", // 20px
+        6: "1.5rem", // 24px
+        7: "1.75rem", // 28px
+        8: "2rem", // 32px
+        9: "2.25rem", // 36px
+        10: "2.5rem", // 40px
+        12: "3rem", // 48px
+        14: "3.5rem", // 56px
+        16: "4rem", // 64px
+        20: "5rem", // 80px
+        24: "6rem", // 96px
+        28: "7rem", // 112px
+        32: "8rem", // 128px
+        36: "9rem", // 144px
+        40: "10rem", // 160px
+        44: "11rem", // 176px
+        48: "12rem", // 192px
+        52: "13rem", // 208px
+        56: "14rem", // 224px
+        60: "15rem", // 240px
+        64: "16rem", // 256px
+        72: "18rem", // 288px
+        80: "20rem", // 320px
         96: "24rem", // 384px
     },
     sizes: __assign(__assign({}, space), { full: "100%", screenW: "100vw", screenH: "100vh" }),

package/dist/Theme/Default/palette.js

@@ -7,7 +7,7 @@ var palette = {
         200: "#d1aef3",
         300: "#bb89ee",
         400: "#ae72ea",
-        500: "#9A4FE5",
+        500: "#9A4FE5", // primary shade
         600: "#8c48d0",
         700: "#6d38a3",
         800: "#552v7e",
@@ -28,7 +28,7 @@ var palette = {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // secondary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -49,7 +49,7 @@ var palette = {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // tertiary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -74,7 +74,7 @@ var palette = {
             200: "#9adeb4",
             300: "#6ccf92",
             400: "#4fc67d",
-            500: "#23b85c",
+            500: "#23b85c", // Main success color
             600: "#20a754",
             700: "#198341",
             800: "#136533",
@@ -86,7 +86,7 @@ var palette = {
             200: "#f9aaa4",
             300: "#f6837b",
             400: "#f56b61",
-            500: "#f2463a",
+            500: "#f2463a", // Main error color
             600: "#dc4035",
             700: "#ac3229",
             800: "#852720",
@@ -98,7 +98,7 @@ var palette = {
             200: "#ffccb7",
             300: "#ffb596",
             400: "#ffa781",
-            500: "#Ff9162",
+            500: "#Ff9162", // Main warning color
             600: "#e88459",
             700: "#b56746",
             800: "#8c5036",
@@ -110,7 +110,7 @@ var palette = {
             200: "#b5e4f0",
             300: "#94d7e9",
             400: "#7fd0e5",
-            500: "#5FC4de",
+            500: "#5FC4de", // Main info color
             600: "#56b2ea",
             700: "#438b9e",
             800: "#346c78",
@@ -135,7 +135,7 @@ var palette = {
         200: "#f9aaa4",
         300: "#f6837b",
         400: "#f56b61",
-        500: "#f2463a",
+        500: "#f2463a", // Main error color
         600: "#dc4035",
         700: "#ac3229",
         800: "#852720",
@@ -147,7 +147,7 @@ var palette = {
         200: "#ffccb7",
         300: "#ffb596",
         400: "#ffa781",
-        500: "#Ff9162",
+        500: "#Ff9162", // Main warning color
         600: "#e88459",
         700: "#b56746",
         800: "#8c5036",
@@ -171,7 +171,7 @@ var palette = {
         200: "#9adeb4",
         300: "#6ccf92",
         400: "#4fc67d",
-        500: "#23b85c",
+        500: "#23b85c", // Main success color
         600: "#20a754",
         700: "#198341",
         800: "#136533",
@@ -183,7 +183,7 @@ var palette = {
         200: "#b5e4f0",
         300: "#94d7e9",
         400: "#7fd0e5",
-        500: "#5FC4de",
+        500: "#5FC4de", // Main info color
         600: "#56b2ea",
         700: "#438b9e",
         800: "#346c78",

package/dist/Theme/Meadow/palette.js

@@ -16,16 +16,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette_1 = __importDefault(require("../Default/palette"));
 var palette = __assign(__assign({}, palette_1.default), { primary: {
-        50: "#e3f9e5",
-        100: "#c1f0c0",
-        200: "#9ee4a1",
-        300: "#72d785",
-        400: "#48c15d",
-        500: "#2caa3d",
-        600: "#239c31",
-        700: "#1d8626",
-        800: "#16631c",
-        900: "#0d4b13",
+        50: "#e3f9e5", // Lightest green
+        100: "#c1f0c0", // Lighter green
+        200: "#9ee4a1", // Light green
+        300: "#72d785", // Main green (primary color)
+        400: "#48c15d", // Darker green (hover)
+        500: "#2caa3d", // Custom primary color (default)
+        600: "#239c31", // Darker primary color
+        700: "#1d8626", // Even darker green
+        800: "#16631c", // Very dark green
+        900: "#0d4b13", // Darkest green
         opacity: {
             4: "#9A4FE50a",
             8: "#9A4FE514",
@@ -41,7 +41,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // secondary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -56,16 +56,16 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             48: "#161b257a",
         }
     }, tertiary: {
-        50: "#e3f9e5",
-        100: "#c1f0c0",
-        200: "#9ee4a1",
-        300: "#72d785",
-        400: "#48c15d",
-        500: "#2caa3d",
-        600: "#239c31",
-        700: "#1d8626",
-        800: "#16631c",
-        900: "#0d4b13",
+        50: "#e3f9e5", // Lightest green
+        100: "#c1f0c0", // Lighter green
+        200: "#9ee4a1", // Light green
+        300: "#72d785", // Main green (primary color)
+        400: "#48c15d", // Darker green (hover)
+        500: "#2caa3d", // Custom primary color (default)
+        600: "#239c31", // Darker primary color
+        700: "#1d8626", // Even darker green
+        800: "#16631c", // Very dark green
+        900: "#0d4b13", // Darkest green
         opacity: {
             4: "#9A4FE50a",
             8: "#9A4FE514",
@@ -82,7 +82,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#8be6bb",
             300: "#5bdb9e",
             400: "#33d181",
-            500: "#00b768",
+            500: "#00b768", // Main success color
             600: "#00a05a",
             700: "#00854b",
             800: "#006b3c",
@@ -94,7 +94,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#f28f8f",
             300: "#e66060",
             400: "#db3a3a",
-            500: "#c21e1e",
+            500: "#c21e1e", // Main error color
             600: "#a01919",
             700: "#7e1313",
             800: "#5c0d0d",
@@ -106,7 +106,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#ffcc85",
             300: "#ffb653",
             400: "#ffa31a",
-            500: "#ff8a00",
+            500: "#ff8a00", // Main warning color
             600: "#db7000",
             700: "#b75800",
             800: "#934300",
@@ -118,7 +118,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#85d1ff",
             300: "#52bdff",
             400: "#1fa9ff",
-            500: "#008df5",
+            500: "#008df5", // Main info color
             600: "#0077db",
             700: "#005cb3",
             800: "#004489",
@@ -246,15 +246,15 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         800: "#8a8a8a",
         900: "#696969",
     }, backgroundColor: {
-        main: "#f8f9fa",
-        secondary: "#f1f1f1",
-        tertiary: "#ececec",
-        quaternary: "#e2e6ea",
-        light: "#fafafa",
-        medium: "#eaeaea",
-        accent: "#e5e5e5",
-        subtle: "#f5f6f7",
-        muted: "#dfe3e6",
+        main: "#f8f9fa", // Light greyish white
+        secondary: "#f1f1f1", // Very light grey
+        tertiary: "#ececec", // Soft grey
+        quaternary: "#e2e6ea", // Pale blueish-grey
+        light: "#fafafa", // Almost pure white
+        medium: "#eaeaea", // Medium light grey
+        accent: "#e5e5e5", // A slightly deeper grey
+        subtle: "#f5f6f7", // Slightly off-white with a cooler tone
+        muted: "#dfe3e6", // Light muted blue-grey
         neutral: "#ebedef", // Neutral grey with a balanced tone
     }, text: {
         50: "#eeeff0",

package/dist/Theme/Radiant/palette.js

@@ -16,16 +16,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette_1 = __importDefault(require("../Default/palette"));
 var palette = __assign(__assign({}, palette_1.default), { primary: {
-        50: "#ffe0b2",
-        100: "#ffcc80",
-        200: "#ffb74d",
-        300: "#ffa726",
-        400: "#ff9800",
-        500: "#fb8c00",
-        600: "#f57c00",
-        700: "#ef6c00",
-        800: "#e65100",
-        900: "#bf360c",
+        50: "#ffe0b2", // Lightest orange
+        100: "#ffcc80", // Lighter orange
+        200: "#ffb74d", // Light orange
+        300: "#ffa726", // Main orange (primary color)
+        400: "#ff9800", // Darker orange (hover)
+        500: "#fb8c00", // Custom primary orange (default)
+        600: "#f57c00", // Darker primary orange
+        700: "#ef6c00", // Even darker orange
+        800: "#e65100", // Very dark orange
+        900: "#bf360c", // Darkest orange
         opacity: {
             4: "#9A4FE50a",
             8: "#9A4FE514",
@@ -41,7 +41,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // secondary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -61,7 +61,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // tertiary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -82,7 +82,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#8be6bb",
             300: "#5bdb9e",
             400: "#33d181",
-            500: "#00b768",
+            500: "#00b768", // Main success color
             600: "#00a05a",
             700: "#00854b",
             800: "#006b3c",
@@ -94,7 +94,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#f28f8f",
             300: "#e66060",
             400: "#db3a3a",
-            500: "#c21e1e",
+            500: "#c21e1e", // Main error color
             600: "#a01919",
             700: "#7e1313",
             800: "#5c0d0d",
@@ -106,7 +106,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#ffcc85",
             300: "#ffb653",
             400: "#ffa31a",
-            500: "#ff8a00",
+            500: "#ff8a00", // Main warning color
             600: "#db7000",
             700: "#b75800",
             800: "#934300",
@@ -118,7 +118,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#85d1ff",
             300: "#52bdff",
             400: "#1fa9ff",
-            500: "#008df5",
+            500: "#008df5", // Main info color
             600: "#0077db",
             700: "#005cb3",
             800: "#004489",
@@ -246,15 +246,15 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         800: "#8a8a8a",
         900: "#696969",
     }, backgroundColor: {
-        main: "#f8f9fa",
-        secondary: "#f1f1f1",
-        tertiary: "#ececec",
-        quaternary: "#e2e6ea",
-        light: "#fafafa",
-        medium: "#eaeaea",
-        accent: "#e5e5e5",
-        subtle: "#f5f6f7",
-        muted: "#dfe3e6",
+        main: "#f8f9fa", // Light greyish white
+        secondary: "#f1f1f1", // Very light grey
+        tertiary: "#ececec", // Soft grey
+        quaternary: "#e2e6ea", // Pale blueish-grey
+        light: "#fafafa", // Almost pure white
+        medium: "#eaeaea", // Medium light grey
+        accent: "#e5e5e5", // A slightly deeper grey
+        subtle: "#f5f6f7", // Slightly off-white with a cooler tone
+        muted: "#dfe3e6", // Light muted blue-grey
         neutral: "#ebedef", // Neutral grey with a balanced tone
     }, text: {
         50: "#eeeff0",

package/dist/Theme/Skyline/palette.js

@@ -21,7 +21,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#a2d4ec",
         300: "#7ac1e4",
         400: "#47a9da",
-        500: "#0088cc",
+        500: "#0088cc", // primary shade
         600: "#007ab8",
         700: "#006ba1",
         800: "#005885",
@@ -41,7 +41,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#94989b",
         300: "#63666d",
         400: "#454951",
-        500: "#161b25",
+        500: "#161b25", // secondary shade
         600: "#141922",
         700: "#10131a",
         800: "#0c0f14",
@@ -61,7 +61,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         200: "#a2d4ec",
         300: "#7ac1e4",
         400: "#47a9da",
-        500: "#0088cc",
+        500: "#0088cc", // primary shade
         600: "#007ab8",
         700: "#006ba1",
         800: "#005885",
@@ -82,7 +82,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#8be6bb",
             300: "#5bdb9e",
             400: "#33d181",
-            500: "#00b768",
+            500: "#00b768", // Main success color
             600: "#00a05a",
             700: "#00854b",
             800: "#006b3c",
@@ -94,7 +94,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#f28f8f",
             300: "#e66060",
             400: "#db3a3a",
-            500: "#c21e1e",
+            500: "#c21e1e", // Main error color
             600: "#a01919",
             700: "#7e1313",
             800: "#5c0d0d",
@@ -106,7 +106,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#ffcc85",
             300: "#ffb653",
             400: "#ffa31a",
-            500: "#ff8a00",
+            500: "#ff8a00", // Main warning color
             600: "#db7000",
             700: "#b75800",
             800: "#934300",
@@ -118,7 +118,7 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
             200: "#85d1ff",
             300: "#52bdff",
             400: "#1fa9ff",
-            500: "#008df5",
+            500: "#008df5", // Main info color
             600: "#0077db",
             700: "#005cb3",
             800: "#004489",
@@ -246,15 +246,15 @@ var palette = __assign(__assign({}, palette_1.default), { primary: {
         800: "#8a8a8a",
         900: "#696969",
     }, backgroundColor: {
-        main: "#f8f9fa",
-        secondary: "#f1f1f1",
-        tertiary: "#ececec",
-        quaternary: "#e2e6ea",
-        light: "#fafafa",
-        medium: "#eaeaea",
-        accent: "#e5e5e5",
-        subtle: "#f5f6f7",
-        muted: "#dfe3e6",
+        main: "#f8f9fa", // Light greyish white
+        secondary: "#f1f1f1", // Very light grey
+        tertiary: "#ececec", // Soft grey
+        quaternary: "#e2e6ea", // Pale blueish-grey
+        light: "#fafafa", // Almost pure white
+        medium: "#eaeaea", // Medium light grey
+        accent: "#e5e5e5", // A slightly deeper grey
+        subtle: "#f5f6f7", // Slightly off-white with a cooler tone
+        muted: "#dfe3e6", // Light muted blue-grey
         neutral: "#ebedef", // Neutral grey with a balanced tone
     }, text: {
         50: "#eeeff0",