The look of the web app is controlled by CSS custom properties in webapp/css/tokens.css and by attributes that prefs.js and a11y.js set on the root element. This page lists the token groups, the theme and density switches, the seven accessibility settings, and the icon registry in icons.js. Where each preference is stored is summarised on user UI state.
Scope and source¶
- Defined in:
webapp/css/tokens.css,webapp/js/prefs.js,webapp/js/a11y.js,webapp/js/a11y-ui.js(renderAccessibility),webapp/js/icons.js(ICONS,icon) - Count: 74 distinct custom properties declared in the
:rootblock oftokens.css(lines 5-145, counted withgrep -o "^\s*--[a-z0-9-]*:"andsort -u); 146 custom property declarations in the whole file including overrides; 2 themes; 3 densities; 7 accessibility settings; 99 icons inICONS(counted withgrep -cE "^ '[a-z0-9-]+': \{")
Token groups¶
| Group | Tokens | Purpose | Source |
|---|---|---|---|
| Font | --font |
Manrope first, then system fallbacks | webapp/css/tokens.css:8-10 |
| Labels | --label, --label-2, --label-3 |
Text colours at three emphasis levels | webapp/css/tokens.css:12-15 |
| Accents | --blue, --green, --red, --amber, --orange, --teal, --purple, --yellow, and -fg variants |
Status and category colours | webapp/css/tokens.css:17-37 |
| Lines | --sep, --stroke |
Separators and control borders | webapp/css/tokens.css:39-44 |
| Glass materials | --glass-thin, --glass-regular, --glass-stroke, --glass-spec, --blur-thin, --blur-regular |
Translucent surfaces | webapp/css/tokens.css:46-52 |
| Scene light | --icon-light |
Strength of light on icon tiles, driven by the brightness setting | webapp/css/tokens.css:54-60 |
| Radius | --r-xs to --r-2xl, --r-field, --r-capsule |
Corner radii | webapp/css/tokens.css:62-72 |
| Motion | --ease-spring, --ease-snap, --ease-glide, --dur-1 to --dur-5 |
Easing curves and durations | webapp/css/tokens.css:74-85 |
| Spacing | --sp-1 to --sp-8 |
4 px based spacing scale | webapp/css/tokens.css:87-95 |
| Type scale | --fs-4xs to --fs-4xl |
Font sizes in rem | webapp/css/tokens.css:97-113 |
| Elevation | --elev-1 to --elev-4 |
Shadows | webapp/css/tokens.css:115-120 |
| Layers | --z-scrim to --z-drag-top |
Named stacking levels | webapp/css/tokens.css:122-131 |
| Surfaces | --on-accent, --surface |
Text on accent fills and the app surface | webapp/css/tokens.css:133-145 |
The root font size scales with the window width between 16 px and 18 px and is multiplied by the font scale setting (webapp/css/tokens.css:206-208).
Themes¶
| Theme | Selector | Default when | Source |
|---|---|---|---|
| Dark | no attribute (:root) |
No stored choice and the system does not prefer light | webapp/css/tokens.css:5-145, webapp/js/prefs.js:47-60 |
| Light | html[data-theme='light'] |
The system prefers light and no choice is stored | webapp/css/tokens.css:178-205, webapp/js/prefs.js:52-56 |
setTheme stores the choice in local storage under cluster_theme and applies it. Transitions are muted for one frame during the switch (webapp/js/prefs.js:61-77). The choice is made on Settings › General (webapp/js/general.js:13-63).
Row density¶
| Tier | Attribute | Source |
|---|---|---|
comfortable |
data-density="comfortable" |
webapp/js/prefs.js:85, webapp/css/gen.css:5038-5044 |
default |
none | webapp/js/prefs.js:85-105 |
compact |
data-density="compact" |
webapp/js/prefs.js:85, webapp/css/gen.css:5038 |
setDensity stores the tier in local storage under cluster_density and in the user account under the UI-state key density (webapp/js/prefs.js:84-99). The comment states that compact rows apply only on fine-pointer devices and touch keeps the 44 px row floor (webapp/js/prefs.js:79-83). The list header offers a density chip; see generic list.
Accessibility settings¶
a11y.js keeps seven settings in local storage under cluster_a11y, applies them before first paint, and keeps duplicated home tiles in step through the storage event (webapp/js/a11y.js:5, webapp/js/a11y.js:90-105).
| Setting | Values | Applied as | Source |
|---|---|---|---|
font_scale |
small 0.87, default 1.0, large 1.13, xlarge 1.27 |
--fscale |
webapp/js/a11y.js:11, webapp/js/a11y.js:55 |
high_contrast |
off, light |
data-hc |
webapp/js/a11y.js:12, webapp/js/a11y.js:68, webapp/css/tokens.css:290-318 |
reduced_motion |
on or off | data-rm; animations and transitions off |
webapp/js/a11y.js:87, webapp/css/tokens.css:319-326 |
dyslexia_font |
on or off | data-dyslexia; dyslexia-friendly font stack and wider spacing |
webapp/js/a11y.js:86, webapp/css/tokens.css:210-217 |
color_blind_mode |
off, protanopia, deuteranopia, tritanopia |
data-cb; replacement accent palettes |
webapp/js/a11y.js:13, webapp/js/a11y.js:69, webapp/css/tokens.css:219-240 |
reading_bg |
off, peach, orange, yellow, or a hex colour |
data-rbg and --reading-bg |
webapp/js/a11y.js:14-16, webapp/js/a11y.js:70-85 |
brightness |
50 to 150, default 100 | --a11y-bright and --icon-light |
webapp/js/a11y.js:142-145, webapp/js/a11y.js:56-63 |
The operating system's reduced-motion preference turns animations off even when the app setting is off (webapp/css/tokens.css:328-337). A stored high-contrast value dark is read as light (webapp/js/a11y.js:35-39). The settings screen is renderAccessibility, reachable from Settings › Accessibility and from a button on the sign-in screen (webapp/js/a11y-ui.js:229, webapp/js/main.js:139-150).
a11y-ui.js also provides the confirm dialogs used across the app: confirmAlert, confirmTyped, and askDeactivation, which asks for a deactivation reason loaded from the server (webapp/js/a11y-ui.js:39-227).
Keyboard and screen reader support¶
| Feature | Source |
|---|---|
Skip link to the home grid (a11y.skip_to_content) |
webapp/index.html:77, webapp/css/tokens.css:339-357 |
| Visible focus ring | webapp/css/tokens.css:146-152 |
| Focus trap in sheets and dialogs, focus returned to the opener | webapp/js/ui.js:121-167, webapp/js/action-sheet.js:104-105 |
| Tab bar with roving focus and arrow keys | webapp/js/module-app.js:156-212 |
| Offline banner with a polite live region | webapp/js/main.js:182-207 |
Icon registry¶
ICONS maps a name to an SVG, search tags in Turkish and English, and a right-to-left rule (webapp/js/icons.js:30-559). Object glyphs are filled shapes; sign glyphs are 2.4 px strokes (webapp/js/icons.js:21-28). icon(name, cls) returns the SVG with aria-hidden and focusable="false"; an unknown name returns an empty string (webapp/js/icons.js:562-570). The comment states that icon-only buttons carry their accessible name on the button.
Constraints and validation¶
- Setters ignore values outside the allowed lists, and brightness is clamped to 50 to 150 (
webapp/js/a11y.js:112-145). - The dyslexia font stack names OpenDyslexic first (
webapp/css/tokens.css:211-213). The font is not shipped inwebapp/fonts/, so the browser uses it only when it is installed on the device. - Browser tests:
web-client/_e2e_ui_a11y.mjs,web-client/_e2e_login_a11y.mjs,web-client/_e2e_density.mjs,web-client/_e2e_touch_sweep.mjs.
Terms introduced¶
| Term | Code identifier | Definition | Turkish term | Source |
|---|---|---|---|---|
| design token | --label and others |
A CSS custom property that every screen reads instead of a fixed value. | tasarım belirteci | webapp/css/tokens.css:5 |
| row density | setDensity |
The user's choice of how tightly lists and tables pack their rows. | Satır yoğunluğu | webapp/js/prefs.js:90 |
| reading background | reading_bg |
A tinted surface colour chosen for easier reading. | okuma arka planı | webapp/js/a11y.js:24 |
| icon registry | ICONS |
The single source of every glyph used by the web app. | ikon kaydı | webapp/js/icons.js:30 |
Related pages¶
Verified against commit 92f8051 on 2026-11-13.