/* ========================================================================== NEXUS AUTOPARTS — Design Tokens POS System for Auto Parts Stores Version: 1.0.0 ========================================================================== Themes: - [data-theme="industrial"] — Industrial Robusto (Dark) - [data-theme="modern"] — Técnico Moderno (Light) ========================================================================== */ /* -------------------------------------------------------------------------- GOOGLE FONTS IMPORTS -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Barlow+Condensed:wght@600;800&family=Poppins:wght@300;400;600;700&display=swap'); /* ========================================================================== GLOBAL TOKENS — Theme-independent, shared across both themes ========================================================================== */ :root { /* ------------------------------------------------------------------------ SEMANTIC COLORS — Status / Feedback (shared) ------------------------------------------------------------------------ */ --color-success: #22c55e; --color-success-light: #bbf7d0; --color-success-dark: #15803d; --color-warning: #eab308; --color-warning-light: #fef08a; --color-warning-dark: #a16207; --color-error: #ef4444; --color-error-light: #fecaca; --color-error-dark: #b91c1c; /* ------------------------------------------------------------------------ NEUTRAL SCALE — Grey ramp (50–900) ------------------------------------------------------------------------ */ --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; /* ------------------------------------------------------------------------ SPACING — 4px base grid ------------------------------------------------------------------------ */ /* --space-N = N × 4px */ --space-1: 4px; /* 4px */ --space-2: 8px; /* 8px */ --space-3: 12px; /* 12px */ --space-4: 16px; /* 16px */ --space-5: 20px; /* 20px */ --space-6: 24px; /* 24px */ --space-7: 28px; /* 28px */ --space-8: 32px; /* 32px */ --space-9: 36px; /* 36px */ --space-10: 40px; /* 40px */ --space-11: 44px; /* 44px */ --space-12: 48px; /* 48px */ --space-14: 56px; /* 56px */ --space-16: 64px; /* 64px */ /* ------------------------------------------------------------------------ BORDER RADIUS ------------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* ------------------------------------------------------------------------ TRANSITIONS ------------------------------------------------------------------------ */ --transition-fast: all 0.10s ease; --transition-normal: all 0.20s ease; --transition-slow: all 0.40s ease; /* Easing functions for fine-grained control */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 400ms; /* ------------------------------------------------------------------------ Z-INDEX SCALE ------------------------------------------------------------------------ */ --z-dropdown: 1000; --z-sticky: 1020; --z-modal: 1050; --z-toast: 1080; /* ------------------------------------------------------------------------ BREAKPOINTS — Reference only (use in media queries, not calc()) sm: 640px md: 768px lg: 1024px xl: 1280px ------------------------------------------------------------------------ */ } /* ========================================================================== THEME A — Industrial Robusto (Dark) Usage: or Style: Industrial, robust, high-contrast amber accents, clip-path diagonals ========================================================================== */ [data-theme="industrial"] { /* ------------------------------------------------------------------------ PRIMITIVE COLORS ------------------------------------------------------------------------ */ --color-primary: #F5A623; /* Amber gold — main brand accent */ --color-primary-hover: #e8951a; /* Darker amber on hover */ --color-primary-active: #d4850f; /* Pressed state */ --color-primary-muted: rgba(245, 166, 35, 0.15); /* Subtle tint */ --color-secondary: #333333; /* Mid-dark border / secondary bg */ --color-secondary-hover: #444444; --color-accent: #F5A623; /* Same as primary in this theme */ /* ------------------------------------------------------------------------ BACKGROUNDS ------------------------------------------------------------------------ */ --color-bg-base: #0d0d0d; /* Page / app shell background */ --color-bg-elevated: #1a1a1a; /* Cards, panels, sidebars */ --color-bg-overlay: #252525; /* Modals, dropdowns, tooltips */ /* Surface levels (for layered UI) */ --color-surface-1: #1a1a1a; /* Lowest raised surface */ --color-surface-2: #252525; /* Mid-level surface */ --color-surface-3: #303030; /* Highest raised surface */ /* ------------------------------------------------------------------------ TEXT ------------------------------------------------------------------------ */ --color-text-primary: #FFFFFF; --color-text-secondary: #CCCCCC; --color-text-muted: #888888; --color-text-disabled: #555555; --color-text-inverse: #000000; /* Text on amber background */ --color-text-accent: #F5A623; /* ------------------------------------------------------------------------ BORDERS ------------------------------------------------------------------------ */ --color-border: #333333; --color-border-strong: #555555; --color-border-accent: #F5A623; --color-border-focus: #F5A623; /* ------------------------------------------------------------------------ BUTTONS ------------------------------------------------------------------------ */ /* Primary button */ --btn-primary-bg: #F5A623; --btn-primary-bg-hover: #e8951a; --btn-primary-bg-active: #d4850f; --btn-primary-text: #000000; --btn-primary-border: transparent; /* Secondary button */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: rgba(245, 166, 35, 0.10); --btn-secondary-text: #F5A623; --btn-secondary-border: #F5A623; /* Ghost / Danger */ --btn-ghost-bg: transparent; --btn-ghost-text: #CCCCCC; --btn-ghost-border: #333333; --btn-danger-bg: #ef4444; --btn-danger-text: #FFFFFF; /* ------------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------------ */ /* Font families */ --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', 'Arial', sans-serif; --font-mono: 'Courier New', 'Consolas', monospace; /* prices / SKUs */ /* Font weights */ --font-weight-light: 300; /* n/a in Barlow — falls to 400 */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Heading weights (Barlow Condensed) */ --heading-weight-primary: 800; --heading-weight-secondary: 600; /* ------------------------------------------------------------------------ SHADOWS / ELEVATION Tinted with amber to feel cohesive with the theme ------------------------------------------------------------------------ */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.60), 0 2px 4px rgba(0, 0, 0, 0.40); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.70), 0 4px 6px rgba(0, 0, 0, 0.50); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.80), 0 10px 10px rgba(0, 0, 0, 0.50); /* Accent glow — use on focused/highlighted elements */ --shadow-accent: 0 0 0 3px rgba(245, 166, 35, 0.40); --shadow-focus: 0 0 0 3px rgba(245, 166, 35, 0.50); /* ------------------------------------------------------------------------ MISC UI ------------------------------------------------------------------------ */ --scrollbar-track: #1a1a1a; --scrollbar-thumb: #444444; --scrollbar-thumb-hover: #F5A623; --overlay-backdrop: rgba(0, 0, 0, 0.75); /* Industrial clip-path angle (use in clip-path: polygon(...) utilities) */ --clip-diagonal-angle: 6deg; } /* ========================================================================== THEME B — Técnico Moderno (Light) Usage: or Style: Clean, modern, Poppins typography, subtle dot-grid background ========================================================================== */ [data-theme="modern"] { /* ------------------------------------------------------------------------ PRIMITIVE COLORS ------------------------------------------------------------------------ */ --color-primary: #FF6B35; /* Orange — main brand accent */ --color-primary-hover: #f05a22; /* Darker on hover */ --color-primary-active: #dc4a12; /* Pressed state */ --color-primary-muted: rgba(255, 107, 53, 0.10); /* Subtle tint */ --color-secondary: #1a1a2e; /* Deep navy — used for strong text */ --color-secondary-hover: #252545; --color-accent: #FF6B35; /* Same as primary in this theme */ /* ------------------------------------------------------------------------ BACKGROUNDS ------------------------------------------------------------------------ */ --color-bg-base: #FFFFFF; /* Page / app shell background */ --color-bg-elevated: #F8F9FF; /* Cards, panels — very subtle blue */ --color-bg-overlay: #FFFFFF; /* Modals, dropdowns */ /* Surface levels */ --color-surface-1: #F8F9FF; --color-surface-2: #F0F2FF; --color-surface-3: #E8EBFF; /* Dot-grid background pattern (apply via background-image on body/shell) */ /* background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); */ /* background-size: var(--dot-grid-size) var(--dot-grid-size); */ --dot-grid-color: rgba(26, 26, 46, 0.07); --dot-grid-size: 24px; /* ------------------------------------------------------------------------ TEXT ------------------------------------------------------------------------ */ --color-text-primary: #1a1a2e; --color-text-secondary: #4a4a6a; --color-text-muted: #8080a0; --color-text-disabled: #b0b0c8; --color-text-inverse: #FFFFFF; /* Text on orange background */ --color-text-accent: #FF6B35; /* ------------------------------------------------------------------------ BORDERS ------------------------------------------------------------------------ */ --color-border: #e2e4f0; --color-border-strong: #c8cadc; --color-border-accent: #FF6B35; --color-border-focus: #FF6B35; /* ------------------------------------------------------------------------ BUTTONS ------------------------------------------------------------------------ */ /* Primary button */ --btn-primary-bg: #FF6B35; --btn-primary-bg-hover: #f05a22; --btn-primary-bg-active: #dc4a12; --btn-primary-text: #FFFFFF; --btn-primary-border: transparent; /* Secondary button */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: rgba(255, 107, 53, 0.08); --btn-secondary-text: #FF6B35; --btn-secondary-border: #FF6B35; /* Ghost / Danger */ --btn-ghost-bg: transparent; --btn-ghost-text: #4a4a6a; --btn-ghost-border: #e2e4f0; --btn-danger-bg: #ef4444; --btn-danger-text: #FFFFFF; /* ------------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------------ */ /* Font families */ --font-heading: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Poppins', 'Segoe UI', sans-serif; --font-mono: 'Courier New', 'Consolas', monospace; /* prices / SKUs */ /* Font weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* falls to 700 in Poppins */ /* Heading weights (Poppins) */ --heading-weight-primary: 700; --heading-weight-secondary: 600; /* ------------------------------------------------------------------------ SHADOWS / ELEVATION Softer, cooler tints for the light theme ------------------------------------------------------------------------ */ --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.08), 0 1px 2px rgba(26, 26, 46, 0.05); --shadow-md: 0 4px 6px rgba(26, 26, 46, 0.08), 0 2px 4px rgba(26, 26, 46, 0.05); --shadow-lg: 0 10px 15px rgba(26, 26, 46, 0.10), 0 4px 6px rgba(26, 26, 46, 0.06); --shadow-xl: 0 20px 25px rgba(26, 26, 46, 0.12), 0 10px 10px rgba(26, 26, 46, 0.06); /* Accent glow — use on focused/highlighted elements */ --shadow-accent: 0 0 0 3px rgba(255, 107, 53, 0.25); --shadow-focus: 0 0 0 3px rgba(255, 107, 53, 0.30); /* ------------------------------------------------------------------------ MISC UI ------------------------------------------------------------------------ */ --scrollbar-track: #F8F9FF; --scrollbar-thumb: #c8cadc; --scrollbar-thumb-hover: #FF6B35; --overlay-backdrop: rgba(26, 26, 46, 0.50); /* No diagonal clip in modern theme — set to 0 for override-safe utilities */ --clip-diagonal-angle: 0deg; } /* ========================================================================== TYPOGRAPHY SCALE — Token definitions Resolved at theme level because font families differ between themes. These tokens map to semantic roles and should be consumed directly. ========================================================================== */ /* Shared scale values (dimensionless, theme-independent) */ :root { /* --- Type scale (font-size) --- */ --text-h1: clamp(2.25rem, 5vw, 3.5rem); /* 36px → 56px */ --text-h2: clamp(1.875rem, 4vw, 2.75rem); /* 30px → 44px */ --text-h3: clamp(1.5rem, 3vw, 2.125rem); /* 24px → 34px */ --text-h4: clamp(1.25rem, 2vw, 1.625rem); /* 20px → 26px */ --text-h5: 1.125rem; /* 18px */ --text-h6: 1rem; /* 16px */ --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-body-sm: 0.875rem; /* 14px */ --text-caption: 0.75rem; /* 12px */ --text-label: 0.8125rem; /* 13px */ --text-mono: 1rem; /* 16px — prices, SKUs */ /* --- Line heights --- */ --leading-h1: 1.10; --leading-h2: 1.12; --leading-h3: 1.15; --leading-h4: 1.20; --leading-h5: 1.25; --leading-h6: 1.30; --leading-body-lg: 1.65; --leading-body: 1.60; --leading-body-sm: 1.55; --leading-caption: 1.45; --leading-label: 1.40; --leading-mono: 1.50; /* --- Letter spacing --- */ --tracking-tight: -0.03em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.03em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; /* Use for ALL-CAPS labels / badges */ } /* Heading letter-spacing per theme */ [data-theme="industrial"] { --heading-tracking-h1: -0.02em; --heading-tracking-h2: -0.02em; --heading-tracking-h3: -0.01em; --heading-tracking-h4: 0em; --heading-tracking-h5: 0.02em; --heading-tracking-h6: 0.04em; } [data-theme="modern"] { --heading-tracking-h1: -0.03em; --heading-tracking-h2: -0.02em; --heading-tracking-h3: -0.01em; --heading-tracking-h4: 0em; --heading-tracking-h5: 0em; --heading-tracking-h6: 0.01em; } /* ========================================================================== COMPONENT SHORTHAND TOKENS Convenience aliases that combine multiple primitives. Components should reference these rather than the primitives above. ========================================================================== */ :root { /* --- Input / form fields --- */ /* These are intentionally left as CSS variable references so they resolve correctly within whichever theme is active at runtime. */ /* (No :root overrides needed — components consume --color-* directly.) */ /* --- Focus ring --- */ --focus-ring: 0 0 0 3px var(--shadow-focus, rgba(245,166,35,0.40)); /* --- Content max widths --- */ --content-xs: 480px; --content-sm: 640px; --content-md: 768px; --content-lg: 1024px; --content-xl: 1280px; --content-full: 100%; } /* ========================================================================== UTILITY — Scrollbar styles (opt-in via class) ========================================================================== */ .themed-scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .themed-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .themed-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track); } .themed-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); border: 2px solid var(--scrollbar-track); } .themed-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); } /* ========================================================================== UTILITY — Dot-grid background (Theme B helper) Apply class .bg-dot-grid to body or layout shell when using modern theme. ========================================================================== */ [data-theme="modern"] .bg-dot-grid { background-color: var(--color-bg-base); background-image: radial-gradient( circle, var(--dot-grid-color) 1px, transparent 1px ); background-size: var(--dot-grid-size) var(--dot-grid-size); } /* ========================================================================== UTILITY — Industrial diagonal clip helpers (Theme A) ========================================================================== */ [data-theme="industrial"] .clip-top-right { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); } [data-theme="industrial"] .clip-bottom-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); } [data-theme="industrial"] .clip-corner { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); } /* ========================================================================== GLASSMORPHISM TOKENS ========================================================================== */ [data-theme="industrial"] { --glass-bg: rgba(26, 26, 26, 0.70); --glass-bg-strong: rgba(26, 26, 26, 0.85); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 16px; --glass-highlight: rgba(245, 166, 35, 0.06); --glow-color: rgba(245, 166, 35, 0.40); --glow-color-soft: rgba(245, 166, 35, 0.15); --glow-color-strong: rgba(245, 166, 35, 0.60); --gradient-accent: linear-gradient(135deg, #F5A623 0%, #e8951a 50%, #d4850f 100%); --gradient-text: linear-gradient(135deg, #F5A623 0%, #FFD080 50%, #F5A623 100%); --canvas-grid-color: rgba(255, 255, 255, 0.06); --canvas-star-color: rgba(245, 166, 35, 0.30); --canvas-glow-color: rgba(245, 166, 35, 0.08); } [data-theme="modern"] { --glass-bg: rgba(248, 249, 255, 0.70); --glass-bg-strong: rgba(248, 249, 255, 0.85); --glass-border: rgba(26, 26, 46, 0.08); --glass-blur: 16px; --glass-highlight: rgba(255, 107, 53, 0.04); --glow-color: rgba(255, 107, 53, 0.35); --glow-color-soft: rgba(255, 107, 53, 0.12); --glow-color-strong: rgba(255, 107, 53, 0.55); --gradient-accent: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #FF6B35 100%); --gradient-text: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #e85520 100%); --canvas-grid-color: rgba(26, 26, 46, 0.05); --canvas-star-color: rgba(255, 107, 53, 0.20); --canvas-glow-color: rgba(255, 107, 53, 0.06); } /* ========================================================================== ANIMATION KEYFRAMES ========================================================================== */ @keyframes nx-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes nx-glow-pulse { 0%, 100% { box-shadow: 0 0 20px var(--glow-color-soft); } 50% { box-shadow: 0 0 40px var(--glow-color); } } @keyframes nx-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ========================================================================== END OF TOKENS FILE nexus-autoparts-design/tokens/tokens.css ========================================================================== */