jcoffey-dev
a6153c5f90
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.
35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<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">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|