vira 28.19.4 → 28.19.6

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 (188) hide show
  1. package/package.json +13 -13
  2. package/src/elements/define-vira-element.ts +29 -0
  3. package/src/elements/form/vira-form-fields.ts +140 -0
  4. package/src/elements/form/vira-form.element.ts +204 -0
  5. package/src/elements/pop-up/pop-up-helpers.ts +85 -0
  6. package/{dist/elements/pop-up/pop-up-menu-item.d.ts → src/elements/pop-up/pop-up-menu-item.ts} +4 -3
  7. package/{dist/elements/pop-up/vira-menu-item.element.js → src/elements/pop-up/vira-menu-item.element.ts} +28 -11
  8. package/src/elements/pop-up/vira-menu-trigger.element.ts +158 -0
  9. package/{dist/elements/pop-up/vira-menu.element.js → src/elements/pop-up/vira-menu.element.ts} +76 -49
  10. package/{dist/elements/pop-up/vira-pop-up-menu.element.js → src/elements/pop-up/vira-pop-up-menu.element.ts} +34 -22
  11. package/{dist/elements/pop-up/vira-pop-up-trigger.element.js → src/elements/pop-up/vira-pop-up-trigger.element.ts} +200 -91
  12. package/src/elements/shared-text-input-logic.ts +173 -0
  13. package/{dist/elements/vira-bold-text.element.js → src/elements/vira-bold-text.element.ts} +8 -7
  14. package/{dist/elements/vira-button.element.js → src/elements/vira-button.element.ts} +64 -33
  15. package/{dist/elements/vira-card.element.js → src/elements/vira-card.element.ts} +16 -13
  16. package/{dist/elements/vira-checkbox.element.js → src/elements/vira-checkbox.element.ts} +71 -28
  17. package/{dist/elements/vira-collapsible-wrapper.element.js → src/elements/vira-collapsible-wrapper.element.ts} +18 -16
  18. package/{dist/elements/vira-dropdown.element.js → src/elements/vira-dropdown.element.ts} +94 -48
  19. package/{dist/elements/vira-error.element.js → src/elements/vira-error.element.ts} +6 -5
  20. package/{dist/elements/vira-icon.element.js → src/elements/vira-icon.element.ts} +13 -6
  21. package/{dist/elements/vira-image.element.js → src/elements/vira-image.element.ts} +63 -43
  22. package/{dist/elements/vira-input.element.js → src/elements/vira-input.element.ts} +151 -85
  23. package/{dist/elements/vira-link.element.js → src/elements/vira-link.element.ts} +62 -11
  24. package/{dist/elements/vira-modal.element.js → src/elements/vira-modal.element.ts} +89 -50
  25. package/src/elements/vira-overflow-switch.element.ts +137 -0
  26. package/{dist/elements/vira-progress.element.js → src/elements/vira-progress.element.ts} +26 -11
  27. package/{dist/elements/vira-select.element.js → src/elements/vira-select.element.ts} +96 -41
  28. package/src/icons/icon-color.test-helper.ts +9 -0
  29. package/{dist/icons/icon-css-vars.js → src/icons/icon-css-vars.ts} +2 -1
  30. package/src/icons/icon-svg.ts +71 -0
  31. package/{dist/icons/icon-svgs/bell-24.icon.js → src/icons/icon-svgs/bell-24.icon.ts} +5 -4
  32. package/{dist/icons/icon-svgs/chat-24.icon.js → src/icons/icon-svgs/chat-24.icon.ts} +5 -4
  33. package/{dist/icons/icon-svgs/check-24.icon.js → src/icons/icon-svgs/check-24.icon.ts} +5 -4
  34. package/{dist/icons/icon-svgs/chevron-down-24.icon.js → src/icons/icon-svgs/chevron-down-24.icon.ts} +5 -4
  35. package/{dist/icons/icon-svgs/chevron-up-24.icon.js → src/icons/icon-svgs/chevron-up-24.icon.ts} +5 -4
  36. package/{dist/icons/icon-svgs/close-x-24.icon.js → src/icons/icon-svgs/close-x-24.icon.ts} +5 -4
  37. package/{dist/icons/icon-svgs/commit-24.icon.js → src/icons/icon-svgs/commit-24.icon.ts} +5 -4
  38. package/{dist/icons/icon-svgs/copy-24.icon.js → src/icons/icon-svgs/copy-24.icon.ts} +5 -4
  39. package/{dist/icons/icon-svgs/document-24.icon.js → src/icons/icon-svgs/document-24.icon.ts} +5 -4
  40. package/{dist/icons/icon-svgs/document-search-24.icon.js → src/icons/icon-svgs/document-search-24.icon.ts} +5 -4
  41. package/{dist/icons/icon-svgs/double-chevron-24.icon.js → src/icons/icon-svgs/double-chevron-24.icon.ts} +5 -4
  42. package/{dist/icons/icon-svgs/element-16.icon.js → src/icons/icon-svgs/element-16.icon.ts} +5 -4
  43. package/{dist/icons/icon-svgs/element-24.icon.js → src/icons/icon-svgs/element-24.icon.ts} +5 -4
  44. package/{dist/icons/icon-svgs/external-link-24.icon.js → src/icons/icon-svgs/external-link-24.icon.ts} +5 -4
  45. package/{dist/icons/icon-svgs/eye-closed-24.icon.js → src/icons/icon-svgs/eye-closed-24.icon.ts} +5 -4
  46. package/{dist/icons/icon-svgs/eye-open-24.icon.js → src/icons/icon-svgs/eye-open-24.icon.ts} +5 -4
  47. package/{dist/icons/icon-svgs/filter-24.icon.js → src/icons/icon-svgs/filter-24.icon.ts} +5 -4
  48. package/{dist/icons/icon-svgs/link-24.icon.js → src/icons/icon-svgs/link-24.icon.ts} +5 -4
  49. package/{dist/icons/icon-svgs/loader-24.icon.js → src/icons/icon-svgs/loader-24.icon.ts} +5 -4
  50. package/{dist/icons/icon-svgs/loader-animated-24.icon.js → src/icons/icon-svgs/loader-animated-24.icon.ts} +8 -6
  51. package/{dist/icons/icon-svgs/lock-24.icon.js → src/icons/icon-svgs/lock-24.icon.ts} +5 -4
  52. package/{dist/icons/icon-svgs/options-24.icon.js → src/icons/icon-svgs/options-24.icon.ts} +5 -4
  53. package/{dist/icons/icon-svgs/pencil-24.icon.js → src/icons/icon-svgs/pencil-24.icon.ts} +5 -4
  54. package/{dist/icons/icon-svgs/shield-24.icon.js → src/icons/icon-svgs/shield-24.icon.ts} +5 -4
  55. package/{dist/icons/icon-svgs/sort-ascending-24.icon.js → src/icons/icon-svgs/sort-ascending-24.icon.ts} +5 -4
  56. package/{dist/icons/icon-svgs/sort-descending-24.icon.js → src/icons/icon-svgs/sort-descending-24.icon.ts} +5 -4
  57. package/{dist/icons/icon-svgs/speaker-loud-24.icon.js → src/icons/icon-svgs/speaker-loud-24.icon.ts} +5 -4
  58. package/{dist/icons/icon-svgs/speaker-medium-24.icon.js → src/icons/icon-svgs/speaker-medium-24.icon.ts} +5 -4
  59. package/{dist/icons/icon-svgs/speaker-muted-24.icon.js → src/icons/icon-svgs/speaker-muted-24.icon.ts} +5 -4
  60. package/{dist/icons/icon-svgs/speaker-quiet-24.icon.js → src/icons/icon-svgs/speaker-quiet-24.icon.ts} +5 -4
  61. package/{dist/icons/icon-svgs/star-24.icon.js → src/icons/icon-svgs/star-24.icon.ts} +5 -4
  62. package/{dist/icons/icon-svgs/status-failure-24.icon.js → src/icons/icon-svgs/status-failure-24.icon.ts} +5 -4
  63. package/{dist/icons/icon-svgs/status-in-progress-24.icon.js → src/icons/icon-svgs/status-in-progress-24.icon.ts} +5 -4
  64. package/{dist/icons/icon-svgs/status-success-24.icon.js → src/icons/icon-svgs/status-success-24.icon.ts} +5 -4
  65. package/{dist/icons/icon-svgs/status-unknown-24.icon.js → src/icons/icon-svgs/status-unknown-24.icon.ts} +5 -4
  66. package/{dist/icons/icon-svgs/status-warning-24.icon.js → src/icons/icon-svgs/status-warning-24.icon.ts} +5 -4
  67. package/{dist/icons/icon-svgs/upload-24.icon.js → src/icons/icon-svgs/upload-24.icon.ts} +5 -4
  68. package/{dist/icons/icon-svgs/x-24.icon.js → src/icons/icon-svgs/x-24.icon.ts} +5 -4
  69. package/{dist/icons/index.js → src/icons/index.ts} +43 -39
  70. package/{dist/styles/border.js → src/styles/border.ts} +2 -1
  71. package/{dist/styles/disabled.js → src/styles/disabled.ts} +3 -2
  72. package/{dist/styles/durations.js → src/styles/durations.ts} +2 -1
  73. package/{dist/styles/focus.js → src/styles/focus.ts} +32 -8
  74. package/{dist/styles/font.js → src/styles/font.ts} +2 -1
  75. package/{dist/styles/form-styles.js → src/styles/form-styles.ts} +6 -1
  76. package/{dist/styles/index.js → src/styles/index.ts} +1 -0
  77. package/{dist/styles/native-styles.js → src/styles/native-styles.ts} +5 -3
  78. package/{dist/styles/scrollbar.js → src/styles/scrollbar.ts} +4 -3
  79. package/{dist/styles/shadows.js → src/styles/shadows.ts} +8 -6
  80. package/{dist/styles/user-select.js → src/styles/user-select.ts} +3 -2
  81. package/{dist/styles/vira-color-palette.js → src/styles/vira-color-palette.ts} +11 -1
  82. package/src/styles/vira-color-theme.ts +1142 -0
  83. package/src/util/define-table.ts +279 -0
  84. package/src/util/dynamic-element.ts +129 -0
  85. package/src/util/pop-up-manager.ts +380 -0
  86. package/dist/elements/define-vira-element.d.ts +0 -18
  87. package/dist/elements/define-vira-element.js +0 -19
  88. package/dist/elements/form/vira-form-fields.d.ts +0 -100
  89. package/dist/elements/form/vira-form-fields.js +0 -60
  90. package/dist/elements/form/vira-form.element.d.ts +0 -35
  91. package/dist/elements/form/vira-form.element.js +0 -151
  92. package/dist/elements/index.js +0 -25
  93. package/dist/elements/pop-up/pop-up-helpers.d.ts +0 -33
  94. package/dist/elements/pop-up/pop-up-helpers.js +0 -58
  95. package/dist/elements/pop-up/pop-up-menu-item.js +0 -1
  96. package/dist/elements/pop-up/vira-menu-item.element.d.ts +0 -19
  97. package/dist/elements/pop-up/vira-menu-trigger.element.d.ts +0 -41
  98. package/dist/elements/pop-up/vira-menu-trigger.element.js +0 -121
  99. package/dist/elements/pop-up/vira-menu.element.d.ts +0 -38
  100. package/dist/elements/pop-up/vira-pop-up-menu.element.d.ts +0 -35
  101. package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts +0 -105
  102. package/dist/elements/shared-text-input-logic.d.ts +0 -63
  103. package/dist/elements/shared-text-input-logic.js +0 -101
  104. package/dist/elements/vira-bold-text.element.d.ts +0 -9
  105. package/dist/elements/vira-button.element.d.ts +0 -31
  106. package/dist/elements/vira-card.element.d.ts +0 -18
  107. package/dist/elements/vira-checkbox.element.d.ts +0 -34
  108. package/dist/elements/vira-collapsible-wrapper.element.d.ts +0 -14
  109. package/dist/elements/vira-dropdown.element.d.ts +0 -46
  110. package/dist/elements/vira-error.element.d.ts +0 -7
  111. package/dist/elements/vira-icon.element.d.ts +0 -13
  112. package/dist/elements/vira-image.element.d.ts +0 -45
  113. package/dist/elements/vira-input.element.d.ts +0 -62
  114. package/dist/elements/vira-link.element.d.ts +0 -73
  115. package/dist/elements/vira-modal.element.d.ts +0 -39
  116. package/dist/elements/vira-overflow-switch.element.d.ts +0 -21
  117. package/dist/elements/vira-overflow-switch.element.js +0 -110
  118. package/dist/elements/vira-progress.element.d.ts +0 -18
  119. package/dist/elements/vira-select.element.d.ts +0 -48
  120. package/dist/icons/icon-color.test-helper.d.ts +0 -6
  121. package/dist/icons/icon-color.test-helper.js +0 -9
  122. package/dist/icons/icon-css-vars.d.ts +0 -14
  123. package/dist/icons/icon-svg.d.ts +0 -27
  124. package/dist/icons/icon-svg.js +0 -48
  125. package/dist/icons/icon-svgs/bell-24.icon.d.ts +0 -8
  126. package/dist/icons/icon-svgs/chat-24.icon.d.ts +0 -8
  127. package/dist/icons/icon-svgs/check-24.icon.d.ts +0 -8
  128. package/dist/icons/icon-svgs/chevron-down-24.icon.d.ts +0 -8
  129. package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts +0 -8
  130. package/dist/icons/icon-svgs/close-x-24.icon.d.ts +0 -8
  131. package/dist/icons/icon-svgs/commit-24.icon.d.ts +0 -8
  132. package/dist/icons/icon-svgs/copy-24.icon.d.ts +0 -8
  133. package/dist/icons/icon-svgs/document-24.icon.d.ts +0 -8
  134. package/dist/icons/icon-svgs/document-search-24.icon.d.ts +0 -8
  135. package/dist/icons/icon-svgs/double-chevron-24.icon.d.ts +0 -8
  136. package/dist/icons/icon-svgs/element-16.icon.d.ts +0 -8
  137. package/dist/icons/icon-svgs/element-24.icon.d.ts +0 -8
  138. package/dist/icons/icon-svgs/external-link-24.icon.d.ts +0 -8
  139. package/dist/icons/icon-svgs/eye-closed-24.icon.d.ts +0 -8
  140. package/dist/icons/icon-svgs/eye-open-24.icon.d.ts +0 -8
  141. package/dist/icons/icon-svgs/filter-24.icon.d.ts +0 -8
  142. package/dist/icons/icon-svgs/link-24.icon.d.ts +0 -8
  143. package/dist/icons/icon-svgs/loader-24.icon.d.ts +0 -8
  144. package/dist/icons/icon-svgs/loader-animated-24.icon.d.ts +0 -8
  145. package/dist/icons/icon-svgs/lock-24.icon.d.ts +0 -8
  146. package/dist/icons/icon-svgs/options-24.icon.d.ts +0 -8
  147. package/dist/icons/icon-svgs/pencil-24.icon.d.ts +0 -8
  148. package/dist/icons/icon-svgs/shield-24.icon.d.ts +0 -8
  149. package/dist/icons/icon-svgs/sort-ascending-24.icon.d.ts +0 -8
  150. package/dist/icons/icon-svgs/sort-descending-24.icon.d.ts +0 -8
  151. package/dist/icons/icon-svgs/speaker-loud-24.icon.d.ts +0 -8
  152. package/dist/icons/icon-svgs/speaker-medium-24.icon.d.ts +0 -8
  153. package/dist/icons/icon-svgs/speaker-muted-24.icon.d.ts +0 -8
  154. package/dist/icons/icon-svgs/speaker-quiet-24.icon.d.ts +0 -8
  155. package/dist/icons/icon-svgs/star-24.icon.d.ts +0 -8
  156. package/dist/icons/icon-svgs/status-failure-24.icon.d.ts +0 -8
  157. package/dist/icons/icon-svgs/status-in-progress-24.icon.d.ts +0 -8
  158. package/dist/icons/icon-svgs/status-success-24.icon.d.ts +0 -8
  159. package/dist/icons/icon-svgs/status-unknown-24.icon.d.ts +0 -8
  160. package/dist/icons/icon-svgs/status-warning-24.icon.d.ts +0 -8
  161. package/dist/icons/icon-svgs/upload-24.icon.d.ts +0 -8
  162. package/dist/icons/icon-svgs/x-24.icon.d.ts +0 -8
  163. package/dist/icons/index.d.ts +0 -86
  164. package/dist/index.js +0 -4
  165. package/dist/styles/border.d.ts +0 -9
  166. package/dist/styles/disabled.d.ts +0 -6
  167. package/dist/styles/durations.d.ts +0 -22
  168. package/dist/styles/focus.d.ts +0 -31
  169. package/dist/styles/font.d.ts +0 -9
  170. package/dist/styles/form-styles.d.ts +0 -20
  171. package/dist/styles/index.d.ts +0 -13
  172. package/dist/styles/native-styles.d.ts +0 -13
  173. package/dist/styles/scrollbar.d.ts +0 -6
  174. package/dist/styles/shadows.d.ts +0 -20
  175. package/dist/styles/user-select.d.ts +0 -6
  176. package/dist/styles/vira-color-palette.d.ts +0 -95
  177. package/dist/styles/vira-color-theme.d.ts +0 -1184
  178. package/dist/styles/vira-color-theme.js +0 -1137
  179. package/dist/util/define-table.d.ts +0 -110
  180. package/dist/util/define-table.js +0 -115
  181. package/dist/util/dynamic-element.d.ts +0 -63
  182. package/dist/util/dynamic-element.js +0 -61
  183. package/dist/util/index.js +0 -3
  184. package/dist/util/pop-up-manager.d.ts +0 -180
  185. package/dist/util/pop-up-manager.js +0 -203
  186. /package/{dist/elements/index.d.ts → src/elements/index.ts} +0 -0
  187. /package/{dist/index.d.ts → src/index.ts} +0 -0
  188. /package/{dist/util/index.d.ts → src/util/index.ts} +0 -0
