@zohodesk/components 1.0.0-temp-250 → 1.0.0-temp-253

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 (168) hide show
  1. package/README.md +29 -0
  2. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +68 -0
  3. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +68 -0
  4. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +68 -0
  5. package/es/Avatar/Avatar.module.css +8 -8
  6. package/es/AvatarTeam/AvatarTeam.module.css +189 -189
  7. package/es/Button/css/Button.module.css +19 -19
  8. package/es/Buttongroup/Buttongroup.module.css +85 -107
  9. package/es/Card/Card.module.css +6 -4
  10. package/es/CheckBox/CheckBox.module.css +3 -10
  11. package/es/DateTime/DateTime.module.css +22 -35
  12. package/es/DateTime/DateWidget.module.css +1 -1
  13. package/es/DateTime/YearView.module.css +8 -10
  14. package/es/DropBox/DropBoxElement/DropBoxElement.js +10 -1
  15. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +8 -3
  16. package/es/DropBox/DropBoxElement/props/propTypes.js +2 -1
  17. package/es/DropBox/css/DropBox.module.css +58 -58
  18. package/es/DropDown/DropDown.module.css +2 -1
  19. package/es/DropDown/DropDownHeading.module.css +53 -53
  20. package/es/DropDown/DropDownItem.module.css +87 -94
  21. package/es/DropDown/DropDownSearch.module.css +3 -3
  22. package/es/DropDown/DropDownSeparator.module.css +2 -1
  23. package/es/Label/Label.module.css +5 -5
  24. package/es/ListItem/ListItem.module.css +23 -45
  25. package/es/MultiSelect/MobileHeader/MobileHeader.module.css +4 -3
  26. package/es/MultiSelect/MultiSelect.module.css +21 -34
  27. package/es/MultiSelect/SelectedOptions.module.css +6 -10
  28. package/es/PopOver/PopOver.module.css +8 -8
  29. package/es/Radio/Radio.module.css +11 -12
  30. package/es/ResponsiveDropBox/ResponsiveDropBox.js +1 -0
  31. package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +1 -1
  32. package/es/Ribbon/Ribbon.module.css +499 -505
  33. package/es/RippleEffect/RippleEffect.module.css +55 -17
  34. package/es/Select/Select.module.css +22 -17
  35. package/es/Stencils/Stencils.module.css +30 -14
  36. package/es/Switch/Switch.module.css +121 -128
  37. package/es/Tab/Tab.module.css +8 -15
  38. package/es/Tab/Tabs.module.css +12 -22
  39. package/es/Tag/Tag.module.css +255 -255
  40. package/es/TextBox/TextBox.module.css +9 -9
  41. package/es/TextBoxIcon/TextBoxIcon.module.css +1 -1
  42. package/es/Textarea/Textarea.module.css +18 -18
  43. package/es/Tooltip/Tooltip.module.css +5 -4
  44. package/es/Typography/Typography.js +18 -8
  45. package/es/Typography/__tests__/Typography.spec.js +198 -6
  46. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1235 -2
  47. package/es/Typography/css/Typography.module.css +4 -0
  48. package/es/Typography/css/cssJSLogic.js +53 -21
  49. package/es/Typography/props/defaultProps.js +4 -3
  50. package/es/Typography/props/propTypes.js +68 -26
  51. package/es/Typography/utils/textHighlighter.js +4 -2
  52. package/es/common/avatarsizes.module.css +16 -16
  53. package/es/common/customscroll.module.css +141 -141
  54. package/es/shared/ArrowIcon/ArrowIcon.module.css +3 -2
  55. package/es/shared/InputFieldLine/InputFieldLine.module.css +2 -2
  56. package/es/v1/Button/Button.js +201 -0
  57. package/es/v1/Button/README.md +110 -0
  58. package/es/v1/Button/__tests__/Button.spec.js +272 -0
  59. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1160 -0
  60. package/es/v1/Button/_shared/Loader/Loader.js +33 -0
  61. package/es/v1/Button/_shared/Loader/Loader_v1.module.css +42 -0
  62. package/es/v1/Button/_shared/Loader/__tests__/Loader.spec.js +21 -0
  63. package/es/v1/Button/_shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +49 -0
  64. package/es/v1/Button/_shared/Loader/props/defaultProps.js +4 -0
  65. package/es/v1/Button/_shared/Loader/props/propTypes.js +7 -0
  66. package/es/v1/Button/_shared/SuccessTick/SuccessTick.js +25 -0
  67. package/es/v1/Button/_shared/SuccessTick/SuccessTick_v1.module.css +21 -0
  68. package/es/v1/Button/_shared/SuccessTick/__tests__/SuccessTick.spec.js +21 -0
  69. package/es/v1/Button/_shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +31 -0
  70. package/es/v1/Button/_shared/SuccessTick/props/defaultProps.js +4 -0
  71. package/es/v1/Button/_shared/SuccessTick/props/propTypes.js +7 -0
  72. package/es/v1/Button/constants/index.js +82 -0
  73. package/es/v1/Button/css/Button_v1.module.css +119 -0
  74. package/es/v1/Button/css/cssJSLogic.js +96 -0
  75. package/es/v1/Button/index.js +2 -0
  76. package/es/v1/Button/props/defaultProps.js +26 -0
  77. package/es/v1/Button/props/propTypes.js +43 -0
  78. package/es/v1/Switch/css/Switch_v1.module.css +28 -28
  79. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +629 -0
  80. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +489 -0
  81. package/es/v1/helpers/colorHelpers/colorHelper.js +176 -0
  82. package/es/v1/helpers/colorHelpers/constants/index.js +79 -0
  83. package/es/v1/helpers/colorHelpers/index.js +4 -0
  84. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +415 -0
  85. package/es/v1/helpers/colorHelpers/text/textColor.module.css +368 -0
  86. package/lib/Avatar/Avatar.module.css +8 -8
  87. package/lib/AvatarTeam/AvatarTeam.module.css +189 -189
  88. package/lib/Button/css/Button.module.css +19 -19
  89. package/lib/Buttongroup/Buttongroup.module.css +85 -107
  90. package/lib/Card/Card.module.css +6 -4
  91. package/lib/CheckBox/CheckBox.module.css +3 -10
  92. package/lib/DateTime/DateTime.module.css +22 -35
  93. package/lib/DateTime/DateWidget.module.css +1 -1
  94. package/lib/DateTime/YearView.module.css +8 -10
  95. package/lib/DropBox/DropBoxElement/DropBoxElement.js +10 -1
  96. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +8 -3
  97. package/lib/DropBox/DropBoxElement/props/propTypes.js +2 -1
  98. package/lib/DropBox/css/DropBox.module.css +58 -58
  99. package/lib/DropDown/DropDown.module.css +2 -1
  100. package/lib/DropDown/DropDownHeading.module.css +53 -53
  101. package/lib/DropDown/DropDownItem.module.css +87 -94
  102. package/lib/DropDown/DropDownSearch.module.css +3 -3
  103. package/lib/DropDown/DropDownSeparator.module.css +2 -1
  104. package/lib/Label/Label.module.css +5 -5
  105. package/lib/ListItem/ListItem.module.css +23 -45
  106. package/lib/MultiSelect/MobileHeader/MobileHeader.module.css +4 -3
  107. package/lib/MultiSelect/MultiSelect.module.css +21 -34
  108. package/lib/MultiSelect/SelectedOptions.module.css +6 -10
  109. package/lib/PopOver/PopOver.module.css +8 -8
  110. package/lib/Radio/Radio.module.css +11 -12
  111. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +1 -0
  112. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +1 -1
  113. package/lib/Ribbon/Ribbon.module.css +499 -505
  114. package/lib/RippleEffect/RippleEffect.module.css +55 -17
  115. package/lib/Select/Select.module.css +22 -17
  116. package/lib/Stencils/Stencils.module.css +30 -14
  117. package/lib/Switch/Switch.module.css +121 -128
  118. package/lib/Tab/Tab.module.css +8 -15
  119. package/lib/Tab/Tabs.module.css +12 -22
  120. package/lib/Tag/Tag.module.css +255 -255
  121. package/lib/TextBox/TextBox.module.css +9 -9
  122. package/lib/TextBoxIcon/TextBoxIcon.module.css +1 -1
  123. package/lib/Textarea/Textarea.module.css +18 -18
  124. package/lib/Tooltip/Tooltip.module.css +5 -4
  125. package/lib/Typography/Typography.js +15 -5
  126. package/lib/Typography/__tests__/Typography.spec.js +284 -92
  127. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +1235 -2
  128. package/lib/Typography/css/Typography.module.css +4 -0
  129. package/lib/Typography/css/cssJSLogic.js +38 -6
  130. package/lib/Typography/props/defaultProps.js +6 -3
  131. package/lib/Typography/props/propTypes.js +67 -23
  132. package/lib/Typography/utils/textHighlighter.js +6 -3
  133. package/lib/common/avatarsizes.module.css +16 -16
  134. package/lib/common/customscroll.module.css +141 -141
  135. package/lib/shared/ArrowIcon/ArrowIcon.module.css +3 -2
  136. package/lib/shared/InputFieldLine/InputFieldLine.module.css +2 -2
  137. package/lib/v1/Button/Button.js +239 -0
  138. package/lib/v1/Button/README.md +110 -0
  139. package/lib/v1/Button/__tests__/Button.spec.js +293 -0
  140. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1160 -0
  141. package/lib/v1/Button/_shared/Loader/Loader.js +43 -0
  142. package/lib/v1/Button/_shared/Loader/Loader_v1.module.css +42 -0
  143. package/lib/v1/Button/_shared/Loader/__tests__/Loader.spec.js +28 -0
  144. package/lib/v1/Button/_shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +49 -0
  145. package/lib/v1/Button/_shared/Loader/props/defaultProps.js +11 -0
  146. package/lib/v1/Button/_shared/Loader/props/propTypes.js +18 -0
  147. package/lib/v1/Button/_shared/SuccessTick/SuccessTick.js +35 -0
  148. package/lib/v1/Button/_shared/SuccessTick/SuccessTick_v1.module.css +21 -0
  149. package/lib/v1/Button/_shared/SuccessTick/__tests__/SuccessTick.spec.js +28 -0
  150. package/lib/v1/Button/_shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +31 -0
  151. package/lib/v1/Button/_shared/SuccessTick/props/defaultProps.js +11 -0
  152. package/lib/v1/Button/_shared/SuccessTick/props/propTypes.js +18 -0
  153. package/lib/v1/Button/constants/index.js +114 -0
  154. package/lib/v1/Button/css/Button_v1.module.css +119 -0
  155. package/lib/v1/Button/css/cssJSLogic.js +88 -0
  156. package/lib/v1/Button/index.js +21 -0
  157. package/lib/v1/Button/props/defaultProps.js +36 -0
  158. package/lib/v1/Button/props/propTypes.js +56 -0
  159. package/lib/v1/Switch/css/Switch_v1.module.css +28 -28
  160. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +629 -0
  161. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +489 -0
  162. package/lib/v1/helpers/colorHelpers/colorHelper.js +190 -0
  163. package/lib/v1/helpers/colorHelpers/constants/index.js +87 -0
  164. package/lib/v1/helpers/colorHelpers/index.js +57 -0
  165. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +415 -0
  166. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +368 -0
  167. package/package.json +17 -14
  168. package/_react-cli.config.js +0 -24
