/* ============================================================================= AMERICON HELP ============================================================================= Two things live here: the "?" trigger that sits beside controls all over the site, and the manual page at /help. ON THE TOKENS ------------- Everything reads the theme's semantic tokens (--am-surface, --am-text, ...) with a hard fallback in each var(). The fallbacks are not defensive decoration: tools/build-manual.php renders this same markup into a standalone HTML file that carries no theme stylesheet at all, and its own token block is a subset. Anything without a fallback would render as inherited-black-on-transparent there. ON THE TRIGGER BEING SMALL -------------------------- It is a 14px glyph in a 24px hit area. The glyph has to be quiet -- one sits next to a dozen labels on the project editor and a row of loud ones would compete with the form itself -- but the target has to be pressable with a thumb, which is what the padding is for. They are separate problems and this solves both rather than splitting the difference. ========================================================================== */ /* ============================================================================= Ink tokens ----------------------------------------------------------------------------- WHY THE THEME'S --am-accent IS NOT USED DIRECTLY FOR TEXT AND ICONS --am-accent resolves to #272E7E in light and #5964D3 in dark. The light value is ink: 9.9:1 on white. The dark value is a FILL -- it measures 3.15:1 against --am-surface, which clears the 3:1 floor for a large graphic and fails the 4.5:1 one for anything anybody has to read. Used for both, as it was, the manual rendered accent-coloured labels, chips, card titles and icon tiles at around 3:1 in dark mode. The contents list was the visible symptom -- tiles you could not make out -- but eight other pairs were failing alongside it, and none of them were noticeable on a machine running in light mode, where the identical CSS measures 10:1. So: --am-accent keeps meaning "the accent fill", and these mean "the accent as something to read". They part company only in dark mode. Every value here is measured by tests/test-contrast.php, which resolves both schemes and fails the build under threshold. Change one and run it. ========================================================================== */ :root { /* * Accent and danger AS INK. * * These began life here, as the manual's own fix for accent-coloured text * measuring ~3:1 in dark mode. The same defect turned out to run through the * whole site -- every link, every active filter -- so the tokens moved to * themes/americon-bid/style.css and these are now aliases. * * They stay as aliases rather than being deleted for one reason: the * standalone manual built by tools/build-manual.php carries no theme * stylesheet at all. Its own token block defines --am-accent-ink and * --am-danger-ink, and the var() fallbacks below are the last line of * defence if it ever forgets to. */ --am-help-ink-accent: var(--am-accent-ink, #272E7E); --am-help-ink-danger: var(--am-danger-ink, #C0101D); /* Tip's ink. --am-teal already ships as text in this file (the staff audience badge), and it carries its own light-dark() pair in the theme, so it needs no separate correction the way accent and danger did. */ --am-help-ink-tip: var(--am-teal, #0F7A57); /* The icon tiles in the contents list and the section bands. A flat pair rather than a percentage tint of the accent: a tint is a different colour in each scheme AND a different contrast against each surface, which is exactly how the dark one ended up at 2.9:1. Manual-only, so it stays here. */ --am-help-tile-ink: #272E7E; --am-help-tile-ink: light-dark(#272E7E, #AEB5F7); --am-help-tile-bg: #E6E9FA; --am-help-tile-bg: light-dark(#E6E9FA, #2A3150); /* Small uppercase labels -- section numbers, eyebrows, "See also". Now identical to --am-text-subtle, which was darkened site-wide for the same reason this existed. Kept as an alias so the manual's labels can be tuned without touching every label on the site. */ --am-help-label: var(--am-text-subtle, #646D79); /* * The "?" trigger's own ink. * * It used to take --am-text-subtle -- the site's quietest grey -- on the * reasoning at the head of this file: a glyph that repeats a dozen times * down the project editor must not compete with the labels it annotates. * That reasoning is still right, and it was worked out entirely on white. * * The token itself flips correctly, and the trigger measured 4.8:1 light * and 5.6:1 dark. Both clear AA, and the dark one still read as an empty * ring you had to go looking for, because the ratio is not the whole story * for this particular mark: it is a HAIRLINE OUTLINE, and a hairline loses * far more apparent weight light-on-dark than dark-on-light does. Beside a * bold near-white heading it vanished. So the token adjusted and the design * did not -- one intent applied twice is not the same as a value per scheme. * * Hence its own pair rather than another --am-text-subtle call site. Light * is the value it already had and nobody complained about. Dark steps up to * 8.2:1 on the page and 7.4:1 on a card -- present at a glance, and still * clearly quieter than body text at ~12:1, which is the half of the * original intent worth keeping. * * Not applied to --am-text-subtle itself: that token backs twenty-odd * uppercase labels and eyebrows, which are SOLID text and were never the * thing that was hard to see. Lifting it would have brightened all of them * to fix one glyph. * * Measured by tests/test-contrast.php against all four surfaces, like every * other ink here. Change it and run that. */ --am-help-trigger: #646D79; --am-help-trigger: light-dark(#646D79, #A9B2C1); } /* ============================================================================= Icons ----------------------------------------------------------------------------- Bootstrap Icons, inlined from help/icons.php. All 16x16, all currentColor, all decorative -- see the note at the head of help/render.php for why they never carry meaning on their own. Sized in em rather than px so an icon scales with the text it sits beside; the type scale here is fluid, and a fixed 16px glyph next to a clamp()ed heading is right at exactly one viewport width. ========================================================================== */ .am-help-i { inline-size: 1em; block-size: 1em; flex: none; /* Optical centring against lowercase text. Icons sit on the text baseline otherwise and read as if they are falling off the line. */ vertical-align: -.125em; } /* ============================================================================= The "?" trigger ========================================================================== */ .am-help { /* inline-flex, not inline-block: it usually follows a