From c95cfa1043db3908c4b265d1c461ed23d3cae58b Mon Sep 17 00:00:00 2001 From: Can Temizyurek Date: Sun, 26 Oct 2025 13:09:19 -0400 Subject: [PATCH 1/2] feat: update tailwind.css with new dark theme colors Solves: #272 --- apps/evalite-ui/app/tailwind.css | 97 +++++++++++++++++++------------- 1 file changed, 57 insertions(+), 40 deletions(-) diff --git a/apps/evalite-ui/app/tailwind.css b/apps/evalite-ui/app/tailwind.css index 1310bafb..1fcc5655 100644 --- a/apps/evalite-ui/app/tailwind.css +++ b/apps/evalite-ui/app/tailwind.css @@ -52,7 +52,7 @@ } :root { - --radius: 0.625rem; + --radius: 0.35rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); @@ -93,46 +93,63 @@ --selection: oklch(0.145 0 0); --selection-foreground: oklch(1 0 0); } + .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.269 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.371 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: var(--color-blue-300); - --chart-2: var(--color-blue-500); - --chart-3: var(--color-blue-600); - --chart-4: var(--color-blue-700); - --chart-5: var(--color-blue-800); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.439 0 0); - --surface: oklch(0.2 0 0); - --surface-foreground: oklch(0.708 0 0); - --code: var(--surface); - --code-foreground: var(--surface-foreground); - --code-highlight: oklch(0.27 0 0); - --code-number: oklch(0.72 0 0); - --selection: oklch(0.922 0 0); - --selection-foreground: oklch(0.205 0 0); + --background: oklch(0.2178 0 0); + --foreground: oklch(0.8853 0 0); + --card: oklch(0.2435 0 0); + --card-foreground: oklch(0.8853 0 0); + --popover: oklch(0.2435 0 0); + --popover-foreground: oklch(0.8853 0 0); + --primary: oklch(0.7058 0 0); + --primary-foreground: oklch(0.2178 0 0); + --secondary: oklch(0.3092 0 0); + --secondary-foreground: oklch(0.8853 0 0); + --muted: oklch(0.285 0 0); + --muted-foreground: oklch(0.5999 0 0); + --accent: oklch(0.3715 0 0); + --accent-foreground: oklch(0.8853 0 0); + --destructive: oklch(0.6591 0.153 22.1703); + --destructive-foreground: oklch(1 0 0); + --border: oklch(0.329 0 0); + --input: oklch(0.3092 0 0); + --ring: oklch(0.7058 0 0); + --chart-1: oklch(0.7058 0 0); + --chart-2: oklch(0.6714 0.0339 206.3482); + --chart-3: oklch(0.5452 0 0); + --chart-4: oklch(0.4604 0 0); + --chart-5: oklch(0.3715 0 0); + --sidebar: oklch(0.2393 0 0); + --sidebar-foreground: oklch(0.8853 0 0); + --sidebar-primary: oklch(0.7058 0 0); + --sidebar-primary-foreground: oklch(0.2178 0 0); + --sidebar-accent: oklch(0.3715 0 0); + --sidebar-accent-foreground: oklch(0.8853 0 0); + --sidebar-border: oklch(0.329 0 0); + --sidebar-ring: oklch(0.7058 0 0); + --font-sans: Inter, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Fira Code, monospace; + --radius: 0.35rem; + --shadow-x: 0px; + --shadow-y: 2px; + --shadow-blur: 0px; + --shadow-spread: 0px; + --shadow-opacity: 0.15; + --shadow-color: hsl(0 0% 20% / 0.1); + --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 20% / 0.07); + --shadow-xs: 0px 2px 0px 0px hsl(0 0% 20% / 0.07); + --shadow-sm: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), + 0px 1px 2px -1px hsl(0 0% 20% / 0.15); + --shadow: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), + 0px 1px 2px -1px hsl(0 0% 20% / 0.15); + --shadow-md: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), + 0px 2px 4px -1px hsl(0 0% 20% / 0.15); + --shadow-lg: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), + 0px 4px 6px -1px hsl(0 0% 20% / 0.15); + --shadow-xl: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), + 0px 8px 10px -1px hsl(0 0% 20% / 0.15); + --shadow-2xl: 0px 2px 0px 0px hsl(0 0% 20% / 0.38); } @layer base { From fb2df9cc1fb0f0391b00bb72b65e57992b36d205 Mon Sep 17 00:00:00 2001 From: Can Temizyurek Date: Sun, 26 Oct 2025 13:15:48 -0400 Subject: [PATCH 2/2] fix: remove unnecessary class from active sidebar item styling --- apps/evalite-ui/app/routes/__root.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/evalite-ui/app/routes/__root.tsx b/apps/evalite-ui/app/routes/__root.tsx index 28e4b228..bbac63b3 100644 --- a/apps/evalite-ui/app/routes/__root.tsx +++ b/apps/evalite-ui/app/routes/__root.tsx @@ -250,7 +250,7 @@ const EvalSidebarItem = (props: { : "flex justify-between text-sm px-2 py-1 rounded hover:bg-foreground/10 active:bg-foreground/20 transition-colors" } activeProps={{ - className: "bg-foreground/20! text-foreground/80", + className: "bg-foreground/20!", }} > {props.variantName || props.name}