feat(ui): consolidate and simplify how we use colors

* reconciles latest color variables from Figma * defines the primary colors and the color system in tailwind config. * refines how we generate utilities within the color system for `bg`, `fg` and `border`. * removes custom box shadows, instead leaning on direct definition in CSS and `theme()`. This change removes duplicate color information being defined as CSS variables in `index.css` and co-locates all style information with the component whilst retaining the ability to tie in to the color system when mapping styles from Figma.
2025-06-18 17:10:12 +01:00
parent 4c0ad55e35
commit 519b24ba0f
13 changed files with 306 additions and 342 deletions
--- a/pkgs/clan-app/ui/package.json
+++ b/pkgs/clan-app/ui/package.json
@@ -11,6 +11,7 @@
    "serve": "vite preview",
    "check": "tsc --noEmit --skipLibCheck && eslint ./src --fix",
    "test": "vitest run --project unit --typecheck",
+    "vite": "vite",
    "storybook": "storybook",
    "knip": "knip --fix",
    "storybook-build": "storybook build",
--- a/pkgs/clan-app/ui/src/components/Button/Button-Dark.css
+++ b/pkgs/clan-app/ui/src/components/Button/Button-Dark.css
@@ -27,5 +27,5 @@
 }

 .button--dark-active:active {
-  @apply active:border-secondary-900 active:shadow-button-primary-active;
+  @apply active:border-secondary-900;
 }
--- a/pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
+++ b/pkgs/clan-app/ui/src/components/Button/Button-Ghost.css
@@ -7,5 +7,5 @@
 }

 .button--ghost-active:active {
-  @apply active:bg-secondary-200 active:text-secondary-900 active:shadow-button-primary-active;
+  @apply active:bg-secondary-200 active:text-secondary-900;
 }
--- a/pkgs/clan-app/ui/src/components/Button/Button-Light.css
+++ b/pkgs/clan-app/ui/src/components/Button/Button-Light.css
@@ -27,7 +27,7 @@
 }

 .button--light-active:active {
-  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900 active:shadow-button-primary-active;
+  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900;

  box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);

