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.

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",

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;
 }

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;
 }

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);
 

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}

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;
+      @apply bg-inv-acc-3 border-solid border-inv-acc-3;
-      border-color: theme(backgroundColor.secondary.700);
+      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;
+      @apply bg-def-acc-3 border-solid border-inv-3;
-      border-color: theme(backgroundColor.secondary.700);
+      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 {

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 === "primary"}
-          inverted={local.hierarchy === "secondary"}
           weight="bold"
           tag="span"
         >

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);
   }
 }

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%,
+    theme(colors.bg.inv.1) 0%,
-    var(--clr-bg-inv-3) 100%
+    theme(colors.bg.inv.3) 100%
   );
 
   @apply backdrop-blur-sm;

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%,
+    theme(colors.bg.inv.3) 0%,
-    var(--clr-bg-inv-4) 100%
+    theme(colors.bg.inv.4) 0%
   );
 
   & > .dropdown-trigger {

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;

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;

pkgs/clan-app/ui/tailwind/core-plugin.ts

@@ -1,247 +1,17 @@
 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 = (
+const primaries = {
-  theme: (n: string) => unknown,
+  off: {
-  prefix: string,
-  cssProperty: string,
-) => ({
-  // - def colors
-  [`.${prefix}-def-1`]: {
-    [cssProperty]: theme("colors.secondary.100"),
-  },
-  [`.${prefix}-def-2`]: {
-    [cssProperty]: theme("colors.secondary.200"),
-  },
-  [`.${prefix}-def-3`]: {
-    [cssProperty]: theme("colors.secondary.300"),
-  },
-  [`.${prefix}-def-4`]: {
-    [cssProperty]: theme("colors.secondary.400"),
-  },
-  // - def acc colors
-  [`.${prefix}-def-acc-1`]: {
-    [cssProperty]: theme("colors.secondary.500"),
-  },
-  [`.${prefix}-def-acc-2`]: {
-    [cssProperty]: theme("colors.secondary.900"),
-  },
-  [`.${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"),
-  },
-
-  [`.${prefix}-semantic-1`]: {
-    [cssProperty]: theme("colors.error.500"),
-  },
-  [`.${prefix}-semantic-2`]: {
-    [cssProperty]: theme("colors.error.600"),
-  },
-  [`.${prefix}-semantic-3`]: {
-    [cssProperty]: theme("colors.error.700"),
-  },
-  [`.${prefix}-semantic-4`]: {
-    [cssProperty]: theme("colors.error.800"),
-  },
-});
-
-export default plugin.withOptions(
-  (_options = {}) =>
-    ({ addUtilities, theme, addVariant, e }) => {
-      // @ts-expect-error: lib of tailwind has no types
-      addVariant("popover-open", ({ modifySelectors, separator }) => {
-        // @ts-expect-error: lib of tailwind has no types
-        modifySelectors(({ className }) => {
-          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"),
-        },
-
-        // 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
-    },
-  // 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"),
@@ -256,63 +26,271 @@ export default plugin.withOptions(
     950: toRGB("#162324"),
   },
   secondary: {
-            50: toRGB("#f7f9fA"),
+    50: toRGB("#f7f9fa"),
     100: toRGB("#e7f2f4"),
     200: toRGB("#d8e8eb"),
     300: toRGB("#afc6ca"),
     400: toRGB("#90b2b7"),
     500: toRGB("#7b9b9f"),
-            600: toRGB("#4f747A"),
+    600: toRGB("#4f747a"),
     700: toRGB("#415e63"),
     800: toRGB("#446065"),
     900: toRGB("#2c4347"),
     950: toRGB("#0d1416"),
   },
+  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"),
+  },
   info: {
     50: toRGB("#eff9ff"),
-            100: toRGB("#dff2ff"),
+    100: toRGB("#d6ebff"),
-            200: toRGB("#b8e8ff"),
+    200: toRGB("#b5deff"),
-            300: toRGB("#78d6ff"),
+    300: toRGB("#83cbff"),
-            400: toRGB("#2cc0ff"),
+    400: toRGB("#48adff"),
-            500: toRGB("#06aaf1"),
+    500: toRGB("#1e88ff"),
-            600: toRGB("#006ca7"),
+    600: toRGB("#0666ff"),
-            700: toRGB("#006ca7"),
+    700: toRGB("#0051ff"),
-            800: toRGB("#025b8a"),
+    800: toRGB("#083fc5"),
-            900: toRGB("#084c72"),
+    900: toRGB("#0d3a9b"),
-            950: toRGB("#06304b"),
+    950: toRGB("#0e245d"),
   },
+  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"),
+  },
+  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"),
+  },
+};
+
+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: {
-            50: toRGB("#fcf3f8"),
+        1: primaries.error["50"],
-            100: toRGB("#f9eaf4"),
+        2: primaries.error["100"],
-            200: toRGB("#f5d5e9"),
+        3: primaries.error["200"],
-            300: toRGB("#ea9ecb"),
+        4: primaries.error["300"],
-            400: toRGB("#e383ba"),
+      },
-            500: toRGB("#d75d9f"),
+      info: {
-            600: toRGB("#c43e81"),
+        1: primaries.info["50"],
-            700: toRGB("#a82e67"),
+        2: primaries.info["100"],
-            800: toRGB("#8c2855"),
+        3: primaries.info["200"],
-            900: toRGB("#75264a"),
+        4: primaries.info["300"],
-            950: toRGB("#461129"),
+      },
+      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"],
       },
     },
-        boxShadow: {
+    inv: {
-          "input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
+      1: primaries.primary["600"],
-          "button-primary":
+      2: primaries.primary["700"],
-            "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
+      3: primaries.primary["800"],
-          "button-primary-hover":
+      4: primaries.primary["900"],
-            "2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset",
+      acc: {
-          "button-primary-focus":
+        1: primaries.secondary["500"],
-            "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",
+        2: primaries.secondary["600"],
-          "button-primary-active":
+        3: primaries.secondary["900"],
-            "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",
+        4: primaries.secondary["950"],
-          "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",
+  border: {
-          "button-secondary-focus":
+    def: {
-            "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",
+      1: primaries.secondary["100"],
-          "button-secondary-active":
+      2: primaries.secondary["200"],
-            "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",
+      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"],
+      },
+    },
+  },
+  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"],
+      },
+    },
+  },
+};
+
+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 = {}) =>
+    ({ addUtilities, theme, addVariant, e }) => {
+      // @ts-expect-error: lib of tailwind has no types
+      addVariant("popover-open", ({ modifySelectors, separator }) => {
+        // @ts-expect-error: lib of tailwind has no types
+        modifySelectors(({ className }) => {
+          return `.${e(`popover-open${separator}${className}`)}:popover-open`;
+        });
+      });
+
+      const { bg, fg, border } = colorSystem;
+
+      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: {
+          ...primaries,
+          ...colorSystem,
         },
       },
     },