@zohodesk/components 1.0.0-temp-238 → 1.0.0-temp-240

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 (20) hide show
  1. package/README.md +1 -1
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +5 -5
  3. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +1 -1
  4. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +1 -1
  5. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +1 -1
  6. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +1 -1
  7. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +1 -1
  8. package/assets/Appearance/light/mode/Component_LightMode.module.css +5 -5
  9. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +1 -1
  10. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +1 -1
  11. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +1 -1
  12. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +1 -1
  13. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +1 -1
  14. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +5 -5
  15. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +1 -1
  16. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +1 -1
  17. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +1 -1
  18. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +1 -1
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +1 -1
  20. package/package.json +8 -3
package/README.md CHANGED
@@ -21,7 +21,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
21
21
  # 1.4.12
22
22
 
23
23
  - `TextBox`
24
- - The event is passed as the 4th argument to both handleBlur and handleFocus
24
+ - The event is passed as the 4th argument to both onBlur and onFocus
25
25
  - `Common Css`
26
26
  - added ltr class for change direction to ltr in rtl mode.
27
27
 
package/assets/Appearance/dark/mode/Component_DarkMode.module.css CHANGED
@@ -70,9 +70,9 @@
70
70
  --zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
71
71
  --zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
72
72
  --zdt_button_loading_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
73
- --zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
- --zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
75
- --zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
73
+ --zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
+ --zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
75
+ --zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
76
76
  --zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
77
77
  --zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
78
78
  --zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
@@ -219,9 +219,9 @@
219
219
 
220
220
  /* stencils */
221
221
  --zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
222
- --zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
222
+ --zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
223
223
  --zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
224
- --zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
224
+ --zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
225
225
 
226
226
  /* switch */
227
227
  --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='dark'][data-theme='blue'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(35,43,56);
package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='dark'][data-theme='green'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(35,43,56);
package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='dark'][data-theme='orange'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(35,43,56);
package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='dark'][data-theme='red'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(35,43,56);
package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='dark'][data-theme='yellow'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(35,43,56);
package/assets/Appearance/light/mode/Component_LightMode.module.css CHANGED
@@ -70,9 +70,9 @@
70
70
  --zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
71
71
  --zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
72
72
  --zdt_button_loading_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
73
- --zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
- --zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
75
- --zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
73
+ --zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
+ --zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
75
+ --zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
76
76
  --zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
77
77
  --zdt_button_success_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
78
78
  --zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
@@ -219,9 +219,9 @@
219
219
 
220
220
  /* stencils */
221
221
  --zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
222
- --zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
222
+ --zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
223
223
  --zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
224
- --zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
224
+ --zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
225
225
 
226
226
  /* switch */
227
227
  --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='light'][data-theme='blue'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(56,63,85);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(56,63,87);
package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='light'][data-theme='green'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: 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%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(29,47,51);
package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='light'][data-theme='orange'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: 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%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(51,46,36);
package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='light'][data-theme='red'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: 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%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(52,34,45);
package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='light'][data-theme='yellow'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --zdt_stencil_dark_gradient_bg: 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%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: 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%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(49,51,35);
package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css CHANGED
@@ -70,9 +70,9 @@
70
70
  --zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
71
71
  --zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
72
72
  --zdt_button_loading_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
73
- --zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
- --zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
75
- --zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
73
+ --zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
74
+ --zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
75
+ --zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
76
76
  --zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
77
77
  --zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
78
78
  --zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
@@ -219,9 +219,9 @@
219
219
 
220
220
  /* stencils */
221
221
  --zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
222
- --zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
222
+ --zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
223
223
  --zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
224
- --zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
224
+ --zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
225
225
 
226
226
  /* switch */
227
227
  --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='pureDark'][data-theme='blue'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(33,33,33);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(33,33,33);
package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='pureDark'][data-theme='green'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(33,33,33);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(33,33,33);
package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='pureDark'][data-theme='orange'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(33,33,33);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(33,33,33);
package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='pureDark'][data-theme='red'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(33,33,33);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(33,33,33);
package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  /* stencil */
3
3
  --zdt_stencil_dark_bg: rgb(33,33,33);
4
- --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
4
+ --zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
5
5
 
6
6
  /* dropbox */
7
7
  --zdt_dropbox_dark_bg: rgb(33,33,33);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-238",
3
+ "version": "1.0.0-temp-240",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -26,7 +26,7 @@
26
26
  "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
27
27
  "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
28
28
  "build:variables": "react-cli clean ./assets && node ./preprocess/index",
29
- "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
29
+ "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es && react-cli rtl ./assets ./assets",
30
30
  "common_package_build": "cd ../common && npm run build && cd ../components",
31
31
  "start": "react-cli start",
32
32
  "docs": "npm run css:review && react-cli docs",
@@ -39,7 +39,7 @@
39
39
  "build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
40
40
  "coverage": "react-cli coverage",
41
41
  "prepare": "npm run init && npm run css:build ",
42
- "prepublishOnly": "node prePublish.js && npm run download_only",
42
+ "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
43
43
  "postpublish": "node postPublish.js",
44
44
  "report": "react-cli publish:report",
45
45
  "test": "react-cli test",
@@ -93,6 +93,7 @@
93
93
  "@zohodesk/react-cli": "1.1.27"
94
94
  },
95
95
  "dependencies": {
96
+ "@zohodesk/react-cli": "^1.1.27",
96
97
  "hoist-non-react-statics": "3.0.1",
97
98
  "react-transition-group": "2.5.0",
98
99
  "reselect": "4.0.0",
@@ -110,5 +111,9 @@
110
111
  "@zohodesk/a11y": "2.3.8",
111
112
  "@zohodesk/layout": "3.1.0",
112
113
  "@zohodesk/dotkit": "1.0.3"
114
+ },
115
+ "volta": {
116
+ "node": "16.16.0",
117
+ "npm": "6.14.18"
113
118
  }
114
119
  }