@zohodesk/components 1.0.0-temp-147 → 1.0.0-temp-149

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 (37) hide show
  1. package/assets/Appearance/dark/mode/darkMode.module.css +64 -64
  2. package/assets/Appearance/dark/themes/blue/blueDarkCTAModifyCategory.module.css +142 -22
  3. package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +10 -10
  4. package/assets/Appearance/dark/themes/green/greenDarkCTAModifyCategory.module.css +142 -22
  5. package/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css +10 -10
  6. package/assets/Appearance/dark/themes/orange/orangeDarkCTAModifyCategory.module.css +142 -22
  7. package/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +10 -10
  8. package/assets/Appearance/dark/themes/red/redDarkCTAModifyCategory.module.css +142 -22
  9. package/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css +10 -10
  10. package/assets/Appearance/dark/themes/yellow/yellowDarkCTAModifyCategory.module.css +142 -22
  11. package/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +10 -10
  12. package/assets/Appearance/default/mode/defaultMode.module.css +97 -97
  13. package/assets/Appearance/default/themes/blue/blueDefaultCTAModifyCategory.module.css +131 -11
  14. package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +9 -9
  15. package/assets/Appearance/default/themes/green/greenDefaultCTAModifyCategory.module.css +131 -11
  16. package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +9 -9
  17. package/assets/Appearance/default/themes/orange/orangeDefaultCTAModifyCategory.module.css +131 -11
  18. package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +9 -9
  19. package/assets/Appearance/default/themes/red/redDefaultCTAModifyCategory.module.css +131 -11
  20. package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +9 -9
  21. package/assets/Appearance/default/themes/yellow/yellowDefaultCTAModifyCategory.module.css +131 -11
  22. package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +9 -9
  23. package/assets/Appearance/pureDark/mode/pureDarkMode.module.css +93 -93
  24. package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTAModifyCategory.module.css +241 -121
  25. package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css +16 -16
  26. package/assets/Appearance/pureDark/themes/green/greenPureDarkCTAModifyCategory.module.css +230 -110
  27. package/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css +15 -15
  28. package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTAModifyCategory.module.css +230 -110
  29. package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css +15 -15
  30. package/assets/Appearance/pureDark/themes/red/redPureDarkCTAModifyCategory.module.css +230 -110
  31. package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css +15 -15
  32. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTAModifyCategory.module.css +230 -110
  33. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css +15 -15
  34. package/assets/Contrast/darkContrastLightness.module.css +10 -2
  35. package/assets/Contrast/defaultContrastLightness.module.css +11 -3
  36. package/assets/Contrast/pureDarkContrastLightness.module.css +10 -2
  37. package/package.json +3 -3
package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css CHANGED
@@ -1,8 +1,8 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  --zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
3
3
  --zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
4
- --zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_darker_lValue)), calc(1 + var(--zd_alpha_high)));
5
- --zdt_cta_primary_hover_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_darker_lValue)), calc(1 + var(--zd_alpha_high)));
4
+ --zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
5
+ --zdt_cta_primary_hover_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
6
6
  --zdt_cta_primary_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
7
7
  --zdt_cta_primary_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
8
8
  --zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
