/* * Colour tokens shared by the admin area and the storefront, for the light and the dark theme. * The theme is chosen by the data-theme attribute on (public/assets/js/theme-init.js sets it before the page paints). * Stylesheets use these variables instead of fixed colours, so a page needs no extra CSS to support dark mode. * * Add class "theme-light" to a sheet of paper (invoice, credit note) that must stay light in the dark theme. * --wh-surface / -2 / -3 card, subtle fill, hover or track fill * --wh-line / -strong borders and dividers * --wh-ink / text / muted / faint text from strongest to weakest * --tone-{red|orange|amber|green|cyan|blue|violet}-{soft|bg|line|mid|fg} status colours: tint, badge fill, border, accent text, strong text */ :root, .theme-light { color-scheme: light; --wh-bg: #F1F5F9; --wh-surface: #FFFFFF; --wh-ink: #0F172A; --wh-text: #334155; --wh-muted: #4F5D73; --wh-faint: #5F6E84; --wh-line: #E5E7EB; --wh-line-soft: #F1F5F9; --wh-surface-2: #F9FAFB; --wh-surface-3: #F3F4F6; --wh-line-strong: #D1D5DB; --wh-ghost: #64748B; --role-lift: 35%; --wh-focus: #0F2B4E; --wh-focus-ring: rgba(15, 43, 78, .12); --navy: var(--navy-brand, #0F2B4E); --wh-navy-text: #0F2B4E; --wh-navy-bg: #0F2B4E; --wh-brand-text: var(--navy-brand, #0F2B4E); --wh-scrim: rgba(15, 23, 42, .5); --wh-shadow: rgba(15, 23, 42, .1); /* Brand colour helpers; the storefront replaces them with the owner's colours (layouts/partials/brand-colours.blade.php) */ --orange-text: #D97020; --on-orange: #FFFFFF; --orange-deep: #B45309; --on-navy: #FFFFFF; --tone-red-soft: #FEF2F2; --tone-red-bg: #FEE2E2; --tone-red-line: #FECACA; --tone-red-mid: #DC2626; --tone-red-fg: #991B1B; --tone-orange-soft: #FFF7ED; --tone-orange-bg: #FFEDD5; --tone-orange-line: #FED7AA; --tone-orange-mid: #EA580C; --tone-orange-fg: #9A3412; --tone-amber-soft: #FFFBEB; --tone-amber-bg: #FEF3C7; --tone-amber-line: #FDE68A; --tone-amber-mid: #D97706; --tone-amber-fg: #92400E; --tone-green-soft: #F0FDF4; --tone-green-bg: #DCFCE7; --tone-green-line: #BBF7D0; --tone-green-mid: #16A34A; --tone-green-fg: #166534; --tone-cyan-soft: #ECFEFF; --tone-cyan-bg: #CFFAFE; --tone-cyan-line: #A5F3FC; --tone-cyan-mid: #0891B2; --tone-cyan-fg: #155E75; --tone-blue-soft: #EFF6FF; --tone-blue-bg: #DBEAFE; --tone-blue-line: #BFDBFE; --tone-blue-mid: #2563EB; --tone-blue-fg: #1E40AF; --tone-violet-soft: #F5F3FF; --tone-violet-bg: #EDE9FE; --tone-violet-line: #DDD6FE; --tone-violet-mid: #7C3AED; --tone-violet-fg: #5B21B6; } html[data-theme="dark"] { color-scheme: dark; --wh-bg: #16171B; --wh-surface: #202227; --wh-surface-2: #25282E; --wh-surface-3: #2D3037; --wh-line: #33363E; --wh-line-soft: #2A2D34; --wh-line-strong: #454954; --wh-ghost: #8E94A3; --role-lift: 48%; --wh-focus: #8FA0BC; --wh-focus-ring: rgba(143, 160, 188, .28); --wh-ink: #F3F4F6; --wh-text: #D5D8DE; --wh-muted: #A3A8B3; --wh-faint: #959BA9; --wh-navy-text: #B8C4DA; --wh-navy-bg: #3C4A63; --navy: color-mix(in srgb, var(--navy-brand, #0F2B4E) 62%, #7C8496); --wh-brand-text: color-mix(in srgb, var(--navy-brand, #0F2B4E) 12%, #F3F4F6); --wh-side-bg: linear-gradient(180deg, #1D1F24 0%, #181A1E 100%); --wh-side-line: rgba(255, 255, 255, .06); --wh-scrim: rgba(0, 0, 0, .65); --wh-shadow: rgba(0, 0, 0, .5); --orange-text: #F47C1F; --surface: #16171B; --border: #33363E; --tone-red-soft: rgba(239, 68, 68, .08); --tone-red-bg: rgba(239, 68, 68, .16); --tone-red-line: rgba(239, 68, 68, .32); --tone-red-mid: #F87171; --tone-red-fg: #FCA5A5; --tone-orange-soft: rgba(249, 115, 22, .08); --tone-orange-bg: rgba(249, 115, 22, .16); --tone-orange-line: rgba(249, 115, 22, .32); --tone-orange-mid: #FB923C; --tone-orange-fg: #FDBA74; --tone-amber-soft: rgba(245, 158, 11, .08); --tone-amber-bg: rgba(245, 158, 11, .16); --tone-amber-line: rgba(245, 158, 11, .32); --tone-amber-mid: #FBBF24; --tone-amber-fg: #FCD34D; --tone-green-soft: rgba(34, 197, 94, .08); --tone-green-bg: rgba(34, 197, 94, .16); --tone-green-line: rgba(34, 197, 94, .32); --tone-green-mid: #4ADE80; --tone-green-fg: #86EFAC; --tone-cyan-soft: rgba(6, 182, 212, .08); --tone-cyan-bg: rgba(6, 182, 212, .16); --tone-cyan-line: rgba(6, 182, 212, .32); --tone-cyan-mid: #22D3EE; --tone-cyan-fg: #67E8F9; --tone-blue-soft: rgba(59, 130, 246, .08); --tone-blue-bg: rgba(59, 130, 246, .18); --tone-blue-line: rgba(59, 130, 246, .34); --tone-blue-mid: #60A5FA; --tone-blue-fg: #93C5FD; --tone-violet-soft: rgba(139, 92, 246, .08); --tone-violet-bg: rgba(139, 92, 246, .18); --tone-violet-line: rgba(139, 92, 246, .34); --tone-violet-mid: #A78BFA; --tone-violet-fg: #C4B5FD; } /* Theme switch (layouts/partials/theme-switch.blade.php) */ .ts { position: relative; flex: none; } .ts__btn { display: inline-grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; padding: 0; border: 1px solid var(--wh-line); border-radius: 8px; background: var(--wh-surface-2); color: var(--wh-text); font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; } .ts__btn:hover { border-color: var(--wh-line-strong); background: var(--wh-line-soft); } .ts__btn:focus-visible, .ts__item:focus-visible { outline: 2px solid #F47C1F; outline-offset: 1px; } .ts__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 300; min-width: 180px; padding: 6px; border: 1px solid var(--wh-line); border-radius: 12px; background: var(--wh-surface); box-shadow: 0 12px 32px var(--wh-shadow); } .ts__panel[hidden] { display: none; } .ts__item { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--wh-text); font: 500 13px/1.2 inherit; text-align: start; white-space: nowrap; cursor: pointer; } .ts__item:hover { background: var(--wh-surface-2); } .ts__item > i:first-child { width: 16px; color: var(--wh-faint); text-align: center; } .ts__item span { flex: 1; } .ts__check { visibility: hidden; color: #F47C1F; font-size: 11px; } .ts__item[aria-checked="true"] { color: var(--wh-ink); font-weight: 600; } .ts__item[aria-checked="true"] .ts__check { visibility: visible; } /* Optional logo for the dark theme (shown instead of the normal logo when one is uploaded) */ .theme-logo-dark { display: none !important; } html[data-theme="dark"] .theme-logo-dark { display: block !important; } html[data-theme="dark"] .theme-logo-light { display: none !important; } /* A logo with dark lettering would vanish on a dark page: without a dark-theme logo it sits on a light plate */ html[data-theme="dark"] .site-header-logo:not(.theme-logo-light):not(.theme-logo-dark):not(.logo-on-dark), html[data-theme="dark"] .auth-brand img:not(.theme-logo-light):not(.theme-logo-dark) { box-sizing: content-box; padding: 5px 10px; border-radius: 8px; background: #fff; } /* Secondary text stays readable (4.5:1) on the white cards and the light page, in the admin and the storefront. */ html[data-theme-scope="store"][data-theme="dark"] { --wh-faint: #9CA3B0; } html .text-gray-400 { color: var(--wh-faint); } /* Status and utility colours that sit on pale tints or white: the darker step reads at 4.5:1 (admin and storefront). */ :root:not([data-theme="dark"]) { --tone-orange-mid: #C2410C; --tone-red-mid: #B91C1C; --tone-green-mid: #15803D; --tone-blue-mid: #1D4ED8; } :root:not([data-theme="dark"]) .text-green-600 { color: #15803D; } :root:not([data-theme="dark"]) .text-orange { color: #C2410C; } :root:not([data-theme="dark"]) .text-blue-400 { color: #2563EB; } html .text-gray-300 { color: var(--wh-faint); } html[data-theme-scope="store"] .text-orange-500 { color: var(--orange-text); } html[data-theme-scope="store"] .bg-orange-500 { background: var(--orange-bar); color:var(--on-orange-bar); } /* Utility colours on pale tints, one step darker so they read at 4.5:1 (admin and storefront, light mode) */ html:not([data-theme="dark"]) .text-red-500 { color: #B91C1C; } html:not([data-theme="dark"]) .text-gray-500 { color: var(--wh-muted); } html:not([data-theme="dark"]) .text-blue-500 { color: #1D4ED8; } html:not([data-theme="dark"]) .text-indigo-500 { color: #4338CA; } html:not([data-theme="dark"]) .text-orange-600 { color: #C2410C; } html:not([data-theme="dark"]) .text-amber-600 { color: #B45309; } html:not([data-theme="dark"]) .text-red-600 { color: #B91C1C; } :root:not([data-theme="dark"]) { --tone-cyan-mid: #0E7490; --redactix-text-muted: var(--wh-muted); } /* Announcement bar (storefront-core::announcement): the colour is chosen on Themes > Settings. */ .wh-announce { padding: 8px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: center; } .wh-announce a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .wh-announce--accent { background: var(--orange-bar); color: var(--on-orange-bar); } .wh-announce--primary { background: var(--navy); color: var(--on-navy); } .wh-announce--dark { background: #111827; color: #fff; } /* Links and emphasis inside translated sentences (App\Support\Html::tag): classes, never inline style. */ html[data-theme-scope="store"] .inl-accent { color: var(--orange-text); } html[data-theme-scope="store"] .inl-brand { color: var(--wh-brand-text); } html[data-theme-scope="store"] .inl-text { color: var(--wh-text); } html[data-theme-scope="store"] .inl-ink { color: var(--wh-ink); } html[data-theme-scope="store"] .inl-red { color: var(--tone-red-mid); } html[data-theme-scope="store"] .inl-grey { color: var(--wh-muted); } html[data-theme-scope="store"] .inl-green { color: var(--tone-green-fg); } html[data-theme-scope="store"] .inl-strong { font-weight: 600; } html[data-theme-scope="store"] .inl-bold { font-weight: 700; }