npm - @bcc-code/design-tokens - Versions diffs - 3.0.4 → 3.0.5 - Mend

@bcc-code/design-tokens 3.0.4 → 3.0.5

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 (6) hide show

package/README.md +62 -62
package/build/bcc/aura-bcc-config.js +1148 -0
package/config/primevue.config.d.ts +7 -7
package/config/primevue.config.js +23 -121
package/package.json +42 -41
package/build/bcc/primitives.js +0 -257

package/build/bcc/aura-bcc-config.js ADDED Viewed

@@ -0,0 +1,1148 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+  "font-family": {
+    archivo: "Archivo",
+  },
+  color: {
+    neutral: {
+      0: "#ffffff",
+      100: "#f7f8f9",
+      200: "#f1f2f4",
+      300: "#dcdfe4",
+      400: "#b3b9c4",
+      500: "#8590a2",
+      600: "#758195",
+      700: "#626f86",
+      800: "#44546f",
+      900: "#2c3e5d",
+      1000: "#172b4d",
+      1100: "#091e42",
+    },
+    "neutral-alpha": {
+      "100A": "rgba(9, 30, 77, 0.03)",
+      "200A": "rgba(9, 30, 77, 0.06)",
+      "300A": "rgba(9, 30, 77, 0.14)",
+      "400A": "rgba(9, 30, 77, 0.32)",
+      "500A": "rgba(9, 30, 77, 0.5)",
+    },
+    "dark-neutral": {
+      0: "#161a1d",
+      100: "#101214",
+      200: "#22272b",
+      250: "#282e33",
+      300: "#2c333a",
+      350: "#38414a",
+      400: "#454f59",
+      500: "#596773",
+      600: "#738496",
+      700: "#8c9bab",
+      800: "#9fadbc",
+      900: "#b6c2cf",
+      1000: "#c7d1db",
+      1100: "#dee4ea",
+      "negative-100": "#101214",
+    },
+    "dark-neutral-alpha": {
+      "100A": "rgba(0, 0, 0, 0.24)",
+      "200A": "rgba(188, 214, 240, 0.08)",
+      "250A": "rgba(188, 214, 240, 0.1)",
+      "300A": "rgba(188, 214, 240, 0.16)",
+      "350A": "rgba(188, 214, 240, 0.2)",
+      "400A": "rgba(188, 214, 240, 0.28)",
+      "500A": "rgba(188, 214, 240, 0.5)",
+    },
+    blue: {
+      100: "#f6fbff",
+      200: "#d9ecff",
+      300: "#a6cdfd",
+      400: "#7cabf9",
+      500: "#608ef6",
+      600: "#446add",
+      700: "#274eb5",
+      800: "#273c8f",
+      900: "#212c64",
+      1000: "#091e47",
+    },
+    teal: {
+      100: "#f6fbff",
+      200: "#c3f2f8",
+      300: "#82d3e3",
+      400: "#51b9cf",
+      500: "#1a9eb7",
+      600: "#0b7da1",
+      700: "#005b81",
+      800: "#09486b",
+      900: "#0d324d",
+      1000: "#0c2132",
+    },
+    bcc: {
+      100: "#f0fcfa",
+      200: "#d2eeeb",
+      300: "#a0cec8",
+      400: "#6fb5ad",
+      500: "#3e9f97",
+      600: "#1d7f78",
+      700: "#0c625c",
+      800: "#014d49",
+      900: "#0b3633",
+      1000: "#012320",
+    },
+    green: {
+      100: "#efffed",
+      200: "#cbf3c9",
+      300: "#83d895",
+      400: "#32c180",
+      500: "#1ca673",
+      600: "#09825d",
+      700: "#0c6241",
+      800: "#094c3b",
+      900: "#073734",
+      1000: "#032429",
+    },
+    brown: {
+      100: "#f9faf4",
+      200: "#ece8dc",
+      300: "#d1c5b0",
+      400: "#bea889",
+      500: "#a98c66",
+      600: "#8b6d45",
+      700: "#6e5232",
+      800: "#553d28",
+      900: "#3f2c1e",
+      1000: "#2e1b0f",
+    },
+    yellow: {
+      100: "#fdf8e9",
+      200: "#f8e6a0",
+      300: "#e9c348",
+      400: "#d5a406",
+      500: "#bc870d",
+      600: "#a4670b",
+      700: "#854901",
+      800: "#653805",
+      900: "#4b2c04",
+      1000: "#2d1f00",
+    },
+    orange: {
+      100: "#fffaed",
+      200: "#fee3c1",
+      300: "#f6b981",
+      400: "#f19457",
+      500: "#da772e",
+      600: "#b55919",
+      700: "#943a14",
+      800: "#782612",
+      900: "#5d1712",
+      1000: "#420e0d",
+    },
+    red: {
+      100: "#fff8f3",
+      200: "#fee2dd",
+      300: "#fab6ad",
+      400: "#fa877e",
+      500: "#ed6362",
+      600: "#ca414e",
+      700: "#a42237",
+      800: "#811436",
+      900: "#630d2e",
+      1000: "#440223",
+    },
+    magenta: {
+      100: "#fff8ff",
+      200: "#fce0f8",
+      300: "#f3b4e2",
+      400: "#eb8acf",
+      500: "#de66b0",
+      600: "#be428f",
+      700: "#952e70",
+      800: "#751f57",
+      900: "#5b1043",
+      1000: "#3f0534",
+    },
+    purple: {
+      100: "#f6f9ff",
+      200: "#e3e3fe",
+      300: "#c9c3ec",
+      400: "#afa0e0",
+      500: "#9a82da",
+      600: "#8360c3",
+      700: "#61479c",
+      800: "#493481",
+      900: "#352465",
+      1000: "#1d154d",
+    },
+    Transparent: "rgba(0, 0, 0, 0)",
+  },
+  space: {
+    0: "0rem",
+    25: "0.125rem",
+    50: "0.25rem",
+    75: "0.375rem",
+    100: "0.5rem",
+    150: "0.75rem",
+    200: "1rem",
+    250: "1.25rem",
+    300: "1.5rem",
+    400: "2rem",
+    500: "2.5rem",
+    600: "3rem",
+    800: "4rem",
+    1000: "5rem",
+    negative: {
+      25: "-0.125rem",
+      50: "-0.25rem",
+      75: "-0.375rem",
+      100: "-0.5rem",
+      150: "-0.75rem",
+      200: "-1rem",
+      250: "-1.25rem",
+      300: "-1.5rem",
+      400: "-2rem",
+    },
+  },
+  "border-radius": {
+    none: "0",
+    xs: "0.125rem",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "3rem",
+    full: "999px",
+  },
+  "icon-size": {
+    xs: "1rem",
+    sm: "1.25rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "3rem",
+  },
+  "border-width": {
+    0: "0",
+    1: "1px",
+    2: "2px",
+  },
+  "font-weight": {
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+  "line-height": {
+    1: "12px",
+    2: "16px",
+    3: "20px",
+    4: "24px",
+    5: "28px",
+    6: "32px",
+    7: "36px",
+    8: "40px",
+    9: "52px",
+    10: "64px",
+    none: 1,
+  },
+  "font-size": {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "2em",
+    "3xl": "2.25rem",
+    "4xl": "3rem",
+  },
+  "aura/primitive": {
+    border: {
+      radius: {
+        none: "0",
+        xs: "2px",
+        sm: "4px",
+        md: "6px",
+        lg: "8px",
+        xl: "12px",
+      },
+    },
+    emerald: {
+      50: "#f0fcfa",
+      100: "#d2eeeb",
+      200: "#a0cec8",
+      300: "#6fb5ad",
+      400: "#3e9f97",
+      500: "#1d7f78",
+      600: "#0c625c",
+      700: "#014d49",
+      800: "#0b3633",
+      900: "#012320",
+      950: "#012320",
+    },
+    green: {
+      50: "#efffed",
+      100: "#cbf3c9",
+      200: "#83d895",
+      300: "#32c180",
+      400: "#1ca673",
+      500: "#09825d",
+      600: "#0c6241",
+      700: "#094c3b",
+      800: "#073734",
+      900: "#032429",
+      950: "#032429",
+    },
+    lime: {
+      50: "#f7fee7",
+      100: "#ecfccb",
+      200: "#d9f99d",
+      300: "#bef264",
+      400: "#a3e635",
+      500: "#84cc16",
+      600: "#65a30d",
+      700: "#4d7c0f",
+      800: "#3f6212",
+      900: "#365314",
+      950: "#1a2e05",
+    },
+    red: {
+      50: "#fff8f3",
+      100: "#fee2dd",
+      200: "#fab6ad",
+      300: "#fa877e",
+      400: "#ed6362",
+      500: "#ca414e",
+      600: "#a42237",
+      700: "#811436",
+      800: "#630d2e",
+      900: "#440223",
+      950: "#440223",
+    },
+    orange: {
+      50: "#fffaed",
+      100: "#fee3c1",
+      200: "#f6b981",
+      300: "#f19457",
+      400: "#da772e",
+      500: "#b55919",
+      600: "#943a14",
+      700: "#782612",
+      800: "#5d1712",
+      900: "#420e0d",
+      950: "#420e0d",
+    },
+    amber: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#f59e0b",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      950: "#451a03",
+    },
+    yellow: {
+      50: "#fdf8e9",
+      100: "#f8e6a0",
+      200: "#e9c348",
+      300: "#d5a406",
+      400: "#bc870d",
+      500: "#a4670b",
+      600: "#854901",
+      700: "#653805",
+      800: "#4b2c04",
+      900: "#2d1f00",
+      950: "#2d1f00",
+    },
+    teal: {
+      50: "#f6fbff",
+      100: "#c3f2f8",
+      200: "#82d3e3",
+      300: "#51b9cf",
+      400: "#1a9eb7",
+      500: "#0b7da1",
+      600: "#005b81",
+      700: "#09486b",
+      800: "#0d324d",
+      900: "#0c2132",
+      950: "#0c2132",
+    },
+    cyan: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344",
+    },
+    sky: {
+      50: "#f6fbff",
+      100: "#d9ecff",
+      200: "#a6cdfd",
+      300: "#7cabf9",
+      400: "#608ef6",
+      500: "#446add",
+      600: "#274eb5",
+      700: "#273c8f",
+      800: "#212c64",
+      900: "#091e47",
+      950: "#091e47",
+    },
+    blue: {
+      50: "#f6fbff",
+      100: "#d9ecff",
+      200: "#a6cdfd",
+      300: "#7cabf9",
+      400: "#608ef6",
+      500: "#446add",
+      600: "#274eb5",
+      700: "#273c8f",
+      800: "#212c64",
+      900: "#091e47",
+      950: "#091e47",
+    },
+    indigo: {
+      50: "#eef2ff",
+      100: "#e0e7ff",
+      200: "#c7d2fe",
+      300: "#a5b4fc",
+      400: "#818cf8",
+      500: "#6366f1",
+      600: "#4f46e5",
+      700: "#4338ca",
+      800: "#3730a3",
+      900: "#312e81",
+      950: "#1e1b4b",
+    },
+    violet: {
+      50: "#f5f3ff",
+      100: "#ede9fe",
+      200: "#ddd6fe",
+      300: "#c4b5fd",
+      400: "#a78bfa",
+      500: "#8b5cf6",
+      600: "#7c3aed",
+      700: "#6d28d9",
+      800: "#5b21b6",
+      900: "#4c1d95",
+      950: "#2e1065",
+    },
+    purple: {
+      50: "#f6f9ff",
+      100: "#e3e3fe",
+      200: "#c9c3ec",
+      300: "#afa0e0",
+      400: "#9a82da",
+      500: "#8360c3",
+      600: "#61479c",
+      700: "#493481",
+      800: "#352465",
+      900: "#1d154d",
+      950: "#1d154d",
+    },
+    fuchsia: {
+      50: "#fdf4ff",
+      100: "#fae8ff",
+      200: "#f5d0fe",
+      300: "#f0abfc",
+      400: "#e879f9",
+      500: "#d946ef",
+      600: "#c026d3",
+      700: "#a21caf",
+      800: "#86198f",
+      900: "#701a75",
+      950: "#4a044e",
+    },
+    pink: {
+      50: "#fff8ff",
+      100: "#fce0f8",
+      200: "#f3b4e2",
+      300: "#eb8acf",
+      400: "#de66b0",
+      500: "#be428f",
+      600: "#952e70",
+      700: "#751f57",
+      800: "#5b1043",
+      900: "#3f0534",
+      950: "#3f0534",
+    },
+    rose: {
+      50: "#fff1f2",
+      100: "#ffe4e6",
+      200: "#fecdd3",
+      300: "#fda4af",
+      400: "#fb7185",
+      500: "#f43f5e",
+      600: "#e11d48",
+      700: "#be123c",
+      800: "#9f1239",
+      900: "#881337",
+      950: "#4c0519",
+    },
+    slate: {
+      50: "#f7f8f9",
+      100: "#f1f2f4",
+      200: "#dcdfe4",
+      300: "#b3b9c4",
+      400: "#8590a2",
+      500: "#758195",
+      600: "#626f86",
+      700: "#44546f",
+      800: "#2c3e5d",
+      900: "#172b4d",
+      950: "#091e42",
+    },
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+    zinc: {
+      50: "#dee4ea",
+      100: "#c7d1db",
+      200: "#b6c2cf",
+      300: "#9fadbc",
+      400: "#8c9bab",
+      500: "#738496",
+      600: "#596773",
+      700: "#454f59",
+      800: "#2c333a",
+      900: "#22272b",
+      950: "#101214",
+    },
+    neutral: {
+      50: "#fafafa",
+      100: "#f5f5f5",
+      200: "#e5e5e5",
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717",
+      950: "#0a0a0a",
+    },
+    stone: {
+      50: "#fafaf9",
+      100: "#f5f5f4",
+      200: "#e7e5e4",
+      300: "#d6d3d1",
+      400: "#a8a29e",
+      500: "#78716c",
+      600: "#57534e",
+      700: "#44403c",
+      800: "#292524",
+      900: "#1c1917",
+      950: "#0c0a09",
+    },
+    space: {
+      0: "0px",
+      25: "2px",
+      50: "4px",
+      75: "6px",
+      100: "8px",
+      150: "12px",
+      200: "16px",
+      250: "20px",
+      300: "24px",
+      400: "32px",
+      500: "40px",
+      600: "48px",
+      800: "64px",
+      1000: "80px",
+    },
+  },
+  "aura/semantic": {
+    primary: {
+      50: "#f0fcfa",
+      100: "#d2eeeb",
+      200: "#a0cec8",
+      300: "#6fb5ad",
+      400: "#3e9f97",
+      500: "#1d7f78",
+      600: "#0c625c",
+      700: "#014d49",
+      800: "#0b3633",
+      900: "#012320",
+      950: "#012320",
+    },
+    anchor: {
+      gutter: "2px",
+    },
+    icon: {
+      size: "1rem",
+    },
+    disabled: {
+      opacity: "0.6",
+    },
+    form: {
+      field: {
+        padding: {
+          x: "0.75rem",
+          y: "0.5rem",
+        },
+        border: {
+          radius: "6px",
+        },
+        focus: {
+          ring: {
+            width: "0",
+            style: "none",
+            color: "rgba(0, 0, 0, 0)",
+            offset: "0",
+            shadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+          },
+        },
+        sm: {
+          font: {
+            size: "0.875rem",
+          },
+          padding: {
+            x: "0.625rem",
+            y: "0.375rem",
+          },
+        },
+        lg: {
+          font: {
+            size: "1.125rem",
+          },
+          padding: {
+            x: "0.875rem",
+            y: "0.625rem",
+          },
+        },
+        transition: {
+          duration: "150ms",
+        },
+      },
+    },
+    content: {
+      border: {
+        radius: "6px",
+      },
+    },
+    focus: {
+      ring: {
+        width: "1px",
+        color: "#1d7f78",
+        offset: "2px",
+        shadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+        stroke: "3px solid #1d7f78",
+        style: "solid",
+      },
+    },
+    list: {
+      padding: "0.25rem 0.25rem",
+      gap: "2px",
+      header: {
+        padding: "0.5rem 0.75rem 0.25rem 0.75rem",
+      },
+      option: {
+        padding: "0.5rem 0.75rem",
+        border: {
+          radius: "4px",
+        },
+        group: {
+          padding: "0.5rem 0.75rem",
+          font: {
+            weight: "600",
+          },
+        },
+      },
+    },
+    navigation: {
+      list: {
+        padding: "0.25rem 0.25rem",
+        gap: "2px",
+      },
+      item: {
+        padding: "0.5rem 0.75rem",
+        border: {
+          radius: "4px",
+        },
+        gap: "0.5rem",
+      },
+      submenu: {
+        label: {
+          padding: "0.5rem 0.75rem",
+          font: {
+            weight: "600",
+          },
+        },
+        icon: {
+          size: "0.875rem",
+        },
+      },
+    },
+    overlay: {
+      select: {
+        border: {
+          radius: "6px",
+        },
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+      popover: {
+        border: {
+          radius: "6px",
+        },
+        padding: "0.75rem",
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+      modal: {
+        border: {
+          radius: "12px",
+        },
+        padding: "1.25rem",
+        shadow:
+          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+      },
+      navigation: {
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+    },
+    transition: {
+      duration: "0.2s",
+    },
+  },
+  "aura/semantic/light": {
+    surface: {
+      0: "#ffffff",
+      50: "#f7f8f9",
+      100: "#f1f2f4",
+      200: "#dcdfe4",
+      300: "#b3b9c4",
+      400: "#8590a2",
+      500: "#758195",
+      600: "#626f86",
+      700: "#44546f",
+      800: "#2c3e5d",
+      900: "#172b4d",
+      950: "#091e42",
+    },
+    primary: {
+      color: "#1d7f78",
+      contrast: {
+        color: "#ffffff",
+      },
+      hover: {
+        color: "#0c625c",
+      },
+      active: {
+        color: "#014d49",
+      },
+    },
+    highlight: {
+      background: "#f0fcfa",
+      focus: {
+        background: "#d2eeeb",
+        color: "#0b3633",
+      },
+      color: "#014d49",
+    },
+    mask: {
+      background: "rgba(0, 0, 0, 0.4)",
+      color: "#dcdfe4",
+    },
+    form: {
+      field: {
+        background: "#ffffff",
+        disabled: {
+          background: "#dcdfe4",
+          color: "#758195",
+        },
+        filled: {
+          background: "#f7f8f9",
+          focus: {
+            background: "#f7f8f9",
+          },
+          hover: {
+            background: "#f7f8f9",
+          },
+        },
+        border: {
+          color: "#b3b9c4",
+        },
+        hover: {
+          border: {
+            color: "#8590a2",
+          },
+        },
+        focus: {
+          border: {
+            color: "#1d7f78",
+          },
+        },
+        invalid: {
+          border: {
+            color: "#ed6362",
+          },
+          placeholder: {
+            color: "#a42237",
+          },
+        },
+        placeholder: {
+          color: "#758195",
+        },
+        float: {
+          label: {
+            color: "#758195",
+            focus: {
+              color: "#758195",
+            },
+            invalid: {
+              color: "#a42237",
+            },
+            active: {
+              color: "#758195",
+            },
+          },
+        },
+        icon: {
+          color: "#8590a2",
+        },
+        shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+        color: "#44546f",
+      },
+    },
+    content: {
+      background: "#ffffff",
+      hover: {
+        background: "#f1f2f4",
+        color: "#2c3e5d",
+      },
+      border: {
+        color: "#dcdfe4",
+      },
+      color: "#44546f",
+    },
+    text: {
+      color: "#44546f",
+      hover: {
+        color: "#2c3e5d",
+        muted: {
+          color: "#626f86",
+        },
+      },
+      muted: {
+        color: "#758195",
+      },
+    },
+    overlay: {
+      select: {
+        background: "#ffffff",
+        border: {
+          color: "#dcdfe4",
+        },
+        color: "#44546f",
+      },
+      popover: {
+        background: "#ffffff",
+        border: {
+          color: "#dcdfe4",
+        },
+        color: "#44546f",
+      },
+      modal: {
+        background: "#ffffff",
+        border: {
+          color: "#dcdfe4",
+        },
+        color: "#44546f",
+      },
+    },
+    list: {
+      option: {
+        focus: {
+          background: "#f1f2f4",
+          color: "#2c3e5d",
+        },
+        selected: {
+          background: "#f0fcfa",
+          focus: {
+            background: "#d2eeeb",
+            color: "#0b3633",
+          },
+          color: "#014d49",
+        },
+        color: "#44546f",
+        icon: {
+          color: "#8590a2",
+          focus: {
+            color: "#758195",
+          },
+        },
+        group: {
+          background: "rgba(0, 0, 0, 0)",
+          color: "#758195",
+        },
+      },
+    },
+    navigation: {
+      item: {
+        focus: {
+          background: "#f1f2f4",
+          color: "#2c3e5d",
+        },
+        active: {
+          background: "#f1f2f4",
+          color: "#2c3e5d",
+        },
+        color: "#44546f",
+        icon: {
+          color: "#8590a2",
+          focus: {
+            color: "#758195",
+          },
+          active: {
+            color: "#758195",
+          },
+        },
+      },
+      submenu: {
+        label: {
+          background: "rgba(0, 0, 0, 0)",
+          color: "#758195",
+        },
+        icon: {
+          color: "#8590a2",
+          focus: {
+            color: "#758195",
+          },
+          active: {
+            color: "#758195",
+          },
+        },
+      },
+    },
+  },
+  "aura/semantic/dark": {
+    surface: {
+      0: "#ffffff",
+      50: "#dee4ea",
+      100: "#c7d1db",
+      200: "#b6c2cf",
+      300: "#9fadbc",
+      400: "#8c9bab",
+      500: "#738496",
+      600: "#596773",
+      700: "#454f59",
+      800: "#2c333a",
+      900: "#22272b",
+      950: "#101214",
+    },
+    primary: {
+      color: "#3e9f97",
+      contrast: {
+        color: "#22272b",
+      },
+      hover: {
+        color: "#6fb5ad",
+      },
+      active: {
+        color: "#a0cec8",
+      },
+    },
+    highlight: {
+      background: "rgb(24.314% 62.353% 59.216% / 0.16)",
+      focus: {
+        background: "rgb(24.314% 62.353% 59.216% / 0.24)",
+        color: "rgba(255, 255, 255, 0.87)",
+      },
+      color: "rgba(255, 255, 255, 0.87)",
+    },
+    mask: {
+      background: "rgba(0, 0, 0, 0.6)",
+      color: "#b6c2cf",
+    },
+    form: {
+      field: {
+        background: "#101214",
+        disabled: {
+          background: "#454f59",
+          color: "#8c9bab",
+        },
+        filled: {
+          background: "#2c333a",
+          focus: {
+            background: "#2c333a",
+          },
+          hover: {
+            background: "#2c333a",
+          },
+        },
+        border: {
+          color: "#596773",
+        },
+        hover: {
+          border: {
+            color: "#738496",
+          },
+        },
+        focus: {
+          border: {
+            color: "#1d7f78",
+          },
+        },
+        invalid: {
+          border: {
+            color: "#fa877e",
+          },
+          placeholder: {
+            color: "#ed6362",
+          },
+        },
+        placeholder: {
+          color: "#8c9bab",
+        },
+        float: {
+          label: {
+            color: "#8c9bab",
+            focus: {
+              color: "#8c9bab",
+            },
+            invalid: {
+              color: "#ed6362",
+            },
+            active: {
+              color: "#8c9bab",
+            },
+          },
+        },
+        icon: {
+          color: "#8c9bab",
+        },
+        shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+        color: "#ffffff",
+      },
+    },
+    content: {
+      background: "#22272b",
+      hover: {
+        background: "#2c333a",
+        color: "#ffffff",
+      },
+      border: {
+        color: "#454f59",
+      },
+      color: "#ffffff",
+    },
+    text: {
+      color: "#ffffff",
+      hover: {
+        color: "#ffffff",
+        muted: {
+          color: "#9fadbc",
+        },
+      },
+      muted: {
+        color: "#8c9bab",
+      },
+    },
+    overlay: {
+      select: {
+        background: "#22272b",
+        border: {
+          color: "#454f59",
+        },
+        color: "#ffffff",
+      },
+      popover: {
+        background: "#22272b",
+        border: {
+          color: "#454f59",
+        },
+        color: "#ffffff",
+      },
+      modal: {
+        background: "#22272b",
+        border: {
+          color: "#454f59",
+        },
+        color: "#ffffff",
+      },
+    },
+    list: {
+      option: {
+        focus: {
+          background: "#2c333a",
+          color: "#ffffff",
+        },
+        selected: {
+          background: "rgb(24.314% 62.353% 59.216% / 0.16)",
+          focus: {
+            background: "rgb(24.314% 62.353% 59.216% / 0.24)",
+            color: "rgba(255, 255, 255, 0.87)",
+          },
+          color: "rgba(255, 255, 255, 0.87)",
+        },
+        color: "#ffffff",
+        icon: {
+          color: "#738496",
+          focus: {
+            color: "#8c9bab",
+          },
+        },
+        group: {
+          background: "rgba(0, 0, 0, 0)",
+          color: "#8c9bab",
+        },
+      },
+    },
+    navigation: {
+      item: {
+        focus: {
+          background: "#2c333a",
+          color: "#ffffff",
+        },
+        active: {
+          background: "#2c333a",
+          color: "#ffffff",
+        },
+        color: "#ffffff",
+        icon: {
+          color: "#738496",
+          focus: {
+            color: "#8c9bab",
+          },
+          active: {
+            color: "#8c9bab",
+          },
+        },
+      },
+      submenu: {
+        label: {
+          background: "rgba(0, 0, 0, 0)",
+          color: "#8c9bab",
+        },
+        icon: {
+          color: "#738496",
+          focus: {
+            color: "#8c9bab",
+          },
+          active: {
+            color: "#8c9bab",
+          },
+        },
+      },
+    },
+  },
+};