Mohamed Boudra
2d1ab5bf79
- Introduced a Babel configuration file for the app. - Updated various components and styles to utilize the new theme structure, replacing direct color references with palette-based colors for improved consistency and maintainability. - Adjusted styles across multiple components to align with the new theme, enhancing the overall UI experience.
226 lines
3.6 KiB
TypeScript
226 lines
3.6 KiB
TypeScript
const baseColors = {
|
|
// Base colors
|
|
white: "#ffffff",
|
|
black: "#000000",
|
|
|
|
// Zinc scale (primary gray palette)
|
|
zinc: {
|
|
50: "#fafafa",
|
|
100: "#f4f4f5",
|
|
200: "#e4e4e7",
|
|
300: "#d4d4d8",
|
|
400: "#a1a1aa",
|
|
500: "#71717a",
|
|
600: "#52525b",
|
|
700: "#3f3f46",
|
|
800: "#27272a",
|
|
900: "#18181b",
|
|
},
|
|
|
|
// Gray scale
|
|
gray: {
|
|
50: "#f9fafb",
|
|
100: "#f3f4f6",
|
|
200: "#e5e7eb",
|
|
300: "#d1d5db",
|
|
400: "#9ca3af",
|
|
500: "#6b7280",
|
|
600: "#4b5563",
|
|
700: "#374151",
|
|
800: "#1f2937",
|
|
900: "#111827",
|
|
},
|
|
|
|
// Slate scale
|
|
slate: {
|
|
200: "#e2e8f0",
|
|
},
|
|
|
|
// Blue scale
|
|
blue: {
|
|
50: "#eff6ff",
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
950: "#172554",
|
|
},
|
|
|
|
// Green scale
|
|
green: {
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
},
|
|
|
|
// Red scale
|
|
red: {
|
|
100: "#fee2e2",
|
|
200: "#fecaca",
|
|
300: "#fca5a5",
|
|
500: "#ef4444",
|
|
600: "#dc2626",
|
|
800: "#991b1b",
|
|
900: "#7f1d1d",
|
|
},
|
|
|
|
// Teal scale
|
|
teal: {
|
|
200: "#99f6e4",
|
|
},
|
|
|
|
// Amber scale
|
|
amber: {
|
|
500: "#f59e0b",
|
|
},
|
|
|
|
// Yellow scale
|
|
yellow: {
|
|
400: "#fbbf24",
|
|
},
|
|
|
|
// Purple scale
|
|
purple: {
|
|
500: "#a855f7",
|
|
600: "#9333ea",
|
|
},
|
|
|
|
// Orange scale
|
|
orange: {
|
|
500: "#f97316",
|
|
600: "#ea580c",
|
|
},
|
|
} as const;
|
|
|
|
// Semantic color tokens (shadcn-style)
|
|
const lightSemanticColors = {
|
|
background: "#ffffff",
|
|
foreground: "#09090b",
|
|
card: "#ffffff",
|
|
cardForeground: "#09090b",
|
|
popover: "#ffffff",
|
|
popoverForeground: "#09090b",
|
|
primary: "#18181b",
|
|
primaryForeground: "#fafafa",
|
|
secondary: "#f4f4f5",
|
|
secondaryForeground: "#18181b",
|
|
muted: "#f4f4f5",
|
|
mutedForeground: "#71717a",
|
|
accent: "#f4f4f5",
|
|
accentForeground: "#18181b",
|
|
destructive: "#ef4444",
|
|
destructiveForeground: "#fafafa",
|
|
border: "#e4e4e7",
|
|
input: "#e4e4e7",
|
|
ring: "#18181b",
|
|
} as const;
|
|
|
|
const darkSemanticColors = {
|
|
background: "#09090b",
|
|
foreground: "#fafafa",
|
|
card: "#09090b",
|
|
cardForeground: "#fafafa",
|
|
popover: "#09090b",
|
|
popoverForeground: "#fafafa",
|
|
primary: "#fafafa",
|
|
primaryForeground: "#18181b",
|
|
secondary: "#27272a",
|
|
secondaryForeground: "#fafafa",
|
|
muted: "#27272a",
|
|
mutedForeground: "#a1a1aa",
|
|
accent: "#27272a",
|
|
accentForeground: "#fafafa",
|
|
destructive: "#7f1d1d",
|
|
destructiveForeground: "#fafafa",
|
|
border: "#27272a",
|
|
input: "#27272a",
|
|
ring: "#d4d4d8",
|
|
} as const;
|
|
|
|
const commonTheme = {
|
|
spacing: {
|
|
0: 0,
|
|
1: 4,
|
|
2: 8,
|
|
3: 12,
|
|
4: 16,
|
|
6: 24,
|
|
8: 32,
|
|
12: 48,
|
|
16: 64,
|
|
20: 80,
|
|
24: 96,
|
|
32: 128,
|
|
},
|
|
|
|
fontSize: {
|
|
xs: 10,
|
|
sm: 12,
|
|
base: 14,
|
|
lg: 16,
|
|
xl: 18,
|
|
"2xl": 20,
|
|
"3xl": 24,
|
|
},
|
|
|
|
fontWeight: {
|
|
normal: "normal" as const,
|
|
semibold: "600" as const,
|
|
bold: "bold" as const,
|
|
},
|
|
|
|
borderRadius: {
|
|
none: 0,
|
|
sm: 2,
|
|
base: 4,
|
|
md: 6,
|
|
lg: 8,
|
|
xl: 12,
|
|
"2xl": 16,
|
|
full: 9999,
|
|
},
|
|
|
|
borderWidth: {
|
|
0: 0,
|
|
1: 1,
|
|
2: 2,
|
|
},
|
|
|
|
opacity: {
|
|
0: 0,
|
|
50: 0.5,
|
|
100: 1,
|
|
},
|
|
} as const;
|
|
|
|
export const darkTheme = {
|
|
colors: {
|
|
...darkSemanticColors,
|
|
palette: baseColors,
|
|
},
|
|
...commonTheme,
|
|
} as const;
|
|
|
|
export const lightTheme = {
|
|
colors: {
|
|
...lightSemanticColors,
|
|
palette: baseColors,
|
|
},
|
|
...commonTheme,
|
|
} as const;
|
|
|
|
// Keep compatibility with existing code
|
|
export const theme = darkTheme;
|
|
|
|
// Export a union type that works for both themes
|
|
export type Theme = typeof darkTheme | typeof lightTheme;
|