/* ============================================================ Simplii Financial Design Tokens — Single Source of Truth (F26 Rebrand) ============================================================ Production: /ebm-resources/public/simplii/themes/default/brand-colors.css All Simplii Financial design-token CSS custom properties are defined here. Repos consume these via var(--sf-*) references. Namespace ───────── sf = Simplii Financial Three-tier architecture (W3C DTCG-aligned) ────────────────────────────────────────── 1. REF — Reference tier (raw values, never used in app code) --sf-ref-palette-- obsidian structural brand colour lilac attention / accent brand colour neutral grays NEVER bind UI directly to a ref token. Always go through sys (or comp). Refs exist so we can swap brand hex values in one place and have the rest of the system follow. 2. SYS — System tier (semantic roles — what a colour is FOR) --sf-sys-color-[-] role : surface | text | icon | border | link | brand | action state : hover | active | disabled Brand vs Action brand → visual identity (wordmark, hero accents, structural text/icons/borders that ARE the Simplii look). brand-primary = Obsidian, brand-accent = Lilac. action → interactive controls (button fills, CTA hover/active, disabled state). Decoupled from brand so future tweaks to button color don't ripple into typography. Default consumer choice. If a sys token fits, use it. 3. COMP — Component tier (per-component slots) --sf-comp-[-]-[-] component : header | footer | page | button | card | input variant : primary | secondary | tertiary | disabled (button only) slot : background-color | border-color | text-color | label-color | … state : hover | active | focus Use comp ONLY when: (a) a stateful component needs a per-state slot, or (b) an app-chrome region (header/footer/page) may vary by host. Otherwise prefer sys. Naming rule (in one line) ───────────────────────── --sf---[-state] tier : ref | sys | comp category : palette (ref) | color (sys) | (comp) Dark contexts (no `-on-dark` suffix) ──────────────────────────────────── Tokens DO NOT carry an `-on-dark` suffix. Instead, anywhere a dark surface is rendered (header, footer, hero banner, promo card), wrap it in the `.sf-dark-surface` class. Inside that scope, the relevant sys-color roles re-resolve to their dark-surface values.
…
…
Components stay context-unaware: `.sf-button` references `--sf-comp-button-…`, which references `--sf-sys-color-action-…` (or fixed neutrals where the button is always-light-on-dark-fill). The `.sf-dark-surface` scope flips SYS role tokens AND re-emits every COMP token that internally references a flipping SYS role (see the COMP re-declarations block at the bottom of the file). The re-emission is required because CSS substitutes `var()` at the declaring element's computed-value time, so a COMP token declared only at `:root` would bake in the light SYS value and descendants under `.sf-dark-surface` would still see it. Why a class, not a `-on-dark` suffix per token: • Halves the token count. • Components don't need to know what surface they're on. • The same class works for both a nested dark island (footer, hero) AND a full dark-mode treatment when applied at the app root. Why this shape ────────────── • Tier in the name → reviewers and lint rules can spot raw refs in app code. • Matches the W3C Design Tokens (DTCG) spec → easy export to Tokens Studio, Style Dictionary, Specify, etc. • Mirrors industry leaders (Material `md.ref/sys/comp`, Adobe Spectrum, Atlassian ADS, Carbon, Polaris) → low onboarding cost. • Figma folder path == CSS variable name (see "Figma binding" below) → no per-variable code-syntax overrides needed. Figma binding ───────────── The Figma "Simplii Brand" collection mirrors this file 1:1. Each Figma variable's path uses "/" where the CSS name uses "-": Figma sf/comp/button/primary/background-color CSS --sf-comp-button-primary-background-color Codegen emits the CSS name verbatim. How to rebrand ────────────── Swap hex values in the REF block, or re-point SYS roles at different refs. No app-code changes; no rebuilds beyond the CSS file. Sources of truth ──────────────── - Simplii Financial Brand Guidelines v1.0 (April 2026) - F26 OLB Rebrand Figma (file: rqISocpixverDqCaZ72Bk0) ============================================================ */ :root, .sf-light-mode, .sf-light-surface { /* ============================================================ 1. REF — Reference tier (raw values, do NOT use in app code) ============================================================ */ /* ── Palette · Obsidian ──────────────────────────────────── */ --sf-ref-palette-obsidian-100: #F5FAFC; /* Extra Light Obsidian */ --sf-ref-palette-obsidian-300: #E1EEF7; /* Light Obsidian */ --sf-ref-palette-obsidian-500: #5195C7; /* Obsidian (base) */ --sf-ref-palette-obsidian-700: #1F4D70; /* Dark Obsidian */ --sf-ref-palette-obsidian-800: #00436B; /* Partybox Obsidian */ --sf-ref-palette-obsidian-900: #0B283D; /* Extra Dark Obsidian */ --sf-ref-palette-obsidian-950: #061724; /* Deepest Obsidian */ /* ── Palette · Lilac Mist ────────────────────────────────── */ --sf-ref-palette-lilac-100: #FAEDFF; /* Extra Light Lilac Mist */ --sf-ref-palette-lilac-300: #F1C7FF; /* Light Lilac Mist */ --sf-ref-palette-lilac-500: #D760FF; /* Lilac Mist (hero/base) */ --sf-ref-palette-lilac-700: #8C00BA; /* Dark Lilac Mist */ --sf-ref-palette-lilac-900: #600080; /* Extra Dark Lilac Mist */ /* ── Palette · Red (feedback / error) ────────────────────── */ /* Base error red. Mirrors legacy $simplii-red-100 (#DB0A0A). Bound to the SYS feedback-error role; do NOT consume directly in app code. */ --sf-ref-palette-red-500: #DB0A0A; /* Dark error red. Mirrors legacy $simplii-red-200 (#AB0808). Bound to the SYS feedback-error-hover role; do NOT consume directly in app code. */ --sf-ref-palette-red-700: #AB0808; /* Error tint surface. Mirrors legacy $simplii-red-50 (#FEF0F0). Bound to the SYS feedback-error-background-color role for inline-error and alert backgrounds; do NOT consume directly in app code. */ --sf-ref-palette-red-50: #FEF0F0; /* ── Palette · Green (feedback / success) ────────────────── */ /* Base success green. Mirrors legacy $simplii-green-100 (#469566). Bound to the SYS feedback-success role; do NOT consume directly in app code. */ --sf-ref-palette-green-500: #469566; /* Success tint surface. Mirrors legacy $simplii-green-50 (#E7F2ED). */ --sf-ref-palette-green-50: #E7F2ED; /* ── Palette · Blue (feedback / info) ────────────────────── */ /* Base info blue. Bound to the SYS feedback-info role; do NOT consume directly in app code. */ --sf-ref-palette-blue-500: #0767A8; /* Info tint surface. Mirrors legacy $simplii-blue-50 (#DEE9F7). */ --sf-ref-palette-blue-50: #DEE9F7; /* ── Palette · Orange (feedback / warning) ───────────────── */ /* Base warning orange. Mirrors legacy $simplii-orange-100 (#C17200). Bound to the SYS feedback-warning role; do NOT consume directly in app code. */ --sf-ref-palette-orange-500: #C17200; /* Warning tint surface. Mirrors legacy $simplii-orange-50 (#FFF4DA). Bound to the SYS feedback-warning-background-color role for inline-warning and alert backgrounds; do NOT consume directly in app code. */ --sf-ref-palette-orange-50: #FFF4DA; /* ── Palette · Neutral ───────────────────────────────────── */ --sf-ref-palette-neutral-100: #FFFFFF; --sf-ref-palette-neutral-200: #F4F5F6; --sf-ref-palette-neutral-250: #E7E7E7; --sf-ref-palette-neutral-300: #CACBCC; --sf-ref-palette-neutral-300-rgb: 202, 203, 204; --sf-ref-palette-neutral-400: #848688; --sf-ref-palette-neutral-500: #545556; --sf-ref-palette-neutral-600: #222428; --sf-ref-palette-neutral-700: #121418; --sf-ref-palette-neutral-700-rgb: 18, 20, 24; --sf-ref-palette-neutral-charcoal: #383B3E; /* ============================================================ 2. SYS — System tier (semantic roles — default for app code) Inside `.sf-dark-surface`, the role tokens marked "▲ flips on dark" are re-bound. See the override block at the bottom of the file. ============================================================ */ /* ── Color · Surface ─ ▲ flips on dark ───────────────────── */ /* Surface tokens flip inside `.sf-dark-surface` — see override block below. That means a region wrapped in `.sf-dark-surface` becomes dark via `--sf-sys-color-surface-default` itself (no separate "dark" token is needed for the bg), and the descendant content tokens (text/icon/link/etc.) flip together with it. This eliminates the "I set the bg but forgot the scope class" footgun. */ --sf-sys-color-surface-default: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-surface-subtle: var(--sf-ref-palette-neutral-200, #F4F5F6); /* ── Color · Text ─── ▲ flips on dark ────────────────────── */ --sf-sys-color-text: var(--sf-ref-palette-neutral-600, #222428); --sf-sys-color-text-subtle: var(--sf-ref-palette-neutral-500, #545556); /* Quieter than `--sf-sys-color-text-subtle` — used for low-emphasis helper/caption copy nested inside an already-subtle container (e.g. `.info-bar p` helper text, footer release-version number). Bound to Neutral-400 to preserve the legacy `$simplii-medium-grey` (#848688) tone exactly. Flips inside `.sf-dark-surface` to `#A8AEB1` (one step quieter than the dark `-subtle` `#DCE1E3`) so the parent/child contrast pair holds on dark surfaces too. */ --sf-sys-color-text-muted: var(--sf-ref-palette-neutral-400, #848688); /* Foreground (text/icon) intended to sit on top of a `--sf-sys-color-brand-primary` fill — e.g. brand badges, pills, filled chips. On light surfaces brand-primary is Obsidian, so the foreground is white; inside `.sf-dark-surface` brand-primary flips to Light Obsidian, so this token flips to Obsidian-900 for contrast. Use this instead of `--sf-sys-color-text` whenever the background is brand-primary, so the foreground stays legible across the flip. */ --sf-sys-color-text-on-brand-primary: var(--sf-ref-palette-neutral-100, #FFFFFF); /* Foreground (text/icon) intended to sit on top of a `--sf-sys-color-brand-accent` fill — e.g. user-profile avatar letters, lilac chips/badges, brand-accent pills. brand-accent (Lilac) does NOT flip in `.sf-dark-surface`, so this foreground also does not flip: dark neutral-600 text reads against Lilac on both light and dark surfaces. Use this instead of `--sf-sys-color-text` whenever the background is brand-accent, so the foreground stays legible inside `.sf-dark-surface` where plain `text` would flip to white. */ --sf-sys-color-text-on-brand-accent: var(--sf-ref-palette-neutral-600, #222428); /* ── Color · Icon ─── ▲ flips on dark ────────────────────── */ --sf-sys-color-icon: var(--sf-ref-palette-neutral-600, #222428); /* ── Color · Border ─ ▲ flips on dark ────────────────────── */ --sf-sys-color-border: var(--sf-ref-palette-neutral-300, #CACBCC); /* Generic divider lines (e.g., `
`). Keep Neutral-400 to preserve legacy divider contrast. */ --sf-sys-color-divider-line: var(--sf-ref-palette-neutral-400, #848688); /* Subtle divider line — softer than `--sf-sys-color-divider-line`, used for low-emphasis dividers such as dashed `
` separators between in-page sections (e.g. fund-account page dividers). Bound to Neutral-300 to preserve the legacy `$simplii-neutral-300` dashed-divider tone. */ --sf-sys-color-divider-line-subtle: var(--sf-ref-palette-neutral-300, #CACBCC); /* Focused/active divider line — used to highlight an expanded or active section (e.g. accordion focused state, notes pre-footer expanded state) vs the default neutral `--sf-sys-color-divider-line`. Bound to brand-primary so it carries the Simplii identity and flips Obsidian → Lilac inside `.sf-dark-surface` via brand-primary. Mirrors the legacy `$focused-divider-color` (was Simplii pink #DF0089). */ --sf-sys-color-divider-line-focused: var(--sf-sys-color-brand-primary, #0B283D); /* Section-heading underline role. Bound to brand-primary so section titles carry the Simplii identity and flip Obsidian → Lilac inside `.sf-dark-surface` via brand-primary. */ --sf-sys-color-heading-border: var(--sf-sys-color-brand-primary, #0B283D); /* Dedicated text-input border role. Inputs should use Neutral-400, not the generic border role. */ --sf-sys-color-input-border: var(--sf-ref-palette-neutral-400, #848688); /* ── Color · Link ─── ▲ flips on dark ────────────────────── */ --sf-sys-color-link: var(--sf-sys-color-text, #222428); --sf-sys-color-link-decoration: var(--sf-sys-color-link, #222428); --sf-sys-color-link-hover: var(--sf-ref-palette-lilac-500, #D760FF); --sf-sys-color-link-decoration-hover: var(--sf-sys-color-brand-accent, #D760FF); /* Subtle link role — used for inline links inside muted/placeholder body copy (e.g. `.info` paragraphs) so the link default colour matches the surrounding subtle text instead of jumping to full text contrast. Pair with `--sf-sys-color-link-hover` on `:hover`/`:focus` so the link still pops on interaction. Flips automatically inside `.sf-dark-surface` via the text-subtle role it references — no separate dark override needed. */ --sf-sys-color-link-subtle: var(--sf-sys-color-text-subtle, #545556); /* ── Color · Feedback ────────────────────────────────────── */ /* Semantic role for error/invalid feedback — used for inline error text, error icons, and the foreground colour of error alerts. Does NOT flip in `.sf-dark-surface`: red carries WCAG-AA contrast on both white and obsidian-950 surfaces, and flipping it would dilute the “this is an error” signal. */ --sf-sys-color-feedback-error: var(--sf-ref-palette-red-500, #DB0A0A); /* Semantic role for destructive/error hover states (e.g. delete-link hover). Does NOT flip in `.sf-dark-surface`; same rationale as `--sf-sys-color-feedback-error`. */ --sf-sys-color-feedback-error-hover: var(--sf-ref-palette-red-700, #AB0808); /* Semantic tint surface for inline-error and alert backgrounds — used as the fill behind error alerts and the background of invalid-state form controls. Paired with `--sf-sys-color-feedback-error` on the foreground. Inside `.sf-dark-surface` this flips to a low-alpha red overlay so it reads cleanly on Obsidian; the foreground hue stays put. */ --sf-sys-color-feedback-error-background-color: var(--sf-ref-palette-red-50, #FEF0F0); /* Semantic role for success/positive feedback — used for inline success text, success icons, and positive-state indicators such as the "good" label of the password-strength meter. Does NOT flip in `.sf-dark-surface`: green carries WCAG-AA contrast on both white and obsidian-950 surfaces, and flipping it would dilute the “success” signal (mirrors the rationale for feedback-error). */ --sf-sys-color-feedback-success: var(--sf-ref-palette-green-500, #469566); /* Semantic tint surface for inline-success and alert backgrounds — used as the fill behind success alerts (e.g. ``). Paired with `--sf-sys-color-feedback-success` on the foreground. Does NOT flip in `.sf-dark-surface`; same rationale as `--sf-sys-color-feedback-success`. */ --sf-sys-color-feedback-success-background-color: var(--sf-ref-palette-green-50, #E7F2ED); /* Semantic role for warning/intermediate feedback — used for inline warning text, warning icons, and intermediate-state indicators such as the "moderate" label of the password-strength meter. Does NOT flip in `.sf-dark-surface`: orange carries WCAG-AA contrast on both white and obsidian-950 surfaces, and flipping it would dilute the “warning” signal (mirrors the rationale for feedback-error and feedback-success). */ --sf-sys-color-feedback-warning: var(--sf-ref-palette-orange-500, #C17200); /* Semantic tint surface for inline-warning and alert backgrounds — used as the fill behind warning alerts (e.g. ``) and the password-strength meter alert panel. Paired with `--sf-sys-color-feedback-warning` on the foreground. Inside `.sf-dark-surface` this flips to a low-alpha orange overlay so it reads cleanly on Obsidian; the foreground hue stays put. */ --sf-sys-color-feedback-warning-background-color: var(--sf-ref-palette-orange-50, #FFF4DA); /* Semantic role for informational/neutral feedback — used for inline info text, info icons, and the foreground colour of info alerts. Does NOT flip in `.sf-dark-surface`. */ --sf-sys-color-feedback-info: var(--sf-ref-palette-blue-500, #0767A8); /* Semantic tint surface for inline-info and alert backgrounds. */ --sf-sys-color-feedback-info-background-color: var(--sf-ref-palette-blue-50, #DEE9F7); /* ── Color · Focus ───────────────────────────────────────── */ /* Two-tone focus indicator (WCAG 2.4.11 Focus Appearance — Minimum). The universal `:focus-visible` rule stacks both rings: a 1px `-light` halo and a 3px `-dark` outer ring. Because the two are opposite ends of the contrast scale, at least one of them is visible against any surface (light or dark), so neither token needs to flip in `.sf-dark-surface`. Author custom focus styles by composing the same two vars; do not introduce surface-aware overrides. */ --sf-sys-color-focus-ring-dark: var(--sf-ref-palette-neutral-700, #121418); --sf-sys-color-focus-ring-light: var(--sf-ref-palette-neutral-100, #FFFFFF); /* ── Color · Brand (visual identity) ─────────────────────── */ /* The colours that ARE the Simplii look — wordmark, hero accents, structural text/icons/borders. Decoupled from `action-*` so a future CTA-color tweak doesn't ripple into typography or iconography. */ /* brand-primary ▲ flips on dark (Obsidian → Lilac so it stays legible). */ --sf-sys-color-brand-primary: var(--sf-ref-palette-obsidian-900, #0B283D); /* brand-accent — Lilac; reads on both light and dark surfaces, no flip. */ --sf-sys-color-brand-accent: var(--sf-ref-palette-lilac-500, #D760FF); /* brand-gradient — signature radial gradient (hero surfaces, marketing panels). Composed from brand-primary → brand-accent so it tracks any future palette retune automatically. */ --sf-sys-color-brand-gradient: radial-gradient(97.01% 110.17% at 73.85% 81.75%, var(--sf-sys-color-brand-primary, #0B283D) 15.12%, var(--sf-sys-color-brand-accent, #D760FF) 100%); /* partybox-gradient — decorative frame treatment from F26 partybox. */ --sf-sys-color-brand-partybox-gradient: radial-gradient(97.01% 110.17% at 73.85% 81.75%, var(--sf-ref-palette-obsidian-800, #00436B) 15.12%, var(--sf-sys-color-brand-accent, #D760FF) 100%); /* ── Color · Action (interactive controls) ───────────────── */ /* Colours used for buttons, CTAs, and other interactive controls. On light surfaces these resolve to the same Obsidian family as brand-primary, but they are intentionally separate tokens so a future button-only restyle won't touch typography or icons. Action tokens flip inside `.sf-dark-surface` per Figma F26: primary/secondary/tertiary all rebind to white + neutral greys (NOT Lilac — Lilac stays reserved for brand-accent surfaces like progress, loader, and link-hover). Disabled moves to a mid neutral so the disabled fill reads as muted against the obsidian surface. See the override block at the bottom of the file. */ /* action-primary — filled CTA family. */ --sf-sys-color-action-primary: var(--sf-ref-palette-obsidian-900, #0B283D); --sf-sys-color-action-primary-hover: var(--sf-ref-palette-obsidian-700, #1F4D70); --sf-sys-color-action-primary-active: var(--sf-ref-palette-obsidian-950, #061724); /* action-secondary — outline-CTA family (stroke + label on a white-bg secondary button). Hover fills to obsidian-700; active (focused) to obsidian-950 per Figma F26 button matrix. */ --sf-sys-color-action-secondary: var(--sf-ref-palette-obsidian-900, #0B283D); --sf-sys-color-action-secondary-hover: var(--sf-ref-palette-obsidian-700, #1F4D70); --sf-sys-color-action-secondary-active: var(--sf-ref-palette-obsidian-950, #061724); /* action-tertiary — outline-CTA family (obsidian-950 stroke + label on a white-bg tertiary button). Hover fills to obsidian-950; active (focused) drops to a neutral-300 fill that keeps the obsidian-950 border + label visible. */ --sf-sys-color-action-tertiary: var(--sf-ref-palette-obsidian-950, #061724); --sf-sys-color-action-tertiary-hover: var(--sf-ref-palette-obsidian-950, #061724); --sf-sys-color-action-tertiary-active: var(--sf-ref-palette-neutral-300, #CACBCC); /* action-disabled — shared disabled fill + label across all CTA variants. */ --sf-sys-color-action-disabled-background-color: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-sys-color-action-disabled-text-color: var(--sf-ref-palette-neutral-400, #848688); /* ============================================================ 3. COMP — Component tier (per-component slots) ============================================================ */ /* ── App chrome · Header / Footer / Page ─────────────────── */ /* Host-overridable shell slots. The dark chrome regions MUST set `class="sf-dark-surface"` on the wrapper element so that `--sf-sys-color-surface-default` resolves to the dark obsidian variant inside that scope (and descendant text/icons/links flip together). */ --sf-comp-header-background-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Subtle 2px ambient drop-shadow under the app header (per Figma F26). Sits below the global-nav strip so it appears under the entire header (masthead + global nav). Low-alpha cool-black reads against both light and dark surfaces so it does not need to flip in `.sf-dark-surface`. */ --sf-comp-header-box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.12); --sf-comp-footer-background-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Footer body/copyright text. Bound to sys text so it flips inside `.sf-dark-surface` alongside the footer background. */ --sf-comp-footer-text-color: var(--sf-sys-color-text, #222428); /* Thin divider rule drawn above the in-footer copyright strip (e.g. `.copy-rights { border-top: ... }`). Bound to the subtle divider role so it reads as a soft separator on both surfaces: on light footers it sits as a faint neutral-300 line above the copyright text; on dark footers wrapped in `.sf-dark-surface` the same neutral-300 hex renders as a low-contrast light-grey line on the obsidian-900 footer fill — the intended "subtle separator above the copyright" treatment. divider-line-subtle is ref-bound (does NOT flip) so this slot is intentionally NOT re-emitted in the `.sf-dark-surface` block below. */ --sf-comp-footer-divider-color: var(--sf-sys-color-divider-line-subtle, #CACBCC); --sf-comp-page-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-partybox-background: var(--sf-sys-color-brand-partybox-gradient, radial-gradient(97.01% 110.17% at 73.85% 81.75%, #00436B 15.12%, #D760FF 100%)); --sf-comp-vci-layout-background: linear-gradient(to bottom, var(--sf-sys-color-brand-primary, #0B283D) 0 414px, var(--sf-comp-page-background-color, #FFFFFF) 414px 100%); /* Logo — Simplii wordmark / app logo SVG fill. Per F26, the logo renders in Lilac (brand-accent) on light headers, which is the overwhelmingly common case post-rebrand. Bound to brand-accent (not brand-primary) so it does NOT auto-flip with surface — the logo reads as Lilac on both light and dark chrome by design. Hosts that need a different treatment (e.g. a marketing landing with an Obsidian logo on white) can override this single COMP token at their own scope without touching brand-* SYS roles. */ --sf-comp-logo-color: var(--sf-sys-color-brand-accent, #D760FF); /* ── Button · Primary (filled) ───────────────────────────── */ /* The label is always white because the fill is always dark, regardless of the surrounding `.sf-dark-surface` scope — bound to the neutral ref. */ --sf-comp-button-primary-background-color: var(--sf-sys-color-action-primary, #0B283D); --sf-comp-button-primary-border-color: var(--sf-sys-color-action-primary, #0B283D); --sf-comp-button-primary-text-color: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-primary-background-color-hover: var(--sf-sys-color-action-primary-hover, #1F4D70); --sf-comp-button-primary-border-color-hover: var(--sf-sys-color-action-primary-hover, #1F4D70); --sf-comp-button-primary-text-color-hover: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-primary-background-color-active: var(--sf-sys-color-action-primary-active, #061724); --sf-comp-button-primary-border-color-active: var(--sf-sys-color-action-primary-active, #061724); --sf-comp-button-primary-text-color-active: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-primary-background-color-loading: var(--sf-sys-color-action-primary, #0B283D); --sf-comp-button-primary-border-color-loading: var(--sf-sys-color-action-primary, #0B283D); /* Label colour shown while the primary CTA is in its loading/spinner disabled state. Bound to brand-accent (Lilac) so the loading indicator reads as a decorative brand-accent pop on the obsidian loading fill — preserving the legacy "pink-on-CTA" spinner intent while staying within the rebrand palette. Lilac carries contrast on both light and dark surfaces, so this does NOT need to flip in `.sf-dark-surface`. */ --sf-comp-button-primary-text-color-loading: var(--sf-sys-color-brand-accent, #D760FF); /* ── Button · Secondary (outlined) ───────────────────────── */ /* Same always-white rationale on text-hover (bg fills to dark on hover). */ --sf-comp-button-secondary-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-button-secondary-text-color: var(--sf-sys-color-action-secondary, #0B283D); --sf-comp-button-secondary-border-color: var(--sf-sys-color-action-secondary, #0B283D); --sf-comp-button-secondary-background-color-hover: var(--sf-sys-color-action-secondary-hover, #1F4D70); --sf-comp-button-secondary-text-color-hover: var(--sf-ref-palette-neutral-100, #FFFFFF); /* Hover-state border tracks the hover fill so border + bg stay the same colour on hover (otherwise the default obsidian-900 border would mismatch the obsidian-700 hover fill). */ --sf-comp-button-secondary-border-color-hover: var(--sf-sys-color-action-secondary-hover, #1F4D70); --sf-comp-button-secondary-background-color-active: var(--sf-sys-color-action-secondary-active, #061724); --sf-comp-button-secondary-text-color-active: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-secondary-border-color-active: var(--sf-sys-color-action-secondary-active, #061724); /* ── Button · Tertiary (outlined, obsidian-950-based) ─────── */ /* Default: white bg, obsidian-950 text + border. Hover: obsidian-950 fill, white text. Active (focused): neutral-300 fill, obsidian-950 border + text. */ --sf-comp-button-tertiary-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-button-tertiary-text-color: var(--sf-sys-color-action-tertiary, #061724); --sf-comp-button-tertiary-border-color: var(--sf-sys-color-action-tertiary, #061724); --sf-comp-button-tertiary-background-color-hover: var(--sf-sys-color-action-tertiary-hover, #061724); --sf-comp-button-tertiary-text-color-hover: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-tertiary-border-color-hover: var(--sf-sys-color-action-tertiary-hover, #061724); --sf-comp-button-tertiary-background-color-active: var(--sf-sys-color-action-tertiary-active, #CACBCC); /* Active state: bg flips to neutral-300, but border + label stay on the obsidian-950 default so the focused control still reads as dark text/stroke on a light fill. Point at the non-state SYS role, NOT `-active` (which is the neutral-300 fill colour). */ --sf-comp-button-tertiary-text-color-active: var(--sf-sys-color-action-tertiary, #061724); --sf-comp-button-tertiary-border-color-active: var(--sf-sys-color-action-tertiary, #061724); /* ── Button · Tertiary Alternative ─────────────────────── Lower-emphasis tertiary used on subtle/neutral surfaces (e.g. account-card action buttons). Transparent default fill with a soft neutral-300 stroke and neutral-700 label. Hover/active fall back to the same dark-fill treatment as the standard tertiary. */ --sf-comp-button-tertiary-alt-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-button-tertiary-alt-text-color: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-alt-border-color: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-comp-button-tertiary-alt-background-color-hover: var(--sf-sys-color-action-tertiary-hover, #061724); --sf-comp-button-tertiary-alt-text-color-hover: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-button-tertiary-alt-border-color-hover: var(--sf-sys-color-action-tertiary-hover, #061724); --sf-comp-button-tertiary-alt-background-color-active: var(--sf-sys-color-action-tertiary-active, #CACBCC); --sf-comp-button-tertiary-alt-text-color-active: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-alt-border-color-active: var(--sf-sys-color-action-tertiary, #061724); /* ── Button · On-Callout (accent variant on fixed-dark callout) ── Bespoke button variant used when a CTA is placed on a `--sf-comp-callout-background-color` strip (fixed-dark, ref-bound to neutral-700, does NOT flip under `.sf-dark-surface`). The default state shows a transparent fill with a brand-accent (Lilac) stroke + label so the control reads as an accent pop against the dark callout; on `:active` the fill flips to Lilac and the label flips to `text-on-brand-accent` (dark neutral) so it stays legible on top of the Lilac fill. All four slots are intentionally fixed-surface — brand-accent, text-on-brand-accent, and callout-background-color none of them flip in `.sf-dark-surface`, so this set is NOT re-emitted in the dark-surface block. Mirrors the legacy "$simplii-lime on callout" treatment from the cart confirmation page. */ --sf-comp-button-on-callout-background-color: var(--sf-comp-callout-background-color, #121418); --sf-comp-button-on-callout-border-color: var(--sf-sys-color-brand-accent, #D760FF); --sf-comp-button-on-callout-text-color: var(--sf-sys-color-brand-accent, #D760FF); --sf-comp-button-on-callout-background-color-active: var(--sf-sys-color-brand-accent, #D760FF); --sf-comp-button-on-callout-text-color-active: var(--sf-sys-color-text-on-brand-accent, #222428); /* ── Button · Accent (brand-accent-filled CTA on dark chrome) ── Bespoke button variant whose resting fill IS brand-accent (Lilac) — used for high-emphasis CTAs sitting on `.sf-dark-surface` regions (footer "Open a no-fee account", referral hero CTAs, etc.). Unlike primary/secondary/tertiary (which flip to white on dark via action-* roles), this variant stays Lilac on both surfaces — brand-accent does NOT flip in `.sf-dark-surface`. Pair with `--sf-sys-color-text-on-brand-accent` for the label (dark neutral stays legible on Lilac regardless of surface). Intentionally NOT re-emitted in the `.sf-dark-surface` block — same always-Lilac contract as `--sf-comp-avatar-background-color`. */ --sf-comp-button-accent-background-color: var(--sf-sys-color-brand-accent, #D760FF); /* ── Button · Sign-out (masthead pill on dark chrome) ──────── Bespoke button variant used for the masthead "Sign out" pill (`.masthead .user-profile-signout-container .signout-button`). The masthead is a dark-chrome region, so the default fill is `--sf-comp-button-primary-background-color` (Obsidian) with a neutral grey stroke + light label. On hover/focus the pill flips to a brand-accent (Lilac) fill + stroke and a `text-on-brand-accent` (dark neutral) label — preserving the legacy "$simplii-primary-lime hover" treatment within the rebrand palette. Hover slots are bound to `--sf-sys-color-brand-accent` (Lilac). brand-accent does NOT flip in `.sf-dark-surface`, so this set is intentionally NOT re-emitted in the dark-surface block — matches the always-Lilac contract of the paired `text-on-brand-accent` foreground. */ --sf-comp-button-signout-background-color-hover: var(--sf-sys-color-brand-accent, #D760FF); --sf-comp-button-signout-border-color-hover: var(--sf-sys-color-brand-accent, #D760FF); /* Default stroke around the masthead "Sign out" pill. The pill itself supplies its own dark fill via `--sf-comp-button-primary-background-color` (Obsidian) — so this border is intentionally a muted Neutral-400 ring rather than a button-primary/secondary border. Mirrors the legacy `$simplii-medium-grey` (#848688) ring exactly. The masthead is NOT wrapped in `.sf-dark-surface` in CIR (header surface = light per Charter §4a), so this token does not need a dark-surface re-emission. Hosts that flip their masthead to dark can override this single COMP token inside their own `.sf-dark-surface` scope. */ --sf-comp-header-signout-button-border-color: var(--sf-ref-palette-neutral-400, #848688); /* Header sign-out pill text color. Header chrome is intentionally muted: paired with the obsidian fill + neutral-400 ring above, the label is a quiet neutral-250 (#E7E7E7), NOT the always-white `--sf-comp-button-primary-text-color`. REF-bound for header chrome identity (does not flip in `.sf-dark-surface`). Mirrors legacy `$simplii-lighter-grey` exactly. Added 2026-06-04 (drift re-add for `simplii-customer-information-refresh/src`). */ --sf-comp-header-signout-button-text-color: var(--sf-ref-palette-neutral-250, #E7E7E7); /* Header user-profile (avatar badge) hover/focus background. No existing COMP/SYS slot fit this header-chrome muted-ring identity; REF-bound to neutral-250 so it does not dissolve to obsidian inside `.sf-dark-surface`. Mirrors legacy `$simplii-lighter-grey` exactly. Added 2026-06-04 (drift re-add). */ --sf-comp-header-user-profile-icon-background-color-hover: var(--sf-ref-palette-neutral-250, #E7E7E7); /* ── Info-bar · helper banner row (autocomplete listboxes) ── */ /* Quiet helper-surface used by `.info-bar` rows inside autocomplete listboxes (address + occupation pickers in CIR). Bound to `--sf-sys-color-surface-subtle` so it flips with the dark surface, not to `--sf-sys-color-feedback-info-background-color` (this is a neutral helper surface, not a semantic alert). Added 2026-06-04 (drift re-add). */ --sf-comp-info-bar-background-color: var(--sf-sys-color-surface-subtle, #F4F5F6); /* ── Button · Delete (destructive text action) ──────────── */ --sf-comp-button-delete-text-color: var(--sf-sys-color-feedback-error, #DB0A0A); --sf-comp-button-delete-text-color-hover: var(--sf-sys-color-feedback-error, #DB0A0A); /* ── Button · Danger (filled destructive CTA) ───────────── */ /* Background fill for a filled destructive/danger button (e.g. a red-filled "Cancel Application" or confirmation CTA). Distinct from the `button-delete` family (text-only destructive action) — this slot covers filled-button variants whose intent is "irreversible destructive action". Bound to `--sf-sys-color-feedback-error` (red-500 #DB0A0A) so the fill carries the canonical error signal. Does NOT flip in `.sf-dark-surface` — same rationale as `--sf-sys-color-feedback-error` itself: red carries WCAG-AA contrast on both light and dark surfaces and flipping it would dilute the destructive signal. NOT re-emitted in the dark-surface block. */ --sf-comp-button-danger-background-color: var(--sf-sys-color-feedback-error, #DB0A0A); /* ── Button · Small Text (text-only button with optional SVG icon) ── `.sf-small-text-button` renders as a borderless, text-only button (essentially a styled link) that may carry an inline SVG icon. Default state uses the action-primary colour (Lilac / brand-accent). Hover/focus darkens both the label and SVG icon fill to charcoal (neutral-charcoal, #383B3E) so the focused control reads as a "pressed" mid-dark link rather than an accent flash or full obsidian-900 flip. REF-bound to neutral-charcoal — intentionally lighter than `--sf-sys-color-link-hover` (obsidian-900 #0B283D) — because this small text button sits inside body text regions on light surfaces only (no dark-surface re-emission needed for current usage). Both slots share the same charcoal value so text and icon stay in sync on `:hover`/`:focus`. */ --sf-comp-small-text-button-text-color-hover: var(--sf-ref-palette-neutral-charcoal, #383B3E); --sf-comp-small-text-button-icon-color-hover: var(--sf-ref-palette-neutral-charcoal, #383B3E); /* ── Button · Disabled (shared) ──────────────────────────── */ --sf-comp-button-disabled-background-color: var(--sf-sys-color-action-disabled-background-color, #CACBCC); --sf-comp-button-disabled-border-color: var(--sf-sys-color-action-disabled-background-color, #CACBCC); --sf-comp-button-disabled-text-color: var(--sf-sys-color-action-disabled-text-color, #848688); /* ── Card ────────────────────────────────────────────────── */ --sf-comp-card-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-card-border-color: var(--sf-sys-color-border, #CACBCC); /* Hover/focus border for interactive cards (e.g. clickable homepage tile links). Legacy treatment keeps the same grey stroke as the default border and signals interactivity via an elevation box-shadow (`--sf-comp-hover-card-shadow-color`) rather than a border-colour change — this slot exists so that intent is encoded as an explicit hover token and a future tweak (e.g. brand-accent border on hover) lands in one place. Aliases the default card border so it tracks any retune of `--sf-sys-color-border`. */ --sf-comp-card-border-color-hover: var(--sf-comp-card-border-color, #CACBCC); /* Active/selected border for step-cards and similar multi-state cards (e.g. `.step-card.active` in a wizard flow). One step darker than the default card border (neutral-400 vs neutral-300) so the active card reads as visually emphasised relative to its siblings. Bound to `--sf-ref-palette-neutral-400` (same pattern as `--sf-comp-panel-border-color`) — REF-bound because neutral-400 reads on both white and obsidian-900 surfaces without needing a dark-surface flip; intentionally NOT re-emitted in the `.sf-dark-surface` block. */ --sf-comp-card-border-color-active: var(--sf-ref-palette-neutral-400, #848688); /* Pressed/active fill for interactive cards (e.g. clickable homepage tile links on `:active:not(:focus-visible)`). Bound to `--sf-sys-color-surface-subtle` so the pressed state reads as a faint surface tint and tracks the surface-subtle retune; flips inside `.sf-dark-surface` via the SYS role it references. Mirrors the legacy `$simplii-lighter-grey` (#E7E7E7) pressed-tile shade — visual delta is intentional (legacy neutral-250 → token neutral-200) so the pressed state stays on the rebrand palette. */ --sf-comp-card-background-color-active: var(--sf-sys-color-surface-subtle, #F4F5F6); /* Subtle alt-fill (e.g. nested summary cards). Ref-bound to neutral-200 so it stays a faint tint on light surfaces. */ --sf-comp-card-background-subtle-color: var(--sf-ref-palette-neutral-200, #F4F5F6); /* Hover-elevation shadow for interactive cards. Low-alpha cool-black so it reads on both light and dark surfaces. */ --sf-comp-hover-card-shadow-color: #1f1f1f33; /* Points / credits balance text colour on card-list items (e.g. `.ui-card-list .card-points`). Bound to feedback-info (blue-500 #0767A8) so the numeric display carries an informational/positive-value signal. Does NOT flip in `.sf-dark-surface` — blue-500 carries WCAG-AA contrast on both white and obsidian surfaces; same always-X pattern as the feedback family. Added 2026-06-24 (asr-forms $credit-blue-color migration). */ --sf-comp-card-points-text-color: var(--sf-sys-color-feedback-info, #0767A8); /* ── Avatar (user-initial badge) ─────────────────────────── */ /* Circular badge that displays the signed-in user's initial(s) (e.g. masthead `.user-profile-icon:before`). Background fills with brand-accent (Lilac); the initial letter must sit on top with a dark foreground. Ref-bound to neutral-600 — and intentionally NOT to `--sf-sys-color-text` — because brand-accent does not flip in `.sf-dark-surface` (Lilac on both surfaces), so the foreground must also stay dark in that scope. Same "always-X-regardless-of-surface" pattern as `--sf-comp-button-primary-text-color`. */ --sf-comp-avatar-text-color: var(--sf-ref-palette-neutral-600, #222428); /* Background fill of the user-initial avatar badge. Bound to brand-accent (Lilac) so the badge carries the accent identity — mirrors the legacy `$simplii-primary-lime` fill while staying within the rebrand palette. brand-accent does NOT flip in `.sf-dark-surface`, so this slot is intentionally NOT re-emitted in the dark-surface block — matches the always-Lilac contract of the paired `--sf-comp-avatar-text-color` foreground. Used for both the default `.user-profile-icon:before` background and the focused-link state (`.user-profile a:focus .user-profile-icon:before`) since the focus affordance is the browser focus ring on the wrapping anchor, not a colour change on the badge itself. */ --sf-comp-avatar-background-color: var(--sf-sys-color-brand-accent, #D760FF); /* Hover/focus background fill of the user-initial avatar badge — applied on `.user-profile-icon:hover:before` and `.user-profile-icon:focus:before`. Mirrors the legacy `$simplii-lighter-grey` (#E7E7E7) subtle-grey hover indicator; bound to `--sf-sys-color-surface-subtle` so the hover state reads as a neutral surface tint paired with the always-dark `--sf-comp-avatar-text-color` foreground. Intentionally NOT re-emitted in `.sf-dark-surface` — same always-light contract as the default `--sf-comp-avatar-background-color` (Lilac), since the avatar foreground stays dark across both surfaces. */ --sf-comp-avatar-background-color-hover: var(--sf-sys-color-surface-subtle, #F4F5F6); /* ── Message Center · Notification badge ─────────────────── */ /* Small circular count badge that overlays the message-center bell icon in the masthead (`.message-center-icon .message-center-icon-badge`). Quiet neutral fill so the badge reads as a subtle count chip rather than a hot alert — distinct from the brand-accent (Lilac) used for interactive accents. Ref-bound to neutral-300 (legacy `$simplii-light-grey` #CACBCC) so it sits as a mid-grey on the default light masthead and still carries acceptable contrast on `.sf-dark-surface` mastheads; intentionally NOT re-emitted in the dark-surface block. */ --sf-comp-message-center-badge-background-color: var(--sf-ref-palette-neutral-300, #CACBCC); /* ── Medallia · Feedback button (third-party vendor widget) ── */ /* Hover/focus background tint for the Medallia "Feedback" floating button injected by the Kampyle/Nebula third-party widget (`#kampyleButtonContainer #nebula_div_btn`). Applied to BOTH the button itself and its inner `.kampyle_button-text` label slot so the label stays seamless with the button on hover/focus. The vendor markup is outside our control and is not wrapped in `.sf-dark-surface`, so this slot is ref-bound to neutral-300 and does NOT flip. Mirrors the legacy `$simplii-light-grey` (#CACBCC) hover tint — same "always-X-regardless-of-surface" pattern as `--sf-comp-message-center-badge-background-color`. */ --sf-comp-medallia-feedback-button-background-color-hover: var(--sf-ref-palette-neutral-300, #CACBCC); /* ── Side navigation ─────────────────────────────────────── */ --sf-comp-side-nav-border-color: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-comp-side-nav-header-background-color: var(--sf-ref-palette-neutral-200, #F4F5F6); /* ── Panel ───────────────────────────────────────────────── */ /* Panel = card-with-a-header. Header strip uses `surface-subtle` as a faint tint above the body's default surface, with text bound to the standard text role. Border is a panel-specific stroke: neutral-400 on light surfaces and neutral-500 inside `.sf-dark-surface`. */ --sf-comp-panel-header-text-color: var(--sf-sys-color-text, #222428); --sf-comp-panel-header-background-color: var(--sf-sys-color-surface-subtle, #F4F5F6); /* Edit-mode variant: dark obsidian header strip used when a panel is in `.edit-mod` — restores the legacy dark treatment the information-panel had pre-rebrand. Light text on neutral-700. Border defaults to the same fill so the strip reads as a solid block; override `-edit` border independently if a contrasting stroke is needed. */ --sf-comp-panel-header-background-color-edit: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-panel-header-text-color-edit: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-panel-header-border-color-edit: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-panel-border-color: var(--sf-ref-palette-neutral-400, #848688); --sf-comp-panel-body-background-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Icon area text/glyph colour (e.g. `.sf-panel-icon span`). Chains through the icon SYS role so it flips automatically on dark surfaces. */ --sf-comp-panel-icon-text-color: var(--sf-sys-color-icon, #222428); /* ── Accordion ───────────────────────────────────────────── */ /* Divider line drawn above/below an accordion item. Two variants: - `divider-color` (light grey #CACBCC) — used by `.sf-accordion-bottom`. - `divider-strong-color` (medium grey #848688) — used by the main `.sf-accordion`. Focused/expanded state swaps to brand-primary so the active divider reads as a brand accent. brand-primary flips automatically inside `.sf-dark-surface` (Obsidian → Lilac). The ref-bound dividers keep their hex in both modes. */ --sf-comp-accordion-divider-color: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-comp-accordion-divider-strong-color: var(--sf-ref-palette-neutral-400, #848688); --sf-comp-accordion-divider-focused-color: var(--sf-sys-color-brand-primary, #0B283D); /* Trigger (header) label text. Default uses the subtle text role; hover uses link-hover so the header reads as an interactive brand accent. Both are re-emitted in the `.sf-dark-surface` override block below so the `var()` re-resolves against the dark SYS values. */ --sf-comp-accordion-trigger-text-color: var(--sf-sys-color-text-subtle, #545556); --sf-comp-accordion-trigger-text-color-hover: var(--sf-sys-color-link-hover, #0B283D); /* Trigger (header) underline border-bottom. Default state is surface-default (invisible against a light accordion bg) — acts as a spacer/placeholder for the hover-state accent underline. Bound to `--sf-sys-color-surface-default` so it flips to the dark surface value inside `.sf-dark-surface`, keeping the "invisible until hover" pattern on both surfaces. Re-emitted in the `.sf-dark-surface` block below alongside the trigger text tokens. */ --sf-comp-accordion-trigger-border-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Hover-state accent underline below the trigger label. Paired with `--sf-comp-accordion-trigger-text-color-hover` so both text and underline flip together on `:hover`. Bound to `link-hover` so it flips Obsidian → Lilac inside `.sf-dark-surface`. Re-emitted in the dark-surface block below. */ --sf-comp-accordion-trigger-border-color-hover: var(--sf-sys-color-link-hover, #0B283D); /* ── Collapse list · Toggle icon (CollapseList.vue `.collapsible`) ── Large "＋"/"×" glyph used as an interactive expand/collapse toggle. Bound to action-primary so the toggle icon carries the same interactive-control identity as primary buttons and selected radio pills. Flips inside `.sf-dark-surface` (re-emitted below). */ --sf-comp-collapse-toggle-color: var(--sf-sys-color-action-primary, #0B283D); /* ── Alert · Global ──────────────────────────────────────── */ --sf-comp-alert-global-text-color: var(--sf-ref-palette-neutral-600, #222428); /* Muted code/reference-code sub-label inside alerts (e.g. `.ui-code` within `.ui-warning`). Low-emphasis 11px identifier text nested inside an already-styled alert container — bound to `--sf-sys-color-text-muted` (neutral-400) so it renders quieter than the primary alert text while staying on-palette. Re-emitted in `.sf-dark-surface` (text-muted flips #848688 → #A8AEB1 on dark). */ --sf-comp-alert-global-code-text-color: var(--sf-sys-color-text-muted, #848688); /* Foreground text colour for error-variant global alerts (paired with `--sf-comp-alert-global-error-background-color`). Bound to the SYS feedback-error role so the red hue stays consistent across inline error text, error icons, and error alert foregrounds. Does NOT flip in `.sf-dark-surface` — red carries WCAG-AA contrast on both light and dark surfaces. */ --sf-comp-alert-global-error-text-color: var(--sf-sys-color-feedback-error, #DB0A0A); --sf-comp-alert-global-error-background-color: var(--sf-ref-palette-red-50, #FEF0F0); --sf-comp-alert-global-warning-background-color: var(--sf-ref-palette-orange-50, #FFF4DA); --sf-comp-alert-global-info-background-color: var(--sf-ref-palette-blue-50, #DEE9F7); --sf-comp-alert-global-success-background-color: var(--sf-ref-palette-green-50, #E7F2ED); --sf-comp-alert-global-link-color: var(--sf-ref-palette-neutral-600, #222428); --sf-comp-alert-global-link-hover-color: var(--sf-sys-color-link-hover, #0B283D); /* ── Status pill (account-status badge) ──────────────────── */ /* Small status badge rendered next to an account-type label on the digital-cart confirmation page (`.nvp-value-account-type`). The pill carries a feedback-tinted fill that signals the account's provisioning state. Background slots are surface-tier tints; the foreground text is set inline by the consuming component (the pending/error variants share `--sf-sys-color-text-subtle`). The `pending` variant is a neutral tint — no semantic feedback colour, since "pending" is informational rather than success/warn/error. Bound to `surface-subtle` so it flips automatically inside `.sf-dark-surface` via the SYS role; the COMP token is re-emitted in the dark-surface block below. Mirrors the legacy `$simplii-neutral-200` (#F4F5F6) tint. */ --sf-comp-status-pill-pending-background-color: var(--sf-sys-color-surface-subtle, #F4F5F6); --sf-comp-status-pill-approved-background-color: var(--sf-sys-color-feedback-success, #469566); --sf-comp-status-pill-approved-text-color: var(--sf-ref-palette-neutral-100, #FFFFFF); /* ── Callout (fixed-dark promo/notice strip) ─────────────── */ /* Slim dark callout/promo strip that sits inside a light page (e.g. the offer-page `.header` strip with a white icon + bold white label). The strip is intentionally always dark regardless of the hosting page surface — the caller does not (and often cannot) wrap the strip in `.sf-dark-surface`, so this slot is ref-bound to neutral-700 and does NOT flip. Same "always-X-regardless-of- surface" pattern as `--sf-comp-skiplink-background-color` and `--sf-comp-button-primary-text-color`. Mirrors the legacy `$simplii-neutral-700` (#121418) background on these strips. Pair with a white foreground (e.g. `--sf-ref-palette-neutral-100`) for the icon + label on top. */ --sf-comp-callout-background-color: var(--sf-ref-palette-neutral-700, #121418); /* Body/label text sitting on the fixed-dark callout strip — used for the bold white label (and icon) inside the offer-page `.header` callout strip. Bound directly to `--sf-ref-palette-neutral-100` (fixed white) because the callout itself does NOT flip on dark (see `--sf-comp-callout-background-color` above) — there is no surface-aware SYS text role that stays white on both light and dark hosting surfaces, so this slot follows the same fixed-ref pattern as the callout background. Mirrors the legacy `$simplii-neutral-100` (#FFFFFF) foreground on these strips. */ --sf-comp-callout-text-color: var(--sf-ref-palette-neutral-100, #FFFFFF); /* Accent title text sitting on the fixed-dark callout strip — used for the heading/label that needs to pop against the always-dark neutral-700 fill (e.g. the funding-section "Fund your account" title on the confirmation page). Bound to brand-accent (Lilac) so the title carries the brand-accent identity rather than the primary CTA colour — preserves the legacy "lime-on-dark" accent intent within the rebrand palette. Lilac reads on both light and dark surfaces and brand-accent does NOT flip, so this stays Lilac regardless of the hosting page's surface (the callout itself is always dark by design and does not opt into `.sf-dark-surface`). */ --sf-comp-callout-title-color: var(--sf-sys-color-brand-accent, #D760FF); /* ── Input ───────────────────────────────────────────────── */ /* Border: default → hover → active → error */ --sf-comp-input-border-color: var(--sf-sys-color-input-border, #848688); --sf-comp-input-border-color-hover: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-input-border-color-active: var(--sf-ref-palette-neutral-700, #121418); /* DEPRECATED: keep temporarily for backward compatibility. Prefer `--sf-sys-color-feedback-error` directly at consumption sites. */ --sf-comp-input-border-color-error: var(--sf-sys-color-feedback-error, #DB0A0A); /* Focus aliases to the active border so a focused input picks up the same dark neutral-700 stroke as the active state (per Figma F26 input matrix). The two-tone `:focus-visible` ring still composes on top via `--sf-sys-color-focus-ring-{light,dark}`. */ --sf-comp-input-border-color-focus: var(--sf-comp-input-border-color-active, #121418); /* Focus box-shadow halo — the 3px soft-grey outer ring drawn around focused inputs (via `box-shadow: 0 0 0 3px`). Provides a visible buffer between the dark focus border and the surrounding white page surface. Paired with `--sf-comp-input-border-color-focus` (the dark inner stroke) to form a custom two-tone focus indicator. Bound to `--sf-sys-color-border` (neutral-300 #CACBCC) — reads on both white and obsidian surfaces without flipping. */ --sf-comp-input-box-shadow-color-focus: var(--sf-sys-color-border, #CACBCC); /* Background: default → hover → active → error */ --sf-comp-input-background-color: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-input-background-color-hover: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-input-background-color-active: var(--sf-sys-color-surface-default, #FFFFFF); --sf-comp-input-background-color-disabled: var(--sf-ref-palette-neutral-200, #F4F5F6); /* DEPRECATED: keep temporarily for backward compatibility. Prefer `--sf-sys-color-feedback-error-background-color` directly at consumption sites. */ --sf-comp-input-background-color-error: var(--sf-sys-color-feedback-error-background-color, #FEF0F0); /* DEPRECATED: keep temporarily for backward compatibility. Prefer explicit state token `--sf-comp-input-background-color-hover`. */ --sf-comp-input-background-color-focus: var(--sf-comp-input-background-color-hover, #F4F5F6); /* Text: default → hover → active → error */ --sf-comp-input-text-color: var(--sf-sys-color-text, #222428); --sf-comp-input-text-color-hover: var(--sf-comp-input-text-color, #222428); --sf-comp-input-text-color-active: var(--sf-comp-input-text-color, #222428); --sf-comp-input-text-color-error: var(--sf-comp-input-text-color, #222428); --sf-comp-input-text-color-disabled: var(--sf-ref-palette-neutral-400, #848688); /* Placeholder text colour. The mortgage-renewal `.ui-set-textbox` explicitly overrides the browser's default grey placeholder with a dark near-black value (`opacity: 1`) to maximise hint-text legibility. Bound to `--sf-sys-color-text` (neutral-600 #222428) so the placeholder reads at the same dark level as body text on light surfaces and flips to white on `.sf-dark-surface` inputs. The shift from legacy pure black (#000) to neutral-600 is an intentional on-palette rebrand delta; the visual difference is imperceptible in practice. Re-emitted in the `.sf-dark-surface` block below. */ --sf-comp-input-placeholder-color: var(--sf-sys-color-text, #222428); /* Label */ --sf-comp-input-label-color: var(--sf-sys-color-text, #222428); /* Label — focused/active state. Bound to action-primary so the label carries the interactive-state signal when the input wrapper gains focus (`.ui-focus`, `:focus-within`, etc.). Flips inside `.sf-dark-surface` via action-primary (re-emitted in the dark-surface block below). */ --sf-comp-input-label-color-focus: var(--sf-sys-color-action-primary, #0B283D); /* Label — error state. The design pattern uses font-weight:bold on the label to signal error rather than a colour change; the label text stays at the standard dark text colour (neutral-600). Chains through the base label token so the error state inherits any future surface-driven flip. */ --sf-comp-input-label-color-error: var(--sf-comp-input-label-color, #222428); /* ── Checkbox / Radio ((label text) ─────────────────────── */ --sf-comp-checkbox-text-color: var(--sf-sys-color-text, #222428); /* Default border for the custom checkbox control in its unchecked/resting state (`input[type="checkbox"]`). Bound to the input-border SYS role (neutral-400 #848688) so the checkbox border stays in sync with all other form-control strokes. Flips in `.sf-dark-surface` via the SYS role re-emission below. */ --sf-comp-checkbox-border-color: var(--sf-sys-color-input-border, #848688); /* Checked/active state fill AND border for the custom checkbox control (`.checkbox[aria-checked="true"]`, `input[type="checkbox"]:checked`). Both properties use this same token — the border = fill pattern is intentional in the active state so the control reads as a solid filled indicator. Bound to `--sf-sys-color-brand-primary` (Obsidian-900 #0B283D on light surfaces) so the checked state carries the canonical Simplii brand identity and auto-flips in `.sf-dark-surface` via the brand-primary role. Mirrors the legacy `$checkbox-active-bg-color` (was Simplii pink #DF0089). */ --sf-comp-checkbox-active-bg-color: var(--sf-sys-color-brand-primary, #0B283D); --sf-comp-radio-text-color: var(--sf-sys-color-text, #222428); /* Error-state question/heading text for radio groups (`.ui-error .question`). The question label stays at the standard dark text colour when the group enters an error state — the error is signalled by `font-weight: bold` rather than a colour change. Chains through the base radio text token so the error state inherits any future surface-driven flip. */ --sf-comp-radio-text-color-error: var(--sf-comp-radio-text-color, #222428); /* Indicator bar fill for inline radio groups in error state (`.inline-radio-group` connecting line, and the IE-only `background-image: linear-gradient(…)` fallback that replaces the pseudo-element bar in IE11). Bound to `--sf-sys-color-feedback-error` (red-500 #DB0A0A) so the bar carries the canonical error signal. Does NOT flip in `.sf-dark-surface` — same rationale as `--sf-sys-color-feedback-error`: red carries WCAG-AA contrast on both light and dark surfaces, and flipping it would dilute the "this group has an error" signal. */ --sf-comp-radio-indicator-color-error: var(--sf-sys-color-feedback-error, #DB0A0A); /* Default border for card-style radio buttons (`.ui-radiobutton` rendered as a bordered card with border-radius + padding). Bound to `--sf-sys-color-border` (neutral-300 #CACBCC) — the generic border role — so the idle radio card border matches the standard border weight across the system. Paired with `--sf-comp-radio-border-color-selected` (action-primary) which overrides on `:checked` / `.ui-checked`. `--sf-sys-color-border` re-resolves in `.sf-dark-surface` to the same neutral-300 hex, so no dark-surface re-emission is required. */ --sf-comp-radio-border-color: var(--sf-sys-color-border, #CACBCC); /* Selected-state text + border for pill-style radio buttons (e.g. UiRadioBtnSet `.selected`). The selected pill communicates the user's active choice via a coloured label + outline — interactive state → action-primary. Flips inside `.sf-dark-surface` (re-emitted below). */ --sf-comp-radio-text-color-selected: var(--sf-sys-color-action-primary, #0B283D); --sf-comp-radio-border-color-selected: var(--sf-sys-color-action-primary, #0B283D); /* Fill colour for the checkbox control in its checked/active state (`input[type="checkbox"]:checked` background). Bound to `--sf-sys-color-brand-primary` (Obsidian-900 #0B283D on light surfaces) so the checked checkbox carries the canonical brand fill — the same role used for all brand-primary surfaces. Flips inside `.sf-dark-surface` (brand-primary → Light Obsidian #E1EEF7) — re-emitted in the dark-surface block below. */ --sf-comp-checkbox-background-color-active: var(--sf-sys-color-brand-primary, #0B283D); /* Filled background of the custom checkbox control in its checked state (`[aria-checked="true"]`). Bound to `--sf-sys-color-brand-primary` (obsidian-900 #0B283D on light surfaces) — the standard brand fill that pairs with the white checkmark stroke below. Flips automatically inside `.sf-dark-surface` via the SYS role re-emission (→ obsidian-300 #E1EEF7); no explicit re-emission required. */ --sf-comp-checkbox-background-color-active: var(--sf-sys-color-brand-primary, #0B283D); /* SVG checkmark icon stroke rendered on the filled (brand-primary) checked checkbox background. Bound to `--sf-sys-color-text-on-brand-primary` (neutral-100 #FFFFFF on light surfaces) so the stroke always contrasts against the dark brand-primary fill. Flips inside `.sf-dark-surface` (brand-primary → Light Obsidian; stroke → Obsidian-900 for contrast) — re-emitted in the dark-surface block below. */ --sf-comp-checkbox-checkmark-color: var(--sf-sys-color-text-on-brand-primary, #FFFFFF); /* Fill colour of the custom checkbox control in its checked state (`input[type="checkbox"]:checked` background). Bound to `--sf-sys-color-action-primary` (Obsidian-900 #0B283D) — the same interactive-action role used by radio selected-state borders/labels — so the checked fill stays in sync with all other selection indicators across the form system. Flips inside `.sf-dark-surface` (re-emitted in the dark-surface block below). */ --sf-comp-checkbox-background-color-active: var(--sf-sys-color-action-primary, #0B283D); /* ── Inline radio · Indicator bar ───────────────────────── */ /* Error-state fill for the 2px underline indicator bar that runs below the inline-radio-group options (`.inline-radio-group::before` in its `.ui-error` scope). Bound to the canonical error red via `--sf-sys-color-feedback-error`. Does NOT flip in `.sf-dark-surface` — same always-X rationale as the feedback-error family: red carries WCAG-AA contrast on both light and dark surfaces, and flipping it would dilute the "this is an error" signal. NOT re-emitted in the dark-surface block. */ --sf-comp-inline-radio-indicator-background-color-error: var(--sf-sys-color-feedback-error, #DB0A0A); /* Unselected-state background for the pill-style "secondary" radiobutton variant (simplii-deposit-products-engine addon) — legacy $secondary-radiobutton-bg-color */ --sf-comp-radio-secondary-background-color: var(--sf-ref-palette-neutral-600, #222428); /* Unselected-state border for the pill-style "secondary" radiobutton variant (simplii-deposit-products-engine addon) — legacy $secondary-radiobutton-border-color */ --sf-comp-radio-secondary-border-color: var(--sf-ref-palette-neutral-600, #222428); /* Selected/checked-state background for the pill-style "secondary" radiobutton variant, inverts to light fill (simplii-deposit-products-engine addon) — legacy $secondary-radiobutton-active-bg-color */ --sf-comp-radio-secondary-background-color-selected: var(--sf-sys-color-surface-default, #FFFFFF); /* ── Progress (step indicator) ───────────────────────────── */ /* Active/filled step background. Bound to brand-accent (Lilac) so the filled portion of the progress bar carries the accent identity rather than the primary CTA colour. Stays Lilac on both light and dark surfaces (brand-accent does not flip). */ --sf-comp-stepper-track-background-color-active: var(--sf-sys-color-brand-accent, #D760FF); /* Inactive/track background. Bound to surface-subtle so the unfilled portion of the progress bar reads as a near-white channel against the page surface. */ --sf-comp-stepper-track-background-color: var(--sf-sys-color-surface-subtle, #F4F5F6); /* ── Loader (spinner indicator) ──────────────────────────── */ /* Color of the animated indicator dots/bars in the global loading spinner (e.g. the "dot collision" preloader shown by `window.OLBMessenger.displayLoadingSpinner()` while a cross-app API call is in flight). Bound to brand-accent (Lilac) so the spinner carries the accent identity rather than the primary CTA colour — same rationale as `--sf-comp-progress-step-active-*`. Used for both `background-color` and `color` on the indicator element since the dots are a single-colour visual. Stays Lilac on both light and dark surfaces (brand-accent does not flip). */ --sf-comp-loader-indicator-color: var(--sf-sys-color-brand-accent, #D760FF); /* ── Modal / dialog scrim ────────────────────────────────── */ /* Modal surface (the dialog itself). Bound to surface-default so the modal background flips inside `.sf-dark-surface`. */ --sf-comp-modal-background-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Outer border stroke of a modal/dialog container (e.g. session-timeout dialog, confirmation dialogs). Bound to `--sf-sys-color-border` (neutral-300 #CACBCC) so it tracks the generic border role and flips inside `.sf-dark-surface` via the SYS re-declaration. Re-emitted in the dark-surface block below. */ --sf-comp-modal-border-color: var(--sf-sys-color-border, #CACBCC); /* Title/heading text inside a modal or dialog (e.g. BaseMessageDialog `.header`, session-timeout dialog heading). Bound to `--sf-sys-color-text` (neutral-600) so it tracks the standard body-text role and flips to white inside `.sf-dark-surface`. Re-emitted in the dark-surface block below. */ --sf-comp-modal-title-text-color: var(--sf-sys-color-text, #222428); /* Body/paragraph text inside a modal or dialog overlay (e.g. `.ui-popover-modal p`, `.sf-modal .content-body`). Companion slot to `--sf-comp-modal-title-text-color` for non-heading content copy. Bound to `--sf-sys-color-text` (neutral-600) so it flips to white inside `.sf-dark-surface`. Re-emitted in the dark-surface block below. */ --sf-comp-modal-text-color: var(--sf-sys-color-text, #222428); /* Popup / dropdown surface (e.g. autocomplete results menu). */ --sf-comp-popup-background-color: var(--sf-sys-color-surface-default, #FFFFFF); /* Border stroke of a popup/tooltip floating panel (e.g. `.ui-popover-content`, autocomplete dropdown). Bound to `--sf-sys-color-border` (neutral-300) so it tracks the generic border role and flips inside `.sf-dark-surface` via the SYS re-declaration. Re-emitted in the dark-surface block below. */ --sf-comp-popup-border-color: var(--sf-sys-color-border, #CACBCC); /* Default text colour for popup/dropdown option items (e.g. autocomplete listbox `li.dropdown-item`). Bound to text-subtle so the idle options render in a quiet mid-grey against the white popup surface, while the active/hovered option flips to the high-contrast `--sf-comp-popup-option-text-color-active`. Flips inside `.sf-dark-surface` via text-subtle (re-emitted below). */ --sf-comp-popup-option-text-color: var(--sf-sys-color-text-subtle, #545556); /* Highlight fill for selected/active popup options (e.g. autocomplete listbox items). */ --sf-comp-popup-option-background-color-active: var(--sf-sys-color-action-primary, #0B283D); /* Foreground for selected/active popup options on the active popup fill. */ --sf-comp-popup-option-text-color-active: var(--sf-sys-color-text-on-brand-primary, #FFFFFF); /* Generic popover / dropdown drop-shadow. Low-alpha neutral-300 so it reads on a light surface without going opaque. */ --sf-comp-popup-shadow-color: rgba(var(--sf-ref-palette-neutral-300-rgb, 202, 203, 204), 0.7); /* ── Tabs ─────────────────────────────────────────────────── */ --sf-comp-tabs-list-border-bottom-color: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-comp-tab-border-bottom-color-active: var(--sf-sys-color-brand-primary, #0B283D); --sf-comp-tab-text-color: var(--sf-sys-color-text, #222428); --sf-comp-tab-text-color-hover: var(--sf-sys-color-brand-primary, #0B283D); /* ── Skiplink (a11y "skip to content" pill) ─────────────── The masthead skiplink is hidden off-screen until it receives keyboard focus, at which point it appears as a high-contrast pill anchored to the top-left of the page. The hosting masthead is often dark (`.sf-dark-surface`), so this slot is bound directly to the neutral-100 ref — it must stay white regardless of surface so the focused affordance always reads. Same always-white rationale as `--sf-comp-button-primary-text-color`. */ --sf-comp-skiplink-background-color: var(--sf-ref-palette-neutral-100, #FFFFFF); /* Semi-transparent backdrop drawn behind a modal dialog. Uses neutral cool-black (not obsidian) so the brand identity stays in the modal contents, not the dim layer behind it. Alpha is baked in here so consumers don't have to call Sass `rgba()` on a CSS custom property (which can't be done). */ --sf-comp-modal-scrim-background-color: rgba(var(--sf-ref-palette-neutral-700-rgb, 18, 20, 24), 0.6); /* Session-expired scrim — fully opaque surface-default. Used by post-expiry session-timeout dialogs (and any other terminal / post-session state) where the UI underneath must be completely covered rather than dimmed. Bound to `--sf-sys-color-surface-default` so it flips with the dark-surface override (white on light, obsidian on dark). NO alpha — this is intentionally opaque. */ --sf-comp-modal-scrim-background-color-expired: var(--sf-sys-color-surface-default, #FFFFFF); /* Destructive-action zone background — used for the action-bar container (e.g. `.the-action-bar .button-group`) inside a destructive-confirmation dialog (e.g. CancelApplicationDialog). The entire action-bar container is filled with the error red to signal that this zone is a "danger area" before the user confirms a destructive action. Bound to `--sf-sys-color-feedback-error` (full-saturation red) so the danger signal stays unambiguous. Does NOT flip in `.sf-dark-surface` — same rationale as the feedback-error family: red carries WCAG-AA contrast on both light and dark surfaces, and flipping it would dilute the "danger" signal. Legacy `$simplii-red` (#DB0025) is replaced with the canonical error red (#DB0A0A); the minor delta is intentional. */ --sf-comp-dialog-action-danger-background-color: var(--sf-sys-color-feedback-error, #DB0A0A); /* Hover-state fill for the ::-webkit-scrollbar-thumb inside a dialog that uses a fixed-dark (callout) track. The thumb rests at white (`--sf-sys-color-surface-default`) against the always-dark `--sf-comp-callout-background-color` track (neutral-700). On hover the thumb must darken just enough to show interaction — one palette step below white (neutral-300 #CACBCC). Ref-bound for a fixed-surface hover step; does NOT need to flip in `.sf-dark-surface` because the callout track it lives against is itself fixed-dark and never flips. Mirrors `darken(#FFFFFF, 20%)` ≈ #CCCCCC from legacy SCSS; the ~2-unit delta to neutral-300 is imperceptible and intentional palette alignment. Added: 2026-08-03 (simplii-banking-ember _trade-offer-dialog.scss:334). */ --sf-comp-dialog-scrollbar-thumb-background-color-hover: var(--sf-ref-palette-neutral-300, #CACBCC); /* ── product-forms-app / simplii-account-open — app-specific slots ────── These tokens were added during the F26 rebrand migration of simplii-account-open. They cover surfaces and accents that have no exact SYS-tier equivalent and are too app-specific to belong to the generic SYS tier. They are fixed-surface (ref-bound) so they do NOT need re-emission in the `.sf-dark-surface` block. Added: 2026-06-25. */ /* Full-page body backdrop for form applications that place a white form card on a dark (neutral-700) page background. Ref-bound so the dark backdrop does not flip inside `.sf-dark-surface`. Mirrors legacy $page-secondary-background (#121418). */ --sf-comp-form-backdrop-background-color: var(--sf-ref-palette-neutral-700, #121418); /* Dark section background for the "terms and conditions" / consent label strip inside account-open forms (`.terms-consent label`, `.rates_and_fees_consent`). Uses neutral-600 to match the legacy $terms-background-color (#222428) tone exactly. Ref-bound; does NOT flip in `.sf-dark-surface`. Pair with `--sf-comp-callout-text-color` (neutral-100) for the white foreground text on top. */ --sf-comp-form-terms-background-color: var(--sf-ref-palette-neutral-600, #222428); /* ── Portfolio chart slices (PortfolioGraph legend swatches) ────────── Three-colour chart palette used in the Mutual Fund portfolio pie charts. Replaces legacy pink (#DF0089 / #FF0099) and black (#121418) slices with the F26 rebrand palette. income — the primary / dominant portfolio segment (was pink). Bound to brand-primary (Obsidian-900) so the dominant segment carries the canonical Simplii identity. Flips inside `.sf-dark-surface` via brand-primary (Obsidian → Lilac). */ --sf-comp-chart-income-color: var(--sf-sys-color-brand-primary, #0B283D); /* balanced — mid-weight portfolio segment (was teal/grey). Bound to text-muted (Neutral-400) for a subdued mid-tone. Ref-bound; does NOT flip in `.sf-dark-surface`. */ --sf-comp-chart-balanced-color: var(--sf-sys-color-text-muted, #848688); /* growth — the accent / secondary portfolio segment (was black). Bound to brand-accent (Lilac) so the growth segment pops as a brand-accent highlight. Stays Lilac on both surfaces (brand-accent does NOT flip). */ --sf-comp-chart-growth-color: var(--sf-sys-color-brand-accent, #D760FF); /* Dark consent-panel background for the personal-information "consent" card in deposit-products-engine chequing account-open flow (`.consent` block, not the full-page backdrop). Legacy $default-color used as background-color here. Ref-bound to neutral-700, matching --sf-comp-form-backdrop-background-color's hex by coincidence but kept as a distinct component token since this is an inline panel/card, not a full-page backdrop, and distinct from --sf-comp-form-terms-background-color (#222428) used for account-open terms strips elsewhere. */ --sf-comp-form-consent-background-color: var(--sf-ref-palette-neutral-700, #121418); /* Circular badge background for the "current step number" indicator (`.current-step-number` in the step indicator component). Bound to brand-accent (Lilac) to carry the F26 accent identity; mirrors the legacy $step-number-bg-color (#83BFBA teal) in intent. Does NOT flip in `.sf-dark-surface` — brand-accent stays Lilac on both surfaces. */ --sf-comp-step-indicator-number-background-color: var(--sf-sys-color-brand-accent, #D760FF); /* Placeholder / watermark colour for the `.sign-x` element in the e-signature input component (`_form-e-signature-input.scss`). The "X" appears as a light guide mark before the user draws their signature. Bound to obsidian-300 (light obsidian tint) to maintain a very light, unobtrusive appearance on a white canvas, replacing the legacy light- blue placeholder $light-grey (#B0DBF8). Ref-bound; intentional palette delta from the legacy hex. */ --sf-comp-esignature-placeholder-color: var(--sf-ref-palette-obsidian-300, #E1EEF7); /* ── Remittance data ─────────────────────────────────────── */ /* Strong structural separator drawn between consecutive remittance-data sections (structured following structured, or unstructured preceding structured). Both `$color` and `$color2` args to the `separator` mixin are set to this token so the dashed linear-gradient renders as a solid-colour dashed strip of this hue. Intentionally darker than the standard per-section divider (default `@include separator` call uses `$default--color-08` #CACBCC) so this separator creates a strong visual block boundary between adjacent remittance data groups. Bound to `--sf-sys-color-text` (neutral-600 #222428) so the separator carries the same visual weight as body text on light surfaces, and flips to white on `.sf-dark-surface` — preserving the "stronger than surrounding dividers" intent on dark surfaces too. Legacy value was `$default--color-27` (#222944 dark navy); the ~3-unit hue shift to neutral-600 (#222428) is an intentional on-palette delta, imperceptible in practice. Re-emitted in `.sf-dark-surface` below so the flip activates for any future dark-surface context. */ --sf-comp-remittance-section-divider-color: var(--sf-sys-color-text, #222428); } /* ============================================================ `.sf-dark-surface` — scoped dark-surface override ============================================================ Apply on any element rendered against a dark surface (header, footer, hero, promo card, etc.) — or on the ``/app-root element to flip the entire app into a full dark-mode treatment. Re-binds every SYS role token that has a meaningful on-dark variant so the wrapped region's BACKGROUND, descendant content, feedback states, focus ring and interactive controls all stay visually consistent without per-component overrides.
…
… Surface / content / brand / link / icon / border / focus / action roles all flip here. Feedback fg colours (red/green/orange) keep their hue (semantics must remain unambiguous) but their tint backgrounds (`-bg`) flip to dark, low-saturation variants so they sit on an Obsidian surface without clashing. Comp tokens (comp/*) that resolve to a SYS role do NOT follow the flip automatically — CSS substitutes `var()` at the declaring element's computed-value time, so a COMP token declared only at `:root` bakes in the light SYS value. To make them follow this scope, every affected COMP token is re-emitted in the "COMP re-declarations" block below (page bg, card bg, input bg, secondary-button bg, header/footer chrome, primary-button bg, etc.). Comp tokens that are bound to a REF directly (e.g. `--sf-comp-button-primary-text` → neutral-100) intentionally do not follow the scope and are not re-emitted. ============================================================ */ .sf-dark-surface { /* Surface — the wrapped region's own background flips to dark, so anything bound to `--sf-sys-color-surface-default` (page bg, card bg, input bg, secondary-button bg, etc.) re-resolves to the dark variant within this scope. */ --sf-sys-color-surface-default: var(--sf-ref-palette-obsidian-900, #0B283D); --sf-sys-color-surface-subtle: var(--sf-ref-palette-obsidian-700, #1F4D70); /* Text */ --sf-sys-color-text: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-text-subtle: #DCE1E3; /* Dark-surface override for the muted text role — one step quieter than `--sf-sys-color-text-subtle` (#DCE1E3) on dark, mirroring the light-mode neutral-500/neutral-400 step. Inlined hex (no matching ref slot) so the parent/child caption contrast is preserved when a helper `

` lives under a `text-subtle` container on a dark surface. */ --sf-sys-color-text-muted: #A8AEB1; /* On dark surfaces, brand-primary becomes Light Obsidian, so the foreground sitting on top must flip to a dark text colour for contrast. Rebind to Obsidian-900. */ --sf-sys-color-text-on-brand-primary: var(--sf-ref-palette-obsidian-900, #0B283D); /* Icon */ --sf-sys-color-icon: var(--sf-ref-palette-neutral-100, #FFFFFF); /* Border */ --sf-sys-color-border: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-sys-color-divider-line: var(--sf-ref-palette-neutral-400, #848688); --sf-sys-color-divider-line-focused: var(--sf-sys-color-brand-primary, #D760FF); --sf-sys-color-heading-border: var(--sf-sys-color-brand-primary, #D760FF); --sf-sys-color-input-border: var(--sf-ref-palette-neutral-400, #848688); /* Link */ --sf-sys-color-link: var(--sf-sys-color-text, #FFFFFF); --sf-sys-color-link-decoration: var(--sf-sys-color-link, #FFFFFF); --sf-sys-color-link-hover: var(--sf-ref-palette-lilac-500, #D760FF); --sf-sys-color-link-decoration-hover: var(--sf-sys-color-link-hover, #D760FF); /* Feedback — foreground colours keep their hue (red/green/orange read on both light and dark surfaces, and flipping them would dilute the semantic signal). The tint backgrounds DO flip: the light pastel tints used on white surfaces clash on Obsidian, so we substitute low-alpha overlays of the same hue that sit cleanly on a dark background while preserving the signal. */ --sf-sys-color-feedback-error: var(--sf-ref-palette-red-500, #DB0A0A); --sf-sys-color-feedback-error-hover: var(--sf-ref-palette-red-700, #AB0808); --sf-sys-color-feedback-error-background-color: rgba(219, 10, 10, 0.18); --sf-sys-color-feedback-success: var(--sf-ref-palette-green-500, #469566); --sf-sys-color-feedback-success-background-color: var(--sf-ref-palette-green-50, #E7F2ED); --sf-sys-color-feedback-warning: var(--sf-ref-palette-orange-500, #C17200); --sf-sys-color-feedback-warning-background-color: rgba(193, 114, 0, 0.20); --sf-sys-color-feedback-info: var(--sf-ref-palette-blue-500, #0767A8); --sf-sys-color-feedback-info-background-color: var(--sf-ref-palette-blue-50, #DEE9F7); /* Focus ring — light/dark roles swap on dark surfaces so the inner halo is always the lower-contrast neutral against the surrounding surface and the outer ring is the higher-contrast neutral. On light surfaces: light halo (white) + dark outer (near-black). On dark surfaces: dark halo (near-black) + light outer (white). This keeps the two-tone indicator's visual hierarchy consistent regardless of surface. */ --sf-sys-color-focus-ring-dark: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-focus-ring-light: var(--sf-ref-palette-neutral-700, #121418); /* Brand · Primary flips Obsidian → Light Obsidian so brand-coloured text/icons stay legible on dark surfaces. Brand · Accent does not flip (Lilac reads on both). */ --sf-sys-color-brand-primary: var(--sf-ref-palette-obsidian-300, #E1EEF7); /* Action — buttons and CTAs sit on dark surfaces in this scope, so the Obsidian fills used on light pages would disappear. Per Figma F26, primary/secondary/tertiary all flip to a WHITE + neutral-grey family on dark surfaces (NOT Lilac — brand-accent stays reserved for non-CTA accents like progress, loader, and link-hover so the CTA hue and the brand-accent hue don't collide). Primary fills with white, hovers to a near-white (neutral-25 / #F4F5F6) and presses darker still (neutral-50 / #E7EBED). Secondary + Tertiary are outline-style: transparent fill + 2px white stroke + white label by default; on hover they fill near- white; on active (focused) they fill neutral-300. The stroke stays white across all states so the control's edge never dissolves into the obsidian surface. Disabled moves to a mid neutral so the disabled fill reads as muted against the obsidian surface (not lighter than the bg). */ --sf-sys-color-action-primary: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-action-primary-hover: var(--sf-ref-palette-neutral-200, #F4F5F6); /* Primary-active fill — Figma F26 neutral-50 (#E7EBED), one step darker than primary-hover (neutral-25 / #F4F5F6) and lighter than neutral-300 to give the pressed-state a perceptible tint. Inlined because no ref slot in our 100/200/250/300/… ladder matches this hex exactly. */ --sf-sys-color-action-primary-active: #E7EBED; --sf-sys-color-action-secondary: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-action-secondary-hover: var(--sf-ref-palette-neutral-200, #F4F5F6); --sf-sys-color-action-secondary-active: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-sys-color-action-tertiary: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-sys-color-action-tertiary-hover: var(--sf-ref-palette-neutral-200, #F4F5F6); --sf-sys-color-action-tertiary-active: var(--sf-ref-palette-neutral-300, #CACBCC); --sf-sys-color-action-disabled-background-color: var(--sf-ref-palette-neutral-500, #545556); --sf-sys-color-action-disabled-text-color: var(--sf-ref-palette-neutral-300, #CACBCC); /* ── COMP re-declarations ──────────────────────────────────── Every COMP token whose `:root` declaration internally references a flipping SYS role must be re-emitted here. CSS substitutes `var()` at the declaring element, then INHERITS the resolved value to descendants — so a COMP token declared only at `:root` bakes in the light SYS value and descendants under `.sf-dark-surface` would still see the light value (the SYS override would be ignored for COMP-consumers like `.footer-section { background: var(--sf-comp-footer-background-color) }`). Re-declaring the COMP tokens here forces `var()` re-substitution against this scope's flipped SYS values. ──────────────────────────────────────────────────────────── */ /* App chrome */ --sf-comp-header-background-color: var(--sf-sys-color-surface-default, #061724); /* Footer renders on the same obsidian-900 page surface; bound to surface-default (NOT surface-subtle) so it stays obsidian-900 even if the subtle palette retunes. */ --sf-comp-footer-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-footer-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-page-background-color: var(--sf-sys-color-surface-default, #061724); /* Logo — stays Lilac on dark chrome (brand-accent does not flip). Re-emitted here for consistency with the other chrome COMP tokens; hosts overriding logo color at the dark scope can do so by writing to this token under `.sf-dark-surface` themselves. */ --sf-comp-logo-color: var(--sf-sys-color-brand-accent, #D760FF); /* Button · Primary — white fill, dark label on dark surface (Figma F26). Text colour is explicitly rebound to neutral-700 here because the light-mode COMP token bakes in white-on-dark, which would be invisible on a white fill. */ --sf-comp-button-primary-background-color: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-button-primary-border-color: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-button-primary-text-color: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-primary-background-color-hover: var(--sf-sys-color-action-primary-hover, #F4F5F6); --sf-comp-button-primary-border-color-hover: var(--sf-sys-color-action-primary-hover, #F4F5F6); --sf-comp-button-primary-text-color-hover: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-primary-background-color-active: var(--sf-sys-color-action-primary-active, #E7EBED); --sf-comp-button-primary-border-color-active: var(--sf-sys-color-action-primary-active, #E7EBED); --sf-comp-button-primary-text-color-active: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-primary-background-color-loading: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-button-primary-border-color-loading: var(--sf-sys-color-action-primary, #FFFFFF); /* Button · Secondary — transparent fill, white stroke, white label. On hover/active the fill flips to a near-white / neutral-300, the label flips to neutral-700 for legibility against the light fill, and the STROKE stays white across all states (per Figma F26 — the border tracks the action-secondary default, not the per-state fill, unlike the light-mode behaviour where border = bg on hover). */ --sf-comp-button-secondary-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-button-secondary-background-color-hover: var(--sf-sys-color-action-secondary-hover, #F4F5F6); --sf-comp-button-secondary-background-color-active: var(--sf-sys-color-action-secondary-active, #CACBCC); --sf-comp-button-secondary-text-color: var(--sf-sys-color-action-secondary, #FFFFFF); --sf-comp-button-secondary-text-color-hover: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-secondary-text-color-active: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-secondary-border-color: var(--sf-sys-color-action-secondary, #FFFFFF); --sf-comp-button-secondary-border-color-hover: var(--sf-sys-color-action-secondary, #FFFFFF); --sf-comp-button-secondary-border-color-active: var(--sf-sys-color-action-secondary, #FFFFFF); /* Button · Tertiary — same visual treatment as Secondary on dark surfaces per Figma F26 (transparent default, white stroke, white label; hover/active fill to neutral-200/neutral-300 with stroke remaining white). */ --sf-comp-button-tertiary-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-button-tertiary-text-color: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-border-color: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-background-color-hover: var(--sf-sys-color-action-tertiary-hover, #F4F5F6); --sf-comp-button-tertiary-text-color-hover: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-border-color-hover: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-background-color-active: var(--sf-sys-color-action-tertiary-active, #CACBCC); --sf-comp-button-tertiary-text-color-active: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-border-color-active: var(--sf-sys-color-action-tertiary, #FFFFFF); /* Button · Tertiary Alternative — transparent fill, white stroke + label on dark surfaces. */ --sf-comp-button-tertiary-alt-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-button-tertiary-alt-text-color: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-alt-border-color: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-alt-background-color-hover: var(--sf-sys-color-action-tertiary-hover, #F4F5F6); --sf-comp-button-tertiary-alt-text-color-hover: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-alt-border-color-hover: var(--sf-sys-color-action-tertiary, #FFFFFF); --sf-comp-button-tertiary-alt-background-color-active: var(--sf-sys-color-action-tertiary-active, #CACBCC); --sf-comp-button-tertiary-alt-text-color-active: var(--sf-ref-palette-neutral-700, #121418); --sf-comp-button-tertiary-alt-border-color-active: var(--sf-sys-color-action-tertiary, #FFFFFF); /* Button · Disabled — neutral-500 fill + neutral-300 label on dark. */ --sf-comp-button-disabled-background-color: var(--sf-sys-color-action-disabled-background-color, #545556); --sf-comp-button-disabled-border-color: var(--sf-sys-color-action-disabled-background-color, #545556); --sf-comp-button-disabled-text-color: var(--sf-sys-color-action-disabled-text-color, #CACBCC); /* Card */ --sf-comp-card-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-card-border-color: var(--sf-sys-color-border, #CACBCC); --sf-comp-card-background-color-active: var(--sf-sys-color-surface-subtle, #0B283D); /* card-background-subtle + hover-card-shadow are ref-bound (neutral-200, cool-black/22%) so they don't flip here — intentionally not re-emitted. */ /* Panel — header/body slots resolve through flipping SYS roles; border is a panel-specific dark stroke and is re-emitted here. */ --sf-comp-panel-header-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-panel-header-background-color: var(--sf-sys-color-surface-subtle, #0B283D); --sf-comp-panel-border-color: var(--sf-ref-palette-neutral-500, #545556); --sf-comp-panel-body-background-color: var(--sf-sys-color-surface-default, #061724); /* Status pill — pending background tracks surface-subtle, so re-emit here to pick up the dark-surface flip (neutral-200 → obsidian-900). */ --sf-comp-status-pill-pending-background-color: var(--sf-sys-color-surface-subtle, #0B283D); /* Input */ /* Border: default → hover → active → error */ --sf-comp-input-border-color: var(--sf-sys-color-input-border, #848688); --sf-comp-input-border-color-hover: var(--sf-ref-palette-neutral-100, #FFFFFF); --sf-comp-input-border-color-active: var(--sf-ref-palette-neutral-100, #FFFFFF); /* DEPRECATED: keep temporarily for backward compatibility. Prefer `--sf-sys-color-feedback-error` directly at consumption sites. */ --sf-comp-input-border-color-error: var(--sf-sys-color-feedback-error, #DB0A0A); /* Background: default → hover → active → error */ --sf-comp-input-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-input-background-color-hover: var(--sf-sys-color-surface-subtle, #0B283D); --sf-comp-input-background-color-active: var(--sf-sys-color-surface-subtle, #0B283D); /* DEPRECATED: keep temporarily for backward compatibility. Prefer `--sf-sys-color-feedback-error-background-color` directly at consumption sites. */ --sf-comp-input-background-color-error: var(--sf-sys-color-feedback-error-background-color, rgba(219, 10, 10, 0.18)); /* DEPRECATED: keep temporarily for backward compatibility. Prefer explicit state token `--sf-comp-input-background-color-hover`. */ --sf-comp-input-background-color-focus: var(--sf-comp-input-background-color-hover, #0B283D); /* Text: default → hover → active → error */ --sf-comp-input-text-color: var(--sf-sys-color-text-subtle, #DCE1E3); --sf-comp-input-text-color-hover: var(--sf-comp-input-text-color, #DCE1E3); --sf-comp-input-text-color-active: var(--sf-comp-input-text-color, #DCE1E3); --sf-comp-input-text-color-error: var(--sf-comp-input-text-color, #DCE1E3); --sf-comp-input-placeholder-color: var(--sf-sys-color-text, #FFFFFF); /* Label */ --sf-comp-input-label-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-input-label-color-focus: var(--sf-sys-color-action-primary, #FFFFFF); /* Checkbox / Radio — label text re-emit (sys-text flips). */ --sf-comp-checkbox-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-checkbox-border-color: var(--sf-sys-color-input-border, #848688); --sf-comp-checkbox-background-color-active: var(--sf-sys-color-brand-primary, #E1EEF7); --sf-comp-radio-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-radio-text-color-selected: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-radio-border-color-selected: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-checkbox-checkmark-color: var(--sf-sys-color-text-on-brand-primary, #0B283D); --sf-comp-checkbox-background-color-active: var(--sf-sys-color-action-primary, #FFFFFF); /* Modal / Tabs — re-emit because they consume flipping SYS roles. */ --sf-comp-modal-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-modal-border-color: var(--sf-sys-color-border, #CACBCC); --sf-comp-modal-title-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-modal-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-modal-scrim-background-color-expired: var(--sf-sys-color-surface-default, #061724); --sf-comp-popup-background-color: var(--sf-sys-color-surface-default, #061724); --sf-comp-popup-border-color: var(--sf-sys-color-border, #CACBCC); --sf-comp-popup-option-text-color: var(--sf-sys-color-text-subtle, #DCE1E3); --sf-comp-popup-option-background-color-active: var(--sf-sys-color-action-primary, #FFFFFF); --sf-comp-popup-option-text-color-active: var(--sf-sys-color-text-on-brand-primary, #0B283D); --sf-comp-tab-border-bottom-color-active: var(--sf-sys-color-brand-primary, #D760FF); --sf-comp-tab-text-color: var(--sf-sys-color-text, #FFFFFF); --sf-comp-tab-text-color-hover: var(--sf-sys-color-brand-primary, #D760FF); /* Accordion — trigger text and focused divider consume flipping SYS roles (text-subtle, link-hover, brand-primary) so they must be re-emitted here for `var()` to re-resolve against the dark-surface SYS values. The two ref-bound dividers (`divider-color`, `divider-strong-color`) intentionally keep their light-context hex on both surfaces — they're not re-emitted. */ --sf-comp-accordion-trigger-text-color: var(--sf-sys-color-text-subtle, #DCE1E3); --sf-comp-accordion-trigger-text-color-hover: var(--sf-sys-color-link-hover, #D760FF); --sf-comp-accordion-trigger-border-color: var(--sf-sys-color-surface-default, #0B283D); --sf-comp-accordion-trigger-border-color-hover: var(--sf-sys-color-link-hover, #D760FF); --sf-comp-accordion-divider-focused-color: var(--sf-sys-color-brand-primary, #E1EEF7); /* Collapse list toggle — re-emitted because action-primary flips Obsidian → white on dark surfaces. */ --sf-comp-collapse-toggle-color: var(--sf-sys-color-action-primary, #FFFFFF); /* Progress — active fill is brand-accent (Lilac) which does not flip, so this re-declaration is technically not required for correctness; it's kept for symmetry with the rest of the COMP re-declarations block. Track stays surface-subtle (flips to obsidian-900 here). */ --sf-comp-stepper-track-background-color-active: var(--sf-sys-color-brand-accent, #D760FF); --sf-comp-stepper-track-background-color: var(--sf-sys-color-surface-subtle, #0B283D); /* Alert — code sub-label re-emit: text-muted flips on dark (#848688 → #A8AEB1). */ --sf-comp-alert-global-code-text-color: var(--sf-sys-color-text-muted, #A8AEB1); /* Remittance data — strong section separator: text flips to white on dark surfaces, preserving the "visually stronger than standard dividers" intent on obsidian backgrounds. */ --sf-comp-remittance-section-divider-color: var(--sf-sys-color-text, #FFFFFF); } /* ============================================================ COMP — Image / Icon tokens (uikit asset URLs) ============================================================ All asset paths point to the centralized image dir served at /ebm-resources/public/simplii/themes/default/images/uikit/. The `-image-url` / `-image-dark-mode-url` pair holds the raw URL. The switching token (e.g. `--sf-comp-checkbox-icon-default`) defaults to the light URL at :root, and is re-bound under `.sf-dark-surface` to the dark URL where one exists. Tokens without a dark variant are declared once at :root. ============================================================ */ :root, .sf-light-mode, .sf-light-surface { /* Chevron icons */ --sf-comp-icon-chevron-left-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/chevron-left-icon.svg'); --sf-comp-icon-chevron-right-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/chevron-right-icon.svg'); --sf-comp-icon-chevron-left: var(--sf-comp-icon-chevron-left-url); --sf-comp-icon-chevron-right: var(--sf-comp-icon-chevron-right-url); /* Checkbox state icons */ --sf-comp-checkbox-icon-default-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/default.svg'); --sf-comp-checkbox-icon-checked-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/checked.svg'); --sf-comp-checkbox-icon-hover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/hover.svg'); --sf-comp-checkbox-icon-default-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/default-darkmode.svg'); --sf-comp-checkbox-icon-checked-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/checked-darkmode.svg'); --sf-comp-checkbox-icon-hover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/hover-darkmode.svg'); --sf-comp-checkbox-icon-default: var(--sf-comp-checkbox-icon-default-url); --sf-comp-checkbox-icon-checked: var(--sf-comp-checkbox-icon-checked-url); --sf-comp-checkbox-icon-hover: var(--sf-comp-checkbox-icon-hover-url); /* Error state — no dark variant asset; same icon on both surfaces. */ --sf-comp-checkbox-icon-error-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/checkbox/error.svg'); --sf-comp-checkbox-icon-error: var(--sf-comp-checkbox-icon-error-url); /* Dropdown arrow icon */ --sf-comp-dropdown-icon-arrow-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/dropdown-arrow-icon.svg'); --sf-comp-dropdown-icon-arrow-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/dropdown-arrow-icon-darkmode.svg'); --sf-comp-dropdown-icon-arrow: var(--sf-comp-dropdown-icon-arrow-url); /* Radio button state icons (regular) */ --sf-comp-radio-icon-default-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/default.svg'); --sf-comp-radio-icon-checked-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/checked.svg'); --sf-comp-radio-icon-error-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/error.svg'); --sf-comp-radio-icon-hover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/hover.svg'); --sf-comp-radio-icon-default-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/default-darkmode.svg'); --sf-comp-radio-icon-checked-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/checked-darkmode.svg'); --sf-comp-radio-icon-hover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/hover-darkmode.svg'); --sf-comp-radio-icon-default: var(--sf-comp-radio-icon-default-url); --sf-comp-radio-icon-checked: var(--sf-comp-radio-icon-checked-url); --sf-comp-radio-icon-error: var(--sf-comp-radio-icon-error-url); --sf-comp-radio-icon-hover: var(--sf-comp-radio-icon-hover-url); /* Radio button state icons (small) */ --sf-comp-radio-small-icon-default-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/default-small.svg'); --sf-comp-radio-small-icon-checked-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/checked-small.svg'); --sf-comp-radio-small-icon-error-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/error-small.svg'); --sf-comp-radio-small-icon-hover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/hover-small.svg'); --sf-comp-radio-small-icon-default-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/default-small-darkmode.svg'); --sf-comp-radio-small-icon-checked-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/checked-small-darkmode.svg'); --sf-comp-radio-small-icon-hover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/radio-button/hover-small-darkmode.svg'); --sf-comp-radio-small-icon-default: var(--sf-comp-radio-small-icon-default-url); --sf-comp-radio-small-icon-checked: var(--sf-comp-radio-small-icon-checked-url); --sf-comp-radio-small-icon-error: var(--sf-comp-radio-small-icon-error-url); --sf-comp-radio-small-icon-hover: var(--sf-comp-radio-small-icon-hover-url); /* Accordion icons */ --sf-comp-accordion-icon-trigger-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/accordion-collapsed-icon.svg'); --sf-comp-accordion-icon-hover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/add-accent.svg'); --sf-comp-accordion-icon-expanded-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/accordion-expanded-icon.svg'); --sf-comp-accordion-icon-trigger-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/accordion-collapsed-icon-dark.svg'); --sf-comp-accordion-icon-hover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/add-accent.svg'); --sf-comp-accordion-icon-expanded-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/accordion-expanded-icon-dark.svg'); --sf-comp-accordion-icon-trigger: var(--sf-comp-accordion-icon-trigger-url); --sf-comp-accordion-icon-hover: var(--sf-comp-accordion-icon-hover-url); --sf-comp-accordion-icon-expanded: var(--sf-comp-accordion-icon-expanded-url); /* Popover / tooltip icons */ --sf-comp-icon-popover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/tooltip/popover-icon.svg'); --sf-comp-icon-popover-hover-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/tooltip/popover-icon-hover.svg'); --sf-comp-icon-popover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/tooltip/dm-popover-icon.svg'); --sf-comp-icon-popover-hover-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/tooltip/dm-popover-icon-hover.svg'); --sf-comp-icon-popover: var(--sf-comp-icon-popover-url); --sf-comp-icon-popover-hover: var(--sf-comp-icon-popover-hover-url); /* Standalone icons (no dark variant) */ --sf-comp-icon-close-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/close-icon.svg'); --sf-comp-icon-tooltip-close-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/tooltip-close-icon.svg'); --sf-comp-icon-delete-pink-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/delete-pink-icon.svg'); --sf-comp-icon-dark-close-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/dark-close-icon.svg'); --sf-comp-icon-calendar-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/calendar-icon.svg'); --sf-comp-icon-close: var(--sf-comp-icon-close-url); --sf-comp-icon-tooltip-close: var(--sf-comp-icon-tooltip-close-url); --sf-comp-icon-delete-pink: var(--sf-comp-icon-delete-pink-url); --sf-comp-icon-dark-close: var(--sf-comp-icon-dark-close-url); --sf-comp-icon-calendar: var(--sf-comp-icon-calendar-url); /* Link-out / inline message icons (no dark variants) */ --sf-comp-icon-link-out-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/link-out-icon.svg'); --sf-comp-icon-inline-msg-error-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/inline-msg-error-icon.svg'); --sf-comp-icon-inline-msg-info-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/inline-msg-info-icon.svg'); --sf-comp-icon-inline-msg-success-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/inline-msg-success-icon.svg'); --sf-comp-icon-link-out: var(--sf-comp-icon-link-out-url); --sf-comp-icon-inline-msg-error: var(--sf-comp-icon-inline-msg-error-url); --sf-comp-icon-inline-msg-info: var(--sf-comp-icon-inline-msg-info-url); --sf-comp-icon-inline-msg-success: var(--sf-comp-icon-inline-msg-success-url); /* Boxed-in radio-button background (decorative card image, no dark variant) */ --sf-comp-radio-boxedin-background-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/card-highlight-background.svg'); --sf-comp-radio-boxedin-background: var(--sf-comp-radio-boxedin-background-url); /* Celebrate / PDF / Eye icons (light + dark) */ --sf-comp-icon-celebrate-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/celebrate.svg'); --sf-comp-icon-celebrate-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/celebrate-dark.svg'); --sf-comp-icon-pdf-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/pdf.svg'); --sf-comp-icon-pdf-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/pdf-dark.svg'); --sf-comp-icon-eye-slash-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/eye-slash-icon.svg'); --sf-comp-icon-eye-slash-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/eye-slash-icon-dark.svg'); --sf-comp-icon-eye-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/eye-icon.svg'); --sf-comp-icon-eye-dark-mode-url: url('/ebm-resources/public/simplii/themes/default/images/uikit/eye-icon-dark.svg'); --sf-comp-icon-celebrate: var(--sf-comp-icon-celebrate-url); --sf-comp-icon-pdf: var(--sf-comp-icon-pdf-url); --sf-comp-icon-eye-slash: var(--sf-comp-icon-eye-slash-url); --sf-comp-icon-eye: var(--sf-comp-icon-eye-url); /* ── PortfolioTable · toggle icon ────────────────────────────── */ /* Colour of the "+" expand glyph rendered by `.collapsible:after` in PortfolioTable.vue. Uses brand-accent (lilac) — the F26 replacement for the old brand-pink that was used here. Does NOT flip on dark surfaces (brand-accent is light-invariant). */ --sf-comp-portfolio-table-toggle-icon-color: var(--sf-sys-color-brand-accent, #D760FF); } .sf-dark-surface { /* All image tokens without a dark variant (chevron, close-icon, tooltip-close-icon, delete-pink-icon, dark-close-icon, calendar-icon, radio error icons) are intentionally not re-emitted here — they stay the same on dark. */ --sf-comp-checkbox-icon-default: var(--sf-comp-checkbox-icon-default-dark-mode-url); --sf-comp-checkbox-icon-checked: var(--sf-comp-checkbox-icon-checked-dark-mode-url); --sf-comp-checkbox-icon-hover: var(--sf-comp-checkbox-icon-hover-dark-mode-url); --sf-comp-dropdown-icon-arrow: var(--sf-comp-dropdown-icon-arrow-dark-mode-url); --sf-comp-radio-icon-default: var(--sf-comp-radio-icon-default-dark-mode-url); --sf-comp-radio-icon-checked: var(--sf-comp-radio-icon-checked-dark-mode-url); --sf-comp-radio-icon-hover: var(--sf-comp-radio-icon-hover-dark-mode-url); --sf-comp-radio-small-icon-default: var(--sf-comp-radio-small-icon-default-dark-mode-url); --sf-comp-radio-small-icon-checked: var(--sf-comp-radio-small-icon-checked-dark-mode-url); --sf-comp-radio-small-icon-hover: var(--sf-comp-radio-small-icon-hover-dark-mode-url); --sf-comp-accordion-icon-trigger: var(--sf-comp-accordion-icon-trigger-dark-mode-url); --sf-comp-accordion-icon-hover: var(--sf-comp-accordion-icon-hover-dark-mode-url); --sf-comp-accordion-icon-expanded: var(--sf-comp-accordion-icon-expanded-dark-mode-url); --sf-comp-icon-popover: var(--sf-comp-icon-popover-dark-mode-url); --sf-comp-icon-popover-hover: var(--sf-comp-icon-popover-hover-dark-mode-url); --sf-comp-icon-celebrate: var(--sf-comp-icon-celebrate-dark-mode-url); --sf-comp-icon-pdf: var(--sf-comp-icon-pdf-dark-mode-url); --sf-comp-icon-eye-slash: var(--sf-comp-icon-eye-slash-dark-mode-url); --sf-comp-icon-eye: var(--sf-comp-icon-eye-dark-mode-url); }