@@ -1,1137 +0,0 @@
1
- import { defineColorThemeOverride } from 'theme-vir/dist/color-theme/color-theme-override.js';
2
- import { defineColorTheme } from 'theme-vir/dist/color-theme/color-theme.js';
3
- import { viraColorPalette } from './vira-color-palette.js';
4
- /**
5
- * A color theme from Vira.
6
- *
7
- * @category Color
8
- */
9
- export const viraTheme = defineColorTheme({
10
- foreground: 'black',
11
- background: 'white',
12
- }, {
13
- 'vira-red-foreground-body': {
14
- foreground: viraColorPalette['vira-red-80'],
15
- },
16
- 'vira-red-foreground-header': {
17
- foreground: viraColorPalette['vira-red-50'],
18
- },
19
- 'vira-red-foreground-placeholder': {
20
- foreground: viraColorPalette['vira-red-30'],
21
- },
22
- 'vira-red-foreground-decoration': {
23
- foreground: viraColorPalette['vira-red-20'],
24
- },
25
- 'vira-red-foreground-invisible': {
26
- foreground: viraColorPalette['vira-red-10'],
27
- },
28
- 'vira-red-background-body': {
29
- foreground: {
30
- refDefaultBackground: true,
31
- },
32
- background: viraColorPalette['vira-red-80'],
33
- },
34
- 'vira-red-background-header': {
35
- foreground: {
36
- refDefaultBackground: true,
37
- },
38
- background: viraColorPalette['vira-red-40'],
39
- },
40
- 'vira-red-background-placeholder': {
41
- foreground: {
42
- refDefaultBackground: true,
43
- },
44
- background: viraColorPalette['vira-red-30'],
45
- },
46
- 'vira-red-background-decoration': {
47
- foreground: {
48
- refDefaultBackground: true,
49
- },
50
- background: viraColorPalette['vira-red-20'],
51
- },
52
- 'vira-red-background-invisible': {
53
- foreground: {
54
- refDefaultBackground: true,
55
- },
56
- background: viraColorPalette['vira-red-5'],
57
- },
58
- 'vira-red-on-self-body': {
59
- foreground: viraColorPalette['vira-red-90'],
60
- background: '#ffe9e6',
61
- },
62
- 'vira-red-on-self-header': {
63
- foreground: viraColorPalette['vira-red-60'],
64
- background: '#ffe9e6',
65
- },
66
- 'vira-red-on-self-placeholder': {
67
- foreground: viraColorPalette['vira-red-50'],
68
- background: '#ffe9e6',
69
- },
70
- 'vira-red-on-self-decoration': {
71
- foreground: viraColorPalette['vira-red-30'],
72
- background: '#ffe9e6',
73
- },
74
- 'vira-red-on-self-invisible': {
75
- foreground: viraColorPalette['vira-red-20'],
76
- background: '#ffe9e6',
77
- },
78
- 'vira-orange-foreground-body': {
79
- foreground: viraColorPalette['vira-orange-80'],
80
- },
81
- 'vira-orange-foreground-header': {
82
- foreground: viraColorPalette['vira-orange-50'],
83
- },
84
- 'vira-orange-foreground-placeholder': {
85
- foreground: viraColorPalette['vira-orange-30'],
86
- },
87
- 'vira-orange-foreground-decoration': {
88
- foreground: viraColorPalette['vira-orange-20'],
89
- },
90
- 'vira-orange-foreground-invisible': {
91
- foreground: viraColorPalette['vira-orange-5'],
92
- },
93
- 'vira-orange-background-body': {
94
- foreground: {
95
- refDefaultBackground: true,
96
- },
97
- background: viraColorPalette['vira-orange-80'],
98
- },
99
- 'vira-orange-background-header': {
100
- foreground: {
101
- refDefaultBackground: true,
102
- },
103
- background: viraColorPalette['vira-orange-40'],
104
- },
105
- 'vira-orange-background-placeholder': {
106
- foreground: {
107
- refDefaultBackground: true,
108
- },
109
- background: viraColorPalette['vira-orange-30'],
110
- },
111
- 'vira-orange-background-decoration': {
112
- foreground: {
113
- refDefaultBackground: true,
114
- },
115
- background: viraColorPalette['vira-orange-20'],
116
- },
117
- 'vira-orange-background-invisible': {
118
- foreground: {
119
- refDefaultBackground: true,
120
- },
121
- background: viraColorPalette['vira-orange-5'],
122
- },
123
- 'vira-orange-on-self-body': {
124
- foreground: viraColorPalette['vira-orange-90'],
125
- background: '#ffebd1',
126
- },
127
- 'vira-orange-on-self-header': {
128
- foreground: viraColorPalette['vira-orange-60'],
129
- background: '#ffebd1',
130
- },
131
- 'vira-orange-on-self-placeholder': {
132
- foreground: viraColorPalette['vira-orange-50'],
133
- background: '#ffebd1',
134
- },
135
- 'vira-orange-on-self-decoration': {
136
- foreground: viraColorPalette['vira-orange-30'],
137
- background: '#ffebd1',
138
- },
139
- 'vira-orange-on-self-invisible': {
140
- foreground: viraColorPalette['vira-orange-20'],
141
- background: '#ffebd1',
142
- },
143
- 'vira-yellow-foreground-body': {
144
- foreground: viraColorPalette['vira-yellow-80'],
145
- },
146
- 'vira-yellow-foreground-header': {
147
- foreground: viraColorPalette['vira-yellow-50'],
148
- },
149
- 'vira-yellow-foreground-placeholder': {
150
- foreground: viraColorPalette['vira-yellow-40'],
151
- },
152
- 'vira-yellow-foreground-decoration': {
153
- foreground: viraColorPalette['vira-yellow-20'],
154
- },
155
- 'vira-yellow-foreground-invisible': {
156
- foreground: viraColorPalette['vira-yellow-5'],
157
- },
158
- 'vira-yellow-background-body': {
159
- foreground: {
160
- refDefaultBackground: true,
161
- },
162
- background: viraColorPalette['vira-yellow-80'],
163
- },
164
- 'vira-yellow-background-header': {
165
- foreground: {
166
- refDefaultBackground: true,
167
- },
168
- background: viraColorPalette['vira-yellow-40'],
169
- },
170
- 'vira-yellow-background-placeholder': {
171
- foreground: {
172
- refDefaultBackground: true,
173
- },
174
- background: viraColorPalette['vira-yellow-30'],
175
- },
176
- 'vira-yellow-background-decoration': {
177
- foreground: {
178
- refDefaultBackground: true,
179
- },
180
- background: viraColorPalette['vira-yellow-20'],
181
- },
182
- 'vira-yellow-background-invisible': {
183
- foreground: {
184
- refDefaultBackground: true,
185
- },
186
- background: viraColorPalette['vira-yellow-5'],
187
- },
188
- 'vira-yellow-on-self-body': {
189
- foreground: viraColorPalette['vira-yellow-90'],
190
- background: '#f5f0c6',
191
- },
192
- 'vira-yellow-on-self-header': {
193
- foreground: viraColorPalette['vira-yellow-60'],
194
- background: '#f5f0c6',
195
- },
196
- 'vira-yellow-on-self-placeholder': {
197
- foreground: viraColorPalette['vira-yellow-40'],
198
- background: '#f5f0c6',
199
- },
200
- 'vira-yellow-on-self-decoration': {
201
- foreground: viraColorPalette['vira-yellow-30'],
202
- background: '#f5f0c6',
203
- },
204
- 'vira-yellow-on-self-invisible': {
205
- foreground: viraColorPalette['vira-yellow-10'],
206
- background: '#f5f0c6',
207
- },
208
- 'vira-green-foreground-body': {
209
- foreground: viraColorPalette['vira-green-80'],
210
- },
211
- 'vira-green-foreground-header': {
212
- foreground: viraColorPalette['vira-green-50'],
213
- },
214
- 'vira-green-foreground-placeholder': {
215
- foreground: viraColorPalette['vira-green-40'],
216
- },
217
- 'vira-green-foreground-decoration': {
218
- foreground: viraColorPalette['vira-green-20'],
219
- },
220
- 'vira-green-foreground-invisible': {
221
- foreground: viraColorPalette['vira-green-5'],
222
- },
223
- 'vira-green-background-body': {
224
- foreground: {
225
- refDefaultBackground: true,
226
- },
227
- background: viraColorPalette['vira-green-80'],
228
- },
229
- 'vira-green-background-header': {
230
- foreground: {
231
- refDefaultBackground: true,
232
- },
233
- background: viraColorPalette['vira-green-40'],
234
- },
235
- 'vira-green-background-placeholder': {
236
- foreground: {
237
- refDefaultBackground: true,
238
- },
239
- background: viraColorPalette['vira-green-30'],
240
- },
241
- 'vira-green-background-decoration': {
242
- foreground: {
243
- refDefaultBackground: true,
244
- },
245
- background: viraColorPalette['vira-green-20'],
246
- },
247
- 'vira-green-background-invisible': {
248
- foreground: {
249
- refDefaultBackground: true,
250
- },
251
- background: viraColorPalette['vira-green-5'],
252
- },
253
- 'vira-green-on-self-body': {
254
- foreground: viraColorPalette['vira-green-90'],
255
- background: '#def6cc',
256
- },
257
- 'vira-green-on-self-header': {
258
- foreground: viraColorPalette['vira-green-60'],
259
- background: '#def6cc',
260
- },
261
- 'vira-green-on-self-placeholder': {
262
- foreground: viraColorPalette['vira-green-40'],
263
- background: '#def6cc',
264
- },
265
- 'vira-green-on-self-decoration': {
266
- foreground: viraColorPalette['vira-green-30'],
267
- background: '#def6cc',
268
- },
269
- 'vira-green-on-self-invisible': {
270
- foreground: viraColorPalette['vira-green-10'],
271
- background: '#def6cc',
272
- },
273
- 'vira-teal-foreground-body': {
274
- foreground: viraColorPalette['vira-teal-80'],
275
- },
276
- 'vira-teal-foreground-header': {
277
- foreground: viraColorPalette['vira-teal-50'],
278
- },
279
- 'vira-teal-foreground-placeholder': {
280
- foreground: viraColorPalette['vira-teal-40'],
281
- },
282
- 'vira-teal-foreground-decoration': {
283
- foreground: viraColorPalette['vira-teal-20'],
284
- },
285
- 'vira-teal-foreground-invisible': {
286
- foreground: viraColorPalette['vira-teal-5'],
287
- },
288
- 'vira-teal-background-body': {
289
- foreground: {
290
- refDefaultBackground: true,
291
- },
292
- background: viraColorPalette['vira-teal-80'],
293
- },
294
- 'vira-teal-background-header': {
295
- foreground: {
296
- refDefaultBackground: true,
297
- },
298
- background: viraColorPalette['vira-teal-40'],
299
- },
300
- 'vira-teal-background-placeholder': {
301
- foreground: {
302
- refDefaultBackground: true,
303
- },
304
- background: viraColorPalette['vira-teal-30'],
305
- },
306
- 'vira-teal-background-decoration': {
307
- foreground: {
308
- refDefaultBackground: true,
309
- },
310
- background: viraColorPalette['vira-teal-20'],
311
- },
312
- 'vira-teal-background-invisible': {
313
- foreground: {
314
- refDefaultBackground: true,
315
- },
316
- background: viraColorPalette['vira-teal-5'],
317
- },
318
- 'vira-teal-on-self-body': {
319
- foreground: viraColorPalette['vira-teal-90'],
320
- background: '#d3f5ed',
321
- },
322
- 'vira-teal-on-self-header': {
323
- foreground: viraColorPalette['vira-teal-60'],
324
- background: '#d3f5ed',
325
- },
326
- 'vira-teal-on-self-placeholder': {
327
- foreground: viraColorPalette['vira-teal-50'],
328
- background: '#d3f5ed',
329
- },
330
- 'vira-teal-on-self-decoration': {
331
- foreground: viraColorPalette['vira-teal-30'],
332
- background: '#d3f5ed',
333
- },
334
- 'vira-teal-on-self-invisible': {
335
- foreground: viraColorPalette['vira-teal-20'],
336
- background: '#d3f5ed',
337
- },
338
- 'vira-blue-foreground-body': {
339
- foreground: viraColorPalette['vira-blue-80'],
340
- },
341
- 'vira-blue-foreground-header': {
342
- foreground: viraColorPalette['vira-blue-50'],
343
- },
344
- 'vira-blue-foreground-placeholder': {
345
- foreground: viraColorPalette['vira-blue-40'],
346
- },
347
- 'vira-blue-foreground-decoration': {
348
- foreground: viraColorPalette['vira-blue-20'],
349
- },
350
- 'vira-blue-foreground-invisible': {
351
- foreground: viraColorPalette['vira-blue-5'],
352
- },
353
- 'vira-blue-background-body': {
354
- foreground: {
355
- refDefaultBackground: true,
356
- },
357
- background: viraColorPalette['vira-blue-70'],
358
- },
359
- 'vira-blue-background-header': {
360
- foreground: {
361
- refDefaultBackground: true,
362
- },
363
- background: viraColorPalette['vira-blue-40'],
364
- },
365
- 'vira-blue-background-placeholder': {
366
- foreground: {
367
- refDefaultBackground: true,
368
- },
369
- background: viraColorPalette['vira-blue-30'],
370
- },
371
- 'vira-blue-background-decoration': {
372
- foreground: {
373
- refDefaultBackground: true,
374
- },
375
- background: viraColorPalette['vira-blue-20'],
376
- },
377
- 'vira-blue-background-invisible': {
378
- foreground: {
379
- refDefaultBackground: true,
380
- },
381
- background: viraColorPalette['vira-blue-5'],
382
- },
383
- 'vira-blue-on-self-body': {
384
- foreground: viraColorPalette['vira-blue-90'],
385
- background: '#def1ff',
386
- },
387
- 'vira-blue-on-self-header': {
388
- foreground: viraColorPalette['vira-blue-60'],
389
- background: '#def1ff',
390
- },
391
- 'vira-blue-on-self-placeholder': {
392
- foreground: viraColorPalette['vira-blue-50'],
393
- background: '#def1ff',
394
- },
395
- 'vira-blue-on-self-decoration': {
396
- foreground: viraColorPalette['vira-blue-30'],
397
- background: '#def1ff',
398
- },
399
- 'vira-blue-on-self-invisible': {
400
- foreground: viraColorPalette['vira-blue-10'],
401
- background: '#def1ff',
402
- },
403
- 'vira-purple-foreground-body': {
404
- foreground: viraColorPalette['vira-purple-80'],
405
- },
406
- 'vira-purple-foreground-header': {
407
- foreground: viraColorPalette['vira-purple-50'],
408
- },
409
- 'vira-purple-foreground-placeholder': {
410
- foreground: viraColorPalette['vira-purple-40'],
411
- },
412
- 'vira-purple-foreground-decoration': {
413
- foreground: viraColorPalette['vira-purple-20'],
414
- },
415
- 'vira-purple-foreground-invisible': {
416
- foreground: viraColorPalette['vira-purple-5'],
417
- },
418
- 'vira-purple-background-body': {
419
- foreground: {
420
- refDefaultBackground: true,
421
- },
422
- background: viraColorPalette['vira-purple-80'],
423
- },
424
- 'vira-purple-background-header': {
425
- foreground: {
426
- refDefaultBackground: true,
427
- },
428
- background: viraColorPalette['vira-purple-40'],
429
- },
430
- 'vira-purple-background-placeholder': {
431
- foreground: {
432
- refDefaultBackground: true,
433
- },
434
- background: viraColorPalette['vira-purple-30'],
435
- },
436
- 'vira-purple-background-decoration': {
437
- foreground: {
438
- refDefaultBackground: true,
439
- },
440
- background: viraColorPalette['vira-purple-20'],
441
- },
442
- 'vira-purple-background-invisible': {
443
- foreground: {
444
- refDefaultBackground: true,
445
- },
446
- background: viraColorPalette['vira-purple-5'],
447
- },
448
- 'vira-purple-on-self-body': {
449
- foreground: viraColorPalette['vira-purple-90'],
450
- background: '#f3ebff',
451
- },
452
- 'vira-purple-on-self-header': {
453
- foreground: viraColorPalette['vira-purple-60'],
454
- background: '#f3ebff',
455
- },
456
- 'vira-purple-on-self-placeholder': {
457
- foreground: viraColorPalette['vira-purple-40'],
458
- background: '#f3ebff',
459
- },
460
- 'vira-purple-on-self-decoration': {
461
- foreground: viraColorPalette['vira-purple-30'],
462
- background: '#f3ebff',
463
- },
464
- 'vira-purple-on-self-invisible': {
465
- foreground: viraColorPalette['vira-purple-10'],
466
- background: '#f3ebff',
467
- },
468
- 'vira-pink-foreground-body': {
469
- foreground: viraColorPalette['vira-pink-80'],
470
- },
471
- 'vira-pink-foreground-header': {
472
- foreground: viraColorPalette['vira-pink-50'],
473
- },
474
- 'vira-pink-foreground-placeholder': {
475
- foreground: viraColorPalette['vira-pink-40'],
476
- },
477
- 'vira-pink-foreground-decoration': {
478
- foreground: viraColorPalette['vira-pink-20'],
479
- },
480
- 'vira-pink-foreground-invisible': {
481
- foreground: viraColorPalette['vira-pink-5'],
482
- },
483
- 'vira-pink-background-body': {
484
- foreground: {
485
- refDefaultBackground: true,
486
- },
487
- background: viraColorPalette['vira-pink-80'],
488
- },
489
- 'vira-pink-background-header': {
490
- foreground: {
491
- refDefaultBackground: true,
492
- },
493
- background: viraColorPalette['vira-pink-40'],
494
- },
495
- 'vira-pink-background-placeholder': {
496
- foreground: {
497
- refDefaultBackground: true,
498
- },
499
- background: viraColorPalette['vira-pink-30'],
500
- },
501
- 'vira-pink-background-decoration': {
502
- foreground: {
503
- refDefaultBackground: true,
504
- },
505
- background: viraColorPalette['vira-pink-20'],
506
- },
507
- 'vira-pink-background-invisible': {
508
- foreground: {
509
- refDefaultBackground: true,
510
- },
511
- background: viraColorPalette['vira-pink-5'],
512
- },
513
- 'vira-pink-on-self-body': {
514
- foreground: viraColorPalette['vira-pink-90'],
515
- background: '#ffe7fb',
516
- },
517
- 'vira-pink-on-self-header': {
518
- foreground: viraColorPalette['vira-pink-60'],
519
- background: '#ffe7fb',
520
- },
521
- 'vira-pink-on-self-placeholder': {
522
- foreground: viraColorPalette['vira-pink-50'],
523
- background: '#ffe7fb',
524
- },
525
- 'vira-pink-on-self-decoration': {
526
- foreground: viraColorPalette['vira-pink-30'],
527
- background: '#ffe7fb',
528
- },
529
- 'vira-pink-on-self-invisible': {
530
- foreground: viraColorPalette['vira-pink-20'],
531
- background: '#ffe7fb',
532
- },
533
- 'vira-grey-foreground-body': {
534
- foreground: viraColorPalette['vira-grey-80'],
535
- },
536
- 'vira-grey-foreground-header': {
537
- foreground: viraColorPalette['vira-grey-50'],
538
- },
539
- 'vira-grey-foreground-placeholder': {
540
- foreground: viraColorPalette['vira-grey-30'],
541
- },
542
- 'vira-grey-foreground-decoration': {
543
- foreground: viraColorPalette['vira-grey-20'],
544
- },
545
- 'vira-grey-foreground-invisible': {
546
- foreground: viraColorPalette['vira-grey-5'],
547
- },
548
- 'vira-grey-background-body': {
549
- foreground: {
550
- refDefaultBackground: true,
551
- },
552
- background: viraColorPalette['vira-grey-80'],
553
- },
554
- 'vira-grey-background-header': {
555
- foreground: {
556
- refDefaultBackground: true,
557
- },
558
- background: viraColorPalette['vira-grey-40'],
559
- },
560
- 'vira-grey-background-placeholder': {
561
- foreground: {
562
- refDefaultBackground: true,
563
- },
564
- background: viraColorPalette['vira-grey-30'],
565
- },
566
- 'vira-grey-background-decoration': {
567
- foreground: {
568
- refDefaultBackground: true,
569
- },
570
- background: viraColorPalette['vira-grey-20'],
571
- },
572
- 'vira-grey-background-invisible': {
573
- foreground: {
574
- refDefaultBackground: true,
575
- },
576
- background: viraColorPalette['vira-grey-5'],
577
- },
578
- 'vira-grey-on-self-body': {
579
- foreground: viraColorPalette['vira-grey-90'],
580
- background: '#eeeef1',
581
- },
582
- 'vira-grey-on-self-header': {
583
- foreground: viraColorPalette['vira-grey-60'],
584
- background: '#eeeef1',
585
- },
586
- 'vira-grey-on-self-placeholder': {
587
- foreground: viraColorPalette['vira-grey-40'],
588
- background: '#eeeef1',
589
- },
590
- 'vira-grey-on-self-decoration': {
591
- foreground: viraColorPalette['vira-grey-30'],
592
- background: '#eeeef1',
593
- },
594
- 'vira-grey-on-self-invisible': {
595
- foreground: viraColorPalette['vira-grey-20'],
596
- background: '#eeeef1',
597
- },
598
- });
599
- /**
600
- * Dark mode override for {@link viraTheme}.
601
- *
602
- * @category Color
603
- */
604
- export const viraThemeDarkOverride = defineColorThemeOverride(viraTheme, 'dark', {
605
- defaultOverride: {
606
- foreground: 'white',
607
- background: 'black',
608
- },
609
- colorOverrides: {
610
- 'vira-red-foreground-body': {
611
- foreground: viraColorPalette['vira-red-20'],
612
- background: 'black',
613
- },
614
- 'vira-red-foreground-header': {
615
- background: 'black',
616
- },
617
- 'vira-red-foreground-placeholder': {
618
- foreground: viraColorPalette['vira-red-60'],
619
- background: 'black',
620
- },
621
- 'vira-red-foreground-decoration': {
622
- foreground: viraColorPalette['vira-red-80'],
623
- background: 'black',
624
- },
625
- 'vira-red-foreground-invisible': {
626
- foreground: viraColorPalette['vira-red-90'],
627
- background: 'black',
628
- },
629
- 'vira-red-background-body': {
630
- foreground: 'black',
631
- background: viraColorPalette['vira-red-20'],
632
- },
633
- 'vira-red-background-header': {
634
- foreground: 'black',
635
- background: viraColorPalette['vira-red-50'],
636
- },
637
- 'vira-red-background-placeholder': {
638
- foreground: 'black',
639
- background: viraColorPalette['vira-red-60'],
640
- },
641
- 'vira-red-background-decoration': {
642
- foreground: 'black',
643
- background: viraColorPalette['vira-red-80'],
644
- },
645
- 'vira-red-background-invisible': {
646
- foreground: 'black',
647
- background: viraColorPalette['vira-red-90'],
648
- },
649
- 'vira-red-on-self-body': {
650
- foreground: viraColorPalette['vira-red-10'],
651
- background: '#760004',
652
- },
653
- 'vira-red-on-self-header': {
654
- foreground: viraColorPalette['vira-red-40'],
655
- background: '#760004',
656
- },
657
- 'vira-red-on-self-placeholder': {
658
- background: '#760004',
659
- },
660
- 'vira-red-on-self-decoration': {
661
- foreground: viraColorPalette['vira-red-70'],
662
- background: '#760004',
663
- },
664
- 'vira-red-on-self-invisible': {
665
- foreground: viraColorPalette['vira-red-80'],
666
- background: '#760004',
667
- },
668
- 'vira-orange-foreground-body': {
669
- foreground: viraColorPalette['vira-orange-20'],
670
- background: 'black',
671
- },
672
- 'vira-orange-foreground-header': {
673
- background: 'black',
674
- },
675
- 'vira-orange-foreground-placeholder': {
676
- foreground: viraColorPalette['vira-orange-60'],
677
- background: 'black',
678
- },
679
- 'vira-orange-foreground-decoration': {
680
- foreground: viraColorPalette['vira-orange-80'],
681
- background: 'black',
682
- },
683
- 'vira-orange-foreground-invisible': {
684
- foreground: viraColorPalette['vira-orange-90'],
685
- background: 'black',
686
- },
687
- 'vira-orange-background-body': {
688
- foreground: 'black',
689
- background: viraColorPalette['vira-orange-20'],
690
- },
691
- 'vira-orange-background-header': {
692
- foreground: 'black',
693
- background: viraColorPalette['vira-orange-50'],
694
- },
695
- 'vira-orange-background-placeholder': {
696
- foreground: 'black',
697
- background: viraColorPalette['vira-orange-60'],
698
- },
699
- 'vira-orange-background-decoration': {
700
- foreground: 'black',
701
- background: viraColorPalette['vira-orange-80'],
702
- },
703
- 'vira-orange-background-invisible': {
704
- foreground: 'black',
705
- background: viraColorPalette['vira-orange-90'],
706
- },
707
- 'vira-orange-on-self-body': {
708
- foreground: viraColorPalette['vira-orange-10'],
709
- background: '#682800',
710
- },
711
- 'vira-orange-on-self-header': {
712
- foreground: viraColorPalette['vira-orange-40'],
713
- background: '#682800',
714
- },
715
- 'vira-orange-on-self-placeholder': {
716
- background: '#682800',
717
- },
718
- 'vira-orange-on-self-decoration': {
719
- foreground: viraColorPalette['vira-orange-70'],
720
- background: '#682800',
721
- },
722
- 'vira-orange-on-self-invisible': {
723
- foreground: viraColorPalette['vira-orange-80'],
724
- background: '#682800',
725
- },
726
- 'vira-yellow-foreground-body': {
727
- foreground: viraColorPalette['vira-yellow-20'],
728
- background: 'black',
729
- },
730
- 'vira-yellow-foreground-header': {
731
- background: 'black',
732
- },
733
- 'vira-yellow-foreground-placeholder': {
734
- foreground: viraColorPalette['vira-yellow-60'],
735
- background: 'black',
736
- },
737
- 'vira-yellow-foreground-decoration': {
738
- foreground: viraColorPalette['vira-yellow-80'],
739
- background: 'black',
740
- },
741
- 'vira-yellow-foreground-invisible': {
742
- foreground: viraColorPalette['vira-yellow-90'],
743
- background: 'black',
744
- },
745
- 'vira-yellow-background-body': {
746
- foreground: 'black',
747
- background: viraColorPalette['vira-yellow-20'],
748
- },
749
- 'vira-yellow-background-header': {
750
- foreground: 'black',
751
- background: viraColorPalette['vira-yellow-50'],
752
- },
753
- 'vira-yellow-background-placeholder': {
754
- foreground: 'black',
755
- background: viraColorPalette['vira-yellow-60'],
756
- },
757
- 'vira-yellow-background-decoration': {
758
- foreground: 'black',
759
- background: viraColorPalette['vira-yellow-80'],
760
- },
761
- 'vira-yellow-background-invisible': {
762
- foreground: 'black',
763
- background: viraColorPalette['vira-yellow-90'],
764
- },
765
- 'vira-yellow-on-self-body': {
766
- foreground: viraColorPalette['vira-yellow-10'],
767
- background: '#473d00',
768
- },
769
- 'vira-yellow-on-self-header': {
770
- foreground: viraColorPalette['vira-yellow-40'],
771
- background: '#473d00',
772
- },
773
- 'vira-yellow-on-self-placeholder': {
774
- foreground: viraColorPalette['vira-yellow-50'],
775
- background: '#473d00',
776
- },
777
- 'vira-yellow-on-self-decoration': {
778
- foreground: viraColorPalette['vira-yellow-70'],
779
- background: '#473d00',
780
- },
781
- 'vira-yellow-on-self-invisible': {
782
- foreground: viraColorPalette['vira-yellow-80'],
783
- background: '#473d00',
784
- },
785
- 'vira-green-foreground-body': {
786
- foreground: viraColorPalette['vira-green-20'],
787
- background: 'black',
788
- },
789
- 'vira-green-foreground-header': {
790
- background: 'black',
791
- },
792
- 'vira-green-foreground-placeholder': {
793
- foreground: viraColorPalette['vira-green-60'],
794
- background: 'black',
795
- },
796
- 'vira-green-foreground-decoration': {
797
- foreground: viraColorPalette['vira-green-80'],
798
- background: 'black',
799
- },
800
- 'vira-green-foreground-invisible': {
801
- foreground: viraColorPalette['vira-green-90'],
802
- background: 'black',
803
- },
804
- 'vira-green-background-body': {
805
- foreground: 'black',
806
- background: viraColorPalette['vira-green-20'],
807
- },
808
- 'vira-green-background-header': {
809
- foreground: 'black',
810
- background: viraColorPalette['vira-green-50'],
811
- },
812
- 'vira-green-background-placeholder': {
813
- foreground: 'black',
814
- background: viraColorPalette['vira-green-60'],
815
- },
816
- 'vira-green-background-decoration': {
817
- foreground: 'black',
818
- background: viraColorPalette['vira-green-80'],
819
- },
820
- 'vira-green-background-invisible': {
821
- foreground: 'black',
822
- background: viraColorPalette['vira-green-90'],
823
- },
824
- 'vira-green-on-self-body': {
825
- foreground: viraColorPalette['vira-green-10'],
826
- background: '#1f4600',
827
- },
828
- 'vira-green-on-self-header': {
829
- foreground: viraColorPalette['vira-green-40'],
830
- background: '#1f4600',
831
- },
832
- 'vira-green-on-self-placeholder': {
833
- foreground: viraColorPalette['vira-green-50'],
834
- background: '#1f4600',
835
- },
836
- 'vira-green-on-self-decoration': {
837
- foreground: viraColorPalette['vira-green-70'],
838
- background: '#1f4600',
839
- },
840
- 'vira-green-on-self-invisible': {
841
- foreground: viraColorPalette['vira-green-80'],
842
- background: '#1f4600',
843
- },
844
- 'vira-teal-foreground-body': {
845
- foreground: viraColorPalette['vira-teal-20'],
846
- background: 'black',
847
- },
848
- 'vira-teal-foreground-header': {
849
- background: 'black',
850
- },
851
- 'vira-teal-foreground-placeholder': {
852
- foreground: viraColorPalette['vira-teal-60'],
853
- background: 'black',
854
- },
855
- 'vira-teal-foreground-decoration': {
856
- foreground: viraColorPalette['vira-teal-80'],
857
- background: 'black',
858
- },
859
- 'vira-teal-foreground-invisible': {
860
- foreground: viraColorPalette['vira-teal-90'],
861
- background: 'black',
862
- },
863
- 'vira-teal-background-body': {
864
- foreground: 'black',
865
- background: viraColorPalette['vira-teal-20'],
866
- },
867
- 'vira-teal-background-header': {
868
- foreground: 'black',
869
- background: viraColorPalette['vira-teal-50'],
870
- },
871
- 'vira-teal-background-placeholder': {
872
- foreground: 'black',
873
- background: viraColorPalette['vira-teal-60'],
874
- },
875
- 'vira-teal-background-decoration': {
876
- foreground: 'black',
877
- background: viraColorPalette['vira-teal-80'],
878
- },
879
- 'vira-teal-background-invisible': {
880
- foreground: 'black',
881
- background: viraColorPalette['vira-teal-90'],
882
- },
883
- 'vira-teal-on-self-body': {
884
- foreground: viraColorPalette['vira-teal-10'],
885
- background: '#004539',
886
- },
887
- 'vira-teal-on-self-header': {
888
- foreground: viraColorPalette['vira-teal-40'],
889
- background: '#004539',
890
- },
891
- 'vira-teal-on-self-placeholder': {
892
- background: '#004539',
893
- },
894
- 'vira-teal-on-self-decoration': {
895
- foreground: viraColorPalette['vira-teal-70'],
896
- background: '#004539',
897
- },
898
- 'vira-teal-on-self-invisible': {
899
- foreground: viraColorPalette['vira-teal-80'],
900
- background: '#004539',
901
- },
902
- 'vira-blue-foreground-body': {
903
- foreground: viraColorPalette['vira-blue-20'],
904
- background: 'black',
905
- },
906
- 'vira-blue-foreground-header': {
907
- background: 'black',
908
- },
909
- 'vira-blue-foreground-placeholder': {
910
- foreground: viraColorPalette['vira-blue-60'],
911
- background: 'black',
912
- },
913
- 'vira-blue-foreground-decoration': {
914
- foreground: viraColorPalette['vira-blue-80'],
915
- background: 'black',
916
- },
917
- 'vira-blue-foreground-invisible': {
918
- foreground: viraColorPalette['vira-blue-90'],
919
- background: 'black',
920
- },
921
- 'vira-blue-background-body': {
922
- foreground: 'black',
923
- background: viraColorPalette['vira-blue-20'],
924
- },
925
- 'vira-blue-background-header': {
926
- foreground: 'black',
927
- background: viraColorPalette['vira-blue-50'],
928
- },
929
- 'vira-blue-background-placeholder': {
930
- foreground: 'black',
931
- background: viraColorPalette['vira-blue-60'],
932
- },
933
- 'vira-blue-background-decoration': {
934
- foreground: 'black',
935
- background: viraColorPalette['vira-blue-80'],
936
- },
937
- 'vira-blue-background-invisible': {
938
- foreground: 'black',
939
- background: viraColorPalette['vira-blue-90'],
940
- },
941
- 'vira-blue-on-self-body': {
942
- foreground: viraColorPalette['vira-blue-10'],
943
- background: '#003a7b',
944
- },
945
- 'vira-blue-on-self-header': {
946
- foreground: viraColorPalette['vira-blue-40'],
947
- background: '#003a7b',
948
- },
949
- 'vira-blue-on-self-placeholder': {
950
- background: '#003a7b',
951
- },
952
- 'vira-blue-on-self-decoration': {
953
- foreground: viraColorPalette['vira-blue-70'],
954
- background: '#003a7b',
955
- },
956
- 'vira-blue-on-self-invisible': {
957
- foreground: viraColorPalette['vira-blue-80'],
958
- background: '#003a7b',
959
- },
960
- 'vira-purple-foreground-body': {
961
- foreground: viraColorPalette['vira-purple-20'],
962
- background: 'black',
963
- },
964
- 'vira-purple-foreground-header': {
965
- background: 'black',
966
- },
967
- 'vira-purple-foreground-placeholder': {
968
- foreground: viraColorPalette['vira-purple-60'],
969
- background: 'black',
970
- },
971
- 'vira-purple-foreground-decoration': {
972
- foreground: viraColorPalette['vira-purple-80'],
973
- background: 'black',
974
- },
975
- 'vira-purple-foreground-invisible': {
976
- foreground: viraColorPalette['vira-purple-90'],
977
- background: 'black',
978
- },
979
- 'vira-purple-background-body': {
980
- foreground: 'black',
981
- background: viraColorPalette['vira-purple-20'],
982
- },
983
- 'vira-purple-background-header': {
984
- foreground: 'black',
985
- background: viraColorPalette['vira-purple-50'],
986
- },
987
- 'vira-purple-background-placeholder': {
988
- foreground: 'black',
989
- background: viraColorPalette['vira-purple-60'],
990
- },
991
- 'vira-purple-background-decoration': {
992
- foreground: 'black',
993
- background: viraColorPalette['vira-purple-80'],
994
- },
995
- 'vira-purple-background-invisible': {
996
- foreground: 'black',
997
- background: viraColorPalette['vira-purple-90'],
998
- },
999
- 'vira-purple-on-self-body': {
1000
- foreground: viraColorPalette['vira-purple-10'],
1001
- background: '#4c0099',
1002
- },
1003
- 'vira-purple-on-self-header': {
1004
- foreground: viraColorPalette['vira-purple-40'],
1005
- background: '#4c0099',
1006
- },
1007
- 'vira-purple-on-self-placeholder': {
1008
- foreground: viraColorPalette['vira-purple-50'],
1009
- background: '#4c0099',
1010
- },
1011
- 'vira-purple-on-self-decoration': {
1012
- foreground: viraColorPalette['vira-purple-70'],
1013
- background: '#4c0099',
1014
- },
1015
- 'vira-purple-on-self-invisible': {
1016
- foreground: viraColorPalette['vira-purple-80'],
1017
- background: '#4c0099',
1018
- },
1019
- 'vira-pink-foreground-body': {
1020
- foreground: viraColorPalette['vira-pink-20'],
1021
- background: 'black',
1022
- },
1023
- 'vira-pink-foreground-header': {
1024
- background: 'black',
1025
- },
1026
- 'vira-pink-foreground-placeholder': {
1027
- foreground: viraColorPalette['vira-pink-60'],
1028
- background: 'black',
1029
- },
1030
- 'vira-pink-foreground-decoration': {
1031
- foreground: viraColorPalette['vira-pink-80'],
1032
- background: 'black',
1033
- },
1034
- 'vira-pink-foreground-invisible': {
1035
- foreground: viraColorPalette['vira-pink-90'],
1036
- background: 'black',
1037
- },
1038
- 'vira-pink-background-body': {
1039
- foreground: 'black',
1040
- background: viraColorPalette['vira-pink-20'],
1041
- },
1042
- 'vira-pink-background-header': {
1043
- foreground: 'black',
1044
- background: viraColorPalette['vira-pink-50'],
1045
- },
1046
- 'vira-pink-background-placeholder': {
1047
- foreground: 'black',
1048
- background: viraColorPalette['vira-pink-60'],
1049
- },
1050
- 'vira-pink-background-decoration': {
1051
- foreground: 'black',
1052
- background: viraColorPalette['vira-pink-80'],
1053
- },
1054
- 'vira-pink-background-invisible': {
1055
- foreground: 'black',
1056
- background: viraColorPalette['vira-pink-90'],
1057
- },
1058
- 'vira-pink-on-self-body': {
1059
- foreground: viraColorPalette['vira-pink-10'],
1060
- background: '#6f0050',
1061
- },
1062
- 'vira-pink-on-self-header': {
1063
- foreground: viraColorPalette['vira-pink-40'],
1064
- background: '#6f0050',
1065
- },
1066
- 'vira-pink-on-self-placeholder': {
1067
- background: '#6f0050',
1068
- },
1069
- 'vira-pink-on-self-decoration': {
1070
- foreground: viraColorPalette['vira-pink-70'],
1071
- background: '#6f0050',
1072
- },
1073
- 'vira-pink-on-self-invisible': {
1074
- foreground: viraColorPalette['vira-pink-80'],
1075
- background: '#6f0050',
1076
- },
1077
- 'vira-grey-foreground-body': {
1078
- foreground: viraColorPalette['vira-grey-20'],
1079
- background: 'black',
1080
- },
1081
- 'vira-grey-foreground-header': {
1082
- background: 'black',
1083
- },
1084
- 'vira-grey-foreground-placeholder': {
1085
- foreground: viraColorPalette['vira-grey-60'],
1086
- background: 'black',
1087
- },
1088
- 'vira-grey-foreground-decoration': {
1089
- foreground: viraColorPalette['vira-grey-80'],
1090
- background: 'black',
1091
- },
1092
- 'vira-grey-foreground-invisible': {
1093
- foreground: viraColorPalette['vira-grey-90'],
1094
- background: 'black',
1095
- },
1096
- 'vira-grey-background-body': {
1097
- foreground: 'black',
1098
- background: viraColorPalette['vira-grey-20'],
1099
- },
1100
- 'vira-grey-background-header': {
1101
- foreground: 'black',
1102
- background: viraColorPalette['vira-grey-50'],
1103
- },
1104
- 'vira-grey-background-placeholder': {
1105
- foreground: 'black',
1106
- background: viraColorPalette['vira-grey-60'],
1107
- },
1108
- 'vira-grey-background-decoration': {
1109
- foreground: 'black',
1110
- background: viraColorPalette['vira-grey-80'],
1111
- },
1112
- 'vira-grey-background-invisible': {
1113
- foreground: 'black',
1114
- background: viraColorPalette['vira-grey-90'],
1115
- },
1116
- 'vira-grey-on-self-body': {
1117
- foreground: viraColorPalette['vira-grey-10'],
1118
- background: '#3d3d43',
1119
- },
1120
- 'vira-grey-on-self-header': {
1121
- foreground: viraColorPalette['vira-grey-40'],
1122
- background: '#3d3d43',
1123
- },
1124
- 'vira-grey-on-self-placeholder': {
1125
- foreground: viraColorPalette['vira-grey-50'],
1126
- background: '#3d3d43',
1127
- },
1128
- 'vira-grey-on-self-decoration': {
1129
- foreground: viraColorPalette['vira-grey-70'],
1130
- background: '#3d3d43',
1131
- },
1132
- 'vira-grey-on-self-invisible': {
1133
- foreground: viraColorPalette['vira-grey-80'],
1134
- background: '#3d3d43',
1135
- },
1136
- },
1137
- });