a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
1// Design token system for ioma
2
3export global Theme {
4 // Set by each window via `changed is-dark => { Theme.dark = root.is-dark; }`
5 in-out property <bool> dark: false;
6
7 // Set by SettingsWindow from the user's text-size-mode setting (0=Default, 1=Large, 2=Larger).
8 // All font tokens multiply by this so system-level and manual accessibility scaling both work.
9 in-out property <float> font-scale: 1.0;
10
11 // ── Font sizes (semantic tokens) ───────────────────────────────────────────
12 out property <length> font_huge: 124px * font-scale; // overlay large number
13 out property <length> font_title: 48px * font-scale; // big page titles
14 out property <length> font_headline: 42px * font-scale; // secondary large headings
15 out property <length> font_header: 36px * font-scale; // header / section titles
16 out property <length> font_medium: 19px * font-scale; // medium emphasis
17 out property <length> font_body: 16px * font-scale; // body text / inputs
18 out property <length> font_label: 15px * font-scale; // labels, chips, buttons
19 out property <length> font_xsmall: 14px * font-scale; // helper / description text
20 out property <length> font_xxsmall: 13px * font-scale; // decorative / chrome text
21
22 // ── Window background ─────────────────────────────────────────────────────
23 // Light: warm cream / Dark: gentle dark blue (desaturated, not tech-stark)
24 out property <color> bg: self.dark ? #1A1D2B : #F3EFE7;
25
26 // ── Ink scale: primary text → near-invisible ──────────────────────────────
27 // Light base: #232028 (near-black, warm cast)
28 // Dark base: #EDE9E1 (warm off-white)
29 out property <color> ink: self.dark ? #EDE9E1 : #232028;
30 out property <color> ink-hi: self.dark ? #EDE9E1CC : #232028CC; // prominent secondary
31 out property <color> ink-mid: self.dark ? #EDE9E1AA : #232028AA; // standard secondary
32 out property <color> ink-lo: self.dark ? #EDE9E188 : #23202888; // tertiary / muted
33 out property <color> ink-sub: self.dark ? #EDE9E166 : #23202866; // subdued
34 out property <color> ink-dim: self.dark ? #EDE9E148 : #23202848; // placeholder
35 out property <color> ink-dis: self.dark ? #EDE9E138 : #23202838; // disabled
36
37 // ── Structure ─────────────────────────────────────────────────────────────
38 out property <color> line-med: self.dark ? #EDE9E128 : #23202828; // medium borders
39 out property <color> line: self.dark ? #EDE9E11A : #2320281A; // hair dividers
40 out property <color> tint: self.dark ? #EDE9E112 : #23202812; // hover bg tint
41 out property <color> tint-soft: self.dark ? #EDE9E108 : #23202808; // input focus bg
42 out property <color> toggle-off: self.dark ? #EDE9E120 : #23202820; // toggle unchecked
43
44 // ── Surfaces ──────────────────────────────────────────────────────────────
45 out property <color> surface: self.dark ? #EDE9E10F : #FFFFFF80; // cards, chips
46 out property <color> surface-inp: self.dark ? #EDE9E10A : #FFFFFF60; // input default bg
47 out property <color> surface-hov: self.dark ? #EDE9E11A : #FFFFFF; // hovered chip/card
48 out property <color> panel: self.dark ? #608DB518 : #FFFFFFB0; // section panel backgrounds
49
50 // ── Primary button (inverted palette) ─────────────────────────────────────
51 out property <color> btn-bg: self.dark ? #EDE9E1 : #232028;
52 out property <color> btn-bg-hov: self.dark ? #F0ECE5 : #3A3542;
53 out property <color> btn-fg: self.dark ? #1A1D2B : #F3EFE7;
54
55 // ── Window chrome (decorative circles) ────────────────────────────────────
56 out property <color> chrome: self.dark ? #EDE9E109 : #00000009;
57
58 // ── Accent: dusty baby blue — same in both modes ──────────────────────────
59 // ~207° hue, muted saturation — clearly blue without reading as corporate or electric
60 out property <color> accent: #608DB5;
61 out property <color> accent-muted: #608DB560; // focus border / ring
62 out property <color> accent-sel: #608DB530; // text selection highlight
63
64 // ── Interactive thumb (toggle, slider) ────────────────────────────────────
65 // Warm off-white in both modes — avoids clinical pure white against warm surfaces
66 out property <color> thumb: self.dark ? #EDE9E1 : #F9F7F4;
67
68 // ── Ambient shadow ─────────────────────────────────────────────────────────
69 out property <color> shadow: #00000026;
70
71 // ── Overlay-specific ──────────────────────────────────────────────────────
72 out property <color> progress-track: self.dark ? #252838 : #D8D2C6;
73}