@zohodesk/components 1.0.0-temp-247 → 1.0.0-temp-243.1

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/assets/Appearance/dark/mode/Component_DarkMode.module.css +21 -21
  2. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +2 -2
  3. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +23 -23
  4. package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +2 -2
  5. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +23 -23
  6. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +2 -2
  7. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +23 -23
  8. package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +2 -2
  9. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +23 -23
  10. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +2 -2
  11. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +23 -23
  12. package/assets/Appearance/light/mode/Component_LightMode.module.css +20 -20
  13. package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +2 -2
  14. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +23 -23
  15. package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +2 -2
  16. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +23 -23
  17. package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +2 -2
  18. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +23 -23
  19. package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +2 -2
  20. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +23 -23
  21. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +2 -2
  22. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +23 -23
  23. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +21 -21
  24. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +2 -2
  25. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +23 -23
  26. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +2 -2
  27. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +23 -23
  28. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +2 -2
  29. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +23 -23
  30. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +2 -2
  31. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +23 -23
  32. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +2 -2
  33. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +23 -23
  34. package/package.json +2 -2
package/assets/Appearance/dark/mode/Component_DarkMode.module.css CHANGED
@@ -9,17 +9,17 @@
9
9
  --dot_listItemActive: var(--zdtm_cta_primary_light_bg_default_inverse_low);
10
10
 
11
11
  /* common */
12
- --zdt_disable_bg: hsla(217, calc(var(--zd-saturation) * 22.81%), 11.18, 0.5);
13
- --zdt_contrast_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
12
+ --zdt_disable_bg: hsla(217, calc(var(--zd-saturation) * 22.81%), 11.18%, 0.5);
13
+ --zdt_contrast_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
14
14
 
15
15
  /* avatar */
