@echelon-foundry/design-system 0.8.0 → 0.9.0-main.252.1

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.
Files changed (24) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/contracts/color-contract.json +1814 -0
  3. package/dist/all.css +82 -2
  4. package/dist/brands/echelon.css +16 -0
  5. package/dist/brands/example-harbor.css +16 -0
  6. package/dist/build-metrics.json +5 -5
  7. package/dist/components.css +5 -1
  8. package/dist/foundations.css +1 -1
  9. package/dist/icons/registry.json +1 -1
  10. package/dist/marketing/forma-all.css +83 -3
  11. package/dist/marketing/forma-echelon-marketing.css +78 -2
  12. package/dist/marketing/forma-marketing-theme-echelon.css +1 -1
  13. package/dist/marketing/forma-marketing.css +78 -2
  14. package/dist/marketing/forma-marketing.manifest.json +9 -9
  15. package/dist/marketing/forma-marketing.sha256 +4 -4
  16. package/dist/tokens.css +76 -0
  17. package/docs/BRANDING.md +6 -3
  18. package/docs/COLOR.md +77 -0
  19. package/package.json +13 -3
  20. package/schemas/brand-manifest.schema.json +1 -1
  21. package/tokens/echelon.tokens.json +252 -0
  22. package/tools/color-contract/build.mjs +16 -0
  23. package/tools/color-contract/cli.mjs +26 -0
  24. package/tools/color-contract/index.mjs +170 -0
package/dist/all.css CHANGED
@@ -159,6 +159,10 @@
159
159
  --ef-color-control-track: #686d68;
160
160
  --ef-color-focus-gap: #f2efe7;
161
161
  --ef-color-focus-ring: #171a18;
162
+ --ef-color-status-danger: #a13a2c;
163
+ --ef-color-status-info: #2d5f86;
164
+ --ef-color-status-success: #2e6a45;
165
+ --ef-color-status-warning: #86560f;
162
166
  --ef-color-surface-inverse: #202421;
163
167
  --ef-color-surface-inverse-secondary: #3a403c;
164
168
  --ef-color-surface-primary: #f2efe7;
@@ -180,6 +184,10 @@
180
184
  --ef-color-control-track: #686d68;
181
185
  --ef-color-focus-gap: #171a18;
182
186
  --ef-color-focus-ring: #f2efe7;
187
+ --ef-color-status-danger: #ef9a8b;
188
+ --ef-color-status-info: #90b9dc;
189
+ --ef-color-status-success: #8cc49f;
190
+ --ef-color-status-warning: #ddb266;
183
191
  --ef-color-surface-inverse: #f2efe7;
184
192
  --ef-color-surface-inverse-secondary: #e3e0d7;
185
193
  --ef-color-surface-primary: #171a18;
@@ -201,6 +209,10 @@
201
209
  --ef-color-control-track: #555555;
202
210
  --ef-color-focus-gap: #ffffff;
203
211
  --ef-color-focus-ring: #005ea8;
212
+ --ef-color-status-danger: #a13a2c;
213
+ --ef-color-status-info: #2d5f86;
214
+ --ef-color-status-success: #2e6a45;
215
+ --ef-color-status-warning: #86560f;
204
216
  --ef-color-surface-inverse: #161616;
205
217
  --ef-color-surface-inverse-secondary: #303030;
206
218
  --ef-color-surface-primary: #ffffff;
@@ -221,6 +233,10 @@
221
233
  --ef-color-control-track: #555555;
222
234
  --ef-color-focus-gap: #ffffff;
223
235
  --ef-color-focus-ring: #315f8c;
236
+ --ef-color-status-danger: #a13a2c;
237
+ --ef-color-status-info: #2d5f86;
238
+ --ef-color-status-success: #2e6a45;
239
+ --ef-color-status-warning: #86560f;
224
240
  --ef-color-surface-inverse: #161616;
225
241
  --ef-color-surface-inverse-secondary: #303030;
226
242
  --ef-color-surface-primary: #ffffff;
@@ -241,6 +257,10 @@
241
257
  --ef-color-control-track: #50636d;
242
258
  --ef-color-focus-gap: #f8fafb;
243
259
  --ef-color-focus-ring: #005ea8;
260
+ --ef-color-status-danger: #a13a2c;
261
+ --ef-color-status-info: #2d5f86;
262
+ --ef-color-status-success: #2e6a45;
263
+ --ef-color-status-warning: #86560f;
244
264
  --ef-color-surface-inverse: #17242b;
245
265
  --ef-color-surface-inverse-secondary: #303030;
246
266
  --ef-color-surface-primary: #f8fafb;
@@ -261,6 +281,10 @@
261
281
  --ef-color-control-track: #555555;
262
282
  --ef-color-focus-gap: #ffffff;
