/*========================================================= theme.urm.css - THE URM PALETTE. >>> TO RETHEME THIS CONSOLE, CHANGE ONE LINE: --urm-primary. >>> Everything else in this file derives from it, and every >>> sheet in the app reads these tokens rather than a colour. WHERE THIS SITS --------------- Registered LAST in the `vsel-urm` bundle (StyleProvider), and also in the bundles of the pages that live outside the shell (login, landing, reports, student registration) so the same tokens exist on every page URM serves. This file declares the palette and NOTHING else. The mapping of these tokens onto the tokens other sheets declare lives in customs/theme.urm.late.css, which loads after every one of them. Two files, one reason each: theme.urm.css what the colour IS <- edit here theme.urm.late.css where the colour GOES <- plumbing HOW THE DERIVATION WORKS ------------------------ color-mix(in srgb, X p%, #fff) = a tint (p% of X over white) color-mix(in srgb, X p%, #000) = a shade (X darkened by 100-p%) color-mix(in srgb, X p%, transparent) = X at alpha p/100, and that one is EXACT: it is bit-identical to the rgba() literal, which is why every wash and ring below is written as a mix of the primary instead of a hand-picked rgba. (color-mix is already load-bearing in these codebases - the shared .vs-icon-btn block uses it - so this is not a new dependency.) CONTRAST - READ THIS BEFORE PICKING A NEW PRIMARY ------------------------------------------------- #169478 against white is 3.79:1. That passes for large text, icons and non-text UI, and FAILS WCAG AA (4.5:1) for body text. So the palette exposes the brand twice, by job: --urm-accent fills, bars, borders, decoration --urm-accent-text text and icons on a light surface (the primary at 70%, 6.7:1 on white) --urm-on-accent text that sits ON a brand fill A brand fill that carries white text uses --urm-accent-strong (the 600-800 band), never --urm-accent, for the same reason. If you change --urm-primary to something lighter, re-check those three. If you change it to something already dark, you can point --urm-accent-text straight at --urm-primary. AND CHECK THE HUE AGAINST SUCCESS AND DANGER -------------------------------------------- The brand sits beside the semantic colours in several places - the Student Service Center stat cards, the .bg-*-subtle chips, a toolbar with Save next to Approve. Measured on #169478: brand text hue 167 deg .value-primary success hue 152 deg .value-success danger hue 354 deg .value-danger 15 degrees is CLOSE. Brand and success are still told apart by lightness and by their labels, but a primary chosen anywhere between about 120 and 160 degrees would collide outright, and the pair that has to stay distinguishable is the semantic one, not the brand. If you pick a green, re-hue --vs-success rather than hoping the two read apart. WHAT IS DELIBERATELY NOT IN HERE -------------------------------- Semantic and categorical colour. Green means good, red means destructive, amber means attention, and the per-category colours on the dashboard cards must stay distinguishable FROM EACH OTHER. Re-hueing those to the brand deletes meaning and adds nothing. If two values have to stay apart, they are not brand - they are encoding. AFTER EDITING ------------- This project renders assets RAW (no public/dist/manifest.json), so the browser caches each sheet by the bundle's version number in config/apps/urm.php. Bump 'vsel-urm' there - or run `vsa cache:bust` - or the change will not appear. =========================================================*/ :root{ /*===================================================== 1. THE ONE VALUE =====================================================*/ --urm-primary:#169478; /* The ink the dark sidebar rail is built on. It is mixed WITH the primary below, so the rail follows the brand while staying a near-black surface rather than a saturated panel. */ --urm-rail-ink:#061015; /*===================================================== 2. THE RAMP Tints above the primary, shades below it. Named the way the rest of the industry names them so a reader can guess which end is which. =====================================================*/ --urm-primary-050:color-mix(in srgb, var(--urm-primary) 6%, #fff); --urm-primary-100:color-mix(in srgb, var(--urm-primary) 12%, #fff); --urm-primary-200:color-mix(in srgb, var(--urm-primary) 24%, #fff); --urm-primary-300:color-mix(in srgb, var(--urm-primary) 42%, #fff); --urm-primary-400:color-mix(in srgb, var(--urm-primary) 68%, #fff); --urm-primary-500:var(--urm-primary); --urm-primary-600:color-mix(in srgb, var(--urm-primary) 84%, #000); --urm-primary-700:color-mix(in srgb, var(--urm-primary) 70%, #000); --urm-primary-800:color-mix(in srgb, var(--urm-primary) 56%, #000); --urm-primary-900:color-mix(in srgb, var(--urm-primary) 42%, #000); --urm-primary-950:color-mix(in srgb, var(--urm-primary) 28%, #000); /*===================================================== 3. THE JOBS These are what the rest of the app should read. A sheet that wants "the brand" asks for the JOB, not a step on the ramp, so the ramp can be retuned without a sweep. =====================================================*/ /* Decoration: fills, bars, rules, active indicators. */ --urm-accent:var(--urm-primary); /* A brand fill that has to carry white text. */ --urm-accent-strong:var(--urm-primary-700); /* Text and icons in brand colour on a light surface. AA. */ --urm-accent-text:var(--urm-primary-700); /* The darkest brand ink - headings, emphasised figures. */ --urm-accent-ink:var(--urm-primary-900); /* Text that sits on top of an --urm-accent* fill. */ --urm-on-accent:#ffffff; /* The tinted surfaces: a selected row, a soft chip, the face of a highlighted card. */ --urm-accent-soft:var(--urm-primary-050); --urm-accent-soft-2:var(--urm-primary-100); /* Borders: the quiet one for resting state, the visible one for hover and selection. */ --urm-accent-line:var(--urm-primary-200); --urm-accent-line-strong:var(--urm-primary-400); /*===================================================== 4. WASHES AND RINGS Translucent brand, for things that must let the surface below show through: focus rings, hover washes, ripples, the glow on the sidebar. Each is an EXACT alpha of the primary (see the header), so none of these is a hand-picked colour that would have to be re-picked when the brand changes. =====================================================*/ --urm-wash-04:color-mix(in srgb, var(--urm-primary) 4%, transparent); --urm-wash-12:color-mix(in srgb, var(--urm-primary) 12%, transparent); --urm-wash-18:color-mix(in srgb, var(--urm-primary) 18%, transparent); --urm-wash-25:color-mix(in srgb, var(--urm-primary) 25%, transparent); --urm-wash-45:color-mix(in srgb, var(--urm-primary) 45%, transparent); /* The focus ring every control shares. One token, so the ring is the same thickness and hue on an input, a button, a select and a search box. */ --urm-ring:0 0 0 3px var(--urm-wash-18); /* The wider ring, for a control on a dark surface (the menu filter in the rail) where a 3px ring disappears. */ --urm-ring-lg:0 0 0 4px var(--urm-wash-12); /*===================================================== 5. THE SIDEBAR RAIL The rail is the largest brand surface in the console, so it is derived rather than chosen: a near-black ink with the primary mixed in, which keeps it reading as one surface with the brand instead of beside it. =====================================================*/ --urm-rail-top:color-mix(in srgb, var(--urm-primary) 10%, var(--urm-rail-ink)); --urm-rail-mid:color-mix(in srgb, var(--urm-primary) 18%, var(--urm-rail-ink)); --urm-rail-bottom:color-mix(in srgb, var(--urm-primary) 26%, var(--urm-rail-ink)); /* The two glows the shell lays over the rail. */ --urm-rail-glow:color-mix(in srgb, var(--urm-primary) 28%, transparent); --urm-rail-glow-2:color-mix(in srgb, var(--urm-primary) 12%, transparent); /* The selected menu item. */ --urm-rail-active-start:var(--urm-primary-500); --urm-rail-active-end:var(--urm-primary-700); /* A section heading in the rail, and the grip on its seam. */ --urm-rail-heading:var(--urm-primary-300); --urm-rail-grip:var(--urm-primary-400); --urm-rail-grip-hover:var(--urm-primary-300); --urm-rail-chip:var(--urm-primary-800); /*===================================================== 6. THE APP HEADER The header sits BESIDE the rail on desktop and ABOVE it on mobile, and the two want opposite things. DESKTOP - the bar runs along the top of the white workspace and carries dark text, icons and the toolbar menus. VSEL ships it white. Painting it the rail's dark teal would make one continuous dark band, but every glyph in it is drawn for a light surface, so it would have to be re-inked as well - a bigger change than a colour, and one that costs contrast against the content underneath. What is used instead is a BARELY tinted white: the brand at 3%, which reads as white beside the content and as "the same family" beside the rail, with a brand-tinted hairline doing the actual joining work. Both move with --urm-primary. To go the other way - a fully dark header matching the rail - set: --urm-header-bg:var(--urm-rail-top); --urm-header-bg-2:var(--urm-rail-mid); and re-ink .vs-header's text and icons in the late sheet. To keep VSEL's plain white, set both to #fff. MOBILE - the mobile header is the rail on a phone, so it takes the rail tokens directly and is not affected by these three. =====================================================*/ --urm-header-bg:color-mix(in srgb, var(--urm-primary) 3%, #fff); --urm-header-bg-2:color-mix(in srgb, var(--urm-primary) 6%, #fff); --urm-header-line:var(--urm-accent-line); /*===================================================== 7. BRIDGE TO VSEL --vs-primary is read by bootstrap.adapter.css for .text-primary / .bg-primary / .border-primary, and by anything else in the VSEL layer that wants the app's colour. Declared here because this sheet is the last in `vsel-urm` and the adapter's own :root default (#0d6efd) is earlier in the same bundle. Everything in the `customs-urm` bundle that declares a token on :root is re-pointed in theme.urm.late.css instead - that bundle loads after this one, and :root vs :root is a tie the later sheet wins. =====================================================*/ --vs-primary:var(--urm-accent); }