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

package/README.md

@@ -1,6 +1,6 @@
 # DOT Style Guide
 
-In this Package we Provide Some Basic Components to Build Web App
+In this Package, we Provide Some Basic Components to Build Web App
 
 - Avatar
 - AvatarTeam
@@ -32,9 +32,22 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-222
+
+- Tabs=> isResponsive condition handled properly
+
+# 1.0.0-alpha-221
+
+- blueDefaultTheme & blueDarkTheme class name added in Blue CTATheme & ComponentTheme files
+
+# 1.0.0-alpha-220
+
+- Tooltip Delay Controlled to Improve Perf
+
 # 1.0.0-alpha-219
 
 - ContextOptimizer => ShallowEqal function issue solved
+
 # 1.0.0-alpha-218
 
 - Select => Custom props undefined issue solved
@@ -68,7 +81,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-211
 
-- Lato font reference changed from local to Zoho URL(webfonts)
+- Lato font reference changed from local to Zoho URL(web fonts)
 
 # 1.0.0-alpha-210
 
@@ -112,7 +125,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-202
 
-- MultiSelect - scrolltop issue fix
+- MultiSelect - scroll top issue fix
 
 # 1.0.0-alpha-201
 
@@ -173,7 +186,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-188
 
-- Popup => popup with in popup open body click issue fixed
+- Popup => popup within popup open body click issue fixed
 
 # 1.0.0-alpha-187
 
@@ -189,7 +202,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-184
 
-- Palette Based Folder Structure Changed.
+- Palette-Based Folder Structure Changed.
 - data-theme changed to data-mode
 - data-palette changed to data-theme
 
@@ -243,7 +256,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-173
 
-- code based issue fixed ( const to let)
+- code-based issue fixed ( const to let)
 
 # 1.0.0-alpha-172
 
@@ -395,7 +408,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-144
 
 - PortalLayer Moved to deprecated folder
-- A11y Id Added For Select,MultiSelect Based Components
+- A11y Id Added For Select, MultiSelect Based Components
 - Semantic Button Default Font and Padding Resetted.
 - LisItem - dataId setted default
 
@@ -458,7 +471,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-137
 
 - ally Fixes
-- htmlId prop added in select component
+- htmlId prop added in the select component
 - AdvancedGroupMultiSelect => scroll fetch issue fix
 
 # 1.0.0-alpha-136
@@ -476,7 +489,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-134
 
-- Reset Code Spliting
+- Reset Code Splitting
 
 # 1.0.0-alpha-133
 
@@ -511,7 +524,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-126
 
-- AllY implementation for button, textbox
+- AllY implementation for the button, textbox
 - Semantic button added
 
 # 1.0.0-alpha-125
@@ -678,7 +691,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-94
 
-- Tab Maping Fix
+- Tab Mapping Fix
 
 # 1.0.0-alpha-93
 
@@ -687,7 +700,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-92
 
 - Tab Custom Element Fix
-- Avatar xlarge sze changes
+- Avatar xlarge size changes
 
 # 1.0.0-alpha-91
 
@@ -713,7 +726,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-87
 
 - Date Component TimeZone Fix
-- Unwanted Funtctions Removed from utils/Common
+- Unwanted Functions Removed from utils/Common
 
 # 1.0.0-alpha-86
 
@@ -743,7 +756,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-81
 
-- variant - secondary type removed in Label component
+- variant - secondary type removed in a Label component
 - customClass Added For Label component
 - Radio, CheckBox SVG Updated, and Palette Danger Added, isFilled Added For Transparent BG
 - MultiSelect Avatar DataId Changes
@@ -754,7 +767,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-79
 
-- Tag danger,default color changed to dot_bg_hawkesBlue
+- Tag danger, default color changed to dot_bg_hawkesBlue
 - MultiSelectWithAvatar size prop passed for tags Parent
 
 # 1.0.0-alpha-78
@@ -819,7 +832,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-67
 
 - Adding TourId and isAbsolutePositioningNeeded key in DropBox