package/README.md CHANGED
@@ -2,6 +2,35 @@
2
2
 
3
3
  Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
4
4
 
5
+ # 1.6.12
6
+
7
+ - v1/Button/_shared/SuccessTick/SuccessTick.module.css file renamed to SuccessTick_v1.module.css
8
+ - v1/Button/_shared/Loader/Loader.module.css file renamed to Loader_v1.module.css
9
+
10
+ # 1.6.9, 1.6.10 , 1.6.11
11
+
12
+ - padding, margin based css properties migrated to padding-inline,padding-block, margin-inline, margin-block
13
+ - Introduced a new **Button** component in V1.
14
+ - Added a new **helpers** folder in V1 to organize reusable utility functions.
15
+ - Created a **colorHelper** utility inside the helpers folder.
16
+
17
+ # 1.6.8
18
+
19
+ - **Typography**
20
+ - `breakSpaces` value supported for the **$ui_whiteSpace** prop.
21
+ - Prefixless prop fallbacks are supported
22
+ - `tagName` config in **highlightText** has been renamed to `as`. (fallback supported)
23
+
24
+
25
+ # 1.6.7
26
+
27
+ - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed.
28
+
29
+ # 1.6.6
30
+
31
+ - CTA theme variable tokens moved to variables package
32
+ - **Dependency**: @zohodesk/variables@1.3.0
33
+
5
34
  # 1.6.5
