vira 28.19.7 → 29.0.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.
Files changed (33) hide show
  1. package/dist/elements/pop-up/vira-menu.element.js +2 -4
  2. package/dist/elements/pop-up/vira-pop-up-menu.element.js +3 -4
  3. package/dist/elements/vira-button.element.d.ts +5 -2
  4. package/dist/elements/vira-button.element.js +54 -18
  5. package/dist/elements/vira-card.element.d.ts +1 -1
  6. package/dist/elements/vira-card.element.js +15 -6
  7. package/dist/elements/vira-checkbox.element.d.ts +9 -5
  8. package/dist/elements/vira-checkbox.element.js +45 -15
  9. package/dist/elements/vira-dropdown.element.js +1 -2
  10. package/dist/elements/vira-error.element.js +1 -1
  11. package/dist/elements/vira-input.element.d.ts +1 -1
  12. package/dist/elements/vira-input.element.js +9 -16
  13. package/dist/elements/vira-link.element.d.ts +1 -1
  14. package/dist/elements/vira-link.element.js +7 -6
  15. package/dist/elements/vira-modal.element.d.ts +1 -1
  16. package/dist/elements/vira-modal.element.js +7 -9
  17. package/dist/elements/vira-progress.element.d.ts +1 -1
  18. package/dist/elements/vira-progress.element.js +3 -4
  19. package/dist/elements/vira-select.element.js +5 -4
  20. package/dist/styles/focus.d.ts +0 -13
  21. package/dist/styles/focus.js +3 -17
  22. package/dist/styles/form-styles.d.ts +114 -11
  23. package/dist/styles/form-styles.js +117 -12
  24. package/dist/styles/index.d.ts +0 -1
  25. package/dist/styles/index.js +0 -1
  26. package/dist/styles/native-styles.js +0 -1
  27. package/dist/styles/vira-color-palette.d.ts +86 -84
  28. package/dist/styles/vira-color-palette.js +86 -84
  29. package/dist/styles/vira-color-theme.d.ts +456 -60
  30. package/dist/styles/vira-color-theme.js +471 -93
  31. package/package.json +3 -3
  32. package/dist/styles/border.d.ts +0 -9
  33. package/dist/styles/border.js +0 -10
