@zohodesk/components 1.0.0-temp-41 → 1.0.0-temp-45

package/es/common/docStyle.module.css

@@ -1,11 +1,11 @@
 .cboth::after {
   content: '.';
+  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
-  clear: both;
 }
 
 .m10 {
@@ -16,14 +16,10 @@
   margin: 50px;
 }
 
-[dir=ltr] .pl10 {
+.pl10 {
   padding-left: 10px;
 }
 
-[dir=rtl] .pl10 {
-  padding-right: 10px;
-}
-
 .p10 {
   padding: 10px;
 }
@@ -65,14 +61,10 @@
   margin-bottom: 20px;
 }
 
-[dir=ltr] .mr20 {
+.mr20 {
   margin-right: 20px;
 }
 
-[dir=rtl] .mr20 {
-  margin-left: 20px;
-}
-
 .w60 {
   width: 60%;
 }
@@ -94,32 +86,29 @@
 }
 
 .blue {
-  color: var(--zd_text_prime);
+  color: var(--zd_prime);
 }
 
 .dark {
+  background-color: var(--dot_black);
   composes: p10;
-  background-color: var(--dot_bg_black);
 }
 
 .table {
+  border: 1px solid var(--zd_smoke84);
+  border-radius: 3px;
   composes: p10;
   composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
-  border-radius: 3px;
 }
 
