Skip to content

Commit 199cbd1

Browse files
dlhckdlhck
authored
feat(dashboard): Update theme to use OKLCH color space and new shadcn theme (#3688)
1 parent 1fc6f85 commit 199cbd1

File tree

3 files changed

+84
-87
lines changed

3 files changed

+84
-87
lines changed

‎packages/dashboard/src/app/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Inter:wght@100..900&display=swap');
22
@import 'tailwindcss';
33
@import 'tw-animate-css';
44

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

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -53,91 +53,91 @@ export interface ThemeVariables {
5353

5454
const defaultVariables: ThemeVariables = {
5555
light: {
56-
background: 'hsl(0 0% 100%)',
57-
foreground: 'hsl(0 0% 3.9%)',
58-
card: 'hsl(0 0% 100%)',
59-
'card-foreground': 'hsl(0 0% 3.9%)',
60-
popover: 'hsl(0 0% 100%)',
61-
'popover-foreground': 'hsl(0 0% 3.9%)',
62-
primary: 'hsl(0 0% 9%)',
63-
'primary-foreground': 'hsl(0 0% 98%)',
64-
secondary: 'hsl(0 0% 96.1%)',
65-
'secondary-foreground': 'hsl(0 0% 9%)',
66-
muted: 'hsl(0 0% 96.1%)',
67-
'muted-foreground': 'hsl(0 0% 45.1%)',
68-
accent: 'hsl(0 0% 96.1%)',
69-
'accent-foreground': 'hsl(0 0% 9%)',
70-
destructive: 'hsl(0 84.2% 60.2%)',
71-
'destructive-foreground': 'hsl(0 0% 98%)',
56+
background: 'oklch(1.0000 0 0)',
57+
foreground: 'oklch(0.2103 0.0059 285.8852)',
58+
card: 'oklch(1.0000 0 0)',
59+
'card-foreground': 'oklch(0.2103 0.0059 285.8852)',
60+
popover: 'oklch(1.0000 0 0)',
61+
'popover-foreground': 'oklch(0.2103 0.0059 285.8852)',
62+
primary: 'oklch(0.7613 0.1503 231.1314)',
63+
'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
64+
secondary: 'oklch(0.9674 0.0013 286.3752)',
65+
'secondary-foreground': 'oklch(0.2103 0.0059 285.8852)',
66+
muted: 'oklch(0.9674 0.0013 286.3752)',
67+
'muted-foreground': 'oklch(0.5517 0.0138 285.9385)',
68+
accent: 'oklch(0.9674 0.0013 286.3752)',
69+
'accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
70+
destructive: 'oklch(0.5771 0.2152 27.3250)',
71+
'destructive-foreground': 'oklch(0.9851 0 0)',
7272
success: 'hsl(100, 81%, 35%)',
7373
'success-foreground': 'hsl(0 0% 98%)',
7474
'dev-mode': 'hsl(204, 76%, 62%)',
7575
'dev-mode-foreground': 'hsl(0 0% 98%)',
76-
border: 'hsl(0 0% 89.8%)',
77-
input: 'hsl(0 0% 89.8%)',
78-
ring: 'hsl(0 0% 3.9%)',
79-
'chart-1': 'hsl(12 76% 61%)',
80-
'chart-2': 'hsl(173 58% 39%)',
81-
'chart-3': 'hsl(197 37% 24%)',
82-
'chart-4': 'hsl(43 74% 66%)',
83-
'chart-5': 'hsl(27 87% 67%)',
84-
radius: '0.6rem',
85-
sidebar: 'hsl(0 0% 98%)',
86-
'sidebar-foreground': 'hsl(240 5.3% 26.1%)',
87-
'sidebar-primary': 'hsl(240 5.9% 10%)',
88-
'sidebar-primary-foreground': 'hsl(0 0% 98%)',
89-
'sidebar-accent': 'hsl(0, 0%, 92%)',
90-
'sidebar-accent-foreground': 'hsl(240 5.9% 10%)',
91-
'sidebar-border': 'hsl(220 13% 91%)',
92-
'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
76+
border: 'oklch(0.9197 0.0040 286.3202)',
77+
input: 'oklch(0.9197 0.0040 286.3202)',
78+
ring: 'oklch(0.7613 0.1503 231.1314)',
79+
'chart-1': 'oklch(0.7613 0.1503 231.1314)',
80+
'chart-2': 'oklch(0.5575 0.2525 302.3212)',
81+
'chart-3': 'oklch(0.5858 0.2220 17.5846)',
82+
'chart-4': 'oklch(0.6658 0.1574 58.3183)',
83+
'chart-5': 'oklch(0.6271 0.1699 149.2138)',
84+
radius: '0.375rem',
85+
sidebar: 'oklch(0.9674 0.0013 286.3752)',
86+
'sidebar-foreground': 'oklch(0.2103 0.0059 285.8852)',
87+
'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
88+
'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
89+
'sidebar-accent': 'oklch(1.0000 0 0)',
90+
'sidebar-accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
91+
'sidebar-border': 'oklch(0.9197 0.0040 286.3202)',
92+
'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
9393
brand: '#17c1ff',
9494
'brand-lighter': '#e6f9ff',
9595
'brand-darker': '#0099ff',
96-
'font-sans': "'Geist', sans-serif",
97-
'font-mono': "'Geist Mono', monospace",
96+
'font-sans': 'Inter, sans-serif',
97+
'font-mono': 'Geist Mono, monospace',
9898
},
9999
dark: {
100-
background: 'hsl(0 0% 3.9%)',
101-
foreground: 'hsl(0 0% 98%)',
102-
card: 'hsl(0 0% 3.9%)',
103-
'card-foreground': 'hsl(0 0% 98%)',
104-
popover: 'hsl(0 0% 3.9%)',
105-
'popover-foreground': 'hsl(0 0% 98%)',
106-
primary: 'hsl(0 0% 98%)',
107-
'primary-foreground': 'hsl(0 0% 9%)',
108-
secondary: 'hsl(0 0% 14.9%)',
109-
'secondary-foreground': 'hsl(0 0% 98%)',
110-
muted: 'hsl(0 0% 14.9%)',
111-
'muted-foreground': 'hsl(0 0% 63.9%)',
112-
accent: 'hsl(0 0% 14.9%)',
113-
'accent-foreground': 'hsl(0 0% 98%)',
114-
destructive: 'hsl(0 62.8% 30.6%)',
115-
'destructive-foreground': 'hsl(0 0% 98%)',
100+
background: 'oklch(0.1408 0.0044 285.8229)',
101+
foreground: 'oklch(0.9851 0 0)',
102+
card: 'oklch(0.2103 0.0059 285.8852)',
103+
'card-foreground': 'oklch(0.9851 0 0)',
104+
popover: 'oklch(0.2103 0.0059 285.8852)',
105+
'popover-foreground': 'oklch(0.9851 0 0)',
106+
primary: 'oklch(0.7613 0.1503 231.1314)',
107+
'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
108+
secondary: 'oklch(0.2739 0.0055 286.0326)',
109+
'secondary-foreground': 'oklch(0.9851 0 0)',
110+
muted: 'oklch(0.2739 0.0055 286.0326)',
111+
'muted-foreground': 'oklch(0.7118 0.0129 286.0665)',
112+
accent: 'oklch(0.2739 0.0055 286.0326)',
113+
'accent-foreground': 'oklch(0.9851 0 0)',
114+
destructive: 'oklch(0.6368 0.2078 25.3313)',
115+
'destructive-foreground': 'oklch(0.9851 0 0)',
116116
success: 'hsl(100, 100%, 35%)',
117117
'success-foreground': 'hsl(0 0% 98%)',
118118
'dev-mode': 'hsl(204, 86%, 53%)',
119119
'dev-mode-foreground': 'hsl(0 0% 98%)',
120-
border: 'hsl(0 0% 14.9%)',
121-
input: 'hsl(0 0% 14.9%)',
122-
ring: 'hsl(0 0% 83.1%)',
123-
'chart-1': 'hsl(220 70% 50%)',
124-
'chart-2': 'hsl(160 60% 45%)',
125-
'chart-3': 'hsl(30 80% 55%)',
126-
'chart-4': 'hsl(280 65% 60%)',
127-
'chart-5': 'hsl(340 75% 55%)',
128-
sidebar: 'hsl(240 5.9% 10%)',
129-
'sidebar-foreground': 'hsl(240 4.8% 95.9%)',
130-
'sidebar-primary': 'hsl(224.3 76.3% 48%)',
131-
'sidebar-primary-foreground': 'hsl(0 0% 100%)',
132-
'sidebar-accent': 'hsl(240 3.7% 15.9%)',
133-
'sidebar-accent-foreground': 'hsl(240 4.8% 95.9%)',
134-
'sidebar-border': 'hsl(240 3.7% 15.9%)',
135-
'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
120+
border: 'oklch(0.2739 0.0055 286.0326)',
121+
input: 'oklch(0.2739 0.0055 286.0326)',
122+
ring: 'oklch(0.7613 0.1503 231.1314)',
123+
'chart-1': 'oklch(0.7613 0.1503 231.1314)',
124+
'chart-2': 'oklch(0.6268 0.2325 303.9004)',
125+
'chart-3': 'oklch(0.6450 0.2154 16.4393)',
126+
'chart-4': 'oklch(0.7686 0.1647 70.0804)',
127+
'chart-5': 'oklch(0.7227 0.1920 149.5793)',
128+
sidebar: 'oklch(0.1408 0.0044 285.8229)',
129+
'sidebar-foreground': 'oklch(0.9851 0 0)',
130+
'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
131+
'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
132+
'sidebar-accent': 'oklch(0.2739 0.0055 286.0326)',
133+
'sidebar-accent-foreground': 'oklch(0.9851 0 0)',
134+
'sidebar-border': 'oklch(0.2739 0.0055 286.0326)',
135+
'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
136136
brand: '#17c1ff',
137137
'brand-lighter': '#e6f9ff',
138138
'brand-darker': '#0099ff',
139-
'font-sans': "'Geist', sans-serif",
140-
'font-mono': "'Geist Mono', monospace",
139+
'font-sans': 'Inter, sans-serif',
140+
'font-mono': 'Geist Mono, monospace',
141141
},
142142
};
143143

0 commit comments

Comments
 (0)