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

package/es/common/boxShadow.module.css

@@ -0,0 +1,75 @@
+:global(.shadowOn) {
+    /* avatar */
+    --bs_avatar_black: inset 0px 0px 5px var(--avatar_boxshadow);
+    --bs_avatar_white: inset 0px 0px 11px var(--avatar_boxshadow);
+
+    /* button */
+    --bs_button_primary: 0 3px 10px var(--zdt_button_primary_box_shadow);
+    --bs_button_danger: 0 3px 10px var(--zdt_button_danger_box_shadow);
+
+    /* button group */
+    --bs_buttongroup_footer: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
+
+    /* dropbox */
+    --bs_dropbox_default: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+    --bs_dropbox_top: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+    --bs_dropbox_left: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --bs_dropbox_right: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --bs_dropbox_bottom: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+    --bs_dropbox_arrow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+
+    /* ribbon */
+    --bs_ribbon_default: 0 5px 10px var(--zdt_ribbon_default_shadow);
+    --bs_ribbon_danger: 0 5px 10px var(--zdt_ribbon_danger_shadow);
+    --bs_ribbon_primary: 0 5px 10px var(--zdt_ribbon_primary_shadow);
+    --bs_ribbon_secondary: 0 5px 10px var(--zdt_ribbon_secondary_shadow);
+    --bs_ribbon_info: 0 5px 10px var(--zdt_ribbon_info_shadow);
+    --bs_ribbon_dark: 0 5px 10px var(--zdt_ribbon_dark_shadow);
+
+    /* switch */
+    --bs_switch_default: 0 1px 4px 0 var(--zdt_switch_circle_shadow);
+
+    /* tabs */
+    --bs_tabs_shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
+
+    /* tooltip */
+    --bs_tooltip_shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+}
+
+:global(.shadowOffWithOutline) {
+    /* avatar */
+    --bs_avatar_black: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_avatar_white: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* button */
+    --bs_button_primary: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_button_danger: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* button group */
+    --bs_buttongroup_footer: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* dropbox */
+    --bs_dropbox_default: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_dropbox_top: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_dropbox_left: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_dropbox_right: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_dropbox_bottom: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_dropbox_arrow: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* ribbon */
+    --bs_ribbon_default: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_ribbon_danger: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_ribbon_primary: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_ribbon_secondary: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_ribbon_info: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_ribbon_dark: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* switch */
+    --bs_switch_default: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* tabs */
+    --bs_tabs_shadow: 0 0 2px var(--zdt_contrast_shadow);
+
+    /* tooltip */
+    --bs_tooltip_shadow: 0 0 2px var(--zdt_contrast_shadow);
+}

package/install.md

@@ -0,0 +1,10 @@
+- For New :
+
+# npm i
+# npm run common_package_build
+
+For Update:
+
+# npm run download
+# npm run common_package_build
+

package/lib/AppContainer/AppContainer.js

@@ -19,6 +19,7 @@ require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");
 require("../common/a11y.module.css");
+require("../common/boxShadow.module.css");
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 var _Config = require("../Provider/Config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/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/lib/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/lib/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/lib/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);
 }