@zohodesk/components 1.0.0-temp-132 → 1.0.0-temp-133
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 +5 -0
- package/assets/Appearance/dark/mode/darkMode.module.css +168 -167
- package/assets/Appearance/dark/themes/blue/blueDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +30 -30
- package/assets/Appearance/dark/themes/green/greenDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css +30 -30
- package/assets/Appearance/dark/themes/orange/orangeDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +30 -30
- package/assets/Appearance/dark/themes/red/redDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css +30 -30
- package/assets/Appearance/dark/themes/yellow/yellowDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +30 -30
- package/assets/Appearance/default/mode/defaultMode.module.css +165 -164
- package/assets/Appearance/default/themes/blue/blueDefaultCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +30 -30
- package/assets/Appearance/default/themes/green/greenDefaultCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +30 -30
- package/assets/Appearance/default/themes/orange/orangeDefaultCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +30 -30
- package/assets/Appearance/default/themes/red/redDefaultCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +30 -30
- package/assets/Appearance/default/themes/yellow/yellowDefaultCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +30 -30
- package/assets/Appearance/pureDark/mode/pureDarkMode.module.css +169 -168
- package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/green/greenPureDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/red/redPureDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTAModifyCategory.module.css +100 -66
- package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css +30 -30
- package/assets/Contrast/darkContrastLightness.module.css +11 -3
- package/assets/Contrast/defaultContrastLightness.module.css +11 -3
- package/assets/Contrast/pureDarkContrastLightness.module.css +11 -3
- package/es/Avatar/Avatar.js +8 -5
- package/es/Avatar/Avatar.module.css +8 -0
- package/es/Avatar/props/defaultProps.js +3 -1
- package/es/Avatar/props/propTypes.js +4 -2
- package/es/AvatarTeam/AvatarTeam.js +8 -2
- package/es/AvatarTeam/AvatarTeam.module.css +30 -3
- package/es/AvatarTeam/props/defaultProps.js +4 -1
- package/es/AvatarTeam/props/propTypes.js +4 -1
- package/es/DateTime/DateWidget.js +2 -3
- package/es/MultiSelect/Suggestions.js +4 -2
- package/es/Provider/AvatarSize.js +1 -0
- package/es/TextBoxIcon/TextBoxIcon.js +20 -3
- package/es/Tooltip/Tooltip.module.css +3 -3
- package/es/common/avatarsizes.module.css +6 -2
- package/es/common/boxShadow.module.css +0 -6
- package/es/utils/Common.js +4 -2
- package/lib/Avatar/Avatar.js +8 -5
- package/lib/Avatar/Avatar.module.css +8 -0
- package/lib/Avatar/props/defaultProps.js +3 -1
- package/lib/Avatar/props/propTypes.js +4 -2
- package/lib/AvatarTeam/AvatarTeam.js +8 -2
- package/lib/AvatarTeam/AvatarTeam.module.css +30 -3
- package/lib/AvatarTeam/props/defaultProps.js +4 -1
- package/lib/AvatarTeam/props/propTypes.js +4 -1
- package/lib/DateTime/DateWidget.js +1 -3
- package/lib/MultiSelect/Suggestions.js +5 -3
- package/lib/Provider/AvatarSize.js +1 -0
- package/lib/TextBoxIcon/TextBoxIcon.js +20 -3
- package/lib/Tooltip/Tooltip.module.css +3 -3
- package/lib/common/avatarsizes.module.css +6 -2
- package/lib/common/boxShadow.module.css +0 -6
- package/lib/utils/Common.js +4 -2
- package/package.json +1 -1
|
@@ -1,68 +1,102 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='yellow'] {
|
|
2
|
-
--zdt_m_cta_primary_text_text:
|
|
3
|
-
--zdt_m_cta_primary_text_textLighterBoth:
|
|
4
|
-
--zdt_m_cta_primary_text_textLighterDarker:
|
|
5
|
-
--zdt_m_cta_primary_hover_text_text:
|
|
6
|
-
--zdt_m_cta_primary_hover_text_textLighterBoth:
|
|
7
|
-
--zdt_m_cta_primary_hover_text_textLighterDarker:
|
|
8
|
-
--zdt_m_cta_primary_bg_bg:
|
|
9
|
-
--zdt_m_cta_primary_bg_bgDarkerBoth:
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
2
|
+
--zdt_m_cta_primary_text_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
3
|
+
--zdt_m_cta_primary_text_textLighterBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
4
|
+
--zdt_m_cta_primary_text_textLighterDarker: hsla(37, 67%, calc(53% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
5
|
+
--zdt_m_cta_primary_hover_text_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
6
|
+
--zdt_m_cta_primary_hover_text_textLighterBoth: hsla(37, 66%, calc(65% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
7
|
+
--zdt_m_cta_primary_hover_text_textLighterDarker: hsla(37, 66%, calc(65% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
8
|
+
--zdt_m_cta_primary_bg_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
9
|
+
--zdt_m_cta_primary_bg_bgDarkerBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
10
|
+
--zdt_m_cta_primary_bg_bgDarkerBothMild: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
11
|
+
--zdt_m_cta_primary_bg_bgDarkerLighter: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
12
|
+
--zdt_m_cta_primary_bg_bgDarkerLighterMild: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
13
|
+
--zdt_m_cta_primary_hover_bg_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
14
|
+
--zdt_m_cta_primary_hover_bg_bgDarkerBoth: hsla(39, 90%, calc(32% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
15
|
+
--zdt_m_cta_primary_hover_bg_bgDarkerBothMild: hsla(39, 90%, calc(32% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
16
|
+
--zdt_m_cta_primary_hover_bg_bgDarkerLighter: hsla(39, 90%, calc(32% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
17
|
+
--zdt_m_cta_primary_hover_bg_bgDarkerLighterMild: hsla(39, 90%, calc(32% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
18
|
+
--zdt_m_cta_primary_border_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
19
|
+
--zdt_m_cta_primary_border_borderLighterBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
20
|
+
--zdt_m_cta_primary_hover_border_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
21
|
+
--zdt_m_cta_primary_hover_border_borderLighterBoth: hsla(39, 90%, calc(32% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
22
|
+
--zdt_m_cta_primary_light_bg_bg: hsla(35, 15%, calc(16% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
23
|
+
--zdt_m_cta_primary_light_bg_bgDarkerBoth: hsla(35, 15%, calc(16% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
24
|
+
--zdt_m_cta_primary_light_bg_bgDarkerBothMild: hsla(35, 15%, calc(16% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
25
|
+
--zdt_m_cta_primary_light_bg_bgDarkerLighter: hsla(35, 15%, calc(16% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
26
|
+
--zdt_m_cta_primary_light_bg_bgDarkerLighterMild: hsla(35, 15%, calc(16% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
27
|
+
--zdt_m_cta_primary_light_hover_bg_bg: hsla(37, 13%, calc(25% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
28
|
+
--zdt_m_cta_primary_light_hover_bg_bgDarkerBoth: hsla(37, 13%, calc(25% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
29
|
+
--zdt_m_cta_primary_light_hover_bg_bgDarkerBothMild: hsla(37, 13%, calc(25% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
30
|
+
--zdt_m_cta_primary_light_hover_bg_bgDarkerLighter: hsla(37, 13%, calc(25% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
31
|
+
--zdt_m_cta_primary_light_hover_bg_bgDarkerLighterMild: hsla(37, 13%, calc(25% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
32
|
+
--zdt_m_cta_primary_light_border_border: hsla(37, 13%, calc(25% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
33
|
+
--zdt_m_cta_primary_light_border_borderLighterBoth: hsla(37, 13%, calc(25% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
34
|
+
--zdt_m_cta_secondary_bg_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
35
|
+
--zdt_m_cta_secondary_bg_bgDarkerBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
36
|
+
--zdt_m_cta_secondary_bg_bgDarkerBothMild: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
37
|
+
--zdt_m_cta_secondary_bg_bgDarkerLighter: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
38
|
+
--zdt_m_cta_secondary_bg_bgDarkerLighterMild: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
39
|
+
--zdt_m_cta_secondary_text_text: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
40
|
+
--zdt_m_cta_secondary_text_textLighterBoth: hsla(0, 0%, calc(100% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
41
|
+
--zdt_m_cta_secondary_text_textLighterDarker: hsla(0, 0%, calc(100% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
42
|
+
--zdt_m_cta_secondary_border_border: hsla(0, 0%, calc(100% + var(--zd_pureDark_border_lValue)), calc( 0.15 + var(--zd_alpha)));
|
|
43
|
+
--zdt_m_cta_secondary_border_borderLighterBoth: hsla(0, 0%, calc(100% + var(--zd_pureDark_borderLighterBoth_lValue)), calc( 0.15 + var(--zd_border_alpha)));
|
|
44
|
+
--zdt_m_cta_secondary_light_border_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
45
|
+
--zdt_m_cta_secondary_light_border_borderLighterBoth: hsla(38, 30%, calc(21% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
46
|
+
--zdt_m_cta_alpha_text_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
47
|
+
--zdt_m_cta_alpha_text_textLighterBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
48
|
+
--zdt_m_cta_alpha_text_textLighterDarker: hsla(37, 67%, calc(53% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
49
|
+
--zdt_m_cta_alpha_hover_text_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
50
|
+
--zdt_m_cta_alpha_hover_text_textLighterBoth: hsla(39, 90%, calc(32% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
51
|
+
--zdt_m_cta_alpha_hover_text_textLighterDarker: hsla(39, 90%, calc(32% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
52
|
+
--zdt_m_cta_alpha_border_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
53
|
+
--zdt_m_cta_alpha_border_borderLighterBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
54
|
+
--zdt_m_cta_alpha_hover_border_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
55
|
+
--zdt_m_cta_alpha_hover_border_borderLighterBoth: hsla(39, 90%, calc(32% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
56
|
+
--zdt_m_cta_alpha_bg_bg: hsla(220, 3%, calc(21% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
57
|
+
--zdt_m_cta_alpha_bg_bgDarkerBoth: hsla(220, 3%, calc(21% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
58
|
+
--zdt_m_cta_alpha_bg_bgDarkerBothMild: hsla(220, 3%, calc(21% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
59
|
+
--zdt_m_cta_alpha_bg_bgDarkerLighter: hsla(220, 3%, calc(21% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
60
|
+
--zdt_m_cta_alpha_bg_bgDarkerLighterMild: hsla(220, 3%, calc(21% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
61
|
+
--zdt_m_cta_beta_border_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
62
|
+
--zdt_m_cta_beta_border_borderLighterBoth: hsla(37, 67%, calc(53% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
63
|
+
--zdt_m_cta_grey_10_bg_bg: hsla(0, 0%, calc(15% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
64
|
+
--zdt_m_cta_grey_10_bg_bgDarkerBoth: hsla(0, 0%, calc(15% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
65
|
+
--zdt_m_cta_grey_10_bg_bgDarkerBothMild: hsla(0, 0%, calc(15% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
66
|
+
--zdt_m_cta_grey_10_bg_bgDarkerLighter: hsla(0, 0%, calc(15% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
67
|
+
--zdt_m_cta_grey_10_bg_bgDarkerLighterMild: hsla(0, 0%, calc(15% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
68
|
+
--zdt_m_cta_grey_10_border_border: hsla(0, 0%, calc(15% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
69
|
+
--zdt_m_cta_grey_10_border_borderLighterBoth: hsla(0, 0%, calc(15% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
70
|
+
--zdt_m_cta_grey_15_bg_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
71
|
+
--zdt_m_cta_grey_15_bg_bgDarkerBoth: hsla(0, 2%, calc(8% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
72
|
+
--zdt_m_cta_grey_15_bg_bgDarkerBothMild: hsla(0, 2%, calc(8% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
73
|
+
--zdt_m_cta_grey_15_bg_bgDarkerLighter: hsla(0, 2%, calc(8% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
74
|
+
--zdt_m_cta_grey_15_bg_bgDarkerLighterMild: hsla(0, 2%, calc(8% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
75
|
+
--zdt_m_cta_grey_15_border_border: hsla(0, 2%, calc(8% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
76
|
+
--zdt_m_cta_grey_15_border_borderLighterBoth: hsla(0, 2%, calc(8% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
77
|
+
--zdt_m_cta_grey_20_bg_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
78
|
+
--zdt_m_cta_grey_20_bg_bgDarkerBoth: hsla(217, 23%, calc(11% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
79
|
+
--zdt_m_cta_grey_20_bg_bgDarkerBothMild: hsla(217, 23%, calc(11% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
80
|
+
--zdt_m_cta_grey_20_bg_bgDarkerLighter: hsla(217, 23%, calc(11% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
81
|
+
--zdt_m_cta_grey_20_bg_bgDarkerLighterMild: hsla(217, 23%, calc(11% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
82
|
+
--zdt_m_cta_grey_35_bg_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
83
|
+
--zdt_m_cta_grey_35_bg_bgDarkerBoth: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
84
|
+
--zdt_m_cta_grey_35_bg_bgDarkerBothMild: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
85
|
+
--zdt_m_cta_grey_35_bg_bgDarkerLighter: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
86
|
+
--zdt_m_cta_grey_35_bg_bgDarkerLighterMild: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
87
|
+
--zdt_m_cta_grey_35_text_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
88
|
+
--zdt_m_cta_grey_35_text_textLighterBoth: hsla(0, 0%, calc(35% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
89
|
+
--zdt_m_cta_grey_35_text_textLighterDarker: hsla(0, 0%, calc(35% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
90
|
+
--zdt_m_cta_grey_35_border_border: hsla(0, 0%, calc(22% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
91
|
+
--zdt_m_cta_grey_35_border_borderLighterBoth: hsla(0, 0%, calc(22% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
92
|
+
--zdt_m_cta_grey_40_bg_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
93
|
+
--zdt_m_cta_grey_40_bg_bgDarkerBoth: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
94
|
+
--zdt_m_cta_grey_40_bg_bgDarkerBothMild: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
95
|
+
--zdt_m_cta_grey_40_bg_bgDarkerLighter: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
96
|
+
--zdt_m_cta_grey_40_bg_bgDarkerLighterMild: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerLighterMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
97
|
+
--zdt_m_cta_grey_40_text_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
98
|
+
--zdt_m_cta_grey_40_text_textLighterBoth: hsla(0, 0%, calc(35% + var(--zd_pureDark_textLighterBoth_lValue)), calc(1 + var(--zd_alpha)));
|
|
99
|
+
--zdt_m_cta_grey_40_text_textLighterDarker: hsla(0, 0%, calc(35% + var(--zd_pureDark_textLighterDarker_lValue)), calc(1 + var(--zd_alpha)));
|
|
100
|
+
--zdt_m_cta_grey_40_border_border: hsla(0, 0%, calc(35% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
101
|
+
--zdt_m_cta_grey_40_border_borderLighterBoth: hsla(0, 0%, calc(35% + var(--zd_pureDark_borderLighterBoth_lValue)), calc(1 + var(--zd_border_alpha)));
|
|
68
102
|
}
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
[data-mode='pureDark'][data-theme='yellow'] {
|
|
2
|
-
--zdt_cta_primary_text:
|
|
3
|
-
--zdt_cta_primary_hover_text:
|
|
4
|
-
--zdt_cta_primary_bg:
|
|
5
|
-
--zdt_cta_primary_hover_bg:
|
|
6
|
-
--zdt_cta_primary_border:
|
|
7
|
-
--zdt_cta_primary_hover_border:
|
|
2
|
+
--zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
3
|
+
--zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
4
|
+
--zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
5
|
+
--zdt_cta_primary_hover_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_bgDarkerBoth_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
6
|
+
--zdt_cta_primary_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
7
|
+
--zdt_cta_primary_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
8
8
|
--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
|
|
9
9
|
--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
|
|
10
|
-
--zdt_cta_primary_light_bg:
|
|
11
|
-
--zdt_cta_primary_light_hover_bg:
|
|
12
|
-
--zdt_cta_primary_light_border:
|
|
13
|
-
--zdt_cta_secondary_bg:
|
|
14
|
-
--zdt_cta_secondary_text:
|
|
15
|
-
--zdt_cta_secondary_border:
|
|
16
|
-
--zdt_cta_secondary_light_border:
|
|
17
|
-
--zdt_cta_alpha_text:
|
|
18
|
-
--zdt_cta_alpha_hover_text:
|
|
19
|
-
--zdt_cta_alpha_border:
|
|
20
|
-
--zdt_cta_alpha_hover_border:
|
|
21
|
-
--zdt_cta_alpha_bg:
|
|
22
|
-
--zdt_cta_beta_border:
|
|
23
|
-
--zdt_cta_grey_10_bg:
|
|
24
|
-
--zdt_cta_grey_10_border:
|
|
25
|
-
--zdt_cta_grey_15_bg:
|
|
26
|
-
--zdt_cta_grey_15_border:
|
|
27
|
-
--zdt_cta_grey_20_bg:
|
|
28
|
-
--zdt_cta_grey_35_bg:
|
|
29
|
-
--zdt_cta_grey_35_text:
|
|
30
|
-
--zdt_cta_grey_35_border:
|
|
31
|
-
--zdt_cta_grey_40_bg:
|
|
32
|
-
--zdt_cta_grey_40_text:
|
|
33
|
-
--zdt_cta_grey_40_border:
|
|
10
|
+
--zdt_cta_primary_light_bg: hsla(35, 15%, calc(16% + var(--zd_pureDark_bgDarkerLighter_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
11
|
+
--zdt_cta_primary_light_hover_bg: hsla(37, 13%, calc(25% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
12
|
+
--zdt_cta_primary_light_border: hsla(37, 13%, calc(25% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
13
|
+
--zdt_cta_secondary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
14
|
+
--zdt_cta_secondary_text: hsla(0, 0%, calc(100% + var(--zd_pureDark_textLighterBothSecondary_lValue)), calc(1 + var(--zd_alpha)));
|
|
15
|
+
--zdt_cta_secondary_border: hsla(0, 0%, calc(100% + var(--zd_pureDark_border_lValue)), calc( 0.15 + var(--zd_alpha)));
|
|
16
|
+
--zdt_cta_secondary_light_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
17
|
+
--zdt_cta_alpha_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
18
|
+
--zdt_cta_alpha_hover_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
19
|
+
--zdt_cta_alpha_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
20
|
+
--zdt_cta_alpha_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
21
|
+
--zdt_cta_alpha_bg: hsla(220, 3%, calc(21% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
22
|
+
--zdt_cta_beta_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
23
|
+
--zdt_cta_grey_10_bg: hsla(0, 0%, calc(15% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
24
|
+
--zdt_cta_grey_10_border: hsla(0, 0%, calc(15% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
25
|
+
--zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
26
|
+
--zdt_cta_grey_15_border: hsla(0, 2%, calc(8% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
27
|
+
--zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
28
|
+
--zdt_cta_grey_35_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
29
|
+
--zdt_cta_grey_35_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
30
|
+
--zdt_cta_grey_35_border: hsla(0, 0%, calc(22% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
|
|
31
|
+
--zdt_cta_grey_40_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_bgDarkerBothMild_lValue)), calc(1 + var(--zd_bg_alpha)));
|
|
32
|
+
--zdt_cta_grey_40_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
|
|
33
|
+
--zdt_cta_grey_40_border: hsla(0, 0%, calc(35% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)))
|
|
34
34
|
}
|
|
@@ -1,25 +1,33 @@
|
|
|
1
1
|
:root [data-mode='dark'] {
|
|
2
2
|
--zd_dark_bg_lValue: calc(0 * 1%);
|
|
3
3
|
--zd_dark_bgDarkerBoth_lValue: calc(0 * 1%);
|
|
4
|
+
--zd_dark_bgDarkerBothMild_lValue: calc(0 * 1%);
|
|
4
5
|
--zd_dark_bgDarkerLighter_lValue: calc(0 * 1%);
|
|
6
|
+
--zd_dark_bgDarkerLighterMild_lValue: calc(0 * 1%);
|
|
5
7
|
--zd_dark_text_lValue: calc(0 * 1%);
|
|
6
8
|
--zd_dark_textLighterBoth_lValue: calc(0 * 1%);
|
|
7
9
|
--zd_dark_textLighterDarker_lValue: calc(0 * 1%);
|
|
10
|
+
--zd_dark_textLighterBothSecondary_lValue: calc(0 * 1%);
|
|
8
11
|
--zd_dark_border_lValue: calc(0 * 1%);
|
|
9
12
|
--zd_dark_borderLighterBoth_lValue: calc(0 * 1%);
|
|
10
13
|
--zd_alpha: 0;
|
|
11
14
|
--zd_bg_alpha: 0;
|
|
15
|
+
--zd_border_alpha: 0;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
[data-mode='dark']:global(.contrast) {
|
|
15
19
|
--zd_dark_bg_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
16
20
|
--zd_dark_bgDarkerBoth_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
21
|
+
--zd_dark_bgDarkerBothMild_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
17
22
|
--zd_dark_bgDarkerLighter_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
23
|
+
--zd_dark_bgDarkerLighterMild_lValue: calc(var(--zd_contrastLevel) * 0.25%);
|
|
18
24
|
--zd_dark_text_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
19
25
|
--zd_dark_textLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
20
26
|
--zd_dark_textLighterDarker_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
21
|
-
--
|
|
22
|
-
--
|
|
27
|
+
--zd_dark_textLighterBothSecondary_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
28
|
+
--zd_dark_border_lValue: calc(var(--zd_contrastLevel) * 1.5%);
|
|
29
|
+
--zd_dark_borderLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1.5%);
|
|
23
30
|
--zd_alpha: 1;
|
|
24
|
-
--zd_bg_alpha: 0;
|
|
31
|
+
--zd_bg_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
32
|
+
--zd_border_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
25
33
|
}
|
|
@@ -1,25 +1,33 @@
|
|
|
1
1
|
:root [data-mode='default'] {
|
|
2
2
|
--zd_default_bg_lValue: calc(0 * 1%);
|
|
3
3
|
--zd_default_bgDarkerBoth_lValue: calc(0 * 1%);
|
|
4
|
+
--zd_default_bgDarkerBothMild_lValue: calc(0 * 1%);
|
|
4
5
|
--zd_default_bgDarkerLighter_lValue: calc(0 * 1%);
|
|
6
|
+
--zd_default_bgDarkerLighterMild_lValue: calc(0 * 1%);
|
|
5
7
|
--zd_default_text_lValue: calc(0 * 1%);
|
|
6
8
|
--zd_default_textLighterBoth_lValue: calc(0 * 1%);
|
|
7
9
|
--zd_default_textLighterDarker_lValue: calc(0 * 1%);
|
|
10
|
+
--zd_default_textLighterBothSecondary_lValue: calc(0 * 1%);
|
|
8
11
|
--zd_default_border_lValue: calc(0 * 1%);
|
|
9
12
|
--zd_default_borderLighterBoth_lValue: calc(0 * 1%);
|
|
10
13
|
--zd_alpha: 0;
|
|
11
14
|
--zd_bg_alpha: 0;
|
|
15
|
+
--zd_border_alpha: 0;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
[data-mode='default']:global(.contrast) {
|
|
15
19
|
--zd_default_bg_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
16
20
|
--zd_default_bgDarkerBoth_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
21
|
+
--zd_default_bgDarkerBothMild_lValue: calc(var(--zd_contrastLevel) * -0.25%);
|
|
17
22
|
--zd_default_bgDarkerLighter_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
23
|
+
--zd_default_bgDarkerLighterMild_lValue: calc(var(--zd_contrastLevel) * -0.25%);
|
|
18
24
|
--zd_default_text_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
19
25
|
--zd_default_textLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
20
26
|
--zd_default_textLighterDarker_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
21
|
-
--
|
|
22
|
-
--
|
|
27
|
+
--zd_default_textLighterBothSecondary_lValue: calc(var(--zd_contrastLevel) * 20%);
|
|
28
|
+
--zd_default_border_lValue: calc(var(--zd_contrastLevel) * -1.5%);
|
|
29
|
+
--zd_default_borderLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1.5%);
|
|
23
30
|
--zd_alpha: 1;
|
|
24
|
-
--zd_bg_alpha: 0;
|
|
31
|
+
--zd_bg_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
32
|
+
--zd_border_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
25
33
|
}
|
|
@@ -1,25 +1,33 @@
|
|
|
1
1
|
:root [data-mode='pureDark'] {
|
|
2
2
|
--zd_pureDark_bg_lValue: calc(0 * 1%);
|
|
3
3
|
--zd_pureDark_bgDarkerBoth_lValue: calc(0 * 1%);
|
|
4
|
+
--zd_pureDark_bgDarkerBothMild_lValue: calc(0 * 1%);
|
|
4
5
|
--zd_pureDark_bgDarkerLighter_lValue: calc(0 * 1%);
|
|
6
|
+
--zd_pureDark_bgDarkerLighterMild_lValue: calc(0 * 1%);
|
|
5
7
|
--zd_pureDark_text_lValue: calc(0 * 1%);
|
|
6
8
|
--zd_pureDark_textLighterBoth_lValue: calc(0 * 1%);
|
|
7
9
|
--zd_pureDark_textLighterDarker_lValue: calc(0 * 1%);
|
|
10
|
+
--zd_pureDark_textLighterBothSecondary_lValue: calc(0 * 1%);
|
|
8
11
|
--zd_pureDark_border_lValue: calc(0 * 1%);
|
|
9
12
|
--zd_pureDark_borderLighterBoth_lValue: calc(0 * 1%);
|
|
10
13
|
--zd_alpha: 0;
|
|
11
14
|
--zd_bg_alpha: 0;
|
|
15
|
+
--zd_border_alpha: 0;
|
|
12
16
|
}
|
|
13
17
|
|
|
14
18
|
[data-mode='pureDark']:global(.contrast) {
|
|
15
19
|
--zd_pureDark_bg_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
16
20
|
--zd_pureDark_bgDarkerBoth_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
21
|
+
--zd_pureDark_bgDarkerBothMild_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
17
22
|
--zd_pureDark_bgDarkerLighter_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
23
|
+
--zd_pureDark_bgDarkerLighterMild_lValue: calc(var(--zd_contrastLevel) * 0.25%);
|
|
18
24
|
--zd_pureDark_text_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
19
25
|
--zd_pureDark_textLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
20
26
|
--zd_pureDark_textLighterDarker_lValue: calc(var(--zd_contrastLevel) * -1%);
|
|
21
|
-
--
|
|
22
|
-
--
|
|
27
|
+
--zd_pureDark_textLighterBothSecondary_lValue: calc(var(--zd_contrastLevel) * 1%);
|
|
28
|
+
--zd_pureDark_border_lValue: calc(var(--zd_contrastLevel) * 1.5%);
|
|
29
|
+
--zd_pureDark_borderLighterBoth_lValue: calc(var(--zd_contrastLevel) * 1.5%);
|
|
23
30
|
--zd_alpha: 1;
|
|
24
|
-
--zd_bg_alpha: 0;
|
|
31
|
+
--zd_bg_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
32
|
+
--zd_border_alpha: calc(var(--zd_contrastLevel) * 0.02);
|
|
25
33
|
}
|
package/es/Avatar/Avatar.js
CHANGED
|
@@ -125,7 +125,9 @@ export default class Avatar extends React.Component {
|
|
|
125
125
|
alternateSrc,
|
|
126
126
|
isAnimate,
|
|
127
127
|
dataSelectorId,
|
|
128
|
-
customProps
|
|
128
|
+
customProps,
|
|
129
|
+
needInnerBorder,
|
|
130
|
+
needDefaultBorder
|
|
129
131
|
} = this.props;
|
|
130
132
|
let {
|
|
131
133
|
AvatarProps = {}
|
|
@@ -134,12 +136,13 @@ export default class Avatar extends React.Component {
|
|
|
134
136
|
let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
|
|
135
137
|
initial = initial || this.getInitialByFullName(name);
|
|
136
138
|
let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
|
|
137
|
-
let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
|
|
139
|
+
//let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
|
|
138
140
|
let showAvatar = src && !isInvalidImageList;
|
|
139
141
|
let showInitial = !showAvatar || showAvatar && isInvalidImageList;
|
|
140
142
|
const showAlternateAvatar = alternateSrc ? showInitial : false;
|
|
141
143
|
let border = borderOnHover || onClick;
|
|
142
|
-
let
|
|
144
|
+
let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
|
|
145
|
+
let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
|
|
143
146
|
borderStyle = showAlternateAvatar ? '' : borderStyle;
|
|
144
147
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
145
148
|
className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
|
|
@@ -152,7 +155,7 @@ export default class Avatar extends React.Component {
|
|
|
152
155
|
"data-id": `${dataId}_AvatarInitial`,
|
|
153
156
|
"data-selector-id": `${dataSelectorId}_AvatarInitial`
|
|
154
157
|
}, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
|
|
155
|
-
className: `${style.image} ${isAnimate ? style.animate : ''}`,
|
|
158
|
+
className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
|
|
156
159
|
"data-id": `${dataId}_AvatarImg`,
|
|
157
160
|
"data-selector-id": `${dataSelectorId}_AvatarImg`,
|
|
158
161
|
name: name,
|
|
@@ -160,7 +163,7 @@ export default class Avatar extends React.Component {
|
|
|
160
163
|
onLoad: this.putValidImageURLJSON,
|
|
161
164
|
src: showAlternateAvatar ? alternateSrc : src,
|
|
162
165
|
alt: name
|
|
163
|
-
}),
|
|
166
|
+
}), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
|
|
164
167
|
className: `${style.shadow} ${textStyle} `
|
|
165
168
|
})));
|
|
166
169
|
}
|
|
@@ -97,6 +97,10 @@
|
|
|
97
97
|
animation-duration: var(--zd_transition2);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
+
.innerBorder {
|
|
101
|
+
border: 1px solid var(--zdt_avatarteam_innerCircle);
|
|
102
|
+
}
|
|
103
|
+
|
|
100
104
|
.square_small {
|
|
101
105
|
--avatar_border_radius: 4px;
|
|
102
106
|
}
|
|
@@ -136,6 +140,10 @@
|
|
|
136
140
|
display: inline-block;
|
|
137
141
|
}
|
|
138
142
|
|
|
143
|
+
.xxsmall {
|
|
144
|
+
--avatar_font_size: var(--zd_font_size8);
|
|
145
|
+
}
|
|
146
|
+
|
|
139
147
|
.small {
|
|
140
148
|
--avatar_font_size: var(--zd_font_size9);
|
|
141
149
|
}
|
|
@@ -9,7 +9,7 @@ export const propTypes = {
|
|
|
9
9
|
onClick: PropTypes.func,
|
|
10
10
|
palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
|
|
11
11
|
shape: PropTypes.oneOf(['circle', 'square']),
|
|
12
|
-
size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
|
|
12
|
+
size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
|
|
13
13
|
src: PropTypes.string,
|
|
14
14
|
textPalette: PropTypes.oneOf(['white', 'black']),
|
|
15
15
|
title: PropTypes.string,
|
|
@@ -20,5 +20,7 @@ export const propTypes = {
|
|
|
20
20
|
customProps: PropTypes.shape({
|
|
21
21
|
AvatarProps: PropTypes.object
|
|
22
22
|
}),
|
|
23
|
-
isAnimate: PropTypes.bool
|
|
23
|
+
isAnimate: PropTypes.bool,
|
|
24
|
+
needInnerBorder: PropTypes.bool,
|
|
25
|
+
needDefaultBorder: PropTypes.bool
|
|
24
26
|
};
|
|
@@ -32,7 +32,10 @@ export default class AvatarTeam extends React.Component {
|
|
|
32
32
|
borderOnActive,
|
|
33
33
|
borderOnHover,
|
|
34
34
|
dataSelectorId,
|
|
35
|
-
customProps
|
|
35
|
+
customProps,
|
|
36
|
+
needInnerBorder,
|
|
37
|
+
needBorder,
|
|
38
|
+
needDefaultBorder
|
|
36
39
|
} = this.props;
|
|
37
40
|
let {
|
|
38
41
|
AvatarTeamProps = {},
|
|
@@ -58,7 +61,10 @@ export default class AvatarTeam extends React.Component {
|
|
|
58
61
|
needTitle: needTitle,
|
|
59
62
|
customClass: customAvatar,
|
|
60
63
|
borderOnActive: borderOnActive,
|
|
61
|
-
borderOnHover: border
|
|
64
|
+
borderOnHover: border,
|
|
65
|
+
needInnerBorder: needInnerBorder,
|
|
66
|
+
needBorder: needBorder,
|
|
67
|
+
needDefaultBorder: needDefaultBorder
|
|
62
68
|
}, AvatarProps)), /*#__PURE__*/React.createElement("span", {
|
|
63
69
|
className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
|
|
64
70
|
${style[`${size}team`]} ${customAvatarTeam}`
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
--avatarteam_border_width: var(--zd_size1);
|
|
4
4
|
--avatarteam_border_style: solid;
|
|
5
5
|
--avatarteam_border_color: var(--zdt_avatarteam_default_border);
|
|
6
|
+
--avatarteam_outline_width: var(--zd_size1);
|
|
7
|
+
--avatarteam_outline_style: solid;
|
|
8
|
+
--avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
|
|
6
9
|
--avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
|
|
7
10
|
--avatarteam_width: var(--zd_size5);
|
|
8
11
|
--avatarteam_height: var(--zd_size5);
|
|
@@ -16,6 +19,7 @@
|
|
|
16
19
|
position: relative;
|
|
17
20
|
display: inline-block;
|
|
18
21
|
font-size: 0;
|
|
22
|
+
vertical-align: middle;
|
|
19
23
|
}
|
|
20
24
|
.team {
|
|
21
25
|
composes: varClass;
|
|
@@ -23,6 +27,9 @@
|
|
|
23
27
|
top: var(--avatarteam_top_top);
|
|
24
28
|
width: var(--avatarteam_width);
|
|
25
29
|
height: var(--avatarteam_height);
|
|
30
|
+
outline-width: var(--avatarteam_outline_width);
|
|
31
|
+
outline-style: var(--avatarteam_outline_style);
|
|
32
|
+
outline-color: var(--avatarteam_outline_color);
|
|
26
33
|
border-width: var(--avatarteam_border_width);
|
|
27
34
|
border-style: var(--avatarteam_border_style);
|
|
28
35
|
border-color: var(--avatarteam_border_color);
|
|
@@ -38,11 +45,11 @@
|
|
|
38
45
|
right: 50%;
|
|
39
46
|
}
|
|
40
47
|
.nofill {
|
|
41
|
-
--avatarteam_border_color: var(--
|
|
48
|
+
--avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
|
|
42
49
|
}
|
|
43
50
|
.primaryFilled,
|
|
44
51
|
.infoFilled {
|
|
45
|
-
--avatarteam_bg_color: var(--
|
|
52
|
+
--avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
|
|
46
53
|
}
|
|
47
54
|
.secondaryFilled {
|
|
48
55
|
--avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
|
|
@@ -64,6 +71,9 @@
|
|
|
64
71
|
height: inherit;
|
|
65
72
|
width: inherit;
|
|
66
73
|
top: var(--avatarteam_bottom_top);
|
|
74
|
+
outline-width: var(--avatarteam_outline_width);
|
|
75
|
+
outline-style: var(--avatarteam_outline_style);
|
|
76
|
+
outline-color: var( --avatarteam_outline_color);
|
|
67
77
|
}
|
|
68
78
|
.team:after, .team:before {
|
|
69
79
|
border: inherit;
|
|
@@ -80,7 +90,8 @@
|
|
|
80
90
|
left: var(--avatarteam_bottom_right);
|
|
81
91
|
}
|
|
82
92
|
.smallteam,
|
|
83
|
-
.xsmallteam
|
|
93
|
+
.xsmallteam,
|
|
94
|
+
.xxsmallteam {
|
|
84
95
|
--avatarteam_height: var(--zd_size3);
|
|
85
96
|
--avatarteam_width: var(--zd_size3);
|
|
86
97
|
}
|
|
@@ -94,6 +105,22 @@
|
|
|
94
105
|
--avatarteam_height: var(--zd_size7);
|
|
95
106
|
--avatarteam_width: var(--zd_size7);
|
|
96
107
|
}
|
|
108
|
+
|
|
109
|
+
.xxsmallteam {
|
|
110
|
+
--avatarteam_top_top: 0px;
|
|
111
|
+
}
|
|
112
|
+
.xxsmallteam::after,
|
|
113
|
+
.xxsmallteam:before {
|
|
114
|
+
--avatarteam_bottom_top: var(--zd_size13);
|
|
115
|
+
}
|
|
116
|
+
.xxsmallteam:after {
|
|
117
|
+
--avatarteam_bottom_left: calc(var(--zd_size8) * -1);
|
|
118
|
+
}
|
|
119
|
+
.xxsmallteam:before {
|
|
120
|
+
--avatarteam_bottom_right: calc(var(--zd_size8) * -1);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
|
|
97
124
|
.smallteam::after,
|
|
98
125
|
.smallteam:before {
|
|
99
126
|
--avatarteam_bottom_top: var(--zd_size17);
|
|
@@ -7,9 +7,10 @@ export const propTypes = {
|
|
|
7
7
|
needTitle: PropTypes.bool,
|
|
8
8
|
onClick: PropTypes.func,
|
|
9
9
|
palette: PropTypes.oneOf(['primary', 'secondary', 'info']),
|
|
10
|
-
size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
|
|
10
|
+
size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
|
|
11
11
|
src: PropTypes.string,
|
|
12
12
|
textPalette: PropTypes.oneOf(['white', 'black']),
|
|
13
|
+
needBorder: PropTypes.bool,
|
|
13
14
|
title: PropTypes.string,
|
|
14
15
|
customClass: PropTypes.shape({
|
|
15
16
|
customAvatar: PropTypes.string,
|
|
@@ -17,6 +18,8 @@ export const propTypes = {
|
|
|
17
18
|
}),
|
|
18
19
|
borderOnActive: PropTypes.bool,
|
|
19
20
|
borderOnHover: PropTypes.bool,
|
|
21
|
+
needInnerBorder: PropTypes.bool,
|
|
22
|
+
needDefaultBorder: PropTypes.bool,
|
|
20
23
|
customProps: PropTypes.shape({
|
|
21
24
|
AvatarTeamProps: PropTypes.object,
|
|
22
25
|
AvatarProps: PropTypes.object
|