genesys-react-components 0.2.2 → 0.2.4-devengage-1548-theme-updates.199

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