/* * palette.css — every colour the Power-Up uses, and the only file that holds * a colour literal. * * ttp.css styles; this file decides what the styling is coloured with. The * split exists so a palette change is a diff in one 200-line file rather than * an archaeology exercise across 2400 lines of layout, and so the two halves * can be reviewed by different eyes. * * Load it BEFORE ttp.css on every page. It only declares custom properties, * so it carries no specificity of its own and cannot fight anything. * * --------------------------------------------------------------------------- * Two palettes * --------------------------------------------------------------------------- * * `teal` is active. `blue` is a complete alternate kept in the file so the two * can be compared on a live board rather than in a mock-up: set TTP_PALETTE in * bootstrap.js, which puts `data-palette` on . There is deliberately no * user-facing selector — a per-member accent would mean two people describing * the same screen differently, and every future component would need checking * against two palettes forever. The switch is a development instrument. * * --------------------------------------------------------------------------- * The rule the roles encode * --------------------------------------------------------------------------- * * --ttp-action anything a person can invoke: filled buttons, text links, * the tab underline, the active segment, the progress ring. * --ttp-focus focus indication only — outlines, :focus-visible rings, the * border and glow on a focused field. Never a resting colour, * never text. * * Before this file there were two brand colours (`--ttp-primary` blue and * `--ttp-accent` teal) with no rule about which meant what, so a card's Add * button was teal while the button element it was built from defaulted to * blue, and a board view showed a blue tab underline above a teal active * segment. One colour means "you can press this"; blue now means only "this * has keyboard focus". * * --------------------------------------------------------------------------- * Why light and dark are still written out twice * --------------------------------------------------------------------------- * * light-dark() would fold the three blocks below into one, and was tried. It * was rejected because the failure mode is total: a browser that does not * parse it makes every custom property invalid *at substitution time*, and a * custom property cannot use the usual two-declaration fallback (an * unparseable value is still stored, so it shadows the declaration before it * and then fails). The result on an older mobile WebView would be a page with * no colours at all rather than a page with old colours. An @supports guard * over fallback declarations restores safety but leaves four sources of truth * instead of three, which is worse than what it replaces. Revisit when this * project states a minimum WebView version it is willing to break on. * * --------------------------------------------------------------------------- * Two exceptions, both because the colour is not ours to choose * --------------------------------------------------------------------------- * * The second one first, since it is the smaller: a Trello card badge's `color` * is painted by Trello from a fixed vocabulary of its own names, so client.js * passes "light-gray" for the disconnected badge. That is not a CSS colour at * all — CSS spells that one `lightgray` — and a token holding it would * misdescribe this file. tests/test_powerup_palette.py pins those values to * Trello's list instead. * * The first: * * Trello loads the card badge and board button icons as image URLs, so those * files cannot read a custom property and their fills must be literals. * * Two different things live in that set, and conflating them is a trap: * * Ours — drawn inside our own iframe, so these mirror tokens below: * clock-light.svg, clock-button-light.svg --ttp-text * clock-dark.svg, clock-button-dark.svg, clock-white.svg, * estimate-white.svg #ffffff * * Trello's — drawn on Trello's card front, beside Trello's own badge text, * so these match *Trello's* chrome and must NOT be pulled toward our * palette. #44546f is Atlassian's subtlest card-front text, which is why the * muted pair is the variant client.js actually serves in light mode: * clock-badge-light-muted.svg, estimate-badge-light-muted.svg #44546f * clock-badge-dark.svg, estimate-badge-dark.svg #9fadbc * * (clock-badge-light.svg and estimate-badge-light.svg, #626f86, are the * non-muted variant and are currently unreferenced.) * * tests/test_powerup_palette.py pins the exact paint inventory of every SVG, * so a change to any of them has to be deliberate — but it does not require * them to be our colours, because half of them deliberately are not. */ /* ======================================================================== TEAL — active palette ======================================================================== */ /* * color-scheme themes the browser's *native* widgets — the date input's * calendar button and its picker panel, select dropdowns, scrollbars. Without * it Chrome draws them for a light page whatever our own colours say, which is * why the calendar icon showed up grey and half invisible on the dark card * back. It has to travel with the theme, so it is set in all three places * data-theme is. */ :root { color-scheme: light; /* structure */ --ttp-text: #172b4d; --ttp-text-subtle: #626f86; --ttp-border: #091e4224; --ttp-bg: #ffffff; --ttp-surface: #ffffff; --ttp-neutral: #091e420f; --ttp-neutral-hover: #091e4224; /* action — everything a person can invoke */ --ttp-action: #0b8275; --ttp-action-hover: #096b60; --ttp-action-soft: #eaf8f5; /* * Ink for text sitting on --ttp-action-soft. Its own token rather than a * borrowed --ttp-action-hover: those two happen to share a value here, and * coupling a contrast guarantee to a hover colour means the next hover * tweak silently breaks legibility. */ --ttp-action-soft-ink: #096b60; --ttp-on-fill: #ffffff; /* focus — indication only */ --ttp-focus: #0c66e4; --ttp-focus-soft: #e9f2fe; /* status */ --ttp-success: #216e4e; --ttp-success-hover: #1b5a3f; --ttp-success-soft: #e4f3ea; --ttp-danger: #c9372c; --ttp-danger-hover: #ae2e24; --ttp-danger-soft: #ffeceb; /* * Categorical chart hues: which board, which person. Hue *is* the identity * here, so no member may equal an action or status colour — a bar painted * --ttp-action reads as "press me" and a green one reads as "good". That is * what --bv-d0 (#0c66e4, i.e. exactly the old --ttp-primary) and --bv-d3 * (#1f845a, near the old --ttp-success) used to do. * * The order is not decorative. Five hues cannot all be told apart under * dichromacy, so what is guaranteed is that *adjacent* ones can be — bars * are ranked, so neighbours are what a reader compares. Worst adjacent pair, * CIEDE2000 after Vienot-Brettel-Mollon simulation: * * normal + protanopia + deuteranopia tritanopia * this ramp 35.7 3.4 * the ramp it replaces 14.2 3.4 * * Tritanopia (~0.01% of people, and unchanged from what shipped before) is * the accepted limit: magenta and amber collapse together under it. The * common forms, which are ~8% of men, are what the ordering buys. */ --bv-d0: #ae4787; --bv-d1: #b65c02; --bv-d2: #5e4db2; --bv-d3: #4c6b1f; --bv-d4: #44546f; /* * Sequential heat: how much, not which. Hue is constant and only lightness * carries meaning, so this one is deliberately the brand hue and its top * step is exactly --ttp-action — the same convention a contribution graph * uses. Steps 0-3 must stay legible under --ttp-text; only step 4 gets * --bv-heat-ink, because board-view.js adds the hot class at step 4 alone. */ --bv-h0: #f1f2f4; --bv-h1: #e4f6f1; --bv-h2: #bfe9e0; --bv-h3: #7fd0c2; --bv-h4: #0b8275; --bv-heat-ink: #ffffff; /* * Shadows and the modal scrim. Previously hardcoded Atlassian light-theme * navy in both themes, where on a dark board the scrim read as a dirty film * rather than as darkening. */ --ttp-scrim: rgba(9, 30, 66, .54); --ttp-shadow-1: 0 8px 24px rgba(9, 30, 66, .22); --ttp-shadow-2: 0 12px 32px rgba(9, 30, 66, .32); } :root[data-theme="dark"] { color-scheme: dark; --ttp-text: #b6c2cf; --ttp-text-subtle: #9fadbc; --ttp-border: #a6c5e229; --ttp-bg: #242528; --ttp-surface: #22272b; --ttp-neutral: #a1bdd914; --ttp-neutral-hover: #a6c5e229; --ttp-action: #5ad6c6; --ttp-action-hover: #82e2d6; --ttp-action-soft: #123d3a; --ttp-action-soft-ink: #82e2d6; --ttp-on-fill: #1d2125; --ttp-focus: #579dff; --ttp-focus-soft: #1c2b41; --ttp-success: #7ee2b8; --ttp-success-hover: #baf3db; --ttp-success-soft: #14301f; --ttp-danger: #f87168; --ttp-danger-hover: #ff9c8f; --ttp-danger-soft: #42221f; --bv-d0: #e774bb; --bv-d1: #e2b203; --bv-d2: #b8acf6; --bv-d3: #94c748; --bv-d4: #8c9bab; --bv-h0: #22272b; --bv-h1: #17332f; --bv-h2: #12463f; --bv-h3: #0f5750; --bv-h4: #12786d; --bv-heat-ink: #ffffff; --ttp-scrim: rgba(0, 0, 0, .64); --ttp-shadow-1: 0 8px 24px rgba(0, 0, 0, .44); --ttp-shadow-2: 0 12px 32px rgba(0, 0, 0, .56); } /* * "Match system" in Trello resolves to no explicit theme for the iframe, so * fall back to the OS preference. data-theme (set by ttpInitTheme) always wins * over this block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ttp-text: #b6c2cf; --ttp-text-subtle: #9fadbc; --ttp-border: #a6c5e229; --ttp-bg: #242528; --ttp-surface: #22272b; --ttp-neutral: #a1bdd914; --ttp-neutral-hover: #a6c5e229; --ttp-action: #5ad6c6; --ttp-action-hover: #82e2d6; --ttp-action-soft: #123d3a; --ttp-action-soft-ink: #82e2d6; --ttp-on-fill: #1d2125; --ttp-focus: #579dff; --ttp-focus-soft: #1c2b41; --ttp-success: #7ee2b8; --ttp-success-hover: #baf3db; --ttp-success-soft: #14301f; --ttp-danger: #f87168; --ttp-danger-hover: #ff9c8f; --ttp-danger-soft: #42221f; --bv-d0: #e774bb; --bv-d1: #e2b203; --bv-d2: #b8acf6; --bv-d3: #94c748; --bv-d4: #8c9bab; --bv-h0: #22272b; --bv-h1: #17332f; --bv-h2: #12463f; --bv-h3: #0f5750; --bv-h4: #12786d; --bv-heat-ink: #ffffff; --ttp-scrim: rgba(0, 0, 0, .64); --ttp-shadow-1: 0 8px 24px rgba(0, 0, 0, .44); --ttp-shadow-2: 0 12px 32px rgba(0, 0, 0, .56); } } /* ======================================================================== BLUE — alternate palette, override only ======================================================================== */ /* * Only the tokens that differ from teal. Structure, status and the categorical * ramp are shared: no member of --bv-d* equals either palette's action colour, * so the chart hues need no second version. * * The heat ramp does change, because it is the brand hue by design. Note the * dark ramp's top two steps are NOT the values this palette shipped with: * #0055cc under --ttp-text was 3.66 and #1d7afc under white was 4.01, both * below AA. They are now #0d4a9e (4.66) and #0c66e4 (5.20). */ :root[data-palette="blue"] { --ttp-action: #0c66e4; --ttp-action-hover: #0055cc; --ttp-action-soft: #e9f2fe; --ttp-action-soft-ink: #0055cc; --bv-h0: #f1f2f4; --bv-h1: #e9f2fe; --bv-h2: #cfe1fd; --bv-h3: #8fb8f6; --bv-h4: #0c66e4; } :root[data-palette="blue"][data-theme="dark"] { --ttp-action: #579dff; --ttp-action-hover: #85b8ff; --ttp-action-soft: #1c2b41; --ttp-action-soft-ink: #85b8ff; --bv-h0: #22272b; --bv-h1: #1c2b41; --bv-h2: #09326c; --bv-h3: #0d4a9e; --bv-h4: #0c66e4; } @media (prefers-color-scheme: dark) { :root[data-palette="blue"]:not([data-theme="light"]) { --ttp-action: #579dff; --ttp-action-hover: #85b8ff; --ttp-action-soft: #1c2b41; --ttp-action-soft-ink: #85b8ff; --bv-h0: #22272b; --bv-h1: #1c2b41; --bv-h2: #09326c; --bv-h3: #0d4a9e; --bv-h4: #0c66e4; } }