Skip to content

Commit 0cb3fd6

Browse files
dager-mohameddager-mohamed
authored
Merge pull request #25 from Opensyte/feat/upgrade-design-system
Upgrade the UI design system
2 parents 815df95 + 1000617 commit 0cb3fd6

File tree

1 file changed

+124
-105
lines changed

1 file changed

+124
-105
lines changed

‎src/styles/globals.css‎

Lines changed: 124 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -10,120 +10,122 @@
1010
}
1111

1212
:root {
13-
--radius: 0.5rem;
14-
15-
/* Light Mode */
16-
--background: oklch(0.99 0 0);
17-
--foreground: oklch(0.15 0 0);
18-
13+
--background: oklch(1 0 0);
14+
--foreground: oklch(0.3211 0 0);
1915
--card: oklch(1 0 0);
20-
--card-foreground: oklch(0.15 0 0);
21-
16+
--card-foreground: oklch(0.3211 0 0);
2217
--popover: oklch(1 0 0);
23-
--popover-foreground: oklch(0.15 0 0);
24-
25-
/* Primary - Modern blue/indigo accent */
26-
--primary: oklch(0.51 0.24 265);
18+
--popover-foreground: oklch(0.3211 0 0);
19+
--primary: oklch(0.6231 0.188 259.8145);
2720
--primary-foreground: oklch(1 0 0);
28-
29-
/* Secondary - Neutral gray */
30-
--secondary: oklch(0.96 0.01 265);
31-
--secondary-foreground: oklch(0.15 0 0);
32-
33-
/* Muted - Subtle gray backgrounds */
34-
--muted: oklch(0.98 0.005 265);
35-
--muted-foreground: oklch(0.45 0.02 265);
36-
37-
/* Accent - Neutral gray for hover states */
38-
--accent: oklch(0.94 0 0);
39-
--accent-foreground: oklch(0.15 0 0);
40-
41-
/* Destructive - Subtle red */
42-
--destructive: oklch(0.55 0.22 27);
43-
--destructive-foreground: oklch(0.99 0 0);
44-
45-
/* Borders & Inputs */
46-
--border: oklch(0.92 0.01 265);
47-
--input: oklch(0.92 0.01 265);
48-
--ring: oklch(0.51 0.24 265);
49-
50-
/* Chart colors - Complementary palette */
51-
--chart-1: oklch(0.51 0.24 265);
52-
--chart-2: oklch(0.65 0.18 165);
53-
--chart-3: oklch(0.55 0.22 27);
54-
--chart-4: oklch(0.75 0.15 85);
55-
--chart-5: oklch(0.6 0.2 310);
56-
57-
/* Sidebar */
58-
--sidebar: oklch(0.98 0.005 265);
59-
--sidebar-foreground: oklch(0.15 0 0);
60-
--sidebar-primary: oklch(0.51 0.24 265);
21+
--secondary: oklch(0.967 0.0029 264.5419);
22+
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
23+
--muted: oklch(0.9846 0.0017 247.8389);
24+
--muted-foreground: oklch(0.551 0.0234 264.3637);
25+
--accent: oklch(0.9514 0.025 236.8242);
26+
--accent-foreground: oklch(0.3791 0.1378 265.5222);
27+
--destructive: oklch(0.6368 0.2078 25.3313);
28+
--destructive-foreground: oklch(1 0 0);
29+
--border: oklch(0.9276 0.0058 264.5313);
30+
--input: oklch(0.9276 0.0058 264.5313);
31+
--ring: oklch(0.6231 0.188 259.8145);
32+
--chart-1: oklch(0.6231 0.188 259.8145);
33+
--chart-2: oklch(0.5461 0.2152 262.8809);
34+
--chart-3: oklch(0.4882 0.2172 264.3763);
35+
--chart-4: oklch(0.4244 0.1809 265.6377);
36+
--chart-5: oklch(0.3791 0.1378 265.5222);
37+
--sidebar: oklch(0.9846 0.0017 247.8389);
38+
--sidebar-foreground: oklch(0.3211 0 0);
39+
--sidebar-primary: oklch(0.6231 0.188 259.8145);
6140
--sidebar-primary-foreground: oklch(1 0 0);
62-
--sidebar-accent: oklch(0.94 0 0);
63-
--sidebar-accent-foreground: oklch(0.15 0 0);
64-
--sidebar-border: oklch(0.92 0.01 265);
65-
--sidebar-ring: oklch(0.51 0.24 265);
41+
--sidebar-accent: oklch(0.9514 0.025 236.8242);
42+
--sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
43+
--sidebar-border: oklch(0.9276 0.0058 264.5313);
44+
--sidebar-ring: oklch(0.6231 0.188 259.8145);
45+
--font-sans: Inter, sans-serif;
46+
--font-serif: Source Serif 4, serif;
47+
--font-mono: JetBrains Mono, monospace;
48+
--radius: 0rem;
49+
--shadow-x: 0;
50+
--shadow-y: 1px;
51+
--shadow-blur: 3px;
52+
--shadow-spread: 0px;
53+
--shadow-opacity: 0.1;
54+
--shadow-color: oklch(0 0 0);
55+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
56+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
57+
--shadow-sm:
58+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
59+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
60+
--shadow-md:
61+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
62+
--shadow-lg:
63+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
64+
--shadow-xl:
65+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
66+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
67+
--tracking-normal: 0em;
68+
--spacing: 0.25rem;
6669
}
6770

