fix: rename to black to avoid confusion with perfers-contrast settings

Author: danielroe

app/assets/main.css

@@ -17,7 +17,7 @@
   --fg-muted: oklch(0.709 0 0);
   --fg-subtle: oklch(0.633 0 0);
 
-  /* border, seperator colors */
+  /* border, separator colors */
   --border: oklch(0.269 0 0);
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
@@ -64,7 +64,7 @@
   --bg-elevated: oklch(0.252 0.007 34.298);
 }
 
-:root[data-theme='dark'][data-bg-theme='contrast'] {
+:root[data-theme='dark'][data-bg-theme='black'] {
   --bg: oklch(0 0 0);
   --bg-subtle: oklch(0.148 0 0);
   --bg-muted: oklch(0.204 0 0);

shared/utils/constants.ts

@@ -45,5 +45,5 @@ export const BACKGROUND_THEMES = {
   stone: 'oklch(0.555 0.013 58.123)',
   zinc: 'oklch(0.555 0.016 285.931)',
   slate: 'oklch(0.555 0.046 257.407)',
-  contrast: 'oklch(0.4 0 0)',
+  black: 'oklch(0.4 0 0)',
 } as const

test/nuxt/a11y.spec.ts

@@ -1848,8 +1848,8 @@ describe('background theme accessibility', () => {
     ['dark', 'zinc'],
     ['light', 'slate'],
     ['dark', 'slate'],
-    ['light', 'contrast'],
-    ['dark', 'contrast'],
+    ['light', 'black'],
+    ['dark', 'black'],
   ] as const
 
   function applyTheme(colorMode: string, bgTheme: string | null) {