-[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
+.table .w60,
+.table .w40 {
   float: left;
 }
 
-[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
-  float: right;
-}
-
 .tableheading {
   composes: blue;
-  background: var(--zd_bg_smoke1);
+  background:var(--zd_smoke1);
 }
 
 .palette {
@@ -128,15 +117,15 @@
   composes: p10;
   composes: m10;
   width: 200px;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
   composes: tcenter;
   font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
 }
 
 .palette .palettecard {
   height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
+  border: 1px solid var(--zd_smoke83);
 }
 
 .palette span {
@@ -147,10 +136,10 @@
 
 .fontlist {
   composes: tcenter;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
 }
 
 .fontlist span {
@@ -159,9 +148,9 @@
 }
 
 .cover {
+  border: 1px solid var(--zd_smoke1);
   composes: p10;
   composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
   border-radius: 5px;
 }
 
@@ -205,7 +194,8 @@
   background-color: #e2e4e6;
   padding: 5px;
 }
-.content, .trow {
+.content,
+.trow {
   padding: 5px;
 }
 .trow {
@@ -215,19 +205,14 @@
   background-color: #f6f6f6;
 }
 .colorvalue {
-  font-size: 13px;
-  color: #000;
   background-color: #e2e4e6;
   padding: 3px;
+  margin-right: 3px;
   border-radius: 5px;
+  font-size: 13px;
+  color: #000;
   cursor: pointer;
 }
-[dir=ltr] .colorvalue {
-  margin-right: 3px;
-}
-[dir=rtl] .colorvalue {
-  margin-left: 3px;
-}
 .rect {
   width: 40px;
   height: 40px;
@@ -243,25 +228,20 @@
   flex-direction: column;
   border: 1px dotted #ccc;
   padding: 4px 6px;
-}
-[dir=ltr] .nestedDiv {
   margin-right: 5px;
 }
-[dir=rtl] .nestedDiv {
-  margin-left: 5px;
-}
 .para {
   font-size: 13px;
   margin-bottom: 5px;
 }
 
 [data-mode='default'] {
-  color: #000;
   background: #fff;
+  color: #000;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
   background: #232B38;
+  color: #E2E4E6;
 }
 
 .baseHue {
@@ -275,13 +255,8 @@
   --avatar_bg_color: hsl(var(--hue), 100%, 90%);
   --avatar_border_color: hsl(var(--hue), 100%, 60%);
   --avatar_text_color: hsl(var(--hue), 100%, 40%);
-}
-[dir=ltr] .customAvatar {
   --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
 }
-[dir=rtl] .customAvatar {
-  --avatar_border_radius: 12px 0;
-}
 .customAvatar:hover {
   --avatar_border_width: 2px;
   --avatar_bg_color: hsl(var(--hue), 100%, 85%);
@@ -416,15 +391,10 @@
 .customDropbox {
   composes: baseHue;
   --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
 }
-[dir=ltr] .customDropbox {
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
-}
-[dir=rtl] .customDropbox {
-  --dropbox_border_radius: 0 30px;
-}
 .customDropbox:hover {
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
@@ -628,39 +598,24 @@
 }
 .flagRibbon {
   composes: ribbon;
-}
-[dir=ltr] .flagRibbon {
   --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
   --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
 }
-[dir=rtl] .flagRibbon {
-  --ribbon_padding: 10px 20px;
-  --ribbon_flag_border_width: 20px 0 20px 10px;
-}
 .tagRibbon {
   composes: ribbon;
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-color: hsl(var(--hue), 100%, 50%);
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
   height: 56px;
   --ribbon_tag_before_width: 40px;
   --ribbon_tag_before_height: 40px;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
   --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
   --ribbon_tag_before_left: -20px;
   --ribbon_tag_before_top: 6px;
   --ribbon_tag_before_border_radius: 0;
-  border-color: hsl(var(--hue), 100%, 50%);
-}
-[dir=ltr] .tagRibbon {
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
-}
-[dir=rtl] .tagRibbon {
-  border-width: 2px 0 2px 2px;
-  border-radius: 6px 0 0 6px;
-  margin-right: 30px;
-  padding: 18px 30px;
-  --ribbon_tag_before_border_width: 2px 2px 0 0;
 }
 .boxRibbon {
   composes: ribbon;
@@ -695,10 +650,10 @@
 /* custom textboxicon css */
 .customTboxwrap {
   composes: baseHue;
-  --textboxicon_icon_margin: 4px 10px;
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
+  --textboxicon_icon_margin: 4px 10px;
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
 }
 .customTbox {
   --textbox_text_color: hsl(var(--hue), 100%, 50%);
@@ -725,8 +680,6 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -740,11 +693,11 @@
 /* custom textarea css */
 .customTextarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 50%);
   --textarea_text_color: hsl(var(--hue), 100%, 50%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
 }
 .customTextarea:hover {
   --textarea_border_color: hsl(var(--hue), 100%, 40%);
@@ -754,9 +707,9 @@
 }
 .disabledTarea {
   composes: baseHue;
+  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 80%);
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
-}
+}

package/es/common/transition.module.css

@@ -1,7 +1,6 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
-}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -9,8 +8,6 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -18,20 +15,15 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
   transform: scale(0);
+  opacity: 0;
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
   transform: scale(1);
+  opacity: 1;
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -39,9 +31,6 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -49,9 +38,6 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -59,27 +45,14 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
-[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(110%);
-}
-
-[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(-110%);
-}
-
 .slideLeftEnter.slideLeftEnterActive,
 .slideLeftLeave {
   opacity: 1;
-}
-
-.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
   transform: translateX(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -88,9 +61,6 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -99,9 +69,6 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -110,27 +77,14 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
-[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-}
-
-[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
-  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
-}
-
 .skewInEnter.skewInEnterActive,
 .skewInLeave {
   opacity: 1;
-}
-
-.skewInEnter.skewInEnterActive, .skewInLeave {
   transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -144,3 +98,9 @@
 .defaultLeave {
   display: block;
 }
+
+.noneEnter,
+.noneEnter.noneEnterActive,
+.noneLeave,
+.noneLeave.noneLeaveActive {
+}

package/{lib/Appearance/dark/mode/darkMode.module.css → es/deprecated/Theme/darkTheme.module.css}

@@ -1,11 +1,11 @@
-[data-mode='dark'] {
+[data-theme='dark'] {
   /* list common */
-  --dot_inputPlaceholder: #5a616f;
+  --dot_inputPlaceholder: #3e4d63;
   --dot_inputDisable: #828994;
-  --dot_inputLine: var(--zdt_cta_grey_35_border);
+  --dot_inputLine: #384157;
   --dot_inputLineHover: #828994;
   --dot_inputLineFocus: var(--zdt_cta_primary_border);
-  --dot_listItemHover: var(--zdt_cta_grey_10_bg);
+  --dot_listItemHover: #262f3d;
   --dot_listItemActive: var(--zdt_cta_primary_light_bg);
 
   /* common */
@@ -14,10 +14,11 @@
   /* avatar */
   --zdt_avatar_default_text: #e2e4e6;
   --zdt_avatar_default_bg: #232b38;
-  --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
+  --zdt_avatar_default_border: #3e4d63;
   --zdt_avatar_default_borderHover: #828994;
   --zdt_avatar_default_boxshadow: rgba(255, 255, 255, 0.14);
-  --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
+  --zdt_avatar_white_text: var(--dot_text_white);
+  --zdt_avatar_white_borderHover: #3e4d63;
   --zdt_avatar_white_boxshadow: rgba(0, 0, 0, 0.11);
   --zdt_avatar_secondary_bg: #e2e4e6;
   --zdt_avatar_info_bg: var(--dot_bg_mirror);
@@ -25,10 +26,10 @@
   /* avatar team */
   --zdt_avatarteam_default_bg: var(--dot_bg_mirror);
   --zdt_avatarteam_default_border: var(--dot_border_mirror);
-  --zdt_avatarteam_primary_bg: var(--zdt_cta_grey_40_bg);
+  --zdt_avatarteam_primary_bg: #3e4d63;
   --zdt_avatarteam_primary_hover_bg: #828994;
   --zdt_avatarteam_secondary_bg: #232b38;
-  --zdt_avatarteam_nofill_border: var(--zdt_cta_grey_40_border);
+  --zdt_avatarteam_nofill_border: #3e4d63;
   --zdt_avatarteam_nofill_hover_border: #828994;
 
   /* button */
@@ -41,7 +42,7 @@
   --zdt_button_plainprimary_hover_text: var(--zdt_cta_primary_hover_text);
   --zdt_button_secondary_text: #a8b0bd;
   --zdt_button_secondary_hover_text: #a8b0bd;
-  --zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
+  --zdt_button_secondary_border: #384157;
   --zdt_button_secondary_hover_border: #828994;
   --zdt_button_danger_border: #ff6b6b;
   --zdt_button_danger_text: #ff6b6b;
@@ -52,7 +53,7 @@
   --zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
   --zdt_button_primaryfill_border: var(--dot_border_mirror);
   --zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-  --zdt_button_secondaryfill_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_button_secondaryfill_bg: #262f3d;
   --zdt_button_dangerfill_bg: #ff6b6b;
   --zdt_button_dangerfill_text: var(--dot_text_white);
   --zdt_button_dangerfill_hover_bg: #cc302d;
@@ -117,12 +118,13 @@
   --zdt_label_danger_text: var(--dot_text_brightOrange);
   --zdt_label_mandatory_text: #ff6b6b;
   --zdt_label_disable_text: var(--dot_inputDisable);
+  --zdt_label_dark_text: #d0d0d4;
 
   /* tag */
   --zdt_tag_default_text: #e2e4e6;
-  --zdt_tag_default_bg: var(--zdt_cta_grey_20_bg);
+  --zdt_tag_default_bg: #161b23;
   --zdt_tag_default_border: var(--dot_border_mirror);
-  --zdt_tag_default_hover_bg: var(--zdt_cta_grey_35_bg);
+  --zdt_tag_default_hover_bg: #384157;
   --zdt_tag_secondary_text: var(--dot_text_white);
   --zdt_tag_secondary_bg: var(--zd_bg_dark32);
   --zdt_tag_secondary_hover_bg: var(--zd_bg_dark33);
@@ -135,12 +137,15 @@
   --zdt_tag_primary_hover_bg: var(--zdt_cta_primary_hover_bg);
   --zdt_tag_primary_border: var(--zdt_cta_primary_light_border);
   --zdt_tag_closeprimary_bg: var(--zdt_cta_primary_bg);
-  --zdt_tag_default_danger_bg: var(--zdt_cta_grey_15_bg);
+  --zdt_tag_default_danger_bg: #2d3748;
   --zdt_tag_active_default_bg: var(--zdt_cta_primary_light_bg);
   --zdt_tag_pure_bg: #232b38;
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
+  --zdt_tag_dark_text: #d0d0d4;
+  --zdt_tag_dark_close_bg: #864654;
+  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -153,18 +158,20 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: #a8b0bd;
+  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: #e2e4e6;
   --zdt_dropdown_default_border: var(--dot_border_mirror);
   --zdt_dropdown_default_bg: #a8b0bd;
+  --zdt_dropdown_darkheading_text: #a8b0bd;
   --zdt_dropdown_darkheading_bg: #383f57;
   --zdt_dropdown_darkheading_underline_bg: #828994;
   --zdt_dropdown_mirror_bg: var(--dot_bg_mirror);
   --zdt_dropdown_user_default_border: #2d3748;
   --zdt_dropdown_listactive_border: var(--zdt_cta_primary_border);
   --zdt_dropdown_listactive_bg: #2c3b4d;
-  --zdt_dropdown_listhover_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_dropdown_listhover_bg: #262f3d;
 
   /* radio */
   --zdt_radio_default_stroke: #828994;
@@ -186,6 +193,7 @@
   --zdt_listitem_primary_bg: var(--dot_listItemActive);
   --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
   --zdt_listitem_secondary_text: #232b38;
+  --zdt_listitem_dark_text: #e2e4e6;
 
   /* ribbon */
   --zdt_ribbon_default_text: #e2e4e6;
@@ -226,16 +234,16 @@
   --zdt_ribbon_flag_white_border: #232b38;
 
   /* stencils */
-  --zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-  --zdt_stencil_primary_gradient_bg: linear-gradient(
+  --zdt_stencil_primary_bg: #262f3d;
+  --zdt_stencil_primary_gradient_bg: -webkit-linear-gradient(
     left,
     #383f55 0,
     #414963 33.33%,
     #414961 66.66%,
     #383f55 100%
   );
-  --zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-  --zdt_stencil_secondary_gradient_bg: linear-gradient(
+  --zdt_stencil_secondary_bg: #2d3748;
+  --zdt_stencil_secondary_gradient_bg: -webkit-linear-gradient(
     left,
     #383f55 0,
     #414963 33.33%,
@@ -244,11 +252,11 @@
   );
 
   /* switch */
-  --zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
+  --zdt_switch_default_off_bg: #384157;
   --zdt_switch_default_on_bg: #4ac064;
   --zdt_switch_circle_bg: var(--dot_bg_white);
   --zdt_switch_circle_shadow: var(--zd_shadow_smoke21);
-  --zdt_switch_effect_off_bg: var(--zdt_cta_grey_40_bg);
+  --zdt_switch_effect_off_bg: #3e4d63;
 
   /* textboxicon */
   --zdt_textboxicon_default_line_bg: var(--dot_inputLine);
@@ -291,9 +299,11 @@
   --zdt_multiselect_delete_bg: var(--dot_bg_mirror);
   --zdt_multiselect_delete_hover_text: #e2e4e6;
   --zdt_multiselect_darkdelete_text: #9c9fab;
+  --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;
+  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -316,11 +326,11 @@
 
   /* ripple effect */
   --zdt_rippleeffect_default_border: var(--dot_border_mirror);
-  --zdt_rippleeffect_hover_border: var(--zdt_cta_grey_35_border);
-  --zdt_rippleeffect_hover_bg: var(--zdt_cta_grey_10_bg);
-  --zdt_rippleeffect_primary_border: var(--zdt_cta_alpha_hover_border);
+  --zdt_rippleeffect_hover_border: #384157;
+  --zdt_rippleeffect_hover_bg: #262f3d;
+  --zdt_rippleeffect_primary_border: var(--zdt_cta_primary_hover_border);
   --zdt_rippleeffect_primary_bg: var(--zdt_cta_primary_bg);
-  --zdt_rippleeffect_primary_active_border: var(--zdt_cta_alpha_border);
+  --zdt_rippleeffect_primary_active_border: var(--zdt_cta_primary_border);
   --zdt_rippleeffect_primary_light_border: var(--zdt_cta_secondary_light_border);
   --zdt_rippleeffect_primary_light_bg: var(--zdt_cta_primary_light_bg);
   --zdt_rippleeffect_primary_dark_bg: var(--zdt_cta_primary_light_hover_bg);
@@ -328,7 +338,7 @@
   --zdt_rippleeffect_green_border: #4ac064;
   --zdt_rippleeffect_green_bg: #f2faf5;
   --zdt_rippleeffect_slate_border: #828994;
-  --zdt_rippleeffect_navy_border: var(--zdt_cta_grey_40_border);
+  --zdt_rippleeffect_navy_border: #3e4d63;
   --zdt_rippleeffect_danger_border: #ff6b6b;
   --zdt_rippleeffect_danger_bg: rgba(255, 107, 107, 0.05);
 
@@ -339,7 +349,7 @@
   --zdt_datetime_datestr_text: #e2e4e6;
   --zdt_datetime_datestr_hover_bg: #2d3748;
   --zdt_datetime_separator_border: #2d3748;
-  --zdt_datetime_daystr_text: #828994;
+  --zdt_datetime_daystr_text: #828984;
   --zdt_datetime_invalid_text: #c8cbdc;
   --zdt_datetime_invalid_hover_text: #ff6b6b;
   --zdt_datetime_invaliddate_text: rgba(222, 53, 53, 0.3);
@@ -355,7 +365,7 @@
   --zdt_yearview_currentmonth_text: var(--dot_text_white);
   --zdt_yearview_yearbox_border: #384157;
   --zdt_yearview_year_hover_text: #e2e4e6;
-  --zdt_yearview_yeartext_text: #828994;
+  --zdt_yearview_yeartext_text: #828984;
 
   /* date widget */
   --zdt_datewidget_input_border: var(--dot_inputLine);
@@ -369,25 +379,15 @@
   --zdt_tab_default_border: var(--dot_bg_mirror);
   --zdt_tab_alpha_text: #a8b0bd;
   --zdt_tab_alpha_hover_text: #e2e4e6;
-  --zdt_tab_alpha_hover_bg: var(--zdt_cta_grey_10_bg);
+  --zdt_tab_alpha_hover_bg: #262f3d;
   --zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);
   --zdt_tab_alpha_active_border: #e2e4e6;
   --zdt_tab_delta_active_border: var(--zdt_cta_primary_border);
 
   /* tabs */
   --zdt_tabs_alpha_bg: #232b38;
-  --zdt_tabs_alpha_border: var(--zdt_cta_grey_15_border);
+  --zdt_tabs_alpha_border: #2d3748;
   --zdt_tabs_alpha_box_shadow: var(--zd_shadow_dark10);
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: #e2e4e6;
-
-  /* custom scroll */
-  --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
-  --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
-  --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
-  --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }