/* ===== SabrePM theme tokens ===== The single design-token vocabulary for the App and Platform web clients (App Theme Manager design note, docs/design-notes/app-theme-manager-design-note.md). Served from the Sabre.Shared.Web RCL as _content/Sabre.Shared.Web/css/theme-tokens.css and linked by every host page BEFORE site.css, so component CSS may reference any token here without a fallback. Rules - Component CSS (.razor.css, SabrePM.styles.css, site.css) references tokens; it does not define colours. A hex literal in component CSS is a defect unless it is one of the listed exceptions at the bottom of this file. ThemeTokenFitnessTests enforces both. - Values here are the defaults SabrePM ships with, and they are the exact output of ThemeCssBuilder.BuildLight(SabreDefaultTheme) — derived shades included. ThemeTokenFitnessTests asserts that parity, so a page with no theme applied and a page running the default theme look identical. Change a default in SabreDefaultTheme, then copy the builder's output here. - At runtime the theme manager writes the tenant/environment-resolved values onto as inline custom properties, which outrank everything in this file. - Keep the vocabulary small and semantic. Add a token only when a new *role* appears, never for a one-off shade. Public (Sabre.App.Web.Public) and Mobile keep their own copies of the chrome tokens because neither references Sabre.Shared.Web. */ :root { /* --- Chrome: the dark header / footer bars (every layout, portal and the help system) --- */ --sabre-chrome-bg: #141417; --sabre-chrome-fg: #ffffff; --sabre-chrome-fg-muted: #adadae; --sabre-chrome-border: rgba(255, 255, 255, 0.10); /* --- Surfaces --- */ --gnt-surface-color: #ffffff; /* page / panel / dialog background */ --gnt-surface-2: #f8fafc; /* alternate rows, sub-panels, sticky headers */ /* --- Text --- */ --gnt-text-color: #172033; /* body text */ --gnt-text-strong: #111826; /* headings, emphasised values */ --gnt-text-secondary: #3a465b; /* labels, captions */ --gnt-text-tertiary: #515f75; /* de-emphasised copy */ --gnt-muted-color: #64748b; /* hints, placeholders, meta */ --gnt-muted-text: #556379; /* muted copy on tinted panels */ --gnt-text-faint: #a2acb9; /* disabled / faint */ --gnt-text-inverse: #ffffff; /* text on primary / danger / chrome fills */ /* --- Borders --- */ --gnt-border-color: #cbd5e1; /* standard hairline */ --gnt-border-soft: #dde4ec; /* panel and card edges */ --gnt-border-light: #eaeef3; /* dividers inside a surface */ --gnt-border: var(--gnt-border-light); /* --- Primary --- */ --gnt-primary-color: #2f6fed; --gnt-primary-strong: #275bc2; /* text/links on a primary tint, hover */ --gnt-primary-tint: #eef3fe; /* highlighted rows and callouts */ --gnt-primary-border: #a1bef7; --gnt-focus-color: #2f6fed; /* focus rings and outlines */ --gnt-accent-color: #3b82f6; /* secondary emphasis, markers */ /* --- Selection (grid rows, active tabs) --- */ --gnt-selected-bg: #dbeafe; --gnt-selected-fg: #111827; --gnt-selected-border: #8eb3f6; /* --- Semantic --- */ --gnt-danger-color: #dc2626; --gnt-danger-strong: #b41f1f; --gnt-danger-text: #9a1b1b; --gnt-danger-tint: #fdf2f2; --gnt-danger-border: #f2adad; --gnt-success-color: #166534; --gnt-warning-color: #b7791f; --gnt-warning-tint: #f6efe4; --gnt-info-color: #0e7490; /* --- Status semantics (Lookup Role = Status). Chips, Gantt bars, kanban columns. --- */ --gnt-status-open: #2f6fed; --gnt-status-inprogress: #b7791f; --gnt-status-complete: #166534; --gnt-status-onhold: #64748b; --gnt-status-cancelled: #dc2626; /* --- Chart series, in order. Set from the theme's Chart Palette token at runtime. --- */ --gnt-chart-1: #2f6fed; --gnt-chart-2: #0e7490; --gnt-chart-3: #b7791f; --gnt-chart-4: #166534; --gnt-chart-5: #7c3aed; --gnt-chart-6: #dc2626; --gnt-chart-7: #0891b2; --gnt-chart-8: #65a30d; /* --- Typography & spacing --- */ --gnt-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gnt-font-heading: var(--gnt-font-body); --gnt-font-size: 14px; --gnt-mono-font: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; --gnt-radius: 4px; --gnt-formitem-pl: 3px; --gnt-formitem-pr: 3px; --gnt-row-padding: 6px; } /* ===== Bootstrap bridge ===== Bootstrap 5.3 components read per-component variables that its own rules set to literals (`.btn-primary { --bs-btn-bg: #0d6efd }`), so overriding `--bs-primary` alone does not move them. These rules re-point the components we actually use at the theme tokens. They are static CSS: the runtime applier only ever writes custom properties, never rules. */ .btn-primary { --bs-btn-bg: var(--gnt-primary-color); --bs-btn-border-color: var(--gnt-primary-color); --bs-btn-color: var(--gnt-text-inverse); --bs-btn-hover-bg: var(--gnt-primary-strong); --bs-btn-hover-border-color: var(--gnt-primary-strong); --bs-btn-hover-color: var(--gnt-text-inverse); --bs-btn-active-bg: var(--gnt-primary-strong); --bs-btn-active-border-color: var(--gnt-primary-strong); --bs-btn-disabled-bg: var(--gnt-primary-color); --bs-btn-disabled-border-color: var(--gnt-primary-color); } .btn-outline-primary { --bs-btn-color: var(--gnt-primary-color); --bs-btn-border-color: var(--gnt-primary-color); --bs-btn-hover-bg: var(--gnt-primary-color); --bs-btn-hover-border-color: var(--gnt-primary-color); --bs-btn-hover-color: var(--gnt-text-inverse); } .alert-danger { --bs-alert-bg: var(--gnt-danger-tint); --bs-alert-border-color: var(--gnt-danger-border); --bs-alert-color: var(--gnt-danger-text); } .alert-warning { --bs-alert-bg: var(--gnt-warning-tint); --bs-alert-border-color: var(--gnt-warning-color); --bs-alert-color: var(--gnt-text-color); } .alert-success { --bs-alert-bg: var(--gnt-surface-2); --bs-alert-border-color: var(--gnt-success-color); --bs-alert-color: var(--gnt-success-color); } /* ===== Status chips ===== A status's colour comes from its semantic, not its name, so any surface that shows a status (grid cell, detail header, Gantt bar, kanban column) can pick the class and stay in step with the theme. Text colour is fixed to the inverse token because these are filled chips. */ .gnt-status-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; line-height: 1.4; color: var(--gnt-text-inverse); background: var(--gnt-status-open); } .gnt-status-chip--open { background: var(--gnt-status-open); } .gnt-status-chip--inprogress { background: var(--gnt-status-inprogress); } .gnt-status-chip--complete { background: var(--gnt-status-complete); } .gnt-status-chip--onhold { background: var(--gnt-status-onhold); } .gnt-status-chip--cancelled { background: var(--gnt-status-cancelled); } /* Permitted literal colours in component CSS (ThemeTokenFitnessTests budget): - #327a8c teal accent of ExternalDataSourceWizard (component identity, not a semantic role) - status / gantt / risk-matrix category colours that are data, not chrome - translucent rgba() shadows and overlays Everything else should be a token. */