16
16
  --zdt_avatar_default_text: hsla(210, calc(var(--zd-saturation) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
17
  --zdt_avatar_default_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
18
18
  --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
19
19
  --zdt_avatar_default_borderHover: hsla(217, calc(var(--zd-saturation) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_avatar_default_boxshadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 0.14);
20
+ --zdt_avatar_default_boxshadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 0.14);
21
21
  --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
22
- --zdt_avatar_white_boxshadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.11);
22
+ --zdt_avatar_white_boxshadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.11);
23
23
  --zdt_avatar_secondary_bg: hsla(210, calc(var(--zd-saturation) * 7.41%), calc(89.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
24
24
  --zdt_avatar_info_bg: var(--dot_mirror);
25
25
 
@@ -31,7 +31,7 @@
31
31
  --zdt_avatarteam_secondary_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
32
32
  --zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
33
33
  --zdt_avatarteam_nofill_hover_border: hsla(217, calc(var(--zd-saturation) * 7.76%), calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
34
- --zdt_avatarteam_innerCircle: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
34
+ --zdt_avatarteam_innerCircle: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
35
35
 
36
36
  /* button */
37
37
  --zdt_button_default_text: var(--zdt_cta_alpha_text);
@@ -53,7 +53,7 @@
53
53
  --zdt_button_danger_text: hsla(0, calc(var(--zd-saturation) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
54
54
  --zdt_button_danger_hover_border: hsla(1, calc(var(--zd-saturation) * 63.86%), calc(48.82% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
55
55
  --zdt_button_danger_hover_text: hsla(1, calc(var(--zd-saturation) * 63.86%), calc(48.82% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
56
- --zdt_button_danger_box_shadow: hsla(355, calc(var(--zd-saturation) * 84.89%), 55.88, 0.3);
56
+ --zdt_button_danger_box_shadow: hsla(355, calc(var(--zd-saturation) * 84.89%), 55.88%, 0.3);
57
57
  --zdt_button_primaryfill_text: var(--zdt_cta_secondary_text);
58
58
  --zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
59
59
  --zdt_button_primaryfill_border: var(--dot_mirror);
@@ -86,7 +86,7 @@
86
86
  /* button group */
87
87
  --zdt_buttongroup_default_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
88
88
  --zdt_buttongroup_default_border: hsla(204, calc(var(--zd-saturation) * 10.64%), calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
89
- --zdt_buttongroup_footer_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.1);
89
+ --zdt_buttongroup_footer_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.1);
90
90
 
91
91
  /* checkbox */
92
92
  --zdt_checkbox_default_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
@@ -98,8 +98,8 @@
98
98
 
99
99
  /* dropbox */
100
100
  --zdt_dropbox_default_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
101
- --zdt_dropbox_default_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.5);
102
- --zdt_dropbox_arrow_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.1);
101
+ --zdt_dropbox_default_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.5);
102
+ --zdt_dropbox_arrow_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.1);
103
103
  --zdt_dropbox_mob_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
104
104
  --zdt_dropbox_mob_close_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(83.53% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
105
105
 
@@ -188,33 +188,33 @@
188
188
  --zdt_ribbon_default_bg: var(--dot_mirror);
189
189
  --zdt_ribbon_default_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(40.00% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
190
190
  --zdt_ribbon_default_tag_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(79.22% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
191
- --zdt_ribbon_default_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 40.00, 0.1);
191
+ --zdt_ribbon_default_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 40.00%, 0.1);
192
192
  --zdt_ribbon_default_stamp_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(40.00% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
193
193
  --zdt_ribbon_white_text: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
194
194
  --zdt_ribbon_white_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
195
195
  --zdt_ribbon_palette_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(40.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
196
196
  --zdt_ribbon_danger_bg: hsla(0, calc(var(--zd-saturation) * 100.00%), calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
197
197
  --zdt_ribbon_danger_text: hsla(0, calc(var(--zd-saturation) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
198
- --zdt_ribbon_danger_shadow: hsla(355, calc(var(--zd-saturation) * 84.89%), 55.88, 0.1);
198
+ --zdt_ribbon_danger_shadow: hsla(355, calc(var(--zd-saturation) * 84.89%), 55.88%, 0.1);
199
199
  --zdt_ribbon_danger_border: hsla(355, calc(var(--zd-saturation) * 84.89%), calc(55.88% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
200
200
  --zdt_ribbon_danger_stamp_bg: hsla(355, calc(var(--zd-saturation) * 84.89%), calc(55.88% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
201
201
  --zdt_ribbon_primary_bg: hsla(212, calc(var(--zd-saturation) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
202
202
  --zdt_ribbon_primary_text: hsla(212, calc(var(--zd-saturation) * 100.00%), calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
203
- --zdt_ribbon_primary_shadow: hsla(208, calc(var(--zd-saturation) * 84.96%), 55.69, 0.1);
203
+ --zdt_ribbon_primary_shadow: hsla(208, calc(var(--zd-saturation) * 84.96%), 55.69%, 0.1);
204
204
  --zdt_ribbon_primary_border: hsla(208, calc(var(--zd-saturation) * 84.96%), calc(55.69% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
205
205
  --zdt_ribbon_primary_stamp_bg: hsla(208, calc(var(--zd-saturation) * 84.96%), calc(55.69% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
206
206
  --zdt_ribbon_secondary_bg: hsla(123, calc(var(--zd-saturation) * 57.52%), calc(55.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
207
207
  --zdt_ribbon_secondary_text: hsla(123, calc(var(--zd-saturation) * 57.52%), calc(55.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
208
- --zdt_ribbon_secondary_shadow: hsla(130, calc(var(--zd-saturation) * 79.56%), 44.12, 0.1);
208
+ --zdt_ribbon_secondary_shadow: hsla(130, calc(var(--zd-saturation) * 79.56%), 44.12%, 0.1);
209
209
  --zdt_ribbon_secondary_border: hsla(130, calc(var(--zd-saturation) * 79.56%), calc(44.12% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
210
210
  --zdt_ribbon_secondary_stamp_bg: hsla(130, calc(var(--zd-saturation) * 79.56%), calc(44.12% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
211
211
  --zdt_ribbon_info_bg: hsla(28, calc(var(--zd-saturation) * 93.75%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
212
212
  --zdt_ribbon_info_text: hsla(28, calc(var(--zd-saturation) * 93.75%), calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
213
- --zdt_ribbon_info_shadow: hsla(28, calc(var(--zd-saturation) * 93.75%), 56.08, 0.1);
213
+ --zdt_ribbon_info_shadow: hsla(28, calc(var(--zd-saturation) * 93.75%), 56.08%, 0.1);
214
214
  --zdt_ribbon_info_border: hsla(28, calc(var(--zd-saturation) * 93.75%), calc(56.08% + var(--zdc_default_inverse_medium)), calc( 0.1 + var(--zdc_alpha_low)));
215
215
  --zdt_ribbon_info_stamp_bg: hsla(28, calc(var(--zd-saturation) * 93.75%), calc(56.08% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
216
216
  --zdt_ribbon_dark_bg: hsla(210, calc(var(--zd-saturation) * 7.41%), calc(89.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
217
- --zdt_ribbon_dark_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.2);
217
+ --zdt_ribbon_dark_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.2);
218
218
  --zdt_ribbon_dark_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc( 0.2 + var(--zdc_alpha_low)));
219
219
  --zdt_ribbon_dark_stamp_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(0.00% + var(--zdc_darker_low)), calc( 0.1 + var(--zdc_alpha_low)));
220
220
  --zdt_ribbon_plain_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(40.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -229,9 +229,9 @@
229
229
 
230
230
  /* switch */
231
231
  --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
232
- --zdt_switch_default_on_bg: hsla(133, calc(var(--zd-saturation) * 48.36%), 52.16, 1);
232
+ --zdt_switch_default_on_bg: hsla(133, calc(var(--zd-saturation) * 48.36%), 52.16%, 1);
233
233
  --zdt_switch_circle_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
234
- --zdt_switch_circle_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 46.67, 1);
234
+ --zdt_switch_circle_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 46.67%, 1);
235
235
  --zdt_switch_effect_off_bg: var(--zdtm_cta_grey_40_bg_default_inverse_low);
236
236
 
237
237
  /* textboxicon */
@@ -254,9 +254,9 @@
254
254
  --zdt_textarea_black_text: hsla(210, calc(var(--zd-saturation) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
255
255
 
256
256
  /* tooltip */
257
- --zdt_tooltip_default_bg: hsla(216, calc(var(--zd-saturation) * 22.98%), 31.57, 1);
258
- --zdt_tooltip_default_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
259
- --zdt_tooltip_default_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.35);
257
+ --zdt_tooltip_default_bg: hsla(216, calc(var(--zd-saturation) * 22.98%), 31.57%, 1);
258
+ --zdt_tooltip_default_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
259
+ --zdt_tooltip_default_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.35);
260
260
 
261
261
  /* select */
262
262
  --zdt_select_emptystate_text: hsla(217, calc(var(--zd-saturation) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -349,7 +349,7 @@
349
349
  /* tabs */
350
350
  --zdt_tabs_alpha_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
351
351
  --zdt_tabs_alpha_border: var(--zdtm_cta_grey_15_border_default_inverse_medium);
352
- --zdt_tabs_alpha_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00, 0.3);
352
+ --zdt_tabs_alpha_box_shadow: hsla(0, calc(var(--zd-saturation) * 0.00%), 0.00%, 0.3);
353
353
  --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
354
354
  --zdt_tabs_highlight_border: hsla(210, calc(var(--zd-saturation) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
355
355
 
package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --zdt_cta_primary_hover_bg: hsla(213, calc(var(--zd-saturation) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
7
  --zdt_cta_primary_border: hsla(212, calc(var(--zd-saturation) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
8
  --zdt_cta_primary_hover_border: hsla(213, calc(var(--zd-saturation) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_cta_primary_box_shadow: hsla(212, calc(var(--zd-saturation) * 91.84%), 48.04, 0.2);
10
- --zdt_cta_primary_hover_box_shadow: hsla(213, calc(var(--zd-saturation) * 100.00%), 36.08, 0.25);
9
+ --zdt_cta_primary_box_shadow: hsla(212, calc(var(--zd-saturation) * 91.84%), 48.04%, 0.2);
10
+ --zdt_cta_primary_hover_box_shadow: hsla(213, calc(var(--zd-saturation) * 100.00%), 36.08%, 0.25);
11
11
  --zdt_cta_primary_light_bg: hsla(213, calc(var(--zd-saturation) * 27.27%), calc(23.73% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
12
  --zdt_cta_primary_light_hover_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
13
  --zdt_cta_primary_light_border: hsla(208, calc(var(--zd-saturation) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,47 +1,47 @@
1
1
  [data-mode='dark'][data-theme='blue'] {
2
2
  /* stencil */
3
- --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65, 1);
3
+ --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65%, 1);
4
4
  --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%));
5
5
 
6
6
  /* dropbox */
7
- --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
7
+ --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
8
8
 
9
9
  /* listitem */
10
- --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
11
- --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
12
- --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41, 1);
13
- --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
14
- --zdt_listitem_dark_tickicon: hsla(212, calc(var(--zd-saturation) * 100.00%), 63.92, 1);
10
+ --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
11
+ --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
12
+ --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41%, 1);
13
+ --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94%, 1);
14
+ --zdt_listitem_dark_tickicon: hsla(212, calc(var(--zd-saturation) * 100.00%), 63.92%, 1);
15
15
 
16
16
  /* tag */
17
- --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
18
- --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57, 1);
19
- --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
20
- --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
21
- --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
22
- --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
17
+ --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
18
+ --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57%, 1);
19
+ --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
20
+ --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69%, 1);
21
+ --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00%, 1);
22
+ --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 1);
23
23
 
24
24
  /* multiselect */
25
- --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10, 1);
26
- --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
27
- --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
28
- --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
25
+ --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10%, 1);
26
+ --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
27
+ --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
28
+ --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
29
29
 
30
30
  /* avatar */
31
- --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
32
- --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
31
+ --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
32
+ --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
33
33
 
34
34
  /* label */
35
- --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
35
+ --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
36
36
 
37
37
  /* textbox */
38
- --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
38
+ --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
39
39
 
40
40
  /* dropdown */
41
- --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
41
+ --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
42
42
 
43
43
  /* focusscope */
44
- --zdt_a11y_focusScope_focus_border: hsla(212, calc(var(--zd-saturation) * 100.00%), 63.92, 1);
44
+ --zdt_a11y_focusScope_focus_border: hsla(212, calc(var(--zd-saturation) * 100.00%), 63.92%, 1);
45
45
 
46
46
  /* button */
47
47
  --zdt_button_primary_strike: hsla(212, calc(var(--zd-saturation) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --zdt_cta_primary_hover_bg: hsla(128, calc(var(--zd-saturation) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
7
  --zdt_cta_primary_border: hsla(133, calc(var(--zd-saturation) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
8
  --zdt_cta_primary_hover_border: hsla(128, calc(var(--zd-saturation) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_cta_primary_box_shadow: hsla(133, calc(var(--zd-saturation) * 63.29%), 40.59, 0.2);
10
- --zdt_cta_primary_hover_box_shadow: hsla(134, calc(var(--zd-saturation) * 78.63%), 25.69, 0.25);
9
+ --zdt_cta_primary_box_shadow: hsla(133, calc(var(--zd-saturation) * 63.29%), 40.59%, 0.2);
10
+ --zdt_cta_primary_hover_box_shadow: hsla(134, calc(var(--zd-saturation) * 78.63%), 25.69%, 0.25);
11
11
  --zdt_cta_primary_light_bg: hsla(191, calc(var(--zd-saturation) * 21.65%), calc(19.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
12
  --zdt_cta_primary_light_hover_bg: hsla(158, calc(var(--zd-saturation) * 26.83%), calc(24.12% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
13
  --zdt_cta_primary_light_border: hsla(158, calc(var(--zd-saturation) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,47 +1,47 @@
1
1
  [data-mode='dark'][data-theme='green'] {
2
2
  /* stencil */
3
- --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65, 1);
3
+ --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65%, 1);
4
4
  --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%));
5
5
 
6
6
  /* dropbox */
7
- --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
7
+ --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
8
8
 
9
9
  /* listitem */
10
- --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
11
- --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
12
- --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41, 1);
13
- --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
14
- --zdt_listitem_dark_tickicon: hsla(133, calc(var(--zd-saturation) * 40.00%), 45.10, 1);
10
+ --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
11
+ --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
12
+ --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41%, 1);
13
+ --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94%, 1);
14
+ --zdt_listitem_dark_tickicon: hsla(133, calc(var(--zd-saturation) * 40.00%), 45.10%, 1);
15
15
 
16
16
  /* tag */
17
- --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
18
- --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57, 1);
19
- --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
20
- --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
21
- --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
22
- --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
17
+ --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
18
+ --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57%, 1);
19
+ --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
20
+ --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69%, 1);
21
+ --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00%, 1);
22
+ --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 1);
23
23
 
24
24
  /* multiselect */
25
- --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10, 1);
26
- --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
27
- --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
28
- --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
25
+ --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10%, 1);
26
+ --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
27
+ --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
28
+ --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
29
29
 
30
30
  /* avatar */
31
- --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
32
- --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
31
+ --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
32
+ --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
33
33
 
34
34
  /* label */
35
- --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
35
+ --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
36
36
 
37
37
  /* textbox */
38
- --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
38
+ --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
39
39
 
40
40
  /* dropdown */
41
- --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
41
+ --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
42
42
 
43
43
  /* focusscope */
44
- --zdt_a11y_focusScope_focus_border: hsla(133, calc(var(--zd-saturation) * 40.00%), 45.10, 1);
44
+ --zdt_a11y_focusScope_focus_border: hsla(133, calc(var(--zd-saturation) * 40.00%), 45.10%, 1);
45
45
 
46
46
  /* button */
47
47
  --zdt_button_primary_strike: hsla(133, calc(var(--zd-saturation) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --zdt_cta_primary_hover_bg: hsla(29, calc(var(--zd-saturation) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
7
  --zdt_cta_primary_border: hsla(26, calc(var(--zd-saturation) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
8
  --zdt_cta_primary_hover_border: hsla(29, calc(var(--zd-saturation) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_cta_primary_box_shadow: hsla(28, calc(var(--zd-saturation) * 81.75%), 49.41, 0.2);
10
- --zdt_cta_primary_hover_box_shadow: hsla(30, calc(var(--zd-saturation) * 100.00%), 34.90, 0.25);
9
+ --zdt_cta_primary_box_shadow: hsla(28, calc(var(--zd-saturation) * 81.75%), 49.41%, 0.2);
10
+ --zdt_cta_primary_hover_box_shadow: hsla(30, calc(var(--zd-saturation) * 100.00%), 34.90%, 0.25);
11
11
  --zdt_cta_primary_light_bg: hsla(252, calc(var(--zd-saturation) * 4.85%), calc(20.20% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
12
  --zdt_cta_primary_light_hover_bg: hsla(19, calc(var(--zd-saturation) * 21.54%), calc(25.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
13
  --zdt_cta_primary_light_border: hsla(19, calc(var(--zd-saturation) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,47 +1,47 @@
1
1
  [data-mode='dark'][data-theme='orange'] {
2
2
  /* stencil */
3
- --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65, 1);
3
+ --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65%, 1);
4
4
  --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%));
5
5
 
6
6
  /* dropbox */
7
- --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
7
+ --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
8
8
 
9
9
  /* listitem */
10
- --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
11
- --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
12
- --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41, 1);
13
- --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
14
- --zdt_listitem_dark_tickicon: hsla(0, calc(var(--zd-saturation) * 77.78%), 61.18, 1);
10
+ --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
11
+ --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
12
+ --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41%, 1);
13
+ --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94%, 1);
14
+ --zdt_listitem_dark_tickicon: hsla(0, calc(var(--zd-saturation) * 77.78%), 61.18%, 1);
15
15
 
16
16
  /* tag */
17
- --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
18
- --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57, 1);
19
- --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
20
- --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
21
- --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
22
- --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
17
+ --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
18
+ --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57%, 1);
19
+ --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
20
+ --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69%, 1);
21
+ --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00%, 1);
22
+ --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 1);
23
23
 
24
24
  /* multiselect */
25
- --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10, 1);
26
- --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
27
- --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
28
- --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
25
+ --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10%, 1);
26
+ --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
27
+ --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
28
+ --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
29
29
 
30
30
  /* avatar */
31
- --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
32
- --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
31
+ --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
32
+ --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
33
33
 
34
34
  /* label */
35
- --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
35
+ --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
36
36
 
37
37
  /* textbox */
38
- --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
38
+ --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
39
39
 
40
40
  /* dropdown */
41
- --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
41
+ --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
42
42
 
43
43
  /* focusscope */
44
- --zdt_a11y_focusScope_focus_border: hsla(26, calc(var(--zd-saturation) * 100.00%), 56.08, 1);
44
+ --zdt_a11y_focusScope_focus_border: hsla(26, calc(var(--zd-saturation) * 100.00%), 56.08%, 1);
45
45
 
46
46
  /* button */
47
47
  --zdt_button_primary_strike: hsla(26, calc(var(--zd-saturation) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --zdt_cta_primary_hover_bg: hsla(0, calc(var(--zd-saturation) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
7
  --zdt_cta_primary_border: hsla(0, calc(var(--zd-saturation) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
8
  --zdt_cta_primary_hover_border: hsla(0, calc(var(--zd-saturation) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_cta_primary_box_shadow: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 0.2);
10
- --zdt_cta_primary_hover_box_shadow: hsla(1, calc(var(--zd-saturation) * 75.38%), 38.24, 0.25);
9
+ --zdt_cta_primary_box_shadow: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 0.2);
10
+ --zdt_cta_primary_hover_box_shadow: hsla(1, calc(var(--zd-saturation) * 75.38%), 38.24%, 0.25);
11
11
  --zdt_cta_primary_light_bg: hsla(258, calc(var(--zd-saturation) * 12.62%), calc(20.20% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
12
  --zdt_cta_primary_light_hover_bg: hsla(334, calc(var(--zd-saturation) * 20.00%), calc(24.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
13
  --zdt_cta_primary_light_border: hsla(334, calc(var(--zd-saturation) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,47 +1,47 @@
1
1
  [data-mode='dark'][data-theme='red'] {
2
2
  /* stencil */
3
- --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65, 1);
3
+ --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65%, 1);
4
4
  --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%));
5
5
 
6
6
  /* dropbox */
7
- --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
7
+ --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
8
8
 
9
9
  /* listitem */
10
- --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
11
- --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
12
- --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41, 1);
13
- --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
14
- --zdt_listitem_dark_tickicon: hsla(26, calc(var(--zd-saturation) * 100.00%), 56.08, 1);
10
+ --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
11
+ --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
12
+ --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41%, 1);
13
+ --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94%, 1);
14
+ --zdt_listitem_dark_tickicon: hsla(26, calc(var(--zd-saturation) * 100.00%), 56.08%, 1);
15
15
 
16
16
  /* tag */
17
- --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
18
- --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57, 1);
19
- --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
20
- --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
21
- --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
22
- --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
17
+ --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
18
+ --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57%, 1);
19
+ --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
20
+ --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69%, 1);
21
+ --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00%, 1);
22
+ --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 1);
23
23
 
24
24
  /* multiselect */
25
- --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10, 1);
26
- --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
27
- --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
28
- --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
25
+ --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10%, 1);
26
+ --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
27
+ --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
28
+ --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
29
29
 
30
30
  /* avatar */
31
- --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
32
- --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
31
+ --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
32
+ --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
33
33
 
34
34
  /* label */
35
- --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
35
+ --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
36
36
 
37
37
  /* textbox */
38
- --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
38
+ --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
39
39
 
40
40
  /* dropdown */
41
- --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
41
+ --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
42
42
 
43
43
  /* focusscope */
44
- --zdt_a11y_focusScope_focus_border: hsla(0, calc(var(--zd-saturation) * 77.78%), 61.18, 1);
44
+ --zdt_a11y_focusScope_focus_border: hsla(0, calc(var(--zd-saturation) * 77.78%), 61.18%, 1);
45
45
 
46
46
  /* button */
47
47
  --zdt_button_primary_strike: hsla(0, calc(var(--zd-saturation) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
7
7
  --zdt_cta_primary_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
8
8
  --zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_cta_primary_box_shadow: hsla(46, calc(var(--zd-saturation) * 81.07%), 52.35, 0.2);
10
- --zdt_cta_primary_hover_box_shadow: hsla(48, calc(var(--zd-saturation) * 100.00%), 35.49, 0.25);
9
+ --zdt_cta_primary_box_shadow: hsla(46, calc(var(--zd-saturation) * 81.07%), 52.35%, 0.2);
10
+ --zdt_cta_primary_hover_box_shadow: hsla(48, calc(var(--zd-saturation) * 100.00%), 35.49%, 0.25);
11
11
  --zdt_cta_primary_light_bg: hsla(218, calc(var(--zd-saturation) * 7.69%), calc(20.39% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
12
12
  --zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
13
13
  --zdt_cta_primary_light_border: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,47 +1,47 @@
1
1
  [data-mode='dark'][data-theme='yellow'] {
2
2
  /* stencil */
3
- --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65, 1);
3
+ --zdt_stencil_dark_bg: hsla(226, calc(var(--zd-saturation) * 20.57%), 27.65%, 1);
4
4
  --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%));
5
5
 
6
6
  /* dropbox */
7
- --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
7
+ --zdt_dropbox_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
8
8
 
9
9
  /* listitem */
10
- --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
11
- --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
12
- --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41, 1);
13
- --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
14
- --zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
10
+ --zdt_listitem_dark_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
11
+ --zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
12
+ --zdt_listitem_dark_effect_bg: hsla(217, calc(var(--zd-saturation) * 23.23%), 19.41%, 1);
13
+ --zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94%, 1);
14
+ --zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55%, 1);
15
15
 
16
16
  /* tag */
17
- --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
18
- --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57, 1);
19
- --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
20
- --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
21
- --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
22
- --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
17
+ --zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
18
+ --zdt_tag_dark_bg: hsla(228, calc(var(--zd-saturation) * 18.01%), 31.57%, 1);
19
+ --zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
20
+ --zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69%, 1);
21
+ --zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00%, 1);
22
+ --zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92%, 1);
23
23
 
24
24
  /* multiselect */
25
- --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10, 1);
26
- --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84, 1);
27
- --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
28
- --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
25
+ --zdt_multiselect_dark_border: hsla(228, calc(var(--zd-saturation) * 16.20%), 35.10%, 1);
26
+ --zdt_multiselect_darkmsg_bg: hsla(217, calc(var(--zd-saturation) * 23.08%), 17.84%, 1);
27
+ --zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
28
+ --zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41%, 1);
29
29
 
30
30
  /* avatar */
31
- --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
32
- --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
31
+ --zdt_avatar_white_border: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
32
+ --zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
33
33
 
34
34
  /* label */
35
- --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
35
+ --zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35%, 1);
36
36
 
37
37
  /* textbox */
38
- --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
38
+ --zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00%, 1);
39
39
 
40
40
  /* dropdown */
41
- --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00, 1);
41
+ --zdt_dropdown_darkheading_text: hsla(217, calc(var(--zd-saturation) * 13.73%), 70.00%, 1);
42
42
 
43
43
  /* focusscope */
44
- --zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
44
+ --zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55%, 1);
45
45
 
46
46
  /* button */
47
47
  --zdt_button_primary_strike: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));