@zohodesk/components 1.0.0-alpha-224 → 1.0.0-alpha-225

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 (64) hide show
  1. package/README.md +4 -0
  2. package/{es → assets}/Appearance/dark/mode/darkMode.module.css +2 -2
  3. package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +34 -0
  4. package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +42 -0
  5. package/{lib → assets}/Appearance/dark/themes/green/greenDarkCTATheme.module.css +10 -10
  6. package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +42 -0
  7. package/{es → assets}/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +10 -10
  8. package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +42 -0
  9. package/{lib → assets}/Appearance/dark/themes/red/redDarkCTATheme.module.css +10 -10
  10. package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css +42 -0
  11. package/{es → assets}/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +10 -10
  12. package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +42 -0
  13. package/{es → assets}/Appearance/default/mode/defaultMode.module.css +2 -2
  14. package/{es → assets}/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -0
  15. package/{es → assets}/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +7 -7
  16. package/{es → assets}/Appearance/default/themes/green/greenDefaultCTATheme.module.css +2 -2
  17. package/{lib → assets}/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +4 -4
  18. package/{es → assets}/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +0 -0
  19. package/{lib → assets}/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +3 -3
  20. package/{es → assets}/Appearance/default/themes/red/redDefaultCTATheme.module.css +7 -7
  21. package/{lib → assets}/Appearance/default/themes/red/redDefaultComponentTheme.module.css +3 -3
  22. package/{es → assets}/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +0 -0
  23. package/{es → assets}/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +3 -3
  24. package/es/AppContainer/AppContainer.js +6 -6
  25. package/es/Provider.js +22 -22
  26. package/es/Stencils/Stencils.module.css +4 -14
  27. package/lib/AppContainer/AppContainer.js +6 -6
  28. package/lib/Provider.js +22 -22
  29. package/lib/Stencils/Stencils.module.css +4 -14
  30. package/package.json +7 -7
  31. package/preprocess/componentAppearanceColors.js +24 -22
  32. package/preprocess/componentThemeColors.js +63 -59
  33. package/preprocess/ctaThemeColors.js +48 -42
  34. package/preprocess/json/componentAppearanceVariableJson.js +1341 -1510
  35. package/preprocess/json/componentThemeVariableJson.js +237 -254
  36. package/preprocess/json/ctaThemeVariableJson.js +198 -332
  37. package/es/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  38. package/es/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -42
  39. package/es/Appearance/dark/themes/green/greenDarkCTATheme.module.css +0 -34
  40. package/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -42
  41. package/es/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -42
  42. package/es/Appearance/dark/themes/red/redDarkCTATheme.module.css +0 -34
  43. package/es/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -42
  44. package/es/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -42
  45. package/es/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +0 -42
  46. package/es/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +0 -42
  47. package/es/Appearance/default/themes/red/redDefaultComponentTheme.module.css +0 -42
  48. package/lib/Appearance/dark/mode/darkMode.module.css +0 -356
  49. package/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +0 -34
  50. package/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +0 -42
  51. package/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +0 -42
  52. package/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +0 -34
  53. package/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +0 -42
  54. package/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css +0 -42
  55. package/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +0 -34
  56. package/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +0 -42
  57. package/lib/Appearance/default/mode/defaultMode.module.css +0 -356
  58. package/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +0 -34
  59. package/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +0 -42
  60. package/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css +0 -34
  61. package/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +0 -34
  62. package/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css +0 -34
  63. package/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +0 -34
  64. package/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +0 -42
package/preprocess/json/componentThemeVariableJson.js CHANGED
@@ -1,259 +1,242 @@
1
- /* sample color order =>
2
- --zdt_cta_variable_name,
3
- [['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']],
4
- [['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']], ['css comment name'] */
1
+ /* sample =>
2
+ {
3
+ "comment": "comment name",
4
+ "data": {
5
+ "--zdt_variable_name": {
6
+ 'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
7
+ 'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
8
+ },
9
+ {
10
+ "--zdt_variable_name": {
11
+ 'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
12
+ 'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
13
+ }
14
+ }
15
+ }
16
+ */
5
17
 
