genesys-react-components 0.2.4-no-jira-peer-deps.193 → 0.3.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/README.md +24 -1
  2. package/build/index.js +105 -13
  3. package/build/index.js.map +1 -1
  4. package/package.json +53 -52
  5. package/src/alertblock/AlertBlock.scss +1 -1
  6. package/src/copybutton/CopyButton.scss +1 -1
  7. package/src/dxaccordion/DxAccordion.scss +6 -3
  8. package/src/dxbutton/DxButton.scss +26 -23
  9. package/src/dxitemgroup/DxCheckbox.scss +22 -17
  10. package/src/dxitemgroup/dropdown.scss +11 -9
  11. package/src/dxitemgroup/multiselect.scss +12 -9
  12. package/src/dxlabel/DxLabel.scss +5 -3
  13. package/src/dxtabbedcontent/DxTabbedContent.scss +6 -4
  14. package/src/dxtextbox/DxTextbox.scss +15 -12
  15. package/src/dxtoggle/DxToggle.scss +15 -11
  16. package/src/loadingplaceholder/LoadingPlaceholder.scss +3 -2
  17. package/src/loadingplaceholder/LoadingPlaceholder.tsx +94 -1
  18. package/src/theme/fonts/roboto-v29-latin-300.woff +0 -0
  19. package/src/theme/fonts/roboto-v29-latin-300.woff2 +0 -0
  20. package/src/theme/fonts/roboto-v29-latin-300italic.woff +0 -0
  21. package/src/theme/fonts/roboto-v29-latin-300italic.woff2 +0 -0
  22. package/src/theme/fonts/roboto-v29-latin-700.woff +0 -0
  23. package/src/theme/fonts/roboto-v29-latin-700.woff2 +0 -0
  24. package/src/theme/fonts/roboto-v29-latin-700italic.woff +0 -0
  25. package/src/theme/fonts/roboto-v29-latin-700italic.woff2 +0 -0
  26. package/src/theme/fonts/roboto-v29-latin-italic.woff +0 -0
  27. package/src/theme/fonts/roboto-v29-latin-italic.woff2 +0 -0
  28. package/src/theme/fonts/roboto-v29-latin-regular.woff +0 -0
  29. package/src/theme/fonts/roboto-v29-latin-regular.woff2 +0 -0
  30. package/src/theme/roboto.scss +65 -0
  31. package/src/theme/scrollbars.scss +49 -0
  32. package/src/theme/typography.scss +184 -0
  33. package/src/theme/variables.scss +413 -0
