/** * ============================================ * POS Design System - Light Theme * ============================================ * * Clean, professional light theme with excellent readability. * Designed for bright environments and accessibility. * * Apply via: * * @version 1.0.0 */ [data-theme="light"] { /* ============================================ * BACKGROUND COLORS * ============================================ */ --color-bg: var(--palette-slate-100); --color-bg-secondary: var(--palette-slate-50); --color-bg-tertiary: #ffffff; --color-surface: #ffffff; --color-surface-hover: var(--palette-slate-50); --color-surface-active: var(--palette-slate-100); --color-elevated: #ffffff; --color-elevated-hover: var(--palette-slate-50); --color-surface-dark: var(--palette-slate-700); --color-overlay: rgba(0, 0, 0, 0.4); --color-backdrop: rgba(241, 245, 249, 0.9); /* ============================================ * TEXT COLORS * ============================================ */ --color-text: var(--palette-slate-800); --color-text-secondary: var(--palette-slate-600); --color-text-muted: var(--palette-slate-500); --color-text-disabled: var(--palette-slate-400); --color-text-inverse: var(--palette-slate-50); --color-text-on-primary: #ffffff; --color-text-on-success: #ffffff; --color-text-on-warning: var(--palette-slate-900); --color-text-on-danger: #ffffff; --color-text-on-info: #ffffff; /* Heading colors */ --color-heading: var(--palette-slate-900); --color-heading-secondary: var(--palette-slate-700); /* ============================================ * BORDER COLORS * ============================================ */ --color-border: var(--palette-slate-200); --color-border-light: var(--palette-slate-100); --color-border-strong: var(--palette-slate-300); --color-border-focus: var(--palette-primary-500); --color-border-error: var(--palette-danger-500); --color-border-success: var(--palette-success-500); /* ============================================ * PRIMARY COLORS * ============================================ */ --color-primary: var(--palette-primary-600); --color-primary-hover: var(--palette-primary-700); --color-primary-active: var(--palette-primary-800); --color-primary-subtle: rgba(79, 70, 229, 0.1); --color-primary-muted: var(--palette-primary-500); /* ============================================ * SEMANTIC COLORS * ============================================ */ /* Success */ --color-success: var(--palette-success-600); --color-success-hover: var(--palette-success-700); --color-success-active: var(--palette-success-800); --color-success-subtle: rgba(5, 150, 105, 0.1); --color-success-muted: var(--palette-success-500); /* Warning */ --color-warning: var(--palette-warning-600); --color-warning-hover: var(--palette-warning-700); --color-warning-active: var(--palette-warning-800); --color-warning-subtle: rgba(217, 119, 6, 0.1); --color-warning-muted: var(--palette-warning-500); /* Danger */ --color-danger: var(--palette-danger-600); --color-danger-hover: var(--palette-danger-700); --color-danger-active: var(--palette-danger-800); --color-danger-subtle: rgba(220, 38, 38, 0.1); --color-danger-muted: var(--palette-danger-500); /* Info */ --color-info: var(--palette-info-600); --color-info-hover: var(--palette-info-700); --color-info-active: var(--palette-info-800); --color-info-subtle: rgba(8, 145, 178, 0.1); --color-info-muted: var(--palette-info-500); /* Subtle hover states */ --color-primary-subtle-hover: rgba(79, 70, 229, 0.2); --color-success-subtle-hover: rgba(5, 150, 105, 0.2); --color-warning-subtle-hover: rgba(217, 119, 6, 0.2); --color-danger-subtle-hover: rgba(220, 38, 38, 0.2); --color-info-subtle-hover: rgba(8, 145, 178, 0.2); /* Secondary colors */ --color-secondary: var(--palette-slate-400); --color-secondary-light: var(--palette-slate-300); --color-secondary-dark: var(--palette-slate-500); /* ============================================ * LINK COLORS * ============================================ */ --color-link: var(--palette-primary-600); --color-link-hover: var(--palette-primary-700); --color-link-visited: var(--palette-primary-800); /* ============================================ * FORM COLORS * ============================================ */ --color-input-bg: #ffffff; --color-input-bg-disabled: var(--palette-slate-100); --color-input-border: var(--palette-slate-300); --color-input-border-hover: var(--palette-slate-400); --color-input-border-focus: var(--palette-primary-500); --color-input-text: var(--palette-slate-800); --color-input-placeholder: var(--palette-slate-400); --color-input-error-bg: rgba(239, 68, 68, 0.05); --color-input-success-bg: rgba(16, 185, 129, 0.05); /* ============================================ * COMPONENT SPECIFIC * ============================================ */ /* Navbar */ --color-navbar-bg: #ffffff; --color-navbar-text: var(--palette-slate-800); --color-navbar-text-muted: var(--palette-slate-500); --color-navbar-border: var(--palette-slate-200); /* Sidebar */ --color-sidebar-bg: var(--palette-slate-50); --color-sidebar-text: var(--palette-slate-700); --color-sidebar-text-muted: var(--palette-slate-500); --color-sidebar-icon: var(--palette-primary-600); --color-sidebar-hover: var(--palette-slate-100); --color-sidebar-active: var(--palette-primary-50); --color-sidebar-border: var(--palette-slate-200); /* Cards */ --color-card-bg: #ffffff; --color-card-bg-hover: var(--palette-slate-50); --color-card-header: var(--palette-slate-50); --color-card-border: var(--palette-slate-200); --color-card-title: var(--palette-slate-800); /* Tables */ --color-table-header-bg: var(--palette-slate-100); --color-table-header-text: var(--palette-slate-800); --color-table-body-bg: #ffffff; --color-table-body-text: var(--palette-slate-700); --color-table-row-hover: var(--palette-slate-50); --color-table-row-stripe: var(--palette-slate-50); --color-table-border: var(--palette-slate-200); /* Modals */ --color-modal-bg: #ffffff; --color-modal-header-bg: var(--palette-slate-50); --color-modal-header-text: var(--palette-slate-900); --color-modal-body-bg: #ffffff; --color-modal-footer-bg: var(--palette-slate-50); --color-modal-border: var(--palette-slate-200); /* Dropdowns */ --color-dropdown-bg: #ffffff; --color-dropdown-hover: var(--palette-slate-100); --color-dropdown-active: var(--palette-primary-500); --color-dropdown-border: var(--palette-slate-200); --color-dropdown-text: var(--palette-slate-700); /* Badges */ --color-badge-default-bg: var(--palette-slate-200); --color-badge-default-text: var(--palette-slate-700); /* ============================================ * STATUS COLORS (for tables, delivery, kitchen) * ============================================ */ --color-status-available: var(--palette-success-600); --color-status-available-bg: rgba(5, 150, 105, 0.1); --color-status-busy: var(--palette-danger-600); --color-status-busy-bg: rgba(220, 38, 38, 0.1); --color-status-reserved: var(--palette-warning-600); --color-status-reserved-bg: rgba(217, 119, 6, 0.1); --color-status-pending: var(--palette-primary-600); --color-status-pending-bg: rgba(79, 70, 229, 0.1); --color-status-preparing: var(--palette-warning-600); --color-status-preparing-bg: rgba(217, 119, 6, 0.1); --color-status-delivered: var(--palette-success-600); --color-status-delivered-bg: rgba(5, 150, 105, 0.1); --color-status-cancelled: var(--palette-danger-700); --color-status-cancelled-bg: rgba(185, 28, 28, 0.1); /* ============================================ * SHADOWS * ============================================ */ --shadow-color: 220 20% 70%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.15); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.15), 0 1px 2px hsl(var(--shadow-color) / 0.1); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.15), 0 2px 4px -2px hsl(var(--shadow-color) / 0.1); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.15), 0 4px 6px -4px hsl(var(--shadow-color) / 0.1); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.15), 0 8px 10px -6px hsl(var(--shadow-color) / 0.1); --shadow-inner: inset 0 2px 4px hsl(var(--shadow-color) / 0.1); /* Colored shadows for buttons */ --shadow-primary: 0 4px 14px 0 rgba(79, 70, 229, 0.25); --shadow-success: 0 4px 14px 0 rgba(5, 150, 105, 0.25); --shadow-warning: 0 4px 14px 0 rgba(217, 119, 6, 0.25); --shadow-danger: 0 4px 14px 0 rgba(220, 38, 38, 0.25); --shadow-info: 0 4px 14px 0 rgba(8, 145, 178, 0.25); /* Small button shadows */ --shadow-primary-sm: 0 2px 4px rgba(79, 70, 229, 0.2); --shadow-success-sm: 0 2px 4px rgba(5, 150, 105, 0.2); --shadow-warning-sm: 0 2px 4px rgba(217, 119, 6, 0.2); --shadow-danger-sm: 0 2px 4px rgba(220, 38, 38, 0.2); --shadow-info-sm: 0 2px 4px rgba(8, 145, 178, 0.2); /* ============================================ * FOCUS RING * ============================================ */ --focus-ring-color: rgba(79, 70, 229, 0.4); --focus-ring-offset: 2px; --focus-ring-width: 3px; --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color); /* ============================================ * GRADIENTS * ============================================ */ --gradient-primary: linear-gradient(135deg, var(--palette-primary-500), var(--palette-primary-600)); --gradient-success: linear-gradient(135deg, var(--palette-success-500), var(--palette-success-600)); --gradient-warning: linear-gradient(135deg, var(--palette-warning-500), var(--palette-warning-600)); --gradient-danger: linear-gradient(135deg, var(--palette-danger-500), var(--palette-danger-600)); --gradient-info: linear-gradient(135deg, var(--palette-info-500), var(--palette-info-600)); --gradient-dark: linear-gradient(135deg, var(--palette-slate-100), var(--palette-slate-200)); --gradient-card: linear-gradient(180deg, #ffffff, var(--palette-slate-50)); --gradient-secondary: linear-gradient(135deg, var(--palette-slate-400), var(--palette-slate-500)); --gradient-surface: linear-gradient(135deg, var(--palette-slate-50), #ffffff); --gradient-skeleton: linear-gradient(90deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 75%); /* ============================================ * SCROLLBAR (light theme) * ============================================ */ --scrollbar-bg: var(--palette-slate-100); --scrollbar-thumb: var(--palette-slate-300); --scrollbar-thumb-hover: var(--palette-slate-400); --color-scrollbar-track: rgba(0, 0, 0, 0.05); --color-scrollbar-thumb: rgba(0, 0, 0, 0.15); --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25); /* ============================================ * UTILITY TOKENS * ============================================ */ --color-table-stripe: rgba(0, 0, 0, 0.02); --color-input-group-bg: rgba(0, 0, 0, 0.03); --color-icon-bg-on-gradient: rgba(255, 255, 255, 0.25); } /* Custom scrollbar for light theme */ [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--scrollbar-bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }