/** * kb-tokens.css — K-Bid design tokens (single source of truth for theming). * * Light values in :root, dark values under [data-theme="dark"]. * The data-theme attribute on always holds the RESOLVED theme * (light|dark) — 'system' is resolved by the boot script in the layout head * (application/views/scripts/_themeBoot.phtml) before first paint. * * Loaded standalone (no grunt build) by BOTH CSS pipelines: * - responsive-layout.phtml (corePublic bundle pages) * - layout.phtml / cleanlayout.phtml (legacy /styles pages + coreAdmin) * * Rules: * - New components consume var(--kb-*) — never hardcoded hex. * - PHP must emit semantic classes (.auction-status--*, .kb-text-winner…), * never color values. * Full docs: docsPreston/dark-mode.md */ :root { color-scheme: light; /* Surfaces & chrome */ --kb-bg-canvas: #f5f5f5; --kb-surface: #ffffff; --kb-surface-raised: #ffffff; --kb-overlay: #ffffff; --kb-surface-sunken: #f9f9f9; --kb-surface-brand: #f8f8f8; --kb-border: #cecece; --kb-border-muted: #e5e5e5; --kb-border-strong: #adadad; --kb-shadow-overlay: 0 5px 15px rgba(0, 0, 0, .3); --kb-backdrop: rgba(0, 0, 0, .5); /* Text */ --kb-text: #333333; --kb-text-secondary: #777777; --kb-text-disabled: #999999; --kb-text-inverse: #ffffff; /* Brand & accents */ --kb-accent: #02487f; --kb-accent-hover: #023763; --kb-link: #337ab7; --kb-link-hover: #23527c; --kb-brand-red: #9A3324; --kb-legacy-blue: #0673b8; --kb-legacy-blue-deep:#055d94; --kb-legacy-navy: #024880; --kb-focus-ring: rgba(102, 175, 233, .6); --kb-highlight: #ffff99; /* Solid button fills (legacy gradient buttons, flattened) */ --kb-btn-red: #9A3324; --kb-btn-red-hover: #8c1511; --kb-btn-neutral: #b9b8b6; --kb-btn-neutral-hover: #a5a4a2; /* Status triplets (Bootstrap 3 state colors) */ --kb-success-bg: #dff0d8; --kb-success-border: #d6e9c6; --kb-success-text: #3c763d; --kb-info-bg: #d9edf7; --kb-info-border: #bce8f1; --kb-info-text: #31708f; --kb-warning-bg: #fcf8e3; --kb-warning-border: #faebcc; --kb-warning-text: #8a6d3b; --kb-danger-bg: #f2dede; --kb-danger-border: #ebccd1; --kb-danger-text: #a94442; /* Standalone status foregrounds (on canvas/surface) */ --kb-success: #258c11; --kb-warning: #c08b00; --kb-danger: #9A3324; --kb-info: #31708f; /* Domain colors */ --kb-winner: #258c11; --kb-not-winner: #8c1511; --kb-status-draft: #A0A0A0; --kb-status-active: #008000; --kb-status-impending:#daa520; --kb-status-closed: #FF0000; --kb-status-ended: #225167; --kb-notice-bg: #ffcc33; --kb-control-track: #cccccc; /* Charts */ --kb-chart-1: #4285f4; --kb-chart-2: #db4437; --kb-chart-3: #f4b400; --kb-chart-4: #0f9d58; --kb-chart-5: #AB47BC; --kb-chart-6: #00ACC1; --kb-chart-grid: rgba(0, 0, 0, .1); --kb-heatmap-empty: #ededed; --kb-heatmap-min: #40ffd8; --kb-heatmap-max: #f20013; --kb-treemap-1: #8c6bb1; --kb-treemap-2: #9ebcda; --kb-treemap-3: #edf8fb; --kb-treemap-4: #009688; --kb-treemap-5: #f7f7f7; --kb-treemap-6: #ee8100; /* Module accents (datastudio panel headers) */ --kb-panel-accent-green: #c8e6c9; --kb-panel-accent-blue: #bbdefb; } [data-theme="dark"] { color-scheme: dark; /* Surfaces & chrome — blue-tinted slate; elevation = lighter, not shadows */ --kb-bg-canvas: #11161d; --kb-surface: #171e26; --kb-surface-raised: #1e2733; --kb-overlay: #242f3d; --kb-surface-sunken: #131920; --kb-surface-brand: #0d2e4d; --kb-border: #2c3947; --kb-border-muted: #222b36; --kb-border-strong: #3d4c5e; --kb-shadow-overlay: 0 8px 24px rgba(1, 4, 9, .8); --kb-backdrop: rgba(0, 0, 0, .65); /* Text — never pure white */ --kb-text: #e8edf2; --kb-text-secondary: #9aa8b6; --kb-text-disabled: #6b7a89; --kb-text-inverse: #ffffff; /* Brand & accents — lightened/desaturated for dark surfaces */ --kb-accent: #14619f; --kb-accent-hover: #1a73bd; --kb-link: #5da9e8; --kb-link-hover: #82c0f4; --kb-brand-red: #c9705f; --kb-legacy-blue: #14619f; --kb-legacy-blue-deep:#0f4f86; --kb-legacy-navy: #0d2e4d; --kb-focus-ring: rgba(93, 169, 232, .5); --kb-highlight: #4a4520; /* Solid button fills — kept bg-capable in dark (white text ≥ 5:1) */ --kb-btn-red: #a03d2c; --kb-btn-red-hover: #8a2f22; --kb-btn-neutral: #3d4c5e; --kb-btn-neutral-hover: #49596c; /* Status triplets — dark tinted bg + lifted text */ --kb-success-bg: #152a14; --kb-success-border: #2c5527; --kb-success-text: #6fd862; --kb-info-bg: #12243a; --kb-info-border: #234d75; --kb-info-text: #79bdff; --kb-warning-bg: #2b2210; --kb-warning-border: #5a4a1f; --kb-warning-text: #e8bd54; --kb-danger-bg: #2e1715; --kb-danger-border: #5c2b25; --kb-danger-text: #f5917f; --kb-success: #57c84b; --kb-warning: #e3b341; --kb-danger: #f0826f; --kb-info: #6cb6ff; /* Domain colors */ --kb-winner: #57c84b; --kb-not-winner: #f0826f; --kb-status-draft: #9aa4b0; --kb-status-active: #57c84b; --kb-status-impending:#f0c24b; --kb-status-closed: #ff7b6e; --kb-status-ended: #9aa8b6; --kb-notice-bg: #5a4a1f; --kb-control-track: #3d4c5e; /* Charts — lifted luminance for dark surfaces */ --kb-chart-1: #6ea8fe; --kb-chart-2: #ef7564; --kb-chart-3: #ffd24d; --kb-chart-4: #34c38f; --kb-chart-5: #c77ddb; --kb-chart-6: #3dd0e0; --kb-chart-grid: rgba(255, 255, 255, .08); --kb-heatmap-empty: #2a2f36; --kb-heatmap-min: #2fd8b8; --kb-heatmap-max: #ff6b5e; --kb-treemap-1: #9d83c0; --kb-treemap-2: #8aabcf; --kb-treemap-3: #243038; --kb-treemap-4: #26a69a; --kb-treemap-5: #2a3138; --kb-treemap-6: #e8923a; --kb-panel-accent-green: #1e3a24; --kb-panel-accent-blue: #1a2f47; } /* ------------------------------------------------------------------ */ /* Semantic classes — PHP emits these instead of color values */ /* ------------------------------------------------------------------ */ .auction-status--draft { color: var(--kb-status-draft); } .auction-status--pending { color: var(--kb-info); } .auction-status--active { color: var(--kb-status-active); } .auction-status--impending { color: var(--kb-status-impending); } .auction-status--closed { color: var(--kb-status-closed); } .auction-status--ended { color: var(--kb-status-ended); } .kb-text-winner { color: var(--kb-winner); } .kb-text-not-winner { color: var(--kb-not-winner); } .kb-text-success { color: var(--kb-success); } .kb-text-warning { color: var(--kb-warning); } .kb-text-danger { color: var(--kb-danger); } .kb-text-info { color: var(--kb-info); } .kb-text-secondary { color: var(--kb-text-secondary); } /* BidRestrictionRepository flags */ .kb-flag--ok { color: var(--kb-success); } .kb-flag--warn { color: var(--kb-warning); } .kb-flag--danger { color: var(--kb-danger); } .kb-highlight { background-color: var(--kb-highlight); } .kb-row-flag { background-color: var(--kb-warning-bg); } /* Baked-light images (e.g. Square payment logo) sit on a white plate in dark */ [data-theme="dark"] .kb-logo-plate { background: #fff; border-radius: 6px; padding: 8px; display: inline-block; } /* ------------------------------------------------------------------ */ /* Dark mode invite banner (built by theme.js; self-contained styles */ /* so it renders the same on both layout pipelines) */ /* ------------------------------------------------------------------ */ .kb-theme-banner { position: fixed; bottom: 20px; left: 20px; z-index: 1060; max-width: 300px; padding: 14px 36px 14px 16px; background: var(--kb-overlay); color: var(--kb-text); border: 1px solid var(--kb-border); border-radius: 8px; box-shadow: var(--kb-shadow-overlay); font-size: 14px; line-height: 1.4; animation: kb-banner-in .25s ease-out; } @keyframes kb-banner-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .kb-theme-banner p { margin: 4px 0 10px; color: var(--kb-text-secondary); font-size: 13px; } .kb-theme-banner-close { position: absolute; top: 6px; right: 8px; background: none; border: none; padding: 2px 6px; font-size: 18px; line-height: 1; color: var(--kb-text-secondary); cursor: pointer; } .kb-theme-banner-close:hover { color: var(--kb-text); } .kb-theme-banner-btn { background: var(--kb-accent); color: var(--kb-text-inverse); border: none; border-radius: 4px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .kb-theme-banner-btn:hover { background: var(--kb-accent-hover); } .kb-theme-banner-link { background: none; border: none; color: var(--kb-link); padding: 6px 8px; font-size: 13px; cursor: pointer; } .kb-theme-banner-link:hover { color: var(--kb-link-hover); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .kb-theme-banner { animation: none; } } /* ------------------------------------------------------------------ */ /* Theme-switch transition — class is added by theme.js only while */ /* flipping, so nothing transitions at rest or on first paint. */ /* ------------------------------------------------------------------ */ html.kb-theme-transition, html.kb-theme-transition *, html.kb-theme-transition *::before, html.kb-theme-transition *::after { transition: background-color .15s ease, color .15s ease, border-color .15s ease, fill .15s ease, stroke .15s ease !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { html.kb-theme-transition, html.kb-theme-transition * { transition: none !important; } } /* Printing a dark page must still produce light output */ @media print { [data-theme="dark"] { color-scheme: light; --kb-bg-canvas: #fff; --kb-surface: #fff; --kb-surface-raised: #fff; --kb-overlay: #fff; --kb-surface-sunken: #f9f9f9; --kb-border: #cecece; --kb-border-muted: #e5e5e5; --kb-text: #333; --kb-text-secondary: #777; --kb-link: #337ab7; } }