-- Adding TourId in Box, Container and Tab components
+- Adding TourId in Box, Container, and Tab components
 
 # 1.0.0-alpha-66
 
@@ -835,7 +848,7 @@ In this Package we Provide Some Basic Components to Build Web App
 
 - isDisabled Option added for List Item Based Atoms
 - needBorder and disableAction Option added for MultiSelect
-- Select BoxSize Added for Drop Box
+- Select BoxSize Added for DropBox
 
 # 1.0.0-alpha-62
 
@@ -863,7 +876,7 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-57
 
 - Base Font Version 3 Updated
-- Advanced Group Multi Select Added
+- Advanced Group Multi-Select Added
 
 # 1.0.0-alpha-56
 
@@ -882,14 +895,14 @@ In this Package we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-53
 
-- CustomScroll Maked Optional
+- CustomScroll Make Optional
 - Reset Code Implemented in Portal
 - Icon Line-Height Remove
 - New Reports Icons Added
 
 # 1.0.0-alpha-52
 
-- Advance Multi Select Added
+- Advance Multi-Select Added
 
 # 1.0.0-alpha-51
 

package/es/AppContainer/AppContainer.js

@@ -13,6 +13,7 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/lib/transitionVariables.module.css';
 import '@zohodesk/variables/lib/no_transitionVariables.module.css';
 import style from './AppContainer.module.css';
