@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-243
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.
- package/README.md +48 -0
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +176 -172
- package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +8 -8
- package/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css +12 -465
- package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +31 -31
- package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +7 -4
- package/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css +12 -465
- package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +31 -31
- package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +7 -4
- package/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css +12 -465
- package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +31 -31
- package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +7 -4
- package/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css +12 -465
- package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +31 -31
- package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +7 -4
- package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css +12 -465
- package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +31 -31
- package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +7 -4
- package/assets/Appearance/light/mode/Component_LightMode.module.css +175 -171
- package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +8 -8
- package/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css +12 -465
- package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +31 -31
- package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +7 -4
- package/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css +12 -465
- package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +31 -31
- package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +7 -4
- package/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css +12 -465
- package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +31 -31
- package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +7 -4
- package/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css +12 -465
- package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +31 -31
- package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +7 -4
- package/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css +12 -465
- package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +31 -31
- package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +7 -4
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +177 -173
- package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +8 -8
- package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css +12 -465
- package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +31 -31
- package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +7 -4
- package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css +12 -465
- package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +31 -31
- package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +7 -4
- package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css +12 -465
- package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +31 -31
- package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +7 -4
- package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css +12 -465
- package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +31 -31
- package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +7 -4
- package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css +12 -465
- package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +31 -31
- package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +7 -4
- package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
- package/es/Button/css/Button.module.css +60 -6
- package/es/Button/css/cssJSLogic.js +2 -2
- package/es/Card/__tests__/Card.spec.js +48 -0
- package/es/Card/__tests__/CardContent.spec.js +61 -0
- package/es/Card/__tests__/CardHeader.spec.js +33 -0
- package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
- package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
- package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
- package/es/ListItem/ListItem.js +10 -3
- package/es/ListItem/ListItemWithAvatar.js +15 -6
- package/es/ListItem/ListItemWithCheckBox.js +13 -6
- package/es/ListItem/ListItemWithIcon.js +14 -5
- package/es/ListItem/ListItemWithRadio.js +13 -6
- package/es/ListItem/__tests__/ListItem.spec.js +19 -0
- package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +19 -0
- package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +19 -0
- package/es/ListItem/__tests__/ListItemWithIcon.spec.js +17 -0
- package/es/ListItem/__tests__/ListItemWithRadio.spec.js +19 -0
- package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
- package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
- package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
- package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
- package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
- package/es/ListItem/props/propTypes.js +15 -5
- package/es/MultiSelect/MultiSelect.js +8 -1
- package/es/MultiSelect/Suggestions.js +2 -1
- package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
- package/es/MultiSelect/props/propTypes.js +2 -3
- package/es/Popup/Popup.js +76 -72
- package/es/Select/GroupSelect.js +4 -2
- package/es/Select/Select.js +7 -1
- package/es/Select/SelectWithAvatar.js +17 -4
- package/es/Select/SelectWithIcon.js +15 -5
- package/es/Select/props/defaultProps.js +2 -0
- package/es/Select/props/propTypes.js +5 -0
- package/es/Typography/__tests__/Typography.spec.js +225 -0
- package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
- package/es/common/common.module.css +1 -1
- package/es/utils/dropDownUtils.js +13 -4
- package/es/v1/Switch/__tests__/Switch.spec.js +41 -6
- package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
- package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
- package/lib/Button/css/Button.module.css +60 -6
- package/lib/Button/css/cssJSLogic.js +1 -1
- package/lib/Card/__tests__/Card.spec.js +54 -6
- package/lib/Card/__tests__/CardContent.spec.js +68 -0
- package/lib/Card/__tests__/CardHeader.spec.js +40 -0
- package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +125 -0
- package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +177 -0
- package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +51 -0
- package/lib/ListItem/ListItem.js +10 -3
- package/lib/ListItem/ListItemWithAvatar.js +15 -6
- package/lib/ListItem/ListItemWithCheckBox.js +15 -6
- package/lib/ListItem/ListItemWithIcon.js +13 -5
- package/lib/ListItem/ListItemWithRadio.js +15 -6
- package/lib/ListItem/__tests__/ListItem.spec.js +23 -0
- package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +23 -0
- package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +23 -0
- package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +21 -0
- package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +23 -0
- package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +78 -0
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +140 -46
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +251 -49
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +144 -50
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +252 -52
- package/lib/ListItem/props/propTypes.js +15 -6
- package/lib/MultiSelect/MultiSelect.js +6 -2
- package/lib/MultiSelect/Suggestions.js +2 -1
- package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
- package/lib/MultiSelect/props/propTypes.js +3 -4
- package/lib/Popup/Popup.js +76 -73
- package/lib/Select/GroupSelect.js +4 -3
- package/lib/Select/Select.js +7 -1
- package/lib/Select/SelectWithAvatar.js +17 -7
- package/lib/Select/SelectWithIcon.js +15 -5
- package/lib/Select/props/defaultProps.js +2 -1
- package/lib/Select/props/propTypes.js +5 -0
- package/lib/Typography/__tests__/Typography.spec.js +232 -0
- package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1226 -0
- package/lib/common/common.module.css +1 -1
- package/lib/utils/dropDownUtils.js +17 -4
- package/lib/v1/Switch/__tests__/Switch.spec.js +41 -6
- package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +176 -5
- package/package.json +10 -10
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='green'] {
|
|
2
2
|
/* CTA variables */
|
|
3
|
-
--zdt_cta_primary_text: hsla(133,
|
|
4
|
-
--zdt_cta_primary_hover_text: hsla(133,
|
|
5
|
-
--zdt_cta_primary_bg: hsla(133,
|
|
6
|
-
--zdt_cta_primary_hover_bg: hsla(128,
|
|
7
|
-
--zdt_cta_primary_border: hsla(133,
|
|
8
|
-
--zdt_cta_primary_hover_border: hsla(128,
|
|
3
|
+
--zdt_cta_primary_text: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--zdt_cta_primary_hover_text: hsla(133, 40.00%, calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
5
|
+
--zdt_cta_primary_bg: hsla(133, 40.00%, calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
|
|
6
|
+
--zdt_cta_primary_hover_bg: hsla(128, 79.71%, calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--zdt_cta_primary_border: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
8
|
+
--zdt_cta_primary_hover_border: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
9
9
|
--zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
|
|
10
10
|
--zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
|
|
11
|
-
--zdt_cta_primary_light_bg: hsla(133,
|
|
12
|
-
--zdt_cta_primary_light_hover_bg: hsla(158,
|
|
13
|
-
--zdt_cta_primary_light_border: hsla(158,
|
|
14
|
-
--zdt_cta_secondary_bg: hsla(133,
|
|
15
|
-
--zdt_cta_secondary_text: hsla(0,
|
|
16
|
-
--zdt_cta_secondary_border: hsla(0,
|
|
17
|
-
--zdt_cta_secondary_light_border: hsla(133,
|
|
18
|
-
--zdt_cta_secondary_light_bg: hsla(133,
|
|
19
|
-
--zdt_cta_alpha_text: hsla(133,
|
|
20
|
-
--zdt_cta_alpha_hover_text: hsla(128,
|
|
21
|
-
--zdt_cta_alpha_border: hsla(133,
|
|
22
|
-
--zdt_cta_alpha_hover_border: hsla(128,
|
|
23
|
-
--zdt_cta_alpha_bg: hsla(170,
|
|
24
|
-
--zdt_cta_beta_border: hsla(133,
|
|
25
|
-
--zdt_cta_grey_10_bg: hsla(0,
|
|
26
|
-
--zdt_cta_grey_10_border: hsla(0,
|
|
27
|
-
--zdt_cta_grey_15_bg: hsla(0,
|
|
28
|
-
--zdt_cta_grey_15_border: hsla(0,
|
|
29
|
-
--zdt_cta_grey_20_bg: hsla(217,
|
|
30
|
-
--zdt_cta_grey_35_bg: hsla(0,
|
|
31
|
-
--zdt_cta_grey_35_text: hsla(0,
|
|
32
|
-
--zdt_cta_grey_35_border: hsla(0,
|
|
33
|
-
--zdt_cta_grey_40_bg: hsla(0,
|
|
34
|
-
--zdt_cta_grey_40_text: hsla(0,
|
|
35
|
-
--zdt_cta_grey_40_border: hsla(0,
|
|
11
|
+
--zdt_cta_primary_light_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
--zdt_cta_primary_light_hover_bg: hsla(158, 26.83%, calc(24.12% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
13
|
+
--zdt_cta_primary_light_border: hsla(158, 26.83%, calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
14
|
+
--zdt_cta_secondary_bg: hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
|
|
17
|
+
--zdt_cta_secondary_light_border: hsla(133, 23.48%, calc(22.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
18
|
+
--zdt_cta_secondary_light_bg: hsla(133, 23.48%, calc(22.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--zdt_cta_alpha_text: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
20
|
+
--zdt_cta_alpha_hover_text: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
21
|
+
--zdt_cta_alpha_border: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
22
|
+
--zdt_cta_alpha_hover_border: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
23
|
+
--zdt_cta_alpha_bg: hsla(170, 22.94%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
24
|
+
--zdt_cta_beta_border: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
|
|
26
|
+
--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
|
|
28
|
+
--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
|
|
30
|
+
--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
|
|
31
|
+
--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
33
|
+
--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
36
36
|
}
|
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);
|
|
@@ -44,7 +44,10 @@
|
|
|
44
44
|
--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
|
|
45
45
|
|
|
46
46
|
/* button */
|
|
47
|
-
--zdt_button_primary_strike: hsla(133,
|
|
48
|
-
--zdt_button_primaryFilled_strike: hsla(0,
|
|
49
|
-
--zdt_button_secondaryFilled_strike: hsla(0,
|
|
47
|
+
--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
|
|
48
|
+
--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
|
|
49
|
+
--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
|
|
50
|
+
|
|
51
|
+
/* buttonloading */
|
|
52
|
+
--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(69, 161, 89, 1) 50%, rgba(45, 161, 89, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(45, 161, 89, 0.9) 0%, rgba(45, 161, 89, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(45, 161, 89, 0.6) 0%, rgba(45, 161, 89, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(45, 161, 89, 0.3) 0%, rgba(45, 161, 89, 0) 100%) 0% 100%;
|
|
50
53
|
}
|