@omkarux/vela 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1311 @@
1
+ // GENERATED by scripts/build-tokens-dart.mjs from tokens/vela.tokens.json — do not edit.
2
+ // @omkarux/vela 0.8.0. Edit the JSON and run `npm run tokens`: tokens.css, the Figma
3
+ // library and this file are all compiled from the same source.
4
+ //
5
+ // Bind semantics ([VelaColors]) in widgets. Primitives exist only to be aliased — the same
6
+ // rule the CSS and the Figma library follow. Sizes are logical pixels, 1:1 with the CSS px.
7
+
8
+ import 'package:flutter/material.dart';
9
+
10
+ /// Primitive palette. Do not use directly in widgets — bind a semantic from [VelaColors].
11
+ abstract final class VelaPrimitives {
12
+ static const Color black = Color(0xFF191D1F);
13
+ static const Color white = Color(0xFFFFFFFF);
14
+ static const Color grey50 = Color(0xFFF7F9F9);
15
+ static const Color grey100 = Color(0xFFEEF2F2);
16
+ static const Color grey200 = Color(0xFFDDE3E4);
17
+ static const Color grey300 = Color(0xFFC8D0D2);
18
+ static const Color grey400 = Color(0xFFA3AEB1);
19
+ static const Color grey500 = Color(0xFF7F8C90);
20
+ static const Color grey600 = Color(0xFF667377);
21
+ static const Color grey700 = Color(0xFF49555A);
22
+ static const Color grey800 = Color(0xFF333D41);
23
+ static const Color grey850 = Color(0xFF262E31);
24
+ static const Color grey900 = Color(0xFF1B2225);
25
+ static const Color grey950 = Color(0xFF11171A);
26
+ static const Color primary300 = Color(0xFF5FB8C9);
27
+ static const Color primary400 = Color(0xFF2F9DB3);
28
+ static const Color primary500 = Color(0xFF0A6C7D);
29
+ static const Color primary600 = Color(0xFF075462);
30
+ static const Color blue100 = Color(0xFFE6EEFB);
31
+ static const Color blue150 = Color(0xFFCFDFF7);
32
+ static const Color blue300 = Color(0xFF85AAE8);
33
+ static const Color blue500 = Color(0xFF3D7FD6);
34
+ static const Color blue700 = Color(0xFF35558A);
35
+ static const Color blue950 = Color(0xFF0E1A2E);
36
+ static const Color red100 = Color(0xFFFCE8E6);
37
+ static const Color red300 = Color(0xFFF0918C);
38
+ static const Color red500 = Color(0xFFDD4B3E);
39
+ static const Color red700 = Color(0xFFAB3125);
40
+ static const Color red950 = Color(0xFF2A1310);
41
+ static const Color critical100 = Color(0xFFF2D6D4);
42
+ static const Color critical300 = Color(0xFFCC6F68);
43
+ static const Color critical500 = Color(0xFFA81C14);
44
+ static const Color critical700 = Color(0xFF7D150F);
45
+ static const Color critical950 = Color(0xFF2B100E);
46
+ static const Color yellow100 = Color(0xFFFDF1D3);
47
+ static const Color yellow300 = Color(0xFFF7D382);
48
+ static const Color yellow500 = Color(0xFFF0C14E);
49
+ static const Color yellow600 = Color(0xFFC99A10);
50
+ static const Color yellow700 = Color(0xFF9A7A0C);
51
+ static const Color yellow800 = Color(0xFF7A6224);
52
+ static const Color yellow950 = Color(0xFF26200E);
53
+ static const Color orange100 = Color(0xFFFDE7D0);
54
+ static const Color orange300 = Color(0xFFF5AD63);
55
+ static const Color orange500 = Color(0xFFEA7F1A);
56
+ static const Color orange600 = Color(0xFFC86A0D);
57
+ static const Color orange700 = Color(0xFF9C5408);
58
+ static const Color orange950 = Color(0xFF281A0B);
59
+ static const Color green100 = Color(0xFFDCEFE0);
60
+ static const Color green300 = Color(0xFF86C795);
61
+ static const Color green500 = Color(0xFF4AA863);
62
+ static const Color green700 = Color(0xFF1F7340);
63
+ static const Color green800 = Color(0xFF175C33);
64
+ static const Color green950 = Color(0xFF0D2318);
65
+ }
66
+
67
+ /// Semantic colours — one field per token, with the light and dark values the CSS ships.
68
+ ///
69
+ /// Read with `Theme.of(context).extension<VelaColors>()!`, or use [VelaColors.light] and
70
+ /// [VelaColors.dark] directly. [velaThemeData] installs the right one for a [Brightness].
71
+ @immutable
72
+ class VelaColors extends ThemeExtension<VelaColors> {
73
+ const VelaColors({
74
+ required this.bgGlobal,
75
+ required this.bgContainer,
76
+ required this.bgRaised,
77
+ required this.bgHover,
78
+ required this.bgTooltip,
79
+ required this.bgInactive,
80
+ required this.bgSelected,
81
+ required this.primaryTint,
82
+ required this.primaryActiveBg,
83
+ required this.borderDefault,
84
+ required this.borderSubtle,
85
+ required this.borderActive,
86
+ required this.borderInactive,
87
+ required this.borderAction,
88
+ required this.textDefault,
89
+ required this.textHeading,
90
+ required this.textDeEmphasized,
91
+ required this.textInactive,
92
+ required this.textLink,
93
+ required this.textOnBrand,
94
+ required this.textOnTint,
95
+ required this.textError,
96
+ required this.iconDefault,
97
+ required this.iconStrong,
98
+ required this.iconSelected,
99
+ required this.iconDisabled,
100
+ required this.iconOnBrand,
101
+ required this.btnPrimaryBg,
102
+ required this.btnPrimaryHoverBg,
103
+ required this.btnPrimaryBorder,
104
+ required this.btnPrimaryText,
105
+ required this.btnStandardBg,
106
+ required this.btnStandardHoverBg,
107
+ required this.btnStandardText,
108
+ required this.btnHollowPrimaryText,
109
+ required this.btnHollowPrimaryBorder,
110
+ required this.btnDisabledBg,
111
+ required this.btnDisabledText,
112
+ required this.btnDestructiveBg,
113
+ required this.btnDestructiveHoverBg,
114
+ required this.btnDestructiveText,
115
+ required this.btnDestructiveHollowText,
116
+ required this.btnStandardBorder,
117
+ required this.btnHollowHoverBg,
118
+ required this.controlBg,
119
+ required this.controlBorder,
120
+ required this.controlBorderHover,
121
+ required this.controlBorderActive,
122
+ required this.controlBorderError,
123
+ required this.controlBgDisabled,
124
+ required this.controlPlaceholder,
125
+ required this.toggleOffBg,
126
+ required this.toggleOnBg,
127
+ required this.toggleKnob,
128
+ required this.bgSeveritySuccess,
129
+ required this.borderSeveritySuccess,
130
+ required this.signalSeveritySuccess,
131
+ required this.iconSeveritySuccess,
132
+ required this.textSeveritySuccess,
133
+ required this.borderSeveritySuccessIndicator,
134
+ required this.bgSeverityInfo,
135
+ required this.borderSeverityInfo,
136
+ required this.signalSeverityInfo,
137
+ required this.iconSeverityInfo,
138
+ required this.textSeverityInfo,
139
+ required this.borderSeverityInfoIndicator,
140
+ required this.bgSeverityWarning,
141
+ required this.borderSeverityWarning,
142
+ required this.signalSeverityWarning,
143
+ required this.iconSeverityWarning,
144
+ required this.textSeverityWarning,
145
+ required this.borderSeverityWarningIndicator,
146
+ required this.bgSeverityMinor,
147
+ required this.borderSeverityMinor,
148
+ required this.signalSeverityMinor,
149
+ required this.iconSeverityMinor,
150
+ required this.textSeverityMinor,
151
+ required this.borderSeverityMinorIndicator,
152
+ required this.bgSeverityMajor,
153
+ required this.borderSeverityMajor,
154
+ required this.signalSeverityMajor,
155
+ required this.iconSeverityMajor,
156
+ required this.textSeverityMajor,
157
+ required this.borderSeverityMajorIndicator,
158
+ required this.bgSeverityCritical,
159
+ required this.borderSeverityCritical,
160
+ required this.signalSeverityCritical,
161
+ required this.iconSeverityCritical,
162
+ required this.textSeverityCritical,
163
+ required this.borderSeverityCriticalIndicator,
164
+ required this.bgRiskLow,
165
+ required this.borderRiskLow,
166
+ required this.signalRiskLow,
167
+ required this.iconRiskLow,
168
+ required this.textRiskLow,
169
+ required this.borderRiskLowIndicator,
170
+ required this.bgRiskMedium,
171
+ required this.borderRiskMedium,
172
+ required this.signalRiskMedium,
173
+ required this.iconRiskMedium,
174
+ required this.textRiskMedium,
175
+ required this.borderRiskMediumIndicator,
176
+ required this.bgRiskHigh,
177
+ required this.borderRiskHigh,
178
+ required this.signalRiskHigh,
179
+ required this.iconRiskHigh,
180
+ required this.textRiskHigh,
181
+ required this.borderRiskHighIndicator,
182
+ required this.signalStatusUnknown,
183
+ required this.signalStatusHealthy,
184
+ required this.signalStatusWarning,
185
+ required this.signalStatusMedium,
186
+ required this.signalStatusUnhealthy,
187
+ required this.focusRingColor,
188
+ });
189
+
190
+ /// `--vela-bg-global` · Figma `surface/global`
191
+ final Color bgGlobal;
192
+ /// `--vela-bg-container` · Figma `surface/container`
193
+ final Color bgContainer;
194
+ /// `--vela-bg-raised` · Figma `surface/raised`
195
+ final Color bgRaised;
196
+ /// `--vela-bg-hover` · Figma `surface/hover`
197
+ final Color bgHover;
198
+ /// `--vela-bg-tooltip` · Figma `surface/tooltip`
199
+ final Color bgTooltip;
200
+ /// `--vela-bg-inactive` · Figma `surface/inactive`
201
+ final Color bgInactive;
202
+ /// `--vela-bg-selected` · Figma `surface/selected`
203
+ final Color bgSelected;
204
+ /// `--vela-primary-tint` · Figma `surface/primary-tint`
205
+ final Color primaryTint;
206
+ /// `--vela-primary-active-bg` · Figma `surface/primary-active`
207
+ final Color primaryActiveBg;
208
+ /// `--vela-border-default` · Figma `border/default`
209
+ final Color borderDefault;
210
+ /// `--vela-border-subtle` · Figma `border/subtle`
211
+ final Color borderSubtle;
212
+ /// `--vela-border-active` · Figma `border/active`
213
+ final Color borderActive;
214
+ /// `--vela-border-inactive` · Figma `border/inactive`
215
+ final Color borderInactive;
216
+ /// `--vela-border-action` · Figma `border/action`
217
+ final Color borderAction;
218
+ /// `--vela-text-default` · Figma `text/default`
219
+ final Color textDefault;
220
+ /// `--vela-text-heading` · Figma `text/heading`
221
+ final Color textHeading;
222
+ /// `--vela-text-de-emphasized` · Figma `text/de-emphasized`
223
+ final Color textDeEmphasized;
224
+ /// `--vela-text-inactive` · Figma `text/inactive`
225
+ final Color textInactive;
226
+ /// `--vela-text-link` · Figma `text/link`
227
+ final Color textLink;
228
+ /// `--vela-text-on-brand` · Figma `text/on-brand`
229
+ final Color textOnBrand;
230
+ /// `--vela-text-on-tint` · Figma `text/on-tint`
231
+ final Color textOnTint;
232
+ /// `--vela-text-error` · Figma `text/error`
233
+ final Color textError;
234
+ /// `--vela-icon-default` · Figma `icon/default`
235
+ final Color iconDefault;
236
+ /// `--vela-icon-strong` · Figma `icon/strong`
237
+ final Color iconStrong;
238
+ /// `--vela-icon-selected` · Figma `icon/selected`
239
+ final Color iconSelected;
240
+ /// `--vela-icon-disabled` · Figma `icon/disabled`
241
+ final Color iconDisabled;
242
+ /// `--vela-icon-on-brand` · Figma `icon/on-brand`
243
+ final Color iconOnBrand;
244
+ /// `--vela-btn-primary-bg` · Figma `button/primary-bg`
245
+ final Color btnPrimaryBg;
246
+ /// `--vela-btn-primary-hover-bg` · Figma `button/primary-hover-bg`
247
+ final Color btnPrimaryHoverBg;
248
+ /// `--vela-btn-primary-border` · Figma `button/primary-border`
249
+ final Color btnPrimaryBorder;
250
+ /// `--vela-btn-primary-text` · Figma `button/primary-text`
251
+ final Color btnPrimaryText;
252
+ /// `--vela-btn-standard-bg` · Figma `button/standard-bg`
253
+ final Color btnStandardBg;
254
+ /// `--vela-btn-standard-hover-bg` · Figma `button/standard-hover-bg`
255
+ final Color btnStandardHoverBg;
256
+ /// `--vela-btn-standard-text` · Figma `button/standard-text`
257
+ final Color btnStandardText;
258
+ /// `--vela-btn-hollow-primary-text` · Figma `button/hollow-primary-text`
259
+ final Color btnHollowPrimaryText;
260
+ /// `--vela-btn-hollow-primary-border` · Figma `button/hollow-primary-border`
261
+ final Color btnHollowPrimaryBorder;
262
+ /// `--vela-btn-disabled-bg` · Figma `button/disabled-bg`
263
+ final Color btnDisabledBg;
264
+ /// `--vela-btn-disabled-text` · Figma `button/disabled-text`
265
+ final Color btnDisabledText;
266
+ /// `--vela-btn-destructive-bg` · Figma `button/destructive-bg`
267
+ final Color btnDestructiveBg;
268
+ /// `--vela-btn-destructive-hover-bg` · Figma `button/destructive-hover-bg`
269
+ final Color btnDestructiveHoverBg;
270
+ /// `--vela-btn-destructive-text` · Figma `button/destructive-text`
271
+ final Color btnDestructiveText;
272
+ /// `--vela-btn-destructive-hollow-text` · Figma `button/destructive-hollow-text`
273
+ final Color btnDestructiveHollowText;
274
+ /// `--vela-btn-standard-border` · Figma `button/standard-border`
275
+ final Color btnStandardBorder;
276
+ /// `--vela-btn-hollow-hover-bg` · Figma `button/hollow-hover-bg`
277
+ final Color btnHollowHoverBg;
278
+ /// `--vela-control-bg` · Figma `control/bg`
279
+ final Color controlBg;
280
+ /// `--vela-control-border` · Figma `control/border`
281
+ final Color controlBorder;
282
+ /// `--vela-control-border-hover` · Figma `control/border-hover`
283
+ final Color controlBorderHover;
284
+ /// `--vela-control-border-active` · Figma `control/border-active`
285
+ final Color controlBorderActive;
286
+ /// `--vela-control-border-error` · Figma `control/border-error`
287
+ final Color controlBorderError;
288
+ /// `--vela-control-bg-disabled` · Figma `control/bg-disabled`
289
+ final Color controlBgDisabled;
290
+ /// `--vela-control-placeholder` · Figma `control/placeholder`
291
+ final Color controlPlaceholder;
292
+ /// `--vela-toggle-off-bg` · Figma `control/toggle-off-bg`
293
+ final Color toggleOffBg;
294
+ /// `--vela-toggle-on-bg` · Figma `control/toggle-on-bg`
295
+ final Color toggleOnBg;
296
+ /// `--vela-toggle-knob` · Figma `control/toggle-knob`
297
+ final Color toggleKnob;
298
+ /// `--vela-bg-severity-success` · Figma `severity/success/bg`
299
+ /// Severity describes events. Never interchange with Risk or Status.
300
+ final Color bgSeveritySuccess;
301
+ /// `--vela-border-severity-success` · Figma `severity/success/border`
302
+ /// Severity describes events. Never interchange with Risk or Status.
303
+ final Color borderSeveritySuccess;
304
+ /// `--vela-signal-severity-success` · Figma `severity/success/signal`
305
+ /// Severity describes events. Never interchange with Risk or Status.
306
+ final Color signalSeveritySuccess;
307
+ /// `--vela-icon-severity-success` · Figma `severity/success/icon`
308
+ /// Severity describes events. Never interchange with Risk or Status.
309
+ final Color iconSeveritySuccess;
310
+ /// `--vela-text-severity-success` · Figma `severity/success/text`
311
+ /// Severity describes events. Never interchange with Risk or Status.
312
+ final Color textSeveritySuccess;
313
+ /// `--vela-border-severity-success-indicator` · Figma `severity/success/indicator`
314
+ /// Severity describes events. Never interchange with Risk or Status.
315
+ final Color borderSeveritySuccessIndicator;
316
+ /// `--vela-bg-severity-info` · Figma `severity/info/bg`
317
+ /// Severity describes events. Never interchange with Risk or Status.
318
+ final Color bgSeverityInfo;
319
+ /// `--vela-border-severity-info` · Figma `severity/info/border`
320
+ /// Severity describes events. Never interchange with Risk or Status.
321
+ final Color borderSeverityInfo;
322
+ /// `--vela-signal-severity-info` · Figma `severity/info/signal`
323
+ /// Severity describes events. Never interchange with Risk or Status.
324
+ final Color signalSeverityInfo;
325
+ /// `--vela-icon-severity-info` · Figma `severity/info/icon`
326
+ /// Severity describes events. Never interchange with Risk or Status.
327
+ final Color iconSeverityInfo;
328
+ /// `--vela-text-severity-info` · Figma `severity/info/text`
329
+ /// Severity describes events. Never interchange with Risk or Status.
330
+ final Color textSeverityInfo;
331
+ /// `--vela-border-severity-info-indicator` · Figma `severity/info/indicator`
332
+ /// Severity describes events. Never interchange with Risk or Status.
333
+ final Color borderSeverityInfoIndicator;
334
+ /// `--vela-bg-severity-warning` · Figma `severity/warning/bg`
335
+ /// Severity describes events. Never interchange with Risk or Status.
336
+ final Color bgSeverityWarning;
337
+ /// `--vela-border-severity-warning` · Figma `severity/warning/border`
338
+ /// Severity describes events. Never interchange with Risk or Status.
339
+ final Color borderSeverityWarning;
340
+ /// `--vela-signal-severity-warning` · Figma `severity/warning/signal`
341
+ /// Severity describes events. Never interchange with Risk or Status.
342
+ final Color signalSeverityWarning;
343
+ /// `--vela-icon-severity-warning` · Figma `severity/warning/icon`
344
+ /// Severity describes events. Never interchange with Risk or Status.
345
+ final Color iconSeverityWarning;
346
+ /// `--vela-text-severity-warning` · Figma `severity/warning/text`
347
+ /// Severity describes events. Never interchange with Risk or Status.
348
+ final Color textSeverityWarning;
349
+ /// `--vela-border-severity-warning-indicator` · Figma `severity/warning/indicator`
350
+ /// Severity describes events. Never interchange with Risk or Status.
351
+ final Color borderSeverityWarningIndicator;
352
+ /// `--vela-bg-severity-minor` · Figma `severity/minor/bg`
353
+ /// Severity describes events. Never interchange with Risk or Status.
354
+ final Color bgSeverityMinor;
355
+ /// `--vela-border-severity-minor` · Figma `severity/minor/border`
356
+ /// Severity describes events. Never interchange with Risk or Status.
357
+ final Color borderSeverityMinor;
358
+ /// `--vela-signal-severity-minor` · Figma `severity/minor/signal`
359
+ /// Severity describes events. Never interchange with Risk or Status.
360
+ final Color signalSeverityMinor;
361
+ /// `--vela-icon-severity-minor` · Figma `severity/minor/icon`
362
+ /// Severity describes events. Never interchange with Risk or Status.
363
+ final Color iconSeverityMinor;
364
+ /// `--vela-text-severity-minor` · Figma `severity/minor/text`
365
+ /// Severity describes events. Never interchange with Risk or Status.
366
+ final Color textSeverityMinor;
367
+ /// `--vela-border-severity-minor-indicator` · Figma `severity/minor/indicator`
368
+ /// Severity describes events. Never interchange with Risk or Status.
369
+ final Color borderSeverityMinorIndicator;
370
+ /// `--vela-bg-severity-major` · Figma `severity/major/bg`
371
+ /// Severity describes events. Never interchange with Risk or Status.
372
+ final Color bgSeverityMajor;
373
+ /// `--vela-border-severity-major` · Figma `severity/major/border`
374
+ /// Severity describes events. Never interchange with Risk or Status.
375
+ final Color borderSeverityMajor;
376
+ /// `--vela-signal-severity-major` · Figma `severity/major/signal`
377
+ /// Severity describes events. Never interchange with Risk or Status.
378
+ final Color signalSeverityMajor;
379
+ /// `--vela-icon-severity-major` · Figma `severity/major/icon`
380
+ /// Severity describes events. Never interchange with Risk or Status.
381
+ final Color iconSeverityMajor;
382
+ /// `--vela-text-severity-major` · Figma `severity/major/text`
383
+ /// Severity describes events. Never interchange with Risk or Status.
384
+ final Color textSeverityMajor;
385
+ /// `--vela-border-severity-major-indicator` · Figma `severity/major/indicator`
386
+ /// Severity describes events. Never interchange with Risk or Status.
387
+ final Color borderSeverityMajorIndicator;
388
+ /// `--vela-bg-severity-critical` · Figma `severity/critical/bg`
389
+ /// Severity describes events. Never interchange with Risk or Status.
390
+ final Color bgSeverityCritical;
391
+ /// `--vela-border-severity-critical` · Figma `severity/critical/border`
392
+ /// Severity describes events. Never interchange with Risk or Status.
393
+ final Color borderSeverityCritical;
394
+ /// `--vela-signal-severity-critical` · Figma `severity/critical/signal`
395
+ /// Severity describes events. Never interchange with Risk or Status.
396
+ final Color signalSeverityCritical;
397
+ /// `--vela-icon-severity-critical` · Figma `severity/critical/icon`
398
+ /// Severity describes events. Never interchange with Risk or Status.
399
+ final Color iconSeverityCritical;
400
+ /// `--vela-text-severity-critical` · Figma `severity/critical/text`
401
+ /// Severity describes events. Never interchange with Risk or Status.
402
+ final Color textSeverityCritical;
403
+ /// `--vela-border-severity-critical-indicator` · Figma `severity/critical/indicator`
404
+ /// Severity describes events. Never interchange with Risk or Status.
405
+ final Color borderSeverityCriticalIndicator;
406
+ /// `--vela-bg-risk-low` · Figma `risk/low/bg`
407
+ /// Risk describes scoring. There is no "critical risk".
408
+ final Color bgRiskLow;
409
+ /// `--vela-border-risk-low` · Figma `risk/low/border`
410
+ /// Risk describes scoring. There is no "critical risk".
411
+ final Color borderRiskLow;
412
+ /// `--vela-signal-risk-low` · Figma `risk/low/signal`
413
+ /// Risk describes scoring. There is no "critical risk".
414
+ final Color signalRiskLow;
415
+ /// `--vela-icon-risk-low` · Figma `risk/low/icon`
416
+ /// Risk describes scoring. There is no "critical risk".
417
+ final Color iconRiskLow;
418
+ /// `--vela-text-risk-low` · Figma `risk/low/text`
419
+ /// Risk describes scoring. There is no "critical risk".
420
+ final Color textRiskLow;
421
+ /// `--vela-border-risk-low-indicator` · Figma `risk/low/indicator`
422
+ /// Risk describes scoring. There is no "critical risk".
423
+ final Color borderRiskLowIndicator;
424
+ /// `--vela-bg-risk-medium` · Figma `risk/medium/bg`
425
+ /// Risk describes scoring. There is no "critical risk".
426
+ final Color bgRiskMedium;
427
+ /// `--vela-border-risk-medium` · Figma `risk/medium/border`
428
+ /// Risk describes scoring. There is no "critical risk".
429
+ final Color borderRiskMedium;
430
+ /// `--vela-signal-risk-medium` · Figma `risk/medium/signal`
431
+ /// Risk describes scoring. There is no "critical risk".
432
+ final Color signalRiskMedium;
433
+ /// `--vela-icon-risk-medium` · Figma `risk/medium/icon`
434
+ /// Risk describes scoring. There is no "critical risk".
435
+ final Color iconRiskMedium;
436
+ /// `--vela-text-risk-medium` · Figma `risk/medium/text`
437
+ /// Risk describes scoring. There is no "critical risk".
438
+ final Color textRiskMedium;
439
+ /// `--vela-border-risk-medium-indicator` · Figma `risk/medium/indicator`
440
+ /// Risk describes scoring. There is no "critical risk".
441
+ final Color borderRiskMediumIndicator;
442
+ /// `--vela-bg-risk-high` · Figma `risk/high/bg`
443
+ /// Risk describes scoring. There is no "critical risk".
444
+ final Color bgRiskHigh;
445
+ /// `--vela-border-risk-high` · Figma `risk/high/border`
446
+ /// Risk describes scoring. There is no "critical risk".
447
+ final Color borderRiskHigh;
448
+ /// `--vela-signal-risk-high` · Figma `risk/high/signal`
449
+ /// Risk describes scoring. There is no "critical risk".
450
+ final Color signalRiskHigh;
451
+ /// `--vela-icon-risk-high` · Figma `risk/high/icon`
452
+ /// Risk describes scoring. There is no "critical risk".
453
+ final Color iconRiskHigh;
454
+ /// `--vela-text-risk-high` · Figma `risk/high/text`
455
+ /// Risk describes scoring. There is no "critical risk".
456
+ final Color textRiskHigh;
457
+ /// `--vela-border-risk-high-indicator` · Figma `risk/high/indicator`
458
+ /// Risk describes scoring. There is no "critical risk".
459
+ final Color borderRiskHighIndicator;
460
+ /// `--vela-signal-status-unknown` · Figma `status/unknown`
461
+ /// Status Indicator dots only. Five states, neither severity nor risk.
462
+ final Color signalStatusUnknown;
463
+ /// `--vela-signal-status-healthy` · Figma `status/healthy`
464
+ /// Status Indicator dots only. Five states, neither severity nor risk.
465
+ final Color signalStatusHealthy;
466
+ /// `--vela-signal-status-warning` · Figma `status/warning`
467
+ /// Status Indicator dots only. Five states, neither severity nor risk.
468
+ final Color signalStatusWarning;
469
+ /// `--vela-signal-status-medium` · Figma `status/medium`
470
+ /// Status Indicator dots only. Five states, neither severity nor risk.
471
+ final Color signalStatusMedium;
472
+ /// `--vela-signal-status-unhealthy` · Figma `status/unhealthy`
473
+ /// Status Indicator dots only. Five states, neither severity nor risk.
474
+ final Color signalStatusUnhealthy;
475
+ /// `--vela-focus-ring-color` · Figma `focus/ring`
476
+ /// One focus treatment for the whole kit.
477
+ final Color focusRingColor;
478
+
479
+ /// The light theme, resolved to primitives exactly as tokens.css resolves it.
480
+ static const VelaColors light = VelaColors(
481
+ bgGlobal: VelaPrimitives.white,
482
+ bgContainer: VelaPrimitives.grey100,
483
+ bgRaised: VelaPrimitives.white,
484
+ bgHover: VelaPrimitives.grey100,
485
+ bgTooltip: VelaPrimitives.grey800,
486
+ bgInactive: VelaPrimitives.grey100,
487
+ bgSelected: VelaPrimitives.blue100,
488
+ primaryTint: VelaPrimitives.blue100,
489
+ primaryActiveBg: VelaPrimitives.primary500,
490
+ borderDefault: VelaPrimitives.grey500,
491
+ borderSubtle: VelaPrimitives.grey200,
492
+ borderActive: VelaPrimitives.primary500,
493
+ borderInactive: VelaPrimitives.grey200,
494
+ borderAction: VelaPrimitives.grey700,
495
+ textDefault: VelaPrimitives.grey700,
496
+ textHeading: VelaPrimitives.black,
497
+ textDeEmphasized: VelaPrimitives.grey600,
498
+ textInactive: VelaPrimitives.grey400,
499
+ textLink: VelaPrimitives.primary500,
500
+ textOnBrand: VelaPrimitives.white,
501
+ textOnTint: VelaPrimitives.grey700,
502
+ textError: VelaPrimitives.red700,
503
+ iconDefault: VelaPrimitives.grey500,
504
+ iconStrong: VelaPrimitives.grey700,
505
+ iconSelected: VelaPrimitives.primary500,
506
+ iconDisabled: VelaPrimitives.grey300,
507
+ iconOnBrand: VelaPrimitives.white,
508
+ btnPrimaryBg: VelaPrimitives.primary500,
509
+ btnPrimaryHoverBg: VelaPrimitives.primary600,
510
+ btnPrimaryBorder: VelaPrimitives.primary500,
511
+ btnPrimaryText: VelaPrimitives.white,
512
+ btnStandardBg: VelaPrimitives.grey100,
513
+ btnStandardHoverBg: VelaPrimitives.grey200,
514
+ btnStandardText: VelaPrimitives.grey700,
515
+ btnHollowPrimaryText: VelaPrimitives.primary500,
516
+ btnHollowPrimaryBorder: VelaPrimitives.primary500,
517
+ btnDisabledBg: VelaPrimitives.grey200,
518
+ btnDisabledText: VelaPrimitives.grey400,
519
+ btnDestructiveBg: VelaPrimitives.red700,
520
+ btnDestructiveHoverBg: VelaPrimitives.critical500,
521
+ btnDestructiveText: VelaPrimitives.white,
522
+ btnDestructiveHollowText: VelaPrimitives.red700,
523
+ btnStandardBorder: VelaPrimitives.grey600,
524
+ btnHollowHoverBg: VelaPrimitives.blue100,
525
+ controlBg: VelaPrimitives.white,
526
+ controlBorder: VelaPrimitives.grey500,
527
+ controlBorderHover: VelaPrimitives.grey500,
528
+ controlBorderActive: VelaPrimitives.primary500,
529
+ controlBorderError: VelaPrimitives.red500,
530
+ controlBgDisabled: VelaPrimitives.grey100,
531
+ controlPlaceholder: VelaPrimitives.grey600,
532
+ toggleOffBg: VelaPrimitives.grey400,
533
+ toggleOnBg: VelaPrimitives.primary500,
534
+ toggleKnob: VelaPrimitives.white,
535
+ bgSeveritySuccess: VelaPrimitives.green100,
536
+ borderSeveritySuccess: VelaPrimitives.green300,
537
+ signalSeveritySuccess: VelaPrimitives.green500,
538
+ iconSeveritySuccess: VelaPrimitives.green800,
539
+ textSeveritySuccess: VelaPrimitives.green800,
540
+ borderSeveritySuccessIndicator: VelaPrimitives.green700,
541
+ bgSeverityInfo: VelaPrimitives.blue100,
542
+ borderSeverityInfo: VelaPrimitives.blue300,
543
+ signalSeverityInfo: VelaPrimitives.blue500,
544
+ iconSeverityInfo: VelaPrimitives.blue700,
545
+ textSeverityInfo: VelaPrimitives.blue700,
546
+ borderSeverityInfoIndicator: VelaPrimitives.blue700,
547
+ bgSeverityWarning: VelaPrimitives.yellow100,
548
+ borderSeverityWarning: VelaPrimitives.yellow300,
549
+ signalSeverityWarning: VelaPrimitives.yellow500,
550
+ iconSeverityWarning: VelaPrimitives.yellow800,
551
+ textSeverityWarning: VelaPrimitives.yellow800,
552
+ borderSeverityWarningIndicator: VelaPrimitives.yellow700,
553
+ bgSeverityMinor: VelaPrimitives.orange100,
554
+ borderSeverityMinor: VelaPrimitives.orange300,
555
+ signalSeverityMinor: VelaPrimitives.orange500,
556
+ iconSeverityMinor: VelaPrimitives.orange700,
557
+ textSeverityMinor: VelaPrimitives.orange700,
558
+ borderSeverityMinorIndicator: VelaPrimitives.orange700,
559
+ bgSeverityMajor: VelaPrimitives.red100,
560
+ borderSeverityMajor: VelaPrimitives.red300,
561
+ signalSeverityMajor: VelaPrimitives.red500,
562
+ iconSeverityMajor: VelaPrimitives.red700,
563
+ textSeverityMajor: VelaPrimitives.red700,
564
+ borderSeverityMajorIndicator: VelaPrimitives.red700,
565
+ bgSeverityCritical: VelaPrimitives.critical100,
566
+ borderSeverityCritical: VelaPrimitives.critical300,
567
+ signalSeverityCritical: VelaPrimitives.critical500,
568
+ iconSeverityCritical: VelaPrimitives.critical700,
569
+ textSeverityCritical: VelaPrimitives.critical700,
570
+ borderSeverityCriticalIndicator: VelaPrimitives.critical700,
571
+ bgRiskLow: VelaPrimitives.green100,
572
+ borderRiskLow: VelaPrimitives.green300,
573
+ signalRiskLow: VelaPrimitives.green500,
574
+ iconRiskLow: VelaPrimitives.green800,
575
+ textRiskLow: VelaPrimitives.green800,
576
+ borderRiskLowIndicator: VelaPrimitives.green700,
577
+ bgRiskMedium: VelaPrimitives.yellow100,
578
+ borderRiskMedium: VelaPrimitives.yellow300,
579
+ signalRiskMedium: VelaPrimitives.yellow500,
580
+ iconRiskMedium: VelaPrimitives.yellow800,
581
+ textRiskMedium: VelaPrimitives.yellow800,
582
+ borderRiskMediumIndicator: VelaPrimitives.yellow700,
583
+ bgRiskHigh: VelaPrimitives.red100,
584
+ borderRiskHigh: VelaPrimitives.red300,
585
+ signalRiskHigh: VelaPrimitives.red500,
586
+ iconRiskHigh: VelaPrimitives.red700,
587
+ textRiskHigh: VelaPrimitives.red700,
588
+ borderRiskHighIndicator: VelaPrimitives.red700,
589
+ signalStatusUnknown: VelaPrimitives.grey500,
590
+ signalStatusHealthy: VelaPrimitives.green700,
591
+ signalStatusWarning: VelaPrimitives.yellow700,
592
+ signalStatusMedium: VelaPrimitives.orange600,
593
+ signalStatusUnhealthy: VelaPrimitives.red500,
594
+ focusRingColor: VelaPrimitives.primary500,
595
+ );
596
+
597
+ /// The dark theme, resolved to primitives exactly as tokens.css resolves it.
598
+ static const VelaColors dark = VelaColors(
599
+ bgGlobal: VelaPrimitives.grey950,
600
+ bgContainer: VelaPrimitives.grey900,
601
+ bgRaised: VelaPrimitives.grey850,
602
+ bgHover: VelaPrimitives.grey850,
603
+ bgTooltip: VelaPrimitives.grey700,
604
+ bgInactive: VelaPrimitives.grey900,
605
+ bgSelected: VelaPrimitives.blue950,
606
+ primaryTint: VelaPrimitives.blue950,
607
+ primaryActiveBg: VelaPrimitives.primary500,
608
+ borderDefault: VelaPrimitives.grey600,
609
+ borderSubtle: VelaPrimitives.grey850,
610
+ borderActive: VelaPrimitives.primary400,
611
+ borderInactive: VelaPrimitives.grey850,
612
+ borderAction: VelaPrimitives.grey500,
613
+ textDefault: VelaPrimitives.grey300,
614
+ textHeading: VelaPrimitives.grey50,
615
+ textDeEmphasized: VelaPrimitives.grey500,
616
+ textInactive: VelaPrimitives.grey700,
617
+ textLink: VelaPrimitives.primary400,
618
+ textOnBrand: VelaPrimitives.white,
619
+ textOnTint: VelaPrimitives.grey300,
620
+ textError: VelaPrimitives.red300,
621
+ iconDefault: VelaPrimitives.grey500,
622
+ iconStrong: VelaPrimitives.grey300,
623
+ iconSelected: VelaPrimitives.primary400,
624
+ iconDisabled: VelaPrimitives.grey700,
625
+ iconOnBrand: VelaPrimitives.white,
626
+ btnPrimaryBg: VelaPrimitives.primary500,
627
+ btnPrimaryHoverBg: VelaPrimitives.primary400,
628
+ btnPrimaryBorder: VelaPrimitives.primary500,
629
+ btnPrimaryText: VelaPrimitives.white,
630
+ btnStandardBg: VelaPrimitives.grey850,
631
+ btnStandardHoverBg: VelaPrimitives.grey800,
632
+ btnStandardText: VelaPrimitives.grey300,
633
+ btnHollowPrimaryText: VelaPrimitives.primary300,
634
+ btnHollowPrimaryBorder: VelaPrimitives.primary400,
635
+ btnDisabledBg: VelaPrimitives.grey850,
636
+ btnDisabledText: VelaPrimitives.grey700,
637
+ btnDestructiveBg: VelaPrimitives.red700,
638
+ btnDestructiveHoverBg: VelaPrimitives.red500,
639
+ btnDestructiveText: VelaPrimitives.white,
640
+ btnDestructiveHollowText: VelaPrimitives.red300,
641
+ btnStandardBorder: VelaPrimitives.grey500,
642
+ btnHollowHoverBg: VelaPrimitives.blue950,
643
+ controlBg: VelaPrimitives.grey900,
644
+ controlBorder: VelaPrimitives.grey600,
645
+ controlBorderHover: VelaPrimitives.grey500,
646
+ controlBorderActive: VelaPrimitives.primary400,
647
+ controlBorderError: VelaPrimitives.red500,
648
+ controlBgDisabled: VelaPrimitives.grey900,
649
+ controlPlaceholder: VelaPrimitives.grey500,
650
+ toggleOffBg: VelaPrimitives.grey700,
651
+ toggleOnBg: VelaPrimitives.primary500,
652
+ toggleKnob: VelaPrimitives.white,
653
+ bgSeveritySuccess: VelaPrimitives.green950,
654
+ borderSeveritySuccess: VelaPrimitives.green700,
655
+ signalSeveritySuccess: VelaPrimitives.green500,
656
+ iconSeveritySuccess: VelaPrimitives.green300,
657
+ textSeveritySuccess: VelaPrimitives.green300,
658
+ borderSeveritySuccessIndicator: VelaPrimitives.green500,
659
+ bgSeverityInfo: VelaPrimitives.blue950,
660
+ borderSeverityInfo: VelaPrimitives.blue700,
661
+ signalSeverityInfo: VelaPrimitives.blue500,
662
+ iconSeverityInfo: VelaPrimitives.blue300,
663
+ textSeverityInfo: VelaPrimitives.blue300,
664
+ borderSeverityInfoIndicator: VelaPrimitives.blue500,
665
+ bgSeverityWarning: VelaPrimitives.yellow950,
666
+ borderSeverityWarning: VelaPrimitives.yellow700,
667
+ signalSeverityWarning: VelaPrimitives.yellow500,
668
+ iconSeverityWarning: VelaPrimitives.yellow300,
669
+ textSeverityWarning: VelaPrimitives.yellow300,
670
+ borderSeverityWarningIndicator: VelaPrimitives.yellow500,
671
+ bgSeverityMinor: VelaPrimitives.orange950,
672
+ borderSeverityMinor: VelaPrimitives.orange700,
673
+ signalSeverityMinor: VelaPrimitives.orange500,
674
+ iconSeverityMinor: VelaPrimitives.orange300,
675
+ textSeverityMinor: VelaPrimitives.orange300,
676
+ borderSeverityMinorIndicator: VelaPrimitives.orange500,
677
+ bgSeverityMajor: VelaPrimitives.red950,
678
+ borderSeverityMajor: VelaPrimitives.red700,
679
+ signalSeverityMajor: VelaPrimitives.red500,
680
+ iconSeverityMajor: VelaPrimitives.red300,
681
+ textSeverityMajor: VelaPrimitives.red300,
682
+ borderSeverityMajorIndicator: VelaPrimitives.red500,
683
+ bgSeverityCritical: VelaPrimitives.critical950,
684
+ borderSeverityCritical: VelaPrimitives.critical500,
685
+ signalSeverityCritical: VelaPrimitives.critical300,
686
+ iconSeverityCritical: VelaPrimitives.critical300,
687
+ textSeverityCritical: VelaPrimitives.critical300,
688
+ borderSeverityCriticalIndicator: VelaPrimitives.critical300,
689
+ bgRiskLow: VelaPrimitives.green950,
690
+ borderRiskLow: VelaPrimitives.green700,
691
+ signalRiskLow: VelaPrimitives.green500,
692
+ iconRiskLow: VelaPrimitives.green300,
693
+ textRiskLow: VelaPrimitives.green300,
694
+ borderRiskLowIndicator: VelaPrimitives.green500,
695
+ bgRiskMedium: VelaPrimitives.yellow950,
696
+ borderRiskMedium: VelaPrimitives.yellow700,
697
+ signalRiskMedium: VelaPrimitives.yellow500,
698
+ iconRiskMedium: VelaPrimitives.yellow300,
699
+ textRiskMedium: VelaPrimitives.yellow300,
700
+ borderRiskMediumIndicator: VelaPrimitives.yellow500,
701
+ bgRiskHigh: VelaPrimitives.red950,
702
+ borderRiskHigh: VelaPrimitives.red700,
703
+ signalRiskHigh: VelaPrimitives.red500,
704
+ iconRiskHigh: VelaPrimitives.red300,
705
+ textRiskHigh: VelaPrimitives.red300,
706
+ borderRiskHighIndicator: VelaPrimitives.red500,
707
+ signalStatusUnknown: VelaPrimitives.grey500,
708
+ signalStatusHealthy: VelaPrimitives.green500,
709
+ signalStatusWarning: VelaPrimitives.yellow500,
710
+ signalStatusMedium: VelaPrimitives.orange500,
711
+ signalStatusUnhealthy: VelaPrimitives.red500,
712
+ focusRingColor: VelaPrimitives.primary400,
713
+ );
714
+
715
+ @override
716
+ VelaColors copyWith({
717
+ Color? bgGlobal,
718
+ Color? bgContainer,
719
+ Color? bgRaised,
720
+ Color? bgHover,
721
+ Color? bgTooltip,
722
+ Color? bgInactive,
723
+ Color? bgSelected,
724
+ Color? primaryTint,
725
+ Color? primaryActiveBg,
726
+ Color? borderDefault,
727
+ Color? borderSubtle,
728
+ Color? borderActive,
729
+ Color? borderInactive,
730
+ Color? borderAction,
731
+ Color? textDefault,
732
+ Color? textHeading,
733
+ Color? textDeEmphasized,
734
+ Color? textInactive,
735
+ Color? textLink,
736
+ Color? textOnBrand,
737
+ Color? textOnTint,
738
+ Color? textError,
739
+ Color? iconDefault,
740
+ Color? iconStrong,
741
+ Color? iconSelected,
742
+ Color? iconDisabled,
743
+ Color? iconOnBrand,
744
+ Color? btnPrimaryBg,
745
+ Color? btnPrimaryHoverBg,
746
+ Color? btnPrimaryBorder,
747
+ Color? btnPrimaryText,
748
+ Color? btnStandardBg,
749
+ Color? btnStandardHoverBg,
750
+ Color? btnStandardText,
751
+ Color? btnHollowPrimaryText,
752
+ Color? btnHollowPrimaryBorder,
753
+ Color? btnDisabledBg,
754
+ Color? btnDisabledText,
755
+ Color? btnDestructiveBg,
756
+ Color? btnDestructiveHoverBg,
757
+ Color? btnDestructiveText,
758
+ Color? btnDestructiveHollowText,
759
+ Color? btnStandardBorder,
760
+ Color? btnHollowHoverBg,
761
+ Color? controlBg,
762
+ Color? controlBorder,
763
+ Color? controlBorderHover,
764
+ Color? controlBorderActive,
765
+ Color? controlBorderError,
766
+ Color? controlBgDisabled,
767
+ Color? controlPlaceholder,
768
+ Color? toggleOffBg,
769
+ Color? toggleOnBg,
770
+ Color? toggleKnob,
771
+ Color? bgSeveritySuccess,
772
+ Color? borderSeveritySuccess,
773
+ Color? signalSeveritySuccess,
774
+ Color? iconSeveritySuccess,
775
+ Color? textSeveritySuccess,
776
+ Color? borderSeveritySuccessIndicator,
777
+ Color? bgSeverityInfo,
778
+ Color? borderSeverityInfo,
779
+ Color? signalSeverityInfo,
780
+ Color? iconSeverityInfo,
781
+ Color? textSeverityInfo,
782
+ Color? borderSeverityInfoIndicator,
783
+ Color? bgSeverityWarning,
784
+ Color? borderSeverityWarning,
785
+ Color? signalSeverityWarning,
786
+ Color? iconSeverityWarning,
787
+ Color? textSeverityWarning,
788
+ Color? borderSeverityWarningIndicator,
789
+ Color? bgSeverityMinor,
790
+ Color? borderSeverityMinor,
791
+ Color? signalSeverityMinor,
792
+ Color? iconSeverityMinor,
793
+ Color? textSeverityMinor,
794
+ Color? borderSeverityMinorIndicator,
795
+ Color? bgSeverityMajor,
796
+ Color? borderSeverityMajor,
797
+ Color? signalSeverityMajor,
798
+ Color? iconSeverityMajor,
799
+ Color? textSeverityMajor,
800
+ Color? borderSeverityMajorIndicator,
801
+ Color? bgSeverityCritical,
802
+ Color? borderSeverityCritical,
803
+ Color? signalSeverityCritical,
804
+ Color? iconSeverityCritical,
805
+ Color? textSeverityCritical,
806
+ Color? borderSeverityCriticalIndicator,
807
+ Color? bgRiskLow,
808
+ Color? borderRiskLow,
809
+ Color? signalRiskLow,
810
+ Color? iconRiskLow,
811
+ Color? textRiskLow,
812
+ Color? borderRiskLowIndicator,
813
+ Color? bgRiskMedium,
814
+ Color? borderRiskMedium,
815
+ Color? signalRiskMedium,
816
+ Color? iconRiskMedium,
817
+ Color? textRiskMedium,
818
+ Color? borderRiskMediumIndicator,
819
+ Color? bgRiskHigh,
820
+ Color? borderRiskHigh,
821
+ Color? signalRiskHigh,
822
+ Color? iconRiskHigh,
823
+ Color? textRiskHigh,
824
+ Color? borderRiskHighIndicator,
825
+ Color? signalStatusUnknown,
826
+ Color? signalStatusHealthy,
827
+ Color? signalStatusWarning,
828
+ Color? signalStatusMedium,
829
+ Color? signalStatusUnhealthy,
830
+ Color? focusRingColor,
831
+ }) {
832
+ return VelaColors(
833
+ bgGlobal: bgGlobal ?? this.bgGlobal,
834
+ bgContainer: bgContainer ?? this.bgContainer,
835
+ bgRaised: bgRaised ?? this.bgRaised,
836
+ bgHover: bgHover ?? this.bgHover,
837
+ bgTooltip: bgTooltip ?? this.bgTooltip,
838
+ bgInactive: bgInactive ?? this.bgInactive,
839
+ bgSelected: bgSelected ?? this.bgSelected,
840
+ primaryTint: primaryTint ?? this.primaryTint,
841
+ primaryActiveBg: primaryActiveBg ?? this.primaryActiveBg,
842
+ borderDefault: borderDefault ?? this.borderDefault,
843
+ borderSubtle: borderSubtle ?? this.borderSubtle,
844
+ borderActive: borderActive ?? this.borderActive,
845
+ borderInactive: borderInactive ?? this.borderInactive,
846
+ borderAction: borderAction ?? this.borderAction,
847
+ textDefault: textDefault ?? this.textDefault,
848
+ textHeading: textHeading ?? this.textHeading,
849
+ textDeEmphasized: textDeEmphasized ?? this.textDeEmphasized,
850
+ textInactive: textInactive ?? this.textInactive,
851
+ textLink: textLink ?? this.textLink,
852
+ textOnBrand: textOnBrand ?? this.textOnBrand,
853
+ textOnTint: textOnTint ?? this.textOnTint,
854
+ textError: textError ?? this.textError,
855
+ iconDefault: iconDefault ?? this.iconDefault,
856
+ iconStrong: iconStrong ?? this.iconStrong,
857
+ iconSelected: iconSelected ?? this.iconSelected,
858
+ iconDisabled: iconDisabled ?? this.iconDisabled,
859
+ iconOnBrand: iconOnBrand ?? this.iconOnBrand,
860
+ btnPrimaryBg: btnPrimaryBg ?? this.btnPrimaryBg,
861
+ btnPrimaryHoverBg: btnPrimaryHoverBg ?? this.btnPrimaryHoverBg,
862
+ btnPrimaryBorder: btnPrimaryBorder ?? this.btnPrimaryBorder,
863
+ btnPrimaryText: btnPrimaryText ?? this.btnPrimaryText,
864
+ btnStandardBg: btnStandardBg ?? this.btnStandardBg,
865
+ btnStandardHoverBg: btnStandardHoverBg ?? this.btnStandardHoverBg,
866
+ btnStandardText: btnStandardText ?? this.btnStandardText,
867
+ btnHollowPrimaryText: btnHollowPrimaryText ?? this.btnHollowPrimaryText,
868
+ btnHollowPrimaryBorder: btnHollowPrimaryBorder ?? this.btnHollowPrimaryBorder,
869
+ btnDisabledBg: btnDisabledBg ?? this.btnDisabledBg,
870
+ btnDisabledText: btnDisabledText ?? this.btnDisabledText,
871
+ btnDestructiveBg: btnDestructiveBg ?? this.btnDestructiveBg,
872
+ btnDestructiveHoverBg: btnDestructiveHoverBg ?? this.btnDestructiveHoverBg,
873
+ btnDestructiveText: btnDestructiveText ?? this.btnDestructiveText,
874
+ btnDestructiveHollowText: btnDestructiveHollowText ?? this.btnDestructiveHollowText,
875
+ btnStandardBorder: btnStandardBorder ?? this.btnStandardBorder,
876
+ btnHollowHoverBg: btnHollowHoverBg ?? this.btnHollowHoverBg,
877
+ controlBg: controlBg ?? this.controlBg,
878
+ controlBorder: controlBorder ?? this.controlBorder,
879
+ controlBorderHover: controlBorderHover ?? this.controlBorderHover,
880
+ controlBorderActive: controlBorderActive ?? this.controlBorderActive,
881
+ controlBorderError: controlBorderError ?? this.controlBorderError,
882
+ controlBgDisabled: controlBgDisabled ?? this.controlBgDisabled,
883
+ controlPlaceholder: controlPlaceholder ?? this.controlPlaceholder,
884
+ toggleOffBg: toggleOffBg ?? this.toggleOffBg,
885
+ toggleOnBg: toggleOnBg ?? this.toggleOnBg,
886
+ toggleKnob: toggleKnob ?? this.toggleKnob,
887
+ bgSeveritySuccess: bgSeveritySuccess ?? this.bgSeveritySuccess,
888
+ borderSeveritySuccess: borderSeveritySuccess ?? this.borderSeveritySuccess,
889
+ signalSeveritySuccess: signalSeveritySuccess ?? this.signalSeveritySuccess,
890
+ iconSeveritySuccess: iconSeveritySuccess ?? this.iconSeveritySuccess,
891
+ textSeveritySuccess: textSeveritySuccess ?? this.textSeveritySuccess,
892
+ borderSeveritySuccessIndicator: borderSeveritySuccessIndicator ?? this.borderSeveritySuccessIndicator,
893
+ bgSeverityInfo: bgSeverityInfo ?? this.bgSeverityInfo,
894
+ borderSeverityInfo: borderSeverityInfo ?? this.borderSeverityInfo,
895
+ signalSeverityInfo: signalSeverityInfo ?? this.signalSeverityInfo,
896
+ iconSeverityInfo: iconSeverityInfo ?? this.iconSeverityInfo,
897
+ textSeverityInfo: textSeverityInfo ?? this.textSeverityInfo,
898
+ borderSeverityInfoIndicator: borderSeverityInfoIndicator ?? this.borderSeverityInfoIndicator,
899
+ bgSeverityWarning: bgSeverityWarning ?? this.bgSeverityWarning,
900
+ borderSeverityWarning: borderSeverityWarning ?? this.borderSeverityWarning,
901
+ signalSeverityWarning: signalSeverityWarning ?? this.signalSeverityWarning,
902
+ iconSeverityWarning: iconSeverityWarning ?? this.iconSeverityWarning,
903
+ textSeverityWarning: textSeverityWarning ?? this.textSeverityWarning,
904
+ borderSeverityWarningIndicator: borderSeverityWarningIndicator ?? this.borderSeverityWarningIndicator,
905
+ bgSeverityMinor: bgSeverityMinor ?? this.bgSeverityMinor,
906
+ borderSeverityMinor: borderSeverityMinor ?? this.borderSeverityMinor,
907
+ signalSeverityMinor: signalSeverityMinor ?? this.signalSeverityMinor,
908
+ iconSeverityMinor: iconSeverityMinor ?? this.iconSeverityMinor,
909
+ textSeverityMinor: textSeverityMinor ?? this.textSeverityMinor,
910
+ borderSeverityMinorIndicator: borderSeverityMinorIndicator ?? this.borderSeverityMinorIndicator,
911
+ bgSeverityMajor: bgSeverityMajor ?? this.bgSeverityMajor,
912
+ borderSeverityMajor: borderSeverityMajor ?? this.borderSeverityMajor,
913
+ signalSeverityMajor: signalSeverityMajor ?? this.signalSeverityMajor,
914
+ iconSeverityMajor: iconSeverityMajor ?? this.iconSeverityMajor,
915
+ textSeverityMajor: textSeverityMajor ?? this.textSeverityMajor,
916
+ borderSeverityMajorIndicator: borderSeverityMajorIndicator ?? this.borderSeverityMajorIndicator,
917
+ bgSeverityCritical: bgSeverityCritical ?? this.bgSeverityCritical,
918
+ borderSeverityCritical: borderSeverityCritical ?? this.borderSeverityCritical,
919
+ signalSeverityCritical: signalSeverityCritical ?? this.signalSeverityCritical,
920
+ iconSeverityCritical: iconSeverityCritical ?? this.iconSeverityCritical,
921
+ textSeverityCritical: textSeverityCritical ?? this.textSeverityCritical,
922
+ borderSeverityCriticalIndicator: borderSeverityCriticalIndicator ?? this.borderSeverityCriticalIndicator,
923
+ bgRiskLow: bgRiskLow ?? this.bgRiskLow,
924
+ borderRiskLow: borderRiskLow ?? this.borderRiskLow,
925
+ signalRiskLow: signalRiskLow ?? this.signalRiskLow,
926
+ iconRiskLow: iconRiskLow ?? this.iconRiskLow,
927
+ textRiskLow: textRiskLow ?? this.textRiskLow,
928
+ borderRiskLowIndicator: borderRiskLowIndicator ?? this.borderRiskLowIndicator,
929
+ bgRiskMedium: bgRiskMedium ?? this.bgRiskMedium,
930
+ borderRiskMedium: borderRiskMedium ?? this.borderRiskMedium,
931
+ signalRiskMedium: signalRiskMedium ?? this.signalRiskMedium,
932
+ iconRiskMedium: iconRiskMedium ?? this.iconRiskMedium,
933
+ textRiskMedium: textRiskMedium ?? this.textRiskMedium,
934
+ borderRiskMediumIndicator: borderRiskMediumIndicator ?? this.borderRiskMediumIndicator,
935
+ bgRiskHigh: bgRiskHigh ?? this.bgRiskHigh,
936
+ borderRiskHigh: borderRiskHigh ?? this.borderRiskHigh,
937
+ signalRiskHigh: signalRiskHigh ?? this.signalRiskHigh,
938
+ iconRiskHigh: iconRiskHigh ?? this.iconRiskHigh,
939
+ textRiskHigh: textRiskHigh ?? this.textRiskHigh,
940
+ borderRiskHighIndicator: borderRiskHighIndicator ?? this.borderRiskHighIndicator,
941
+ signalStatusUnknown: signalStatusUnknown ?? this.signalStatusUnknown,
942
+ signalStatusHealthy: signalStatusHealthy ?? this.signalStatusHealthy,
943
+ signalStatusWarning: signalStatusWarning ?? this.signalStatusWarning,
944
+ signalStatusMedium: signalStatusMedium ?? this.signalStatusMedium,
945
+ signalStatusUnhealthy: signalStatusUnhealthy ?? this.signalStatusUnhealthy,
946
+ focusRingColor: focusRingColor ?? this.focusRingColor,
947
+ );
948
+ }
949
+
950
+ @override
951
+ VelaColors lerp(ThemeExtension<VelaColors>? other, double t) {
952
+ if (other is! VelaColors) return this;
953
+ return VelaColors(
954
+ bgGlobal: Color.lerp(bgGlobal, other.bgGlobal, t)!,
955
+ bgContainer: Color.lerp(bgContainer, other.bgContainer, t)!,
956
+ bgRaised: Color.lerp(bgRaised, other.bgRaised, t)!,
957
+ bgHover: Color.lerp(bgHover, other.bgHover, t)!,
958
+ bgTooltip: Color.lerp(bgTooltip, other.bgTooltip, t)!,
959
+ bgInactive: Color.lerp(bgInactive, other.bgInactive, t)!,
960
+ bgSelected: Color.lerp(bgSelected, other.bgSelected, t)!,
961
+ primaryTint: Color.lerp(primaryTint, other.primaryTint, t)!,
962
+ primaryActiveBg: Color.lerp(primaryActiveBg, other.primaryActiveBg, t)!,
963
+ borderDefault: Color.lerp(borderDefault, other.borderDefault, t)!,
964
+ borderSubtle: Color.lerp(borderSubtle, other.borderSubtle, t)!,
965
+ borderActive: Color.lerp(borderActive, other.borderActive, t)!,
966
+ borderInactive: Color.lerp(borderInactive, other.borderInactive, t)!,
967
+ borderAction: Color.lerp(borderAction, other.borderAction, t)!,
968
+ textDefault: Color.lerp(textDefault, other.textDefault, t)!,
969
+ textHeading: Color.lerp(textHeading, other.textHeading, t)!,
970
+ textDeEmphasized: Color.lerp(textDeEmphasized, other.textDeEmphasized, t)!,
971
+ textInactive: Color.lerp(textInactive, other.textInactive, t)!,
972
+ textLink: Color.lerp(textLink, other.textLink, t)!,
973
+ textOnBrand: Color.lerp(textOnBrand, other.textOnBrand, t)!,
974
+ textOnTint: Color.lerp(textOnTint, other.textOnTint, t)!,
975
+ textError: Color.lerp(textError, other.textError, t)!,
976
+ iconDefault: Color.lerp(iconDefault, other.iconDefault, t)!,
977
+ iconStrong: Color.lerp(iconStrong, other.iconStrong, t)!,
978
+ iconSelected: Color.lerp(iconSelected, other.iconSelected, t)!,
979
+ iconDisabled: Color.lerp(iconDisabled, other.iconDisabled, t)!,
980
+ iconOnBrand: Color.lerp(iconOnBrand, other.iconOnBrand, t)!,
981
+ btnPrimaryBg: Color.lerp(btnPrimaryBg, other.btnPrimaryBg, t)!,
982
+ btnPrimaryHoverBg: Color.lerp(btnPrimaryHoverBg, other.btnPrimaryHoverBg, t)!,
983
+ btnPrimaryBorder: Color.lerp(btnPrimaryBorder, other.btnPrimaryBorder, t)!,
984
+ btnPrimaryText: Color.lerp(btnPrimaryText, other.btnPrimaryText, t)!,
985
+ btnStandardBg: Color.lerp(btnStandardBg, other.btnStandardBg, t)!,
986
+ btnStandardHoverBg: Color.lerp(btnStandardHoverBg, other.btnStandardHoverBg, t)!,
987
+ btnStandardText: Color.lerp(btnStandardText, other.btnStandardText, t)!,
988
+ btnHollowPrimaryText: Color.lerp(btnHollowPrimaryText, other.btnHollowPrimaryText, t)!,
989
+ btnHollowPrimaryBorder: Color.lerp(btnHollowPrimaryBorder, other.btnHollowPrimaryBorder, t)!,
990
+ btnDisabledBg: Color.lerp(btnDisabledBg, other.btnDisabledBg, t)!,
991
+ btnDisabledText: Color.lerp(btnDisabledText, other.btnDisabledText, t)!,
992
+ btnDestructiveBg: Color.lerp(btnDestructiveBg, other.btnDestructiveBg, t)!,
993
+ btnDestructiveHoverBg: Color.lerp(btnDestructiveHoverBg, other.btnDestructiveHoverBg, t)!,
994
+ btnDestructiveText: Color.lerp(btnDestructiveText, other.btnDestructiveText, t)!,
995
+ btnDestructiveHollowText: Color.lerp(btnDestructiveHollowText, other.btnDestructiveHollowText, t)!,
996
+ btnStandardBorder: Color.lerp(btnStandardBorder, other.btnStandardBorder, t)!,
997
+ btnHollowHoverBg: Color.lerp(btnHollowHoverBg, other.btnHollowHoverBg, t)!,
998
+ controlBg: Color.lerp(controlBg, other.controlBg, t)!,
999
+ controlBorder: Color.lerp(controlBorder, other.controlBorder, t)!,
1000
+ controlBorderHover: Color.lerp(controlBorderHover, other.controlBorderHover, t)!,
1001
+ controlBorderActive: Color.lerp(controlBorderActive, other.controlBorderActive, t)!,
1002
+ controlBorderError: Color.lerp(controlBorderError, other.controlBorderError, t)!,
1003
+ controlBgDisabled: Color.lerp(controlBgDisabled, other.controlBgDisabled, t)!,
1004
+ controlPlaceholder: Color.lerp(controlPlaceholder, other.controlPlaceholder, t)!,
1005
+ toggleOffBg: Color.lerp(toggleOffBg, other.toggleOffBg, t)!,
1006
+ toggleOnBg: Color.lerp(toggleOnBg, other.toggleOnBg, t)!,
1007
+ toggleKnob: Color.lerp(toggleKnob, other.toggleKnob, t)!,
1008
+ bgSeveritySuccess: Color.lerp(bgSeveritySuccess, other.bgSeveritySuccess, t)!,
1009
+ borderSeveritySuccess: Color.lerp(borderSeveritySuccess, other.borderSeveritySuccess, t)!,
1010
+ signalSeveritySuccess: Color.lerp(signalSeveritySuccess, other.signalSeveritySuccess, t)!,
1011
+ iconSeveritySuccess: Color.lerp(iconSeveritySuccess, other.iconSeveritySuccess, t)!,
1012
+ textSeveritySuccess: Color.lerp(textSeveritySuccess, other.textSeveritySuccess, t)!,
1013
+ borderSeveritySuccessIndicator: Color.lerp(borderSeveritySuccessIndicator, other.borderSeveritySuccessIndicator, t)!,
1014
+ bgSeverityInfo: Color.lerp(bgSeverityInfo, other.bgSeverityInfo, t)!,
1015
+ borderSeverityInfo: Color.lerp(borderSeverityInfo, other.borderSeverityInfo, t)!,
1016
+ signalSeverityInfo: Color.lerp(signalSeverityInfo, other.signalSeverityInfo, t)!,
1017
+ iconSeverityInfo: Color.lerp(iconSeverityInfo, other.iconSeverityInfo, t)!,
1018
+ textSeverityInfo: Color.lerp(textSeverityInfo, other.textSeverityInfo, t)!,
1019
+ borderSeverityInfoIndicator: Color.lerp(borderSeverityInfoIndicator, other.borderSeverityInfoIndicator, t)!,
1020
+ bgSeverityWarning: Color.lerp(bgSeverityWarning, other.bgSeverityWarning, t)!,
1021
+ borderSeverityWarning: Color.lerp(borderSeverityWarning, other.borderSeverityWarning, t)!,
1022
+ signalSeverityWarning: Color.lerp(signalSeverityWarning, other.signalSeverityWarning, t)!,
1023
+ iconSeverityWarning: Color.lerp(iconSeverityWarning, other.iconSeverityWarning, t)!,
1024
+ textSeverityWarning: Color.lerp(textSeverityWarning, other.textSeverityWarning, t)!,
1025
+ borderSeverityWarningIndicator: Color.lerp(borderSeverityWarningIndicator, other.borderSeverityWarningIndicator, t)!,
1026
+ bgSeverityMinor: Color.lerp(bgSeverityMinor, other.bgSeverityMinor, t)!,
1027
+ borderSeverityMinor: Color.lerp(borderSeverityMinor, other.borderSeverityMinor, t)!,
1028
+ signalSeverityMinor: Color.lerp(signalSeverityMinor, other.signalSeverityMinor, t)!,
1029
+ iconSeverityMinor: Color.lerp(iconSeverityMinor, other.iconSeverityMinor, t)!,
1030
+ textSeverityMinor: Color.lerp(textSeverityMinor, other.textSeverityMinor, t)!,
1031
+ borderSeverityMinorIndicator: Color.lerp(borderSeverityMinorIndicator, other.borderSeverityMinorIndicator, t)!,
1032
+ bgSeverityMajor: Color.lerp(bgSeverityMajor, other.bgSeverityMajor, t)!,
1033
+ borderSeverityMajor: Color.lerp(borderSeverityMajor, other.borderSeverityMajor, t)!,
1034
+ signalSeverityMajor: Color.lerp(signalSeverityMajor, other.signalSeverityMajor, t)!,
1035
+ iconSeverityMajor: Color.lerp(iconSeverityMajor, other.iconSeverityMajor, t)!,
1036
+ textSeverityMajor: Color.lerp(textSeverityMajor, other.textSeverityMajor, t)!,
1037
+ borderSeverityMajorIndicator: Color.lerp(borderSeverityMajorIndicator, other.borderSeverityMajorIndicator, t)!,
1038
+ bgSeverityCritical: Color.lerp(bgSeverityCritical, other.bgSeverityCritical, t)!,
1039
+ borderSeverityCritical: Color.lerp(borderSeverityCritical, other.borderSeverityCritical, t)!,
1040
+ signalSeverityCritical: Color.lerp(signalSeverityCritical, other.signalSeverityCritical, t)!,
1041
+ iconSeverityCritical: Color.lerp(iconSeverityCritical, other.iconSeverityCritical, t)!,
1042
+ textSeverityCritical: Color.lerp(textSeverityCritical, other.textSeverityCritical, t)!,
1043
+ borderSeverityCriticalIndicator: Color.lerp(borderSeverityCriticalIndicator, other.borderSeverityCriticalIndicator, t)!,
1044
+ bgRiskLow: Color.lerp(bgRiskLow, other.bgRiskLow, t)!,
1045
+ borderRiskLow: Color.lerp(borderRiskLow, other.borderRiskLow, t)!,
1046
+ signalRiskLow: Color.lerp(signalRiskLow, other.signalRiskLow, t)!,
1047
+ iconRiskLow: Color.lerp(iconRiskLow, other.iconRiskLow, t)!,
1048
+ textRiskLow: Color.lerp(textRiskLow, other.textRiskLow, t)!,
1049
+ borderRiskLowIndicator: Color.lerp(borderRiskLowIndicator, other.borderRiskLowIndicator, t)!,
1050
+ bgRiskMedium: Color.lerp(bgRiskMedium, other.bgRiskMedium, t)!,
1051
+ borderRiskMedium: Color.lerp(borderRiskMedium, other.borderRiskMedium, t)!,
1052
+ signalRiskMedium: Color.lerp(signalRiskMedium, other.signalRiskMedium, t)!,
1053
+ iconRiskMedium: Color.lerp(iconRiskMedium, other.iconRiskMedium, t)!,
1054
+ textRiskMedium: Color.lerp(textRiskMedium, other.textRiskMedium, t)!,
1055
+ borderRiskMediumIndicator: Color.lerp(borderRiskMediumIndicator, other.borderRiskMediumIndicator, t)!,
1056
+ bgRiskHigh: Color.lerp(bgRiskHigh, other.bgRiskHigh, t)!,
1057
+ borderRiskHigh: Color.lerp(borderRiskHigh, other.borderRiskHigh, t)!,
1058
+ signalRiskHigh: Color.lerp(signalRiskHigh, other.signalRiskHigh, t)!,
1059
+ iconRiskHigh: Color.lerp(iconRiskHigh, other.iconRiskHigh, t)!,
1060
+ textRiskHigh: Color.lerp(textRiskHigh, other.textRiskHigh, t)!,
1061
+ borderRiskHighIndicator: Color.lerp(borderRiskHighIndicator, other.borderRiskHighIndicator, t)!,
1062
+ signalStatusUnknown: Color.lerp(signalStatusUnknown, other.signalStatusUnknown, t)!,
1063
+ signalStatusHealthy: Color.lerp(signalStatusHealthy, other.signalStatusHealthy, t)!,
1064
+ signalStatusWarning: Color.lerp(signalStatusWarning, other.signalStatusWarning, t)!,
1065
+ signalStatusMedium: Color.lerp(signalStatusMedium, other.signalStatusMedium, t)!,
1066
+ signalStatusUnhealthy: Color.lerp(signalStatusUnhealthy, other.signalStatusUnhealthy, t)!,
1067
+ focusRingColor: Color.lerp(focusRingColor, other.focusRingColor, t)!,
1068
+ );
1069
+ }
1070
+ }
1071
+
1072
+ /// Spacing, icon, control-height, radius and focus scales in logical pixels, plus motion.
1073
+ abstract final class VelaSizing {
1074
+ static const double space5 = 5;
1075
+ static const double space10 = 10;
1076
+ static const double space15 = 15;
1077
+ static const double space20 = 20;
1078
+ /// 25 exists; 50 does not. Do not interpolate the scale.
1079
+ static const double space25 = 25;
1080
+ static const double space30 = 30;
1081
+ static const double space40 = 40;
1082
+ static const double space60 = 60;
1083
+ static const double space80 = 80;
1084
+ static const double icon12 = 12;
1085
+ /// Button icons never exceed 16. 12 at tiny, 16 everywhere else.
1086
+ static const double icon16 = 16;
1087
+ static const double icon20 = 20;
1088
+ static const double icon24 = 24;
1089
+ /// Button and the input family do not share a height ramp.
1090
+ static const double controlHeight24 = 24;
1091
+ /// Button and the input family do not share a height ramp.
1092
+ static const double controlHeight25 = 25;
1093
+ /// Button and the input family do not share a height ramp.
1094
+ static const double controlHeight26 = 26;
1095
+ /// Button and the input family do not share a height ramp.
1096
+ static const double controlHeight35 = 35;
1097
+ /// Button and the input family do not share a height ramp.
1098
+ static const double controlHeight40 = 40;
1099
+ /// Button and the input family do not share a height ramp.
1100
+ static const double controlHeight48 = 48;
1101
+ /// Button and the input family do not share a height ramp.
1102
+ static const double controlHeight60 = 60;
1103
+ static const double radius3 = 3;
1104
+ /// The default corner for every component.
1105
+ static const double radius4 = 4;
1106
+ static const double radius8 = 8;
1107
+ static const double radius12 = 12;
1108
+ /// Status Indicator dots and the Toggle track only.
1109
+ static const double radiusFull = 9999;
1110
+ static const double focusRingWidth = 2;
1111
+ static const double focusRingOffset = 2;
1112
+ static const Duration durationFast = Duration(milliseconds: 120);
1113
+ static const Duration durationBase = Duration(milliseconds: 180);
1114
+ static const Cubic easeStandard = Cubic(0.2, 0, 0.2, 1);
1115
+ }
1116
+
1117
+ /// Type ramp. Sizes and line-heights in logical pixels; each composed [TextStyle] sets
1118
+ /// `height` to line-height ÷ size, which is how Flutter expresses a line-height.
1119
+ abstract final class VelaTypography {
1120
+ static const String fontFamilyPrimary = 'Open Sans';
1121
+ static const List<String> fontFamilyPrimaryFallback = <String>['Segoe UI', 'Roboto'];
1122
+ static const String fontFamilyDisplay = 'Oswald';
1123
+ static const List<String> fontFamilyDisplayFallback = <String>['Open Sans'];
1124
+ static const FontWeight fontWeightLight = FontWeight.w300;
1125
+ /// Button labels are Regular 400 at every size.
1126
+ static const FontWeight fontWeightRegular = FontWeight.w400;
1127
+ static const FontWeight fontWeightSemibold = FontWeight.w600;
1128
+ static const double textH1Size = 32;
1129
+ static const FontWeight textH1Weight = FontWeight.w300;
1130
+ static const double textH1LineHeight = 42;
1131
+ static const double textH2Size = 24;
1132
+ static const FontWeight textH2Weight = FontWeight.w300;
1133
+ static const double textH2LineHeight = 33;
1134
+ static const double textH3Size = 20;
1135
+ static const FontWeight textH3Weight = FontWeight.w300;
1136
+ static const double textH3LineHeight = 27;
1137
+ static const double textH4Size = 16;
1138
+ static const FontWeight textH4Weight = FontWeight.w400;
1139
+ static const double textH4LineHeight = 24;
1140
+ static const double textH5Size = 14;
1141
+ static const FontWeight textH5Weight = FontWeight.w600;
1142
+ static const double textH5LineHeight = 21;
1143
+ static const double textH6Size = 12;
1144
+ static const FontWeight textH6Weight = FontWeight.w600;
1145
+ static const double textH6LineHeight = 18;
1146
+ static const double textBodySize = 14;
1147
+ static const FontWeight textBodyWeight = FontWeight.w400;
1148
+ static const double textBodyLineHeight = 21;
1149
+ static const double textMetaSize = 12;
1150
+ static const FontWeight textMetaWeight = FontWeight.w400;
1151
+ static const double textMetaLineHeight = 18;
1152
+ static const double textMetaTracking = 0.3;
1153
+ static const double textButtonTinySize = 12;
1154
+ static const double textButtonTinyLineHeight = 18;
1155
+ static const double textButtonRegularSize = 14;
1156
+ static const double textButtonRegularLineHeight = 21;
1157
+ static const double textButtonLargeSize = 15;
1158
+ static const double textButtonLargeLineHeight = 22;
1159
+ static const double textButtonHugeSize = 16;
1160
+ static const double textButtonHugeLineHeight = 24;
1161
+ static const double textTabSize = 14;
1162
+ static const double textTabLineHeight = 19;
1163
+ static const double textTabLargeSize = 18;
1164
+ static const double textTabLargeLineHeight = 25;
1165
+
1166
+ // Composed styles — one per size in the ramp. All use fontFamilyPrimary; fontFamilyDisplay
1167
+ // (Oswald) is for large stat displays only and has no text style of its own, as in the CSS.
1168
+ static const TextStyle h1 = TextStyle(
1169
+ fontFamily: fontFamilyPrimary,
1170
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1171
+ fontSize: textH1Size,
1172
+ fontWeight: textH1Weight,
1173
+ height: textH1LineHeight / textH1Size,
1174
+ );
1175
+ static const TextStyle h2 = TextStyle(
1176
+ fontFamily: fontFamilyPrimary,
1177
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1178
+ fontSize: textH2Size,
1179
+ fontWeight: textH2Weight,
1180
+ height: textH2LineHeight / textH2Size,
1181
+ );
1182
+ static const TextStyle h3 = TextStyle(
1183
+ fontFamily: fontFamilyPrimary,
1184
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1185
+ fontSize: textH3Size,
1186
+ fontWeight: textH3Weight,
1187
+ height: textH3LineHeight / textH3Size,
1188
+ );
1189
+ static const TextStyle h4 = TextStyle(
1190
+ fontFamily: fontFamilyPrimary,
1191
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1192
+ fontSize: textH4Size,
1193
+ fontWeight: textH4Weight,
1194
+ height: textH4LineHeight / textH4Size,
1195
+ );
1196
+ static const TextStyle h5 = TextStyle(
1197
+ fontFamily: fontFamilyPrimary,
1198
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1199
+ fontSize: textH5Size,
1200
+ fontWeight: textH5Weight,
1201
+ height: textH5LineHeight / textH5Size,
1202
+ );
1203
+ static const TextStyle h6 = TextStyle(
1204
+ fontFamily: fontFamilyPrimary,
1205
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1206
+ fontSize: textH6Size,
1207
+ fontWeight: textH6Weight,
1208
+ height: textH6LineHeight / textH6Size,
1209
+ );
1210
+ static const TextStyle body = TextStyle(
1211
+ fontFamily: fontFamilyPrimary,
1212
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1213
+ fontSize: textBodySize,
1214
+ fontWeight: textBodyWeight,
1215
+ height: textBodyLineHeight / textBodySize,
1216
+ );
1217
+ static const TextStyle meta = TextStyle(
1218
+ fontFamily: fontFamilyPrimary,
1219
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1220
+ fontSize: textMetaSize,
1221
+ fontWeight: textMetaWeight,
1222
+ height: textMetaLineHeight / textMetaSize,
1223
+ letterSpacing: textMetaTracking,
1224
+ );
1225
+ static const TextStyle buttonTiny = TextStyle(
1226
+ fontFamily: fontFamilyPrimary,
1227
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1228
+ fontSize: textButtonTinySize,
1229
+ fontWeight: fontWeightRegular,
1230
+ height: textButtonTinyLineHeight / textButtonTinySize,
1231
+ );
1232
+ static const TextStyle buttonRegular = TextStyle(
1233
+ fontFamily: fontFamilyPrimary,
1234
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1235
+ fontSize: textButtonRegularSize,
1236
+ fontWeight: fontWeightRegular,
1237
+ height: textButtonRegularLineHeight / textButtonRegularSize,
1238
+ );
1239
+ static const TextStyle buttonLarge = TextStyle(
1240
+ fontFamily: fontFamilyPrimary,
1241
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1242
+ fontSize: textButtonLargeSize,
1243
+ fontWeight: fontWeightRegular,
1244
+ height: textButtonLargeLineHeight / textButtonLargeSize,
1245
+ );
1246
+ static const TextStyle buttonHuge = TextStyle(
1247
+ fontFamily: fontFamilyPrimary,
1248
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1249
+ fontSize: textButtonHugeSize,
1250
+ fontWeight: fontWeightRegular,
1251
+ height: textButtonHugeLineHeight / textButtonHugeSize,
1252
+ );
1253
+ static const TextStyle tab = TextStyle(
1254
+ fontFamily: fontFamilyPrimary,
1255
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1256
+ fontSize: textTabSize,
1257
+ fontWeight: fontWeightRegular,
1258
+ height: textTabLineHeight / textTabSize,
1259
+ );
1260
+ static const TextStyle tabLarge = TextStyle(
1261
+ fontFamily: fontFamilyPrimary,
1262
+ fontFamilyFallback: fontFamilyPrimaryFallback,
1263
+ fontSize: textTabLargeSize,
1264
+ fontWeight: fontWeightRegular,
1265
+ height: textTabLargeLineHeight / textTabLargeSize,
1266
+ );
1267
+ }
1268
+
1269
+ /// A [ThemeData] seeded from the semantic tokens.
1270
+ ///
1271
+ /// The [ColorScheme] mapping is a starting point — Material's colour roles and Vela's
1272
+ /// semantics are different vocabularies. The full palette is always available through
1273
+ /// [VelaColors], which this installs as a theme extension.
1274
+ ThemeData velaThemeData(Brightness brightness) {
1275
+ final VelaColors c = brightness == Brightness.dark ? VelaColors.dark : VelaColors.light;
1276
+ return ThemeData(
1277
+ useMaterial3: true,
1278
+ brightness: brightness,
1279
+ colorScheme: ColorScheme(
1280
+ brightness: brightness,
1281
+ primary: c.btnPrimaryBg,
1282
+ onPrimary: c.btnPrimaryText,
1283
+ secondary: c.primaryTint,
1284
+ onSecondary: c.textOnTint,
1285
+ error: c.textError,
1286
+ onError: c.textOnBrand,
1287
+ surface: c.bgGlobal,
1288
+ onSurface: c.textDefault,
1289
+ ),
1290
+ scaffoldBackgroundColor: c.bgGlobal,
1291
+ canvasColor: c.bgGlobal,
1292
+ cardColor: c.bgRaised,
1293
+ dividerColor: c.borderSubtle,
1294
+ focusColor: c.focusRingColor,
1295
+ hoverColor: c.bgHover,
1296
+ disabledColor: c.textInactive,
1297
+ fontFamily: VelaTypography.fontFamilyPrimary,
1298
+ textTheme: const TextTheme(
1299
+ headlineLarge: VelaTypography.h1,
1300
+ headlineMedium: VelaTypography.h2,
1301
+ headlineSmall: VelaTypography.h3,
1302
+ titleLarge: VelaTypography.h4,
1303
+ titleMedium: VelaTypography.h5,
1304
+ titleSmall: VelaTypography.h6,
1305
+ bodyMedium: VelaTypography.body,
1306
+ labelSmall: VelaTypography.meta,
1307
+ labelLarge: VelaTypography.buttonRegular,
1308
+ ),
1309
+ extensions: <ThemeExtension<dynamic>>[c],
1310
+ );
1311
+ }