--- a/pkgs/clan-app/ui/src/components/inputBase/index.tsx
+++ b/pkgs/clan-app/ui/src/components/inputBase/index.tsx
@@ -124,7 +124,7 @@ export const InputLabel = (props: InputLabelProps) => {
            weight="bold"
            class="inline-flex gap-1 align-middle !fg-def-1"
            classList={{
-              [cx("!fg-semantic-1")]: !!props.error,
+              [cx("!fg-semantic-info-1")]: !!props.error,
            }}
            aria-invalid={props.error}
          >
@@ -184,7 +184,7 @@ export const InputError = (props: InputErrorProps) => {
      // @ts-expect-error: Dependent type is to complex to check how it is coupled to the override for now
      size="xxs"
      weight="medium"
-      class={cx("col-span-full px-1 !fg-semantic-4", typoClasses)}
+      class={cx("col-span-full px-1 !fg-semantic-info-4", typoClasses)}
      {...rest}
    >
      {props.error}
--- a/pkgs/clan-app/ui/src/components/v2/Button/Button.css
+++ b/pkgs/clan-app/ui/src/components/v2/Button/Button.css
@@ -25,23 +25,32 @@
  &.primary {
    @apply bg-inv-acc-4 fg-inv-1;
    @apply border border-solid border-inv-4;
-    @apply shadow-button-primary;
+
+    box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.3) inset;

    &.ghost {
      @apply bg-transparent border-none shadow-none;
    }

    &:hover {
-      @apply bg-inv-acc-3 border-solid shadow-button-primary-hover;
-      border-color: theme(backgroundColor.secondary.700);
+      @apply bg-inv-acc-3 border-solid border-inv-acc-3;
+      box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:active {
-      @apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-active;
+      @apply bg-inv-acc-4 border-solid border-inv-3;
+      box-shadow:
+        0 0 0 0.0625rem theme(colors.off.white),
+        0 0 0 0.125rem theme(colors.bg.inv.acc.4),
+        -0.125rem -0.125rem 0 0 theme(colors.bg.inv.acc.1) inset;
    }

    &:focus-visible {
-      @apply bg-inv-acc-4 border-solid border-inv-3 shadow-button-primary-focus;
+      @apply bg-inv-acc-4 border-solid border-inv-3;
+      box-shadow:
+        0 0 0 0.0625rem theme(colors.off.white),
+        0 0 0 0.125rem theme(colors.border.semantic.info.1),
+        0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:disabled {
@@ -56,23 +65,37 @@
  &.secondary {
    @apply bg-def-acc-2 fg-def-1;
    @apply border border-solid border-inv-2;
-    @apply shadow-button-secondary;
+
+    box-shadow:
+      -0.125rem -0.125rem 0 0 #cedfe2 inset,
+      0.125rem 0.125rem 0 0 theme(colors.off.white) inset;

    &.ghost {
      @apply bg-transparent border-none shadow-none;
    }

    &:hover {
-      @apply bg-def-acc-3 border-solid shadow-button-secondary-hover;
-      border-color: theme(backgroundColor.secondary.700);
+      @apply bg-def-acc-3 border-solid border-inv-3;
+      box-shadow:
+        -0.125rem -0.125rem 0 0 #cedfe2 inset,
+        0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
    }

    &:focus-visible {
-      @apply bg-def-acc-3 border-solid border-inv-3 shadow-button-secondary-focus;
+      @apply bg-def-acc-3 border-solid border-inv-3;
+      box-shadow:
+        0 0 0 0.0625rem theme(colors.off.white),
+        0 0 0 0.125rem theme(colors.border.semantic.info.1),
+        -0.125rem -0.125rem 0 0 #cedfe2 inset,
+        0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
    }

    &:active {
-      @apply bg-def-acc-3 border-solid border-inv-4 shadow-button-secondary-active;
+      @apply bg-def-acc-3 border-solid border-inv-4;
+      box-shadow:
+        0 0 0 0.0625rem theme(colors.off.white),
+        0 0 0 0.125rem theme(colors.bg.inv.acc.4),
+        0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.2) inset;
    }

    &:disabled {
--- a/pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
+++ b/pkgs/clan-app/ui/src/components/v2/Button/Button.tsx
@@ -99,8 +99,7 @@ export const Button = (props: ButtonProps) => {
          hierarchy="label"
          family="mono"
          size={local.size || "default"}
-          color="inherit"
-          inverted={local.hierarchy === "secondary"}
+          inverted={local.hierarchy === "primary"}
          weight="bold"
          tag="span"
        >
--- a/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.css
+++ b/pkgs/clan-app/ui/src/components/v2/MachineStatus/MachineStatus.css
@@ -6,14 +6,14 @@ span.tag-status {
  }

  &.online > .indicator {
-    background-color: #0ae856; /* todo get from theme */
+    background-color: theme(colors.fg.semantic.success.1);
  }

  &.offline > .indicator {
-    background-color: #ff2c78; /* todo get from theme */
+    background-color: theme(colors.fg.semantic.error.1);
  }

  &.installed > .indicator {
-    background-color: var(--clr-fg-inv-3);
+    background-color: theme(colors.fg.inv.3);
  }
 }
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.css
+++ b/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavBody.css
@@ -13,8 +13,8 @@ div.sidebar-body {

  background: linear-gradient(
    180deg,
-    var(--clr-bg-inv-1) 0%,
-    var(--clr-bg-inv-3) 100%
+    theme(colors.bg.inv.1) 0%,
+    theme(colors.bg.inv.3) 100%
  );

  @apply backdrop-blur-sm;
--- a/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.css
+++ b/pkgs/clan-app/ui/src/components/v2/Sidebar/SidebarNavHeader.css
@@ -4,8 +4,8 @@ div.sidebar-header {

  background: linear-gradient(
    90deg,
-    var(--clr-bg-inv-3) 0%,
-    var(--clr-bg-inv-4) 100%
+    theme(colors.bg.inv.3) 0%,
+    theme(colors.bg.inv.4) 0%
  );

  & > .dropdown-trigger {
--- a/pkgs/clan-app/ui/src/components/v2/index.css
+++ b/pkgs/clan-app/ui/src/components/v2/index.css
@@ -1,6 +1,8 @@
 /* Material icons removed - using custom icons */
 /* @import url(./components/Typography/css/typography.css); */

+@config "../../../tailwind.config.ts";
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -47,47 +49,6 @@
  src: url(../../../.fonts/CommitMono-400-Regular.otf) format("otf");
 }

-:root {
-  --clr-bg-def-1: theme(colors.white);
-  --clr-bg-def-2: theme(colors.primary.50);
-  --clr-bg-def-3: theme(colors.secondary.100);
-  --clr-bg-def-4: theme(colors.secondary.200);
-
-  --clr-border-def-1: theme(colors.secondary.50);
-  --clr-border-def-2: theme(colors.secondary.100);
-  --clr-border-def-3: theme(colors.secondary.200);
-  --clr-border-def-4: theme(colors.secondary.300);
-
-  --clr-border-def-sem-inf-1: theme(colors.info.500);
-  --clr-border-def-sem-inf-2: theme(colors.info.600);
-  --clr-border-def-sem-inf-3: theme(colors.info.700);
-  --clr-border-def-sem-inf-4: theme(colors.info.800);
-
-  --clr-bg-inv-1: theme(colors.primary.600);
-  --clr-bg-inv-2: theme(colors.primary.700);
-  --clr-bg-inv-3: theme(colors.primary.800);
-  --clr-bg-inv-4: theme(colors.primary.900);
-
-  --clr-border-inv-1: theme(colors.secondary.700);
-  --clr-border-inv-2: theme(colors.secondary.800);
-  --clr-border-inv-3: theme(colors.secondary.900);
-  --clr-border-inv-4: theme(colors.secondary.950);
-
-  --clr-bg-inv-acc-1: theme(colors.secondary.500);
-  --clr-bg-inv-acc-2: theme(colors.secondary.600);
-  --clr-bg-inv-acc-3: theme(colors.secondary.700);
-
-  --clr-fg-def-1: theme(colors.secondary.950);
-  --clr-fg-def-2: theme(colors.secondary.900);
-  --clr-fg-def-3: theme(colors.secondary.700);
-  --clr-fg-def-4: theme(colors.secondary.400);
-
-  --clr-fg-inv-1: theme(colors.white);
-  --clr-fg-inv-2: theme(colors.secondary.100);
-  --clr-fg-inv-3: theme(colors.secondary.300);
-  --clr-fg-inv-4: theme(colors.secondary.400);
-}
-
 html {
  @apply font-sans;
  overflow-x: hidden;
--- a/pkgs/clan-app/ui/src/index.css
+++ b/pkgs/clan-app/ui/src/index.css
@@ -1,6 +1,8 @@
 /* Material icons removed - using custom icons */
 /* @import url(./components/Typography/css/typography.css); */

+@config "../tailwind.config.ts";
+
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/pkgs/clan-app/ui/tailwind/core-plugin.ts
+++ b/pkgs/clan-app/ui/tailwind/core-plugin.ts
@@ -1,94 +1,267 @@
 import plugin from "tailwindcss/plugin";
 // @ts-expect-error: lib of tailwind has no types
 import { parseColor } from "tailwindcss/lib/util/color";
+import { CSSRuleObject, RecursiveKeyValuePair } from "tailwindcss/types/config";

 /* Converts HEX color to RGB */
 const toRGB = (value: string) =>
  "rgb(" + parseColor(value).color.join(" ") + ")";

-const mkBorderUtils = (
-  theme: (n: string) => unknown,
-  prefix: string,
-  cssProperty: string,
-) => ({
-  // - def colors
-  [`.${prefix}-def-1`]: {
-    [cssProperty]: theme("colors.secondary.100"),
+const primaries = {
+  off: {
+    white: toRGB("#ffffff"),
+    black: toRGB("#000000"),
  },
-  [`.${prefix}-def-2`]: {
-    [cssProperty]: theme("colors.secondary.200"),
+  primary: {
+    50: toRGB("#f4f9f9"),
+    100: toRGB("#dbeceb"),
+    200: toRGB("#b6d9d6"),
+    300: toRGB("#8abebc"),
+    400: toRGB("#478585"),
+    500: toRGB("#526f6f"),
+    600: toRGB("#4b6767"),
+    700: toRGB("#345253"),
+    800: toRGB("#2e4a4b"),
+    900: toRGB("#203637"),
+    950: toRGB("#162324"),
  },
-  [`.${prefix}-def-3`]: {
-    [cssProperty]: theme("colors.secondary.300"),
+  secondary: {
+    50: toRGB("#f7f9fa"),
+    100: toRGB("#e7f2f4"),
+    200: toRGB("#d8e8eb"),
+    300: toRGB("#afc6ca"),
+    400: toRGB("#90b2b7"),
+    500: toRGB("#7b9b9f"),
+    600: toRGB("#4f747a"),
+    700: toRGB("#415e63"),
+    800: toRGB("#446065"),
+    900: toRGB("#2c4347"),
+    950: toRGB("#0d1416"),
  },
-  [`.${prefix}-def-4`]: {
-    [cssProperty]: theme("colors.secondary.400"),
+  error: {
+    50: toRGB("#fff0f4"),
+    100: toRGB("#ffe2ea"),
+    200: toRGB("#ffcadb"),
+    300: toRGB("#ff9fbd"),
+    400: toRGB("#ff699b"),
+    500: toRGB("#ff2c78"),
+    600: toRGB("#ed116b"),
+    700: toRGB("#c8085b"),
+    800: toRGB("#a80953"),
+    900: toRGB("#8f0c4d"),
+    950: toRGB("#500126"),
  },
-  // - def acc colors
-  [`.${prefix}-def-acc-1`]: {
-    [cssProperty]: theme("colors.secondary.500"),
+  info: {
+    50: toRGB("#eff9ff"),
+    100: toRGB("#d6ebff"),
+    200: toRGB("#b5deff"),
+    300: toRGB("#83cbff"),
+    400: toRGB("#48adff"),
+    500: toRGB("#1e88ff"),
+    600: toRGB("#0666ff"),
+    700: toRGB("#0051ff"),
+    800: toRGB("#083fc5"),
+    900: toRGB("#0d3a9b"),
+    950: toRGB("#0e245d"),
  },
-  [`.${prefix}-def-acc-2`]: {
-    [cssProperty]: theme("colors.secondary.900"),
+  success: {
+    50: toRGB("#eefff3"),
+    100: toRGB("#d7ffe4"),
+    200: toRGB("#b2ffcb"),
+    300: toRGB("#76ffa4"),
+    400: toRGB("#34f475"),
+    500: toRGB("#0ae856"),
+    600: toRGB("#01b83f"),
+    700: toRGB("#059035"),
+    800: toRGB("#0a712e"),
+    900: toRGB("#0b5c29"),
+    950: toRGB("#003414"),
  },
-  [`.${prefix}-def-acc-3`]: {
-    [cssProperty]: theme("colors.secondary.900"),
-  },
-  [`.${prefix}-def-acc-4`]: {
-    [cssProperty]: theme("colors.secondary.950"),
-  },
-  // - inverse colors
-  [`.${prefix}-inv-1`]: {
-    [cssProperty]: theme("colors.secondary.700"),
-  },
-  [`.${prefix}-inv-2`]: {
-    [cssProperty]: theme("colors.secondary.800"),
-  },
-  [`.${prefix}-inv-3`]: {
-    [cssProperty]: theme("colors.secondary.900"),
-  },
-  [`.${prefix}-inv-4`]: {
-    [cssProperty]: theme("colors.secondary.950"),
-  },
-  // - inverse acc
-  [`.${prefix}-inv-acc-1`]: {
-    [cssProperty]: theme("colors.secondary.300"),
-  },
-  [`.${prefix}-inv-acc-2`]: {
-    [cssProperty]: theme("colors.secondary.200"),
-  },
-  [`.${prefix}-inv-acc-3`]: {
-    [cssProperty]: theme("colors.secondary.100"),
-  },
-  [`.${prefix}-inv-acc-4`]: {
-    [cssProperty]: theme("colors.secondary.50"),
-  },
-  [`.${prefix}-int-1`]: {
-    [cssProperty]: theme("colors.info.500"),
-  },
-  [`.${prefix}-int-2`]: {
-    [cssProperty]: theme("colors.info.600"),
-  },
-  [`.${prefix}-int-3`]: {
-    [cssProperty]: theme("colors.info.700"),
-  },
-  [`.${prefix}-int-4`]: {
-    [cssProperty]: theme("colors.info.800"),
+  warning: {
+    50: toRGB("#feffe4"),
+    100: toRGB("#faffc4"),
+    200: toRGB("#faffc4"),
+    300: toRGB("#e8ff50"),
+    400: toRGB("#d4ff00"),
+    500: toRGB("#b9e600"),
+    600: toRGB("#90b800"),
+    700: toRGB("#6c8b00"),
+    800: toRGB("#556d07"),
+    900: toRGB("#485c0b"),
+    950: toRGB("#253400"),
  },
+};

-  [`.${prefix}-semantic-1`]: {
-    [cssProperty]: theme("colors.error.500"),
+const colorSystem = {
+  bg: {
+    def: {
+      1: primaries.off.white,
+      2: primaries.secondary["50"],
+      3: primaries.secondary["100"],
+      4: primaries.secondary["200"],
+      acc: {
+        1: primaries.primary["50"],
+        2: primaries.secondary["100"],
+        3: primaries.secondary["200"],
+        4: primaries.secondary["300"],
+      },
+    },
+    semantic: {
+      error: {
+        1: primaries.error["50"],
+        2: primaries.error["100"],
+        3: primaries.error["200"],
+        4: primaries.error["300"],
+      },
+      info: {
+        1: primaries.info["50"],
+        2: primaries.info["100"],
+        3: primaries.info["200"],
+        4: primaries.info["300"],
+      },
+      success: {
+        1: primaries.success["50"],
+        2: primaries.success["100"],
+        3: primaries.success["200"],
+        4: primaries.success["300"],
+      },
+      warning: {
+        1: primaries.warning["50"],
+        2: primaries.warning["100"],
+        3: primaries.warning["200"],
+        4: primaries.warning["300"],
+      },
+    },
+    inv: {
+      1: primaries.primary["600"],
+      2: primaries.primary["700"],
+      3: primaries.primary["800"],
+      4: primaries.primary["900"],
+      acc: {
+        1: primaries.secondary["500"],
+        2: primaries.secondary["600"],
+        3: primaries.secondary["900"],
+        4: primaries.secondary["950"],
+      },
+    },
  },
-  [`.${prefix}-semantic-2`]: {
-    [cssProperty]: theme("colors.error.600"),
+  border: {
+    def: {
+      1: primaries.secondary["100"],
+      2: primaries.secondary["200"],
+      3: primaries.secondary["300"],
+      4: primaries.secondary["400"],
+      acc: {
+        1: primaries.secondary["500"],
+        2: primaries.secondary["900"],
+        3: primaries.secondary["900"],
+        4: primaries.secondary["950"],
+      },
+    },
+    semantic: {
+      error: {
+        1: primaries.error["100"],
+        2: primaries.error["200"],
+        3: primaries.error["300"],
+        4: primaries.error["400"],
+      },
+      info: {
+        1: primaries.info["100"],
+        2: primaries.info["200"],
+        3: primaries.info["300"],
+        4: primaries.info["400"],
+      },
+      success: {
+        1: primaries.success["100"],
+        2: primaries.success["200"],
+        3: primaries.success["300"],
+        4: primaries.success["400"],
+      },
+      warning: {
+        1: primaries.warning["100"],
+        2: primaries.warning["200"],
+        3: primaries.warning["300"],
+        4: primaries.warning["400"],
+      },
+    },
+    inv: {
+      1: primaries.secondary["700"],
+      2: primaries.secondary["800"],
+      3: primaries.secondary["900"],
+      4: primaries.secondary["950"],
+      acc: {
+        1: primaries.secondary["300"],
+        2: primaries.secondary["200"],
+        3: primaries.secondary["100"],
+        4: primaries.secondary["50"],
+      },
+    },
  },
-  [`.${prefix}-semantic-3`]: {
-    [cssProperty]: theme("colors.error.700"),
+  fg: {
+    def: {
+      1: primaries.secondary["950"],
+      2: primaries.secondary["900"],
+      3: primaries.secondary["700"],
+      4: primaries.secondary["400"],
+    },
+    inv: {
+      1: primaries.off.white,
+      2: primaries.secondary["100"],
+      3: primaries.secondary["300"],
+      4: primaries.secondary["400"],
+    },
+    semantic: {
+      error: {
+        1: primaries.error["500"],
+        2: primaries.error["600"],
+        3: primaries.error["700"],
+        4: primaries.error["800"],
+      },
+      info: {
+        1: primaries.info["500"],
+        2: primaries.info["600"],
+        3: primaries.info["700"],
+        4: primaries.info["800"],
+      },
+      success: {
+        1: primaries.success["500"],
+        2: primaries.success["600"],
+        3: primaries.success["700"],
+        4: primaries.success["800"],
+      },
+      warning: {
+        1: primaries.warning["500"],
+        2: primaries.warning["600"],
+        3: primaries.warning["700"],
+        4: primaries.warning["800"],
+      },
+    },
  },
-  [`.${prefix}-semantic-4`]: {
-    [cssProperty]: theme("colors.error.800"),
-  },
-});
+};
+
+function isString(value: unknown): value is string {
+  return typeof value === "string";
+}
+
+const mkColorUtil = (
+  path: string[],
+  property: string,
+  config: string | RecursiveKeyValuePair,
+): CSSRuleObject => {
+  if (isString(config)) {
+    return {
+      [`.${path.join("-")}`]: {
+        [`${property}`]: config,
+      },
+    };
+  }
+
+  return Object.entries(config as RecursiveKeyValuePair)
+    .map(([subKey, subConfig]) =>
+      mkColorUtil([...path, subKey], property, subConfig),
+    )
+    .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+};

 export default plugin.withOptions(
  (_options = {}) =>
@@ -100,219 +273,24 @@ export default plugin.withOptions(
          return `.${e(`popover-open${separator}${className}`)}:popover-open`;
        });
      });
-      addUtilities({
-        // Background colors

-        // default
-        ".bg-def-1": {
-          backgroundColor: theme("colors.white"),
-        },
-        ".bg-def-2": {
-          backgroundColor: theme("colors.secondary.50"),
-        },
-        ".bg-def-3": {
-          backgroundColor: theme("colors.secondary.100"),
-        },
-        ".bg-def-4": {
-          backgroundColor: theme("colors.secondary.200"),
-        },
-        // default accessible
-        ".bg-def-acc-1": {
-          backgroundColor: theme("colors.primary.50"),
-        },
-        ".bg-def-acc-2": {
-          backgroundColor: theme("colors.secondary.100"),
-        },
-        ".bg-def-acc-3": {
-          backgroundColor: theme("colors.secondary.200"),
-        },
-        ".bg-def-acc-4": {
-          backgroundColor: theme("colors.secondary.300"),
-        },
-        // bg inverse
-        ".bg-inv-1": {
-          backgroundColor: theme("colors.primary.600"),
-        },
-        ".bg-inv-2": {
-          backgroundColor: theme("colors.primary.700"),
-        },
-        ".bg-inv-3": {
-          backgroundColor: theme("colors.primary.800"),
-        },
-        ".bg-inv-4": {
-          backgroundColor: theme("colors.primary.900"),
-        },
-        // bg inverse accessible
-        ".bg-inv-acc-1": {
-          backgroundColor: theme("colors.secondary.500"),
-        },
-        ".bg-inv-acc-2": {
-          backgroundColor: theme("colors.secondary.600"),
-        },
-        ".bg-inv-acc-3": {
-          backgroundColor: theme("colors.secondary.700"),
-        },
-        ".bg-inv-acc-4": {
-          backgroundColor: theme("colors.primary.950"),
-        },
+      const { bg, fg, border } = colorSystem;

-        // bg inverse accent
-        ".bg-semantic-1": {
-          backgroundColor: theme("colors.error.50"),
-        },
-        ".bg-semantic-2": {
-          backgroundColor: theme("colors.error.100"),
-        },
-        ".bg-semantic-3": {
-          backgroundColor: theme("colors.error.200"),
-        },
-        ".bg-semantic-4": {
-          backgroundColor: theme("colors.error.300"),
-        },
-
-        // Text colors
-        ".fg-def-1": {
-          color: theme("colors.secondary.950"),
-        },
-        ".fg-def-2": {
-          color: theme("colors.secondary.900"),
-        },
-        ".fg-def-3": {
-          color: theme("colors.secondary.700"),
-        },
-        ".fg-def-4": {
-          color: theme("colors.secondary.400"),
-        },
-        // fg inverse
-        ".fg-inv-1": {
-          color: theme("colors.white"),
-        },
-        ".fg-inv-2": {
-          color: theme("colors.secondary.100"),
-        },
-        ".fg-inv-3": {
-          color: theme("colors.secondary.300"),
-        },
-        ".fg-inv-4": {
-          color: theme("colors.secondary.400"),
-        },
-
-        ".fg-semantic-1": {
-          color: theme("colors.error.500"),
-        },
-        ".fg-semantic-2": {
-          color: theme("colors.error.600"),
-        },
-        ".fg-semantic-3": {
-          color: theme("colors.error.700"),
-        },
-        ".fg-semantic-4": {
-          color: theme("colors.error.800"),
-        },
-
-        ...mkBorderUtils(theme, "border", "borderColor"),
-        ...mkBorderUtils(theme, "border-b", "borderBottom"),
-        ...mkBorderUtils(theme, "border-t", "borderTop"),
-        ...mkBorderUtils(theme, "border-l", "borderLeft"),
-        ...mkBorderUtils(theme, "border-r", "borderRight"),
-
-        // Example: dark mode utilities (all elements within <html class="dark"> )
-        // ".dark .bg-def-1": {
-        //   backgroundColor: theme("colors.black"),
-        // },
-        // ".dark .bg-def-2": {
-        //   backgroundColor: theme("colors.primary.900"),
-        // },
-        // ".dark .bg-def-3": {
-        //   backgroundColor: theme("colors.primary.800"),
-        // },
-        // ".dark .bg-def-4": {
-        //   backgroundColor: theme("colors.primary.700"),
-        // },
-        // ".dark .bg-def-5": {
-        //   backgroundColor: theme("colors.primary.600"),
-        // },
-      });
-      // add more base styles
+      addUtilities(mkColorUtil(["bg"], "backgroundColor", bg));
+      addUtilities(mkColorUtil(["fg"], "color", fg));
+      addUtilities(mkColorUtil(["border"], "borderColor", border));
+      addUtilities(mkColorUtil(["border-t"], "borderTop", border));
+      addUtilities(mkColorUtil(["border-r"], "borderRight", border));
+      addUtilities(mkColorUtil(["border-b"], "borderBottom", border));
+      addUtilities(mkColorUtil(["border-l"], "borderLeft", border));
    },
  // add configuration which is merged with the final config
  () => ({
    theme: {
      extend: {
        colors: {
-          white: toRGB("#ffffff"),
-          black: toRGB("#000000"),
-          primary: {
-            50: toRGB("#f4f9f9"),
-            100: toRGB("#dbeceb"),
-            200: toRGB("#b6d9d6"),
-            300: toRGB("#8abebc"),
-            400: toRGB("#478585"),
-            500: toRGB("#526f6f"),
-            600: toRGB("#4b6767"),
-            700: toRGB("#345253"),
-            800: toRGB("#2e4a4b"),
-            900: toRGB("#203637"),
-            950: toRGB("#162324"),
-          },
-          secondary: {
-            50: toRGB("#f7f9fA"),
-            100: toRGB("#e7f2f4"),
-            200: toRGB("#d8e8eb"),
-            300: toRGB("#afc6ca"),
-            400: toRGB("#90b2b7"),
-            500: toRGB("#7b9b9f"),
-            600: toRGB("#4f747A"),
-            700: toRGB("#415e63"),
-            800: toRGB("#446065"),
-            900: toRGB("#2c4347"),
-            950: toRGB("#0d1416"),
-          },
-          info: {
-            50: toRGB("#eff9ff"),
-            100: toRGB("#dff2ff"),
-            200: toRGB("#b8e8ff"),
-            300: toRGB("#78d6ff"),
-            400: toRGB("#2cc0ff"),
-            500: toRGB("#06aaf1"),
-            600: toRGB("#006ca7"),
-            700: toRGB("#006ca7"),
-            800: toRGB("#025b8a"),
-            900: toRGB("#084c72"),
-            950: toRGB("#06304b"),
-          },
-          error: {
-            50: toRGB("#fcf3f8"),
-            100: toRGB("#f9eaf4"),
-            200: toRGB("#f5d5e9"),
-            300: toRGB("#ea9ecb"),
-            400: toRGB("#e383ba"),
-            500: toRGB("#d75d9f"),
-            600: toRGB("#c43e81"),
-            700: toRGB("#a82e67"),
-            800: toRGB("#8c2855"),
-            900: toRGB("#75264a"),
-            950: toRGB("#461129"),
-          },
-        },
-        boxShadow: {
-          "input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
-          "button-primary":
-            "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
-          "button-primary-hover":
-            "2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
-          "button-primary-focus":
-            "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-border-def-sem-inf-1, #06AAF1), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
-          "button-primary-active":
-            "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), -2px -2px 0px 0px var(--clr-bg-inv-acc-1, #7B9B9F) inset",
-          "button-secondary":
-            "-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
-          "button-secondary-hover":
-            "-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px #FFF inset",
-          "button-secondary-focus":
-            "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-border-def-sem-inf-1, #06AAF1), -2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px #FFF inset",
-          "button-secondary-active":
-            "0px 0px 0px 1px white, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
+          ...primaries,
+          ...colorSystem,
        },
      },
    },