feat(dashboard): Update theme to use OKLCH color space and new shadcn theme (#3688)

packages/dashboard/src/app/styles.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&display=swap');
 @import 'tailwindcss';
 @import 'tw-animate-css';
 

packages/dashboard/vite/vite-plugin-theme.ts

@@ -53,91 +53,91 @@ export interface ThemeVariables {
 
 const defaultVariables: ThemeVariables = {
     light: {
-        background: 'hsl(0 0% 100%)',
-        foreground: 'hsl(0 0% 3.9%)',
-        card: 'hsl(0 0% 100%)',
-        'card-foreground': 'hsl(0 0% 3.9%)',
-        popover: 'hsl(0 0% 100%)',
-        'popover-foreground': 'hsl(0 0% 3.9%)',
-        primary: 'hsl(0 0% 9%)',
-        'primary-foreground': 'hsl(0 0% 98%)',
-        secondary: 'hsl(0 0% 96.1%)',
-        'secondary-foreground': 'hsl(0 0% 9%)',
-        muted: 'hsl(0 0% 96.1%)',
-        'muted-foreground': 'hsl(0 0% 45.1%)',
-        accent: 'hsl(0 0% 96.1%)',
-        'accent-foreground': 'hsl(0 0% 9%)',
-        destructive: 'hsl(0 84.2% 60.2%)',
-        'destructive-foreground': 'hsl(0 0% 98%)',
+        background: 'oklch(1.0000 0 0)',
+        foreground: 'oklch(0.2103 0.0059 285.8852)',
+        card: 'oklch(1.0000 0 0)',
+        'card-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        popover: 'oklch(1.0000 0 0)',
+        'popover-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        primary: 'oklch(0.7613 0.1503 231.1314)',
+        'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        secondary: 'oklch(0.9674 0.0013 286.3752)',
+        'secondary-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        muted: 'oklch(0.9674 0.0013 286.3752)',
+        'muted-foreground': 'oklch(0.5517 0.0138 285.9385)',
+        accent: 'oklch(0.9674 0.0013 286.3752)',
+        'accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        destructive: 'oklch(0.5771 0.2152 27.3250)',
+        'destructive-foreground': 'oklch(0.9851 0 0)',
         success: 'hsl(100, 81%, 35%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 76%, 62%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
-        border: 'hsl(0 0% 89.8%)',
-        input: 'hsl(0 0% 89.8%)',
-        ring: 'hsl(0 0% 3.9%)',
-        'chart-1': 'hsl(12 76% 61%)',
-        'chart-2': 'hsl(173 58% 39%)',
-        'chart-3': 'hsl(197 37% 24%)',
-        'chart-4': 'hsl(43 74% 66%)',
-        'chart-5': 'hsl(27 87% 67%)',
-        radius: '0.6rem',
-        sidebar: 'hsl(0 0% 98%)',
-        'sidebar-foreground': 'hsl(240 5.3% 26.1%)',
-        'sidebar-primary': 'hsl(240 5.9% 10%)',
-        'sidebar-primary-foreground': 'hsl(0 0% 98%)',
-        'sidebar-accent': 'hsl(0, 0%, 92%)',
-        'sidebar-accent-foreground': 'hsl(240 5.9% 10%)',
-        'sidebar-border': 'hsl(220 13% 91%)',
-        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        border: 'oklch(0.9197 0.0040 286.3202)',
+        input: 'oklch(0.9197 0.0040 286.3202)',
+        ring: 'oklch(0.7613 0.1503 231.1314)',
+        'chart-1': 'oklch(0.7613 0.1503 231.1314)',
+        'chart-2': 'oklch(0.5575 0.2525 302.3212)',
+        'chart-3': 'oklch(0.5858 0.2220 17.5846)',
+        'chart-4': 'oklch(0.6658 0.1574 58.3183)',
+        'chart-5': 'oklch(0.6271 0.1699 149.2138)',
+        radius: '0.375rem',
+        sidebar: 'oklch(0.9674 0.0013 286.3752)',
+        'sidebar-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
+        'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-accent': 'oklch(1.0000 0 0)',
+        'sidebar-accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        'sidebar-border': 'oklch(0.9197 0.0040 286.3202)',
+        'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
         brand: '#17c1ff',
         'brand-lighter': '#e6f9ff',
         'brand-darker': '#0099ff',
-        'font-sans': "'Geist', sans-serif",
-        'font-mono': "'Geist Mono', monospace",
+        'font-sans': 'Inter, sans-serif',
+        'font-mono': 'Geist Mono, monospace',
     },
     dark: {
-        background: 'hsl(0 0% 3.9%)',
-        foreground: 'hsl(0 0% 98%)',
-        card: 'hsl(0 0% 3.9%)',
-        'card-foreground': 'hsl(0 0% 98%)',
-        popover: 'hsl(0 0% 3.9%)',
-        'popover-foreground': 'hsl(0 0% 98%)',
-        primary: 'hsl(0 0% 98%)',
-        'primary-foreground': 'hsl(0 0% 9%)',
-        secondary: 'hsl(0 0% 14.9%)',
-        'secondary-foreground': 'hsl(0 0% 98%)',
-        muted: 'hsl(0 0% 14.9%)',
-        'muted-foreground': 'hsl(0 0% 63.9%)',
-        accent: 'hsl(0 0% 14.9%)',
-        'accent-foreground': 'hsl(0 0% 98%)',
-        destructive: 'hsl(0 62.8% 30.6%)',
-        'destructive-foreground': 'hsl(0 0% 98%)',
+        background: 'oklch(0.1408 0.0044 285.8229)',
+        foreground: 'oklch(0.9851 0 0)',
+        card: 'oklch(0.2103 0.0059 285.8852)',
+        'card-foreground': 'oklch(0.9851 0 0)',
+        popover: 'oklch(0.2103 0.0059 285.8852)',
+        'popover-foreground': 'oklch(0.9851 0 0)',
+        primary: 'oklch(0.7613 0.1503 231.1314)',
+        'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        secondary: 'oklch(0.2739 0.0055 286.0326)',
+        'secondary-foreground': 'oklch(0.9851 0 0)',
+        muted: 'oklch(0.2739 0.0055 286.0326)',
+        'muted-foreground': 'oklch(0.7118 0.0129 286.0665)',
+        accent: 'oklch(0.2739 0.0055 286.0326)',
+        'accent-foreground': 'oklch(0.9851 0 0)',
+        destructive: 'oklch(0.6368 0.2078 25.3313)',
+        'destructive-foreground': 'oklch(0.9851 0 0)',
         success: 'hsl(100, 100%, 35%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 86%, 53%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
-        border: 'hsl(0 0% 14.9%)',
-        input: 'hsl(0 0% 14.9%)',
-        ring: 'hsl(0 0% 83.1%)',
-        'chart-1': 'hsl(220 70% 50%)',
-        'chart-2': 'hsl(160 60% 45%)',
-        'chart-3': 'hsl(30 80% 55%)',
-        'chart-4': 'hsl(280 65% 60%)',
-        'chart-5': 'hsl(340 75% 55%)',
-        sidebar: 'hsl(240 5.9% 10%)',
-        'sidebar-foreground': 'hsl(240 4.8% 95.9%)',
-        'sidebar-primary': 'hsl(224.3 76.3% 48%)',
-        'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-        'sidebar-accent': 'hsl(240 3.7% 15.9%)',
-        'sidebar-accent-foreground': 'hsl(240 4.8% 95.9%)',
-        'sidebar-border': 'hsl(240 3.7% 15.9%)',
-        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        border: 'oklch(0.2739 0.0055 286.0326)',
+        input: 'oklch(0.2739 0.0055 286.0326)',
+        ring: 'oklch(0.7613 0.1503 231.1314)',
+        'chart-1': 'oklch(0.7613 0.1503 231.1314)',
+        'chart-2': 'oklch(0.6268 0.2325 303.9004)',
+        'chart-3': 'oklch(0.6450 0.2154 16.4393)',
+        'chart-4': 'oklch(0.7686 0.1647 70.0804)',
+        'chart-5': 'oklch(0.7227 0.1920 149.5793)',
+        sidebar: 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-foreground': 'oklch(0.9851 0 0)',
+        'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
+        'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-accent': 'oklch(0.2739 0.0055 286.0326)',
+        'sidebar-accent-foreground': 'oklch(0.9851 0 0)',
+        'sidebar-border': 'oklch(0.2739 0.0055 286.0326)',
+        'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
         brand: '#17c1ff',
         'brand-lighter': '#e6f9ff',
         'brand-darker': '#0099ff',
-        'font-sans': "'Geist', sans-serif",
-        'font-mono': "'Geist Mono', monospace",
+        'font-sans': 'Inter, sans-serif',
+        'font-mono': 'Geist Mono, monospace',
     },
 };