/* * Default Precess brand — and the template for any other. * * This is the theme every app starts on, and it is an ordinary brand sheet: the same * contract a tenant fills in, loaded the same way. Nothing here is privileged — a tenant * brand loads after it and overrides whatever it names. Copy this file to start a new * brand; * * It is linked from each app's `index.html` rather than bundled into `styles.css`, and * that is deliberate on two counts: * * - A `` in is render-blocking, so the seeds are in place before the * first paint. There is no flash. * - Being a plain stylesheet with no source map, it is directly editable in DevTools. * Anything compiled into `styles.css` ships a source map in dev, and the Styles pane * cannot persist edits to a source-mapped rule. * * ============================================================================ * TWO RULES * ============================================================================ * * 1. SEEDS ONLY. * Set only the `--precess-*` properties below. Never set a vendor-specific variable * (`--tui-*`), a derived token (anything not in this file), or a component/element * selector. * * Derived tokens are computed in ../../styles/tokens.css and recompute on their own: * hover and pressed states, the elevation ladder, pale tints, the translucent greys, * on-accent text, the shadow ramp. Setting one by hand breaks the pair it belongs to * — that is how `surface-2` once ended up identical to `surface` in dark mode, which * made every raised card invisible. * * 2. USE THESE EXACT SELECTORS. * Copy the two block headers verbatim. `data-precess-mode` is set on and is * always either `light` or `dark`, so the two blocks are mutually exclusive. The * doubled dark selector is deliberate: the `:root[…]` form is more specific than any * `:root` light block, so dark mode survives even in a sheet that loads later. * * Light and dark are independent of the brand: supply both blocks and the user's own * light/dark preference picks between them. Omit the dark block and dark mode falls back * to this file's dark palette. * * ============================================================================ * THE EIGHT THAT MATTER MOST * ============================================================================ * --precess-base page background --precess-accent primary brand colour * --precess-surface cards, dialogs, menus --precess-positive success * --precess-text body text --precess-warning warning * --precess-border dividers, outlines --precess-negative error * * Everything else is optional and has a sensible default. * * ============================================================================ * CHECK YOUR CONTRAST * ============================================================================ * `text` on `surface` and on `base` should reach 4.5:1. `accent` needs to be dark enough * (light mode) or light enough (dark mode) that white or black text sits on it legibly — * `on-accent` flips automatically at 60% lightness, so an accent sitting right at that * point will look uncertain either way. `action` is link text: it needs 4.5:1 against * `surface`, which usually means a step darker than the accent in light mode. * * Measured for this file: * light text/surface 16.1 text/base 14.7 on-accent/accent 5.8 action/surface 3.11 (below AA) * dark text/surface 13.7 text/base 17.9 on-accent/accent 7.7 action/surface 8.42 */ :root, [data-precess-mode='light'] { --precess-font-family: 'Open Sans', sans-serif; /* Surfaces */ --precess-base: #f1f5f9; /* the page */ --precess-base-alt: #dee3e7; /* inset areas, table stripes */ --precess-surface: #fff; /* cards, dialogs, menus */ /* * How far one elevation step moves toward the foreground — darker in light, lighter * in dark, which is exactly what the two modes need: light gets its depth from * shadow, dark from lightness, because a shadow does not read on a dark background. * `surface-2` (raised) and `surface-3` (dropdowns, popovers) are built from it. */ --precess-elevation-step: 3%; /* Foreground. Secondary and tertiary text are derived from `text`. */ --precess-text: rgba(27, 31, 59, 1); --precess-border: #c7c7c7; /* Brand */ --precess-accent: #02707e; /* filled buttons, active states */ --precess-accent-2: #f3483b; /* secondary accent */ --precess-action: #3d9fac; /* links and text actions */ /* Neutral fill. Hover and pressed step from this, so only the resting colour is a seed. */ --precess-neutral: #deebed; /* Status */ --precess-positive: rgb(78, 185, 81); --precess-warning: rgb(245, 158, 11); --precess-negative: rgba(255, 106, 106, 1); --precess-info: rgb(59, 130, 246); /* Chrome */ --precess-sidenav-bg: #011d28; /* sidenav text and hover derive from this */ --precess-autofill-background: #fff5c0; /* * Shadow as a tint plus a strength rather than one finished colour, so the adapter * can build Taiga's whole small/medium/popup ramp from the pair. Dark needs a much * heavier alpha to register at all against a dark surface. */ --precess-shadow-tint: #000; --precess-shadow-alpha: 10%; /* * Mix strengths. `pale` tints a status colour behind text; `veil` tints the * foreground colour to make the translucent greys. * * Status tints read the same in light and dark, so only `veil` differs by mode. * Negative gets its own, louder strength — an error is meant to shout. */ --precess-pale-alpha: 12%; /* status tints */ --precess-pale-alpha-loud: 32%; /* error tints */ --precess-veil-alpha: 8%; /* translucent greys */ } :root[data-precess-mode='dark'], [data-precess-mode='dark'] { /* Anything omitted here inherits the light seed above. */ --precess-base: #0f172a; --precess-base-alt: #1e293b; --precess-surface: #272d3e; /* Double the light step: on a dark surface, lightness is the only depth cue there is. */ --precess-elevation-step: 6%; --precess-text: rgba(255, 255, 255, 1); --precess-border: #959595; --precess-accent: #00acc3; --precess-accent-2: #ff8078; --precess-action: #71dae8; --precess-neutral: #196872; --precess-shadow-alpha: 48%; --precess-autofill-background: #9c8300; /* Status tints read the same in both modes; only the grey veils differ. */ --precess-veil-alpha: 24%; }