6
18
  const componentThemeVariables = [
7
- [
8
- 'stencil_dark_bg',
9
- [
10
- ['default'],
11
- [
12
- '#383f55',
13
- 'rgba(255, 255, 255, 0.07)',
14
- 'rgba(255, 255, 255, 0.07)',
15
- 'rgba(255, 255, 255, 0.07)',
16
- 'rgba(255, 255, 255, 0.07)'
17
- ]
18
- ],
19
- [['dark'], ['#383f55', '#383f55', '#383f55', '#383f55', '#383f55']],
20
- ['stencil']
21
- ],
22
- [
23
- 'stencil_dark_gradient_bg',
24
- [
25
- ['default'],
26
- [
27
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
28
- 'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
29
- 'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
30
- 'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
31
- 'linear-gradient(left, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)'
32
- ]
33
- ],
34
- [
35
- ['dark'],
36
- [
37
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
38
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
39
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
40
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)',
41
- 'linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)'
42
- ]
43
- ]
44
- ],
45
- [
46
- 'dropbox_dark_bg',
47
- [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
48
- [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
49
- ['dropbox']
50
- ],
51
- [
52
- 'listitem_dark_bg',
53
- [['default'], ['#383f57', '#1d2f33', '#332e24', '#34222d', '#313323']],
54
- [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']],
55
- ['listitem']
56
- ],
57
- [
58
- 'listitem_dark_text',
59
- [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
60
- [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
61
- ],
62
- [
63
- 'listitem_dark_effect_bg',
64
- [
65
- ['default'],
66
- [
67
- '#444a61',
68
- 'rgba(255, 255, 255, 0.12)',
69
- 'rgba(255, 255, 255, 0.12)',
70
- 'rgba(255, 255, 255, 0.12)',
71
- 'rgba(255, 255, 255, 0.12)'
72
- ]
73
- ],
74
- [['dark'], ['#262f3d', '#262f3d', '#262f3d', '#262f3d', '#262f3d']]
75
- ],
76
- [
77
- 'listitem_dark_active_bg',
78
- [['default'], ['#3b4d6d', '#2d484e', '#4b4335', '#4d3243', '#494c34']],
79
- [['dark'], ['#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d']]
80
- ],
81
- [
82
- 'listitem_dark_tickicon',
83
- [['default'], ['#6cbbfc', '#4ac064', '#ff6363', '#e57717', '#e8b923']],
84
- [['dark'], ['#479dff', '#45a159', '#e94f4f', '#ff801f', '#d79835']]
85
- ],
86
- [
87
- 'tag_dark_text',
88
- [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
89
- [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
90
- ['tag']
91
- ],
92
- [
93
- 'tag_dark_bg',
94
- [
95
- ['default'],
96
- [
97
- '#42485f',
98
- 'rgba(255, 255, 255, 0.07)',
99
- 'rgba(255, 255, 255, 0.07)',
100
- 'rgba(255, 255, 255, 0.07)',
101
- 'rgba(255, 255, 255, 0.07)'
102
- ]
103
- ],
104
- [['dark'], ['#42485f', '#42485f', '#42485f', '#42485f', '#42485f']]
105
- ],
106
- [
107
- 'tag_dark_hover_text',
108
- [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
109
- [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
110
- ],
111
- [
112
- 'tag_dark_hover_bg',
113
- [['default'], ['#503348', '#503348', '#503348', '#503348', '#503348']],
114
- [['dark'], ['#503348', '#503348', '#503348', '#503348', '#503348']]
115
- ],
116
- [
117
- 'tag_dark_close_bg',
118
- [['default'], ['#864654', '#864654', '#864654', '#864654', '#864654']],
119
- [['dark'], ['#864654', '#864654', '#864654', '#864654', '#864654']]
120
- ],
121
- [
122
- 'tag_dark_close_text',
123
- [['default'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']],
124
- [['dark'], ['#de3535', '#de3535', '#de3535', '#de3535', '#de3535']]
125
- ],
126
- [
127
- 'multiselect_dark_border',
128
- [
129
- ['default'],
130
- [
131
- '#4b5168',
132
- 'rgba(255, 255, 255, 0.2)',
133
- 'rgba(255, 255, 255, 0.2)',
134
- 'rgba(255, 255, 255, 0.2)',
135
- 'rgba(255, 255, 255, 0.2)'
136
- ]
137
- ],
138
- [['dark'], ['#4b5168', '#4b5168', '#4b5168', '#4b5168', '#4b5168']],
139
- ['multiselect']
140
- ],
141
- [
142
- 'multiselect_darkmsg_bg',
143
- [
144
- ['default'],
145
- [
146
- '#383f57',
147
- 'rgba(255, 255, 255, 0.02)',
148
- 'rgba(255, 255, 255, 0.02)',
149
- 'rgba(255, 255, 255, 0.02)',
150
- 'rgba(255, 255, 255, 0.02)'
151
- ]
152
- ],
153
- [['dark'], ['#232b38', '#232b38', '#232b38', '#232b38', '#232b38']]
154
- ],
155
- [
156
- 'multiselect_darkmsg_text',
157
- [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
158
- [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']]
159
- ],
160
- [
161
- 'multiselect_darkdelete_hover_text',
162
- [
163
- ['default'],
164
- [
165
- 'var(--dot_white)',
166
- 'var(--dot_white)',
167
- 'var(--dot_white)',
168
- 'var(--dot_white)',
169
- 'var(--dot_white)'
170
- ]
171
- ],
172
- [['dark'], ['#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6', '#e2e4e6']]
173
- ],
174
- [
175
- 'avatar_white_border',
176
- [
177
- ['default'],
178
- [
179
- 'var(--dot_shuttleGrey)',
180
- 'rgba(255, 255, 255, 0.2)',
181
- 'rgba(255, 255, 255, 0.2)',
182
- 'rgba(255, 255, 255, 0.2)',
183
- 'rgba(255, 255, 255, 0.2)'
184
- ]
185
- ],
186
- [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
187
- ['avatar']
188
- ],
189
- [
190
- 'avatar_white_text',
191
- [
192
- ['default'],
193
- [
194
- 'var(--dot_white)',
195
- 'var(--dot_white)',
196
- 'var(--dot_white)',
197
- 'var(--dot_white)',
198
- 'var(--dot_white)'
199
- ]
200
- ],
201
- [
202
- ['dark'],
203
- [
204
- 'var(--dot_white)',
205
- 'var(--dot_white)',
206
- 'var(--dot_white)',
207
- 'var(--dot_white)',
208
- 'var(--dot_white)'
209
- ]
210
- ]
211
- ],
212
- [
213
- 'label_dark_text',
214
- [['default'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
215
- [['dark'], ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']],
216
- ['label']
217
- ],
218
- [
219
- 'textbox_light_text',
220
- [
221
- ['default'],
222
- [
223
- 'var(--dot_white)',
224
- 'var(--dot_white)',
225
- 'var(--dot_white)',
226
- 'var(--dot_white)',
227
- 'var(--dot_white)'
228
- ]
229
- ],
230
- [
231
- ['dark'],
232
- [
233
- 'var(--dot_white)',
234
- 'var(--dot_white)',
235
- 'var(--dot_white)',
236
- 'var(--dot_white)',
237
- 'var(--dot_white)'
238
- ]
239
- ],
240
- ['textbox']
241
- ],
242
- [
243
- 'dropdown_darkheading_text',
244
- [
245
- ['default'],
246
- [
247
- 'var(--dot_white)',
248
- 'var(--dot_white)',
249
- 'var(--dot_white)',
250
- 'var(--dot_white)',
251
- 'var(--dot_white)'
252
- ]
253
- ],
254
- [['dark'], ['#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd', '#a8b0bd']],
255
- ['dropdown']
256
- ]
19
+ {
20
+ "comment": "stencil",
21
+ "data": {
22
+ "stencil_dark_bg": {
23
+ 'light': [
24
+ '#383f55',
25
+ 'rgba(255, 255, 255, 0.07)',
26
+ 'rgba(255, 255, 255, 0.07)',
27
+ 'rgba(255, 255, 255, 0.07)',
28
+ 'rgba(255, 255, 255, 0.07)'
29
+ ],
30
+ 'dark': ['#383f55', '#383f55', '#383f55', '#383f55', '#383f55']
31
+ },
32
+ "stencil_dark_gradient_bg": {
33
+ 'light': [
34
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
35
+ 'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
36
+ 'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
37
+ 'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)',
38
+ 'linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%)'
39
+ ],
40
+ 'dark': [
41
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
42
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
43
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
44
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)',
45
+ 'linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%)'
46
+ ]
47
+ }
48
+ }
49
+ },
50
+ {
51
+ "comment": "dropbox",
52
+ "data": {
53
+ "dropbox_dark_bg": {
54
+ 'light': ['var(--dot_unknown2)', '#1d2f33', '#332e24', '#34222d', '#313323'],
55
+ 'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
56
+ }
57
+ }
58
+ },
59
+ {
60
+ "comment": "listitem",
61
+ "data": {
62
+ "listitem_dark_bg": {
63
+ 'light': ['var(--dot_unknown2)', '#1d2f33', '#332e24', '#34222d', '#313323'],
64
+ 'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
65
+ },
66
+ "listitem_dark_text": {
67
+ 'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
68
+ 'dark': ['var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)']
69
+ },
70
+ "listitem_dark_effect_bg": {
71
+ 'light': [
72
+ '#444a61',
73
+ 'rgba(255, 255, 255, 0.12)',
74
+ 'rgba(255, 255, 255, 0.12)',
75
+ 'rgba(255, 255, 255, 0.12)',
76
+ 'rgba(255, 255, 255, 0.12)'
77
+ ],
78
+ 'dark': ['var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)', 'var(--dot_unknown1)']
79
+ },
80
+ "listitem_dark_active_bg": {
81
+ 'light': ['#3b4d6d', '#2d484e', '#4b4335', '#4d3243', '#494c34'],
82
+ 'dark': ['#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d', '#3b4d6d']
83
+ },
84
+ "listitem_dark_tickicon": {
85
+ 'light': ['#6cbbfc', 'var(--dot_darkmint)', '#ff6363', '#e57717', '#e8b923'],
86
+ 'dark': ['var(--dot_butterflyblue)', '#45a159', '#e94f4f', '#ff801f', '#d79835']
87
+ }
88
+ }
89
+ },
90
+ {
91
+ "comment": "tag",
92
+ "data": {
93
+ "tag_dark_text": {
94
+ 'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
95
+ 'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
96
+ },
97
+ "tag_dark_bg": {
98
+ 'light': [
99
+ '#42485f',
100
+ 'rgba(255, 255, 255, 0.07)',
101
+ 'rgba(255, 255, 255, 0.07)',
102
+ 'rgba(255, 255, 255, 0.07)',
103
+ 'rgba(255, 255, 255, 0.07)'
104
+ ],
105
+ 'dark': ['#42485f', '#42485f', '#42485f', '#42485f', '#42485f']
106
+ },
107
+ "tag_dark_hover_text": {
108
+ 'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
109
+ 'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
110
+ },
111
+ "tag_dark_hover_bg": {
112
+ 'light': ['var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)'],
113
+ 'dark': ['var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)', 'var(--dot_matterhorn)']
114
+ },
115
+ "tag_dark_close_bg": {
116
+ 'light': ['#864654', '#864654', '#864654', '#864654', '#864654'],
117
+ 'dark': ['#864654', '#864654', '#864654', '#864654', '#864654']
118
+ },
119
+ "tag_dark_close_text": {
120
+ 'light': ['var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)'],
121
+ 'dark': ['var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)', 'var(--dot_brightRed)']
122
+ }
123
+ }
124
+ },
125
+ {
126
+ "comment": "multiselect",
127
+ "data": {
128
+ "multiselect_dark_border": {
129
+ 'light': [
130
+ 'var(--dot_mulledwine)',
131
+ 'rgba(255, 255, 255, 0.2)',
132
+ 'rgba(255, 255, 255, 0.2)',
133
+ 'rgba(255, 255, 255, 0.2)',
134
+ 'rgba(255, 255, 255, 0.2)'
135
+ ],
136
+ 'dark': ['var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)', 'var(--dot_mulledwine)']
137
+ },
138
+ "multiselect_darkmsg_bg": {
139
+ 'light': [
140
+ 'var(--dot_unknown2)',
141
+ 'rgba(255, 255, 255, 0.02)',
142
+ 'rgba(255, 255, 255, 0.02)',
143
+ 'rgba(255, 255, 255, 0.02)',
144
+ 'rgba(255, 255, 255, 0.02)'
145
+ ],
146
+ 'dark': ['var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)', 'var(--dot_ebonyclay)']
147
+ },
148
+ "multiselect_darkmsg_text": {
149
+ 'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
150
+ 'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
151
+ },
152
+ "multiselect_darkdelete_hover_text": {
153
+ 'light': [
154
+ 'var(--dot_white)',
155
+ 'var(--dot_white)',
156
+ 'var(--dot_white)',
157
+ 'var(--dot_white)',
158
+ 'var(--dot_white)'
159
+ ],
160
+ 'dark': ['var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)', 'var(--dot_platinum)']
161
+ }
162
+ }
163
+ },
164
+ {
165
+ "comment": "avatar",
166
+ "data": {
167
+ "avatar_white_border": {
168
+ 'light': [
169
+ 'var(--dot_shuttleGrey)',
170
+ 'rgba(255, 255, 255, 0.2)',
171
+ 'rgba(255, 255, 255, 0.2)',
172
+ 'rgba(255, 255, 255, 0.2)',
173
+ 'rgba(255, 255, 255, 0.2)'
174
+ ],
175
+ 'dark': ['var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)']
176
+ },
177
+ "avatar_white_text": {
178
+ 'light': [
179
+ 'var(--dot_white)',
180
+ 'var(--dot_white)',
181
+ 'var(--dot_white)',
182
+ 'var(--dot_white)',
183
+ 'var(--dot_white)'
184
+ ],
185
+ 'dark': [
186
+ 'var(--dot_white)',
187
+ 'var(--dot_white)',
188
+ 'var(--dot_white)',
189
+ 'var(--dot_white)',
190
+ 'var(--dot_white)'
191
+ ]
192
+ }
193
+ }
194
+ },
195
+ {
196
+ "comment": "label",
197
+ "data": {
198
+ "label_dark_text": {
199
+ 'light': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4'],
200
+ 'dark': ['#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4', '#d0d0d4']
201
+ }
202
+ }
203
+ },
204
+ {
205
+ "comment": "textbox",
206
+ "data": {
207
+ "textbox_light_text": {
208
+ 'light': [
209
+ 'var(--dot_white)',
210
+ 'var(--dot_white)',
211
+ 'var(--dot_white)',
212
+ 'var(--dot_white)',
213
+ 'var(--dot_white)'
214
+ ],
215
+ 'dark': [
216
+ 'var(--dot_white)',
217
+ 'var(--dot_white)',
218
+ 'var(--dot_white)',
219
+ 'var(--dot_white)',
220
+ 'var(--dot_white)'
221
+ ]
222
+ }
223
+ }
224
+ },
225
+ {
226
+ "comment": "dropdown",
227
+ "data": {
228
+ "dropdown_darkheading_text": {
229
+ 'light': [
230
+ 'var(--dot_white)',
231
+ 'var(--dot_white)',
232
+ 'var(--dot_white)',
233
+ 'var(--dot_white)',
234
+ 'var(--dot_white)'
235
+ ],
236
+ 'dark': ['var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)', 'var(--dot_cadetblue)']
237
+ }
238
+ }
239
+ }
257
240
  ];
258
241
 
259
242
  module.exports = { componentThemeVariables: componentThemeVariables };