/** * Oparo design tokens for the CLIENT AREA (customer portal). * * Companion to assets/css/oparo-tokens.css, which carries the same vocabulary for * the admin shell. This sheet exists because the portal needs three things the * admin one does not: * * 1. Tokens the WORKSPACE controls. --oparo-accent and the seven values derived * from it are written into the page head by Client_area_appearance_service. * Everything here is a fallback, so the portal is fully painted even on a * workspace that has never opened the settings screen, on a workspace whose * migration has not run, and in the fraction of a second before the inline * block is parsed. * * 2. A dark palette driven by prefers-color-scheme rather than by an attribute. * The admin toggles html[data-admin-theme]; a client never signs in to a * preference screen, so the only honest signal is the operating system they * are already reading with. It only applies when the workspace has chosen * 'auto', which is expressed by .customers[data-surface-mode="auto"]. * * 3. Semantic status colours that are legible. The portal's status labels used * Bootstrap's defaults with white text, between 1.95:1 and 4.48:1. These are * the AA-verified pairs from oparo-tokens.css: a -subtle background carrying * -strong text, which is a readable combination at any size, rather than * white on a mid-tone fill, which is not. * * NOTHING HERE IS A COMPONENT RULE. This sheet declares custom properties and * nothing else, so loading it first cannot change a single pixel by itself. */ :root, .customers { color-scheme: light; /* --------------------------------------------------------------------- * Workspace-controlled. Overridden per workspace by the inline block that * Client_area_appearance_service::css() prints into . The defaults * below are the platform's own blue, so an unconfigured portal already * matches the workspace its staff sign in to. * ------------------------------------------------------------------- */ --oparo-accent: #2563eb; --oparo-accent-hover: #1453dd; --oparo-accent-active: #1249c1; --oparo-accent-subtle: #e9effd; --oparo-accent-edge: #1350d4; --oparo-text-on-accent: #ffffff; --oparo-link: #2563eb; --oparo-focus-ring: #2563eb; --oparo-radius-sm: 0.375rem; --oparo-radius-lg: 0.5rem; --oparo-radius-pill: 9999px; --oparo-font-family-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --------------------------------------------------------------------- * Fixed. These are the grounds every workspace-controlled colour above is * measured against by the service, so they are deliberately not settable: * moving them would make the contrast guarantee unverifiable. * ------------------------------------------------------------------- */ --oparo-background: #f7f8fa; --oparo-surface: #ffffff; --oparo-surface-sunken: #f4f6f9; --oparo-surface-raised: #e8edf5; --oparo-border: #d7dee8; --oparo-border-strong: #c3cddb; --oparo-text: #111315; --oparo-text-muted: #5c6570; /* Status. Every one of these is used as -strong text on its own -subtle background, and every pair clears 4.5:1. Meaning always travels with a word as well as the colour, so none of it depends on hue perception. */ --oparo-status-danger: #b42318; --oparo-status-danger-subtle: #fef3f2; --oparo-status-success: #067647; --oparo-status-success-subtle: #ecfdf3; --oparo-status-info: #175cd3; --oparo-status-info-subtle: #eff8ff; --oparo-status-warning: #b54708; --oparo-status-warning-subtle: #fffaeb; /* Text that sits ON a solid status fill, as opposed to on its -subtle ground. Only the danger button does this, and it needs to flip in dark mode where --oparo-status-danger becomes a light salmon that white would vanish on. */ --oparo-text-on-status: #ffffff; --oparo-focus-width: 2px; --oparo-focus-offset: 2px; --oparo-scrim: rgba(15, 23, 42, 0.45); --oparo-shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1); --oparo-shadow-dropdown: 0 8px 24px rgba(16, 24, 40, 0.12); --oparo-touch-min: 44px; /* Spacing. Re-declared per workspace when density is 'compact'. */ --oparo-space-1: 0.25rem; --oparo-space-2: 0.5rem; --oparo-space-3: 0.75rem; --oparo-space-4: 1rem; --oparo-space-5: 1.25rem; --oparo-space-6: 1.5rem; --oparo-space-8: 2rem; /* Type. The portal reads at 1rem, not the admin's 0.875rem: a client reads an invoice occasionally on an unfamiliar screen, where the admin's information density is the wrong trade. Nothing in the portal is set below --oparo-font-size-sm. */ --oparo-font-size-xs: 0.8125rem; --oparo-font-size-sm: 0.875rem; --oparo-font-size-base: 1rem; --oparo-font-size-lg: 1.125rem; --oparo-font-size-xl: 1.375rem; --oparo-font-size-2xl: 1.75rem; --oparo-font-weight-regular: 400; --oparo-font-weight-medium: 500; --oparo-font-weight-semibold: 600; --oparo-line-height-tight: 1.25; --oparo-line-height-base: 1.5; --oparo-line-height-relaxed: 1.65; --oparo-tracking-wide: 0.04em; /* Motion. Collapsed to zero by the reduced-motion block below, so a rule can write var(--oparo-motion-fast) and be compliant without repeating the media query. The portal previously had no reduced-motion support at all. */ --oparo-motion-fast: 0.2s; --oparo-motion-panel: 0.25s; --oparo-motion-ease: ease; } /** * Dark, and only when the workspace has offered it. data-surface-mode is written * onto from the stored preference. A workspace that * stays on 'light' never gets this block, so its portal looks the same to every * client regardless of their operating system. * * The accent is NOT re-derived here. The service computed it against the light * ground; on the dark ground the same hue needs to be lighter to stay legible, so * the three tokens that carry text or an edge are lightened by a fixed step that * preserves hue. Everything else in the palette flips wholesale. */ @media (prefers-color-scheme: dark) { .customers[data-surface-mode="auto"] { color-scheme: dark; --oparo-background: #0c0e12; --oparo-surface: #141820; --oparo-surface-sunken: #1e2430; --oparo-surface-raised: #2a3242; --oparo-border: rgba(255, 255, 255, 0.12); --oparo-border-strong: rgba(255, 255, 255, 0.22); --oparo-text: #f1f4f8; --oparo-text-muted: #a8b2c1; --oparo-status-danger: #fda29b; --oparo-status-danger-subtle: rgba(180, 35, 24, 0.22); --oparo-status-success: #75e0a7; --oparo-status-success-subtle: rgba(6, 118, 71, 0.24); --oparo-status-info: #9ec1ff; --oparo-status-info-subtle: rgba(23, 92, 211, 0.26); --oparo-status-warning: #fdb022; --oparo-status-warning-subtle: rgba(181, 71, 8, 0.26); --oparo-text-on-status: #0c0e12; --oparo-scrim: rgba(0, 0, 0, 0.62); --oparo-shadow-panel: 0 1px 3px rgba(0, 0, 0, 0.5); --oparo-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.55); /* color-mix keeps the workspace's hue and lifts it onto the dark ground. Where it is unsupported the declaration is dropped and the light accent stands, which is legible on dark rather than ideal, never invisible. */ --oparo-accent: color-mix(in srgb, var(--oparo-accent) 72%, white); --oparo-link: color-mix(in srgb, var(--oparo-link) 60%, white); --oparo-focus-ring: color-mix(in srgb, var(--oparo-focus-ring) 55%, white); --oparo-text-on-accent: #0c0e12; --oparo-accent-subtle: rgba(255, 255, 255, 0.08); } } @media (prefers-reduced-motion: reduce) { :root, .customers { --oparo-motion-fast: 0s; --oparo-motion-panel: 0s; } }