santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change color schema into blue

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-23 19:49:36 +05:30
parent 137da4993e
commit 3bfc6d6aa0
2 changed files with 49 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/globals.css
View File

@@ -5,14 +5,14 @@
:root { :root {
--radius: 0.65rem; --radius: 0.65rem;
--background: oklch(1 0 0); --background: oklch(0.985 0.01 245);
--foreground: oklch(0.141 0.005 285.823); --foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0 / 0.4); --card: oklch(1 0 0 / 0.4);
--card-foreground: oklch(0.141 0.005 285.823); --card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823); --popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.541 0.281 293.009); --primary: oklch(0.55 0.18 250);
--primary-foreground: oklch(0.969 0.016 293.756); --primary-foreground: oklch(0.985 0.01 245);
--secondary: oklch(0.967 0.001 286.375); --secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885); --secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375); --muted: oklch(0.967 0.001 286.375);
@@ -22,33 +22,33 @@
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.92 0.004 286.32); --border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32); --input: oklch(0.92 0.004 286.32);
--ring: oklch(0.702 0.183 293.541); --ring: oklch(0.708 0 0);
--chart-1: oklch(0.65 0.18 25); /* Soft Red/Rose - High Priority */ --chart-1: oklch(0.7 0.16 25);
--chart-2: oklch(0.78 0.12 75); /* Warm Amber - Distinct */ --chart-2: oklch(0.82 0.14 75);
--chart-3: oklch(0.68 0.12 245); /* Azure Blue - Cool Professional */ --chart-3: oklch(0.72 0.14 245);
--chart-4: oklch(0.75 0.1 165); /* Mint Teal - Balanced */ --chart-4: oklch(0.78 0.12 165);
--chart-5: oklch(0.85 0.08 195); /* Soft Cyan - Subdued */ --chart-5: oklch(0.88 0.1 195);
--chart-6: oklch(0.62 0.22 295); /* Deep Violet - Theme Primary */ --chart-6: oklch(0.65 0.24 295);
--chart-8: oklch(0.58 0.2 335); /* Cool Magenta - Distant Accent */ --chart-8: oklch(0.62 0.22 335);
--sidebar: oklch(0.985 0 0 / 0.6); --sidebar: oklch(0.985 0 0 / 0.6);
--sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.541 0.281 293.009); --sidebar-primary: oklch(0.546 0.245 262.881);
--sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
--sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32); --sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.702 0.183 293.541); --sidebar-ring: oklch(0.708 0 0);
} }
.dark { .dark {
--background: oklch(0.141 0.005 285.823); --background: oklch(0.141 0.02 245);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885 / 0.6); --card: oklch(0.21 0.006 285.885 / 0.6);
--card-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885); --popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0); --popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.606 0.25 292.717); --primary: oklch(0.55 0.18 250);
--primary-foreground: oklch(0.969 0.016 293.756); --primary-foreground: oklch(0.985 0.01 245);
--secondary: oklch(0.274 0.006 286.033); --secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033); --muted: oklch(0.274 0.006 286.033);
@@ -58,24 +58,25 @@
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%); --border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%); --input: oklch(1 0 0 / 15%);
--ring: oklch(0.38 0.189 293.745); --ring: oklch(0.556 0 0);
--chart-1: oklch(0.7 0.16 25); --chart-1: oklch(0.65 0.18 25); /* Soft Red/Rose - High Priority */
--chart-2: oklch(0.82 0.14 75); --chart-2: oklch(0.78 0.12 75); /* Warm Amber - Distinct */
--chart-3: oklch(0.72 0.14 245); --chart-3: oklch(0.68 0.12 245); /* Azure Blue - Cool Professional */
--chart-4: oklch(0.78 0.12 165); --chart-4: oklch(0.75 0.1 165); /* Mint Teal - Balanced */
--chart-5: oklch(0.88 0.1 195); --chart-5: oklch(0.85 0.08 195); /* Soft Cyan - Subdued */
--chart-6: oklch(0.65 0.24 295); --chart-6: oklch(0.62 0.22 295); /* Deep Violet - Theme Primary */
--chart-8: oklch(0.62 0.22 335); --chart-8: oklch(0.58 0.2 335); /* Cool Magenta - Distant Accent */
--sidebar: oklch(0.21 0.006 285.885 / 0.6); --sidebar: oklch(0.21 0.006 285.885 / 0.6);
--sidebar-foreground: oklch(0.985 0 0); --sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.606 0.25 292.717); --sidebar-primary: oklch(0.623 0.214 259.815);
--sidebar-primary-foreground: oklch(0.969 0.016 293.756); --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
--sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.38 0.189 293.745); --sidebar-ring: oklch(0.439 0 0);
} }
@theme inline { @theme inline {
--font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif; --font-sans: 'Geist', 'Geist Fallback', system-ui, sans-serif;
--font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace; --font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;

26
src/components/background-gradient.tsx
View File

@@ -6,10 +6,13 @@ export function BackgroundGradient() {
className="fixed inset-0 -z-10 h-full w-full overflow-hidden pointer-events-none" className="fixed inset-0 -z-10 h-full w-full overflow-hidden pointer-events-none"
aria-hidden="true" aria-hidden="true"
> >
{/* Top Gradient */} {/* Base subtle glow */}
<div className="absolute inset-x-0 top-0 transform-gpu overflow-hidden blur-3xl"> <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.05),transparent)]" />
{/* Top-Left Gradient - Vibrant Cyan/Blue */}
<div className="absolute inset-x-0 -top-10 transform-gpu overflow-hidden blur-3xl sm:-top-20">
<div <div
className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75" className="relative left-[calc(50%-15rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-12 bg-linear-to-tr from-[#06b6d4] to-[#3b82f6] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
style={{ style={{
clipPath: clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
@@ -17,10 +20,21 @@ export function BackgroundGradient() {
/> />
</div> </div>
{/* Middle/Bottom Gradient for balance */} {/* Middle-Right Gradient - Rich Indigo */}
<div className="absolute inset-x-0 bottom-0 transform-gpu overflow-hidden blur-3xl"> <div className="absolute inset-x-0 top-[20%] transform-gpu overflow-hidden blur-3xl opacity-50">
<div <div
className="relative left-[calc(50%+11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+30rem)] sm:w-288.75" className="relative left-[calc(50%+15rem)] aspect-1155/678 w-144.5 -translate-x-1/2 -rotate-30 bg-linear-to-tr from-[#4f46e5] to-[#6366f1] opacity-25 sm:left-[calc(50%+35rem)] sm:w-288.75"
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
/>
</div>
{/* Bottom Gradient - Deep Blue with hint of violet */}
<div className="absolute inset-x-0 bottom-[-10%] transform-gpu overflow-hidden blur-3xl">
<div
className="relative left-[calc(50%+5rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-12 bg-linear-to-tr from-[#3b82f6] to-[#4338ca] opacity-20 sm:left-[calc(50%+20rem)] sm:w-288.75"
style={{ style={{
clipPath: clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',