@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/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='dark'][data-theme='green'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #383f55;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #232b38;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #232b38;
11
- --zdt_listitem_dark_text: #e2e4e6;
12
- --zdt_listitem_dark_effect_bg: #262f3d;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #45a159;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: #4b5168;
26
- --zdt_multiselect_darkmsg_bg: #232b38;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: #a8b0bd;
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: #a8b0bd;
42
- }
package/es/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='dark'][data-theme='orange'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #383f55;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #232b38;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #232b38;
11
- --zdt_listitem_dark_text: #e2e4e6;
12
- --zdt_listitem_dark_effect_bg: #262f3d;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #e94f4f;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: #4b5168;
26
- --zdt_multiselect_darkmsg_bg: #232b38;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: #a8b0bd;
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: #a8b0bd;
42
- }
package/es/Appearance/dark/themes/red/redDarkCTATheme.module.css DELETED
@@ -1,34 +0,0 @@
1
- [data-mode='dark'][data-theme='red'] {
2
- --zdt_cta_primary_text: #e94f4f;
3
- --zdt_cta_primary_hover_text: #ee7c7c;
4
- --zdt_cta_primary_bg: #e94f4f;
5
- --zdt_cta_primary_hover_bg: #a81111;
6
- --zdt_cta_primary_border: #e94f4f;
7
- --zdt_cta_primary_hover_border: #a81111;
8
- --zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
9
- --zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
10
- --zdt_cta_primary_light_bg: #312d3a;
11
- --zdt_cta_primary_light_hover_bg: #4b323d;
12
- --zdt_cta_primary_light_border: #4b323d;
13
- --zdt_cta_secondary_bg: #e94f4f;
14
- --zdt_cta_secondary_text: var(--dot_white);
15
- --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
16
- --zdt_cta_secondary_light_border: #4b323d;
17
- --zdt_cta_alpha_text: #e94f4f;
18
- --zdt_cta_alpha_hover_text: #a81111;
19
- --zdt_cta_alpha_border: #e94f4f;
20
- --zdt_cta_alpha_hover_border: #a81111;
21
- --zdt_cta_alpha_bg: #372f3a;
22
- --zdt_cta_beta_border: #e94f4f;
23
- --zdt_cta_grey_10_bg: #262f3d;
24
- --zdt_cta_grey_10_border: #262f3d;
25
- --zdt_cta_grey_15_bg: #2d3748;
26
- --zdt_cta_grey_15_border: #2d3748;
27
- --zdt_cta_grey_20_bg: #161b23;
28
- --zdt_cta_grey_35_bg: #384157;
29
- --zdt_cta_grey_35_text: #384157;
30
- --zdt_cta_grey_35_border: #384157;
31
- --zdt_cta_grey_40_bg: #3e4d63;
32
- --zdt_cta_grey_40_text: #3e4d63;
33
- --zdt_cta_grey_40_border: #3e4d63
34
- }
package/es/Appearance/dark/themes/red/redDarkComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='dark'][data-theme='red'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #383f55;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #232b38;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #232b38;
11
- --zdt_listitem_dark_text: #e2e4e6;
12
- --zdt_listitem_dark_effect_bg: #262f3d;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #ff801f;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: #4b5168;
26
- --zdt_multiselect_darkmsg_bg: #232b38;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: #a8b0bd;
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: #a8b0bd;
42
- }
package/es/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='dark'][data-theme='yellow'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: #383f55;
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #232b38;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #232b38;
11
- --zdt_listitem_dark_text: #e2e4e6;
12
- --zdt_listitem_dark_effect_bg: #262f3d;
13
- --zdt_listitem_dark_active_bg: #3b4d6d;
14
- --zdt_listitem_dark_tickicon: #d79835;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: #42485f;
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: #4b5168;
26
- --zdt_multiselect_darkmsg_bg: #232b38;
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: #a8b0bd;
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: #a8b0bd;
42
- }
package/es/Appearance/default/themes/green/greenDefaultComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='default'][data-theme='green'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #1d2f33;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #1d2f33;
11
- --zdt_listitem_dark_text: #d0d0d4;
12
- --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --zdt_listitem_dark_active_bg: #2d484e;
14
- --zdt_listitem_dark_tickicon: #4ac064;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_white);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_white);
42
- }
package/es/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='default'][data-theme='orange'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #332e24;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #332e24;
11
- --zdt_listitem_dark_text: #d0d0d4;
12
- --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --zdt_listitem_dark_active_bg: #4b4335;
14
- --zdt_listitem_dark_tickicon: #ff6363;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_white);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_white);
42
- }
package/es/Appearance/default/themes/red/redDefaultComponentTheme.module.css DELETED
@@ -1,42 +0,0 @@
1
- [data-mode='default'][data-theme='red'] {
2
- /* stencil */
3
- --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
5
-
6
- /* dropbox */
7
- --zdt_dropbox_dark_bg: #34222d;
8
-
9
- /* listitem */
10
- --zdt_listitem_dark_bg: #34222d;
11
- --zdt_listitem_dark_text: #d0d0d4;
12
- --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --zdt_listitem_dark_active_bg: #4d3243;
14
- --zdt_listitem_dark_tickicon: #e57717;
15
-
16
- /* tag */
17
- --zdt_tag_dark_text: #d0d0d4;
18
- --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --zdt_tag_dark_hover_text: #d0d0d4;
20
- --zdt_tag_dark_hover_bg: #503348;
21
- --zdt_tag_dark_close_bg: #864654;
22
- --zdt_tag_dark_close_text: #de3535;
23
-
24
- /* multiselect */
25
- --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --zdt_multiselect_darkmsg_text: #d0d0d4;
28
- --zdt_multiselect_darkdelete_hover_text: var(--dot_white);
29
-
30
- /* avatar */
31
- --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --zdt_avatar_white_text: var(--dot_white);
33
-
34
- /* label */
35
- --zdt_label_dark_text: #d0d0d4;
36
-
37
- /* textbox */
38
- --zdt_textbox_light_text: var(--dot_white);
39
-
40
- /* dropdown */
41
- --zdt_dropdown_darkheading_text: var(--dot_white);
42
- }