/* ===================================================================================================================== — THE PALETTE CUSTOM PROPERTIES ONLY. shared/css/shell.css holds every rule, every layout and every component; this file changes what colour the shell comes out, never how it is built. A hundred calculators each free to restyle their own buttons is a hundred stylesheets to maintain and a hundred chances to ship something broken on mobile. A hundred calculators that are the same well tested layout in different colours is one stylesheet and a palette per tool. Adding a rule here is how that stops being true. ===================================================================================================================== */ /* Copy this file to tools//theme.css and change the values, not the names. Two rules, both learned the hard way: 1. ONLY the accent family. Backgrounds, text, borders and shadows belong to shell.css and are already themed for both light and dark. Naming one of them here — even with a sensible value — pins it to whichever theme you wrote it for, because this file loads after shell.css and therefore beats its dark block. 2. Whatever appears in :root MUST also appear in [data-theme="dark"], line for line. A variable in one and not the other is a variable stuck on the wrong theme. And one constraint on the colour itself: do not pick a green or a red. The shell reserves green for money gained and red for money lost, on the figures. An accent in either family puts brand-coloured chrome beside verdict- coloured results and costs the reader the only cue they have for telling one from the other. Blues, teals, deep blues, slates and teal-blues are all safe. Purples are not — not because they conflict with a verdict but because the shell's own ramp is blue to cyan, and a purple tool inside it looks like a mistake. The default below is the domain's own sapphire — a calculator that ships without editing this file still looks intentional. Coded By Darko G. */ :root { --gold: #1E5FD8; --gold-bright: #3B82F6; --gold-light: #8FBAFF; --gold-text: #1A4BB0; --gold-tint: rgba(30, 95, 216, 0.13); --gold-tint-line: rgba(30, 95, 216, 0.32); --champagne: #E6EEFE; --primary: #1E5FD8; --accent: #1E5FD8; --accent-cyan: #3B82F6; --accent-glow: rgba(30, 95, 216, 0.32); /* A sweep across two hues, not one colour lightened and darkened. Keep every stop above 4.5:1 against --on-accent — ten components put text or an icon directly on this. */ --gradient-primary: linear-gradient(115deg, #123FA8 0%, #1E5FD8 46%, #0679A3 100%); --gradient-vivid: linear-gradient(115deg, #0679A3 0%, #1E5FD8 46%, #123FA8 100%); --border-hover: rgba(30, 95, 216, 0.52); --input-focus-glow: rgba(30, 95, 216, 0.18); /* THE ACCENT ROTATION AND THE AMBIENT ORBS. LEFT ON THE SHELL'S DEFAULTS ON PURPOSE, LIKE THE PANELS BELOW. These two families are the ones most easily missed, because nothing about them looks per-calculator until you change the accent above and see what happens. THE ROTATION. Everything that repeats as siblings — numbered steps, the dashboard cards' icons, report section numbers, the progress rail, the section marks — walks a three-step ramp. Step one is --gold. Steps two and three are --accent-2* and --accent-3*. Leave them on the defaults with a NON-sapphire accent above and the rhythm runs your hue, then two of the domain's, which reads as confetti rather than as a ramp. Two rules if you restate them: keep all three inside ONE ramp walked in order, and keep both -text variants above 4.5:1 on --bg-secondary in their own theme, because both are used as text. Watch for the near-collision as well as the mismatch: the default step three is a cyan, so a calculator whose accent is already a cyan or teal-blue repeats its first colour at step three. See tools/aged-care-rad-vs-dap-calculator/theme.css, which runs the ramp in the opposite direction for exactly that reason. THE ORBS. The three soft washes behind every page, and the largest coloured objects on the site. Same ramp. Do NOT raise the alphas: the shell's note on them is explicit that nothing above 0.14 has ever looked right and that the fix for a wash that reads too faint is never to make it bigger or add more of them. --accent-2: #123FA8; --accent-2-bright: #2952C9; --accent-2-text: #0F348B; --accent-2-tint: rgba(18, 63, 168, 0.13); --accent-2-line: rgba(18, 63, 168, 0.32); --accent-2-glow: rgba(18, 63, 168, 0.32); --accent-3: #0592C4; --accent-3-bright: #22B3E0; --accent-3-text: #046D93; --accent-3-tint: rgba(5, 146, 196, 0.13); --accent-3-line: rgba(5, 146, 196, 0.32); --accent-3-glow: rgba(5, 146, 196, 0.32); --ambient-1: rgba(30, 95, 216, 0.10); --ambient-2: rgba(18, 63, 168, 0.09); --ambient-3: rgba(5, 146, 196, 0.08); */ /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report (.rp-cover). LEFT ON THE SHELL'S DEFAULTS ON PURPOSE, AND COMMENTED RATHER THAN DECLARED. Those two panels are the only surfaces on the site that are dark in BOTH themes, so their text is a fixed near-white literal in shell.css rather than a token. The shell's defaults for them are the domain's navy into deep teal-blue, which is exactly this file's default accent — a calculator that ships without editing this file already has them right, and declaring the same values a second time here would only pin a copy that goes stale the day the shell's default moves. Uncomment and edit ONLY if you change the accent above to something the shell's navy no longer belongs under. Four rules, and none of them is optional: 1. Keep every stop DARK. These do NOT take --gradient-primary: that token is a mid-tone in light and a LIGHT tint in dark, and either one strands the panels' #E9EFF9 text on a surface it cannot be read against. Build a dark gradient in your hue instead — near-black, your accent deepened, then the domain's sapphire deepened, and on the cover a fourth stop returning to near-black. 2. The accent must clear 4.5:1 against the LIGHTEST stop of its gradient. It carries the welcome eyebrow, "Unlimited", and the accented word in the cover title — all small text. 3. Use the SAME accent value on both panels. Those three pieces of text are one voice, not three. 4. Whatever you uncomment here, uncomment in [data-theme="dark"] too, with the SAME values. These are theme-independent because the panels are, and the rule at the top of this file is kept literally. The blooms inside the panels are --panel-glow-a (bottom right of both) and --panel-glow-b (top left of the cover), also on the shell's :root. Override those two and both panels' glows move together; there is a third, --dash-hero-glow, which defaults to --panel-glow-a and exists only if the welcome panel and the report cover have to diverge. tools/division-296-calculator/theme.css is a worked example of the whole set. --dash-hero-gradient: linear-gradient(150deg, #08142C 0%, #14417F 46%, #0A4C74 100%); --dash-hero-accent: #9CC5FF; --rp-cover-gradient: linear-gradient(150deg, #08142C 0%, #14417F 38%, #0A4C74 76%, #071A2E 100%); --rp-cover-accent: #9CC5FF; */ /* Chart 1 only, so the report's primary series matches the brand. Charts 2-7 are held in common across every calculator on purpose: they are chosen to stay distinguishable from one another and in greyscale, and re-picking them per tool would quietly break that. */ --chart-1: #1753d2; } [data-theme="dark"] { --gold: #6BA8FF; --gold-bright: #9CC5FF; --gold-light: #C2DBFF; --gold-text: #9CC5FF; --gold-tint: rgba(107, 168, 255, 0.16); --gold-tint-line: rgba(107, 168, 255, 0.36); --champagne: #E2EDFF; --primary: #6BA8FF; --accent: #6BA8FF; --accent-cyan: #9CC5FF; --accent-glow: rgba(107, 168, 255, 0.34); --gradient-primary: linear-gradient(115deg, #4F86FF 0%, #6BA8FF 46%, #38BDF8 100%); --gradient-vivid: linear-gradient(115deg, #38BDF8 0%, #6BA8FF 46%, #4F86FF 100%); --border-hover: rgba(107, 168, 255, 0.52); --input-focus-glow: rgba(107, 168, 255, 0.20); /* The rotation and the orbs, in dark. Unlike the panel tokens below these DO flip — they sit on the themed page surfaces, so they take the luminous end of the ramp the way --gold does. --accent-2: #4F86FF; --accent-2-bright: #86ADFF; --accent-2-text: #86ADFF; --accent-2-tint: rgba(79, 134, 255, 0.17); --accent-2-line: rgba(79, 134, 255, 0.36); --accent-2-glow: rgba(79, 134, 255, 0.34); --accent-3: #38BDF8; --accent-3-bright: #7DD8FF; --accent-3-text: #7DD8FF; --accent-3-tint: rgba(56, 189, 248, 0.17); --accent-3-line: rgba(56, 189, 248, 0.36); --accent-3-glow: rgba(56, 189, 248, 0.34); --ambient-1: rgba(107, 168, 255, 0.09); --ambient-2: rgba(79, 134, 255, 0.08); --ambient-3: rgba(56, 189, 248, 0.07); */ /* The two fixed dark panels. Same values as the light block above, for the reason given there: .dash-hero and .rp-cover do not change between themes, so neither do these. --dash-hero-gradient: linear-gradient(150deg, #08142C 0%, #14417F 46%, #0A4C74 100%); --dash-hero-accent: #9CC5FF; --rp-cover-gradient: linear-gradient(150deg, #08142C 0%, #14417F 38%, #0A4C74 76%, #071A2E 100%); --rp-cover-accent: #9CC5FF; */ --chart-1: #739aef; }