@@ -11,24 +11,24 @@
11
11
  --zdt_cta_primary_light_hover_bg: hsla(37, 13%, calc(25% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
12
12
  --zdt_cta_primary_light_border: hsla(37, 13%, calc(25% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
13
13
  --zdt_cta_secondary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
14
- --zdt_cta_secondary_text: hsla(0, 0%, calc(100% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
15
- --zdt_cta_secondary_border: hsla(0, 0%, calc(100% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
16
- --zdt_cta_secondary_light_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
14
+ --zdt_cta_secondary_text: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
15
+ --zdt_cta_secondary_border: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
16
+ --zdt_cta_secondary_light_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
17
17
  --zdt_cta_alpha_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
18
18
  --zdt_cta_alpha_hover_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
19
19
  --zdt_cta_alpha_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
20
20
  --zdt_cta_alpha_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
21
21
  --zdt_cta_alpha_bg: hsla(220, 3%, calc(21% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
22
22
  --zdt_cta_beta_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
23
- --zdt_cta_grey_10_bg: hsla(0, 0%, calc(15% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
24
- --zdt_cta_grey_10_border: hsla(0, 0%, calc(15% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
25
- --zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
23
+ --zdt_cta_grey_10_bg: hsla(0, calc(0 * 1%), calc(15% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
24
+ --zdt_cta_grey_10_border: hsla(0, calc(0 * 1%), calc(15% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
25
+ --zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
26
26
  --zdt_cta_grey_15_border: hsla(0, 2%, calc(8% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
27
- --zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
28
- --zdt_cta_grey_35_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
29
- --zdt_cta_grey_35_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
30
- --zdt_cta_grey_35_border: hsla(0, 0%, calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
31
- --zdt_cta_grey_40_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
32
- --zdt_cta_grey_40_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
33
- --zdt_cta_grey_40_border: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
27
+ --zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
28
+ --zdt_cta_grey_35_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
29
+ --zdt_cta_grey_35_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
30
+ --zdt_cta_grey_35_border: hsla(0, calc(0 * 1%), calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
31
+ --zdt_cta_grey_40_bg: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
32
+ --zdt_cta_grey_40_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
33
+ --zdt_cta_grey_40_border: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
34
34
  }
package/assets/Contrast/darkContrastLightness.module.css CHANGED
@@ -3,11 +3,15 @@
3
3
  --zd_dark_default_low_lValue: calc(0 * 1%);
4
4
  --zd_dark_default_inverse_lValue: calc(0 * 1%);
5
5
  --zd_dark_default_inverse_low_lValue: calc(0 * 1%);
6
+ --zd_dark_default_inverse_lower_lValue: calc(0 * 1%);
6
7
  --zd_dark_default_inverse_medium_lValue: calc(0 * 1%);
7
8
  --zd_dark_darker_lValue: calc(0 * 1%);
8
9
  --zd_dark_darker_low_lValue: calc(0 * 1%);
9
10
  --zd_dark_darker_lower_lValue: calc(0 * 1%);
11
+ --zd_dark_darker_lowest_lValue: calc(0 * 1%);
10
12
  --zd_dark_lighter_lValue: calc(0 * 1%);
13
+ --zd_dark_lighter_low_lValue: calc(0 * 1%);
14
+ --zd_dark_lighter_lower_lValue: calc(0 * 1%);
11
15
  --zd_dark_lighter_medium_lValue: calc(0 * 1%);
12
16
  --zd_dark_lighter_high_lValue: calc(0 * 1%);
13
17
  --zd_alpha_high: 0;
@@ -20,11 +24,15 @@
20
24
  --zd_dark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
21
25
  --zd_dark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
22
26
  --zd_dark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
27
+ --zd_dark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
23
28
  --zd_dark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
24
- --zd_dark_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
25
- --zd_dark_darker_low_lValue: calc(var(--zd_contrastLevel) * -1%);
29
+ --zd_dark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
30
+ --zd_dark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
26
31
  --zd_dark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
32
+ --zd_dark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
27
33
  --zd_dark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
34
+ --zd_dark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
35
+ --zd_dark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
28
36
  --zd_dark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
29
37
  --zd_dark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
30
38
  --zd_alpha_high: 1;
package/assets/Contrast/defaultContrastLightness.module.css CHANGED
@@ -3,11 +3,15 @@
3
3
  --zd_default_default_low_lValue: calc(0 * 1%);
4
4
  --zd_default_default_inverse_lValue: calc(0 * 1%);
5
5
  --zd_default_default_inverse_low_lValue: calc(0 * 1%);
6
+ --zd_default_default_inverse_lower_lValue: calc(0 * 1%);
6
7
  --zd_default_default_inverse_medium_lValue: calc(0 * 1%);
7
8
  --zd_default_darker_lValue: calc(0 * 1%);
8
9
  --zd_default_darker_low_lValue: calc(0 * 1%);
9
10
  --zd_default_darker_lower_lValue: calc(0 * 1%);
11
+ --zd_default_darker_lowest_lValue: calc(0 * 1%);
10
12
  --zd_default_lighter_lValue: calc(0 * 1%);
13
+ --zd_default_lighter_low_lValue: calc(0 * 1%);
14
+ --zd_default_lighter_lower_lValue: calc(0 * 1%);
11
15
  --zd_default_lighter_medium_lValue: calc(0 * 1%);
12
16
  --zd_default_lighter_high_lValue: calc(0 * 1%);
13
17
  --zd_alpha_high: 0;
@@ -20,11 +24,15 @@
20
24
  --zd_default_default_low_lValue: calc(var(--zd_contrastLevel) * 1%);
21
25
  --zd_default_default_inverse_lValue: calc(var(--zd_contrastLevel) * -1%);
22
26
  --zd_default_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
27
+ --zd_default_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * -0.10%);
23
28
  --zd_default_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * -1.5%);
24
- --zd_default_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
25
- --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
26
- --zd_default_darker_lower_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
29
+ --zd_default_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
30
+ --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
31
+ --zd_default_darker_lower_lValue: calc(var(--zd_contrastLevel) * -0.25%);
32
+ --zd_default_darker_lowest_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
27
33
  --zd_default_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
34
+ --zd_default_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
35
+ --zd_default_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
28
36
  --zd_default_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
29
37
  --zd_default_lighter_high_lValue: calc(var(--zd_contrastLevel) * 20%);
30
38
  --zd_alpha_high: 1;
package/assets/Contrast/pureDarkContrastLightness.module.css CHANGED
@@ -3,11 +3,15 @@
3
3
  --zd_pureDark_default_low_lValue: calc(0 * 1%);
4
4
  --zd_pureDark_default_inverse_lValue: calc(0 * 1%);
5
5
  --zd_pureDark_default_inverse_low_lValue: calc(0 * 1%);
6
+ --zd_pureDark_default_inverse_lower_lValue: calc(0 * 1%);
6
7
  --zd_pureDark_default_inverse_medium_lValue: calc(0 * 1%);
7
8
  --zd_pureDark_darker_lValue: calc(0 * 1%);
8
9
  --zd_pureDark_darker_low_lValue: calc(0 * 1%);
9
10
  --zd_pureDark_darker_lower_lValue: calc(0 * 1%);
11
+ --zd_pureDark_darker_lowest_lValue: calc(0 * 1%);
10
12
  --zd_pureDark_lighter_lValue: calc(0 * 1%);
13
+ --zd_pureDark_lighter_low_lValue: calc(0 * 1%);
14
+ --zd_pureDark_lighter_lower_lValue: calc(0 * 1%);
11
15
  --zd_pureDark_lighter_medium_lValue: calc(0 * 1%);
12
16
  --zd_pureDark_lighter_high_lValue: calc(0 * 1%);
13
17
  --zd_alpha_high: 0;
@@ -20,11 +24,15 @@
20
24
  --zd_pureDark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
21
25
  --zd_pureDark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
22
26
  --zd_pureDark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
27
+ --zd_pureDark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
23
28
  --zd_pureDark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
24
- --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
25
- --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -1%);
29
+ --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
30
+ --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
26
31
  --zd_pureDark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
32
+ --zd_pureDark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
27
33
  --zd_pureDark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
34
+ --zd_pureDark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
35
+ --zd_pureDark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
28
36
  --zd_pureDark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
29
37
  --zd_pureDark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
30
38
  --zd_alpha_high: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-147",
3
+ "version": "1.0.0-temp-149",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -52,7 +52,7 @@
52
52
  "@zohodesk/virtualizer": "1.0.3",
53
53
  "velocity-react": "1.4.3",
54
54
  "react-sortable-hoc": "^0.8.3",
55
- "@zohodesk/svg": "1.0.0-temp.52",
55
+ "@zohodesk/svg": "1.0.0-temp.53",
56
56
  "@zohodesk/a11y": "1.3.7"
57
57
  },
58
58
  "dependencies": {
@@ -64,7 +64,7 @@
64
64
  "peerDependencies": {
65
65
  "@zohodesk/icons": "1.0.0-beta.119",
66
66
  "@zohodesk/variables": "1.0.0-beta.30",
67
- "@zohodesk/svg": "1.0.0-temp.52",
67
+ "@zohodesk/svg": "1.0.0-temp.53",
68
68
  "@zohodesk/virtualizer": "1.0.3",
69
69
  "velocity-react": "1.4.3",
70
70
  "react-sortable-hoc": "^0.8.3",