From 24670178dc85f8822f888b7cb88a611f4e6c0e58 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 13 Nov 2023 17:16:26 -0500
Subject: [PATCH] feat(web): use css vraiables (#5022)

---
 web/src/app.css         | 22 ++++++++++++++++++++++
 web/tailwind.config.cjs | 28 ++++++++++++++--------------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index c38700ba9d..746ba810a7 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -2,6 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    /* light */
+    --immich-primary: 66 80 175;
+    --immich-bg: 255 255 255;
+    --immich-fg: 0 0 0;
+    --immich-gray: 246 246 244;
+    --immich-error: 229 115 115;
+    --immich-success: 129 199 132;
+    --immich-warning: 255 183 77;
+
+    /* dark */
+    --immich-dark-primary: 172 203 250;
+    --immich-dark-bg: 0 0 0;
+    --immich-dark-fg: 229 231 235;
+    --immich-dark-gray: 33 33 33;
+    --immich-dark-error: 211 47 47;
+    --immich-dark-success: 56 142 60;
+    --immich-dark-warning: 245 124 0;
+  }
+}
+
 @font-face {
   font-family: 'Work Sans';
   src: url('$lib/assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index cc212d2586..3691e15dca 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -6,22 +6,22 @@ module.exports = {
     extend: {
       colors: {
         // Light Theme
-        'immich-primary': '#4250af',
-        'immich-bg': 'white',
-        'immich-fg': 'black',
-        'immich-gray': '#F6F6F4',
-        'immich-error': '#e57373',
-        'immich-success': '#81c784',
-        'immich-warning': '#ffb74d',
+        'immich-primary': 'rgb(var(--immich-primary) / <alpha-value>)',
+        'immich-bg': 'rgb(var(--immich-bg) / <alpha-value>)',
+        'immich-fg': 'rgb(var(--immich-fg) / <alpha-value>)',
+        'immich-gray': 'rgb(var(--immich-gray) / <alpha-value>)',
+        'immich-error': 'rgb(var(--immich-error) / <alpha-value>)',
+        'immich-success': 'rgb(var(--immich-success) / <alpha-value>)',
+        'immich-warning': 'rgb(var(--immich-warning) / <alpha-value>)',
 
         // Dark Theme
-        'immich-dark-primary': '#adcbfa',
-        'immich-dark-bg': 'black',
-        'immich-dark-fg': '#e5e7eb',
-        'immich-dark-gray': '#212121',
-        'immich-dark-error': '#d32f2f',
-        'immich-dark-success': '#388e3c',
-        'immich-dark-warning': '#f57c00',
+        'immich-dark-primary': 'rgb(var(--immich-dark-primary) / <alpha-value>)',
+        'immich-dark-bg': 'rgb(var(--immich-dark-bg) / <alpha-value>)',
+        'immich-dark-fg': 'rgb(var(--immich-dark-fg) / <alpha-value>)',
+        'immich-dark-gray': 'rgb(var(--immich-dark-gray) / <alpha-value>)',
+        'immich-dark-error': 'rgb(var(--immich-dark-error) / <alpha-value>)',
+        'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
+        'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
       },
       fontFamily: {
         'immich-title': ['Snowburst One', 'cursive'],