feat(appearance): add accessible display preferences

packages/appearance/src/theme.ts

@@ -5,6 +5,11 @@ import {
   type ThemeColorConfig,
   type ThemeScheme,
 } from "./themes"
+import {
+  getColorVisionCssVariables,
+  type ColorVisionMode,
+} from "./color-vision"
+import { applyBrightnessToTheme, type Brightness } from "./display"
 
 export {
   accentColors,
@@ -42,13 +47,30 @@ function serializeThemeVariables(theme: Record<string, string>): string {
 }
 
 export function buildThemeStyleSheet(
-  lightConfig: ThemeColorConfig,
-  darkConfig: ThemeColorConfig
+  config: ThemeColorConfig,
+  colorVisionMode: ColorVisionMode = "standard",
+  brightness: Brightness = "normal"
 ) {
   const light = serializeThemeVariables(
-    getThemeCssVariables("light", lightConfig)
+    applyBrightnessToTheme(
+      {
+        ...getThemeCssVariables("light", config),
+        ...getColorVisionCssVariables(colorVisionMode, "light"),
+      },
+      brightness,
+      "light"
+    )
+  )
+  const dark = serializeThemeVariables(
+    applyBrightnessToTheme(
+      {
+        ...getThemeCssVariables("dark", config),
+        ...getColorVisionCssVariables(colorVisionMode, "dark"),
+      },
+      brightness,
+      "dark"
+    )
   )
-  const dark = serializeThemeVariables(getThemeCssVariables("dark", darkConfig))
 
   return [
     `:root,.ui\\:light{${light}}`,