feat: agregar design system completo con 2 temas (Industrial + Moderno)
- 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>
This commit is contained in:
1383
pos/static/css/catalog-design.css
Normal file
1383
pos/static/css/catalog-design.css
Normal file
File diff suppressed because it is too large
Load Diff
834
pos/static/css/login-design.css
Normal file
834
pos/static/css/login-design.css
Normal file
@@ -0,0 +1,834 @@
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
RESET & BASE
|
||||
===================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
color var(--duration-slow) var(--ease-in-out);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Modern theme dot-grid on body */
|
||||
[data-theme="modern"] body,
|
||||
[data-theme="modern"].theme-root {
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
var(--dot-grid-color) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: var(--dot-grid-size) var(--dot-grid-size);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
THEME SWITCHER BAR (sticky top)
|
||||
===================================================================== */
|
||||
|
||||
.theme-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-6);
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.theme-bar__label {
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
border: 1.5px solid var(--color-border);
|
||||
background: transparent;
|
||||
transition: var(--transition-normal);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-muted);
|
||||
}
|
||||
|
||||
.theme-btn.active {
|
||||
color: var(--color-text-inverse);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .theme-btn.active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.theme-btn__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-btn[data-theme-target="industrial"] .theme-btn__dot {
|
||||
background: #F5A623;
|
||||
}
|
||||
|
||||
.theme-btn[data-theme-target="industrial"].active .theme-btn__dot {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.theme-btn[data-theme-target="modern"] .theme-btn__dot {
|
||||
background: #FF6B35;
|
||||
}
|
||||
|
||||
.theme-btn[data-theme-target="modern"].active .theme-btn__dot {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
LAYOUT — centered login screen
|
||||
===================================================================== */
|
||||
|
||||
.login-screen {
|
||||
min-height: calc(100vh - 49px); /* subtract theme bar height */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-8) var(--space-4);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
LOGIN CARD
|
||||
===================================================================== */
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-xl);
|
||||
overflow: hidden;
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out),
|
||||
box-shadow var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
/* Industrial theme: angular clip-path on the card */
|
||||
[data-theme="industrial"] .login-card {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
||||
}
|
||||
|
||||
/* Modern theme: smooth rounded corners */
|
||||
[data-theme="modern"] .login-card {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
CARD HEADER — brand / logo
|
||||
===================================================================== */
|
||||
|
||||
.card-header {
|
||||
padding: var(--space-8) var(--space-8) var(--space-6);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Industrial: amber accent bar at top of header */
|
||||
[data-theme="industrial"] .card-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
|
||||
}
|
||||
|
||||
/* Modern: subtle gradient wash */
|
||||
[data-theme="modern"] .card-header {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 107, 53, 0.04) 0%,
|
||||
rgba(255, 107, 53, 0.01) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: var(--color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.75rem;
|
||||
font-weight: var(--heading-weight-primary);
|
||||
color: var(--color-text-inverse);
|
||||
flex-shrink: 0;
|
||||
transition: background var(--duration-normal) var(--ease-in-out);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .brand-logo {
|
||||
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="modern"] .brand-logo {
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .brand-logo {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h4);
|
||||
font-weight: var(--heading-weight-primary);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: var(--heading-tracking-h4);
|
||||
line-height: var(--leading-h4);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .brand-name {
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-accent);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
text-transform: uppercase;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
CARD BODY
|
||||
===================================================================== */
|
||||
|
||||
.card-body {
|
||||
padding: var(--space-6) var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
SECTION LABEL
|
||||
===================================================================== */
|
||||
|
||||
.section-label {
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: var(--tracking-widest);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
USER SELECTION
|
||||
===================================================================== */
|
||||
|
||||
.users-section {}
|
||||
|
||||
.users-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.user-avatar-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
background: var(--color-surface-1);
|
||||
border: 1.5px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .user-avatar-btn {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
|
||||
}
|
||||
|
||||
[data-theme="modern"] .user-avatar-btn {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.user-avatar-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-muted);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.user-avatar-btn.selected {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-muted);
|
||||
box-shadow: var(--shadow-accent);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .user-avatar-btn.selected {
|
||||
background: rgba(245, 166, 35, 0.10);
|
||||
}
|
||||
|
||||
.user-avatar-btn.selected .user-initials {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .user-avatar-btn.selected .user-initials {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Selected check indicator */
|
||||
.user-avatar-btn.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.user-initials {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--color-surface-2);
|
||||
border: 1.5px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.9rem;
|
||||
font-weight: var(--heading-weight-primary);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
transition: var(--transition-normal);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .user-initials {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
|
||||
}
|
||||
|
||||
[data-theme="modern"] .user-initials {
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
transition: color var(--duration-normal);
|
||||
}
|
||||
|
||||
.user-avatar-btn.selected .user-name {
|
||||
color: var(--color-text-accent);
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 10px;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
PIN DISPLAY (dots)
|
||||
===================================================================== */
|
||||
|
||||
.pin-section {}
|
||||
|
||||
.pin-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4) var(--space-6);
|
||||
background: var(--color-surface-2);
|
||||
border: 1.5px solid var(--color-border);
|
||||
margin-bottom: var(--space-4);
|
||||
transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .pin-display {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-theme="modern"] .pin-display {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.pin-display.has-digits {
|
||||
border-color: var(--color-border-accent);
|
||||
}
|
||||
|
||||
.pin-display.error {
|
||||
border-color: var(--color-error);
|
||||
animation: pin-shake 0.4s var(--ease-in-out);
|
||||
}
|
||||
|
||||
@keyframes pin-shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
20% { transform: translateX(-8px); }
|
||||
40% { transform: translateX(8px); }
|
||||
60% { transform: translateX(-5px); }
|
||||
80% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
.pin-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-border-strong);
|
||||
background: transparent;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pin-dot.filled {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 8px var(--color-primary);
|
||||
}
|
||||
|
||||
/* PIN placeholder text when no user selected */
|
||||
.pin-placeholder {
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
PIN PAD
|
||||
===================================================================== */
|
||||
|
||||
.pin-pad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.pin-key {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 64px;
|
||||
background: var(--color-surface-2);
|
||||
border: 1.5px solid var(--color-border);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--heading-weight-primary);
|
||||
color: var(--color-text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .pin-key {
|
||||
border-radius: 0;
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
|
||||
[data-theme="modern"] .pin-key {
|
||||
border-radius: var(--radius-md);
|
||||
letter-spacing: var(--tracking-snug);
|
||||
}
|
||||
|
||||
.pin-key:hover {
|
||||
background: var(--color-surface-3);
|
||||
border-color: var(--color-border-strong);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.pin-key:active {
|
||||
transform: translateY(1px) scale(0.97);
|
||||
box-shadow: none;
|
||||
background: var(--color-primary-muted);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Ripple effect */
|
||||
.pin-key::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
opacity: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0);
|
||||
transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.pin-key.ripple::after {
|
||||
transform: scale(2.5);
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
/* Backspace key */
|
||||
.pin-key--backspace {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.pin-key--backspace:hover {
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-error);
|
||||
background: rgba(239, 68, 68, 0.06);
|
||||
}
|
||||
|
||||
.pin-key--backspace:active {
|
||||
border-color: var(--color-error);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
/* Enter key */
|
||||
.pin-key--enter {
|
||||
background: var(--color-primary-muted);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
.pin-key--enter:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .pin-key--enter:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pin-key--enter:active {
|
||||
background: var(--color-primary-active, var(--color-primary));
|
||||
color: var(--color-text-inverse);
|
||||
transform: translateY(1px) scale(0.97);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
SUBMIT BUTTON
|
||||
===================================================================== */
|
||||
|
||||
.btn-login {
|
||||
width: 100%;
|
||||
padding: var(--space-4) var(--space-6);
|
||||
background: var(--btn-primary-bg);
|
||||
color: var(--btn-primary-text);
|
||||
border: 1.5px solid var(--btn-primary-border, transparent);
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h5);
|
||||
font-weight: var(--heading-weight-primary);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-normal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .btn-login {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
|
||||
}
|
||||
|
||||
[data-theme="modern"] .btn-login {
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-login:hover:not(:disabled) {
|
||||
background: var(--btn-primary-bg-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-login:active:not(:disabled) {
|
||||
background: var(--btn-primary-bg-active);
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-login:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-login__icon {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
CARD FOOTER
|
||||
===================================================================== */
|
||||
|
||||
.card-footer {
|
||||
padding: var(--space-4) var(--space-8);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
background: var(--color-surface-1);
|
||||
transition: background-color var(--duration-slow) var(--ease-in-out),
|
||||
border-color var(--duration-slow) var(--ease-in-out);
|
||||
}
|
||||
|
||||
.footer-version {
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.footer-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-success);
|
||||
animation: status-pulse 2.5s infinite ease-in-out;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes status-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
INDUSTRIAL THEME EXTRAS — accent border line on card
|
||||
===================================================================== */
|
||||
|
||||
[data-theme="industrial"] .login-card {
|
||||
border-color: #2a2a2a;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .login-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
/* Simulated angular highlight on top-left edge */
|
||||
border-top: 1px solid rgba(245, 166, 35, 0.15);
|
||||
border-left: 1px solid rgba(245, 166, 35, 0.08);
|
||||
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
NOTIFICATION / TOAST for error feedback
|
||||
===================================================================== */
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: var(--space-8);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(120%);
|
||||
background: var(--color-error);
|
||||
color: #fff;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-toast);
|
||||
transition: transform 0.3s var(--ease-out);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
RESPONSIVE
|
||||
===================================================================== */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.theme-bar {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
}
|
||||
|
||||
.theme-bar__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-screen {
|
||||
padding: var(--space-4) var(--space-3);
|
||||
align-items: flex-start;
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--space-5) var(--space-5);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: var(--space-6) var(--space-5) var(--space-5);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.users-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.pin-key {
|
||||
height: 56px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.pin-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.users-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.user-initials {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.pin-key {
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
ACCESSIBILITY
|
||||
===================================================================== */
|
||||
|
||||
.pin-key:focus-visible,
|
||||
.user-avatar-btn:focus-visible,
|
||||
.theme-btn:focus-visible,
|
||||
.btn-login:focus-visible {
|
||||
outline: 2px solid var(--color-border-focus);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1298
pos/static/css/pos-design.css
Normal file
1298
pos/static/css/pos-design.css
Normal file
File diff suppressed because it is too large
Load Diff
564
pos/static/css/tokens.css
Normal file
564
pos/static/css/tokens.css
Normal file
@@ -0,0 +1,564 @@
|
||||
/* ==========================================================================
|
||||
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
|
||||
========================================================================== */
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user