Build the Signal design system: tokens, fonts, theme, density
Self-hosted variable fonts (Overpass/Overpass Mono, OFL-licensed) -- no CDN dependency for the app to render correctly. Dark is the literal default in tokens.css (:root defines it directly; light is the override via both prefers-color-scheme and an explicit data-theme), not a retrofit. Severity tokens collapse OTel's seven severities to five visual tiers (severity.ts); their translucent -bg variants and light-mode warn's base color are already tuned for WCAG AA contrast against an opaque surface, not just the plain page background -- verified with real axe-core runs during the accessibility pass, see docs/design-system.md. theme.svelte.ts/density.svelte.ts persist to localStorage and expose getter/setter functions wrapping module-level $state (Svelte 5's shared-state-module pattern -- a directly exported $state doesn't preserve reactivity across modules). app.html's inline script applies both before first paint to avoid a flash of the wrong theme/density.
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
Overpass and Overpass Mono are licensed under the SIL Open Font License,
|
||||
Version 1.1: https://openfontlicense.org/
|
||||
|
||||
Fetched from Google Fonts (fonts.google.com/specimen/Overpass,
|
||||
fonts.google.com/specimen/Overpass+Mono) and self-hosted here rather than
|
||||
loaded from a CDN, so the app has no runtime dependency on Google's font
|
||||
service.
|
||||
Reference in New Issue
Block a user