package/src/theme/variables.scss ADDED
@@ -0,0 +1,413 @@
1
+ /***
2
+ * Core colors
3
+ ***/
4
+ $--theme-core-text-color: --theme-core-text-color;
5
+ $--theme-core-background-color: --theme-core-background-color;
6
+ $--theme-core-box-shadow-color: --theme-core-box-shadow-color;
7
+ $--theme-core-layout-border-color: --theme-core-layout-border-color;
8
+ $--theme-core-input-border-color: --theme-core-input-border-color;
9
+ $--theme-core-selection-color: --theme-core-selection-color;
10
+ $--theme-core-control-text-color: --theme-core-control-text-color;
11
+ $--theme-core-control-background-color: --theme-core-control-background-color;
12
+ $--theme-core-control-alt-background-color: --theme-core-control-alt-background-color;
13
+ $--theme-core-control-punch-color: --theme-core-control-punch-color;
14
+ $--theme-core-control-hover-background-color: --theme-core-control-hover-background-color;
15
+ $--theme-core-control-border-color: --theme-core-control-border-color;
16
+ $--theme-core-control-focus-color: --theme-core-control-focus-color;
17
+ $--theme-core-control-label-color: --theme-core-control-label-color;
18
+ $--theme-core-control-textbox-text-color: --theme-core-control-textbox-text-color;
19
+ $--theme-core-control-textbox-placeholder-text-color: --theme-core-control-textbox-placeholder-text-color;
20
+ $--theme-core-control-textbox-background-color: --theme-core-control-textbox-background-color;
21
+ $--theme-core-control-textbox-border-color: --theme-core-control-textbox-border-color;
22
+ $--theme-core-control-disabled-background-color: --theme-core-control-disabled-background-color;
23
+ $--theme-core-control-disabled-text-color: --theme-core-control-disabled-text-color;
24
+ $--theme-core-control-disabled-border-color: --theme-core-control-disabled-border-color;
25
+ $--theme-core-tag-background-color: --theme-core-tag-background-color;
26
+ $--theme-core-tag-text-color: --theme-core-tag-text-color;
27
+ $--theme-core-punch-color: --theme-core-punch-color;
28
+ $--theme-core-punch-text-color: --theme-core-punch-text-color;
29
+ $--theme-core-star-color: --theme-core-star-color;
30
+ $--theme-core-link-color: --theme-core-link-color;
31
+ $--theme-core-link-hover-color: --theme-core-link-hover-color;
32
+ $--theme-core-code-color: --theme-core-code-color;
33
+ $--theme-core-code-background-color: --theme-core-code-background-color;
34
+ $--theme-core-heading-color: --theme-core-heading-color;
35
+ $--theme-core-heading-seven-color: --theme-core-heading-seven-color;
36
+ $--theme-core-expando-button-color: --theme-core-expando-button-color;
37
+ $--theme-core-nav-line-color: --theme-core-nav-line-color;
38
+ $--theme-core-nav-level-1-color: --theme-core-nav-level-1-color;
39
+ $--theme-core-nav-level-1-color-selected: --theme-core-nav-level-1-color-selected;
40
+ $--theme-core-nav-level-2-color: --theme-core-nav-level-2-color;
41
+ $--theme-core-nav-level-2-color-selected: --theme-core-nav-level-2-color-selected;
42
+ $--theme-core-nav-level-3-color: --theme-core-nav-level-3-color;
43
+ $--theme-core-nav-level-3-color-selected: --theme-core-nav-level-3-color-selected;
44
+ $--theme-core-nav-level-3-background-color-selected: --theme-core-nav-level-3-background-color-selected;
45
+ $--theme-core-nav-level-4-color: --theme-core-nav-level-4-color;
46
+ $--theme-core-nav-level-4-color-selected: --theme-core-nav-level-4-color-selected;
47
+ $--theme-core-nav-level-4-background-color-selected: --theme-core-nav-level-4-background-color-selected;
48
+ $--theme-core-scrollbar-color: --theme-core-scrollbar-color;
49
+ $--theme-core-footer-background-color: --theme-core-footer-background-color;
50
+ $--theme-core-footer-border-color: --theme-core-footer-border-color;
51
+ $--theme-core-footer-text-color: --theme-core-footer-text-color;
52
+
53
+ /***
54
+ * Component-specific properties
55
+ ***/
56
+
57
+ // AlertBlock
58
+ $--theme-alertblock-default-text-color: --theme-alertblock-default-text-color;
59
+ $--theme-alertblock-default-background-color: --theme-alertblock-default-background-color;
60
+ $--theme-alertblock-default-border-color: --theme-alertblock-default-border-color;
61
+ $--theme-alertblock-default-icon-color: --theme-alertblock-default-icon-color;
62
+
63
+ $--theme-alertblock-info-text-color: --theme-alertblock-info-text-color;
64
+ $--theme-alertblock-info-background-color: --theme-alertblock-info-background-color;
65
+ $--theme-alertblock-info-border-color: --theme-alertblock-info-border-color;
66
+ $--theme-alertblock-info-icon-color: --theme-alertblock-info-icon-color;
67
+
68
+ $--theme-alertblock-warning-text-color: --theme-alertblock-warning-text-color;
69
+ $--theme-alertblock-warning-background-color: --theme-alertblock-warning-background-color;
70
+ $--theme-alertblock-warning-border-color: --theme-alertblock-warning-border-color;
71
+ $--theme-alertblock-warning-icon-color: --theme-alertblock-warning-icon-color;
72
+
73
+ $--theme-alertblock-critical-text-color: --theme-alertblock-critical-text-color;
74
+ $--theme-alertblock-critical-background-color: --theme-alertblock-critical-background-color;
75
+ $--theme-alertblock-critical-border-color: --theme-alertblock-critical-border-color;
76
+ $--theme-alertblock-critical-icon-color: --theme-alertblock-critical-icon-color;
77
+
78
+ $--theme-alertblock-success-text-color: --theme-alertblock-success-text-color;
79
+ $--theme-alertblock-success-background-color: --theme-alertblock-success-background-color;
80
+ $--theme-alertblock-success-border-color: --theme-alertblock-success-border-color;
81
+ $--theme-alertblock-success-icon-color: --theme-alertblock-success-icon-color;
82
+
83
+ $--theme-alertblock-toast-text-color: --theme-alertblock-toast-text-color;
84
+ $--theme-alertblock-toast-background-color: --theme-alertblock-toast-background-color;
85
+ $--theme-alertblock-toast-border-color: --theme-alertblock-toast-border-color;
86
+ $--theme-alertblock-toast-icon-color: --theme-alertblock-toast-icon-color;
87
+
88
+ // Card
89
+ $--theme-card-text-color: --theme-card-text-color;
90
+ $--theme-card-background-color: --theme-card-background-color;
91
+ $--theme-card-border-color: --theme-card-border-color;
92
+ $--theme-card-image-background-color: --theme-card-image-background-color;
93
+ $--theme-card-icon-color: --theme-card-icon-color;
94
+
95
+ // CodeFence
96
+ $--theme-codefence-header-background-color: --theme-codefence-header-background-color;
97
+ $--theme-codefence-header-text-color: --theme-codefence-header-text-color;
98
+ $--theme-codefence-background-color: --theme-codefence-background-color;
99
+ $--theme-codefence-border-color: --theme-codefence-border-color;
100
+
101
+ // DataTable
102
+ $--theme-datatable-background-color: --theme-datatable-background-color;
103
+ $--theme-datatable-text-color: --theme-datatable-text-color;
104
+ $--theme-datatable-border-color: --theme-datatable-border-color;
105
+ $--theme-datatable-filter-background-color: --theme-datatable-filter-background-color;
106
+
107
+ // DxButton
108
+ $--theme-dxbutton-primary-background-color: --theme-dxbutton-primary-background-color;
109
+ $--theme-dxbutton-primary-text-color: --theme-dxbutton-primary-text-color;
110
+ $--theme-dxbutton-primary-shadow-color: --theme-dxbutton-primary-shadow-color;
111
+ $--theme-dxbutton-primary-hover-background-color: --theme-dxbutton-primary-hover-background-color;
112
+ $--theme-dxbutton-primary-disabled-background-color: --theme-dxbutton-primary-disabled-background-color;
113
+ $--theme-dxbutton-secondary-background-color: --theme-dxbutton-secondary-background-color;
114
+ $--theme-dxbutton-secondary-border-color: --theme-dxbutton-secondary-border-color;
115
+ $--theme-dxbutton-secondary-shadow-color: --theme-dxbutton-secondary-shadow-color;
116
+ $--theme-dxbutton-secondary-hover-border-color: --theme-dxbutton-secondary-hover-border-color;
117
+ $--theme-dxbutton-secondary-disabled-text-color: --theme-dxbutton-secondary-disabled-text-color;
118
+ $--theme-dxbutton-secondary-disabled-background-color: --theme-dxbutton-secondary-disabled-background-color;
119
+
120
+ // DxCheckbox
121
+ $--theme-dxcheckbox-text-color: --theme-dxcheckbox-text-color;
122
+ $--theme-dxcheckbox-border-color: --theme-dxcheckbox-border-color;
123
+ $--theme-dxcheckbox-background-color: --theme-dxcheckbox-background-color;
124
+ $--theme-dxcheckbox-hover-color: --theme-dxcheckbox-hover-color;
125
+ $--theme-dxcheckbox-outline-color: --theme-dxcheckbox-outline-color;
126
+ $--theme-dxcheckbox-disabled-border-color: --theme-dxcheckbox-disabled-border-color;
127
+
128
+ // Feedback
129
+ $--theme-feedback-text-color: --theme-feedback-text-color;
130
+ $--theme-feedback-background-color: --theme-feedback-background-color;
131
+ $--theme-feedback-border-color: --theme-feedback-border-color;
132
+
133
+ // LoadingPlaceholder
134
+ $--theme-loadingplaceholder-text-color: --theme-loadingplaceholder-text-color;
135
+ $--theme-loadingplaceholder-wave-color: --theme-loadingplaceholder-wave-color;
136
+
137
+ // PrivacyBanner
138
+ $--theme-privacybanner-background-color: --theme-privacybanner-background-color;
139
+ $--theme-privacybanner-border-color: --theme-privacybanner-border-color;
140
+
141
+ // Toolbox
142
+ $--theme-toolbox-background-color: --theme-toolbox-background-color;
143
+ $--theme-toolbox-border-color: --theme-toolbox-border-color;
144
+
145
+ /***
146
+ * Theme definitions
147
+ ***/
148
+
149
+ $theme-vars: (
150
+ // Core
151
+ $--theme-core-text-color: #272d2d,
152
+ $--theme-core-background-color: #ffffff,
153
+ $--theme-core-box-shadow-color: #c1cad688,
154
+ $--theme-core-layout-border-color: #dfe9f1,
155
+ $--theme-core-input-border-color: #c6cbd1,
156
+ $--theme-core-selection-color: #009fc736,
157
+ $--theme-core-control-text-color: #272d2d,
158
+ $--theme-core-control-background-color: #ffffff,
159
+ $--theme-core-control-alt-background-color: #ffffff,
160
+ $--theme-core-control-punch-color: #419bb2,
161
+ $--theme-core-control-hover-background-color: #f5f8fb,
162
+ $--theme-core-control-border-color: #c6cbd1,
163
+ $--theme-core-control-focus-color: #aac9ff,
164
+ $--theme-core-control-label-color: #75757a,
165
+ $--theme-core-control-textbox-text-color: #272d2d,
166
+ $--theme-core-control-textbox-background-color: #ffffff,
167
+ $--theme-core-control-textbox-border-color: #c6cbd1,
168
+ $--theme-core-control-textbox-placeholder-text-color: #757576,
169
+ $--theme-core-control-disabled-background-color: #9aafb5,
170
+ $--theme-core-control-disabled-text-color: #8a9a9e,
171
+ $--theme-core-control-disabled-border-color: #e8eaed,
172
+ $--theme-core-tag-background-color: #1ca2ab,
173
+ $--theme-core-tag-text-color: #ffffff,
174
+ $--theme-core-punch-color: #ff4f1f,
175
+ $--theme-core-punch-text-color: #ffffff,
176
+ $--theme-core-star-color: #fba10f,
177
+ $--theme-core-link-color: #2f7bb1,
178
+ $--theme-core-link-hover-color: #1c5176,
179
+ $--theme-core-code-color: #8452cf,
180
+ $--theme-core-code-background-color: #eff0f5,
181
+ $--theme-core-heading-color: #272d2d,
182
+ $--theme-core-heading-seven-color: #2f7bb1,
183
+ $--theme-core-expando-button-color: #2f7bb1,
184
+ $--theme-core-nav-line-color: #d1dce4,
185
+ $--theme-core-nav-level-1-color: #4d5061,
186
+ $--theme-core-nav-level-1-color-selected: #2f7bb1,
187
+ $--theme-core-nav-level-2-color: #6b7480,
188
+ $--theme-core-nav-level-2-color-selected: #2f7bb1,
189
+ $--theme-core-nav-level-3-color: #6b7480,
190
+ $--theme-core-nav-level-3-color-selected: #6b7480,
191
+ $--theme-core-nav-level-3-background-color-selected: #f5f8fb,
192
+ $--theme-core-nav-level-4-color: #6b7480,
193
+ $--theme-core-nav-level-4-color-selected: #6b7480,
194
+ $--theme-core-nav-level-4-background-color-selected: #dfe9f1,
195
+ $--theme-core-scrollbar-color: #b0b2b5,
196
+ $--theme-core-footer-background-color: #f9fbfc,
197
+ $--theme-core-footer-border-color: #e5e5e5,
198
+ $--theme-core-footer-text-color: #54565a,
199
+ // AlertBlock
200
+ $--theme-alertblock-default-text-color: #4d5061,
201
+ $--theme-alertblock-default-background-color: #ffffff,
202
+ $--theme-alertblock-default-border-color: #d2d3d7,
203
+ $--theme-alertblock-default-icon-color: #4d5061,
204
+ $--theme-alertblock-info-text-color: #4d5061,
205
+ $--theme-alertblock-info-background-color: #eaf2f7,
206
+ $--theme-alertblock-info-border-color: #2f7bb1,
207
+ $--theme-alertblock-info-icon-color: #2f7bb1,
208
+ $--theme-alertblock-warning-text-color: #4d5061,
209
+ $--theme-alertblock-warning-background-color: #fff8eb,
210
+ $--theme-alertblock-warning-border-color: #fbbe3b,
211
+ $--theme-alertblock-warning-icon-color: #fbbe3b,
212
+ $--theme-alertblock-critical-text-color: #4d5061,
213
+ $--theme-alertblock-critical-background-color: #faebeb,
214
+ $--theme-alertblock-critical-border-color: #cc3336,
215
+ $--theme-alertblock-critical-icon-color: #cc3336,
216
+ $--theme-alertblock-success-text-color: #4d5061,
217
+ $--theme-alertblock-success-background-color: #d2dfd8,
218
+ $--theme-alertblock-success-border-color: #24a357,
219
+ $--theme-alertblock-success-icon-color: #69a358,
220
+ $--theme-alertblock-toast-text-color: #4d5061,
221
+ $--theme-alertblock-toast-background-color: #def0fd,
222
+ $--theme-alertblock-toast-border-color: #2f7bb1,
223
+ $--theme-alertblock-toast-icon-color: #2f7bb1,
224
+ // Card
225
+ $--theme-card-text-color: #54565a,
226
+ $--theme-card-background-color: #ffffff,
227
+ $--theme-card-border-color: #d2d3d7,
228
+ $--theme-card-image-background-color: #f2f5f9,
229
+ $--theme-card-icon-color: #ff4f1f,
230
+ // CodeFence
231
+ $--theme-codefence-header-background-color: #272d2d,
232
+ $--theme-codefence-header-text-color: #eaeaea,
233
+ $--theme-codefence-background-color: #343538,
234
+ $--theme-codefence-border-color: #54565a,
235
+ // DataTable
236
+ $--theme-datatable-background-color: unset,
237
+ $--theme-datatable-text-color: unset,
238
+ $--theme-datatable-border-color: #cfdfeb,
239
+ $--theme-datatable-filter-background-color: #f9fbfc,
240
+ // DxButton
241
+ $--theme-dxbutton-primary-background-color: #419bb2,
242
+ $--theme-dxbutton-primary-text-color: #ffffff,
243
+ $--theme-dxbutton-primary-shadow-color: #aac9ff,
244
+ $--theme-dxbutton-primary-hover-background-color: #317b8d,
245
+ $--theme-dxbutton-primary-disabled-background-color: #9aafb540,
246
+ $--theme-dxbutton-secondary-background-color: #ffffff,
247
+ $--theme-dxbutton-secondary-border-color: #419bb2,
248
+ $--theme-dxbutton-secondary-shadow-color: #aac9ff,
249
+ $--theme-dxbutton-secondary-hover-border-color: #317b8d,
250
+ $--theme-dxbutton-secondary-disabled-text-color: #8a9a9e,
251
+ $--theme-dxbutton-secondary-disabled-background-color: #e0e6e8,
252
+ // DxCheckbox
253
+ $--theme-dxcheckbox-text-color: #75757a,
254
+ $--theme-dxcheckbox-border-color: #8a96a3,
255
+ $--theme-dxcheckbox-background-color: #ffffff,
256
+ $--theme-dxcheckbox-hover-color: #4d5061,
257
+ $--theme-dxcheckbox-outline-color: #aac9ff,
258
+ $--theme-dxcheckbox-disabled-border-color: #e8eaed,
259
+ // Feedback
260
+ $--theme-feedback-text-color: #272d2d,
261
+ $--theme-feedback-background-color: #ffffff,
262
+ $--theme-feedback-border-color: #d2d3d7,
263
+ // LoadingPlaceholder
264
+ $--theme-loadingplaceholder-text-color: #009fc7,
265
+ $--theme-loadingplaceholder-wave-color: #009fc7,
266
+ // PrivacyBanner
267
+ $--theme-privacybanner-background-color: #f5f8fb,
268
+ $--theme-privacybanner-border-color: #2f7bb1,
269
+ // Toolbox
270
+ $--theme-toolbox-background-color: #ffffff,
271
+ $--theme-toolbox-border-color: #c6cbd1
272
+ );
273
+
274
+ $theme-vars-dark: (
275
+ // Core
276
+ // Original UX colors
277
+ // $--theme-core-text-color: #eff0f5,
278
+ // $--theme-core-background-color: #4d4f53,
279
+ // I went a shade darker to reduce the brightness of the text, retaining WCAG AAA contrast between the text and background
280
+ $--theme-core-text-color: #c8c8c8,
281
+ $--theme-core-background-color: #37383a,
282
+ $--theme-core-box-shadow-color: #2d2d2d,
283
+ $--theme-core-layout-border-color: #68686e,
284
+ $--theme-core-input-border-color: #ffffff,
285
+ $--theme-core-selection-color: #00ebd336,
286
+ $--theme-core-control-text-color: #c8c8c8,
287
+ $--theme-core-control-background-color: #0f1111,
288
+ $--theme-core-control-punch-color: #00ebd3,
289
+ $--theme-core-control-hover-background-color: #191d1d,
290
+ $--theme-core-control-alt-background-color: #272727,
291
+ $--theme-core-control-border-color: #75757a,
292
+ $--theme-core-control-focus-color: #1ab7ff,
293
+ $--theme-core-control-label-color: #def0fd,
294
+ $--theme-core-control-textbox-text-color: #eff0f5,
295
+ $--theme-core-control-textbox-background-color: #6e6e75,
296
+ $--theme-core-control-textbox-border-color: #c6cbd1,
297
+ $--theme-core-control-textbox-placeholder-text-color: #999999,
298
+ $--theme-core-control-disabled-background-color: #c1cad688,
299
+ $--theme-core-control-disabled-text-color: #959699,
300
+ $--theme-core-control-disabled-border-color: #e8eaed,
301
+ $--theme-core-tag-background-color: #ffb3f7,
302
+ $--theme-core-tag-text-color: #2d2d2d,
303
+ $--theme-core-punch-color: #ff4f1f,
304
+ $--theme-core-punch-text-color: #2d2d2d,
305
+ $--theme-core-star-color: #fba10f,
306
+ $--theme-core-link-color: #00ebd3,
307
+ $--theme-core-link-hover-color: #00b7a4,
308
+ $--theme-core-code-color: #ffb3f7,
309
+ $--theme-core-code-background-color: #2d2d2d,
310
+ $--theme-core-heading-color: #c8c8c8,
311
+ $--theme-core-heading-seven-color: #a4eeff,
312
+ $--theme-core-expando-button-color: #5edbf7,
313
+ $--theme-core-nav-line-color: #d1dce4,
314
+ $--theme-core-nav-level-1-color: #eff0f5,
315
+ $--theme-core-nav-level-1-color-selected: #5edbf7,
316
+ $--theme-core-nav-level-2-color: #f5f8fb,
317
+ $--theme-core-nav-level-2-color-selected: #5edbf7,
318
+ $--theme-core-nav-level-3-color: #f5f8fb,
319
+ $--theme-core-nav-level-3-color-selected: #f5f8fb,
320
+ $--theme-core-nav-level-3-background-color-selected: #75757a,
321
+ $--theme-core-nav-level-4-color: #f5f8fb,
322
+ $--theme-core-nav-level-4-color-selected: #f5f8fb,
323
+ $--theme-core-nav-level-4-background-color-selected: #6b6b7c,
324
+ $--theme-core-scrollbar-color: #c8c8c8,
325
+ // AlertBlock
326
+ $--theme-alertblock-default-text-color: #c8c8c8,
327
+ $--theme-alertblock-default-background-color: #4d5061,
328
+ $--theme-alertblock-default-border-color: #75757a,
329
+ $--theme-alertblock-default-icon-color: #4d5061,
330
+ $--theme-alertblock-info-text-color: #c8c8c8,
331
+ $--theme-alertblock-info-background-color: #4d5061,
332
+ $--theme-alertblock-info-border-color: #5edbf7,
333
+ $--theme-alertblock-info-icon-color: #5edbf7,
334
+ $--theme-alertblock-warning-text-color: #c8c8c8,
335
+ $--theme-alertblock-warning-background-color: #4d5061,
336
+ $--theme-alertblock-warning-border-color: #fbbe3b,
337
+ $--theme-alertblock-warning-icon-color: #fbbe3b,
338
+ $--theme-alertblock-critical-text-color: #c8c8c8,
339
+ $--theme-alertblock-critical-background-color: #4d5061,
340
+ $--theme-alertblock-critical-border-color: #ff0000,
341
+ $--theme-alertblock-critical-icon-color: #ff0000,
342
+ $--theme-alertblock-success-text-color: #c8c8c8,
343
+ $--theme-alertblock-success-background-color: #4d5061,
344
+ $--theme-alertblock-success-border-color: #29bc64,
345
+ $--theme-alertblock-success-icon-color: #29bc64,
346
+ $--theme-alertblock-toast-text-color: #c8c8c8,
347
+ $--theme-alertblock-toast-background-color: #4d5061,
348
+ $--theme-alertblock-toast-border-color: #5edbf7,
349
+ $--theme-alertblock-toast-icon-color: #5edbf7,
350
+ $--theme-core-footer-background-color: #2d2d2d,
351
+ $--theme-core-footer-border-color: #77787b,
352
+ $--theme-core-footer-text-color: #c8c8c8,
353
+ // Card
354
+ // frontpage lighter palette
355
+ // $--theme-card-text-color: #c8c8c8,
356
+ // $--theme-card-background-color: #3e3e42,
357
+ // $--theme-card-border-color: #75757a,
358
+ // standard card colors
359
+ $--theme-card-text-color: #c8c8c8,
360
+ $--theme-card-background-color: #2d2d2d,
361
+ $--theme-card-border-color: #75757a,
362
+ $--theme-card-image-background-color: #75757a,
363
+ $--theme-card-icon-color: #ff4f1f,
364
+ // CodeFence
365
+ $--theme-codefence-header-background-color: #414249,
366
+ $--theme-codefence-header-text-color: #c8c8c8,
367
+ $--theme-codefence-background-color: #2d2d2d,
368
+ $--theme-codefence-border-color: #54565a,
369
+ // DataTable
370
+ $--theme-datatable-background-color: unset,
371
+ $--theme-datatable-text-color: #c8c8c8,
372
+ $--theme-datatable-border-color: #959699,
373
+ $--theme-datatable-filter-background-color: #2d2d2d,
374
+ // DxButton
375
+ $--theme-dxbutton-primary-background-color: #00ebd3,
376
+ $--theme-dxbutton-primary-text-color: #4d4f53,
377
+ $--theme-dxbutton-primary-shadow-color: #1ab7ff,
378
+ $--theme-dxbutton-primary-hover-background-color: #00b7a4,
379
+ $--theme-dxbutton-primary-disabled-background-color: #c1cad688,
380
+ $--theme-dxbutton-secondary-background-color: #4d4f53,
381
+ $--theme-dxbutton-secondary-border-color: #00ebd3,
382
+ $--theme-dxbutton-secondary-shadow-color: #aac9ff,
383
+ $--theme-dxbutton-secondary-hover-border-color: #00b7a4,
384
+ $--theme-dxbutton-secondary-disabled-text-color: #959699,
385
+ $--theme-dxbutton-secondary-disabled-background-color: #2d2d2d,
386
+ // DxCheckbox
387
+ $--theme-dxcheckbox-text-color: #eff0f5,
388
+ $--theme-dxcheckbox-border-color: #8a96a3,
389
+ $--theme-dxcheckbox-background-color: #ffffff,
390
+ $--theme-dxcheckbox-hover-color: #4d5061,
391
+ $--theme-dxcheckbox-outline-color: #1ab7ff,
392
+ $--theme-dxcheckbox-disabled-border-color: #e8eaed,
393
+ // Feedback
394
+ $--theme-feedback-text-color: #c8c8c8,
395
+ $--theme-feedback-background-color: #4d5061,
396
+ $--theme-feedback-border-color: #75757a,
397
+ // LoadingPlaceholder
398
+ $--theme-loadingplaceholder-text-color: #5edbf7,
399
+ $--theme-loadingplaceholder-wave-color: #5edbf7,
400
+ // PrivacyBanner
401
+ $--theme-privacybanner-background-color: #4d5061,
402
+ $--theme-privacybanner-border-color: #75757a,
403
+ // Toolbox
404
+ $--theme-toolbox-background-color: #2d2d2d,
405
+ $--theme-toolbox-border-color: #75757a
406
+ );
407
+
408
+ // writeCssVars rewrites a map of SCSS vars as CSS vars
409
+ @mixin writeCssVars($map: ()) {
410
+ @each $key, $value in $map {
411
+ #{$key}: $value;
412
+ }
413
+ }