ui refactor: yuhhhhhh 80% done
This commit is contained in:
user
@@ -9,131 +9,145 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 24 33.3333% 97.0588%;
|
||||
--foreground: 0 0% 10.1961%;
|
||||
--card: 24 33.3333% 97.0588%;
|
||||
--card-foreground: 0 0% 10.1961%;
|
||||
--popover: 24 33.3333% 97.0588%;
|
||||
--popover-foreground: 0 0% 10.1961%;
|
||||
--primary: 0 55.7789% 39.0196%;
|
||||
/* Backgrounds - Clean neutral grays */
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
|
||||
/* Primary - Modern slate/blue (Stripe-inspired) */
|
||||
--primary: 221 83% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 43.0769 90.6977% 91.5686%;
|
||||
--secondary-foreground: 39.8438 100% 25.098%;
|
||||
--muted: 22.5 21.0526% 92.549%;
|
||||
--muted-foreground: 33.3333 5.4545% 32.3529%;
|
||||
--accent: 48 96.4912% 88.8235%;
|
||||
--accent-foreground: 0 62.8205% 30.5882%;
|
||||
--destructive: 0 70% 35.2941%;
|
||||
|
||||
/* Secondary - Soft gray-blue */
|
||||
--secondary: 214 32% 91%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
|
||||
/* Muted - Light grays */
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
|
||||
/* Accent - Vibrant blue */
|
||||
--accent: 217 91% 60%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
/* Destructive - Red for errors */
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 37.7143 63.6364% 89.2157%;
|
||||
--input: 37.7143 63.6364% 89.2157%;
|
||||
--ring: 0 55.7789% 39.0196%;
|
||||
--chart-1: 0 73.7089% 41.7647%;
|
||||
--chart-2: 0 55.7789% 39.0196%;
|
||||
--chart-3: 0 62.8205% 30.5882%;
|
||||
--chart-4: 25.9649 90.4762% 37.0588%;
|
||||
--chart-5: 22.7273 82.5% 31.3725%;
|
||||
--sidebar: 22.5 21.0526% 92.549%;
|
||||
--sidebar-foreground: 0 0% 10.1961%;
|
||||
--sidebar-primary: 0 55.7789% 39.0196%;
|
||||
|
||||
/* Borders & Inputs - Subtle gray */
|
||||
--border: 214 32% 91%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 221 83% 53%;
|
||||
|
||||
/* Charts - Modern palette */
|
||||
--chart-1: 221 83% 53%;
|
||||
--chart-2: 142 76% 36%;
|
||||
--chart-3: 262 83% 58%;
|
||||
--chart-4: 41 96% 50%;
|
||||
--chart-5: 0 84% 60%;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: 0 0% 98%;
|
||||
--sidebar-foreground: 222 47% 11%;
|
||||
--sidebar-primary: 221 83% 53%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 48 96.4912% 88.8235%;
|
||||
--sidebar-accent-foreground: 0 62.8205% 30.5882%;
|
||||
--sidebar-border: 37.7143 63.6364% 89.2157%;
|
||||
--sidebar-ring: 0 55.7789% 39.0196%;
|
||||
--font-sans: Poppins, sans-serif;
|
||||
--font-serif: Libre Baskerville, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--radius: 0.375rem;
|
||||
--shadow-x: 1px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 16px;
|
||||
--shadow-spread: -2px;
|
||||
--shadow-opacity: 0.12;
|
||||
--shadow-color: hsl(0 63% 18%);
|
||||
--shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
|
||||
--shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
|
||||
--shadow-sm:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 1px 2px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 1px 2px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-md:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 2px 4px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-lg:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 4px 6px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-xl:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 8px 10px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
--sidebar-accent: 214 32% 91%;
|
||||
--sidebar-accent-foreground: 222 47% 11%;
|
||||
--sidebar-border: 214 32% 91%;
|
||||
--sidebar-ring: 221 83% 53%;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: Fredoka, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* Design tokens */
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Shadows - Neutral */
|
||||
--shadow-color: 220 9% 46%;
|
||||
--shadow-2xs: 0 1px 2px 0 hsl(220 9% 46% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0 hsl(220 9% 46% / 0.1);
|
||||
--shadow-sm: 0 2px 4px 0 hsl(220 9% 46% / 0.1);
|
||||
--shadow: 0 4px 6px -1px hsl(220 9% 46% / 0.1);
|
||||
--shadow-md: 0 6px 12px -2px hsl(220 9% 46% / 0.15);
|
||||
--shadow-lg: 0 10px 20px -5px hsl(220 9% 46% / 0.2);
|
||||
--shadow-xl: 0 20px 25px -5px hsl(220 9% 46% / 0.25);
|
||||
--shadow-2xl: 0 25px 50px -12px hsl(220 9% 46% / 0.3);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 24 9.8039% 10%;
|
||||
--foreground: 60 4.7619% 95.8824%;
|
||||
--card: 12 6.4935% 15.098%;
|
||||
--card-foreground: 60 4.7619% 95.8824%;
|
||||
--popover: 12 6.4935% 15.098%;
|
||||
--popover-foreground: 60 4.7619% 95.8824%;
|
||||
--primary: 0 73.7089% 41.7647%;
|
||||
--primary-foreground: 24 33.3333% 97.0588%;
|
||||
--secondary: 22.7273 82.5% 31.3725%;
|
||||
--secondary-foreground: 48 96.4912% 88.8235%;
|
||||
--muted: 24 8.7719% 11.1765%;
|
||||
--muted-foreground: 24 5.7471% 82.9412%;
|
||||
--accent: 25.9649 90.4762% 37.0588%;
|
||||
--accent-foreground: 48 96.4912% 88.8235%;
|
||||
--destructive: 0 84.2365% 60.1961%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 30 6.25% 25.098%;
|
||||
--input: 30 6.25% 25.098%;
|
||||
--ring: 0 73.7089% 41.7647%;
|
||||
--chart-1: 0 90.604% 70.7843%;
|
||||
--chart-2: 0 84.2365% 60.1961%;
|
||||
--chart-3: 0 72.2222% 50.5882%;
|
||||
--chart-4: 43.2558 96.4126% 56.2745%;
|
||||
--chart-5: 37.6923 92.126% 50.1961%;
|
||||
--sidebar: 24 9.8039% 10%;
|
||||
--sidebar-foreground: 60 4.7619% 95.8824%;
|
||||
--sidebar-primary: 0 73.7089% 41.7647%;
|
||||
--sidebar-primary-foreground: 24 33.3333% 97.0588%;
|
||||
--sidebar-accent: 25.9649 90.4762% 37.0588%;
|
||||
--sidebar-accent-foreground: 48 96.4912% 88.8235%;
|
||||
--sidebar-border: 30 6.25% 25.098%;
|
||||
--sidebar-ring: 0 73.7089% 41.7647%;
|
||||
--font-sans: Poppins, sans-serif;
|
||||
--font-serif: Libre Baskerville, serif;
|
||||
--font-mono: IBM Plex Mono, monospace;
|
||||
--radius: 0.375rem;
|
||||
--shadow-x: 1px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 16px;
|
||||
--shadow-spread: -2px;
|
||||
--shadow-opacity: 0.12;
|
||||
--shadow-color: hsl(0 63% 18%);
|
||||
--shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
|
||||
--shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
|
||||
--shadow-sm:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 1px 2px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 1px 2px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-md:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 2px 4px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-lg:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 4px 6px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-xl:
|
||||
1px 1px 16px -2px hsl(0 63% 18% / 0.12),
|
||||
1px 8px 10px -3px hsl(0 63% 18% / 0.12);
|
||||
--shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3);
|
||||
/* Backgrounds - Dark mode */
|
||||
--background: 222 47% 11%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222 47% 15%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222 47% 15%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
/* Primary - Brighter blue for dark mode */
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 222 47% 11%;
|
||||
|
||||
/* Secondary */
|
||||
--secondary: 217 33% 17%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
/* Muted */
|
||||
--muted: 223 47% 11%;
|
||||
--muted-foreground: 215 20% 65%;
|
||||
|
||||
/* Accent */
|
||||
--accent: 217 91% 60%;
|
||||
--accent-foreground: 222 47% 11%;
|
||||
|
||||
/* Destructive */
|
||||
--destructive: 0 63% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
/* Borders & Inputs */
|
||||
--border: 217 33% 17%;
|
||||
--input: 217 33% 17%;
|
||||
--ring: 217 91% 60%;
|
||||
|
||||
/* Charts */
|
||||
--chart-1: 217 91% 60%;
|
||||
--chart-2: 142 76% 36%;
|
||||
--chart-3: 262 83% 58%;
|
||||
--chart-4: 41 96% 50%;
|
||||
--chart-5: 0 84% 60%;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar: 222 47% 11%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 217 91% 60%;
|
||||
--sidebar-primary-foreground: 222 47% 11%;
|
||||
--sidebar-accent: 217 33% 17%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217 33% 17%;
|
||||
--sidebar-ring: 217 91% 60%;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: Fredoka, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: ui-monospace, monospace;
|
||||
|
||||
/* Design tokens */
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Shadows - Dark mode */
|
||||
--shadow-color: 0 0% 0%;
|
||||
--shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
|
||||
--shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.4);
|
||||
--shadow-sm: 0 2px 4px 0 hsl(0 0% 0% / 0.4);
|
||||
--shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-md: 0 6px 12px -2px hsl(0 0% 0% / 0.5);
|
||||
--shadow-lg: 0 10px 20px -5px hsl(0 0% 0% / 0.6);
|
||||
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.7);
|
||||
--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,19 +161,20 @@
|
||||
scroll-behavior: smooth;
|
||||
font-family:
|
||||
"Fredoka",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,8 +189,49 @@
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* Stripe-inspired gradients */
|
||||
.gradient-mesh {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.gradient-success {
|
||||
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
|
||||
}
|
||||
|
||||
.gradient-error {
|
||||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.transition-smooth {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.all-reset {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/* Custom focus styles for better accessibility */
|
||||
@layer base {
|
||||
*:focus-visible {
|
||||
@apply outline-none ring-2 ring-primary ring-offset-2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth page transitions */
|
||||
@layer base {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user