263
283
  --ef-color-focus-ring: #175f8f;
284
+ --ef-color-status-danger: #a13a2c;
285
+ --ef-color-status-info: #2d5f86;
286
+ --ef-color-status-success: #2e6a45;
287
+ --ef-color-status-warning: #86560f;
264
288
  --ef-color-surface-inverse: #161616;
265
289
  --ef-color-surface-inverse-secondary: #303030;
266
290
  --ef-color-surface-primary: #ffffff;
@@ -281,6 +305,10 @@
281
305
  --ef-color-control-track: #50636d;
282
306
  --ef-color-focus-gap: #f4f7f8;
283
307
  --ef-color-focus-ring: #245d7a;
308
+ --ef-color-status-danger: #a13a2c;
309
+ --ef-color-status-info: #2d5f86;
310
+ --ef-color-status-success: #2e6a45;
311
+ --ef-color-status-warning: #86560f;
284
312
  --ef-color-surface-inverse: #17252b;
285
313
  --ef-color-surface-inverse-secondary: #303030;
286
314
  --ef-color-surface-primary: #f4f7f8;
@@ -301,6 +329,10 @@
301
329
  --ef-color-control-track: #686d68;
302
330
  --ef-color-focus-gap: #171a18;
303
331
  --ef-color-focus-ring: #f2efe7;
332
+ --ef-color-status-danger: #ef9a8b;
333
+ --ef-color-status-info: #90b9dc;
334
+ --ef-color-status-success: #8cc49f;
335
+ --ef-color-status-warning: #ddb266;
304
336
  --ef-color-surface-inverse: #f2efe7;
305
337
  --ef-color-surface-inverse-secondary: #e3e0d7;
306
338
  --ef-color-surface-primary: #171a18;
@@ -321,6 +353,10 @@
321
353
  --ef-color-control-track: #686d68;
322
354
  --ef-color-focus-gap: #12191d;
323
355
  --ef-color-focus-ring: #e8f1f4;
356
+ --ef-color-status-danger: #ef9a8b;
357
+ --ef-color-status-info: #90b9dc;
358
+ --ef-color-status-success: #8cc49f;
359
+ --ef-color-status-warning: #ddb266;
324
360
  --ef-color-surface-inverse: #e8f1f4;
325
361
  --ef-color-surface-inverse-secondary: #e3e0d7;
326
362
  --ef-color-surface-primary: #12191d;
@@ -341,6 +377,10 @@
341
377
  --ef-color-control-track: #686d68;
342
378
  --ef-color-focus-gap: #101619;
343
379
  --ef-color-focus-ring: #e7eef0;
380
+ --ef-color-status-danger: #ef9a8b;
381
+ --ef-color-status-info: #90b9dc;
382
+ --ef-color-status-success: #8cc49f;
383
+ --ef-color-status-warning: #ddb266;
344
384
  --ef-color-surface-inverse: #e7eef0;
345
385
  --ef-color-surface-inverse-secondary: #e3e0d7;
346
386
  --ef-color-surface-primary: #101619;
@@ -361,6 +401,10 @@
361
401
  --ef-color-control-track: #555555;
362
402
  --ef-color-focus-gap: #ffffff;
363
403
  --ef-color-focus-ring: #000000;
404
+ --ef-color-status-danger: #a13a2c;
405
+ --ef-color-status-info: #2d5f86;
406
+ --ef-color-status-success: #2e6a45;
407
+ --ef-color-status-warning: #86560f;
364
408
  --ef-color-surface-inverse: #000000;
365
409
  --ef-color-surface-inverse-secondary: #303030;
366
410
  --ef-color-surface-primary: #ffffff;
@@ -381,6 +425,10 @@
381
425
  --ef-color-control-track: #555555;
382
426
  --ef-color-focus-gap: #ffffff;
383
427
  --ef-color-focus-ring: #161616;
428
+ --ef-color-status-danger: #a13a2c;
429
+ --ef-color-status-info: #2d5f86;
430
+ --ef-color-status-success: #2e6a45;
431
+ --ef-color-status-warning: #86560f;
384
432
  --ef-color-surface-inverse: #161616;
385
433
  --ef-color-surface-inverse-secondary: #303030;
386
434
  --ef-color-surface-primary: #ffffff;
@@ -401,6 +449,10 @@
401
449
  --ef-color-control-track: #555555;
402
450
  --ef-color-focus-gap: #eeeeee;
403
451
  --ef-color-focus-ring: #161616;
452
+ --ef-color-status-danger: #a13a2c;
453
+ --ef-color-status-info: #2d5f86;
454
+ --ef-color-status-success: #2e6a45;
455
+ --ef-color-status-warning: #86560f;
404
456
  --ef-color-surface-inverse: #161616;