+import { getLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -22,6 +23,7 @@ export default class AppContainer extends React.Component {
     this.removeTimeout = this.removeTimeout.bind(this);
     this.getContainerRef = this.getContainerRef.bind(this);
     this.timer = null;
+    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
   }
 
   mouseOverDispatch(e) {
@@ -40,12 +42,8 @@ export default class AppContainer extends React.Component {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
-    /** Adding timeout before showing tooltip */
 
-    /**Remove this tooltip debounce */
-
-
-    this.timer = setTimeout(() => this.mouseOverDispatch(e), window.tooltipDebounce || 500);
+    this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
   }
 
   getContainerRef(ref) {
@@ -80,7 +78,6 @@ export default class AppContainer extends React.Component {
       children,
       tagName,
       dataId,
-      eleRef,
       tooltipClass,
       tooltipParentClass,
       customProps

package/es/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -1,34 +1,34 @@
-[data-mode='dark'][data-theme='blue'] {
-    --zdt_cta_primary_text: #479dff;
-    --zdt_cta_primary_hover_text: #6eb2ff;
-    --zdt_cta_primary_bg: #479dff;
-    --zdt_cta_primary_hover_bg: #1065cc;
-    --zdt_cta_primary_border: #479dff;
-    --zdt_cta_primary_hover_border: #1065cc;
-    --zdt_cta_primary_box_shadow: rgb(10, 115, 235, 0.2);
-    --zdt_cta_primary_hover_box_shadow: rgb(0, 83, 184, 0.25);
-    --zdt_cta_primary_light_bg: #2c3b4d;
-    --zdt_cta_primary_light_hover_bg: #262f3d;
-    --zdt_cta_primary_light_border: var(--zd_border_primary13);
-    --zdt_cta_secondary_bg: #479dff;
-    --zdt_cta_secondary_text: var(--dot_text_white);
-    --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
-    --zdt_cta_secondary_light_border: #3f536b;
-    --zdt_cta_alpha_text: #479dff;
-    --zdt_cta_alpha_hover_text: #6eb2ff;
-    --zdt_cta_alpha_border: #479dff;
-    --zdt_cta_alpha_hover_border: #1065cc;
-    --zdt_cta_alpha_bg: #253142;
-    --zdt_cta_beta_border: #479dff;
-    --zdt_cta_grey_10_bg: #262f3d;
-    --zdt_cta_grey_10_border: #262f3d;
-    --zdt_cta_grey_15_bg: #2d3748;
-    --zdt_cta_grey_15_border: #2d3748;
-    --zdt_cta_grey_20_bg: #161b23;
-    --zdt_cta_grey_35_bg: #384157;
-    --zdt_cta_grey_35_text: #384157;
-    --zdt_cta_grey_35_border: #384157;
-    --zdt_cta_grey_40_bg: #3e4d63;
-    --zdt_cta_grey_40_text: #3e4d63;
-    --zdt_cta_grey_40_border: #3e4d63;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	--zdt_cta_primary_text: #479dff;
+	--zdt_cta_primary_hover_text: #6eb2ff;
+	--zdt_cta_primary_bg: #479dff;
+	--zdt_cta_primary_hover_bg: #1065cc;
+	--zdt_cta_primary_border: #479dff;
+	--zdt_cta_primary_hover_border: #1065cc;
+	--zdt_cta_primary_box_shadow: rgba(10, 115, 235, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(0, 83, 184, 0.25);
+	--zdt_cta_primary_light_bg: #2c3b4d;
+	--zdt_cta_primary_light_hover_bg: #262f3d;
+	--zdt_cta_primary_light_border: var(--zd_border_primary13);
+	--zdt_cta_secondary_bg: #479dff;
+	--zdt_cta_secondary_text: var(--dot_text_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #3f536b;
+	--zdt_cta_alpha_text: #479dff;
+	--zdt_cta_alpha_hover_text: #6eb2ff;
+	--zdt_cta_alpha_border: #479dff;
+	--zdt_cta_alpha_hover_border: #1065cc;
+	--zdt_cta_alpha_bg: #253142;
+	--zdt_cta_beta_border: #479dff;
+	--zdt_cta_grey_10_bg: #262f3d;
+	--zdt_cta_grey_10_border: #262f3d;
+	--zdt_cta_grey_15_bg: #2d3748;
+	--zdt_cta_grey_15_border: #2d3748;
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: #384157;
+	--zdt_cta_grey_35_text: #384157;
+	--zdt_cta_grey_35_border: #384157;
+	--zdt_cta_grey_40_bg: #3e4d63;
+	--zdt_cta_grey_40_text: #3e4d63;
+	--zdt_cta_grey_40_border: #3e4d63
 }

package/es/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -1,48 +1,42 @@
-[data-mode='dark'][data-theme='blue'] {
-    /* stencil */
-    --zdt_stencil_dark_bg: #383f55;
-    --zdt_stencil_dark_gradient_bg: linear-gradient(
-        left,
-        #383f55 0,
-        #414963 33.33%,
-        #414961 66.66%,
-        #383f55 100%
-    );
-
-    /* dropbox */
-    --zdt_dropbox_dark_bg: #232b38;
-
-    /* listitem */
-    --zdt_listitem_dark_bg: #232b38;
-    --zdt_listitem_dark_text: #e2e4e6;
-    --zdt_listitem_dark_effect_bg: #262f3d;
-    --zdt_listitem_dark_active_bg: #3b4d6d;
-    --zdt_listitem_dark_tickicon: #479dff;
-
-    /* tag */
-    --zdt_tag_dark_text: #d0d0d4;
-    --zdt_tag_dark_bg: #42485f;
-    --zdt_tag_dark_hover_text: #d0d0d4;
-    --zdt_tag_dark_hover_bg: #503348;
-    --zdt_tag_dark_close_bg: #864654;
-    --zdt_tag_dark_close_text: #de3535;
-
-    /* multiselect */
-    --zdt_multiselect_dark_border: #4b5168;
-    --zdt_multiselect_darkmsg_bg: #232b38;
-    --zdt_multiselect_darkmsg_text: #d0d0d4;
-    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
-
-    /* avatar */
-    --zdt_avatar_white_border: #a8b0bd;
-    --zdt_avatar_white_text: var(--dot_text_white);
-
-    /* label */
-    --zdt_label_dark_text: #d0d0d4;
-
-    /* textbox */
-    --zdt_textbox_light_text: var(--dot_text_white);
-
-    /* dropdown */
-    --zdt_dropdown_darkheading_text: #a8b0bd;
+[data-mode='dark'][data-theme='blue'], :global(.blueDarkTheme) [data-desk-theme="blue"] {
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #232b38;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #232b38;
+	--zdt_listitem_dark_text: #e2e4e6;
+	--zdt_listitem_dark_effect_bg: #262f3d;
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #479dff;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: #de3535;
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: #4b5168;
+	--zdt_multiselect_darkmsg_bg: #232b38;
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: #e2e4e6;
+	
+	/* avatar */
+	--zdt_avatar_white_border: #a8b0bd;
+	--zdt_avatar_white_text: var(--dot_text_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_text_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -1,34 +1,34 @@
 [data-mode='dark'][data-theme='green'] {
-    --zdt_cta_primary_text: #45a159;
-    --zdt_cta_primary_hover_text: #5eba72;
-    --zdt_cta_primary_bg: #45a159;
-    --zdt_cta_primary_hover_bg: #0e7c1c;
-    --zdt_cta_primary_border: #45a159;
-    --zdt_cta_primary_hover_border: #0e7c1c;
-    --zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
-    --zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
-    --zdt_cta_primary_light_bg: #26373b;
-    --zdt_cta_primary_light_hover_bg: #2d4e42;
-    --zdt_cta_primary_light_border: #2d4e42;
-    --zdt_cta_secondary_bg: #45a159;
-    --zdt_cta_secondary_text: var(--dot_text_white);
-    --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
-    --zdt_cta_secondary_light_border: #2d4e42;
-    --zdt_cta_alpha_text: #45a159;
-    --zdt_cta_alpha_hover_text: #0e7c1c;
-    --zdt_cta_alpha_border: #45a159;
-    --zdt_cta_alpha_hover_border: #0e7c1c;
-    --zdt_cta_alpha_bg: #2a433f;
-    --zdt_cta_beta_border: #45a159;
-    --zdt_cta_grey_10_bg: #262f3d;
-    --zdt_cta_grey_10_border: #262f3d;
-    --zdt_cta_grey_15_bg: #2d3748;
-    --zdt_cta_grey_15_border: #2d3748;
-    --zdt_cta_grey_20_bg: #161b23;
-    --zdt_cta_grey_35_bg: #384157;
-    --zdt_cta_grey_35_text: #384157;
-    --zdt_cta_grey_35_border: #384157;
-    --zdt_cta_grey_40_bg: #3e4d63;
-    --zdt_cta_grey_40_text: #3e4d63;
-    --zdt_cta_grey_40_border: #3e4d63;
+	--zdt_cta_primary_text: #45a159;
+	--zdt_cta_primary_hover_text: #5eba72;
+	--zdt_cta_primary_bg: #45a159;
+	--zdt_cta_primary_hover_bg: #0e7c1c;
+	--zdt_cta_primary_border: #45a159;
+	--zdt_cta_primary_hover_border: #0e7c1c;
+	--zdt_cta_primary_box_shadow: rgba(38, 169, 66, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(14, 117, 38, 0.25);
+	--zdt_cta_primary_light_bg: #26373b;
+	--zdt_cta_primary_light_hover_bg: #2d4e42;
+	--zdt_cta_primary_light_border: #2d4e42;
+	--zdt_cta_secondary_bg: #45a159;
+	--zdt_cta_secondary_text: var(--dot_text_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #2d4e42;
+	--zdt_cta_alpha_text: #45a159;
+	--zdt_cta_alpha_hover_text: #0e7c1c;
+	--zdt_cta_alpha_border: #45a159;
+	--zdt_cta_alpha_hover_border: #0e7c1c;
+	--zdt_cta_alpha_bg: #2a433f;
+	--zdt_cta_beta_border: #45a159;
+	--zdt_cta_grey_10_bg: #262f3d;
+	--zdt_cta_grey_10_border: #262f3d;
+	--zdt_cta_grey_15_bg: #2d3748;
+	--zdt_cta_grey_15_border: #2d3748;
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: #384157;
+	--zdt_cta_grey_35_text: #384157;
+	--zdt_cta_grey_35_border: #384157;
+	--zdt_cta_grey_40_bg: #3e4d63;
+	--zdt_cta_grey_40_text: #3e4d63;
+	--zdt_cta_grey_40_border: #3e4d63
 }

package/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -1,48 +1,42 @@
 [data-mode='dark'][data-theme='green'] {
-    /* stencil */
-    --zdt_stencil_dark_bg: #383f55;
-    --zdt_stencil_dark_gradient_bg: linear-gradient(
-        left,
-        #383f55 0,
-        #414963 33.33%,
-        #414961 66.66%,
-        #383f55 100%
-    );
-
-    /* dropbox */
-    --zdt_dropbox_dark_bg: #232b38;
-
-    /* listitem */
-    --zdt_listitem_dark_bg: #232b38;
-    --zdt_listitem_dark_text: #e2e4e6;
-    --zdt_listitem_dark_effect_bg: #262f3d;
-    --zdt_listitem_dark_active_bg: #3b4d6d;
-    --zdt_listitem_dark_tickicon: #45a159;
-
-    /* tag */
-    --zdt_tag_dark_text: #d0d0d4;
-    --zdt_tag_dark_bg: #42485f;
-    --zdt_tag_dark_hover_text: #d0d0d4;
-    --zdt_tag_dark_hover_bg: #503348;
-    --zdt_tag_dark_close_bg: #864654;
-    --zdt_tag_dark_close_text: #de3535;
-
-    /* multiselect */
-    --zdt_multiselect_dark_border: #4b5168;
-    --zdt_multiselect_darkmsg_bg: #232b38;
-    --zdt_multiselect_darkmsg_text: #d0d0d4;
-    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
-
-    /* avatar */
-    --zdt_avatar_white_border: #a8b0bd;
-    --zdt_avatar_white_text: var(--dot_text_white);
-
-    /* label */
-    --zdt_label_dark_text: #d0d0d4;
-
-    /* textbox */
-    --zdt_textbox_light_text: var(--dot_text_white);
-
-    /* dropdown */
-    --zdt_dropdown_darkheading_text: #a8b0bd;
+	/* stencil */
+	--zdt_stencil_dark_bg: #383f55;
+	--zdt_stencil_dark_gradient_bg: linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	
+	/* dropbox */
+	--zdt_dropbox_dark_bg: #232b38;
+	
+	/* listitem */
+	--zdt_listitem_dark_bg: #232b38;
+	--zdt_listitem_dark_text: #e2e4e6;
+	--zdt_listitem_dark_effect_bg: #262f3d;
+	--zdt_listitem_dark_active_bg: #3b4d6d;
+	--zdt_listitem_dark_tickicon: #45a159;
+	
+	/* tag */
+	--zdt_tag_dark_text: #d0d0d4;
+	--zdt_tag_dark_bg: #42485f;
+	--zdt_tag_dark_hover_text: #d0d0d4;
+	--zdt_tag_dark_hover_bg: #503348;
+	--zdt_tag_dark_close_bg: #864654;
+	--zdt_tag_dark_close_text: #de3535;
+	
+	/* multiselect */
+	--zdt_multiselect_dark_border: #4b5168;
+	--zdt_multiselect_darkmsg_bg: #232b38;
+	--zdt_multiselect_darkmsg_text: #d0d0d4;
+	--zdt_multiselect_darkdelete_hover_text: #e2e4e6;
+	
+	/* avatar */
+	--zdt_avatar_white_border: #a8b0bd;
+	--zdt_avatar_white_text: var(--dot_text_white);
+	
+	/* label */
+	--zdt_label_dark_text: #d0d0d4;
+	
+	/* textbox */
+	--zdt_textbox_light_text: var(--dot_text_white);
+	
+	/* dropdown */
+	--zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -1,34 +1,34 @@
 [data-mode='dark'][data-theme='orange'] {
-    --zdt_cta_primary_text: #ff801f;
-    --zdt_cta_primary_hover_text: #ffa866;
-    --zdt_cta_primary_bg: #ff801f;
-    --zdt_cta_primary_hover_bg: #a85100;
-    --zdt_cta_primary_border: #ff801f;
-    --zdt_cta_primary_hover_border: #a85100;
-    --zdt_cta_primary_box_shadow: rgba(229, 119, 23, 0.2);
-    --zdt_cta_primary_hover_box_shadow: rgba(178, 89, 0, 0.25);
-    --zdt_cta_primary_light_bg: #323136;
-    --zdt_cta_primary_light_hover_bg: #4f3c33;
-    --zdt_cta_primary_light_border: #4f3c33;
-    --zdt_cta_secondary_bg: #ff801f;
-    --zdt_cta_secondary_text: var(--dot_text_white);
-    --zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
-    --zdt_cta_secondary_light_border: #4f3c33;
-    --zdt_cta_alpha_text: #ff801f;
-    --zdt_cta_alpha_hover_text: #a85100;
-    --zdt_cta_alpha_border: #ff801f;
-    --zdt_cta_alpha_hover_border: #a85100;
-    --zdt_cta_alpha_bg: #393335;
-    --zdt_cta_beta_border: #ff801f;
-    --zdt_cta_grey_10_bg: #262f3d;
-    --zdt_cta_grey_10_border: #262f3d;
-    --zdt_cta_grey_15_bg: #2d3748;
-    --zdt_cta_grey_15_border: #2d3748;
-    --zdt_cta_grey_20_bg: #161b23;
-    --zdt_cta_grey_35_bg: #384157;
-    --zdt_cta_grey_35_text: #384157;
-    --zdt_cta_grey_35_border: #384157;
-    --zdt_cta_grey_40_bg: #3e4d63;
-    --zdt_cta_grey_40_text: #3e4d63;
-    --zdt_cta_grey_40_border: #3e4d63;
+	--zdt_cta_primary_text: #ff801f;
+	--zdt_cta_primary_hover_text: #ffa866;
+	--zdt_cta_primary_bg: #ff801f;
+	--zdt_cta_primary_hover_bg: #a85100;
+	--zdt_cta_primary_border: #ff801f;
+	--zdt_cta_primary_hover_border: #a85100;
+	--zdt_cta_primary_box_shadow: rgba(229, 119, 23, 0.2);
+	--zdt_cta_primary_hover_box_shadow: rgba(178, 89, 0, 0.25);
+	--zdt_cta_primary_light_bg: #323136;
+	--zdt_cta_primary_light_hover_bg: #4f3c33;
+	--zdt_cta_primary_light_border: #4f3c33;
+	--zdt_cta_secondary_bg: #ff801f;
+	--zdt_cta_secondary_text: var(--dot_text_white);
+	--zdt_cta_secondary_border: rgba(255, 255, 255, 0.15);
+	--zdt_cta_secondary_light_border: #4f3c33;
+	--zdt_cta_alpha_text: #ff801f;
+	--zdt_cta_alpha_hover_text: #a85100;
+	--zdt_cta_alpha_border: #ff801f;
+	--zdt_cta_alpha_hover_border: #a85100;
+	--zdt_cta_alpha_bg: #393335;
+	--zdt_cta_beta_border: #ff801f;
+	--zdt_cta_grey_10_bg: #262f3d;
+	--zdt_cta_grey_10_border: #262f3d;
+	--zdt_cta_grey_15_bg: #2d3748;
+	--zdt_cta_grey_15_border: #2d3748;
+	--zdt_cta_grey_20_bg: #161b23;
+	--zdt_cta_grey_35_bg: #384157;
+	--zdt_cta_grey_35_text: #384157;
+	--zdt_cta_grey_35_border: #384157;
+	--zdt_cta_grey_40_bg: #3e4d63;
+	--zdt_cta_grey_40_text: #3e4d63;
+	--zdt_cta_grey_40_border: #3e4d63
 }