@zohodesk/components 1.0.0-temp-116 → 1.0.0-temp-117

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -9,7 +9,8 @@
 	--dot_listItemActive: var(--zdt_cta_primary_light_bg);
 	
 	/* common */
-	--zdt_disable_bg: hsl(217, 23%, calc(11% + var(--zd_dark_exclude_lValue)), calc( 0.5 + var(--zd_alpha)));
+	--zdt_disable_bg: hsl(217, 23%, 11%,  0.5);
+	--zdt_contrast_shadow: hsl(0, 0%, 100%, 1);
 	
 	/* avatar */
 	--zdt_avatar_default_text: hsl(210, 7%, calc(89% + var(--zd_dark_text_lValue)), calc(1 + var(--zd_alpha)));

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -9,7 +9,8 @@
 	--dot_listItemActive: var(--zdt_cta_primary_light_bg);
 	
 	/* common */
-	--zdt_disable_bg: hsl(0, 0%, calc(100% + var(--zd_default_exclude_lValue)), calc( 0.5 + var(--zd_alpha)));
+	--zdt_disable_bg: hsl(0, 0%, 100%,  0.5);
+	--zdt_contrast_shadow: hsl(0, 0%, 0%, 1);
 	
 	/* avatar */
 	--zdt_avatar_default_text: hsl(0, 0%, calc(0% + var(--zd_default_text_lValue)), calc(1 + var(--zd_alpha)));

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -9,7 +9,8 @@
 	--dot_listItemActive: var(--zdt_cta_primary_light_bg);
 	
 	/* common */
-	--zdt_disable_bg: hsl(217, 23%, calc(11% + var(--zd_pureDark_exclude_lValue)), calc( 0.5 + var(--zd_alpha)));
+	--zdt_disable_bg: hsl(217, 23%, 11%,  0.5);
+	--zdt_contrast_shadow: hsl(0, 0%, 100%, 1);
 	
 	/* avatar */
 	--zdt_avatar_default_text: hsl(210, 7%, calc(89% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));

package/assets/Contrast/darkContrastLightness.module.css

@@ -7,6 +7,7 @@
    --zd_dark_elementText_lValue: 0%;
    --zd_dark_border_lValue: 0%;
    --zd_dark_boxShadow_lValue: 0%;
+   --zd_dark_plus_lValue: 0%;
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -20,6 +21,7 @@
    --zd_dark_elementText_lValue: -10%;
    --zd_dark_border_lValue: 10%;
    --zd_dark_boxShadow_lValue: 0%;
+   --zd_dark_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/assets/Contrast/defaultContrastLightness.module.css

@@ -7,6 +7,7 @@
    --zd_default_elementText_lValue: 0%;
    --zd_default_border_lValue: 0%;
    --zd_default_boxShadow_lValue: 0%;
+   --zd_default_plus_lValue: 0%;
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -20,6 +21,7 @@
    --zd_default_elementText_lValue: 10%;
    --zd_default_border_lValue: -10%;
    --zd_default_boxShadow_lValue: 0%;
+   --zd_default_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -7,6 +7,7 @@
    --zd_pureDark_elementText_lValue: 0%;
    --zd_pureDark_border_lValue: 0%;
    --zd_pureDark_boxShadow_lValue: 0%;
+   --zd_pureDark_plus_lValue: 0%;
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -20,6 +21,7 @@
    --zd_pureDark_elementText_lValue: -10%;
    --zd_pureDark_border_lValue: 10%;
    --zd_pureDark_boxShadow_lValue: 0%;
+   --zd_pureDark_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/es/AppContainer/AppContainer.js

@@ -13,6 +13,7 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/Avatar/Avatar.module.css

@@ -11,6 +11,7 @@
   --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
   --avatar_text_transform: uppercase;
 }
