From cbfeea0a4e9b34e94c6dbdb24eec20fa00da067e Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Apr 2026 13:53:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20uiFont=20preference?=
 =?UTF-8?q?=20to=20accessibility=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add UiFont type with four options and Extend AccessibilityState.
---
 src/frontend/src/stores/accessibility.ts | 39 ++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/frontend/src/stores/accessibility.ts b/src/frontend/src/stores/accessibility.ts
index 3c6399f5..bd4b5a0f 100644
--- a/src/frontend/src/stores/accessibility.ts
+++ b/src/frontend/src/stores/accessibility.ts
@@ -2,6 +2,39 @@ import { proxy, subscribe } from 'valtio'
 import { STORAGE_KEYS } from '@/utils/storageKeys'
 import { deserializeToProxyMap } from '@/utils/valtio'
 
+export type UiFont =
+  | 'default'
+  | 'lexend'
+  | 'atkinson-hyperlegible'
+  | 'opendyslexic'
+
+export const UI_FONT_OPTIONS: UiFont[] = [
+  'default',
+  'lexend',
+  'atkinson-hyperlegible',
+  'opendyslexic',
+]
+
+const SYSTEM_SANS_STACK = [
+  'ui-sans-serif',
+  'system-ui',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Arial',
+  '"Noto Sans"',
+  'sans-serif',
+].join(', ')
+
+export const UI_FONT_STACKS: Record<UiFont, string> = {
+  default: SYSTEM_SANS_STACK,
+  lexend: `"Lexend Variable", ${SYSTEM_SANS_STACK}`,
+  'atkinson-hyperlegible': `"Atkinson Hyperlegible Next", ${SYSTEM_SANS_STACK}`,
+  opendyslexic: `OpenDyslexic, ${SYSTEM_SANS_STACK}`,
+}
+
 export type CaptionTextSize = 'small' | 'medium' | 'large'
 
 export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
@@ -62,6 +95,7 @@ type AccessibilityState = {
   captionTextSize: CaptionTextSize
   captionFontColor: CaptionColor
   captionBackgroundColor: CaptionColor
+  uiFont: UiFont
 }
 
 const DEFAULT_STATE: AccessibilityState = {
@@ -69,6 +103,7 @@ const DEFAULT_STATE: AccessibilityState = {
   captionTextSize: 'medium',
   captionFontColor: 'default',
   captionBackgroundColor: 'default',
+  uiFont: 'default',
 }
 
 function getAccessibilityState(): AccessibilityState {
@@ -91,6 +126,9 @@ function getAccessibilityState(): AccessibilityState {
       )
         ? parsed.captionBackgroundColor
         : DEFAULT_STATE.captionBackgroundColor
+      const uiFont = UI_FONT_OPTIONS.includes(parsed.uiFont)
+        ? parsed.uiFont
+        : DEFAULT_STATE.uiFont
       return {
         ...DEFAULT_STATE,
         ...parsed,
@@ -101,6 +139,7 @@ function getAccessibilityState(): AccessibilityState {
         captionTextSize,
         captionFontColor,
         captionBackgroundColor,
+        uiFont,
       }
     }