UI/chore: consistent color utils

pkgs/webview-ui/app/src/components/Typography/index.tsx

@@ -95,7 +95,7 @@ export const Typography = <H extends Hierarchy>(props: TypographyProps<H>) => {
         props.inverted && "fnt-clr--inverted",
         sizeHierarchyMap[props.hierarchy][props.size] as string,
         weightMap[props.weight || "normal"],
-        props.class
+        props.class,
       )}
       classList={props.classList}
     >

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

@@ -7,6 +7,71 @@ import { parseColor } from "tailwindcss/lib/util/color";
 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.50"),
+  },
+  [`.${prefix}-def-2`]: {
+    [cssProperty]: theme("colors.secondary.100"),
+  },
+  [`.${prefix}-def-3`]: {
+    [cssProperty]: theme("colors.secondary.200"),
+  },
+  [`.${prefix}-def-4`]: {
+    [cssProperty]: theme("colors.secondary.300"),
+  },
+  [`.${prefix}-def-5`]: {
+    [cssProperty]: theme("colors.secondary.400"),
+  },
+  // - inverse colors
+  [`.${prefix}-inv-1`]: {
+    [cssProperty]: theme("colors.secondary.800"),
+  },
+  [`.${prefix}-inv-2`]: {
+    [cssProperty]: theme("colors.secondary.900"),
+  },
+  [`.${prefix}-inv-3`]: {
+    [cssProperty]: theme("colors.secondary.900"),
+  },
+  [`.${prefix}-inv-4`]: {
+    [cssProperty]: theme("colors.secondary.950"),
+  },
+  [`.${prefix}-inv-5`]: {
+    [cssProperty]: theme("colors.black"),
+  },
+
+  [`.${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 }) => {
@@ -44,6 +109,19 @@ export default plugin.withOptions(
           backgroundColor: theme("colors.primary.950"),
         },
         // bg inverse accent
+        ".bg-acc-1": {
+          backgroundColor: theme("colors.primary.50"),
+        },
+        ".bg-acc-2": {
+          backgroundColor: theme("colors.secondary.100"),
+        },
+        ".bg-acc-3": {
+          backgroundColor: theme("colors.secondary.200"),
+        },
+        ".bg-acc-4": {
+          backgroundColor: theme("colors.secondary.300"),
+        },
+        // bg inverse accent
         ".bg-inv-acc-1": {
           backgroundColor: theme("colors.secondary.500"),
         },
@@ -53,6 +131,9 @@ export default plugin.withOptions(
         ".bg-inv-acc-3": {
           backgroundColor: theme("colors.secondary.700"),
         },
+        ".bg-inv-acc-4": {
+          backgroundColor: theme("colors.primary.900"),
+        },
 
         // Text colors
         ".fg-def-1": {
@@ -81,39 +162,22 @@ export default plugin.withOptions(
           color: theme("colors.secondary.400"),
         },
 
-        // Border colors
+        ".fg-semantic-1": {
-        ".border-def-1": {
+          color: theme("colors.error.500"),
-          borderColor: theme("colors.secondary.50"),
         },
-        ".border-def-2": {
+        ".fg-semantic-2": {
-          borderColor: theme("colors.secondary.100"),
+          color: theme("colors.error.600"),
         },
-        ".border-def-3": {
+        ".fg-semantic-3": {
-          borderColor: theme("colors.secondary.200"),
+          color: theme("colors.error.700"),
         },
-        ".border-def-4": {
+        ".fg-semantic-4": {
-          borderColor: theme("colors.secondary.300"),
+          color: theme("colors.error.800"),
-        },
-        ".border-def-5": {
-          borderColor: theme("colors.secondary.400"),
-        },
-        // border inverse
-        ".border-inv-1": {
-          borderColor: theme("colors.secondary.800"),
-        },
-        ".border-inv-2": {
-          borderColor: theme("colors.secondary.900"),
-        },
-        ".border-inv-3": {
-          borderColor: theme("colors.secondary.900"),
-        },
-        ".border-inv-4": {
-          borderColor: theme("colors.secondary.950"),
-        },
-        ".border-inv-5": {
-          borderColor: theme("colors.black"),
         },
 
+        ...mkBorderUtils(theme, "border", "borderColor"),
+        ...mkBorderUtils(theme, "outline", "outlineColor"),
+
         // Example: dark mode utilities (all elements within <html class="dark"> )
         // ".dark .bg-def-1": {
         //   backgroundColor: theme("colors.black"),
@@ -194,6 +258,7 @@ export default plugin.withOptions(
           },
         },
         boxShadow: {
+          "input-active": "0px 0px 0px 1px #FFF, 0px 0px 0px 2px #203637",
           "inner-primary":
             "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
           "inner-primary-active":