6871
.dark {
69-
/* Dark Mode - Modern light black */
70-
--background: oklch(0.17 0.01 265);
71-
--foreground: oklch(0.94 0 0);
72-
73-
--card: oklch(0.2 0.01 265);
74-
--card-foreground: oklch(0.94 0 0);
75-
76-
--popover: oklch(0.2 0.01 265);
77-
--popover-foreground: oklch(0.94 0 0);
78-
79-
/* Primary - Brighter in dark mode */
80-
--primary: oklch(0.65 0.25 265);
81-
--primary-foreground: oklch(0.98 0 0);
82-
83-
/* Secondary - Dark neutral */
84-
--secondary: oklch(0.24 0.01 265);
85-
--secondary-foreground: oklch(0.94 0 0);
86-
87-
/* Muted - Subtle dark backgrounds */
88-
--muted: oklch(0.22 0.01 265);
89-
--muted-foreground: oklch(0.62 0.02 265);
90-
91-
/* Accent - Neutral gray for hover states */
92-
--accent: oklch(0.28 0 0);
93-
--accent-foreground: oklch(0.94 0 0);
94-
95-
/* Destructive - Adjusted for dark mode */
96-
--destructive: oklch(0.65 0.25 27);
97-
--destructive-foreground: oklch(0.95 0 0);
98-
99-
/* Borders & Inputs - Subtle in dark mode */
100-
--border: oklch(0.94 0 0 / 8%);
101-
--input: oklch(0.94 0 0 / 12%);
102-
--ring: oklch(0.65 0.25 265);
103-
104-
/* Chart colors - Vibrant in dark mode */
105-
--chart-1: oklch(0.65 0.25 265);
106-
--chart-2: oklch(0.7 0.2 165);
107-
--chart-3: oklch(0.65 0.25 27);
108-
--chart-4: oklch(0.8 0.18 85);
109-
--chart-5: oklch(0.7 0.22 310);
110-
111-
/* Sidebar */
112-
--sidebar: oklch(0.19 0.01 265);
113-
--sidebar-foreground: oklch(0.94 0 0);
114-
--sidebar-primary: oklch(0.65 0.25 265);
115-
--sidebar-primary-foreground: oklch(0.98 0 0);
116-
--sidebar-accent: oklch(0.28 0 0);
117-
--sidebar-accent-foreground: oklch(0.94 0 0);
118-
--sidebar-border: oklch(0.94 0 0 / 8%);
119-
--sidebar-ring: oklch(0.65 0.25 265);
72+
--background: oklch(0.2046 0 0);
73+
--foreground: oklch(0.9219 0 0);
74+
--card: oklch(0.2686 0 0);
75+
--card-foreground: oklch(0.9219 0 0);
76+
--popover: oklch(0.2686 0 0);
77+
--popover-foreground: oklch(0.9219 0 0);
78+
--primary: oklch(0.6231 0.188 259.8145);
79+
--primary-foreground: oklch(1 0 0);
80+
--secondary: oklch(0.967 0.0029 264.5419);
81+
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
82+
--muted: oklch(0.2393 0 0);
83+
--muted-foreground: oklch(0.7155 0 0);
84+
--accent: oklch(0.351 0 264.364);
85+
--accent-foreground: oklch(0.8823 0.0571 254.1284);
86+
--destructive: oklch(0.6368 0.2078 25.3313);
87+
--destructive-foreground: oklch(1 0 0);
88+
--border: oklch(0.3715 0 0);
89+
--input: oklch(0.3715 0 0);
90+
--ring: oklch(0.6231 0.188 259.8145);
91+
--chart-1: oklch(0.7137 0.1434 254.624);
92+
--chart-2: oklch(0.6231 0.188 259.8145);
93+
--chart-3: oklch(0.5461 0.2152 262.8809);
94+
--chart-4: oklch(0.4882 0.2172 264.3763);
95+
--chart-5: oklch(0.4244 0.1809 265.6377);
96+
--sidebar: oklch(0.2046 0 0);
97+
--sidebar-foreground: oklch(0.9219 0 0);
98+
--sidebar-primary: oklch(0.6231 0.188 259.8145);
99+
--sidebar-primary-foreground: oklch(1 0 0);
100+
--sidebar-accent: oklch(0.3791 0.1378 265.5222);
101+
--sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
102+
--sidebar-border: oklch(0.3715 0 0);
103+
--sidebar-ring: oklch(0.6231 0.188 259.8145);
104+
--font-sans: Inter, sans-serif;
105+
--font-serif: Source Serif 4, serif;
106+
--font-mono: JetBrains Mono, monospace;
107+
--radius: 0rem;
108+
--shadow-x: 0;
109+
--shadow-y: 1px;
110+
--shadow-blur: 3px;
111+
--shadow-spread: 0px;
112+
--shadow-opacity: 0.1;
113+
--shadow-color: oklch(0 0 0);
114+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
115+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
116+
--shadow-sm:
117+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
118+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
119+
--shadow-md:
120+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
121+
--shadow-lg:
122+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
123+
--shadow-xl:
124+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
125+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
120126
}
121127

