From 590b7c569600e7f4dda44d9ddbea5e865632c17f Mon Sep 17 00:00:00 2001
From: Maximilian Liebmann <lima@noreply.git.dominikstahl.dev>
Date: Mon, 19 May 2025 21:44:53 +0200
Subject: [PATCH 1/2] feat: added figma css variables to globals.css

---
 .vscode/extensions.json |  4 +-
 src/app/globals.css     | 81 +++++++++++++++++++++++++++++++++++------
 2 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c1401b2..36e0b18 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,8 @@
     "vivaxy.vscode-conventional-commits",
     "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
-    "bourhaouta.tailwindshades"
+    "bourhaouta.tailwindshades",
+    "nize.oklch-preview",
+    "azizziy.oklch-as"
   ]
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 322500b..0d04624 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,9 +4,40 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
+  /* Custom values */
 
-  --background: oklch(1 0 0);
+  --neutral-000: oklch(0 0 0);
+  --neutral-100: oklch(0.2264 0 0);
+  --neutral-150: oklch(0.2972 0 0);
+  --neutral-200: oklch(0.3407 0 0);
+  --neutral-300: oklch(0.4495 0 0);
+  --neutral-400: oklch(0.5486 0 0);
+  --neutral-500: oklch(0.6434 0 0);
+  --neutral-600: oklch(0.738 0 0);
+  --neutral-700: oklch(0.8266 0 0);
+  --neutral-750: oklch(0.9128 0 0);
+  --neutral-800: oklch(0.9702 0 0);
+  --neutral-900: oklch(1 0 0);
+
+  --background: var(--neutral-750);
+  --base: var(--neutral-800);
+  --text: var(--neutral-000);
+  --text-alt: var(--neutral-900);
+  --background-disabled: var(--neutral-500);
+  --text-disabled: var(--neutral-700);
+  --radius: 0.688rem;
+
+  --primary: oklch(0.7493 0.1551 74.95);
+  --hover-primary: oklch(0.6568 0.1358 74.86 / 0.8);
+  --active-primary: oklch(0.5911 0.1135 78.29);
+  --disabled-primary: oklch(0.6568 0.1358 74.86 / 0.5);
+
+  --secondary: oklch(0.4937 0.1697 271.26);
+  --hover-secondary: oklch(0.4937 0.1697 271.26 / 0.8);
+  --active-secondary: oklch(0.4254 0.133 272.15);
+  --disabled-secondary: oklch(0.4937 0.1697 271.26 / 0.5);
+
+  /* ------------------- */
 
   --foreground: oklch(0.13 0.028 261.692);
 
@@ -18,12 +49,8 @@
 
   --popover-foreground: oklch(0.13 0.028 261.692);
 
-  --primary: oklch(0.21 0.034 264.665);
-
   --primary-foreground: oklch(0.985 0.002 247.839);
 
-  --secondary: oklch(0.967 0.003 264.542);
-
   --secondary-foreground: oklch(0.21 0.034 264.665);
 
   --muted: oklch(0.967 0.003 264.542);
@@ -70,6 +97,10 @@
 }
 
 @theme inline {
+  --radius: 0.688rem;
+
+  /* Custom values */
+
   --radius-sm: calc(var(--radius) - 4px);
 
   --radius-md: calc(var(--radius) - 2px);
@@ -142,7 +173,39 @@
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
+  /* Custom values */
+
+  --neutral-000: oklch(1 0 0);
+  --neutral-100: oklch(0.9128 0 0);
+  --neutral-150: oklch(0.9702 0 0);
+  --neutral-200: oklch(0.8266 0 0);
+  --neutral-300: oklch(0.738 0 0);
+  --neutral-400: oklch(0.6434 0 0);
+  --neutral-600: oklch(0.4495 0 0);
+  --neutral-500: oklch(0.5486 0 0);
+  --neutral-700: oklch(0.3407 0 0);
+  --neutral-750: oklch(0.2972 0 0);
+  --neutral-800: oklch(0.2264 0 0);
+  --neutral-900: oklch(0 0 0);
+
+  --background: var(--neutral-750);
+  --base: var(--neutral-800);
+  --text: var(--neutral-000);
+  --text-alt: var(--neutral-900);
+  --background-disabled: var(--neutral-500);
+  --text-disabled: var(--neutral-700);
+
+  --primary: oklch(0.6568 0.1358 74.86);
+  --hover-primary: oklch(0.6568 0.1358 74.86 / 0.8);
+  --active-primary: oklch(0.5274 0.0997 78.52);
+  --disabled-primary: oklch(0.6568 0.1358 74.86 / 0.4);
+
+  --secondary: oklch(0.6065 0.213 271.11);
+  --hover-secondary: oklch(0.6065 0.213 271.11 / 0.8);
+  --active-secondary: oklch(0.4471 0.15 271.61);
+  --disabled-secondary: oklch(0.6065 0.213 271.11 / 0.4);
+
+  /* ------------------- */
 
   --foreground: oklch(0.985 0.002 247.839);
 
@@ -154,12 +217,8 @@
 
   --popover-foreground: oklch(0.985 0.002 247.839);
 
-  --primary: oklch(0.928 0.006 264.531);
-
   --primary-foreground: oklch(0.21 0.034 264.665);
 
-  --secondary: oklch(0.278 0.033 256.848);
-
   --secondary-foreground: oklch(0.985 0.002 247.839);
 
   --muted: oklch(0.278 0.033 256.848);

From 88dc6303c193385a53aaf702427107b3ee36452c Mon Sep 17 00:00:00 2001
From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com>
Date: Tue, 20 May 2025 17:12:47 +0200
Subject: [PATCH 2/2] feat: add transparent color variable and update
 background color in globals.css

---
 src/app/globals.css | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0d04624..a7bbb2b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,6 +6,8 @@
 :root {
   /* Custom values */
 
+  --transparent: transparent;
+
   --neutral-000: oklch(0 0 0);
   --neutral-100: oklch(0.2264 0 0);
   --neutral-150: oklch(0.2972 0 0);
@@ -19,7 +21,7 @@
   --neutral-800: oklch(0.9702 0 0);
   --neutral-900: oklch(1 0 0);
 
-  --background: var(--neutral-750);
+  --background: var(--neutral-800);
   --base: var(--neutral-800);
   --text: var(--neutral-000);
   --text-alt: var(--neutral-900);
@@ -97,8 +99,39 @@
 }
 
 @theme inline {
+  --transparent: var(--transpatent);
+
+  --color-neutral-000: var(--neutral-000);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-150: var(--neutral-150);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-750: var(--neutral-750);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+
+  --background: var(--neutral-750);
+  --base: var(--neutral-800);
+  --text: var(--neutral-000);
+  --text-alt: var(--neutral-900);
+  --background-disabled: var(--neutral-500);
+  --text-disabled: var(--neutral-700);
   --radius: 0.688rem;
 
+  --color-primary: var(--primary);
+  --color-hover-primary: var(--hover-primary);
+  --color-active-primary: var(--active-primary);
+  --color-disabled-primary: var(--disabled-primary);
+
+  --color-secondary: var(--secondary);
+  --color-hover-secondary: var(--hover-secondary);
+  --color-active-secondary: var(--active-secondary);
+  --disabled-secondary: var(--disabled-secondary);
+
   /* Custom values */
 
   --radius-sm: calc(var(--radius) - 4px);
@@ -175,6 +208,8 @@
 .dark {
   /* Custom values */
 
+  --transparent: transparent;
+
   --neutral-000: oklch(1 0 0);
   --neutral-100: oklch(0.9128 0 0);
   --neutral-150: oklch(0.9702 0 0);