Skip to content

Commit 6622f41

Browse files
rickkohrickkoh
committed
Update colors
1 parent 7b48285 commit 6622f41

File tree

2 files changed

+112
-90
lines changed

2 files changed

+112
-90
lines changed

‎frontend/src/app/globals.css‎

Lines changed: 84 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,6 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
16-
17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
21-
}
22-
235
@layer utilities {
246
.text-balance {
257
text-wrap: balance;
@@ -28,57 +10,93 @@ body {
2810

2911
@layer base {
3012
:root {
31-
--background: 0 0% 100%;
32-
--foreground: 222.2 84% 4.9%;
33-
--card: 0 0% 100%;
34-
--card-foreground: 222.2 84% 4.9%;
35-
--popover: 0 0% 100%;
36-
--popover-foreground: 222.2 84% 4.9%;
37-
--primary: 222.2 47.4% 11.2%;
38-
--primary-foreground: 210 40% 98%;
39-
--secondary: 210 40% 96.1%;
40-
--secondary-foreground: 222.2 47.4% 11.2%;
41-
--muted: 210 40% 96.1%;
42-
--muted-foreground: 215.4 16.3% 46.9%;
43-
--accent: 210 40% 96.1%;
44-
--accent-foreground: 222.2 47.4% 11.2%;
45-
--destructive: 0 84.2% 60.2%;
46-
--destructive-foreground: 210 40% 98%;
47-
--border: 214.3 31.8% 91.4%;
48-
--input: 214.3 31.8% 91.4%;
49-
--ring: 222.2 84% 4.9%;
50-
--chart-1: 12 76% 61%;
51-
--chart-2: 173 58% 39%;
52-
--chart-3: 197 37% 24%;
53-
--chart-4: 43 74% 66%;
54-
--chart-5: 27 87% 67%;
13+
--background: #ffffff;
14+
--background-100: #fff6f6;
15+
--background-200: #ffeeee;
16+
--foreground: #010816;
17+
--card: #ffffff;
18+
--card-foreground: #010816;
19+
--popover: #ffffff;
20+
--popover-foreground: #010816;
21+
--primary: #a855f7;
22+
--primary-foreground: #ffffff;
23+
--secondary: #f1f5f9;
24+
--secondary-foreground: #0f172a;
25+
--muted: #f1f5f9;
26+
--muted-foreground: #64748b;
27+
--accent: #fff6f6;
28+
--accent-foreground: #010816;
29+
--destructive: #ee4444;
30+
--destructive-foreground: #f7f9fb;
31+
--border: #e2e8f0;
32+
--input: #e2e8f0;
33+
--ring: #010816;
34+
--chart-1: #e76e4f;
35+
--chart-2: #299d8f;
36+
--chart-3: #264753;
37+
--chart-4: #e8c468;
38+
--chart-5: #f4a361;
5539
--radius: 0.5rem;
5640
}
41+
5742
.dark {
58-
--background: 222.2 84% 4.9%;
59-
--foreground: 210 40% 98%;
60-
--card: 222.2 84% 4.9%;
61-
--card-foreground: 210 40% 98%;
62-
--popover: 222.2 84% 4.9%;
63-
--popover-foreground: 210 40% 98%;
64-
--primary: 210 40% 98%;
65-
--primary-foreground: 222.2 47.4% 11.2%;
66-
--secondary: 217.2 32.6% 17.5%;
67-
--secondary-foreground: 210 40% 98%;
68-
--muted: 217.2 32.6% 17.5%;
69-
--muted-foreground: 215 20.2% 65.1%;
70-
--accent: 217.2 32.6% 17.5%;
71-
--accent-foreground: 210 40% 98%;
72-
--destructive: 0 62.8% 30.6%;
73-
--destructive-foreground: 210 40% 98%;
74-
--border: 217.2 32.6% 17.5%;
75-
--input: 217.2 32.6% 17.5%;
76-
--ring: 212.7 26.8% 83.9%;
77-
--chart-1: 220 70% 50%;
78-
--chart-2: 160 60% 45%;
79-
--chart-3: 30 80% 55%;
80-
--chart-4: 280 65% 60%;
81-
--chart-5: 340 75% 55%;
43+
--background: #171717;
44+
--background-100: #404040;
45+
--background-200: #3c3c3c;
46+
--foreground: #f3f4f6;
47+
--card: #010816;
48+
--card-foreground: #f7f9fb;
49+
--popover: #010816;
50+
--popover-foreground: #f7f9fb;
51+
--primary: #a855f7;
52+
--primary-foreground: #ffffff;
53+
--secondary: #2b3545;
54+
--secondary-foreground: #f7f9fb;
55+
--muted: #2b3545;
56+
--muted-foreground: #6b6b7f;
57+
--accent: #2b3545;
58+
--accent-foreground: #f7f9fb;
59+
--destructive: #4d2626;
60+
--destructive-foreground: #f7f9fb;
61+
--border: #2b3545;
62+
--input: #2b3545;
63+
--ring: #6f8ca4;
64+
--chart-1: #546ed8;
65+
--chart-2: #218c72;
66+
--chart-3: #4d5940;
67+
--chart-4: #ab60c5;
68+
--chart-5: #d63372;
69+
}
70+
}
71+
72+
@media (prefers-color-scheme: dark) {
73+
:root {
74+
--background: #171717;
75+
--background-100: #404040;
76+
--background-200: #3c3c3c;
77+
--foreground: #f7f9fb;
78+
--card: #010816;
79+
--card-foreground: #f7f9fb;
80+
--popover: #010816;
81+
--popover-foreground: #f7f9fb;
82+
--primary: #a855f7;
83+
--primary-foreground: #ffffff;
84+
--secondary: #2b3545;
85+
--secondary-foreground: #f7f9fb;
86+
--muted: #2b3545;
87+
--muted-foreground: #6b6b7f;
88+
--accent: #404040;
89+
--accent-foreground: #f7f9fb;
90+
--destructive: #4d2626;
91+
--destructive-foreground: #f7f9fb;
92+
--border: #2b3545;
93+
--input: #2b3545;
94+
--ring: #6f8ca4;
95+
--chart-1: #546ed8;
96+
--chart-2: #218c72;
97+
--chart-3: #4d5940;
98+
--chart-4: #ab60c5;
99+
--chart-5: #d63372;
82100
}
83101
}
84102

‎frontend/tailwind.config.ts‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,49 @@ const config: Config = {
1010
theme: {
1111
extend: {
1212
colors: {
13-
background: "hsl(var(--background))",
14-
foreground: "hsl(var(--foreground))",
13+
background: {
14+
DEFAULT: "var(--background)",
15+
100: "var(--background-100)",
16+
200: "var(--background-200)",
17+
},
18+
foreground: "var(--foreground)",
1519
card: {
16-
DEFAULT: "hsl(var(--card))",
17-
foreground: "hsl(var(--card-foreground))",
20+
DEFAULT: "var(--card)",
21+
foreground: "var(--card-foreground)",
1822
},
1923
popover: {
20-
DEFAULT: "hsl(var(--popover))",
21-
foreground: "hsl(var(--popover-foreground))",
24+
DEFAULT: "var(--popover)",
25+
foreground: "var(--popover-foreground)",
2226
},
2327
primary: {
24-
DEFAULT: "hsl(var(--primary))",
25-
foreground: "hsl(var(--primary-foreground))",
28+
DEFAULT: "var(--primary)",
29+
foreground: "var(--primary-foreground)",
2630
},
2731
secondary: {
28-
DEFAULT: "hsl(var(--secondary))",
29-
foreground: "hsl(var(--secondary-foreground))",
32+
DEFAULT: "var(--secondary)",
33+
foreground: "var(--secondary-foreground)",
3034
},
3135
muted: {
32-
DEFAULT: "hsl(var(--muted))",
33-
foreground: "hsl(var(--muted-foreground))",
36+
DEFAULT: "var(--muted)",
37+
foreground: "var(--muted-foreground)",
3438
},
3539
accent: {
36-
DEFAULT: "hsl(var(--accent))",
37-
foreground: "hsl(var(--accent-foreground))",
40+
DEFAULT: "var(--accent)",
41+
foreground: "var(--accent-foreground)",
3842
},
3943
destructive: {
40-
DEFAULT: "hsl(var(--destructive))",
41-
foreground: "hsl(var(--destructive-foreground))",
44+
DEFAULT: "var(--destructive)",
45+
foreground: "var(--destructive-foreground)",
4246
},
43-
border: "hsl(var(--border))",
44-
input: "hsl(var(--input))",
45-
ring: "hsl(var(--ring))",
47+
border: "var(--border)",
48+
input: "var(--input)",
49+
ring: "var(--ring)",
4650
chart: {
47-
"1": "hsl(var(--chart-1))",
48-
"2": "hsl(var(--chart-2))",
49-
"3": "hsl(var(--chart-3))",
50-
"4": "hsl(var(--chart-4))",
51-
"5": "hsl(var(--chart-5))",
51+
"1": "var(--chart-1)",
52+
"2": "var(--chart-2)",
53+
"3": "var(--chart-3)",
54+
"4": "var(--chart-4)",
55+
"5": "var(--chart-5)",
5256
},
5357
},
5458
borderRadius: {

0 commit comments

Comments
 (0)