/* ============================================================================================= TimeView design tokens — portal subset. Copied (condensed) from the TimeView design system: TimeView-Web/UI/TSO.TimeView.UI.Web/TSO.TimeView.Shared.Components/wwwroot/tv-tokens.css documented in TimeView-Web/docs/design-system/README.md. This is a MANUAL SYNC, not a package reference. The portal does not reference TSO.TimeView.Shared.Components, so when a token changes upstream it must be copied here by hand. Only the tokens the portal actually uses are carried over, plus the portal-specific Tier-2 tokens at the bottom, which have no upstream counterpart. Rules (unchanged from upstream): - This file is the ONLY place a token is defined at :root. A second :root definition in a later sheet silently wins and the documented one never renders. - Components reference a Tier-2 semantic token; never a raw hex, never a Tier-1 primitive. - var(--token, hotpink) for tokens we own — a missing token must be visible, not plausible. - The brand hexes below are duplicated in Components/Theming/PortalTheme.cs, because MudBlazor needs a C# palette. Change both. ============================================================================================= */ :root { --tv-default-border-radius: 0.5rem; /* ── Tier 1: typography ── Bootstrap 5.3's native stack, so app-authored text and MudBlazor's own text match. Font *family* is global; the size/weight tokens are applied deliberately per component. */ --tv-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Machine output — request ids, trace ids, stack traces. */ --tv-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Type scale. Five steps is the whole ramp: page title, section heading, body, metadata and the large numeral on a summary card. A sixth size means the hierarchy is being solved with size where it should be solved with weight, colour or position. */ --tv-text-page-title: 1.375rem; --tv-text-section: 1rem; --tv-text-body: 0.875rem; --tv-text-meta: 0.75rem; --tv-text-metric: 1.75rem; --tv-weight-regular: 400; --tv-weight-medium: 500; --tv-weight-strong: 600; --tv-leading-tight: 1.25; --tv-leading-normal: 1.5; /* ── Tier 1: spacing ── A 4px base step. padding / margin / gap take one of these, never a literal. */ --tv-space-1: 0.25rem; --tv-space-2: 0.5rem; --tv-space-3: 0.75rem; --tv-space-4: 1rem; --tv-space-5: 1.5rem; --tv-space-6: 2rem; --tv-page-gutter: var(--tv-space-4); --tv-section-gap: var(--tv-space-5); /* ── Tier 1: primitive palette ── Interface hues, named by hue. NOT the corporate identity — see --brand-* below; the two are not interchangeable. Where a hue has a natural semantic match, it inherits from the active MudBlazor theme (upstream reads the Syncfusion theme here instead), so status colours track a light/dark switch. The hex is the fallback for the brief window before MudThemeProvider has published its variables, and for anything rendered outside it. */ --palette-grey: #757575; --palette-blue: var(--mud-palette-info, #4dadff); --palette-green: var(--mud-palette-success, #2e7d32); --palette-amber: var(--mud-palette-warning, #f9a825); --palette-red: var(--mud-palette-error, #c62828); --palette-accent: var(--mud-palette-primary, #1768b2); --palette-orange: #ff814c; --palette-black: #000000; /* Categorical hues. No semantic match, and none is wanted: these exist to tell taxonomy entries apart, so they must stay mutually distinct rather than track a theme. */ --palette-purple: #6a1b9a; --palette-teal: #00695c; /* Deep variants, for use as a solid *fill* behind white text. The theme-derived hues above are tuned for glyphs and borders on the page background; as a fill they leave white text at roughly 2:1. Explicit hex on purpose — a theme-inherited value gives no guarantee of the contrast a filled chip needs. */ --palette-grey-deep: #424242; --palette-blue-deep: #0d47a1; --palette-green-deep: #1b5e20; --palette-amber-deep: #a35200; --palette-red-deep: #b71c1c; --palette-orange-deep: #c94f1a; --palette-purple-deep: #4a148c; --palette-teal-deep: #004d40; --palette-accent-deep: #14507f; /* ── Tier 1: TimeSolutions brand palette ── The corporate identity, 2022 design guide (ImageConsult), RGB set — the one the guide designates for on-screen use. Fixed values: they deliberately do NOT inherit from the theme, which is exactly why they must be used sparingly — a fixed colour cannot guarantee contrast against a surface it does not control. Use for: identity surfaces — the shell's brand mark, sign-in, empty-state illustration. Never for: status, validation, or any colour that carries meaning. Brand blue reading as "info" is a coincidence of hue, not a decision. Contrast, measured upstream, against white and against the dark canvas #212529: GREEN 2.78 / 5.55 · COOLGREEN 3.26 / 4.73 · TURQUOISE 2.95 / 5.24 BLUE 5.74 / 2.69 · DARKBLUE 11.98 / 1.29 No brand hue is legible as text on both themes. Treat each as a *fill* with a deliberately chosen foreground on top. These hexes are mirrored in Components/Theming/PortalTheme.cs. Change both. */ --brand-green: #50af43; --brand-coolgreen: #00a278; --brand-turquoise: #00a6b6; --brand-blue: #1768b2; --brand-darkblue: #19375f; --brand-black: #000000; /* Neutral ramp: the guide's black at 75/50/25 %, flattened against white so they stay usable as opaque fills. On a dark surface prefer the --tv-* neutral chrome tokens below. */ --brand-black-75: #404040; --brand-black-50: #808080; --brand-black-25: #bfbfbf; --brand-white: #ffffff; /* The guide encourages gradients between brand hues ("forløb kan bruges") for identity surfaces and line icons. Named here so the pairing is decided once. Not for use behind body text. */ --brand-gradient-cool: linear-gradient(135deg, var(--brand-green), var(--brand-turquoise)); --brand-gradient-deep: linear-gradient(135deg, var(--brand-turquoise), var(--brand-darkblue)); /* ── Tier 2: neutral chrome ── Derived from the element's own foreground rather than a fixed grey, so separators and washes stay legible on light and dark alike. (currentColor resolves where the token is *used*, not here.) */ --tv-border-color: color-mix(in srgb, currentColor 25%, transparent); /* WCAG 1.4.11 (Non-text Contrast) needs 3:1 at the boundary of a UI component — e.g. a form control — against its adjacent surface, which the 25 % wash above does not reach (measured 1.66:1 light / 2.12:1 dark). Decorative separators and card edges are exempt (they merely group content that is already perceivable), so the base token is left alone rather than raised globally, which would heavy-up every card and divider for no accessibility gain. This is the boundary-only alternative: 50 % clears 3:1 in both themes (measured 3.12:1 light / 4.37:1 dark) and is what an input-like boundary drawn in our own CSS should use. MudBlazor's own form controls do not read this token at all — see PortalTheme.LinesInputs. */ --tv-border-color-strong: color-mix(in srgb, currentColor 50%, transparent); --tv-surface-alt: color-mix(in srgb, currentColor 8%, transparent); --tv-color-text-secondary: color-mix(in srgb, currentColor 70%, transparent); --tv-color-hover: color-mix(in srgb, currentColor 10%, transparent); /* Opaque panel surface for anything that floats above page content, and the page canvas it floats over. The canvas is deliberately a step darker than the surface: the layout relies on cards reading as raised. Both track the MudBlazor theme. */ --tv-surface: var(--mud-palette-surface, #ffffff); --tv-body-bg: var(--mud-palette-background, #f4f5f7); --tv-body-fg: var(--mud-palette-text-primary, #212529); /* Elevation for those floating panels. A shadow, not a colour, so it has no palette entry. Strengthened for dark in tv-theme.css, where a 10 % black shadow is invisible. */ --tv-shadow-flyout: 0 0.5rem 2rem rgba(0, 0, 0, 0.1); --tv-shadow-flyout-hover: 0 1rem 3rem rgba(0, 0, 0, 0.15); /* ── Tier 2: accent fill and its foreground ── The app's single interactive accent. MudBlazor publishes --mud-palette-primary but no matching "on primary" variable, so the foreground is declared once here rather than hardcoded per component. */ --tv-accent: var(--palette-accent, hotpink); --tv-accent-fg: var(--brand-white, hotpink); /* ── Tier 2: focus ── Two-tone ring: a thin separating ring in the surface colour against the element, then the accent. The stock template hardcoded `white` for the inner ring, which vanished on dark panels. */ --tv-focus-ring: var(--tv-accent, hotpink); --tv-focus-ring-inner: var(--tv-surface, hotpink); /* ── Tier 2: navigation ── The colour of a nav glyph. Every entry resolves to the accent: a menu in nine hues reads as decoration rather than as structure, and the glyph shape already says which entry it is. The indirection is kept so singling one out later is a one-line change here. */ --tv-nav-icon: var(--tv-accent, hotpink); /* ========================================================================================= Tier 2: PORTAL-SPECIFIC domain tokens. No upstream counterpart — these belong to this app and are not part of the synced subset. Each points at a Tier-1 primitive so the portal can diverge without touching the palette. ========================================================================================= */ /* Suggestion workflow (SuggestionStatus). The outline colour of a status chip; the -fill variants are the solid-fill version, which carries --brand-white text, hence the deep primitives (the theme-derived hues leave white at roughly 2:1 as a fill). */ --suggestion-status-new: var(--palette-blue, hotpink); --suggestion-status-under-review: var(--palette-amber, hotpink); --suggestion-status-planned: var(--palette-purple, hotpink); --suggestion-status-in-progress: var(--palette-accent, hotpink); --suggestion-status-completed: var(--palette-green, hotpink); --suggestion-status-declined: var(--palette-red, hotpink); --suggestion-status-new-fill: var(--palette-blue-deep, hotpink); --suggestion-status-under-review-fill: var(--palette-amber-deep, hotpink); --suggestion-status-planned-fill: var(--palette-purple-deep, hotpink); --suggestion-status-in-progress-fill: var(--palette-accent-deep, hotpink); --suggestion-status-completed-fill: var(--palette-green-deep, hotpink); --suggestion-status-declined-fill: var(--palette-red-deep, hotpink); /* Knowledge-base article lifecycle (KnowledgeArticleStatus). Deliberately a separate group from the suggestion statuses even where the hue matches, so one domain can be re-coloured without dragging the other with it. */ --article-status-draft: var(--palette-amber, hotpink); --article-status-published: var(--palette-green, hotpink); --article-status-archived: var(--palette-grey, hotpink); --article-status-draft-fill: var(--palette-amber-deep, hotpink); --article-status-published-fill: var(--palette-green-deep, hotpink); --article-status-archived-fill: var(--palette-grey-deep, hotpink); } /* ── Pre-paint fallbacks ── Everything above resolves through --mud-palette-*, which MudThemeProvider only publishes once the circuit is up (prerender is off, and IsDarkMode is not known until MainLayout's first OnAfterRenderAsync). Until then the fallback hex is what paints — so the fallbacks alone decide what a cold load looks like, and a dark-mode user would get a white flash. The pre-paint script in App.razor sets body[data-theme] before first paint; this block gives that attribute something worth setting by restating the same declarations with the *dark* fallbacks. --mud-palette-* still wins the moment it exists, so MudBlazor remains the single source of truth and this is purely a first-frame concern. Hexes mirror PortalTheme.PaletteDark — keep the two in step. */ body[data-theme="dark"], html[data-theme="dark"] { --palette-accent: var(--mud-palette-primary, #5b9bd8); --tv-surface: var(--mud-palette-surface, #212529); --tv-body-bg: var(--mud-palette-background, #1b1e21); --tv-body-fg: var(--mud-palette-text-primary, #e9ecef); }