/* ============================================================================ DealerMine design tokens ---------------------------------------------------------------------------- PHASE 2 of the CSS tokenisation project (Docs/ai-projects/ bootstrap3-to-bootstrap5-migration/06-stylesheet-consolidation.md). TAXONOMY IS MATERIAL 3. VALUES ARE CURRENT. Every token name below mirrors Material Design 3's token structure (ref.palette.* / sys.color.* / sys.shape.* / sys.elevation.*), but every VALUE is the colour the application already uses today, extracted by frequency analysis of style.css + style-workplan.css + inline styles. That split is deliberate. Adopting the naming now costs nothing and makes a future Material restyle a pure value substitution in this one file. Adopting the VALUES now would change how the app looks, which would destroy the "pixel-identical" acceptance criterion that Phases 3-4 depend on. >>> DO NOT change a value in this file during Phases 1-4. <<< Phases 1-4 must be visually a no-op. Restyling is a separate, final step. Palette derivation: 320 distinct colours across the app collapse to the set below. 13 colours account for 50% of all colour declarations; 64% of every colour declaration in the app is greyscale, which is why the neutral ramp carries most of the weight here. ============================================================================ */ :root { /* ========================================================================== 1. REFERENCE PALETTE (md.ref.palette.*) Raw values. Nothing outside this file should reference a literal colour; nothing in the app should reference these directly either — use the system roles in section 2. ========================================================================== */ /* --- Neutral ramp ------------------------------------------------------- Ordered by relative luminance. This is the single highest-value token group: it replaces 110 distinct greys covering ~64% of all colour use. The app had already built this ramp by hand, one shade at a time. */ --dm-ref-neutral-100: #ffffff; /* L 1.00 */ --dm-ref-neutral-99: #f9f9f9; /* L 0.98 */ --dm-ref-neutral-98: #f5f5f5; /* L 0.96 */ --dm-ref-neutral-95: #f0f0f0; /* L 0.94 */ --dm-ref-neutral-94: #eeeeee; /* L 0.93 */ --dm-ref-neutral-92: #e8e8e8; /* L 0.91 */ --dm-ref-neutral-90: #e0e0e0; /* L 0.88 */ --dm-ref-neutral-87: #dddddd; /* L 0.87 */ --dm-ref-neutral-80: #cccccc; /* L 0.80 */ --dm-ref-neutral-75: #bbbbbb; /* L 0.73 */ --dm-ref-neutral-70: #aaaaaa; /* L 0.67 */ --dm-ref-neutral-60: #999999; /* L 0.60 */ --dm-ref-neutral-55: #888888; /* L 0.53 */ --dm-ref-neutral-50: #777777; /* L 0.47 */ --dm-ref-neutral-40: #666666; /* L 0.40 */ --dm-ref-neutral-35: #555555; /* L 0.33 */ --dm-ref-neutral-30: #4c4e50; /* L 0.30 — slightly cool, used for chrome */ --dm-ref-neutral-20: #333333; /* L 0.20 */ --dm-ref-neutral-10: #181a18; /* L 0.10 — tooltips, inverse surfaces */ --dm-ref-neutral-0: #000000; /* L 0.00 */ /* --- Brand / primary ---------------------------------------------------- #0054a6 is the DealerMine blue: 107 uses, the most-used chromatic colour in the app. Appears on active buttons, headers, and accents. */ --dm-ref-primary-40: #0054a6; /* brand blue — primary */ --dm-ref-primary-50: #0072ab; /* hover / links — dark enough to */ /* carry white text, and to BE */ /* read as a link on white */ --dm-ref-primary-60: #4b8df7; /* focus-ring blue */ --dm-ref-primary-80: #8db6cd; /* muted blue — subdued accents */ /* --- Semantic status ----------------------------------------------------- */ --dm-ref-error-50: #bf3333; /* the app's red — dark enough to */ /* carry white text AND be read as */ /* text on every light surface */ --dm-ref-success-40: #1f9645; /* progress bars, positive state */ --dm-ref-success-70: #8ea68c; /* muted green */ /* Warning ramp, derived from the app's OWN amber rather than imported. --dm-sys-color-wp-amber (#d97706, 26 uses) was already the de-facto warning colour; these are the same hue (32deg) and saturation at four lightnesses, so the new roles sit on a colour the app already uses instead of adding a rival. */ --dm-ref-warning-30: #864904; /* text on a warning surface */ --dm-ref-warning-50: #d97706; /* the amber itself — == wp-amber */ --dm-ref-warning-90: #fddbb5; /* warning border */ --dm-ref-warning-95: #feecd7; /* warning surface */ /* --- Bootstrap-inherited ------------------------------------------------ #6c757d is BS5's own $secondary, already present in the app. Kept as a distinct reference value so the eventual BS5 bridge (section 5) is exact. */ --dm-ref-bs-secondary: #6c757d; /* ========================================================================== 2. SYSTEM COLOUR ROLES (md.sys.color.*) This is the layer application CSS should reference. Material 3 role semantics: a "container" is a filled surface, "on-X" is content that sits on X. Swapping to Material later means repointing these at Material's tonal palette — this section is the switch. ========================================================================== */ /* Primary */ --dm-sys-color-primary: var(--dm-ref-primary-40); --dm-sys-color-on-primary: var(--dm-ref-neutral-100); --dm-sys-color-primary-container: var(--dm-ref-primary-80); --dm-sys-color-on-primary-container: var(--dm-ref-neutral-0); --dm-sys-color-primary-hover: var(--dm-ref-primary-50); /* Secondary */ --dm-sys-color-secondary: var(--dm-ref-bs-secondary); --dm-sys-color-on-secondary: var(--dm-ref-neutral-100); /* Error */ --dm-sys-color-error: var(--dm-ref-error-50); --dm-sys-color-on-error: var(--dm-ref-neutral-100); /* Success — not a Material 3 core role, but a CRM needs one. Declared as an M3 "extended colour", which is the sanctioned pattern. */ --dm-sys-color-success: var(--dm-ref-success-40); --dm-sys-color-on-success: var(--dm-ref-neutral-100); --dm-sys-color-success-muted: var(--dm-ref-success-70); /* The greens above are FILLS. #00ab6f as text measured 2.27:1 on a grey panel; no existing green cleared 4.5:1 there (wp-green, the closest, reached 3.91). This one does on every light surface the app uses: 4.77:1 on #e0e1e1, 5.73:1 on #f5f5f5, 6.25:1 on white. */ --dm-ref-success-30: #296e2c; --dm-sys-color-success-text: var(--dm-ref-success-30); /* Warning — the third extended colour, alongside success. NOTE THE ASYMMETRY: on-error and on-success are neutral-100 (white), and on-warning is NOT. White on #d97706 measures 3.19:1, which fails WCAG 1.4.3 for text; black measures 6.59:1 and passes. Amber simply cannot carry white text at a legible contrast, so the pattern is broken here on purpose. Copying the white from the two rows above would have produced an unreadable badge that looked consistent in the token file. */ --dm-sys-color-warning: var(--dm-ref-warning-50); --dm-sys-color-on-warning: var(--dm-ref-neutral-0); --dm-sys-color-warning-surface: var(--dm-ref-warning-95); --dm-sys-color-on-warning-surface: var(--dm-ref-warning-30); --dm-sys-color-warning-border: var(--dm-ref-warning-90); /* Surfaces — the container hierarchy. Material 3 replaced BS's flat "background vs card" model with five graded surface containers. */ --dm-sys-color-background: var(--dm-ref-neutral-100); --dm-sys-color-on-background: var(--dm-ref-neutral-20); --dm-sys-color-surface: var(--dm-ref-neutral-100); --dm-sys-color-on-surface: var(--dm-ref-neutral-20); --dm-sys-color-surface-variant: var(--dm-ref-neutral-94); --dm-sys-color-on-surface-variant: var(--dm-ref-neutral-35); --dm-sys-color-surface-container-lowest:var(--dm-ref-neutral-100); --dm-sys-color-surface-container-low: var(--dm-ref-neutral-99); --dm-sys-color-surface-container: var(--dm-ref-neutral-98); --dm-sys-color-surface-container-high: var(--dm-ref-neutral-95); --dm-sys-color-surface-container-highest: var(--dm-ref-neutral-92); --dm-sys-color-surface-disabled: var(--dm-ref-neutral-90); /* Outlines — borders and dividers. outline is for interactive borders, outline-variant for dividers. */ --dm-sys-color-outline: var(--dm-ref-neutral-80); --dm-sys-color-outline-variant: var(--dm-ref-neutral-87); --dm-sys-color-outline-strong: var(--dm-ref-neutral-70); /* Text — Material expresses these via on-* roles; these aliases exist because the app's CSS talks about text directly and the mapping is clearer for the Phase 3 substitution pass. */ --dm-sys-color-text-primary: var(--dm-ref-neutral-20); --dm-sys-color-text-secondary: var(--dm-ref-neutral-35); --dm-sys-color-text-tertiary: var(--dm-ref-neutral-50); --dm-sys-color-text-disabled: var(--dm-ref-neutral-55); --dm-sys-color-text-placeholder: var(--dm-ref-neutral-60); /* DM-8366: text of a plain with no class or colour of its own (style.css `a {}`). Black on purpose so the light themes keep today's exact link colour; dark.css overrides it, since Bootstrap's dark link colour never wins over style.css. */ --dm-sys-color-link-plain: var(--dm-ref-neutral-0); /* DM-8366: label of a .nav-tabs-simple tab (Traffic Log Desk Log / Pending Guests…). Same #606060 the rule always had; dark.css lifts it off the dark tab surface. */ --dm-sys-color-tab-text: #606060; /* DM-8366: jQuery UI date picker day numbers and their hover. #454545 is what the days render today (jquery-ui.css .ui-widget-content .ui-state-default wins), and #6F6F6F is style.css's hover; both kept so light themes do not change. */ --dm-sys-color-datepicker-day: #454545; --dm-sys-color-datepicker-day-hover: #6F6F6F; /* Work Plan group-bar status tints. These three are a SET -- the class names make the semantics unambiguous, and they are the clearest example in the file of colour carrying meaning rather than decoration. Not collapsed to neutrals for exactly that reason. */ --dm-sys-color-status-positive-surface: #f2f9f2; /* 3x .wp-grp-completed / -on-track / -positive */ --dm-sys-color-status-upcoming-surface: #fffbf0; /* 3x .wp-grp-beback / -coming-up / -due-today */ --dm-sys-color-status-overdue-surface: #fff4f4; /* 3x .wp-grp-expiring / -negative / -past-due */ --dm-sys-color-status-done-surface: #e8f5e9; /* 4x .wp-pill-green, .tl-dp-step-chip.done */ /* Telephony queue status set, completing the .vectro-* trio alongside --dm-sys-color-vectro-green. */ --dm-sys-color-vectro-blue: #3f59f4; /* 4x .vectro-blue, .vectro-body */ --dm-sys-color-vectro-red: #f10c20; /* 3x .vectro-red */ /* Appointment scheduler time slots — two shades distinguishing slot states. */ --dm-sys-color-appt-slot: #7ab1f0; /* 7x */ --dm-sys-color-appt-slot-alt: #659eed; /* 6x */ /* Range-slider handle. The two are the ends of one gradient, not alternatives. */ --dm-sys-color-slider-handle: #149bdf; /* 5x */ --dm-sys-color-slider-handle-end: #0480be; /* 5x */ /* Validation, and utilities that are named for their own colour. A semantic name for .yellowBorder would be a lie about what the class means. */ --dm-sys-color-error-border: var(--dm-ref-error-50); /* 7x .errorBorder, input placeholders */ --dm-sys-color-border-yellow: #ffff4d; /* 9x .yellowBorder / -Begin / -End */ /* Turn-off state, and the data-card surfaces. */ --dm-sys-color-turnoff: #ffa500; /* 4x .turnoffColor */ --dm-sys-color-turnoff-alt: #ffd700; /* 4x .turnoffColor */ --dm-sys-color-datacard-text: #080808; /* 4x .dataCard* */ --dm-sys-color-datacard-blue: #01264a; /* 4x .dataCard_blue */ --dm-sys-color-pdf-item: #262626; /* 4x .PDFItem */ --dm-sys-color-tab-inverted: #006699; /* 3x .schedInvertedTab */ /* Greens, named from what they actually do. The app carried ten distinct greens across three eras -- DealerMine's own, Bootstrap 3's .label-success, and Bootstrap 4's -- with nothing to say which was which. They are NOT collapsed onto one another: several are 20-40 RGB units apart and are genuinely different colours doing different jobs. Naming them is the fix; deciding whether the app needs three success greens is a design question. */ --dm-sys-color-success-light: #2bad54; /* 10x light end of the .progress-POGA gradient that starts at success */ --dm-sys-color-be-back: #5cb252; /* 9x traffic log: customer returning. A domain state, not a success */ --dm-sys-color-vectro-green: #6bff2b; /* 3x Telephony queue status set (.vectro-blue/green/red) */ --dm-sys-color-complete: #28a745; /* the green that actually RENDERS on #progressButton.complete. That rule is declared TWICE with different greens -- #009a5c first, #28a745 second -- and the second wins, so #009a5c was dead. Both now point here; nothing renders differently and one dead colour is gone. */ --dm-sys-color-success-surface: #c8e6c9; /* 1x pale tint behind a parent-row note*/ --dm-sys-color-on-success-surface: #1b5e20; /* text on the surface above */ /* Bootstrap 3's .label-success and its hover. Kept distinct and labelled legacy because they belong to the polyfill layer and should die with it, not be quietly promoted into the design system. */ --dm-sys-color-legacy-label-success: #5cb85c; /* 1x */ --dm-sys-color-legacy-label-success-hover: #449d44; /* 1x */ /* Work Plan palette. Promoted from style.css, where they lived as a parallel --wp-* token set: 184 uses behind a second, competing set of names, two of which (--wp-blue, --wp-red) were exact duplicates of tokens that already existed here. A brand change had to be made in two places and nothing said so. These four have no equivalent in the ramp above, so they are promoted rather than collapsed — forcing --wp-green (#2e7d32) onto --dm-sys-color-success (#1f9645) would be a visual change disguised as a cleanup. */ --dm-sys-color-wp-green: #2e7d32; /* 33 uses */ --dm-sys-color-wp-amber: var(--dm-ref-warning-50); /* 26 uses — same amber as --dm-sys-color-warning */ --dm-sys-color-wp-blue-light: #e8f1fb; /* 5 uses */ --dm-sys-color-wp-purple: #7b2d8b; /* 2 uses */ /* Inverse — tooltips and dark-on-light overlays */ --dm-sys-color-inverse-surface: var(--dm-ref-neutral-10); --dm-sys-color-inverse-on-surface: var(--dm-ref-neutral-100); /* Utility */ --dm-sys-color-shadow: var(--dm-ref-neutral-0); --dm-sys-color-scrim: var(--dm-ref-neutral-0); --dm-sys-color-focus-ring: var(--dm-ref-primary-60); /* .flexLoader overlay + its spinner arc. Kept as raw rgba (not a solid ref/sys token) because the overlay must stay translucent over whatever content is loading beneath it. */ --dm-sys-color-loader-overlay: rgba(229, 241, 255, 0.6); --dm-sys-color-loader-arc: var(--dm-sys-color-surface); /* ========================================================================== 3. SHAPE (md.sys.shape.*) 35 distinct border-radius values in the stylesheets collapse to this ramp. Material's own scale is 0/4/8/12/16/28/full — the values below are the app's current ones slotted into that structure. ========================================================================== */ /* Restructured 2026-08-24 when the Bootstrap radius was bridged. The ramp was 0/3/4/5/6/8 — five steps derived from what the stylesheets happened to contain. Two of them were the same intent: 4px (39 rules) and 5px (22 rules) sat either side of Bootstrap's own 0.375rem, which is 5.25px at this app's 87.5% root. Those three collapse to one step. Safe to restructure now because nothing referenced these tokens yet — Phase 3 substituted colours only. */ --dm-sys-shape-none: 0; --dm-sys-shape-xs: 3px; /* 18 rules */ --dm-sys-shape-sm: 5.25px; /* absorbs 4px (39) + 5px (22) + Bootstrap */ --dm-sys-shape-md: 6px; /* 26 rules */ --dm-sys-shape-lg: 8px; /* 7 rules */ --dm-sys-shape-full: 50%; /* circular — avatars, badges */ /* ========================================================================== 4. ELEVATION (md.sys.elevation.*) 56 distinct box-shadow values collapse to six levels, matching Material's 0-5 elevation scale. Current values preserved; several are recognisably Bootstrap 3 leftovers and are candidates for retirement in the restyle. ========================================================================== */ --dm-sys-elevation-0: none; --dm-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05); --dm-sys-elevation-2: 0px 2px 6px 0px rgba(24, 26, 24, 0.25); --dm-sys-elevation-3: 0 3px 8px rgba(0, 0, 0, 0.20); --dm-sys-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.175); --dm-sys-elevation-5: 0 12px 24px rgba(0, 0, 0, 0.25); /* Focus ring is an elevation-adjacent token; kept here so focus styling has one definition rather than the eight inset variants currently in use. */ --dm-sys-elevation-focus: inset 0 0 5px 5px var(--dm-sys-color-focus-ring); /* ========================================================================== 5. BOOTSTRAP 5 BRIDGE — COLOUR ENABLED, GEOMETRY NOT -------------------------------------------------------------------------- Pointing BS5's own variables at our tokens is what makes stock Bootstrap components theme at all. Nothing else reaches them: .btn takes its background from var(--bs-btn-bg), which resolves through --bs-primary in bootstrap5/bootstrap.css, and no DealerMine token touches that namespace. Measured on a dark page, this was the single biggest lever available. THE COLOUR BRIDGE IS A BRAND FIX, NOT A RESTYLE. #0d6efd appears 29 times in bootstrap.css, so every stock component currently renders in Bootstrap's default blue rather than DealerMine's #0054a6 — buttons, links, focus rings, form-control focus states. Enabling this makes them match the product. Two of the seven resolve to what BS5 already used, so they cost nothing and are declared for intent: --bs-secondary (#6c757d both) and --bs-body-bg (#fff / #ffffff). The other five change: --bs-primary #0d6efd -> #0054a6 27 direct consumers --bs-danger #dc3545 -> #bf3333 29 --bs-success #198754 -> #1f9645 29 --bs-body-color #212529 -> #333333 26 --bs-border-color #dee2e6 -> #cccccc 32 ========================================================================== */ --bs-primary: var(--dm-sys-color-primary); --bs-secondary: var(--dm-sys-color-secondary); --bs-danger: var(--dm-sys-color-error); /* DM-7719: BS5's utilities (.text-danger, .bg-danger, .text-bg-danger, .border-danger, .link-danger) read the -rgb triplet, not --bs-danger, so without this they stayed #dc3545. A triplet cannot be derived from a hex var() in CSS, so it restates --dm-ref-error-50 (#bf3333). dark.css sets its own to match its --dm-sys-color-error. */ --bs-danger-rgb: 191, 51, 51; --bs-success: var(--dm-sys-color-success); /* DM-7719, same reason: .bg-success and .bg-warning read the triplets, and --bs-warning was not bridged at all (BS5's #ffc107 is not the app's amber). text-warning-emphasis gets the app's readable warning-text colour (7:1 on white; the amber itself is 3.2:1 and fails as text). */ --bs-success-rgb: 31, 150, 69; --bs-warning: var(--dm-sys-color-warning); --bs-warning-rgb: 217, 119, 6; --bs-warning-text-emphasis: var(--dm-ref-warning-30); --bs-body-color: var(--dm-sys-color-text-primary); --bs-body-bg: var(--dm-sys-color-background); --bs-border-color: var(--dm-sys-color-outline); /* ========================================================================== 5b. --bs-border-radius -------------------------------------------------------------------------- Bridged to the shape ramp. This is VISUALLY A NO-OP today: BS5's default is 0.375rem, which at this app's :root font-size: 87.5% resolves to exactly the 5.25px the token now carries. 46 bootstrap.css rules read it; none of them move. It is not pointless, though. It puts Bootstrap's radius under token control, so changing it later is one line here rather than a hunt through 46 rules — and it makes the value explicit rather than an accident of the rem re-base. One real behavioural difference: 0.375rem is relative and 5.25px is absolute. They agree only because of the 87.5% root. Before this bridge, changing that re-base would silently rescale every Bootstrap radius; after it, it will not. That is more predictable, but it IS a change in behaviour, not purely a no-op. ========================================================================== */ --bs-border-radius: var(--dm-sys-shape-sm); /* ========================================================================== 6. DENSITY — DELIBERATE DIVERGENCE FROM MATERIAL -------------------------------------------------------------------------- DealerMine is a high-density data application: 805 tables, 1,112 uses of btn-xs/btn-sm, 434 inline font-sizes at 12px or below, and a deliberate :root font-size: 87.5% in style.css that re-bases 1rem to 14px. Material Design defaults to 16px with generous padding and 48dp touch targets. Adopting that density would fit materially less information per screen in traffic-log grids and worksheets. The recommendation is to take Material's COLOUR, SHAPE and ELEVATION language and explicitly NOT its density. These tokens record the current density so it is expressible and consistent — not so it can be changed. ========================================================================== */ --dm-sys-density-root-scale: 87.5%; /* 1rem = 14px — see style.css :root */ --dm-sys-density-line-height: 1.42857143; }