consultoria-as
380698258a
- Login: PIN pad con seleccion de usuario + auth real via API - Catalogo: grid de productos con sidebar nav y filtros - POS: layout split con numpad y area de venta - tokens.css: sistema completo de CSS variables (colores, tipografia, espaciado) - 2 temas: Industrial Robusto (dark/amber) y Tecnico Moderno (light/orange) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
565 lines
20 KiB
CSS
565 lines
20 KiB
CSS
/* ==========================================================================
|
||
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: <html data-theme="industrial"> or <body data-theme="industrial">
|
||
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: <html data-theme="modern"> or <body data-theme="modern">
|
||
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%);
|
||
}
|
||
|
||
|
||
/* ==========================================================================
|
||
END OF TOKENS FILE
|
||
nexus-autoparts-design/tokens/tokens.css
|
||
========================================================================== */
|