a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
refactor(ui): replace hardcoded font sizes with theme tokens
+55
-39
+2
-1
src/settings/mod.rs
+2
-1
src/settings/mod.rs
···
151
151
// include_bytes with concat! so path is resolved from manifest dir at compile time
152
152
let font_bytes = include_bytes!(concat!(env!("CARGO_MANIFEST_DIR"), "/assets/fonts/Nunito-Regular.ttf"));
153
153
let font = Font::from_bytes(font_bytes.as_ref(), fontdue::FontSettings::default()).unwrap();
154
-
let font_size = 12.0;
154
+
// measure at an accessible base size (16px)
155
+
let font_size = 16.0;
155
156
names
156
157
.iter()
157
158
.map(|s| {
+2
-2
ui/components/atoms.slint
+2
-2
ui/components/atoms.slint
···
14
14
15
15
Text {
16
16
text: root.title;
17
-
font-size: 13px;
17
+
font-size: Theme.font_body;
18
18
font-weight: 500;
19
19
color: Theme.ink;
20
20
}
21
21
22
22
if root.description != "": Text {
23
23
text: root.description;
24
-
font-size: 11.5px;
24
+
font-size: Theme.font_xsmall;
25
25
color: Theme.ink-mid;
26
26
}
27
27
}
+2
-2
ui/components/chips.slint
+2
-2
ui/components/chips.slint
···
59
59
60
60
chipText := Text {
61
61
text: label;
62
-
font-size: 12px;
62
+
font-size: Theme.font_label;
63
63
font-weight: i == root.selected-index ? 600 : 400;
64
64
color: i == root.selected-index ? Theme.btn-fg : Theme.ink;
65
65
vertical-alignment: center;
···
131
131
132
132
chipText := Text {
133
133
text: name;
134
-
font-size: 12px;
134
+
font-size: Theme.font_label;
135
135
font-weight: name == root.active-profile ? 600 : 400;
136
136
color: name == root.active-profile ? Theme.btn-fg : Theme.ink;
137
137
vertical-alignment: center;
+3
-3
ui/components/header.slint
+3
-3
ui/components/header.slint
···
14
14
Text {
15
15
text: "ioma";
16
16
font-family: "Shippori Mincho";
17
-
font-size: 22px;
17
+
font-size: Theme.font_header;
18
18
color: Theme.ink;
19
19
vertical-alignment: center;
20
20
}
···
22
22
Text {
23
23
text: "間";
24
24
font-family: "Shippori Mincho";
25
-
font-size: 11px;
25
+
font-size: Theme.font_xxsmall;
26
26
color: Theme.ink-lo;
27
27
vertical-alignment: bottom;
28
28
}
···
43
43
44
44
Text {
45
45
text: glyph;
46
-
font-size: 11px;
46
+
font-size: Theme.font_xxsmall;
47
47
color: Theme.ink-lo;
48
48
horizontal-alignment: center;
49
49
vertical-alignment: center;
+4
-4
ui/components/inputs.slint
+4
-4
ui/components/inputs.slint
···
66
66
67
67
Text {
68
68
text: "−";
69
-
font-size: 13px;
69
+
font-size: Theme.font_body;
70
70
color: root.value <= root.minimum ? Theme.ink-dis : Theme.ink-lo;
71
71
horizontal-alignment: center;
72
72
vertical-alignment: center;
···
81
81
82
82
Text {
83
83
text: root.value;
84
-
font-size: 12px;
84
+
font-size: Theme.font_label;
85
85
font-weight: 500;
86
86
color: Theme.ink;
87
87
horizontal-alignment: center;
···
114
114
115
115
Text {
116
116
text: "+";
117
-
font-size: 13px;
117
+
font-size: Theme.font_body;
118
118
color: root.value >= root.maximum ? Theme.ink-dis : Theme.ink-lo;
119
119
horizontal-alignment: center;
120
120
vertical-alignment: center;
···
151
151
if root.text == "" && !ti.has-focus: Text {
152
152
x: 10px;
153
153
text: root.placeholder-text;
154
-
font-size: 13px;
154
+
font-size: Theme.font_body;
155
155
color: Theme.ink-dim;
156
156
vertical-alignment: center;
157
157
}
+6
-6
ui/components/interval_card.slint
+6
-6
ui/components/interval_card.slint
···
42
42
Text {
43
43
text: root.index;
44
44
font-family: "Shippori Mincho";
45
-
font-size: 28px;
45
+
font-size: Theme.font_headline;
46
46
color: Theme.ink-hi;
47
47
height: 34px;
48
48
horizontal-alignment: center;
···
77
77
78
78
Text {
79
79
text: "every";
80
-
font-size: 12px;
80
+
font-size: Theme.font_label;
81
81
color: Theme.ink-mid;
82
82
vertical-alignment: center;
83
83
}
···
93
93
94
94
Text {
95
95
text: "min · pause";
96
-
font-size: 12px;
96
+
font-size: Theme.font_label;
97
97
color: Theme.ink-mid;
98
98
vertical-alignment: center;
99
99
}
···
109
109
110
110
Text {
111
111
text: "min";
112
-
font-size: 12px;
112
+
font-size: Theme.font_label;
113
113
color: Theme.ink-mid;
114
114
vertical-alignment: center;
115
115
}
···
125
125
126
126
Text {
127
127
text: "sec";
128
-
font-size: 12px;
128
+
font-size: Theme.font_label;
129
129
color: Theme.ink-mid;
130
130
vertical-alignment: center;
131
131
}
···
146
146
Text {
147
147
stroke-style: TextStrokeStyle.center;
148
148
text: "×";
149
-
font-size: 14px;
149
+
font-size: Theme.font_medium;
150
150
color: ta-rm.has-hover ? Theme.ink : Theme.ink-sub;
151
151
horizontal-alignment: TextHorizontalAlignment.left;
152
152
vertical-alignment: TextVerticalAlignment.top;
+3
-3
ui/overlay.slint
+3
-3
ui/overlay.slint
···
43
43
Text {
44
44
text: break-label;
45
45
font-family: "Shippori Mincho";
46
-
font-size: 28px;
46
+
font-size: Theme.font_headline;
47
47
font-weight: 400;
48
48
color: Theme.ink-mid;
49
49
horizontal-alignment: center;
···
52
52
Text {
53
53
text: countdown-text;
54
54
font-family: "Shippori Mincho";
55
-
font-size: 96px;
55
+
font-size: Theme.font_huge;
56
56
font-weight: 700;
57
57
color: Theme.ink;
58
58
horizontal-alignment: center;
···
110
110
if unlock-error != "" : Text {
111
111
text: unlock-error;
112
112
color: #E55A4E;
113
-
font-size: 13px;
113
+
font-size: Theme.font_body;
114
114
horizontal-alignment: center;
115
115
}
116
116
+3
-2
ui/password.slint
+3
-2
ui/password.slint
···
1
1
import { Button, LineEdit } from "std-widgets.slint";
2
+
import { Theme } from "theme.slint";
2
3
import "../assets/fonts/Nunito-Regular.ttf";
3
4
import "../assets/fonts/Nunito-Medium.ttf";
4
5
import "../assets/fonts/Nunito-SemiBold.ttf";
···
24
25
text: "Have someone you trust set an emergency unlock password.";
25
26
wrap: word-wrap;
26
27
color: #888888;
27
-
font-size: 13px;
28
+
font-size: Theme.font_body;
28
29
}
29
30
30
31
password-field := LineEdit {
···
40
41
if error-text != "" : Text {
41
42
text: error-text;
42
43
color: #ff6b6b;
43
-
font-size: 13px;
44
+
font-size: Theme.font_body;
44
45
}
45
46
46
47
HorizontalLayout {
+14
ui/theme.slint
+14
ui/theme.slint
···
6
6
// Set by each window via `changed is-dark => { Theme.dark = root.is-dark; }`
7
7
in-out property <bool> dark: false;
8
8
9
+
// ── Font sizes (semantic tokens) ───────────────────────────────────────────
10
+
// Define semantic font sizes here so the UI can switch sizes centrally.
11
+
out property <length> font_huge: 96px; // overlay large number
12
+
out property <length> font_title: 34px; // big page titles
13
+
out property <length> font_headline: 28px; // secondary large headings
14
+
out property <length> font_header: 22px; // header / section titles
15
+
out property <length> font_medium: 14px; // medium emphasis
16
+
out property <length> font_body: 13px; // body text / inputs
17
+
out property <length> font_label: 12px; // labels, chips, buttons
18
+
out property <length> font_caption: 12.5px; // small captions
19
+
out property <length> font_xsmall: 11.5px; // tiny helper text
20
+
out property <length> font_xxsmall: 11px; // extra small
21
+
22
+
9
23
// ── Window background ─────────────────────────────────────────────────────
10
24
// Light: warm cream / Dark: gentle dark blue (desaturated, not tech-stark)
11
25
out property <color> bg: self.dark ? #1A1D2B : #F3EFE7;
+3
-3
ui/views/about_tab.slint
+3
-3
ui/views/about_tab.slint
···
65
65
Text {
66
66
text: "ioma";
67
67
font-family: "Shippori Mincho";
68
-
font-size: 34px;
68
+
font-size: Theme.font_title;
69
69
color: Theme.ink;
70
70
horizontal-alignment: center;
71
71
}
···
74
74
75
75
Text {
76
76
text: "v0.4.2 · the space between";
77
-
font-size: 12px;
77
+
font-size: Theme.font_label;
78
78
color: Theme.ink-mid;
79
79
horizontal-alignment: center;
80
80
}
···
83
83
84
84
Text {
85
85
text: "間 (ma) is the Japanese notion of the pause between —\nthe rest in music, the silence between words.\nioma gives that pause back to your eyes and body.";
86
-
font-size: 12.5px;
86
+
font-size: Theme.font_caption;
87
87
color: Theme.ink-mid;
88
88
horizontal-alignment: center;
89
89
vertical-alignment: center;
+8
-8
ui/views/profile_tab.slint
+8
-8
ui/views/profile_tab.slint
···
30
30
31
31
Text {
32
32
text: "Break cadence";
33
-
font-size: 13px;
33
+
font-size: Theme.font_body;
34
34
font-weight: 500;
35
35
color: Theme.ink;
36
36
}
37
37
38
38
Text {
39
39
text: "Each row is an interval. ioma cycles through them in order.";
40
-
font-size: 11.5px;
40
+
font-size: Theme.font_xsmall;
41
41
color: Theme.ink-mid;
42
42
}
43
43
···
147
147
148
148
Text {
149
149
text: "after";
150
-
font-size: 12.5px;
150
+
font-size: Theme.font_caption;
151
151
color: Theme.ink-mid;
152
152
vertical-alignment: center;
153
153
}
···
163
163
164
164
Text {
165
165
text: "cycles, take";
166
-
font-size: 12.5px;
166
+
font-size: Theme.font_caption;
167
167
color: Theme.ink-mid;
168
168
vertical-alignment: center;
169
169
}
···
179
179
180
180
Text {
181
181
text: "min";
182
-
font-size: 12.5px;
182
+
font-size: Theme.font_caption;
183
183
color: Theme.ink-mid;
184
184
vertical-alignment: center;
185
185
}
186
186
187
187
Text {
188
188
text: "·";
189
-
font-size: 12.5px;
189
+
font-size: Theme.font_caption;
190
190
color: Theme.ink-lo;
191
191
vertical-alignment: center;
192
192
}
···
208
208
209
209
Text {
210
210
text: "Reset after";
211
-
font-size: 11.5px;
211
+
font-size: Theme.font_xsmall;
212
212
color: Theme.ink-mid;
213
213
vertical-alignment: center;
214
214
}
···
224
224
225
225
Text {
226
226
text: "min away.";
227
-
font-size: 11.5px;
227
+
font-size: Theme.font_xsmall;
228
228
color: Theme.ink-mid;
229
229
vertical-alignment: center;
230
230
}
+3
-3
ui/views/rhythm_tab.slint
+3
-3
ui/views/rhythm_tab.slint
···
119
119
120
120
Text {
121
121
text: "for";
122
-
font-size: 12px;
122
+
font-size: Theme.font_label;
123
123
color: Theme.ink-mid;
124
124
vertical-alignment: center;
125
125
}
···
134
134
135
135
Text {
136
136
text: "minutes before resetting";
137
-
font-size: 12px;
137
+
font-size: Theme.font_label;
138
138
color: Theme.ink-mid;
139
139
vertical-alignment: center;
140
140
}
···
168
168
169
169
Text {
170
170
text: "volume";
171
-
font-size: 12px;
171
+
font-size: Theme.font_label;
172
172
color: Theme.ink-mid;
173
173
vertical-alignment: center;
174
174
}