405
457
  --ef-color-surface-inverse-secondary: #303030;
406
458
  --ef-color-surface-primary: #eeeeee;
@@ -421,6 +473,10 @@
421
473
  --ef-color-control-track: #555555;
422
474
  --ef-color-focus-gap: #f1f0e5;
423
475
  --ef-color-focus-ring: #20281f;
476
+ --ef-color-status-danger: #a13a2c;
477
+ --ef-color-status-info: #2d5f86;
478
+ --ef-color-status-success: #2e6a45;
479
+ --ef-color-status-warning: #86560f;
424
480
  --ef-color-surface-inverse: #20281f;
425
481
  --ef-color-surface-inverse-secondary: #303030;
426
482
  --ef-color-surface-primary: #f1f0e5;
@@ -441,6 +497,10 @@
441
497
  --ef-color-control-track: #555555;
442
498
  --ef-color-focus-gap: #f6f4ef;
443
499
  --ef-color-focus-ring: #161616;
500
+ --ef-color-status-danger: #a13a2c;
501
+ --ef-color-status-info: #2d5f86;
502
+ --ef-color-status-success: #2e6a45;
503
+ --ef-color-status-warning: #86560f;
444
504
  --ef-color-surface-inverse: #161616;
445
505
  --ef-color-surface-inverse-secondary: #303030;
446
506
  --ef-color-surface-primary: #f6f4ef;
@@ -461,6 +521,10 @@
461
521
  --ef-color-control-track: #555555;
462
522
  --ef-color-focus-gap: #ffffff;
463
523
  --ef-color-focus-ring: #9c2f25;
524
+ --ef-color-status-danger: #a13a2c;
525
+ --ef-color-status-info: #2d5f86;
526
+ --ef-color-status-success: #2e6a45;
527
+ --ef-color-status-warning: #86560f;
464
528
  --ef-color-surface-inverse: #161616;
465
529
  --ef-color-surface-inverse-secondary: #303030;
466
530
  --ef-color-surface-primary: #ffffff;
@@ -481,6 +545,10 @@
481
545
  --ef-color-control-track: #555555;
482
546
  --ef-color-focus-gap: #f7f2e7;
483
547
  --ef-color-focus-ring: #211d18;
548
+ --ef-color-status-danger: #a13a2c;
549
+ --ef-color-status-info: #2d5f86;
550
+ --ef-color-status-success: #2e6a45;
551
+ --ef-color-status-warning: #86560f;
484
552
  --ef-color-surface-inverse: #211d18;
485
553
  --ef-color-surface-inverse-secondary: #303030;
486
554
  --ef-color-surface-primary: #f7f2e7;
@@ -501,6 +569,10 @@
501
569
  --ef-color-control-track: #555555;
502
570
  --ef-color-focus-gap: #ffffff;
503
571
  --ef-color-focus-ring: #7a3f70;
572
+ --ef-color-status-danger: #a13a2c;
573
+ --ef-color-status-info: #2d5f86;
574
+ --ef-color-status-success: #2e6a45;
575
+ --ef-color-status-warning: #86560f;
504
576
  --ef-color-surface-inverse: #161616;
505
577
  --ef-color-surface-inverse-secondary: #303030;
506
578
  --ef-color-surface-primary: #ffffff;
@@ -521,6 +593,10 @@
521
593
  --ef-color-control-track: #555555;
522
594
  --ef-color-focus-gap: #f3eadc;
523
595
  --ef-color-focus-ring: #29231c;
596
+ --ef-color-status-danger: #a13a2c;
597
+ --ef-color-status-info: #2d5f86;
598
+ --ef-color-status-success: #2e6a45;
599
+ --ef-color-status-warning: #86560f;
524
600
  --ef-color-surface-inverse: #29231c;
525
601
  --ef-color-surface-inverse-secondary: #303030;
526
602
  --ef-color-surface-primary: #f3eadc;
@@ -711,7 +787,7 @@
711
787
  recovery message remains the non-colour explanation of what to fix. */
712
788
  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
713
789
  border-inline-start-width: 0.3rem;
