/* * tokens.css — design tokens for BaseSource.WebAppBill. * Two themes on the element via data-theme: "navy" (default) and "sheet". * app.css consumes ONLY these variables — never hardcodes a colour. * * The 8 badge-* classes + matching text-* utilities are REQUIRED: the server emits colorClass * as one of badge-{warning,info,primary,success,danger,secondary,dark,light} (BmInvoiceStatusMeta, * fallback badge-light) and the client derives the dot colour via replace('badge-','text-'). * Every pill keeps text/background contrast >= 4.5:1. */ :root, :root[data-theme="navy"] { /* Brand + accents */ --primary: #2563EB; --primary-hover: #1D4ED8; --primary-contrast: #FFFFFF; /* Sidebar (navy) */ --sidebar-bg: #0F172A; --sidebar-active: #1E293B; --sidebar-icon: #60A5FA; --sidebar-text: #E2E8F0; --sidebar-text-muted: #94A3B8; --sidebar-border: #1E293B; /* Surfaces */ --page-bg: #F8FAFC; --card-bg: #FFFFFF; --topbar-bg: #FFFFFF; --overlay: rgba(15, 23, 42, 0.45); /* Lines */ --grid-line: #E2E8F0; --grid-line-soft: #EEF2F7; --border: #E2E8F0; /* Text */ --text: #1E293B; --text-muted: #64748B; --text-inverse: #F8FAFC; /* Semantic */ --money-pos: #16A34A; --money-neg: #DC2626; --warn: #D97706; --danger: #DC2626; --success: #16A34A; --info: #2563EB; /* Table states */ --row-hover: #F6F9FF; --row-selected: #EFF6FF; /* Radius + shadow */ --radius-sm: 8px; --radius: 10px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 16px rgba(15, 23, 42, 0.10); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18); /* Layout metrics */ --sidebar-width: 248px; --topbar-height: 60px; --touch: 44px; } /* Sheet Light: only the sidebar cluster flips to a bright surface; content stays as-is. */ :root[data-theme="sheet"] { --sidebar-bg: #FFFFFF; --sidebar-active: #EFF6FF; --sidebar-icon: #2563EB; --sidebar-text: #1E293B; --sidebar-text-muted: #64748B; --sidebar-border: #E2E8F0; } /* ===================== Badges (8 server-emitted variants) ===================== */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.5; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .badge-warning { background: #FEF3C7; color: #92400E; border-color: #FDE68A; } .badge-info { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; } .badge-primary { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; } .badge-success { background: #DCFCE7; color: #166534; border-color: #BBF7D0; } .badge-danger { background: #FEE2E2; color: #991B1B; border-color: #FECACA; } .badge-secondary { background: #E2E8F0; color: #334155; border-color: #CBD5E1; } .badge-dark { background: #334155; color: #F8FAFC; border-color: #334155; } .badge-light { background: #F1F5F9; color: #475569; border-color: #E2E8F0; } /* text-* utilities (coloured filter dots — client derives from badge class). */ .text-warning { color: #B45309; } .text-info { color: #1E40AF; } .text-primary { color: #3730A3; } .text-success { color: #15803D; } .text-danger { color: #B91C1C; } .text-secondary { color: #475569; } .text-dark { color: #1E293B; } .text-light { color: #94A3B8; } .text-muted { color: var(--text-muted); }