Skip to content

Upgrade the UI design system #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dager-mohamed merged 4 commits into from
Oct 9, 2025
Merged

Upgrade the UI design system #25

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fadc399
Add deploy service to railway
dager-mohamed Oct 9, 2025
9fdf23c
chore: remove deploy workflow for Railway
dager-mohamed Oct 9, 2025
c26b79f
Merge branch 'main' of https://github.com/Opensyte/opensyte into feat…
dager-mohamed Oct 9, 2025
1000617
...
dager-mohamed Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 124 additions & 105 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,120 +10,122 @@
}

:root {
--radius: 0.5rem;

/* Light Mode */
--background: oklch(0.99 0 0);
--foreground: oklch(0.15 0 0);

--background: oklch(1 0 0);
--foreground: oklch(0.3211 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.15 0 0);

--card-foreground: oklch(0.3211 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.15 0 0);

/* Primary - Modern blue/indigo accent */
--primary: oklch(0.51 0.24 265);
--popover-foreground: oklch(0.3211 0 0);
--primary: oklch(0.6231 0.188 259.8145);
--primary-foreground: oklch(1 0 0);

/* Secondary - Neutral gray */
--secondary: oklch(0.96 0.01 265);
--secondary-foreground: oklch(0.15 0 0);

/* Muted - Subtle gray backgrounds */
--muted: oklch(0.98 0.005 265);
--muted-foreground: oklch(0.45 0.02 265);

/* Accent - Neutral gray for hover states */
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0.15 0 0);

/* Destructive - Subtle red */
--destructive: oklch(0.55 0.22 27);
--destructive-foreground: oklch(0.99 0 0);

/* Borders & Inputs */
--border: oklch(0.92 0.01 265);
--input: oklch(0.92 0.01 265);
--ring: oklch(0.51 0.24 265);

/* Chart colors - Complementary palette */
--chart-1: oklch(0.51 0.24 265);
--chart-2: oklch(0.65 0.18 165);
--chart-3: oklch(0.55 0.22 27);
--chart-4: oklch(0.75 0.15 85);
--chart-5: oklch(0.6 0.2 310);

/* Sidebar */
--sidebar: oklch(0.98 0.005 265);
--sidebar-foreground: oklch(0.15 0 0);
--sidebar-primary: oklch(0.51 0.24 265);
--secondary: oklch(0.967 0.0029 264.5419);
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
--muted: oklch(0.9846 0.0017 247.8389);
--muted-foreground: oklch(0.551 0.0234 264.3637);
--accent: oklch(0.9514 0.025 236.8242);
--accent-foreground: oklch(0.3791 0.1378 265.5222);
--destructive: oklch(0.6368 0.2078 25.3313);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.9276 0.0058 264.5313);
--input: oklch(0.9276 0.0058 264.5313);
--ring: oklch(0.6231 0.188 259.8145);
--chart-1: oklch(0.6231 0.188 259.8145);
--chart-2: oklch(0.5461 0.2152 262.8809);
--chart-3: oklch(0.4882 0.2172 264.3763);
--chart-4: oklch(0.4244 0.1809 265.6377);
--chart-5: oklch(0.3791 0.1378 265.5222);
--sidebar: oklch(0.9846 0.0017 247.8389);
--sidebar-foreground: oklch(0.3211 0 0);
--sidebar-primary: oklch(0.6231 0.188 259.8145);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.94 0 0);
--sidebar-accent-foreground: oklch(0.15 0 0);
--sidebar-border: oklch(0.92 0.01 265);
--sidebar-ring: oklch(0.51 0.24 265);
--sidebar-accent: oklch(0.9514 0.025 236.8242);
--sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
--sidebar-border: oklch(0.9276 0.0058 264.5313);
--sidebar-ring: oklch(0.6231 0.188 259.8145);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0rem;
--shadow-x: 0;
--shadow-y: 1px;
--shadow-blur: 3px;
--shadow-spread: 0px;
--shadow-opacity: 0.1;
--shadow-color: oklch(0 0 0);
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}

.dark {
/* Dark Mode - Modern light black */
--background: oklch(0.17 0.01 265);
--foreground: oklch(0.94 0 0);

--card: oklch(0.2 0.01 265);
--card-foreground: oklch(0.94 0 0);

--popover: oklch(0.2 0.01 265);
--popover-foreground: oklch(0.94 0 0);

/* Primary - Brighter in dark mode */
--primary: oklch(0.65 0.25 265);
--primary-foreground: oklch(0.98 0 0);

/* Secondary - Dark neutral */
--secondary: oklch(0.24 0.01 265);
--secondary-foreground: oklch(0.94 0 0);

/* Muted - Subtle dark backgrounds */
--muted: oklch(0.22 0.01 265);
--muted-foreground: oklch(0.62 0.02 265);

/* Accent - Neutral gray for hover states */
--accent: oklch(0.28 0 0);
--accent-foreground: oklch(0.94 0 0);

/* Destructive - Adjusted for dark mode */
--destructive: oklch(0.65 0.25 27);
--destructive-foreground: oklch(0.95 0 0);

/* Borders & Inputs - Subtle in dark mode */
--border: oklch(0.94 0 0 / 8%);
--input: oklch(0.94 0 0 / 12%);
--ring: oklch(0.65 0.25 265);

/* Chart colors - Vibrant in dark mode */
--chart-1: oklch(0.65 0.25 265);
--chart-2: oklch(0.7 0.2 165);
--chart-3: oklch(0.65 0.25 27);
--chart-4: oklch(0.8 0.18 85);
--chart-5: oklch(0.7 0.22 310);

/* Sidebar */
--sidebar: oklch(0.19 0.01 265);
--sidebar-foreground: oklch(0.94 0 0);
--sidebar-primary: oklch(0.65 0.25 265);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.28 0 0);
--sidebar-accent-foreground: oklch(0.94 0 0);
--sidebar-border: oklch(0.94 0 0 / 8%);
--sidebar-ring: oklch(0.65 0.25 265);
--background: oklch(0.2046 0 0);
--foreground: oklch(0.9219 0 0);
--card: oklch(0.2686 0 0);
--card-foreground: oklch(0.9219 0 0);
--popover: oklch(0.2686 0 0);
--popover-foreground: oklch(0.9219 0 0);
--primary: oklch(0.6231 0.188 259.8145);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.967 0.0029 264.5419);
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
--muted: oklch(0.2393 0 0);
--muted-foreground: oklch(0.7155 0 0);
--accent: oklch(0.351 0 264.364);
--accent-foreground: oklch(0.8823 0.0571 254.1284);
--destructive: oklch(0.6368 0.2078 25.3313);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.3715 0 0);
--input: oklch(0.3715 0 0);
--ring: oklch(0.6231 0.188 259.8145);
--chart-1: oklch(0.7137 0.1434 254.624);
--chart-2: oklch(0.6231 0.188 259.8145);
--chart-3: oklch(0.5461 0.2152 262.8809);
--chart-4: oklch(0.4882 0.2172 264.3763);
--chart-5: oklch(0.4244 0.1809 265.6377);
--sidebar: oklch(0.2046 0 0);
--sidebar-foreground: oklch(0.9219 0 0);
--sidebar-primary: oklch(0.6231 0.188 259.8145);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.3791 0.1378 265.5222);
--sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
--sidebar-border: oklch(0.3715 0 0);
--sidebar-ring: oklch(0.6231 0.188 259.8145);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0rem;
--shadow-x: 0;
--shadow-y: 1px;
--shadow-blur: 3px;
--shadow-spread: 0px;
--shadow-opacity: 0.1;
--shadow-color: oklch(0 0 0);
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
Expand Down Expand Up @@ -156,8 +158,25 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}

--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);

--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);

--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}
@layer base {
* {
@apply border-border outline-ring/50;
Expand Down
Loading