714
- border-inline-start-color: var(--ef-color-status-danger, #8d3027);
790
+ border-inline-start-color: var(--ef-color-status-danger, #a13a2c);
715
791
  }
716
792
 
717
793
  :where(:focus-visible) {
@@ -925,7 +1001,7 @@
925
1001
  --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
926
1002
  display: block;
927
1003
  padding: var(--ef-primitive-spacing-3, 0.75rem);
928
- border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
1004
+ border-inline-start: 0.25rem solid var(--ef-color-status-success, #2e6a45);
929
1005
  background: var(--ef-color-surface-secondary, #e3e0d7);
930
1006
  color: var(--ef-color-text-on-secondary-surface, #3a403c);
931
1007
  font-weight: 650;
@@ -2062,6 +2138,10 @@
2062
2138
  line-height: 0;
2063
2139
  }
2064
2140
 
2141
+ .ef-status-lozenge[data-state="ok"] { color: var(--ef-color-status-success, #2e6a45); border-inline-start-width: 0.25rem; }
2142
+ .ef-status-lozenge[data-state="attention"] { color: var(--ef-color-status-warning, #86560f); border-inline-start-width: 0.25rem; }
2143
+ .ef-status-lozenge[data-state="unknown"] { color: var(--ef-color-status-info, #2d5f86); border-inline-start-width: 0.25rem; }
2144
+ .ef-status-lozenge[data-state="blocked"] { color: var(--ef-color-status-danger, #a13a2c); border-inline-start-width: 0.25rem; }
2065
2145
  .ef-status-lozenge[data-state="ok"]::before { content: "✓"; }
2066
2146
  .ef-status-lozenge[data-state="attention"]::before { content: "!"; }
2067
2147
  .ef-status-lozenge[data-state="unknown"]::before { content: "?"; }
package/dist/brands/echelon.css CHANGED
@@ -25,6 +25,10 @@
25
25
  --ef-color-control-track: #686d68;
26
26
  --ef-color-control-thumb: #f2efe7;
27
27
  --ef-color-control-active: #905831;
28
+ --ef-color-status-success: #2e6a45;
29
+ --ef-color-status-warning: #86560f;
30
+ --ef-color-status-danger: #a13a2c;
31
+ --ef-color-status-info: #2d5f86;
28
32
  }
29
33
  [data-ef-theme="light"] [data-ef-brand="echelon"], [data-ef-brand="echelon"][data-ef-theme="light"] {
30
34
  --ef-color-text-primary: #171a18;
@@ -45,6 +49,10 @@
45
49
  --ef-color-control-track: #686d68;
46
50
  --ef-color-control-thumb: #f2efe7;
47
51
  --ef-color-control-active: #905831;
52
+ --ef-color-status-success: #2e6a45;
53
+ --ef-color-status-warning: #86560f;
54
+ --ef-color-status-danger: #a13a2c;
55
+ --ef-color-status-info: #2d5f86;
48
56
  }
49
57
  [data-ef-theme="dark"] [data-ef-brand="echelon"], [data-ef-brand="echelon"][data-ef-theme="dark"] {
50
58
  --ef-color-text-primary: #f2efe7;
@@ -65,6 +73,10 @@
65
73
  --ef-color-control-track: #686d68;
66
74
  --ef-color-control-thumb: #f2efe7;
67
75
  --ef-color-control-active: #a87e5e;
76
+ --ef-color-status-success: #8cc49f;
77
+ --ef-color-status-warning: #ddb266;
78
+ --ef-color-status-danger: #ef9a8b;
79
+ --ef-color-status-info: #90b9dc;
68
80
  }
69
81
  @media (prefers-color-scheme: dark) {
70
82
  :root:not([data-ef-theme]) [data-ef-brand="echelon"]:not([data-ef-theme]), :root[data-ef-brand="echelon"]:not([data-ef-theme]) {
@@ -86,6 +98,10 @@
86
98
  --ef-color-control-track: #686d68;
87
99
  --ef-color-control-thumb: #f2efe7;
88
100
  --ef-color-control-active: #a87e5e;
101
+ --ef-color-status-success: #8cc49f;
102
+ --ef-color-status-warning: #ddb266;
103
+ --ef-color-status-danger: #ef9a8b;
104
+ --ef-color-status-info: #90b9dc;
89
105
  }
90
106
  }
91
107
  }
package/dist/brands/example-harbor.css CHANGED
@@ -25,6 +25,10 @@
25
25
  --ef-color-control-track: #5d6d78;
26
26
  --ef-color-control-thumb: #f7f9fb;
27
27
  --ef-color-control-active: #7a4a00;
28
+ --ef-color-status-success: #2e6a45;
29
+ --ef-color-status-warning: #86560f;
30
+ --ef-color-status-danger: #a13a2c;
31
+ --ef-color-status-info: #2d5f86;
28
32
  }
29
33
  [data-ef-theme="light"] [data-ef-brand="example-harbor"], [data-ef-brand="example-harbor"][data-ef-theme="light"] {
30
34
  --ef-color-text-primary: #15212a;
@@ -45,6 +49,10 @@
45
49
  --ef-color-control-track: #5d6d78;
46
50
  --ef-color-control-thumb: #f7f9fb;
47
51
  --ef-color-control-active: #7a4a00;
52
+ --ef-color-status-success: #2e6a45;
53
+ --ef-color-status-warning: #86560f;
54
+ --ef-color-status-danger: #a13a2c;
55
+ --ef-color-status-info: #2d5f86;
48
56
  }
49
57
  [data-ef-theme="dark"] [data-ef-brand="example-harbor"], [data-ef-brand="example-harbor"][data-ef-theme="dark"] {
50
58
  --ef-color-text-primary: #f7f9fb;
@@ -65,6 +73,10 @@
65
73
  --ef-color-control-track: #60717e;
66
74
  --ef-color-control-thumb: #f7f9fb;
67
75
  --ef-color-control-active: #d7a85b;
76
+ --ef-color-status-success: #8cc49f;
77
+ --ef-color-status-warning: #ddb266;
78
+ --ef-color-status-danger: #ef9a8b;
79
+ --ef-color-status-info: #90b9dc;
68
80
  }
69
81
  @media (prefers-color-scheme: dark) {
70
82
  :root:not([data-ef-theme]) [data-ef-brand="example-harbor"]:not([data-ef-theme]), :root[data-ef-brand="example-harbor"]:not([data-ef-theme]) {
@@ -86,6 +98,10 @@
86
98
  --ef-color-control-track: #60717e;
87
99
  --ef-color-control-thumb: #f7f9fb;
88
100
  --ef-color-control-active: #d7a85b;
101
+ --ef-color-status-success: #8cc49f;
102
+ --ef-color-status-warning: #ddb266;
103
+ --ef-color-status-danger: #ef9a8b;
104
+ --ef-color-status-info: #90b9dc;
89
105
  }
90
106
  }
91
107
  }
package/dist/build-metrics.json CHANGED
@@ -341,12 +341,12 @@
341
341
  "tokens.css"
342
342
  ],
343
343
  "bytes": {
344
- "all.css": 329656,
344
+ "all.css": 332985,
345
345
  "assessment.css": 36343,
346
- "brands/echelon.css": 3621,
347
- "brands/example-harbor.css": 3637,
346
+ "brands/echelon.css": 4213,
347
+ "brands/example-harbor.css": 4229,
348
348
  "brands/index.json": 335,
349
- "components.css": 210904,
349
+ "components.css": 211421,
350
350
  "foundations.css": 15326,
351
351
  "icons/add.svg": 216,
352
352
  "icons/agent.svg": 354,
@@ -679,6 +679,6 @@
679
679
  "patterns/work-queue.html": 971,
680
680
  "patterns/workspace-shell.html": 479,
681
681
  "skins.css": 924,
682
- "tokens.css": 20923
682
+ "tokens.css": 23735
683
683
  }
684
684
  }
package/dist/components.css CHANGED
@@ -91,7 +91,7 @@
91
91
  --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
92
92
  display: block;
93
93
  padding: var(--ef-primitive-spacing-3, 0.75rem);
94
- border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
94
+ border-inline-start: 0.25rem solid var(--ef-color-status-success, #2e6a45);
95
95
  background: var(--ef-color-surface-secondary, #e3e0d7);
96
96
  color: var(--ef-color-text-on-secondary-surface, #3a403c);
97
97
  font-weight: 650;
@@ -1228,6 +1228,10 @@
1228
1228
  line-height: 0;
1229
1229
  }
1230
1230
 
1231
+ .ef-status-lozenge[data-state="ok"] { color: var(--ef-color-status-success, #2e6a45); border-inline-start-width: 0.25rem; }
1232
+ .ef-status-lozenge[data-state="attention"] { color: var(--ef-color-status-warning, #86560f); border-inline-start-width: 0.25rem; }
1233
+ .ef-status-lozenge[data-state="unknown"] { color: var(--ef-color-status-info, #2d5f86); border-inline-start-width: 0.25rem; }
1234
+ .ef-status-lozenge[data-state="blocked"] { color: var(--ef-color-status-danger, #a13a2c); border-inline-start-width: 0.25rem; }
1231
1235
  .ef-status-lozenge[data-state="ok"]::before { content: "✓"; }
1232
1236
  .ef-status-lozenge[data-state="attention"]::before { content: "!"; }
1233
1237
  .ef-status-lozenge[data-state="unknown"]::before { content: "?"; }
package/dist/foundations.css CHANGED
@@ -176,7 +176,7 @@
176
176
  recovery message remains the non-colour explanation of what to fix. */
177
177
  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
178
178
  border-inline-start-width: 0.3rem;
179
- border-inline-start-color: var(--ef-color-status-danger, #8d3027);
179
+ border-inline-start-color: var(--ef-color-status-danger, #a13a2c);
180
180
  }
181
181
 
182
182
  :where(:focus-visible) {
package/dist/icons/registry.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schemaVersion": 1,
3
- "formaVersion": "0.8.0",
3
+ "formaVersion": "0.9.0",
4
4
  "grid": 24,
5
5
  "icons": [
6
6
  {
package/dist/marketing/forma-all.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! Forma 0.8.0 | forma-all.css | bundle echelon-marketing
1
+ /*! Forma 0.9.0 | forma-all.css | bundle echelon-marketing
2
2
  Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.
3
3
  Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
4
4
 
@@ -164,6 +164,10 @@
164
164
  --ef-color-control-track: #686d68;
165
165
  --ef-color-focus-gap: #f2efe7;
166
166
  --ef-color-focus-ring: #171a18;
167
+ --ef-color-status-danger: #a13a2c;
168
+ --ef-color-status-info: #2d5f86;
169
+ --ef-color-status-success: #2e6a45;
170
+ --ef-color-status-warning: #86560f;
167
171
  --ef-color-surface-inverse: #202421;
168
172
  --ef-color-surface-inverse-secondary: #3a403c;
169
173
  --ef-color-surface-primary: #f2efe7;
@@ -185,6 +189,10 @@
185
189
  --ef-color-control-track: #686d68;
186
190
  --ef-color-focus-gap: #171a18;
187
191
  --ef-color-focus-ring: #f2efe7;
192
+ --ef-color-status-danger: #ef9a8b;
193
+ --ef-color-status-info: #90b9dc;
194
+ --ef-color-status-success: #8cc49f;
195
+ --ef-color-status-warning: #ddb266;
188
196
  --ef-color-surface-inverse: #f2efe7;
189
197
  --ef-color-surface-inverse-secondary: #e3e0d7;
190
198
  --ef-color-surface-primary: #171a18;
@@ -206,6 +214,10 @@
206
214
  --ef-color-control-track: #555555;
207
215
  --ef-color-focus-gap: #ffffff;
208
216
  --ef-color-focus-ring: #005ea8;
217
+ --ef-color-status-danger: #a13a2c;
218
+ --ef-color-status-info: #2d5f86;
219
+ --ef-color-status-success: #2e6a45;
220
+ --ef-color-status-warning: #86560f;
209
221
  --ef-color-surface-inverse: #161616;
210
222
  --ef-color-surface-inverse-secondary: #303030;
211
223
  --ef-color-surface-primary: #ffffff;
@@ -226,6 +238,10 @@
226
238
  --ef-color-control-track: #555555;
227
239
  --ef-color-focus-gap: #ffffff;
228
240
  --ef-color-focus-ring: #315f8c;
241
+ --ef-color-status-danger: #a13a2c;
242
+ --ef-color-status-info: #2d5f86;
243
+ --ef-color-status-success: #2e6a45;
244
+ --ef-color-status-warning: #86560f;
229
245
  --ef-color-surface-inverse: #161616;
230
246
  --ef-color-surface-inverse-secondary: #303030;
231
247
  --ef-color-surface-primary: #ffffff;
@@ -246,6 +262,10 @@
246
262
  --ef-color-control-track: #50636d;
247
263
  --ef-color-focus-gap: #f8fafb;
248
264
  --ef-color-focus-ring: #005ea8;
265
+ --ef-color-status-danger: #a13a2c;
266
+ --ef-color-status-info: #2d5f86;
267
+ --ef-color-status-success: #2e6a45;
268
+ --ef-color-status-warning: #86560f;
249
269
  --ef-color-surface-inverse: #17242b;
250
270
  --ef-color-surface-inverse-secondary: #303030;
251
271
  --ef-color-surface-primary: #f8fafb;
@@ -266,6 +286,10 @@
266
286
  --ef-color-control-track: #555555;
267
287
  --ef-color-focus-gap: #ffffff;
268
288
  --ef-color-focus-ring: #175f8f;
289
+ --ef-color-status-danger: #a13a2c;
290
+ --ef-color-status-info: #2d5f86;
291
+ --ef-color-status-success: #2e6a45;
292
+ --ef-color-status-warning: #86560f;
269
293
  --ef-color-surface-inverse: #161616;
270
294
  --ef-color-surface-inverse-secondary: #303030;
271
295
  --ef-color-surface-primary: #ffffff;
@@ -286,6 +310,10 @@
286
310
  --ef-color-control-track: #50636d;
287
311
  --ef-color-focus-gap: #f4f7f8;
288
312
  --ef-color-focus-ring: #245d7a;
313
+ --ef-color-status-danger: #a13a2c;
314
+ --ef-color-status-info: #2d5f86;
315
+ --ef-color-status-success: #2e6a45;
316
+ --ef-color-status-warning: #86560f;
289
317
  --ef-color-surface-inverse: #17252b;
290
318
  --ef-color-surface-inverse-secondary: #303030;
291
319
  --ef-color-surface-primary: #f4f7f8;
@@ -306,6 +334,10 @@
306
334
  --ef-color-control-track: #686d68;
307
335
  --ef-color-focus-gap: #171a18;
308
336
  --ef-color-focus-ring: #f2efe7;
337
+ --ef-color-status-danger: #ef9a8b;
338
+ --ef-color-status-info: #90b9dc;
339
+ --ef-color-status-success: #8cc49f;
340
+ --ef-color-status-warning: #ddb266;
309
341
  --ef-color-surface-inverse: #f2efe7;
310
342
  --ef-color-surface-inverse-secondary: #e3e0d7;
311
343
  --ef-color-surface-primary: #171a18;
@@ -326,6 +358,10 @@
326
358
  --ef-color-control-track: #686d68;
327
359
  --ef-color-focus-gap: #12191d;
328
360
  --ef-color-focus-ring: #e8f1f4;
361
+ --ef-color-status-danger: #ef9a8b;
362
+ --ef-color-status-info: #90b9dc;
363
+ --ef-color-status-success: #8cc49f;
364
+ --ef-color-status-warning: #ddb266;
329
365
  --ef-color-surface-inverse: #e8f1f4;
330
366
  --ef-color-surface-inverse-secondary: #e3e0d7;
331
367
  --ef-color-surface-primary: #12191d;
@@ -346,6 +382,10 @@
346
382
  --ef-color-control-track: #686d68;
347
383
  --ef-color-focus-gap: #101619;
348
384
  --ef-color-focus-ring: #e7eef0;
385
+ --ef-color-status-danger: #ef9a8b;
386
+ --ef-color-status-info: #90b9dc;
387
+ --ef-color-status-success: #8cc49f;
388
+ --ef-color-status-warning: #ddb266;
349
389
  --ef-color-surface-inverse: #e7eef0;
350
390
  --ef-color-surface-inverse-secondary: #e3e0d7;
351
391
  --ef-color-surface-primary: #101619;
@@ -366,6 +406,10 @@
366
406
  --ef-color-control-track: #555555;
367
407
  --ef-color-focus-gap: #ffffff;
368
408
  --ef-color-focus-ring: #000000;
409
+ --ef-color-status-danger: #a13a2c;
410
+ --ef-color-status-info: #2d5f86;
411
+ --ef-color-status-success: #2e6a45;
412
+ --ef-color-status-warning: #86560f;
369
413
  --ef-color-surface-inverse: #000000;
370
414
  --ef-color-surface-inverse-secondary: #303030;
371
415
  --ef-color-surface-primary: #ffffff;
@@ -386,6 +430,10 @@
386
430
  --ef-color-control-track: #555555;
387
431
  --ef-color-focus-gap: #ffffff;
388
432
  --ef-color-focus-ring: #161616;
433
+ --ef-color-status-danger: #a13a2c;
434
+ --ef-color-status-info: #2d5f86;
435
+ --ef-color-status-success: #2e6a45;
436
+ --ef-color-status-warning: #86560f;
389
437
  --ef-color-surface-inverse: #161616;
390
438
  --ef-color-surface-inverse-secondary: #303030;
391
439
  --ef-color-surface-primary: #ffffff;
@@ -406,6 +454,10 @@
406
454
  --ef-color-control-track: #555555;
407
455
  --ef-color-focus-gap: #eeeeee;
408
456
  --ef-color-focus-ring: #161616;
457
+ --ef-color-status-danger: #a13a2c;
458
+ --ef-color-status-info: #2d5f86;
459
+ --ef-color-status-success: #2e6a45;
460
+ --ef-color-status-warning: #86560f;
409
461
  --ef-color-surface-inverse: #161616;
410
462
  --ef-color-surface-inverse-secondary: #303030;
411
463
  --ef-color-surface-primary: #eeeeee;
@@ -426,6 +478,10 @@
426
478
  --ef-color-control-track: #555555;
427
479
  --ef-color-focus-gap: #f1f0e5;
428
480
  --ef-color-focus-ring: #20281f;
481
+ --ef-color-status-danger: #a13a2c;
482
+ --ef-color-status-info: #2d5f86;
483
+ --ef-color-status-success: #2e6a45;
484
+ --ef-color-status-warning: #86560f;
429
485
  --ef-color-surface-inverse: #20281f;
430
486
  --ef-color-surface-inverse-secondary: #303030;
431
487
  --ef-color-surface-primary: #f1f0e5;
@@ -446,6 +502,10 @@
446
502
  --ef-color-control-track: #555555;
447
503
  --ef-color-focus-gap: #f6f4ef;
448
504
  --ef-color-focus-ring: #161616;
505
+ --ef-color-status-danger: #a13a2c;
506
+ --ef-color-status-info: #2d5f86;
507
+ --ef-color-status-success: #2e6a45;
508
+ --ef-color-status-warning: #86560f;
449
509
  --ef-color-surface-inverse: #161616;
450
510
  --ef-color-surface-inverse-secondary: #303030;
451
511
  --ef-color-surface-primary: #f6f4ef;
@@ -466,6 +526,10 @@
466
526
  --ef-color-control-track: #555555;
467
527
  --ef-color-focus-gap: #ffffff;
468
528
  --ef-color-focus-ring: #9c2f25;
529
+ --ef-color-status-danger: #a13a2c;
530
+ --ef-color-status-info: #2d5f86;
531
+ --ef-color-status-success: #2e6a45;
532
+ --ef-color-status-warning: #86560f;
469
533
  --ef-color-surface-inverse: #161616;
470
534
  --ef-color-surface-inverse-secondary: #303030;
471
535
  --ef-color-surface-primary: #ffffff;
@@ -486,6 +550,10 @@
486
550
  --ef-color-control-track: #555555;
487
551
  --ef-color-focus-gap: #f7f2e7;
488
552
  --ef-color-focus-ring: #211d18;
553
+ --ef-color-status-danger: #a13a2c;
554
+ --ef-color-status-info: #2d5f86;
555
+ --ef-color-status-success: #2e6a45;
556
+ --ef-color-status-warning: #86560f;
489
557
  --ef-color-surface-inverse: #211d18;
490
558
  --ef-color-surface-inverse-secondary: #303030;
491
559
  --ef-color-surface-primary: #f7f2e7;
@@ -506,6 +574,10 @@
506
574
  --ef-color-control-track: #555555;
507
575
  --ef-color-focus-gap: #ffffff;
508
576
  --ef-color-focus-ring: #7a3f70;
577
+ --ef-color-status-danger: #a13a2c;
578
+ --ef-color-status-info: #2d5f86;
579
+ --ef-color-status-success: #2e6a45;
580
+ --ef-color-status-warning: #86560f;
509
581
  --ef-color-surface-inverse: #161616;
510
582
  --ef-color-surface-inverse-secondary: #303030;
511
583
  --ef-color-surface-primary: #ffffff;
@@ -526,6 +598,10 @@
526
598
  --ef-color-control-track: #555555;
527
599
  --ef-color-focus-gap: #f3eadc;
528
600
  --ef-color-focus-ring: #29231c;
601
+ --ef-color-status-danger: #a13a2c;
602
+ --ef-color-status-info: #2d5f86;
603
+ --ef-color-status-success: #2e6a45;
604
+ --ef-color-status-warning: #86560f;
529
605
  --ef-color-surface-inverse: #29231c;
530
606
  --ef-color-surface-inverse-secondary: #303030;
531
607
  --ef-color-surface-primary: #f3eadc;
@@ -716,7 +792,7 @@
716
792
  recovery message remains the non-colour explanation of what to fix. */
717
793
  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
718
794
  border-inline-start-width: 0.3rem;
719
- border-inline-start-color: var(--ef-color-status-danger, #8d3027);
795
+ border-inline-start-color: var(--ef-color-status-danger, #a13a2c);
720
796
  }
721
797
 
722
798
  :where(:focus-visible) {
@@ -930,7 +1006,7 @@
930
1006
  --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
931
1007
  display: block;
932
1008
  padding: var(--ef-primitive-spacing-3, 0.75rem);
933
- border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
1009
+ border-inline-start: 0.25rem solid var(--ef-color-status-success, #2e6a45);
934
1010
  background: var(--ef-color-surface-secondary, #e3e0d7);
935
1011
  color: var(--ef-color-text-on-secondary-surface, #3a403c);
936
1012
  font-weight: 650;
@@ -2067,6 +2143,10 @@
2067
2143
  line-height: 0;
2068
2144
  }
2069
2145
 
2146
+ .ef-status-lozenge[data-state="ok"] { color: var(--ef-color-status-success, #2e6a45); border-inline-start-width: 0.25rem; }
2147
+ .ef-status-lozenge[data-state="attention"] { color: var(--ef-color-status-warning, #86560f); border-inline-start-width: 0.25rem; }
2148
+ .ef-status-lozenge[data-state="unknown"] { color: var(--ef-color-status-info, #2d5f86); border-inline-start-width: 0.25rem; }
2149
+ .ef-status-lozenge[data-state="blocked"] { color: var(--ef-color-status-danger, #a13a2c); border-inline-start-width: 0.25rem; }
2070
2150
  .ef-status-lozenge[data-state="ok"]::before { content: "✓"; }
2071
2151
  .ef-status-lozenge[data-state="attention"]::before { content: "!"; }
2072
2152
  .ef-status-lozenge[data-state="unknown"]::before { content: "?"; }