@@ -11,9 +11,15 @@ export const viraTheme = defineColorTheme({
11
11
  background: 'white',
12
12
  prefix: 'vira',
13
13
  }, {
14
+ 'vira-red-foreground-small-body': {
15
+ foreground: viraColorPalette['vira-red-90'],
16
+ },
14
17
  'vira-red-foreground-body': {
15
18
  foreground: viraColorPalette['vira-red-80'],
16
19
  },
20
+ 'vira-red-foreground-non-body': {
21
+ foreground: viraColorPalette['vira-red-60'],
22
+ },
17
23
  'vira-red-foreground-header': {
18
24
  foreground: viraColorPalette['vira-red-50'],
19
25
  },
@@ -26,12 +32,24 @@ export const viraTheme = defineColorTheme({
26
32
  'vira-red-foreground-invisible': {
27
33
  foreground: viraColorPalette['vira-red-10'],
28
34
  },
35
+ 'vira-red-background-small-body': {
36
+ foreground: {
37
+ refDefaultBackground: true,
38
+ },
39
+ background: viraColorPalette['vira-red-90'],
40
+ },
29
41
  'vira-red-background-body': {
30
42
  foreground: {
31
43
  refDefaultBackground: true,
32
44
  },
33
45
  background: viraColorPalette['vira-red-80'],
34
46
  },
47
+ 'vira-red-background-non-body': {
48
+ foreground: {
49
+ refDefaultBackground: true,
50
+ },
51
+ background: viraColorPalette['vira-red-60'],
52
+ },
35
53
  'vira-red-background-header': {
36
54
  foreground: {
37
55
  refDefaultBackground: true,
@@ -60,6 +78,10 @@ export const viraTheme = defineColorTheme({
60
78
  foreground: viraColorPalette['vira-red-90'],
61
79
  background: '#ffe9e6',
62
80
  },
81
+ 'vira-red-on-self-non-body': {
82
+ foreground: viraColorPalette['vira-red-80'],
83
+ background: '#ffe9e6',
84
+ },
63
85
  'vira-red-on-self-header': {
64
86
  foreground: viraColorPalette['vira-red-60'],
65
87
  background: '#ffe9e6',
@@ -76,20 +98,32 @@ export const viraTheme = defineColorTheme({
76
98
  foreground: viraColorPalette['vira-red-20'],
77
99
  background: '#ffe9e6',
78
100
  },
101
+ 'vira-orange-foreground-small-body': {
102
+ foreground: viraColorPalette['vira-orange-90'],
103
+ },
79
104
  'vira-orange-foreground-body': {
80
105
  foreground: viraColorPalette['vira-orange-80'],
81
106
  },
107
+ 'vira-orange-foreground-non-body': {
108
+ foreground: viraColorPalette['vira-orange-60'],
109
+ },
82
110
  'vira-orange-foreground-header': {
83
111
  foreground: viraColorPalette['vira-orange-50'],
84
112
  },
85
113
  'vira-orange-foreground-placeholder': {
86
- foreground: viraColorPalette['vira-orange-30'],
114
+ foreground: viraColorPalette['vira-orange-40'],
87
115
  },
88
116
  'vira-orange-foreground-decoration': {
89
117
  foreground: viraColorPalette['vira-orange-20'],
90
118
  },
91
119
  'vira-orange-foreground-invisible': {
92
- foreground: viraColorPalette['vira-orange-5'],
120
+ foreground: viraColorPalette['vira-orange-10'],
121
+ },
122
+ 'vira-orange-background-small-body': {
123
+ foreground: {
124
+ refDefaultBackground: true,
125
+ },
126
+ background: viraColorPalette['vira-orange-90'],
93
127
  },
94
128
  'vira-orange-background-body': {
95
129
  foreground: {
@@ -97,6 +131,12 @@ export const viraTheme = defineColorTheme({
97
131
  },
98
132
  background: viraColorPalette['vira-orange-80'],
99
133
  },
134
+ 'vira-orange-background-non-body': {
135
+ foreground: {
136
+ refDefaultBackground: true,
137
+ },
138
+ background: viraColorPalette['vira-orange-60'],
139
+ },
100
140
  'vira-orange-background-header': {
101
141
  foreground: {
102
142
  refDefaultBackground: true,
@@ -125,6 +165,10 @@ export const viraTheme = defineColorTheme({
125
165
  foreground: viraColorPalette['vira-orange-90'],
126
166
  background: '#ffebd1',
127
167
  },
168
+ 'vira-orange-on-self-non-body': {
169
+ foreground: viraColorPalette['vira-orange-80'],
170
+ background: '#ffebd1',
171
+ },
128
172
  'vira-orange-on-self-header': {
129
173
  foreground: viraColorPalette['vira-orange-60'],
130
174
  background: '#ffebd1',
@@ -141,9 +185,15 @@ export const viraTheme = defineColorTheme({
141
185
  foreground: viraColorPalette['vira-orange-20'],
142
186
  background: '#ffebd1',
143
187
  },
188
+ 'vira-yellow-foreground-small-body': {
189
+ foreground: viraColorPalette['vira-yellow-90'],
190
+ },
144
191
  'vira-yellow-foreground-body': {
145
192
  foreground: viraColorPalette['vira-yellow-80'],
146
193
  },
194
+ 'vira-yellow-foreground-non-body': {
195
+ foreground: viraColorPalette['vira-yellow-60'],
196
+ },
147
197
  'vira-yellow-foreground-header': {
148
198
  foreground: viraColorPalette['vira-yellow-50'],
149
199
  },
@@ -156,11 +206,23 @@ export const viraTheme = defineColorTheme({
156
206
  'vira-yellow-foreground-invisible': {
157
207
  foreground: viraColorPalette['vira-yellow-5'],
158
208
  },
209
+ 'vira-yellow-background-small-body': {
210
+ foreground: {
211
+ refDefaultBackground: true,
212
+ },
213
+ background: viraColorPalette['vira-yellow-90'],
214
+ },
159
215
  'vira-yellow-background-body': {
160
216
  foreground: {
161
217
  refDefaultBackground: true,
162
218
  },
163
- background: viraColorPalette['vira-yellow-80'],
219
+ background: viraColorPalette['vira-yellow-70'],
220
+ },
221
+ 'vira-yellow-background-non-body': {
222
+ foreground: {
223
+ refDefaultBackground: true,
224
+ },
225
+ background: viraColorPalette['vira-yellow-60'],
164
226
  },
165
227
  'vira-yellow-background-header': {
166
228
  foreground: {
@@ -188,32 +250,42 @@ export const viraTheme = defineColorTheme({
188
250
  },
189
251
  'vira-yellow-on-self-body': {
190
252
  foreground: viraColorPalette['vira-yellow-90'],
191
- background: '#f5f0c6',
253
+ background: '#f7eeca',
254
+ },
255
+ 'vira-yellow-on-self-non-body': {
256
+ foreground: viraColorPalette['vira-yellow-80'],
257
+ background: '#f7eeca',
192
258
  },
193
259
  'vira-yellow-on-self-header': {
194
260
  foreground: viraColorPalette['vira-yellow-60'],
195
- background: '#f5f0c6',
261
+ background: '#f7eeca',
196
262
  },
197
263
  'vira-yellow-on-self-placeholder': {
198
- foreground: viraColorPalette['vira-yellow-40'],
199
- background: '#f5f0c6',
264
+ foreground: viraColorPalette['vira-yellow-50'],
265
+ background: '#f7eeca',
200
266
  },
201
267
  'vira-yellow-on-self-decoration': {
202
268
  foreground: viraColorPalette['vira-yellow-30'],
203
- background: '#f5f0c6',
269
+ background: '#f7eeca',
204
270
  },
205
271
  'vira-yellow-on-self-invisible': {
206
- foreground: viraColorPalette['vira-yellow-10'],
207
- background: '#f5f0c6',
272
+ foreground: viraColorPalette['vira-yellow-20'],
273
+ background: '#f7eeca',
274
+ },
275
+ 'vira-green-foreground-small-body': {
276
+ foreground: viraColorPalette['vira-green-90'],
208
277
  },
209
278
  'vira-green-foreground-body': {
210
279
  foreground: viraColorPalette['vira-green-80'],
211
280
  },
281
+ 'vira-green-foreground-non-body': {
282
+ foreground: viraColorPalette['vira-green-60'],
283
+ },
212
284
  'vira-green-foreground-header': {
213
285
  foreground: viraColorPalette['vira-green-50'],
214
286
  },
215
287
  'vira-green-foreground-placeholder': {
216
- foreground: viraColorPalette['vira-green-40'],
288
+ foreground: viraColorPalette['vira-green-30'],
217
289
  },
218
290
  'vira-green-foreground-decoration': {
219
291
  foreground: viraColorPalette['vira-green-20'],
@@ -221,11 +293,23 @@ export const viraTheme = defineColorTheme({
221
293
  'vira-green-foreground-invisible': {
222
294
  foreground: viraColorPalette['vira-green-5'],
223
295
  },
296
+ 'vira-green-background-small-body': {
297
+ foreground: {
298
+ refDefaultBackground: true,
299
+ },
300
+ background: viraColorPalette['vira-green-90'],
301
+ },
224
302
  'vira-green-background-body': {
225
303
  foreground: {
226
304
  refDefaultBackground: true,
227
305
  },
228
- background: viraColorPalette['vira-green-80'],
306
+ background: viraColorPalette['vira-green-70'],
307
+ },
308
+ 'vira-green-background-non-body': {
309
+ foreground: {
310
+ refDefaultBackground: true,
311
+ },
312
+ background: viraColorPalette['vira-green-60'],
229
313
  },
230
314
  'vira-green-background-header': {
231
315
  foreground: {
@@ -253,32 +337,42 @@ export const viraTheme = defineColorTheme({
253
337
  },
254
338
  'vira-green-on-self-body': {
255
339
  foreground: viraColorPalette['vira-green-90'],
256
- background: '#def6cc',
340
+ background: '#d3f8cf',
341
+ },
342
+ 'vira-green-on-self-non-body': {
343
+ foreground: viraColorPalette['vira-green-70'],
344
+ background: '#d3f8cf',
257
345
  },
258
346
  'vira-green-on-self-header': {
259
347
  foreground: viraColorPalette['vira-green-60'],
260
- background: '#def6cc',
348
+ background: '#d3f8cf',
261
349
  },
262
350
  'vira-green-on-self-placeholder': {
263
351
  foreground: viraColorPalette['vira-green-40'],
264
- background: '#def6cc',
352
+ background: '#d3f8cf',
265
353
  },
266
354
  'vira-green-on-self-decoration': {
267
355
  foreground: viraColorPalette['vira-green-30'],
268
- background: '#def6cc',
356
+ background: '#d3f8cf',
269
357
  },
270
358
  'vira-green-on-self-invisible': {
271
- foreground: viraColorPalette['vira-green-10'],
272
- background: '#def6cc',
359
+ foreground: viraColorPalette['vira-green-20'],
360
+ background: '#d3f8cf',
361
+ },
362
+ 'vira-teal-foreground-small-body': {
363
+ foreground: viraColorPalette['vira-teal-90'],
273
364
  },
274
365
  'vira-teal-foreground-body': {
275
366
  foreground: viraColorPalette['vira-teal-80'],
276
367
  },
368
+ 'vira-teal-foreground-non-body': {
369
+ foreground: viraColorPalette['vira-teal-60'],
370
+ },
277
371
  'vira-teal-foreground-header': {
278
372
  foreground: viraColorPalette['vira-teal-50'],
279
373
  },
280
374
  'vira-teal-foreground-placeholder': {
281
- foreground: viraColorPalette['vira-teal-40'],
375
+ foreground: viraColorPalette['vira-teal-30'],
282
376
  },
283
377
  'vira-teal-foreground-decoration': {
284
378
  foreground: viraColorPalette['vira-teal-20'],
@@ -286,12 +380,24 @@ export const viraTheme = defineColorTheme({
286
380
  'vira-teal-foreground-invisible': {
287
381
  foreground: viraColorPalette['vira-teal-5'],
288
382
  },
383
+ 'vira-teal-background-small-body': {
384
+ foreground: {
385
+ refDefaultBackground: true,
386
+ },
387
+ background: viraColorPalette['vira-teal-90'],
388
+ },
289
389
  'vira-teal-background-body': {
290
390
  foreground: {
291
391
  refDefaultBackground: true,
292
392
  },
293
393
  background: viraColorPalette['vira-teal-80'],
294
394
  },
395
+ 'vira-teal-background-non-body': {
396
+ foreground: {
397
+ refDefaultBackground: true,
398
+ },
399
+ background: viraColorPalette['vira-teal-60'],
400
+ },
295
401
  'vira-teal-background-header': {
296
402
  foreground: {
297
403
  refDefaultBackground: true,
@@ -318,44 +424,66 @@ export const viraTheme = defineColorTheme({
318
424
  },
319
425
  'vira-teal-on-self-body': {
320
426
  foreground: viraColorPalette['vira-teal-90'],
321
- background: '#d3f5ed',
427
+ background: '#d4f5f3',
428
+ },
429
+ 'vira-teal-on-self-non-body': {
430
+ foreground: viraColorPalette['vira-teal-70'],
431
+ background: '#d4f5f3',
322
432
  },
323
433
  'vira-teal-on-self-header': {
324
434
  foreground: viraColorPalette['vira-teal-60'],
325
- background: '#d3f5ed',
435
+ background: '#d4f5f3',
326
436
  },
327
437
  'vira-teal-on-self-placeholder': {
328
- foreground: viraColorPalette['vira-teal-50'],
329
- background: '#d3f5ed',
438
+ foreground: viraColorPalette['vira-teal-40'],
439
+ background: '#d4f5f3',
330
440
  },
331
441
  'vira-teal-on-self-decoration': {
332
442
  foreground: viraColorPalette['vira-teal-30'],
333
- background: '#d3f5ed',
443
+ background: '#d4f5f3',
334
444
  },
335
445
  'vira-teal-on-self-invisible': {
336
- foreground: viraColorPalette['vira-teal-20'],
337
- background: '#d3f5ed',
446
+ foreground: viraColorPalette['vira-teal-10'],
447
+ background: '#d4f5f3',
448
+ },
449
+ 'vira-blue-foreground-small-body': {
450
+ foreground: viraColorPalette['vira-blue-90'],
338
451
  },
339
452
  'vira-blue-foreground-body': {
340
453
  foreground: viraColorPalette['vira-blue-80'],
341
454
  },
455
+ 'vira-blue-foreground-non-body': {
456
+ foreground: viraColorPalette['vira-blue-70'],
457
+ },
342
458
  'vira-blue-foreground-header': {
343
459
  foreground: viraColorPalette['vira-blue-50'],
344
460
  },
345
461
  'vira-blue-foreground-placeholder': {
346
- foreground: viraColorPalette['vira-blue-40'],
462
+ foreground: viraColorPalette['vira-blue-30'],
347
463
  },
348
464
  'vira-blue-foreground-decoration': {
349
465
  foreground: viraColorPalette['vira-blue-20'],
350
466
  },
351
467
  'vira-blue-foreground-invisible': {
352
- foreground: viraColorPalette['vira-blue-5'],
468
+ foreground: viraColorPalette['vira-blue-10'],
469
+ },
470
+ 'vira-blue-background-small-body': {
471
+ foreground: {
472
+ refDefaultBackground: true,
473
+ },
474
+ background: viraColorPalette['vira-blue-90'],
353
475
  },
354
476
  'vira-blue-background-body': {
355
477
  foreground: {
356
478
  refDefaultBackground: true,
357
479
  },
358
- background: viraColorPalette['vira-blue-70'],
480
+ background: viraColorPalette['vira-blue-80'],
481
+ },
482
+ 'vira-blue-background-non-body': {
483
+ foreground: {
484
+ refDefaultBackground: true,
485
+ },
486
+ background: viraColorPalette['vira-blue-60'],
359
487
  },
360
488
  'vira-blue-background-header': {
361
489
  foreground: {
@@ -383,32 +511,42 @@ export const viraTheme = defineColorTheme({
383
511
  },
384
512
  'vira-blue-on-self-body': {
385
513
  foreground: viraColorPalette['vira-blue-90'],
386
- background: '#def1ff',
514
+ background: '#daf2ff',
515
+ },
516
+ 'vira-blue-on-self-non-body': {
517
+ foreground: viraColorPalette['vira-blue-80'],
518
+ background: '#daf2ff',
387
519
  },
388
520
  'vira-blue-on-self-header': {
389
521
  foreground: viraColorPalette['vira-blue-60'],
390
- background: '#def1ff',
522
+ background: '#daf2ff',
391
523
  },
392
524
  'vira-blue-on-self-placeholder': {
393
525
  foreground: viraColorPalette['vira-blue-50'],
394
- background: '#def1ff',
526
+ background: '#daf2ff',
395
527
  },
396
528
  'vira-blue-on-self-decoration': {
397
529
  foreground: viraColorPalette['vira-blue-30'],
398
- background: '#def1ff',
530
+ background: '#daf2ff',
399
531
  },
400
532
  'vira-blue-on-self-invisible': {
401
533
  foreground: viraColorPalette['vira-blue-10'],
402
- background: '#def1ff',
534
+ background: '#daf2ff',
535
+ },
536
+ 'vira-purple-foreground-small-body': {
537
+ foreground: viraColorPalette['vira-purple-90'],
403
538
  },
404
539
  'vira-purple-foreground-body': {
405
540
  foreground: viraColorPalette['vira-purple-80'],
406
541
  },
542
+ 'vira-purple-foreground-non-body': {
543
+ foreground: viraColorPalette['vira-purple-60'],
544
+ },
407
545
  'vira-purple-foreground-header': {
408
546
  foreground: viraColorPalette['vira-purple-50'],
409
547
  },
410
548
  'vira-purple-foreground-placeholder': {
411
- foreground: viraColorPalette['vira-purple-40'],
549
+ foreground: viraColorPalette['vira-purple-30'],
412
550
  },
413
551
  'vira-purple-foreground-decoration': {
414
552
  foreground: viraColorPalette['vira-purple-20'],
@@ -416,12 +554,24 @@ export const viraTheme = defineColorTheme({
416
554
  'vira-purple-foreground-invisible': {
417
555
  foreground: viraColorPalette['vira-purple-5'],
418
556
  },
557
+ 'vira-purple-background-small-body': {
558
+ foreground: {
559
+ refDefaultBackground: true,
560
+ },
561
+ background: viraColorPalette['vira-purple-90'],
562
+ },
419
563
  'vira-purple-background-body': {
420
564
  foreground: {
421
565
  refDefaultBackground: true,
422
566
  },
423
567
  background: viraColorPalette['vira-purple-80'],
424
568
  },
569
+ 'vira-purple-background-non-body': {
570
+ foreground: {
571
+ refDefaultBackground: true,
572
+ },
573
+ background: viraColorPalette['vira-purple-60'],
574
+ },
425
575
  'vira-purple-background-header': {
426
576
  foreground: {
427
577
  refDefaultBackground: true,
@@ -448,27 +598,37 @@ export const viraTheme = defineColorTheme({
448
598
  },
449
599
  'vira-purple-on-self-body': {
450
600
  foreground: viraColorPalette['vira-purple-90'],
451
- background: '#f3ebff',
601
+ background: '#f6eaff',
602
+ },
603
+ 'vira-purple-on-self-non-body': {
604
+ foreground: viraColorPalette['vira-purple-70'],
605
+ background: '#f6eaff',
452
606
  },
453
607
  'vira-purple-on-self-header': {
454
608
  foreground: viraColorPalette['vira-purple-60'],
455
- background: '#f3ebff',
609
+ background: '#f6eaff',
456
610
  },
457
611
  'vira-purple-on-self-placeholder': {
458
612
  foreground: viraColorPalette['vira-purple-40'],
459
- background: '#f3ebff',
613
+ background: '#f6eaff',
460
614
  },
461
615
  'vira-purple-on-self-decoration': {
462
616
  foreground: viraColorPalette['vira-purple-30'],
463
- background: '#f3ebff',
617
+ background: '#f6eaff',
464
618
  },
465
619
  'vira-purple-on-self-invisible': {
466
620
  foreground: viraColorPalette['vira-purple-10'],
467
- background: '#f3ebff',
621
+ background: '#f6eaff',
622
+ },
623
+ 'vira-pink-foreground-small-body': {
624
+ foreground: viraColorPalette['vira-pink-90'],
468
625
  },
469
626
  'vira-pink-foreground-body': {
470
627
  foreground: viraColorPalette['vira-pink-80'],
471
628
  },
629
+ 'vira-pink-foreground-non-body': {
630
+ foreground: viraColorPalette['vira-pink-60'],
631
+ },
472
632
  'vira-pink-foreground-header': {
473
633
  foreground: viraColorPalette['vira-pink-50'],
474
634
  },
@@ -479,7 +639,13 @@ export const viraTheme = defineColorTheme({
479
639
  foreground: viraColorPalette['vira-pink-20'],
480
640
  },
481
641
  'vira-pink-foreground-invisible': {
482
- foreground: viraColorPalette['vira-pink-5'],
642
+ foreground: viraColorPalette['vira-pink-10'],
643
+ },
644
+ 'vira-pink-background-small-body': {
645
+ foreground: {
646
+ refDefaultBackground: true,
647
+ },
648
+ background: viraColorPalette['vira-pink-90'],
483
649
  },
484
650
  'vira-pink-background-body': {
485
651
  foreground: {
@@ -487,6 +653,12 @@ export const viraTheme = defineColorTheme({
487
653
  },
488
654
  background: viraColorPalette['vira-pink-80'],
489
655
  },
656
+ 'vira-pink-background-non-body': {
657
+ foreground: {
658
+ refDefaultBackground: true,
659
+ },
660
+ background: viraColorPalette['vira-pink-60'],
661
+ },
490
662
  'vira-pink-background-header': {
491
663
  foreground: {
492
664
  refDefaultBackground: true,
@@ -515,6 +687,10 @@ export const viraTheme = defineColorTheme({
515
687
  foreground: viraColorPalette['vira-pink-90'],
516
688
  background: '#ffe7fb',
517
689
  },
690
+ 'vira-pink-on-self-non-body': {
691
+ foreground: viraColorPalette['vira-pink-80'],
692
+ background: '#ffe7fb',
693
+ },
518
694
  'vira-pink-on-self-header': {
519
695
  foreground: viraColorPalette['vira-pink-60'],
520
696
  background: '#ffe7fb',
@@ -531,9 +707,15 @@ export const viraTheme = defineColorTheme({
531
707
  foreground: viraColorPalette['vira-pink-20'],
532
708
  background: '#ffe7fb',
533
709
  },
710
+ 'vira-grey-foreground-small-body': {
711
+ foreground: viraColorPalette['vira-grey-90'],
712
+ },
534
713
  'vira-grey-foreground-body': {
535
714
  foreground: viraColorPalette['vira-grey-80'],
536
715
  },
716
+ 'vira-grey-foreground-non-body': {
717
+ foreground: viraColorPalette['vira-grey-60'],
718
+ },
537
719
  'vira-grey-foreground-header': {
538
720
  foreground: viraColorPalette['vira-grey-50'],
539
721
  },
@@ -546,12 +728,24 @@ export const viraTheme = defineColorTheme({
546
728
  'vira-grey-foreground-invisible': {
547
729
  foreground: viraColorPalette['vira-grey-5'],
548
730
  },
731
+ 'vira-grey-background-small-body': {
732
+ foreground: {
733
+ refDefaultBackground: true,
734
+ },
735
+ background: viraColorPalette['vira-grey-90'],
736
+ },
549
737
  'vira-grey-background-body': {
550
738
  foreground: {
551
739
  refDefaultBackground: true,
552
740
  },
553
741
  background: viraColorPalette['vira-grey-80'],
554
742
  },
743
+ 'vira-grey-background-non-body': {
744
+ foreground: {
745
+ refDefaultBackground: true,
746
+ },
747
+ background: viraColorPalette['vira-grey-60'],
748
+ },
555
749
  'vira-grey-background-header': {
556
750
  foreground: {
557
751
  refDefaultBackground: true,
@@ -578,23 +772,27 @@ export const viraTheme = defineColorTheme({
578
772
  },
579
773
  'vira-grey-on-self-body': {
580
774
  foreground: viraColorPalette['vira-grey-90'],
581
- background: '#eeeef1',
775
+ background: '#eceff0',
776
+ },
777
+ 'vira-grey-on-self-non-body': {
778
+ foreground: viraColorPalette['vira-grey-70'],
779
+ background: '#eceff0',
582
780
  },
583
781
  'vira-grey-on-self-header': {
584
782
  foreground: viraColorPalette['vira-grey-60'],
585
- background: '#eeeef1',
783
+ background: '#eceff0',
586
784
  },
587
785
  'vira-grey-on-self-placeholder': {
588
786
  foreground: viraColorPalette['vira-grey-40'],
589
- background: '#eeeef1',
787
+ background: '#eceff0',
590
788
  },
591
789
  'vira-grey-on-self-decoration': {
592
790
  foreground: viraColorPalette['vira-grey-30'],
593
- background: '#eeeef1',
791
+ background: '#eceff0',
594
792
  },
595
793
  'vira-grey-on-self-invisible': {
596
- foreground: viraColorPalette['vira-grey-20'],
597
- background: '#eeeef1',
794
+ foreground: viraColorPalette['vira-grey-10'],
795
+ background: '#eceff0',
598
796
  },
599
797
  });
600
798
  /**
@@ -608,10 +806,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
608
806
  background: 'black',
609
807
  },
610
808
  colorOverrides: {
809
+ 'vira-red-foreground-small-body': {
810
+ foreground: viraColorPalette['vira-red-5'],
811
+ background: 'black',
812
+ },
611
813
  'vira-red-foreground-body': {
612
814
  foreground: viraColorPalette['vira-red-20'],
613
815
  background: 'black',
614
816
  },
817
+ 'vira-red-foreground-non-body': {
818
+ foreground: viraColorPalette['vira-red-30'],
819
+ background: 'black',
820
+ },
615
821
  'vira-red-foreground-header': {
616
822
  background: 'black',
617
823
  },
@@ -627,10 +833,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
627
833
  foreground: viraColorPalette['vira-red-90'],
628
834
  background: 'black',
629
835
  },
836
+ 'vira-red-background-small-body': {
837
+ foreground: 'black',
838
+ background: viraColorPalette['vira-red-5'],
839
+ },
630
840
  'vira-red-background-body': {
631
841
  foreground: 'black',
632
842
  background: viraColorPalette['vira-red-20'],
633
843
  },
844
+ 'vira-red-background-non-body': {
845
+ foreground: 'black',
846
+ background: viraColorPalette['vira-red-30'],
847
+ },
634
848
  'vira-red-background-header': {
635
849
  foreground: 'black',
636
850
  background: viraColorPalette['vira-red-50'],
@@ -649,27 +863,39 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
649
863
  },
650
864
  'vira-red-on-self-body': {
651
865
  foreground: viraColorPalette['vira-red-10'],
652
- background: '#760004',
866
+ background: '#760003',
867
+ },
868
+ 'vira-red-on-self-non-body': {
869
+ foreground: viraColorPalette['vira-red-20'],
870
+ background: '#760003',
653
871
  },
654
872
  'vira-red-on-self-header': {
655
873
  foreground: viraColorPalette['vira-red-40'],
656
- background: '#760004',
874
+ background: '#760003',
657
875
  },
658
876
  'vira-red-on-self-placeholder': {
659
- background: '#760004',
877
+ background: '#760003',
660
878
  },
661
879
  'vira-red-on-self-decoration': {
662
880
  foreground: viraColorPalette['vira-red-70'],
663
- background: '#760004',
881
+ background: '#760003',
664
882
  },
665
883
  'vira-red-on-self-invisible': {
666
884
  foreground: viraColorPalette['vira-red-80'],
667
- background: '#760004',
885
+ background: '#760003',
886
+ },
887
+ 'vira-orange-foreground-small-body': {
888
+ foreground: viraColorPalette['vira-orange-5'],
889
+ background: 'black',
668
890
  },
669
891
  'vira-orange-foreground-body': {
670
892
  foreground: viraColorPalette['vira-orange-20'],
671
893
  background: 'black',
672
894
  },
895
+ 'vira-orange-foreground-non-body': {
896
+ foreground: viraColorPalette['vira-orange-30'],
897
+ background: 'black',
898
+ },
673
899
  'vira-orange-foreground-header': {
674
900
  background: 'black',
675
901
  },
@@ -685,10 +911,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
685
911
  foreground: viraColorPalette['vira-orange-90'],
686
912
  background: 'black',
687
913
  },
914
+ 'vira-orange-background-small-body': {
915
+ foreground: 'black',
916
+ background: viraColorPalette['vira-orange-5'],
917
+ },
688
918
  'vira-orange-background-body': {
689
919
  foreground: 'black',
690
920
  background: viraColorPalette['vira-orange-20'],
691
921
  },
922
+ 'vira-orange-background-non-body': {
923
+ foreground: 'black',
924
+ background: viraColorPalette['vira-orange-30'],
925
+ },
692
926
  'vira-orange-background-header': {
693
927
  foreground: 'black',
694
928
  background: viraColorPalette['vira-orange-50'],
@@ -707,27 +941,39 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
707
941
  },
708
942
  'vira-orange-on-self-body': {
709
943
  foreground: viraColorPalette['vira-orange-10'],
710
- background: '#682800',
944
+ background: '#6a2500',
945
+ },
946
+ 'vira-orange-on-self-non-body': {
947
+ foreground: viraColorPalette['vira-orange-20'],
948
+ background: '#6a2500',
711
949
  },
712
950
  'vira-orange-on-self-header': {
713
951
  foreground: viraColorPalette['vira-orange-40'],
714
- background: '#682800',
952
+ background: '#6a2500',
715
953
  },
716
954
  'vira-orange-on-self-placeholder': {
717
- background: '#682800',
955
+ background: '#6a2500',
718
956
  },
719
957
  'vira-orange-on-self-decoration': {
720
958
  foreground: viraColorPalette['vira-orange-70'],
721
- background: '#682800',
959
+ background: '#6a2500',
722
960
  },
723
961
  'vira-orange-on-self-invisible': {
724
962
  foreground: viraColorPalette['vira-orange-80'],
725
- background: '#682800',
963
+ background: '#6a2500',
964
+ },
965
+ 'vira-yellow-foreground-small-body': {
966
+ foreground: viraColorPalette['vira-yellow-5'],
967
+ background: 'black',
726
968
  },
727
969
  'vira-yellow-foreground-body': {
728
970
  foreground: viraColorPalette['vira-yellow-20'],
729
971
  background: 'black',
730
972
  },
973
+ 'vira-yellow-foreground-non-body': {
974
+ foreground: viraColorPalette['vira-yellow-30'],
975
+ background: 'black',
976
+ },
731
977
  'vira-yellow-foreground-header': {
732
978
  background: 'black',
733
979
  },
@@ -743,10 +989,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
743
989
  foreground: viraColorPalette['vira-yellow-90'],
744
990
  background: 'black',
745
991
  },
992
+ 'vira-yellow-background-small-body': {
993
+ foreground: 'black',
994
+ background: viraColorPalette['vira-yellow-5'],
995
+ },
746
996
  'vira-yellow-background-body': {
747
997
  foreground: 'black',
748
998
  background: viraColorPalette['vira-yellow-20'],
749
999
  },
1000
+ 'vira-yellow-background-non-body': {
1001
+ foreground: 'black',
1002
+ background: viraColorPalette['vira-yellow-30'],
1003
+ },
750
1004
  'vira-yellow-background-header': {
751
1005
  foreground: 'black',
752
1006
  background: viraColorPalette['vira-yellow-50'],
@@ -765,28 +1019,39 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
765
1019
  },
766
1020
  'vira-yellow-on-self-body': {
767
1021
  foreground: viraColorPalette['vira-yellow-10'],
768
- background: '#473d00',
1022
+ background: '#4c3b00',
1023
+ },
1024
+ 'vira-yellow-on-self-non-body': {
1025
+ foreground: viraColorPalette['vira-yellow-20'],
1026
+ background: '#4c3b00',
769
1027
  },
770
1028
  'vira-yellow-on-self-header': {
771
1029
  foreground: viraColorPalette['vira-yellow-40'],
772
- background: '#473d00',
1030
+ background: '#4c3b00',
773
1031
  },
774
1032
  'vira-yellow-on-self-placeholder': {
775
- foreground: viraColorPalette['vira-yellow-50'],
776
- background: '#473d00',
1033
+ background: '#4c3b00',
777
1034
  },
778
1035
  'vira-yellow-on-self-decoration': {
779
1036
  foreground: viraColorPalette['vira-yellow-70'],
780
- background: '#473d00',
1037
+ background: '#4c3b00',
781
1038
  },
782
1039
  'vira-yellow-on-self-invisible': {
783
1040
  foreground: viraColorPalette['vira-yellow-80'],
784
- background: '#473d00',
1041
+ background: '#4c3b00',
1042
+ },
1043
+ 'vira-green-foreground-small-body': {
1044
+ foreground: viraColorPalette['vira-green-5'],
1045
+ background: 'black',
785
1046
  },
786
1047
  'vira-green-foreground-body': {
787
1048
  foreground: viraColorPalette['vira-green-20'],
788
1049
  background: 'black',
789
1050
  },
1051
+ 'vira-green-foreground-non-body': {
1052
+ foreground: viraColorPalette['vira-green-30'],
1053
+ background: 'black',
1054
+ },
790
1055
  'vira-green-foreground-header': {
791
1056
  background: 'black',
792
1057
  },
@@ -802,10 +1067,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
802
1067
  foreground: viraColorPalette['vira-green-90'],
803
1068
  background: 'black',
804
1069
  },
1070
+ 'vira-green-background-small-body': {
1071
+ foreground: 'black',
1072
+ background: viraColorPalette['vira-green-5'],
1073
+ },
805
1074
  'vira-green-background-body': {
806
1075
  foreground: 'black',
807
1076
  background: viraColorPalette['vira-green-20'],
808
1077
  },
1078
+ 'vira-green-background-non-body': {
1079
+ foreground: 'black',
1080
+ background: viraColorPalette['vira-green-30'],
1081
+ },
809
1082
  'vira-green-background-header': {
810
1083
  foreground: 'black',
811
1084
  background: viraColorPalette['vira-green-50'],
@@ -824,28 +1097,40 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
824
1097
  },
825
1098
  'vira-green-on-self-body': {
826
1099
  foreground: viraColorPalette['vira-green-10'],
827
- background: '#1f4600',
1100
+ background: '#004700',
1101
+ },
1102
+ 'vira-green-on-self-non-body': {
1103
+ foreground: viraColorPalette['vira-green-20'],
1104
+ background: '#004700',
828
1105
  },
829
1106
  'vira-green-on-self-header': {
830
1107
  foreground: viraColorPalette['vira-green-40'],
831
- background: '#1f4600',
1108
+ background: '#004700',
832
1109
  },
833
1110
  'vira-green-on-self-placeholder': {
834
1111
  foreground: viraColorPalette['vira-green-50'],
835
- background: '#1f4600',
1112
+ background: '#004700',
836
1113
  },
837
1114
  'vira-green-on-self-decoration': {
838
1115
  foreground: viraColorPalette['vira-green-70'],
839
- background: '#1f4600',
1116
+ background: '#004700',
840
1117
  },
841
1118
  'vira-green-on-self-invisible': {
842
1119
  foreground: viraColorPalette['vira-green-80'],
843
- background: '#1f4600',
1120
+ background: '#004700',
1121
+ },
1122
+ 'vira-teal-foreground-small-body': {
1123
+ foreground: viraColorPalette['vira-teal-5'],
1124
+ background: 'black',
844
1125
  },
845
1126
  'vira-teal-foreground-body': {
846
1127
  foreground: viraColorPalette['vira-teal-20'],
847
1128
  background: 'black',
848
1129
  },
1130
+ 'vira-teal-foreground-non-body': {
1131
+ foreground: viraColorPalette['vira-teal-30'],
1132
+ background: 'black',
1133
+ },
849
1134
  'vira-teal-foreground-header': {
850
1135
  background: 'black',
851
1136
  },
@@ -861,10 +1146,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
861
1146
  foreground: viraColorPalette['vira-teal-90'],
862
1147
  background: 'black',
863
1148
  },
1149
+ 'vira-teal-background-small-body': {
1150
+ foreground: 'black',
1151
+ background: viraColorPalette['vira-teal-5'],
1152
+ },
864
1153
  'vira-teal-background-body': {
865
1154
  foreground: 'black',
866
1155
  background: viraColorPalette['vira-teal-20'],
867
1156
  },
1157
+ 'vira-teal-background-non-body': {
1158
+ foreground: 'black',
1159
+ background: viraColorPalette['vira-teal-30'],
1160
+ },
868
1161
  'vira-teal-background-header': {
869
1162
  foreground: 'black',
870
1163
  background: viraColorPalette['vira-teal-50'],
@@ -883,27 +1176,40 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
883
1176
  },
884
1177
  'vira-teal-on-self-body': {
885
1178
  foreground: viraColorPalette['vira-teal-10'],
886
- background: '#004539',
1179
+ background: '#004442',
1180
+ },
1181
+ 'vira-teal-on-self-non-body': {
1182
+ foreground: viraColorPalette['vira-teal-20'],
1183
+ background: '#004442',
887
1184
  },
888
1185
  'vira-teal-on-self-header': {
889
1186
  foreground: viraColorPalette['vira-teal-40'],
890
- background: '#004539',
1187
+ background: '#004442',
891
1188
  },
892
1189
  'vira-teal-on-self-placeholder': {
893
- background: '#004539',
1190
+ foreground: viraColorPalette['vira-teal-50'],
1191
+ background: '#004442',
894
1192
  },
895
1193
  'vira-teal-on-self-decoration': {
896
1194
  foreground: viraColorPalette['vira-teal-70'],
897
- background: '#004539',
1195
+ background: '#004442',
898
1196
  },
899
1197
  'vira-teal-on-self-invisible': {
900
1198
  foreground: viraColorPalette['vira-teal-80'],
901
- background: '#004539',
1199
+ background: '#004442',
1200
+ },
1201
+ 'vira-blue-foreground-small-body': {
1202
+ foreground: viraColorPalette['vira-blue-5'],
1203
+ background: 'black',
902
1204
  },
903
1205
  'vira-blue-foreground-body': {
904
1206
  foreground: viraColorPalette['vira-blue-20'],
905
1207
  background: 'black',
906
1208
  },
1209
+ 'vira-blue-foreground-non-body': {
1210
+ foreground: viraColorPalette['vira-blue-30'],
1211
+ background: 'black',
1212
+ },
907
1213
  'vira-blue-foreground-header': {
908
1214
  background: 'black',
909
1215
  },
@@ -919,10 +1225,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
919
1225
  foreground: viraColorPalette['vira-blue-90'],
920
1226
  background: 'black',
921
1227
  },
1228
+ 'vira-blue-background-small-body': {
1229
+ foreground: 'black',
1230
+ background: viraColorPalette['vira-blue-5'],
1231
+ },
922
1232
  'vira-blue-background-body': {
923
1233
  foreground: 'black',
924
1234
  background: viraColorPalette['vira-blue-20'],
925
1235
  },
1236
+ 'vira-blue-background-non-body': {
1237
+ foreground: 'black',
1238
+ background: viraColorPalette['vira-blue-30'],
1239
+ },
926
1240
  'vira-blue-background-header': {
927
1241
  foreground: 'black',
928
1242
  background: viraColorPalette['vira-blue-50'],
@@ -941,27 +1255,39 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
941
1255
  },
942
1256
  'vira-blue-on-self-body': {
943
1257
  foreground: viraColorPalette['vira-blue-10'],
944
- background: '#003a7b',
1258
+ background: '#00358a',
1259
+ },
1260
+ 'vira-blue-on-self-non-body': {
1261
+ foreground: viraColorPalette['vira-blue-20'],
1262
+ background: '#00358a',
945
1263
  },
946
1264
  'vira-blue-on-self-header': {
947
1265
  foreground: viraColorPalette['vira-blue-40'],
948
- background: '#003a7b',
1266
+ background: '#00358a',
949
1267
  },
950
1268
  'vira-blue-on-self-placeholder': {
951
- background: '#003a7b',
1269
+ background: '#00358a',
952
1270
  },
953
1271
  'vira-blue-on-self-decoration': {
954
1272
  foreground: viraColorPalette['vira-blue-70'],
955
- background: '#003a7b',
1273
+ background: '#00358a',
956
1274
  },
957
1275
  'vira-blue-on-self-invisible': {
958
1276
  foreground: viraColorPalette['vira-blue-80'],
959
- background: '#003a7b',
1277
+ background: '#00358a',
1278
+ },
1279
+ 'vira-purple-foreground-small-body': {
1280
+ foreground: viraColorPalette['vira-purple-5'],
1281
+ background: 'black',
960
1282
  },
961
1283
  'vira-purple-foreground-body': {
962
1284
  foreground: viraColorPalette['vira-purple-20'],
963
1285
  background: 'black',
964
1286
  },
1287
+ 'vira-purple-foreground-non-body': {
1288
+ foreground: viraColorPalette['vira-purple-30'],
1289
+ background: 'black',
1290
+ },
965
1291
  'vira-purple-foreground-header': {
966
1292
  background: 'black',
967
1293
  },
@@ -977,10 +1303,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
977
1303
  foreground: viraColorPalette['vira-purple-90'],
978
1304
  background: 'black',
979
1305
  },
1306
+ 'vira-purple-background-small-body': {
1307
+ foreground: 'black',
1308
+ background: viraColorPalette['vira-purple-5'],
1309
+ },
980
1310
  'vira-purple-background-body': {
981
1311
  foreground: 'black',
982
1312
  background: viraColorPalette['vira-purple-20'],
983
1313
  },
1314
+ 'vira-purple-background-non-body': {
1315
+ foreground: 'black',
1316
+ background: viraColorPalette['vira-purple-30'],
1317
+ },
984
1318
  'vira-purple-background-header': {
985
1319
  foreground: 'black',
986
1320
  background: viraColorPalette['vira-purple-50'],
@@ -999,28 +1333,40 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
999
1333
  },
1000
1334
  'vira-purple-on-self-body': {
1001
1335
  foreground: viraColorPalette['vira-purple-10'],
1002
- background: '#4c0099',
1336
+ background: '#500095',
1337
+ },
1338
+ 'vira-purple-on-self-non-body': {
1339
+ foreground: viraColorPalette['vira-purple-20'],
1340
+ background: '#500095',
1003
1341
  },
1004
1342
  'vira-purple-on-self-header': {
1005
1343
  foreground: viraColorPalette['vira-purple-40'],
1006
- background: '#4c0099',
1344
+ background: '#500095',
1007
1345
  },
1008
1346
  'vira-purple-on-self-placeholder': {
1009
1347
  foreground: viraColorPalette['vira-purple-50'],
1010
- background: '#4c0099',
1348
+ background: '#500095',
1011
1349
  },
1012
1350
  'vira-purple-on-self-decoration': {
1013
1351
  foreground: viraColorPalette['vira-purple-70'],
1014
- background: '#4c0099',
1352
+ background: '#500095',
1015
1353
  },
1016
1354
  'vira-purple-on-self-invisible': {
1017
1355
  foreground: viraColorPalette['vira-purple-80'],
1018
- background: '#4c0099',
1356
+ background: '#500095',
1357
+ },
1358
+ 'vira-pink-foreground-small-body': {
1359
+ foreground: viraColorPalette['vira-pink-5'],
1360
+ background: 'black',
1019
1361
  },
1020
1362
  'vira-pink-foreground-body': {
1021
1363
  foreground: viraColorPalette['vira-pink-20'],
1022
1364
  background: 'black',
1023
1365
  },
1366
+ 'vira-pink-foreground-non-body': {
1367
+ foreground: viraColorPalette['vira-pink-30'],
1368
+ background: 'black',
1369
+ },
1024
1370
  'vira-pink-foreground-header': {
1025
1371
  background: 'black',
1026
1372
  },
@@ -1036,10 +1382,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
1036
1382
  foreground: viraColorPalette['vira-pink-90'],
1037
1383
  background: 'black',
1038
1384
  },
1385
+ 'vira-pink-background-small-body': {
1386
+ foreground: 'black',
1387
+ background: viraColorPalette['vira-pink-5'],
1388
+ },
1039
1389
  'vira-pink-background-body': {
1040
1390
  foreground: 'black',
1041
1391
  background: viraColorPalette['vira-pink-20'],
1042
1392
  },
1393
+ 'vira-pink-background-non-body': {
1394
+ foreground: 'black',
1395
+ background: viraColorPalette['vira-pink-30'],
1396
+ },
1043
1397
  'vira-pink-background-header': {
1044
1398
  foreground: 'black',
1045
1399
  background: viraColorPalette['vira-pink-50'],
@@ -1058,27 +1412,39 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
1058
1412
  },
1059
1413
  'vira-pink-on-self-body': {
1060
1414
  foreground: viraColorPalette['vira-pink-10'],
1061
- background: '#6f0050',
1415
+ background: '#6e004f',
1416
+ },
1417
+ 'vira-pink-on-self-non-body': {
1418
+ foreground: viraColorPalette['vira-pink-20'],
1419
+ background: '#6e004f',
1062
1420
  },
1063
1421
  'vira-pink-on-self-header': {
1064
1422
  foreground: viraColorPalette['vira-pink-40'],
1065
- background: '#6f0050',
1423
+ background: '#6e004f',
1066
1424
  },
1067
1425
  'vira-pink-on-self-placeholder': {
1068
- background: '#6f0050',
1426
+ background: '#6e004f',
1069
1427
  },
1070
1428
  'vira-pink-on-self-decoration': {
1071
1429
  foreground: viraColorPalette['vira-pink-70'],
1072
- background: '#6f0050',
1430
+ background: '#6e004f',
1073
1431
  },
1074
1432
  'vira-pink-on-self-invisible': {
1075
1433
  foreground: viraColorPalette['vira-pink-80'],
1076
- background: '#6f0050',
1434
+ background: '#6e004f',
1435
+ },
1436
+ 'vira-grey-foreground-small-body': {
1437
+ foreground: viraColorPalette['vira-grey-5'],
1438
+ background: 'black',
1077
1439
  },
1078
1440
  'vira-grey-foreground-body': {
1079
1441
  foreground: viraColorPalette['vira-grey-20'],
1080
1442
  background: 'black',
1081
1443
  },
1444
+ 'vira-grey-foreground-non-body': {
1445
+ foreground: viraColorPalette['vira-grey-30'],
1446
+ background: 'black',
1447
+ },
1082
1448
  'vira-grey-foreground-header': {
1083
1449
  background: 'black',
1084
1450
  },
@@ -1094,10 +1460,18 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
1094
1460
  foreground: viraColorPalette['vira-grey-90'],
1095
1461
  background: 'black',
1096
1462
  },
1463
+ 'vira-grey-background-small-body': {
1464
+ foreground: 'black',
1465
+ background: viraColorPalette['vira-grey-5'],
1466
+ },
1097
1467
  'vira-grey-background-body': {
1098
1468
  foreground: 'black',
1099
1469
  background: viraColorPalette['vira-grey-20'],
1100
1470
  },
1471
+ 'vira-grey-background-non-body': {
1472
+ foreground: 'black',
1473
+ background: viraColorPalette['vira-grey-30'],
1474
+ },
1101
1475
  'vira-grey-background-header': {
1102
1476
  foreground: 'black',
1103
1477
  background: viraColorPalette['vira-grey-50'],
@@ -1116,23 +1490,27 @@ export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark',
1116
1490
  },
1117
1491
  'vira-grey-on-self-body': {
1118
1492
  foreground: viraColorPalette['vira-grey-10'],
1119
- background: '#3d3d43',
1493
+ background: '#363f43',
1494
+ },
1495
+ 'vira-grey-on-self-non-body': {
1496
+ foreground: viraColorPalette['vira-grey-20'],
1497
+ background: '#363f43',
1120
1498
  },
1121
1499
  'vira-grey-on-self-header': {
1122
1500
  foreground: viraColorPalette['vira-grey-40'],
1123
- background: '#3d3d43',
1501
+ background: '#363f43',
1124
1502
  },
1125
1503
  'vira-grey-on-self-placeholder': {
1126
1504
  foreground: viraColorPalette['vira-grey-50'],
1127
- background: '#3d3d43',
1505
+ background: '#363f43',
1128
1506
  },
1129
1507
  'vira-grey-on-self-decoration': {
1130
1508
  foreground: viraColorPalette['vira-grey-70'],
1131
- background: '#3d3d43',
1509
+ background: '#363f43',
1132
1510
  },
1133
1511
  'vira-grey-on-self-invisible': {
1134
1512
  foreground: viraColorPalette['vira-grey-80'],
1135
- background: '#3d3d43',
1513
+ background: '#363f43',
1136
1514
  },
1137
1515
  },
1138
1516
  });