UI/theme/config: remove unneccessary rgb wrapper

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css

@@ -14,7 +14,8 @@
   height: inherit;
 
   padding: theme(padding.12) theme(padding.3) theme(padding.3);
-  background-color: rgba(var(--clr-bg-inv-4) / 0.95);
+  background-color: var(--clr-bg-inv-4);
-  border: 1px solid rgb(var(--clr-border-inv-4));
+  /* / 0.95); */
+  border: 1px solid var(--clr-border-inv-4);
   border-radius: theme(borderRadius.lg);
 }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css

@@ -11,7 +11,7 @@
 
     width: 100%;
     height: 100%;
-    background: rgb(var(--clr-bg-inv-3));
+    background: var(--clr-bg-inv-3);
 
     border-bottom: 1px solid var(--clr-border-inv-3);
     border-top-left-radius: theme(borderRadius.xl);

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css

@@ -17,7 +17,7 @@
   }
 
   &:hover:after {
-    background: rgb(var(--clr-bg-inv-acc-2));
+    background: var(--clr-bg-inv-acc-2);
     transform: scale(theme(scale.100));
     transition: transform 0.24s ease-in-out;
   }
@@ -28,7 +28,7 @@
   }
 
   &:active:after {
-    background: rgb(var(--clr-bg-inv-acc-3));
+    background: var(--clr-bg-inv-acc-3);
     transform: scale(theme(scale.100));
   }
 }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css

@@ -6,14 +6,14 @@
   width: theme(width.8);
   height: theme(height.8);
 
-  background: rgb(var(--clr-bg-inv-4));
+  background: var(--clr-bg-inv-4);
   border-radius: 50%;
 }
 
 .sidebar__profile--flyout {
-  background: rgb(var(--clr-bg-def-2));
+  background: var(--clr-bg-def-2);
 }
 
 .sidebar__profile--flyout > .sidebar__profile__character {
-  color: rgb(var(--clr-fg-def-1)) !important;
+  color: var(--clr-fg-def-1) !important;
 }

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css

@@ -10,8 +10,8 @@
 .sidebar {
   min-width: theme(width.72);
   height: 100%;
-  background-color: rgb(var(--clr-bg-inv-2));
+  background-color: var(--clr-bg-inv-2);
-  border: 1px solid rgb(var(--clr-border-inv-2));
+  border: 1px solid var(--clr-border-inv-2);
   border-radius: theme(borderRadius.xl);
 }
 
@@ -24,6 +24,7 @@
 
 .sidebar__section {
   padding: theme(padding.2);
-  background-color: rgba(var(--clr-bg-inv-3) / 0.9);
+  /* background-color: rgba(var(--clr-bg-inv-3) / 0.9); */
+  @apply bg-primary-800/90;
   border-radius: theme(borderRadius.md);
 }

pkgs/webview-ui/app/src/components/Typography/css/typography-color.css

@@ -1,23 +1,23 @@
 .fnt-clr-primary {
-  color: (rgb(--clr-fg-def-1));
+  color: var(--clr-fg-def-1);
 }
 
 .fnt-clr-secondary {
-  color: rgb(var(--clr-fg-def-2));
+  color: var(--clr-fg-def-2);
 }
 
 .fnt-clr-tertiary {
-  color: rgb(var(--clr-fg-def-3));
+  color: var(--clr-fg-def-3);
 }
 
 .fnt-clr-primary.fnt-clr--inverted {
-  color: rgb(var(--clr-fg-inv-1));
+  color: var(--clr-fg-inv-1);
 }
 
 .fnt-clr-secondary.fnt-clr--inverted {
-  color: rgb(var(--clr-fg-inv-2));
+  color: var(--clr-fg-inv-2);
 }
 
 .fnt-clr-tertiary.fnt-clr--inverted {
-  color: rgb(var(--clr-fg-inv-3));
+  color: var(--clr-fg-inv-3);
 }

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -18,7 +18,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
   });
 
   return (
-    <div class="h-screen bg-base-100 p-4">
+    <div class="h-screen p-4 bg-def-3">
       <div class="drawer h-full lg:drawer-open ">
         <input
           id="toplevel-drawer"

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

@@ -4,11 +4,45 @@ import { typography } from "./typography";
 import { parseColor } from "tailwindcss/lib/util/color";
 
 /* Converts HEX color to RGB */
-const toRGB = (value: string) => parseColor(value).color.join(" ");
+const toRGB = (value: string) =>
+  "rgb(" + parseColor(value).color.join(" ") + ")";
 
 export default plugin.withOptions(
   (_options = {}) =>
-    () => {
+    ({ addUtilities, theme }) => {
+      addUtilities({
+        ".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"),
+        },
+        ".bg-def-5": {
+          backgroundColor: theme("colors.secondary.300"),
+        },
+        // Dark mode utilities (all elements within `.dark` class)
+        // ".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
@@ -71,6 +105,16 @@ export default plugin.withOptions(
             950: toRGB("#461129"),
           },
         },
+        boxShadow: {
+          "inner-primary":
+            "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
+          "inner-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",
+          "inner-secondary":
+            "-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
+          "inner-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",
+        },
       },
       ...typography,
     },