/** * CWS UI — Accessibility overrides * ───────────────────────────────────────────── * Everything here is gated behind a user preference and MUST NOT change the * platform's native appearance. The toggles live in the user menu and are * applied pre-paint by CWSA11y (also exposed through CWSApp) on : * * .cws-a11y-high-contrast Higher Contrast * .cws-a11y-reduced-motion Reduce Motion * .cws-a11y-larger-text Larger Text * cws-a11y-long-timeouts Longer Alerts (storage only, used by toast()) * * ── Why the accent colors are darkened by a background layer ────────────── * Measured against config/apps.json, 20 of the 25 per-app accent colors fail * WCAG AA (4.5:1) for white text on the accent. Cork's yellow is the worst at * 1.92:1. That is the whole palette, so changing the defaults would redesign * the product — hence this is opt-in only. * * The obvious implementation, redefining --cws-primary under the toggle, does * not work here: * - `--cws-primary: color-mix(... var(--cws-primary) ...)` is a self- * reference, which CSS treats as cyclic and discards. * - Keying off --app-primary / --app-theme instead only works on the two * templates that happen to emit them. The accent is also set literally in * app.css and in ten separate email themes, and on those surfaces the * override would paint an unrelated color rather than a darker one. * * Compositing a translucent black layer over the background sidesteps both. * background-image paints above background-color but BELOW the element's text, * so the accent darkens by a known amount while white label text stays pure * white. It works for any accent, including ones added later, with no * template changes and nothing to keep in sync. * * 0.37 alpha over the accent is equivalent to scaling it to 63% brightness, * which is the single factor that lifts every one of the 25 accents to at * least 4.5:1 (worst case Cork, 1.92:1 -> 4.56:1; most land above 6:1). */ /* These preferences belong to the UI library, including runtime-less pages. */ html.cws-a11y-reduced-motion, html.cws-a11y-reduced-motion *, html.cws-a11y-reduced-motion *::before, html.cws-a11y-reduced-motion *::after { animation-delay: 0ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-delay: 0ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Zoom includes px-sized text and controls. Embedded apps inherit the parent * scale, so their own document must not multiply it a second time. */ html.cws-a11y-larger-text:not(.cws-a11y-parent-scaled) { zoom: 1.18; } /* Opt-in neutral tokens override app/theme :root defaults. Keep accent tokens * intact: buttons still use the background layer below, without cyclic vars. * Body is included because some independent shells redeclare tokens there. */ html.cws-a11y-high-contrast, html.cws-a11y-high-contrast body { --cws-bg: #ffffff !important; --cws-bg-subtle: #f5f5f5 !important; --cws-bg-muted: #eeeeee !important; --cws-surface: #ffffff !important; --cws-surface-raised: #ffffff !important; --cws-text: #111111 !important; --cws-text-secondary: #292929 !important; --cws-text-muted: #404040 !important; --cws-border: #666666 !important; --cws-border-light: #767676 !important; --cws-border-strong: #333333 !important; --cws-border-control: #555555 !important; --cws-a11y-focus: #111111; --bs-body-bg: var(--cws-bg) !important; --bs-body-color: var(--cws-text) !important; --bs-secondary-color: var(--cws-text-secondary) !important; --bs-secondary-color-rgb: 41, 41, 41 !important; --bs-emphasis-color: var(--cws-text) !important; --bs-border-color: var(--cws-border) !important; --bs-secondary-bg: var(--cws-bg-subtle) !important; --bs-tertiary-bg: var(--cws-bg-muted) !important; /* SalesPoint's standalone shell consumes its established SP tokens. */ --sp-bg: var(--cws-bg) !important; --sp-text: var(--cws-text) !important; --sp-surface: var(--cws-surface) !important; --sp-surface-alt: var(--cws-bg-subtle) !important; --sp-border: var(--cws-border) !important; } html.cws-a11y-high-contrast[data-cws-theme="dark"], html.cws-a11y-high-contrast[data-cws-theme="dark"] body, html.cws-a11y-high-contrast[data-sp-theme="dark"], html.cws-a11y-high-contrast[data-sp-theme="dark"] body, html.cws-a11y-high-contrast body:is(.theme-dark, .dark-mode) { --cws-bg: #000000 !important; --cws-bg-subtle: #111111 !important; --cws-bg-muted: #222222 !important; --cws-surface: #111111 !important; --cws-surface-raised: #222222 !important; --cws-text: #ffffff !important; --cws-text-secondary: #eeeeee !important; --cws-text-muted: #dddddd !important; --cws-border: #aaaaaa !important; --cws-border-light: #999999 !important; --cws-border-strong: #dddddd !important; --cws-border-control: #bbbbbb !important; --cws-a11y-focus: #ffffff; --bs-secondary-color-rgb: 238, 238, 238 !important; } html.cws-a11y-high-contrast body { color: var(--cws-text); background-color: var(--cws-bg); } html.cws-a11y-high-contrast :is(.cws-input, .form-control)::placeholder, html.cws-a11y-high-contrast :is(.text-muted, .cws-text-muted) { color: var(--cws-text-muted) !important; opacity: 1; } /* The chip defines local colours on the portaled dropdown; inherit the same * contrast palette there rather than leaving a translucent, muted menu. */ html.cws-a11y-high-contrast :is(.user-chip-container, .user-chip-dropdown) { --user-chip-text: var(--cws-text) !important; --user-chip-secondary: var(--cws-text-secondary) !important; --user-chip-border: var(--cws-border) !important; --user-chip-surface: var(--cws-surface) !important; --user-chip-surface-hover: var(--cws-bg-muted) !important; --user-chip-surface-border: var(--cws-border) !important; --user-chip-dropdown-bg: var(--cws-surface) !important; --user-chip-dropdown-header-solid: var(--cws-bg-subtle) !important; --user-chip-dropdown-header-bg: none !important; --user-chip-item-hover: var(--cws-bg-muted) !important; } html.cws-a11y-high-contrast .user-chip-dropdown { background: var(--cws-surface) !important; border-color: var(--cws-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.cws-a11y-high-contrast .user-chip-dropdown::before { display: none !important; } /* ── Higher Contrast: accent backgrounds ─────────────────────────────────── */ html.cws-a11y-high-contrast .cws-btn-primary, html.cws-a11y-high-contrast .cws-badge-solid-primary, html.cws-a11y-high-contrast .cws-switch input:checked, html.cws-a11y-high-contrast .cws-skip-link:focus { background-image: linear-gradient(rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.37)); } /* * Checkboxes and radios set their accent with !important (forms.css), so the * background-image layer needs the same weight to composite over it. */ html.cws-a11y-high-contrast .cws-checkbox input:checked, html.cws-a11y-high-contrast .cws-radio input:checked { background-image: linear-gradient(rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.37)) !important; } /* * Avatars are decorative and carry initials rather than meaningful text, but * they use the same accent, so darkening them keeps the UI visually coherent * rather than leaving one lone bright element. */ html.cws-a11y-high-contrast .cws-avatar { background-image: linear-gradient(rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.37)); } /* ── Higher Contrast: structure ────────────────────────────────────────────── * Moved here from apps/_base/app-shell.css, which only the apps behind * app-shell.php load. Defined once, globally, so a user who turns the * preference on gets the same treatment in every app rather than only seven * of them. */ html.cws-a11y-high-contrast :focus-visible { outline: 3px solid var(--cws-a11y-focus) !important; outline-offset: 2px !important; } html.cws-a11y-high-contrast .app-card, html.cws-a11y-high-contrast .cws-card, html.cws-a11y-high-contrast .cws-input, html.cws-a11y-high-contrast .cws-btn { border-width: 2px !important; } /* ── Touch Mode (html.cws-touch, set by cws-a11y.js) ────────────────────── * A touch screen, the Android app, or the Touch Mode choice in the user menu. * Finger-sized controls in the shared components, no 300 ms tap delay or * double-tap zoom, and no tap flash. App-specific touch rules key on the same * class (the desktop's are in desktop.css). */ html.cws-touch { -webkit-tap-highlight-color: transparent; } html.cws-touch :is(a, button, summary, label, select, [role="button"], [role="menuitem"], [role="tab"]) { touch-action: manipulation; } html.cws-touch .cws-btn { min-height: 40px; } html.cws-touch .cws-btn-xs, html.cws-touch .cws-btn-sm { min-height: 40px; } html.cws-touch .cws-btn-icon, html.cws-touch .cws-btn-icon.cws-btn-xs, html.cws-touch .cws-btn-icon.cws-btn-sm { min-width: 40px; min-height: 40px; } html.cws-touch .cws-input:is(input, select) { min-height: 40px; } html.cws-touch .cws-ctxmenu-item { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; } html.cws-touch .user-chip-dropdown-item { min-height: 44px; }