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.
2026-08-16 12:35:10 -07:00
parent fb502f3d31
commit a6153c5f90
10 changed files with 451 additions and 0 deletions
@@ -4,6 +4,28 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="text-scale" content="scale" />
+		<script>
+			// Applied synchronously, before first paint, so switching themes
+			// never produces a flash of the wrong one on reload. Kept as a
+			// plain inline script (not a Svelte component) for exactly that
+			// reason -- component code doesn't run until after SvelteKit
+			// hydrates. Mirrors the read/write shape of $lib/theme.ts and
+			// $lib/density.ts; see those for the source of truth.
+			(function () {
+				try {
+					var theme = localStorage.getItem('sentry.theme');
+					if (theme === 'dark' || theme === 'light') {
+						document.documentElement.setAttribute('data-theme', theme);
+					}
+					if (localStorage.getItem('sentry.density') === 'compact') {
+						document.documentElement.classList.add('density-compact');
+					}
+				} catch (e) {
+					/* localStorage unavailable (private mode, etc.) -- fall back
+					   to the dark/comfortable defaults, same as a first visit. */
+				}
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">