bvandeusenandClaude Opus 5.5
65411d3ce8
#5092 "Tokens". base.html's inline palette was its own: white text on the gold button (1.81:1), a red at 3.26:1 on a card, a warning yellow at hue 42 beside the gold accent at 46, a lavender page title, serif labels at 13px and weights up to 700. - static/theme.css is design system 6's generated sheet (FabledSword + the Steward accent). static/steward.css is base.html's stylesheet moved out, with :root now aliases onto those tokens (--bg, --text-muted, --green…) so every template keeps rendering; it states no colour of its own. - Status text colours are Steward overrides recorded in the design system (tokens 182-184): success #5FB87A, warning #E08A3C, error #EC7A6C. The house -fg mixes read "up" as grey hint text (dE 8.2) and warning as the accent (dE 11.5); these are >= 4.5:1 on page, card, hover and their own 15-25% tints. --orange is now the midpoint of warning and error. - Primary button and active range button: dark text on gold (7.82:1). Danger button on the house destructive fill. Badges and alerts take the -fg colour on a tint; the gold badge uses --fs-accent-fg. - Type: Inter body, Fraunces only for page titles and h1/h2, JetBrains Mono for code; section and widget titles become the tiny caps label in the body face; weights capped at 500. - Removed: the lavender title and share-view gradient, #606080, and the undefined --card-bg, --accent-faint, --accent-bg, --bg-alt, --border-low and --row-alt (now real tokens); the dead settings/index.html. - Guards (tests/test_style_tokens.py): every var(--x) used is defined; steward.css states no colour or weight over 500; hex colours in templates may only go down (ceiling 75, from 81 before this change), each with a self-test that it can fail. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
74 lines
2.7 KiB
Python
74 lines
2.7 KiB
Python
"""Every colour a page draws comes from the design-system tokens (#5092).
|
|
|
|
- Every var(--x) a template or stylesheet uses is defined somewhere Steward
|
|
serves, so nothing silently falls back to the browser default.
|
|
- The base stylesheet states no colour or heavy weight of its own: values
|
|
are theme.css tokens (generated from design system 6) or aliases of them.
|
|
- Hex colours written into templates can only go down: each page moved onto
|
|
the tokens lowers HEX_CEILING (milestone 477 retires the rest).
|
|
"""
|
|
import pathlib
|
|
import re
|
|
|
|
import steward
|
|
|
|
_REPO = pathlib.Path(steward.__file__).parent.parent
|
|
_STATIC = _REPO / "steward" / "static"
|
|
_COMMENTS = re.compile(r"\{#.*?#\}|<!--.*?-->|/\*.*?\*/", re.S)
|
|
_DEFINED = re.compile(r"(--[\w-]+)\s*:")
|
|
_USED = re.compile(r"var\(\s*(--[\w-]+)")
|
|
# A hex colour where a colour goes: after a CSS ':', '(' or ',', or as a quoted JS
|
|
# string -- but not an HTML attribute's value (href="#abc" is a link to an id).
|
|
_HEX = re.compile(r"""(?:[:(,]\s*|(?<![\w-]=)['"])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})(?![0-9a-zA-Z_-])""")
|
|
|
|
HEX_CEILING = 75 # measured 2026-10-06 (#5092); lower it as pages move onto tokens, never raise it
|
|
|
|
|
|
def _templates():
|
|
for root in [_REPO / "steward" / "templates", *(_REPO / "plugins").glob("*/templates")]:
|
|
yield from root.rglob("*.html")
|
|
|
|
|
|
def _sheets():
|
|
return [p for p in _STATIC.rglob("*.css") if "vendor" not in p.parts]
|
|
|
|
|
|
def _text(p):
|
|
return _COMMENTS.sub("", p.read_text())
|
|
|
|
|
|
def undefined_vars(texts) -> set[str]:
|
|
defined, used = set(), set()
|
|
for t in texts:
|
|
defined |= set(_DEFINED.findall(t))
|
|
used |= set(_USED.findall(t))
|
|
return used - defined
|
|
|
|
|
|
def hex_colours(text: str) -> list[str]:
|
|
return _HEX.findall(_COMMENTS.sub("", text))
|
|
|
|
|
|
def test_the_guards_can_fail():
|
|
assert undefined_vars([":root { --a: 1; } .x { color: var(--a); background: var(--b); }"]) == {"--b"}
|
|
page = '<div style="color:#fff;background: rgb(0 0 0)" hx-target="#add-form"></div><script>c = "#4aa86a"</script>'
|
|
assert len(hex_colours(page)) == 2
|
|
assert hex_colours("{# color:#fff #}<a href=\"#abc\">") == []
|
|
|
|
|
|
def test_every_css_variable_used_is_defined():
|
|
texts = [_text(p) for p in [*_templates(), *_sheets()]]
|
|
assert not undefined_vars(texts)
|
|
|
|
|
|
def test_the_base_stylesheet_states_no_colour_or_heavy_weight_of_its_own():
|
|
css = _text(_STATIC / "steward.css")
|
|
assert not re.findall(r"#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(", css)
|
|
assert not re.findall(r"font-weight\s*:\s*(?:[6-9]00|bold)", css)
|
|
|
|
|
|
def test_hex_colours_in_templates_only_go_down():
|
|
count = sum(len(hex_colours(p.read_text())) for p in _templates())
|
|
assert count <= HEX_CEILING, (
|
|
f"{count} hex colours in templates, ceiling {HEX_CEILING}: use a token (theme.css / steward.css)")
|