From 7f5bd84f42f47a315717ae40a48b8be1909be80e Mon Sep 17 00:00:00 2001
From: Aaron Sutula <528969+asutula@users.noreply.github.com>
Date: Wed, 3 Jul 2024 09:33:29 -0600
Subject: [PATCH] Update to hsl colors that work with tailwind opacity modifier
 (#294)

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>
Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com>
---
 packages/web/app/globals.css    | 38 ++++++++++++++++-----------------
 packages/web/tailwind.config.js | 38 ++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/web/app/globals.css b/packages/web/app/globals.css
index 1cb0816c..492037fb 100644
--- a/packages/web/app/globals.css
+++ b/packages/web/app/globals.css
@@ -4,33 +4,33 @@
 
 @layer base {
   :root {
-    --background: #1e1a29;
-    --foreground: #e2dbf5;
+    --background: 256 22% 13%;
+    --foreground: 256 57% 91%;
 
-    --card: #252032;
-    --card-foreground: #e2dbf5;
+    --card: 257 22% 16%;
+    --card-foreground: 256 57% 91%;
 
-    --popover: #171717;
-    --popover-foreground: #e2dbf5;
+    --popover: 0 0% 9%;
+    --popover-foreground: 256 57% 91%;
 
-    --primary: #6358dc;
-    --primary-foreground: #e2dbf5;
+    --primary: 245 65% 60%;
+    --primary-foreground: 256 57% 91%;
 
-    --secondary: #423f67;
-    --secondary-foreground: #e6e4e6;
+    --secondary: 245 24% 33%;
+    --secondary-foreground: 300 4% 90%;
 
-    --muted: #262626;
-    --muted-foreground: #c3c1c3;
+    --muted: 0 0% 15%;
+    --muted-foreground: 300 2% 76%;
 
-    --accent: #292524;
-    --accent-foreground: #fafafa;
+    --accent: 12 6% 15%;
+    --accent-foreground: 0 0% 98%;
 
-    --destructive: #ff3535;
-    --destructive-foreground: #fef2f2;
+    --destructive: 0 100% 60%;
+    --destructive-foreground: 0 86% 97%;
 
-    --border: #635460;
-    --input: #635460;
-    --ring: #6358dc;
+    --border: 312 8% 36%;
+    --input: 312 8% 36%;
+    --ring: 245 65% 60%;
 
     --radius: 0.5rem;
   }
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 1aa27510..c38ed325 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -31,38 +31,38 @@ module.exports = {
         mono: ["var(--font-source-code-pro)"],
       },
       colors: {
-        border: "var(--border)",
-        input: "var(--input)",
-        ring: "var(--ring)",
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "var(--primary)",
-          foreground: "var(--primary-foreground)",
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: "var(--secondary)",
-          foreground: "var(--secondary-foreground)",
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
-          DEFAULT: "var(--destructive)",
-          foreground: "var(--destructive-foreground)",
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
-          DEFAULT: "var(--muted)",
-          foreground: "var(--muted-foreground)",
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: "var(--accent)",
-          foreground: "var(--accent-foreground)",
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
-          DEFAULT: "var(--popover)",
-          foreground: "var(--popover-foreground)",
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
         },
         card: {
-          DEFAULT: "var(--card)",
-          foreground: "var(--card-foreground)",
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
         },
       },
       borderRadius: {