From e91014890708284bb1be3f4cff969dcae35490f6 Mon Sep 17 00:00:00 2001 From: Mike Fortman Date: Wed, 23 Oct 2024 13:04:48 -0500 Subject: [PATCH] feat: theme color updates (#4256) theme color updates --- src/frontend/src/style/index.css | 119 +++++++++++++++++-------------- src/frontend/tailwind.config.mjs | 19 +++++ 2 files changed, 83 insertions(+), 55 deletions(-) diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css index 3913c1136..87318fa2b 100644 --- a/src/frontend/src/style/index.css +++ b/src/frontend/src/style/index.css @@ -6,33 +6,38 @@ @layer base { :root { - /* Zinc Theme Values from shadcn */ - --background: 0 0% 100%; /* hsl(0 0% 100%) */ - --foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */ - --card: 0 0% 100%; /* hsl(0 0% 100%) */ - --card-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */ - --popover: 0 0% 100%; /* hsl(0 0% 100%) */ - --popover-foreground: 240 10% 3.9%; /* hsl(240 10% 3.9%) */ - --primary: 240 5.9% 10%; /* hsl(240 5.9% 10%) */ - --primary-foreground: 0 0% 98%; /* hsl(0 0% 98%) */ - --secondary: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */ - --secondary-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */ - --muted: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */ - --muted-foreground: 240 3.8% 46.1%; /* hsl(240 3.8% 46.1%) */ - --accent: 240 4.8% 95.9%; /* hsl(240 4.8% 95.9%) */ - --accent-foreground: 240 5.9% 10%; /* hsl(240 5.9% 10%) */ - --destructive: 0 84.2% 60.2%; /* hsl(0 84.2% 60.2%) */ - --destructive-foreground: 0 0% 98%; /* hsl(0 0% 98%) */ - --border: 240 5.9% 90%; /* hsl(240 5.9% 90%) */ - --input: 240 5.9% 90%; /* hsl(240 5.9% 90%) */ - --ring: 240 5.9% 10%; /* hsl(240 5.9% 10%) */ - --radius: 0.5rem; - --chart-1: 12 76% 61%; /* hsl(12 76% 61%) */ - --chart-2: 173 58% 39%; /* hsl(173 58% 39%) */ - --chart-3: 197 37% 24%; /* hsl(197 37% 24%) */ - --chart-4: 43 74% 66%; /* hsl(43 74% 66%) */ - --chart-5: 27 87% 67%; /* hsl(27 87% 67%) */ - --canvas: 240 6% 10%; /* hsl(240 6% 10%) */ + --foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --background: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --muted: 240 5% 96%; /* hsl(240, 5%, 96%) */ + --muted-foreground: 240 4% 46%; /* hsl(240, 4%, 46%) */ + --card: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --card-foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --popover: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --popover-foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --border: 240 6% 90%; /* hsl(240, 6%, 90%) */ + --input: 240 6% 90%; /* hsl(240, 6%, 90%) */ + --primary-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --primary: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --secondary: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --secondary-foreground: 240 4% 16%; /* hsl(240, 4%, 16%) */ + --accent: 240 5% 96%; /* hsl(240, 5%, 96%) */ + --accent-foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --destructive: 0 72% 51%; /* hsl(0, 72%, 51%) */ + --destructive-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --ring: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --primary-hover: 240 4% 16%; /* hsl(240, 4%, 16%) */ + --secondary-hover: 240 6% 90%; /* hsl(240, 6%, 90%) */ + --placeholder-foreground: 240 5% 65%; /* hsl(240, 5%, 65%) */ + --canvas: 240 5% 96%; /* hsl(240, 5%, 96%) */ + --accent-emerald: 149 80% 90%; /* hsl(149, 80%, 90%) */ + --accent-emerald-foreground: 161 41% 30%; /* hsl(161, 41%, 30%) */ + --accent-indigo: 226 100% 94%; /* hsl(226, 100%, 94%) */ + --accent-indigo-foreground: 243 75% 59%; /* hsl(243, 75%, 59%) */ + --accent-pink: 326 78% 95%; /* hsl(326, 78%, 95%) */ + --accent-pink-foreground: 333 71% 51%; /* hsl(333, 71%, 51%) */ + --note-amber: 48 97% 77%; /* hsl(48, 97%, 77%) */ + --tooltip: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --tooltip-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ --node-selected: 243 75% 59%; --round-btn-shadow: #00000063; @@ -82,7 +87,6 @@ --note-default: #f1f5f9; --note-indigo: #e0e7ff; --note-emerald: #d1fae5; - --note-amber: #fef3c7; --note-red: #fee2e2; --note-default-opacity: #f1f5f980; @@ -93,37 +97,42 @@ } .dark { - /* Zinc Theme Values from shadcn */ - --background: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */ - --foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --card: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */ - --card-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --popover: 240 10% 3.9%; /* hsl(240, 10%, 3.9%) */ - --popover-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --primary: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --primary-foreground: 240 5.9% 10%; /* hsl(240, 5.9%, 10%) */ - --secondary: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */ - --secondary-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --muted: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */ - --muted-foreground: 240 5% 64.9%; /* hsl(240, 5%, 64.9%) */ - --accent: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */ - --accent-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --destructive: 0 62.8% 30.6%; /* hsl(0, 62.8%, 30.6%) */ - --destructive-foreground: 0 0% 98%; /* hsl(0, 0%, 98%) */ - --border: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */ - --input: 240 3.7% 15.9%; /* hsl(240, 3.7%, 15.9%) */ - --ring: 240 4.9% 83.9%; /* hsl(240, 4.9%, 83.9%) */ - --chart-1: 220 70% 50%; /* hsl(220, 70%, 50%) */ - --chart-2: 160 60% 45%; /* hsl(160, 60%, 45%) */ - --chart-3: 30 80% 55%; /* hsl(30, 80%, 55%) */ - --chart-4: 280 65% 60%; /* hsl(280, 65%, 60%) */ - --chart-5: 340 75% 55%; /* hsl(340, 75%, 55%) */ - --canvas: 240 6% 10%; /* hsl(240 6% 10%) */ + --foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --background: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --muted: 240 4% 16%; /* hsl(240, 4%, 16%) */ + --muted-foreground: 240 5% 65%; /* hsl(240, 5%, 65%) */ + --card: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --card-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --popover: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --popover-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --border: 240 4% 16%; /* hsl(240, 4%, 16%) */ + --input: 240 5% 26%; /* hsl(240, 5%, 26%) */ + --primary-foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --primary: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --secondary: 0 0% 0%; /* hsl(0, 0%, 0%) */ + --secondary-foreground: 240 6% 90%; /* hsl(240, 6%, 90%) */ + --accent: 240 6% 10%; /* hsl(240, 6%, 10%) */ + --accent-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --destructive: 0 84% 60%; /* hsl(0, 84%, 60%) */ + --destructive-foreground: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --ring: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --primary-hover: 240 6% 90%; /* hsl(240, 6%, 90%) */ + --secondary-hover: 240 4% 16%; /* hsl(240, 4%, 16%) */ + --placeholder-foreground: 240 4% 46%; /* hsl(240, 4%, 46%) */ + --canvas: 240 6% 10%; /* hsl(240, 6%, 10%) */ + --accent-emerald: 164 86% 16%; /* hsl(164, 86%, 16%) */ + --accent-emerald-foreground: 158 64% 52%; /* hsl(158, 64%, 52%) */ + --accent-indigo: 242 25% 34%; /* hsl(242, 25%, 34%) */ + --accent-indigo-foreground: 234 89% 74%; /* hsl(234, 89%, 74%) */ + --accent-pink: 336 30% 30%; /* hsl(336, 30%, 30%) */ + --accent-pink-foreground: 329 86% 70%; /* hsl(329, 86%, 70%) */ + --note-amber: 46 97% 65%; /* hsl(46, 97%, 65%) */ + --tooltip: 0 0% 100%; /* hsl(0, 0%, 100%) */ + --tooltip-foreground: 0 0% 0%; /* hsl(0, 0%, 0%) */ --note-default: #0f172a; --note-indigo: #312e81; --note-emerald: #064e3b; - --note-amber: #78350f; --note-red: #7f1d1d; --note-placeholder: 216 12% 84%; /* hsl(216 12% 84%) */ diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index e7cfb7cbe..f9ca3f9ea 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -91,6 +91,7 @@ const config = { "medium-high-indigo": "var(--medium-high-indigo)", "medium-indigo": "var(--medium-indigo)", "medium-low-gray": "var(--medium-low-gray)", + "note-amber": "var(--note-amber)", "status-green": "var(--status-green)", "status-red": "var(--status-red)", "status-yellow": "var(--status-yellow)", @@ -121,10 +122,12 @@ const config = { primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", + hover: "hsl(var(--primary-hover))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", + hover: "hsl(var(--secondary-hover))", }, destructive: { DEFAULT: "hsl(var(--destructive))", @@ -138,6 +141,18 @@ const config = { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, + "accent-emerald": { + DEFAULT: "hsl(var(--accent-emerald))", + foreground: "hsl(var(--accent-emerald-foreground))", + }, + "accent-indigo": { + DEFAULT: "hsl(var(--accent-indigo))", + foreground: "hsl(var(--accent-indigo-foreground))", + }, + "accent-pink": { + DEFAULT: "hsl(var(--accent-pink))", + foreground: "hsl(var(--accent-pink-foreground))", + }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", @@ -146,6 +161,10 @@ const config = { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, + tooltip: { + DEFAULT: "hsl(var(--tooltip))", + foreground: "hsl(var(--tooltip-foreground))", + }, }, borderRadius: { lg: `var(--radius)`,