122128
@theme inline {
123-
--radius-sm: calc(var(--radius) - 4px);
124-
--radius-md: calc(var(--radius) - 2px);
125-
--radius-lg: var(--radius);
126-
--radius-xl: calc(var(--radius) + 4px);
127129
--color-background: var(--background);
128130
--color-foreground: var(--foreground);
129131
--color-card: var(--card);
@@ -156,8 +158,25 @@
156158
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
157159
--color-sidebar-border: var(--sidebar-border);
158160
--color-sidebar-ring: var(--sidebar-ring);
159-
}
160161

162+
--font-sans: var(--font-sans);
163+
--font-mono: var(--font-mono);
164+
--font-serif: var(--font-serif);
165+
166+
--radius-sm: calc(var(--radius) - 4px);
167+
--radius-md: calc(var(--radius) - 2px);
168+
--radius-lg: var(--radius);
169+
--radius-xl: calc(var(--radius) + 4px);
170+
171+
--shadow-2xs: var(--shadow-2xs);
172+
--shadow-xs: var(--shadow-xs);
173+
--shadow-sm: var(--shadow-sm);
174+
--shadow: var(--shadow);
175+
--shadow-md: var(--shadow-md);
176+
--shadow-lg: var(--shadow-lg);
177+
--shadow-xl: var(--shadow-xl);
178+
--shadow-2xl: var(--shadow-2xl);
179+
}
161180
@layer base {
162181
* {
163182
@apply border-border outline-ring/50;

0 commit comments

Comments
 (0)