mirror of
https://gitlab.com/davidels1986/ore-cart-checkout.git
synced 2026-10-30 02:59:13 +00:00
Changes
This commit is contained in:
gpt-engineer-app[bot]
parent
0d97a81c0f
commit
56d80daace
2 changed files with 71 additions and 62 deletions
125
src/index.css
125
src/index.css
|
|
@ -7,106 +7,113 @@
|
|||
@layer base {
|
||||
:root {
|
||||
/* Westscott Fasteners Brand Colors */
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 215 25% 15%;
|
||||
--background: 30 20% 98%;
|
||||
--foreground: 20 25% 12%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 215 25% 15%;
|
||||
--card-foreground: 20 25% 12%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 215 25% 15%;
|
||||
--popover-foreground: 20 25% 12%;
|
||||
|
||||
/* Primary Blue - Trust & Professionalism */
|
||||
--primary: 216 65% 35%;
|
||||
/* Primary Orange - Energy & Brand Identity */
|
||||
--primary: 14 85% 50%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
/* Secondary - Light neutral */
|
||||
--secondary: 210 15% 95%;
|
||||
--secondary-foreground: 215 25% 15%;
|
||||
/* Secondary - Warm neutral */
|
||||
--secondary: 30 15% 95%;
|
||||
--secondary-foreground: 20 25% 12%;
|
||||
|
||||
--muted: 210 15% 92%;
|
||||
--muted-foreground: 215 12% 45%;
|
||||
--muted: 30 15% 92%;
|
||||
--muted-foreground: 20 12% 45%;
|
||||
|
||||
/* Accent Orange - Energy & Action */
|
||||
--accent: 14 85% 52%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
/* Accent Yellow - Highlights & CTAs */
|
||||
--accent: 42 95% 50%;
|
||||
--accent-foreground: 20 25% 12%;
|
||||
|
||||
/* Brand Yellow - Highlights */
|
||||
--brand-yellow: 42 95% 55%;
|
||||
--brand-yellow-foreground: 215 25% 15%;
|
||||
--brand-yellow-foreground: 20 25% 12%;
|
||||
|
||||
/* Brand Red */
|
||||
--brand-red: 4 78% 55%;
|
||||
--brand-red: 4 78% 50%;
|
||||
--brand-red-foreground: 0 0% 100%;
|
||||
|
||||
/* Brand Blue - Accent only */
|
||||
--brand-blue: 210 70% 45%;
|
||||
--brand-blue-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 214 20% 88%;
|
||||
--input: 214 20% 88%;
|
||||
--ring: 216 65% 35%;
|
||||
--border: 30 20% 88%;
|
||||
--input: 30 20% 88%;
|
||||
--ring: 14 85% 50%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom shadows */
|
||||
--shadow-sm: 0 1px 2px 0 hsl(215 25% 15% / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px hsl(215 25% 15% / 0.08), 0 2px 4px -2px hsl(215 25% 15% / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px hsl(215 25% 15% / 0.1), 0 4px 6px -4px hsl(215 25% 15% / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px hsl(215 25% 15% / 0.1), 0 8px 10px -6px hsl(215 25% 15% / 0.1);
|
||||
/* Custom shadows with warm tint */
|
||||
--shadow-sm: 0 1px 2px 0 hsl(20 25% 15% / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px hsl(20 25% 15% / 0.08), 0 2px 4px -2px hsl(20 25% 15% / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px hsl(20 25% 15% / 0.1), 0 4px 6px -4px hsl(20 25% 15% / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px hsl(20 25% 15% / 0.1), 0 8px 10px -6px hsl(20 25% 15% / 0.1);
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--sidebar-background: 30 15% 98%;
|
||||
--sidebar-foreground: 20 25% 26%;
|
||||
--sidebar-primary: 14 85% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 42 40% 95%;
|
||||
--sidebar-accent-foreground: 20 25% 12%;
|
||||
--sidebar-border: 30 15% 91%;
|
||||
--sidebar-ring: 14 85% 50%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 215 25% 10%;
|
||||
--foreground: 210 20% 95%;
|
||||
--background: 20 20% 8%;
|
||||
--foreground: 30 20% 95%;
|
||||
|
||||
--card: 215 25% 13%;
|
||||
--card-foreground: 210 20% 95%;
|
||||
--card: 20 20% 12%;
|
||||
--card-foreground: 30 20% 95%;
|
||||
|
||||
--popover: 215 25% 13%;
|
||||
--popover-foreground: 210 20% 95%;
|
||||
--popover: 20 20% 12%;
|
||||
--popover-foreground: 30 20% 95%;
|
||||
|
||||
--primary: 216 65% 50%;
|
||||
--primary: 14 85% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--secondary: 215 20% 20%;
|
||||
--secondary-foreground: 210 20% 95%;
|
||||
--secondary: 20 15% 18%;
|
||||
--secondary-foreground: 30 20% 95%;
|
||||
|
||||
--muted: 215 20% 18%;
|
||||
--muted-foreground: 215 15% 60%;
|
||||
--muted: 20 15% 16%;
|
||||
--muted-foreground: 20 12% 60%;
|
||||
|
||||
--accent: 14 85% 55%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--accent: 42 95% 55%;
|
||||
--accent-foreground: 20 25% 12%;
|
||||
|
||||
--brand-yellow: 42 95% 55%;
|
||||
--brand-yellow-foreground: 215 25% 15%;
|
||||
--brand-yellow-foreground: 20 25% 12%;
|
||||
|
||||
--brand-red: 4 78% 55%;
|
||||
--brand-red-foreground: 0 0% 100%;
|
||||
|
||||
--brand-blue: 210 70% 50%;
|
||||
--brand-blue-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive-foreground: 30 20% 98%;
|
||||
|
||||
--border: 215 20% 22%;
|
||||
--input: 215 20% 22%;
|
||||
--ring: 216 65% 50%;
|
||||
--border: 20 15% 20%;
|
||||
--input: 20 15% 20%;
|
||||
--ring: 14 85% 55%;
|
||||
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-background: 20 15% 10%;
|
||||
--sidebar-foreground: 30 20% 95%;
|
||||
--sidebar-primary: 14 85% 55%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--sidebar-accent: 20 15% 16%;
|
||||
--sidebar-accent-foreground: 30 20% 95%;
|
||||
--sidebar-border: 20 15% 18%;
|
||||
--sidebar-ring: 14 85% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,11 +163,11 @@
|
|||
}
|
||||
|
||||
.gradient-industrial {
|
||||
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(216 65% 28%) 100%);
|
||||
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(4 78% 40%) 100%);
|
||||
}
|
||||
|
||||
.gradient-accent {
|
||||
background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--brand-yellow)) 100%);
|
||||
background: linear-gradient(135deg, hsl(var(--brand-yellow)) 0%, hsl(var(--primary)) 100%);
|
||||
}
|
||||
|
||||
.badge-new {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@ export default {
|
|||
"yellow-foreground": "hsl(var(--brand-yellow-foreground))",
|
||||
red: "hsl(var(--brand-red))",
|
||||
"red-foreground": "hsl(var(--brand-red-foreground))",
|
||||
blue: "hsl(var(--brand-blue))",
|
||||
"blue-foreground": "hsl(var(--brand-blue-foreground))",
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: "hsl(var(--sidebar-background))",
|
||||
|
|
@ -74,9 +76,9 @@ export default {
|
|||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
boxShadow: {
|
||||
'industrial': '0 4px 6px -1px hsl(215 25% 15% / 0.08), 0 2px 4px -2px hsl(215 25% 15% / 0.06)',
|
||||
'industrial-lg': '0 10px 15px -3px hsl(215 25% 15% / 0.1), 0 4px 6px -4px hsl(215 25% 15% / 0.1)',
|
||||
'industrial-xl': '0 20px 25px -5px hsl(215 25% 15% / 0.1), 0 8px 10px -6px hsl(215 25% 15% / 0.1)',
|
||||
'industrial': '0 4px 6px -1px hsl(20 25% 15% / 0.08), 0 2px 4px -2px hsl(20 25% 15% / 0.06)',
|
||||
'industrial-lg': '0 10px 15px -3px hsl(20 25% 15% / 0.1), 0 4px 6px -4px hsl(20 25% 15% / 0.1)',
|
||||
'industrial-xl': '0 20px 25px -5px hsl(20 25% 15% / 0.1), 0 8px 10px -6px hsl(20 25% 15% / 0.1)',
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue