Server Details
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index 854fd2b4..da0c0605 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
import { initPlausible } from '#lib/analytics/plausible.js';
import { initPostHog } from '#lib/analytics/posthog.js';
import NavigationProgress from '#lib/components/navigation-progress.svelte';
+ import { contrast } from '#lib/state/contrast.svelte.js';
let { children } = $props();
@@ -12,6 +13,10 @@
initPostHog();
initPlausible();
});
+
+ $effect(() => {
+ contrast.apply();
+ });
@@ -21,6 +26,8 @@
+ contrast.syncFromStorage(event)} />
+
diff --git a/apps/dashboard/src/routes/layout.css b/apps/dashboard/src/routes/layout.css
index 1436a6fc..6b3a3baf 100644
--- a/apps/dashboard/src/routes/layout.css
+++ b/apps/dashboard/src/routes/layout.css
@@ -5,6 +5,7 @@
@import "@fontsource-variable/inter";
@custom-variant dark (&:is(.dark *));
+@custom-variant high-contrast (&:is([data-contrast="more"] *));
:root {
--gray-50: #fafafa;
@@ -69,6 +70,73 @@
--ring: var(--gray-500);
}
+/*
+ * High contrast mode. Applied via `data-contrast="more"` on (see
+ * #lib/state/contrast.svelte.ts), so it stacks on top of light/dark. The red scale is remapped too, because many
+ * components use raw `red-*` utilities rather than semantic tokens.
+ */
+:root[data-contrast="more"] {
+ --red-200: #7a0d0d;
+ --red-300: #7a0d0d;
+ --red-400: #8f1010;
+ --red-500: #9b1111;
+ --red-600: #8a0f0f;
+ --red-700: #6e0b0b;
+ --red-950: #fff0f0;
+ --color-red-800: #6e0b0b;
+ --color-red-900: #5c0909;
+ --background: #ffffff;
+ --foreground: #000000;
+ --card: #ffffff;
+ --card-foreground: #000000;
+ --popover: #ffffff;
+ --popover-foreground: #000000;
+ --primary: #9b1111;
+ --primary-foreground: #ffffff;
+ --secondary: #f0f0f0;
+ --secondary-foreground: #000000;
+ --muted: #f0f0f0;
+ --muted-foreground: #262626;
+ --accent: #9b1111;
+ --accent-foreground: #ffffff;
+ --destructive: #9b1111;
+ --destructive-foreground: #ffffff;
+ --border: #000000;
+ --input: #000000;
+ --ring: #000000;
+}
+
+.dark[data-contrast="more"] {
+ --red-200: #ffe5e5;
+ --red-300: #ffcccc;
+ --red-400: #ffa3a3;
+ --red-500: #ff7a7a;
+ --red-600: #ff7a7a;
+ --red-700: #ff8f8f;
+ --red-950: #1a0000;
+ --color-red-800: #ff8f8f;
+ --color-red-900: #ff8f8f;
+ --background: #000000;
+ --foreground: #ffffff;
+ --card: #000000;
+ --card-foreground: #ffffff;
+ --popover: #000000;
+ --popover-foreground: #ffffff;
+ --primary: #ff7a7a;
+ --primary-foreground: #000000;
+ --secondary: #1a1a1a;
+ --secondary-foreground: #ffffff;
+ --muted: #1a1a1a;
+ --muted-foreground: #e5e5e5;
+ --accent: #ff7a7a;
+ --accent-foreground: #000000;
+ --destructive: #ff7a7a;
+ --destructive-foreground: #000000;
+ --border: #ffffff;
+ --input: #ffffff;
+ --ring: #ffffff;
+}
+
@theme inline {
--color-gray-50: var(--gray-50);
--color-gray-100: var(--gray-100);
@@ -133,6 +201,74 @@
background-color: var(--background);
@apply text-foreground antialiased;
}
+ [data-contrast="more"] :focus-visible {
+ outline: 2px solid var(--ring) !important;
+ outline-offset: 2px;
+ }
+}
+
+/*
+ * High contrast: many borders, dividers, rings and text use an opacity modifier
+ * (e.g. `border-border/50`, `text-foreground/60`), which washes them out.
+ * Force them opaque. Exact class tokens (`~=`) are used so variant classes such
+ * as `aria-invalid:border-destructive/50` are NOT matched. Specificity equals
+ * the base utility (it comes later, so it wins), while stateful variants like
+ * `hover:border-ring` still take precedence.
+ */
+@layer utilities {
+ :where([data-contrast="more"]) [class~="border-border/20"],
+ :where([data-contrast="more"]) [class~="border-border/30"],
+ :where([data-contrast="more"]) [class~="border-border/40"],
+ :where([data-contrast="more"]) [class~="border-border/50"],
+ :where([data-contrast="more"]) [class~="border-border/60"],
+ :where([data-contrast="more"]) [class~="border-border/80"],
+ :where([data-contrast="more"]) [class~="border-input/30"] {
+ border-color: var(--border);
+ }
+
+ :where([data-contrast="more"]) [class~="divide-border/20"] > :where(:not(:last-child)),
+ :where([data-contrast="more"]) [class~="divide-border/30"] > :where(:not(:last-child)),
+ :where([data-contrast="more"]) [class~="divide-border/40"] > :where(:not(:last-child)),
+ :where([data-contrast="more"]) [class~="divide-border/50"] > :where(:not(:last-child)) {
+ border-color: var(--border);
+ }
+
+ :where([data-contrast="more"]) [class~="ring-foreground/10"] {
+ --tw-ring-color: var(--border);
+ }
+
+ :where([data-contrast="more"]) [class~="border-red-400/60"],
+ :where([data-contrast="more"]) [class~="border-red-500/10"],
+ :where([data-contrast="more"]) [class~="border-red-500/20"],
+ :where([data-contrast="more"]) [class~="border-red-500/50"],
+ :where([data-contrast="more"]) [class~="border-red-900/50"],
+ :where(.dark[data-contrast="more"])
+ [class~="dark:border-red-800/50"][class~="dark:border-red-800/50"],
+ :where(.dark[data-contrast="more"])
+ [class~="dark:border-red-900/20"][class~="dark:border-red-900/20"],
+ :where(.dark[data-contrast="more"])
+ [class~="dark:border-red-900/30"][class~="dark:border-red-900/30"],
+ :where(.dark[data-contrast="more"])
+ [class~="dark:border-red-900/40"][class~="dark:border-red-900/40"],
+ :where(.dark[data-contrast="more"])
+ [class~="dark:border-red-900/50"][class~="dark:border-red-900/50"] {
+ border-color: var(--red-500);
+ }
+
+ :where([data-contrast="more"]) [class~="text-foreground/60"] {
+ color: var(--foreground);
+ }
+
+ :where([data-contrast="more"]) [class~="text-muted-foreground/60"] {
+ color: var(--muted-foreground);
+ }
+
+ :where([data-contrast="more"]) [class~="text-red-200/80"],
+ :where([data-contrast="more"]) [class~="text-red-300/70"],
+ :where([data-contrast="more"]) [class~="text-red-400/60"],
+ :where([data-contrast="more"]) [class~="text-red-400/80"] {
+ color: var(--red-400);
+ }
}
@utility icon-flat {
diff --git a/apps/dashboard/tests/accessibility.test.ts b/apps/dashboard/tests/accessibility.test.ts
index fec77aef..cd095753 100644
--- a/apps/dashboard/tests/accessibility.test.ts
+++ b/apps/dashboard/tests/accessibility.test.ts
@@ -17,21 +17,30 @@ function formatImpact(impact: string | null | undefined) {
return impactKey[impact] ?? impact;
}
-const modes = ['dark', 'light'] as const;
+const modes = [
+ { label: 'dark', mode: 'dark', contrast: 'off' },
+ { label: 'light', mode: 'light', contrast: 'off' },
+ { label: 'dark high contrast', mode: 'dark', contrast: 'on' },
+ { label: 'light high contrast', mode: 'light', contrast: 'on' }
+] as const;
-for (const mode of modes) {
+for (const { label: modeLabel, mode, contrast } of modes) {
for (const { label, path } of pages) {
- test(`Testing for accessibility violations on ${label} in ${mode} mode.`, async ({
+ test(`Testing for accessibility violations on ${label} in ${modeLabel} mode.`, async ({
page,
makeAxeBuilder
}) => {
- await page.addInitScript((selectedMode) => {
- window.localStorage.setItem('mode-watcher-mode', selectedMode);
- }, mode);
+ await page.addInitScript(
+ ([selectedMode, selectedContrast]) => {
+ window.localStorage.setItem('mode-watcher-mode', selectedMode);
+ window.localStorage.setItem('contrast-preference', selectedContrast);
+ },
+ [mode, contrast] as const
+ );
await page.goto(`${localURL}${path}`, { waitUntil: 'networkidle' });
const { violations } = await makeAxeBuilder().analyze();
- const reportMessage = `Found ${violations.length} accessibility violations on ${label} in ${mode} mode.`;
+ const reportMessage = `Found ${violations.length} accessibility violations on ${label} in ${modeLabel} mode.`;
if (violations.length === 0) {
expect(violations, reportMessage).toHaveLength(0);