6
35
 
7
36
  - Added cardContent support in **SelectWithIcon**.
package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css CHANGED
@@ -14,4 +14,72 @@
14
14
  --zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
15
15
  --zdt_v1_label_disabled_text:var(--dot_inputDisable);
16
16
  --zdt_v1_label_secondary_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+
18
+ /* palette - universal color tokens */
19
+ --zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
20
+ --zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
21
+ --zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
22
+ --zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
23
+ --zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
24
+ --zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
25
+ --zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
26
+ --zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
27
+ --zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
28
+ --zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
29
+ --zdt_v1_palette_grey_light_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
30
+ --zdt_v1_palette_grey_light_border:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
31
+ --zdt_v1_palette_grey_light_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
32
+ --zdt_v1_palette_grey_bg:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --zdt_v1_palette_grey_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
34
+ --zdt_v1_palette_grey_border:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
35
+ --zdt_v1_palette_grey_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
36
+ --zdt_v1_palette_grey_hover_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
+ --zdt_v1_palette_grey_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
38
+ --zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
39
+ --zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
40
+ --zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
41
+ --zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
42
+ --zdt_v1_palette_blue_hover_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
43
+ --zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
44
+ --zdt_v1_palette_blue_light_bg:hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
45
+ --zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
46
+ --zdt_v1_palette_blue_light_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
47
+ --zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
48
+ --zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
49
+ --zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
50
+ --zdt_v1_palette_green_hover_bg:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
51
+ --zdt_v1_palette_green_hover_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
52
+ --zdt_v1_palette_green_hover_border:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
53
+ --zdt_v1_palette_green_light_bg:hsla(191, calc(var(--zd-saturation, 1) * 21.65%), calc(19.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
54
+ --zdt_v1_palette_green_light_border:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
55
+ --zdt_v1_palette_green_light_hover_bg:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
56
+ --zdt_v1_palette_orange_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
57
+ --zdt_v1_palette_orange_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
58
+ --zdt_v1_palette_orange_border:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
59
+ --zdt_v1_palette_orange_hover_bg:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
60
+ --zdt_v1_palette_orange_hover_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
61
+ --zdt_v1_palette_orange_hover_border:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
62
+ --zdt_v1_palette_orange_light_bg:hsla(252, calc(var(--zd-saturation, 1) * 4.85%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
63
+ --zdt_v1_palette_orange_light_border:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
64
+ --zdt_v1_palette_orange_light_hover_bg:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
65
+ --zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
66
+ --zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
67
+ --zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
68
+ --zdt_v1_palette_red_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
69
+ --zdt_v1_palette_red_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 77.03%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
70
+ --zdt_v1_palette_red_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
71
+ --zdt_v1_palette_red_light_bg:hsla(258, calc(var(--zd-saturation, 1) * 12.62%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
72
+ --zdt_v1_palette_red_light_border:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
+ --zdt_v1_palette_red_light_hover_bg:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
74
+ --zdt_v1_palette_yellow_bg:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
75
+ --zdt_v1_palette_yellow_text:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
76
+ --zdt_v1_palette_yellow_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
77
+ --zdt_v1_palette_yellow_hover_bg:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
78
+ --zdt_v1_palette_yellow_hover_text:hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
79
+ --zdt_v1_palette_yellow_hover_border:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
80
+ --zdt_v1_palette_yellow_light_bg:hsla(218, calc(var(--zd-saturation, 1) * 7.69%), calc(20.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
81
+ --zdt_v1_palette_yellow_light_border:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
82
+ --zdt_v1_palette_yellow_light_hover_bg:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
83
+ --zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
84
+ --zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
17
85
  }
package/assets/Appearance/light/mode/Component_v1_LightMode.module.css CHANGED
@@ -14,4 +14,72 @@
14
14
  --zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
15
15
  --zdt_v1_label_disabled_text:var(--dot_inputDisable);
16
16
  --zdt_v1_label_secondary_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+
18
+ /* palette - universal color tokens */
19
+ --zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
20
+ --zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
21
+ --zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
22
+ --zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
23
+ --zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
24
+ --zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
25
+ --zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
26
+ --zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
27
+ --zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
28
+ --zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
29
+ --zdt_v1_palette_grey_light_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
30
+ --zdt_v1_palette_grey_light_border:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
31
+ --zdt_v1_palette_grey_light_hover_bg:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
32
+ --zdt_v1_palette_grey_bg:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --zdt_v1_palette_grey_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
34
+ --zdt_v1_palette_grey_border:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
35
+ --zdt_v1_palette_grey_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
36
+ --zdt_v1_palette_grey_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
+ --zdt_v1_palette_grey_hover_border:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
38
+ --zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
39
+ --zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
40
+ --zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
41
+ --zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
42
+ --zdt_v1_palette_blue_hover_text:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
43
+ --zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
44
+ --zdt_v1_palette_blue_light_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
45
+ --zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
46
+ --zdt_v1_palette_blue_light_hover_bg:hsla(212, calc(var(--zd-saturation, 1) * 80.95%), calc(95.88% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
47
+ --zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
48
+ --zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
49
+ --zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
50
+ --zdt_v1_palette_green_hover_bg:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
51
+ --zdt_v1_palette_green_hover_text:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
52
+ --zdt_v1_palette_green_hover_border:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
53
+ --zdt_v1_palette_green_light_bg:hsla(143, calc(var(--zd-saturation, 1) * 44.44%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
54
+ --zdt_v1_palette_green_light_border:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
55
+ --zdt_v1_palette_green_light_hover_bg:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
56
+ --zdt_v1_palette_orange_bg:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
57
+ --zdt_v1_palette_orange_text:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
58
+ --zdt_v1_palette_orange_border:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
59
+ --zdt_v1_palette_orange_hover_bg:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
60
+ --zdt_v1_palette_orange_hover_text:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
61
+ --zdt_v1_palette_orange_hover_border:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
62
+ --zdt_v1_palette_orange_light_bg:hsla(26, calc(var(--zd-saturation, 1) * 77.78%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
63
+ --zdt_v1_palette_orange_light_border:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
64
+ --zdt_v1_palette_orange_light_hover_bg:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
65
+ --zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
66
+ --zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
67
+ --zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
68
+ --zdt_v1_palette_red_hover_bg:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
69
+ --zdt_v1_palette_red_hover_text:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
70
+ --zdt_v1_palette_red_hover_border:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
71
+ --zdt_v1_palette_red_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.43%), calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
72
+ --zdt_v1_palette_red_light_border:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
+ --zdt_v1_palette_red_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
74
+ --zdt_v1_palette_yellow_bg:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
75
+ --zdt_v1_palette_yellow_text:hsla(46, calc(var(--zd-saturation, 1) * 92.59%), calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
76
+ --zdt_v1_palette_yellow_border:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
77
+ --zdt_v1_palette_yellow_hover_bg:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
78
+ --zdt_v1_palette_yellow_hover_text:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(25.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
79
+ --zdt_v1_palette_yellow_hover_border:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
80
+ --zdt_v1_palette_yellow_light_bg:hsla(45, calc(var(--zd-saturation, 1) * 83.33%), calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
81
+ --zdt_v1_palette_yellow_light_border:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
82
+ --zdt_v1_palette_yellow_light_hover_bg:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
83
+ --zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
84
+ --zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
17
85
  }
package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css CHANGED
@@ -14,4 +14,72 @@
14
14
  --zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
15
15
  --zdt_v1_label_disabled_text:var(--dot_inputDisable);
16
16
  --zdt_v1_label_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
17
+
18
+ /* palette - universal color tokens */
19
+ --zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
20
+ --zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
21
+ --zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
22
+ --zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
23
+ --zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
24
+ --zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
25
+ --zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
26
+ --zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
27
+ --zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
28
+ --zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
29
+ --zdt_v1_palette_grey_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
30
+ --zdt_v1_palette_grey_light_border:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
31
+ --zdt_v1_palette_grey_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
32
+ --zdt_v1_palette_grey_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
33
+ --zdt_v1_palette_grey_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
34
+ --zdt_v1_palette_grey_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
35
+ --zdt_v1_palette_grey_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
36
+ --zdt_v1_palette_grey_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
37
+ --zdt_v1_palette_grey_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
38
+ --zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
39
+ --zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
40
+ --zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
41
+ --zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
42
+ --zdt_v1_palette_blue_hover_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
43
+ --zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
44
+ --zdt_v1_palette_blue_light_bg:hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
45
+ --zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
46
+ --zdt_v1_palette_blue_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(16.86% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
47
+ --zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
48
+ --zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
49
+ --zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
50
+ --zdt_v1_palette_green_hover_bg:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
51
+ --zdt_v1_palette_green_hover_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
52
+ --zdt_v1_palette_green_hover_border:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
53
+ --zdt_v1_palette_green_light_bg:hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
54
+ --zdt_v1_palette_green_light_border:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
55
+ --zdt_v1_palette_green_light_hover_bg:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
56
+ --zdt_v1_palette_orange_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
57
+ --zdt_v1_palette_orange_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
58
+ --zdt_v1_palette_orange_border:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
59
+ --zdt_v1_palette_orange_hover_bg:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
60
+ --zdt_v1_palette_orange_hover_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
61
+ --zdt_v1_palette_orange_hover_border:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
62
+ --zdt_v1_palette_orange_light_bg:hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
63
+ --zdt_v1_palette_orange_light_border:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
64
+ --zdt_v1_palette_orange_light_hover_bg:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
65
+ --zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
66
+ --zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
67
+ --zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
68
+ --zdt_v1_palette_red_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
69
+ --zdt_v1_palette_red_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 77.03%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
70
+ --zdt_v1_palette_red_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
71
+ --zdt_v1_palette_red_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
72
+ --zdt_v1_palette_red_light_border:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
73
+ --zdt_v1_palette_red_light_hover_bg:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
74
+ --zdt_v1_palette_yellow_bg:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
75
+ --zdt_v1_palette_yellow_text:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
76
+ --zdt_v1_palette_yellow_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
77
+ --zdt_v1_palette_yellow_hover_bg:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
78
+ --zdt_v1_palette_yellow_hover_text:hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
79
+ --zdt_v1_palette_yellow_hover_border:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
80
+ --zdt_v1_palette_yellow_light_bg:hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
81
+ --zdt_v1_palette_yellow_light_border:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
82
+ --zdt_v1_palette_yellow_light_hover_bg:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
83
+ --zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
84
+ --zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
17
85
  }
package/es/Avatar/Avatar.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .varClass {
2
2
  /* avatar default variables */
3
3
  --avatar_text_color: var(--zdt_avatar_default_text);
4
- --avatar_font_size: 14px;
4
+ --avatar_font_size: var(--zd_font_size14);
5
5
  --avatar_bg_color: var(--zdt_avatar_default_bg);
6
6
  --avatar_border_radius: 50%;
7
7
  --avatar_border_width: 0;
@@ -141,31 +141,31 @@
141
141
  }
142
142
 
143
143
  .xxsmall {
144
- --avatar_font_size: 8px;
144
+ --avatar_font_size: var(--zd_font_size8);
145
145
  }
146
146
 
147
147
  .small {
148
- --avatar_font_size: 9px;
148
+ --avatar_font_size: var(--zd_font_size9);
149
149
  }
150
150
 
151
151
  .xsmall {
152
- --avatar_font_size: 12px;
152
+ --avatar_font_size: var(--zd_font_size12);
153
153
  }
154
154
 
155
155
  .medium {
156
- --avatar_font_size: 14px;
156
+ --avatar_font_size: var(--zd_font_size14);
157
157
  }
158
158
 
159
159
  .xmedium {
160
- --avatar_font_size: 14px;
160
+ --avatar_font_size: var(--zd_font_size14);
161
161
  }
162
162
 
163
163
  .large {
164
- --avatar_font_size: 18px;
164
+ --avatar_font_size: var(--zd_font_size18);
165
165
  }
166
166
 
167
167
  .xlarge {
168
- --avatar_font_size: 28px;
168
+ --avatar_font_size: var(--zd_font_size28);
169
169
  }
170
170
 
171
171
  .white {