+
 .avatar {
   composes: varClass;
   position: relative;
@@ -21,15 +22,19 @@
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
+
 .border {
   border-color: var(--avatar_border_color);
 }
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
+
 .shadow {
   position: absolute;
   height: 100%;
@@ -38,98 +43,126 @@
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .shadow {
   left: 0;
 }
+
 [dir=rtl] .shadow {
   right: 0;
 }
+
 .shadow.black {
-  box-shadow: inset 0px 0px 5px var(--avatar_boxshadow);
+  box-shadow: var(--bs_avatar_black);
 }
+
 .shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
+  box-shadow: var(--bs_avatar_white);
 }
+
 .avatar, .circle {
   border-radius: var(--avatar_border_radius);
 }
+
 .border {
   --avatar_border_width: 1px;
 }
+
 .image {
   width: 100%;
   height: 100%;
   position: absolute;
-  top:0;
+  top: 0;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .image {
-  left:0;
+  left: 0;
 }
-[dir=rtl] .image { 
-  right:0;
+
+[dir=rtl] .image {
+  right: 0;
 }
-.animate{
-  composes:fadeIn modeForward from './../common/animation.module.css';
+
+.animate {
+  composes: fadeIn modeForward from './../common/animation.module.css';
 }
-[dir=ltr] .animate{
+
+[dir=ltr] .animate {
   animation-duration: var(--zd_transition2);
 }
-[dir=rtl] .animate{
+
+[dir=rtl] .animate {
   animation-duration: var(--zd_transition2);
 }
+
 .square_small {
   --avatar_border_radius: 4px;
 }
+
 .square_xsmall {
   --avatar_border_radius: 6px;
 }
+
 .square_medium,
 .square_xmedium {
   --avatar_border_radius: 8px;
 }
+
 .square_large,
 .square_xlarge {
   --avatar_border_radius: 10px;
 }
+
 .none {
   display: none;
 }
+
 .default {
   --avatar_border_width: 0;
 }
+
 .secondary {
   --avatar_bg_color: var(--zdt_avatar_secondary_bg);
 }
+
 .info {
   --avatar_bg_color: var(--zdt_avatar_info_bg);
 }
+
 .initial {
   text-transform: var(--avatar_text_transform);
   display: inline-block;
 }
+
 .small {
   --avatar_font_size: var(--zd_font_size9);
 }
+
 .xsmall {
   --avatar_font_size: var(--zd_font_size12);
 }
+
 .medium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .xmedium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .large {
   --avatar_font_size: var(--zd_font_size18);
 }
+
 .xlarge {
   --avatar_font_size: var(--zd_font_size28);
 }
+
 .white {
   --avatar_text_color: var(--zdt_avatar_white_text);
   --avatar_border_color: var(--zdt_avatar_white_border);
   --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
   --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
-}
+}

package/es/Button/Button.module.css

@@ -24,13 +24,14 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
   letter-spacing: var(--button_letter_spacing);
   opacity: var(--button_opacity);
-  transition-property: background-color, color, border; 
-  transition-duration: var(--zd_transition2); 
+  transition-property: background-color, color, border;
+  transition-duration: var(--zd_transition2);
   transition-timing-function: ease;
   border: 0;
   cursor: var(--button_cursor);
@@ -110,14 +111,14 @@
 .smallBtnprimaryfilled,
 .mediumBtnprimary,
 .mediumBtnprimaryfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_primary_box_shadow);
+  --button_box_shadow: var(--bs_button_primary);
 }
 
 .smallBtndanger,
 .smallBtndangerfilled,
 .mediumBtndanger,
 .mediumBtndangerfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
+  --button_box_shadow: var(--bs_button_danger);
 }
 
 .small,
@@ -135,6 +136,7 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
@@ -145,6 +147,7 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -159,6 +162,7 @@
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -169,6 +173,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -178,6 +183,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
@@ -188,6 +194,7 @@
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -197,6 +204,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -207,6 +215,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -216,6 +225,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -226,6 +236,7 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -325,18 +336,23 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -365,13 +381,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -522,4 +538,6 @@
   }
 }
 
-.loader{color:var(--dot_mirror)}
+.loader {
+  color: var(--dot_mirror)
+}

package/es/Buttongroup/Buttongroup.module.css

@@ -7,6 +7,7 @@
   --buttongroup_border_style: solid;
   --buttongroup_border_color: var(--zdt_buttongroup_default_border);
 }
+
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
@@ -19,71 +20,88 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
+  --buttongroup_box_shadow: var(--bs_buttongroup_footer);
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)/*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)
+    /*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)  ;
 }
+
 .header {
   --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
-[dir=ltr] .tab > div button:first-child {
+
+[dir=ltr] .tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
-[dir=rtl] .tab > div button:first-child {
+
+[dir=rtl] .tab>div button:first-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=ltr] .tab > div button:last-child {
+
+[dir=ltr] .tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=rtl] .tab > div button:last-child {
+
+[dir=rtl] .tab>div button:last-child {
   border-radius: 5px 0 0 5px;
 }
 
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
+
 .alignright {
   composes: fright from '../common/common.module.css';
 }
+
 .aligncenter {
   composes: tcenter from '../common/common.module.css';
 }
-[dir=ltr] .alignleft > button:first-child {
+
+[dir=ltr] .alignleft>button:first-child {
   margin-left: 0;
 }
-[dir=rtl] .alignleft > button:first-child {
+
+[dir=rtl] .alignleft>button:first-child {
   margin-right: 0;
 }
-[dir=ltr] .alignleft > button {
+
+[dir=ltr] .alignleft>button {
   margin-left: var(--zd_size15);
 }
-[dir=rtl] .alignleft > button {
+
+[dir=rtl] .alignleft>button {
   margin-right: var(--zd_size15);
 }
 
-[dir=ltr] .alignright > button:last-child {
+[dir=ltr] .alignright>button:last-child {
   margin-right: 0;
 }
 
-[dir=rtl] .alignright > button:last-child {
+[dir=rtl] .alignright>button:last-child {
   margin-left: 0;
 }
-[dir=ltr] .alignright > button {
+
+[dir=ltr] .alignright>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .alignright > button {
+
+[dir=rtl] .alignright>button {
   margin-left: var(--zd_size15);
 }
-[dir=ltr] .aligncenter > button {
+
+[dir=ltr] .aligncenter>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .aligncenter > button {
+
+[dir=rtl] .aligncenter>button {
   margin-left: var(--zd_size15);
-}
+}

package/es/DateTime/DateTime.module.css

@@ -231,6 +231,6 @@
 .dropBox {
   width: 100%;
   border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  box-shadow: var(--bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
 }