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

package/preprocess/json/componentAppearanceVariableJson.js

@@ -0,0 +1,1515 @@
+/* sample color order => 
+--zdt_cta_variable_name, 
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow)']], 
+[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow)']],
+['css comment name'] */
+
+const componentAppearanceVariables = [
+  [
+    'dot_inputPlaceholder',
+     [['default'], ['var(--zdt_cta_grey_40_text)']],
+     [['dark'], ['#5a616f']],
+     ['list common']
+  ],
+  [
+    'dot_inputDisable',
+     [['default'], ['var(--dot_text_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'dot_inputLine',
+     [['default'], ['var(--zdt_cta_grey_35_border)']],
+     [['dark'], ['var(--zdt_cta_grey_35_border)']]
+  ],
+  [
+    'dot_inputLineHover',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'dot_inputLineFocus',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'dot_listItemHover',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']]
+  ],
+  [
+    'dot_listItemActive',
+     [['default'], ['var(--zdt_cta_primary_light_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_light_bg)']]
+  ],
+  [
+    'zdt_disable_bg',
+     [['default'], ['rgba(255, 255, 255, 0.5)']],
+     [['dark'], ['rgba(22, 27, 35, 0.5)']],
+     ['common']
+  ],
+  [
+    'zdt_avatar_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['avatar']
+  ],
+  [
+    'zdt_avatar_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_avatar_default_border',
+     [['default'], ['var(--zdt_cta_grey_40_border)']],
+     [['dark'], ['var(--zdt_cta_grey_40_border)']]
+  ],
+  [
+    'zdt_avatar_default_borderHover',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_avatar_default_boxshadow',
+     [['default'], ['rgba(0, 0, 0, 0.11)']],
+     [['dark'], ['rgba(255, 255, 255, 0.14)']]
+  ],
+  [
+    'zdt_avatar_white_borderHover',
+     [['default'], ['var(--zdt_cta_grey_40_border)']],
+     [['dark'], ['var(--zdt_cta_grey_40_border)']]
+  ],
+  [
+    'zdt_avatar_white_boxshadow',
+     [['default'], ['rgba(255, 255, 255, 0.14)']],
+     [['dark'], ['rgba(0, 0, 0, 0.11)']]
+  ],
+  [
+    'zdt_avatar_secondary_bg',
+     [['default'], ['var(--dot_bg_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_avatar_info_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_avatarteam_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']],
+     ['avatar team']
+  ],
+  [
+    'zdt_avatarteam_default_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_avatarteam_primary_bg',
+     [['default'], ['var(--zdt_cta_grey_40_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_40_bg)']]
+  ],
+  [
+    'zdt_avatarteam_primary_hover_bg',
+     [['default'], ['var(--dot_bg_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_avatarteam_secondary_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_avatarteam_nofill_border',
+     [['default'], ['var(--zdt_cta_grey_40_border)']],
+     [['dark'], ['var(--zdt_cta_grey_40_border)']]
+  ],
+  [
+    'zdt_avatarteam_nofill_hover_border',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_button_default_text',
+     [['default'], ['var(--zdt_cta_alpha_text)']],
+     [['dark'], ['var(--zdt_cta_alpha_text)']],
+     ['button']
+  ],
+  [
+    'zdt_button_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_button_default_border',
+     [['default'], ['var(--zdt_cta_alpha_border)']],
+     [['dark'], ['var(--zdt_cta_alpha_border)']]
+  ],
+  [
+    'zdt_button_primary_hover_text',
+     [['default'], ['var(--zdt_cta_alpha_hover_text)']],
+     [['dark'], ['var(--zdt_cta_alpha_text)']]
+  ],
+  [
+    'zdt_button_primary_hover_border',
+     [['default'], ['var(--zdt_cta_alpha_hover_border)']],
+     [['dark'], ['var(--zdt_cta_alpha_hover_border)']]
+  ],
+  [
+    'zdt_button_primary_box_shadow',
+     [['default'], ['var(--zdt_cta_primary_box_shadow)']],
+     [['dark'], ['var(--zdt_cta_primary_box_shadow)']]
+  ],
+  [
+    'zdt_button_plainprimary_hover_text',
+     [['default'], ['var(--zdt_cta_primary_hover_text)']],
+     [['dark'], ['var(--zdt_cta_primary_hover_text)']]
+  ],
+  [
+    'zdt_button_secondary_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_button_secondary_hover_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_button_secondary_border',
+     [['default'], ['var(--zdt_cta_grey_35_border)']],
+     [['dark'], ['var(--zdt_cta_grey_35_border)']]
+  ],
+  [
+    'zdt_button_secondary_hover_border',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_button_danger_border',
+     [['default'], ['var(--dot_border_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_button_danger_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_button_danger_hover_border',
+     [['default'], ['var(--dot_border_fireBrick)']],
+     [['dark'], ['#cc302d']]
+  ],
+  [
+    'zdt_button_danger_hover_text',
+     [['default'], ['var(--dot_text_fireBrick)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_button_danger_box_shadow',
+     [['default'], ['var(--zd_shadow_dangertrans6)']],
+     [['dark'], ['var(--zd_shadow_dangertrans6)']]
+  ],
+  [
+    'zdt_button_primaryfill_text',
+     [['default'], ['var(--zdt_cta_secondary_text)']],
+     [['dark'], ['var(--zdt_cta_secondary_text)']]
+  ],
+  [
+    'zdt_button_primaryfill_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_button_primaryfill_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_button_primaryfill_hover_bg',
+     [['default'], ['var(--zdt_cta_primary_hover_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_hover_bg)']]
+  ],
+  [
+    'zdt_button_secondaryfill_bg',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']]
+  ],
+  [
+    'zdt_button_dangerfill_bg',
+     [['default'], ['var(--dot_bg_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_button_dangerfill_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['var(--dot_text_white)']]
+  ],
+  [
+    'zdt_button_dangerfill_hover_bg',
+     [['default'], ['var(--dot_bg_fireBrick)']],
+     [['dark'], ['#cc302d']]
+  ],
+  [
+    'zdt_button_successfill_border',
+     [['default'], ['var(--dot_border_strongGreen)']],
+     [['dark'], ['#4ac064']]
+  ],
+  [
+    'zdt_button_successfill_bg',
+     [['default'], ['var(--dot_bg_strongGreen)']],
+     [['dark'], ['#4ac064']]
+  ],
+  [
+    'zdt_button_successfill_hover_border',
+     [['default'], ['var(--dot_border_camarone)']],
+     [['dark'], ['#1b8c35']]
+  ],
+  [
+    'zdt_button_successfill_hover_bg',
+     [['default'], ['var(--dot_text_camarone)']],
+     [['dark'], ['#1b8c35']]
+  ],
+  [
+    'zdt_button_tertiaryfill_bg',
+     [['default'], ['var(--dot_bg_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_button_tertiaryfill_hover_bg',
+     [['default'], ['var(--dot_bg_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_button_success_default_border',
+     [['default'], ['var(--dot_border_white)']],
+     [['dark'], ['var(--dot_border_white)']]
+  ],
+  [
+    'zdt_button_tick_primary_border',
+     [['default'], ['var(--zdt_cta_secondary_text)']],
+     [['dark'], ['var(--zdt_cta_secondary_text)']]
+  ],
+  [
+    'zdt_button_loading_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_button_loading_linear_gradient',
+     [['default'], ['linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%']],
+     [['dark'], ['linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%']]
+  ],
+  [
+    'zdt_buttongroup_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']],
+     ['button group']
+  ],
+  [
+    'zdt_buttongroup_default_border',
+     [['default'], ['var(--zd_border_smoke7)']],
+     [['dark'], ['var(--zd_border_smoke7)']]
+  ],
+  [
+    'zdt_buttongroup_footer_box_shadow',
+     [['default'], ['var(--zd_shadow_graytrans4)']],
+     [['dark'], ['var(--zd_shadow_graytrans4)']]
+  ],
+  [
+    'zdt_checkbox_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']],
+     ['checkbox']
+  ],
+  [
+    'zdt_checkbox_default_stroke_border',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_checkbox_primary_stroke_border',
+     [['default'], ['var(--zdt_cta_beta_border)']],
+     [['dark'], ['var(--zdt_cta_beta_border)']]
+  ],
+  [
+    'zdt_checkbox_danger_stroke_border',
+     [['default'], ['var(--dot_border_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_checkbox_label_primary_text',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_checkbox_label_danger_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_dropbox_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']],
+     ['dropbox']
+  ],
+  [
+    'zdt_dropbox_default_box_shadow',
+     [['default'], ['rgba(0, 0, 0, 0.13)']],
+     [['dark'], ['rgba(0, 0, 0, 0.5)']]
+  ],
+  [
+    'zdt_dropbox_arrow_shadow',
+     [['default'], ['var(--zd_shadow_graytrans4)']],
+     [['dark'], ['var(--zd_shadow_graytrans4)']]
+  ],
+  [
+    'zdt_dropbox_mob_bg',
+     [['default'], ['rgba(0, 0, 0, 0.4)']],
+     [['dark'], ['rgba(0, 0, 0, 0.4)']]
+  ],
+  [
+    'zdt_dropbox_mob_close_bg',
+     [['default'], ['#d5d5d5']],
+     [['dark'], ['#d5d5d5']]
+  ],
+  [
+    'zdt_label_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['label']
+  ],
+  [
+    'zdt_label_primary_text',
+     [['default'], ['var(--dot_text_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_label_secondary_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_label_danger_text',
+     [['default'], ['var(--dot_text_brightOrange)']],
+     [['dark'], ['var(--dot_text_brightOrange)']]
+  ],
+  [
+    'zdt_label_mandatory_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_label_disable_text',
+     [['default'], ['var(--dot_inputDisable)']],
+     [['dark'], ['var(--dot_inputDisable)']]
+  ],
+  [
+    'zdt_tag_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['tag']
+  ],
+  [
+    'zdt_tag_default_bg',
+     [['default'], ['var(--zdt_cta_grey_20_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_20_bg)']]
+  ],
+  [
+    'zdt_tag_default_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_tag_default_hover_bg',
+     [['default'], ['var(--zdt_cta_grey_35_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_35_bg)']]
+  ],
+  [
+    'zdt_tag_secondary_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['var(--dot_text_white)']]
+  ],
+  [
+    'zdt_tag_secondary_bg',
+     [['default'], ['var(--zd_bg_dark32)']],
+     [['dark'], ['var(--zd_bg_dark32)']]
+  ],
+  [
+    'zdt_tag_secondary_hover_bg',
+     [['default'], ['var(--zd_bg_dark33)']],
+     [['dark'], ['var(--zd_bg_dark33)']]
+  ],
+  [
+    'zdt_tag_closedanger_bg',
+     [['default'], ['var(--zd_bg_dangertrans5)']],
+     [['dark'], ['var(--zd_bg_dangertrans5)']]
+  ],
+  [
+    'zdt_tag_icon_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_tag_disabled_text',
+     [['default'], ['var(--dot_inputDisable)']],
+     [['dark'], ['var(--dot_inputDisable)']]
+  ],
+  [
+    'zdt_tag_danger_bg',
+     [['default'], ['var(--dot_bg_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_tag_danger_hover_bg',
+     [['default'], ['var(--zd_bg_danger18)']],
+     [['dark'], ['#503348']]
+  ],
+  [
+    'zdt_tag_primary_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_tag_primary_hover_bg',
+     [['default'], ['var(--zdt_cta_primary_hover_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_hover_bg)']]
+  ],
+  [
+    'zdt_tag_primary_border',
+     [['default'], ['var(--zdt_cta_primary_light_border)']],
+     [['dark'], ['var(--zdt_cta_primary_light_border)']]
+  ],
+  [
+    'zdt_tag_closeprimary_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_tag_default_danger_bg',
+     [['default'], ['var(--zdt_cta_grey_15_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_15_bg)']]
+  ],
+  [
+    'zdt_tag_active_default_bg',
+     [['default'], ['var(--zdt_cta_primary_light_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_light_bg)']]
+  ],
+  [
+    'zdt_tag_pure_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_tag_pure_border',
+     [['default'], ['var(--zd_border_smoke91)']],
+     [['dark'], ['var(--zd_border_smoke91)']]
+  ],
+  [
+    'zdt_tag_pure_hover_bg',
+     [['default'], ['var(--zd_bg_smoke6)']],
+     [['dark'], ['var(--zd_bg_smoke6)']]
+  ],
+  [
+    'zdt_tag_pure_hover_border',
+     [['default'], ['var(--zd_border_dark6)']],
+     [['dark'], ['var(--zd_border_dark6)']]
+  ],
+  [
+    'zdt_tag_dark_close_hover_bg',
+     [['default'], ['#de3535']],
+     [['dark'], ['#de3535']]
+  ],
+  [
+    'zdt_textbox_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['textbox']
+  ],
+  [
+    'zdt_textbox_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_textbox_default_border',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']]
+  ],
+  [
+    'zdt_textbox_placeholder_text',
+     [['default'], ['var(--dot_inputPlaceholder)']],
+     [['dark'], ['var(--dot_inputPlaceholder)']]
+  ],
+  [
+    'zdt_textbox_disabled_text',
+     [['default'], ['var(--dot_inputDisable)']],
+     [['dark'], ['var(--dot_inputDisable)']]
+  ],
+  [
+    'zdt_textbox_transparent_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_textbox_effect_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_textbox_effect_focus_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_textbox_secondary_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_dropdown_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['dropdown']
+  ],
+  [
+    'zdt_dropdown_default_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_dropdown_default_bg',
+     [['default'], ['var(--dot_bg_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_dropdown_darkheading_bg',
+     [['default'], ['#383f57']],
+     [['dark'], ['#383f57']]
+  ],
+  [
+    'zdt_dropdown_darkheading_underline_bg',
+     [['default'], ['#565e72']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_dropdown_mirror_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_dropdown_user_default_border',
+     [['default'], ['var(--zdt_cta_grey_35_border)']],
+     [['dark'], ['#2d3748']]
+  ],
+  [
+    'zdt_dropdown_listactive_border',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'zdt_dropdown_listactive_bg',
+     [['default'], ['var(--dot_bg_aliceBlue)']],
+     [['dark'], ['#2c3b4d']]
+  ],
+  [
+    'zdt_dropdown_listhover_bg',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']]
+  ],
+  [
+    'zdt_radio_default_stroke',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']],
+     ['radio']
+  ],
+  [
+    'zdt_radio_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_radio_primary_stroke',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'zdt_radio_primary_fill',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_radio_danger_stroke',
+     [['default'], ['var(--dot_border_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_radio_danger_fill',
+     [['default'], ['var(--dot_bg_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_radio_label_primary_text',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_radio_label_danger_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_listitem_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['listitem']
+  ],
+  [
+    'zdt_listitem_default_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_listitem_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_listitem_default_tickicon',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_listitem_highlight_bg',
+     [['default'], ['var(--dot_listItemHover)']],
+     [['dark'], ['rgba(44, 59, 77, 0.45)']]
+  ],
+  [
+    'zdt_listitem_active_border',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'zdt_listitem_primary_bg',
+     [['default'], ['var(--dot_listItemActive)']],
+     [['dark'], ['var(--dot_listItemActive)']]
+  ],
+  [
+    'zdt_listitem_secondary_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_listitem_secondary_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_ribbon_default_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']],
+     ['ribbon']
+  ],
+  [
+    'zdt_ribbon_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_ribbon_default_border',
+     [['default'], ['var(--zd_border_graytrans9)']],
+     [['dark'], ['var(--zd_border_graytrans9)']]
+  ],
+  [
+    'zdt_ribbon_default_tag_border',
+     [['default'], ['var(--zd_border_smoke12)']],
+     [['dark'], ['var(--zd_border_smoke12)']]
+  ],
+  [
+    'zdt_ribbon_default_shadow',
+     [['default'], ['var(--zd_shadow_graytrans9)']],
+     [['dark'], ['var(--zd_shadow_graytrans9)']]
+  ],
+  [
+    'zdt_ribbon_default_stamp_bg',
+     [['default'], ['var(--zd_bg_graytrans9)']],
+     [['dark'], ['var(--zd_bg_graytrans9)']]
+  ],
+  [
+    'zdt_ribbon_white_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_ribbon_white_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_ribbon_palette_bg',
+     [['default'], ['var(--zd_bg_dark5)']],
+     [['dark'], ['var(--zd_bg_dark5)']]
+  ],
+  [
+    'zdt_ribbon_danger_bg',
+     [['default'], ['var(--dot_bg_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_ribbon_danger_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_ribbon_danger_shadow',
+     [['default'], ['var(--zd_shadow_dangertrans7)']],
+     [['dark'], ['var(--zd_shadow_dangertrans7)']]
+  ],
+  [
+    'zdt_ribbon_danger_border',
+     [['default'], ['var(--zd_border_dangertrans7)']],
+     [['dark'], ['var(--zd_border_dangertrans7)']]
+  ],
+  [
+    'zdt_ribbon_danger_stamp_bg',
+     [['default'], ['var(--zd_bg_dangertrans7)']],
+     [['dark'], ['var(--zd_bg_dangertrans7)']]
+  ],
+  [
+    'zdt_ribbon_primary_bg',
+     [['default'], ['var(--dot_bg_primary)']],
+     [['dark'], ['#479dff']]
+  ],
+  [
+    'zdt_ribbon_primary_text',
+     [['default'], ['var(--dot_text_primary)']],
+     [['dark'], ['#479dff']]
+  ],
+  [
+    'zdt_ribbon_primary_shadow',
+     [['default'], ['var(--zd_shadow_primarytrans10)']],
+     [['dark'], ['var(--zd_shadow_primarytrans10)']]
+  ],
+  [
+    'zdt_ribbon_primary_border',
+     [['default'], ['var(--zd_border_primarytrans10)']],
+     [['dark'], ['var(--zd_border_primarytrans10)']]
+  ],
+  [
+    'zdt_ribbon_primary_stamp_bg',
+     [['default'], ['var(--zd_bg_primarytrans10)']],
+     [['dark'], ['var(--zd_bg_primarytrans10)']]
+  ],
+  [
+    'zdt_ribbon_secondary_bg',
+     [['default'], ['var(--zd_bg_olive13)']],
+     [['dark'], ['var(--zd_bg_olive13)']]
+  ],
+  [
+    'zdt_ribbon_secondary_text',
+     [['default'], ['var(--zd_text_olive13)']],
+     [['dark'], ['var(--zd_text_olive13)']]
+  ],
+  [
+    'zdt_ribbon_secondary_shadow',
+     [['default'], ['var(--zd_shadow_olivetrans)']],
+     [['dark'], ['var(--zd_shadow_olivetrans)']]
+  ],
+  [
+    'zdt_ribbon_secondary_border',
+     [['default'], ['var(--zd_border_olivetrans)']],
+     [['dark'], ['var(--zd_border_olivetrans)']]
+  ],
+  [
+    'zdt_ribbon_secondary_stamp_bg',
+     [['default'], ['var(--zd_bg_olivetrans)']],
+     [['dark'], ['var(--zd_bg_olivetrans)']]
+  ],
+  [
+    'zdt_ribbon_info_bg',
+     [['default'], ['var(--zd_bg_info)']],
+     [['dark'], ['var(--zd_bg_info)']]
+  ],
+  [
+    'zdt_ribbon_info_text',
+     [['default'], ['var(--zd_text_info)']],
+     [['dark'], ['var(--zd_text_info)']]
+  ],
+  [
+    'zdt_ribbon_info_shadow',
+     [['default'], ['var(--zd_shadow_orangetrans)']],
+     [['dark'], ['var(--zd_shadow_orangetrans)']]
+  ],
+  [
+    'zdt_ribbon_info_border',
+     [['default'], ['var(--zd_border_orangetrans)']],
+     [['dark'], ['var(--zd_border_orangetrans)']]
+  ],
+  [
+    'zdt_ribbon_info_stamp_bg',
+     [['default'], ['var(--zd_bg_orangetrans)']],
+     [['dark'], ['var(--zd_bg_orangetrans)']]
+  ],
+  [
+    'zdt_ribbon_dark_bg',
+     [['default'], ['var(--dot_bg_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_ribbon_dark_shadow',
+     [['default'], ['var(--zd_shadow_graytrans6)']],
+     [['dark'], ['var(--zd_shadow_graytrans6)']]
+  ],
+  [
+    'zdt_ribbon_dark_border',
+     [['default'], ['var(--zd_bg_graytrans6)']],
+     [['dark'], ['var(--zd_bg_graytrans6)']]
+  ],
+  [
+    'zdt_ribbon_dark_stamp_bg',
+     [['default'], ['var(--zd_bg_graytrans4)']],
+     [['dark'], ['var(--zd_bg_graytrans4)']]
+  ],
+  [
+    'zdt_ribbon_plain_text',
+     [['default'], ['var(--zd_text_dark5)']],
+     [['dark'], ['var(--zd_text_dark5)']]
+  ],
+  [
+    'zdt_ribbon_flag_mirror_border',
+     [['default'], ['var(--zd_border_mirror)']],
+     [['dark'], ['var(--zd_border_mirror)']]
+  ],
+  [
+    'zdt_ribbon_flag_white_border',
+     [['default'], ['var(--dot_border_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_stencil_primary_bg',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']],
+     ['stencils']
+  ],
+  [
+    'zdt_stencil_primary_gradient_bg',
+     [['default'], ['linear-gradient(left, #f6f8fb 0, #e7ecf4 33.33%, #f6f8fb 66.66%, #f6f8fb 100%)']],
+     [['dark'], ['linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)']]
+  ],
+  [
+    'zdt_stencil_secondary_bg',
+     [['default'], ['var(--zdt_cta_grey_15_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_15_bg)']]
+  ],
+  [
+    'zdt_stencil_secondary_gradient_bg',
+     [['default'], ['linear-gradient(left, #ebf0f5 0, #d5dde7 33.33%, #ebf0f5 66.66%, #ebf0f5 100%)']],
+     [['dark'], ['linear-gradient(left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)']]
+  ],
+  [
+    'zdt_switch_default_off_bg',
+     [['default'], ['var(--zdt_cta_grey_35_border)']],
+     [['dark'], ['var(--zdt_cta_grey_35_border)']],
+     ['switch']
+  ],
+  [
+    'zdt_switch_default_on_bg',
+     [['default'], ['var(--dot_bg_strongGreen)']],
+     [['dark'], ['#4ac064']]
+  ],
+  [
+    'zdt_switch_circle_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['var(--dot_bg_white)']]
+  ],
+  [
+    'zdt_switch_circle_shadow',
+     [['default'], ['var(--zd_shadow_smoke21)']],
+     [['dark'], ['var(--zd_shadow_smoke21)']]
+  ],
+  [
+    'zdt_switch_effect_off_bg',
+     [['default'], ['var(--zdt_cta_grey_40_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_40_bg)']]
+  ],
+  [
+    'zdt_textboxicon_default_line_bg',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']],
+     ['textboxicon']
+  ],
+  [
+    'zdt_textboxicon_default_icon',
+     [['default'], ['var(--dot_text_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_textboxicon_hover_icon',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_textboxicon_hover_line_bg',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_textboxicon_transparent_line_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_textboxicon_focus_line_bg',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_textboxicon_error_line_bg',
+     [['default'], ['var(--dot_border_fireBrick)']],
+     [['dark'], ['#cc302d']]
+  ],
+  [
+    'zdt_textarea_default_text',
+     [['default'], ['var(--dot_inputDisable)']],
+     [['dark'], ['var(--dot_inputDisable)']],
+     ['textarea']
+  ],
+  [
+    'zdt_textarea_default_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_textarea_default_border',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']]
+  ],
+  [
+    'zdt_textarea_placeholder_text',
+     [['default'], ['var(--dot_inputPlaceholder)']],
+     [['dark'], ['var(--dot_inputPlaceholder)']]
+  ],
+  [
+    'zdt_textarea_transparent_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_textarea_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_textarea_focus_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_textarea_black_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_tooltip_default_bg',
+     [['default'], ['rgba(0, 0, 0, 0.95)']],
+     [['dark'], ['#3e4d63']],
+     ['tooltip']
+  ],
+  [
+    'zdt_tooltip_default_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['var(--dot_text_white)']]
+  ],
+  [
+    'zdt_tooltip_default_box_shadow',
+     [['default'], ['none']],
+     [['dark'], ['rgba(0, 0, 0, 0.35)']]
+  ],
+  [
+    'zdt_select_emptystate_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']],
+     ['select']
+  ],
+  [
+    'zdt_select_disable_text',
+     [['default'], ['var(--dot_inputDisable)']],
+     [['dark'], ['var(--dot_inputDisable)']]
+  ],
+  [
+    'zdt_multiselect_default_border',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']],
+     ['multiselect']
+  ],
+  [
+    'zdt_multiselect_transparent_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_multiselect_default_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_multiselect_transparent_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_multiselect_dark_hover_border',
+     [['default'], ['#9699a6']],
+     [['dark'], ['#9699a6']]
+  ],
+  [
+    'zdt_multiselect_default_active_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_multiselect_transparent_active_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_multiselect_dark_active_border',
+     [['default'], ['#9699a6']],
+     [['dark'], ['#9699a6']]
+  ],
+  [
+    'zdt_multiselect_delete_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_multiselect_delete_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_multiselect_delete_hover_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_multiselect_darkdelete_text',
+     [['default'], ['#9c9fab']],
+     [['dark'], ['#9c9fab']]
+  ],
+  [
+    'zdt_multiselect_box_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_multiselect_selectall_text',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_multiselect_message_text',
+     [['default'], ['var(--dot_text_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_advancedmultiselect_default_border',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']],
+     ['advanced multiselect']
+  ],
+  [
+    'zdt_advancedmultiselect_transparent_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']]
+  ],
+  [
+    'zdt_advancedmultiselect_dark_border',
+     [['default'], ['#4b5168']],
+     [['dark'], ['#4b5168']]
+  ],
+  [
+    'zdt_advancedmultiselect_default_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_advancedmultiselect_transparent_hover_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_advancedmultiselect_dark_hover_border',
+     [['default'], ['#9699a6']],
+     [['dark'], ['#9699a6']]
+  ],
+  [
+    'zdt_advancedmultiselect_default_active_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_advancedmultiselect_transparent_active_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_advancedmultiselect_dark_active_border',
+     [['default'], ['#9699a6']],
+     [['dark'], ['#9699a6']]
+  ],
+  [
+    'zdt_advancedmultiselect_delete_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_advancedmultiselect_delete_hover_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_advancedmultiselect_delete_bg',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']]
+  ],
+  [
+    'zdt_advancedmultiselect_box_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']]
+  ],
+  [
+    'zdt_advancedmultiselect_droppopup_text',
+     [['default'], ['var(--dot_text_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_advancedmultiselect_more_text',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_rippleeffect_default_border',
+     [['default'], ['var(--dot_border_mirror)']],
+     [['dark'], ['var(--dot_border_mirror)']],
+     ['ripple effect']
+  ],
+  [
+    'zdt_rippleeffect_hover_border',
+     [['default'], ['var(--zdt_cta_grey_35_border)']],
+     [['dark'], ['var(--zdt_cta_grey_35_border)']]
+  ],
+  [
+    'zdt_rippleeffect_hover_bg',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_border',
+     [['default'], ['var(--zdt_cta_alpha_hover_border)']],
+     [['dark'], ['var(--zdt_cta_alpha_hover_border)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_active_border',
+     [['default'], ['var(--zdt_cta_alpha_border)']],
+     [['dark'], ['var(--zdt_cta_alpha_border)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_light_border',
+     [['default'], ['var(--zdt_cta_secondary_light_border)']],
+     [['dark'], ['var(--zdt_cta_secondary_light_border)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_light_bg',
+     [['default'], ['var(--zdt_cta_primary_light_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_light_bg)']]
+  ],
+  [
+    'zdt_rippleeffect_primary_dark_bg',
+     [['default'], ['var(--zdt_cta_primary_light_hover_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_light_hover_bg)']]
+  ],
+  [
+    'zdt_rippleeffect_primaryfilled_bg',
+     [['default'], ['var(--zdt_cta_primary_hover_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_hover_bg)']]
+  ],
+  [
+    'zdt_rippleeffect_green_border',
+     [['default'], ['var(--dot_border_strongGreen)']],
+     [['dark'], ['#4ac064']]
+  ],
+  [
+    'zdt_rippleeffect_green_bg',
+     [['default'], ['#f2faf5']],
+     [['dark'], ['#f2faf5']]
+  ],
+  [
+    'zdt_rippleeffect_slate_border',
+     [['default'], ['var(--dot_border_slateGrey)']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_rippleeffect_navy_border',
+     [['default'], ['var(--zdt_cta_grey_40_border)']],
+     [['dark'], ['var(--zdt_cta_grey_40_border)']]
+  ],
+  [
+    'zdt_rippleeffect_danger_border',
+     [['default'], ['var(--dot_border_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_rippleeffect_danger_bg',
+     [['default'], ['var(--dot_bg_whiteSmoke)']],
+     [['dark'], ['rgba(255, 107, 107, 0.05)']]
+  ],
+  [
+    'zdt_datetime_default_bg',
+     [['default'], ['var(--zd_bg_pure)']],
+     [['dark'], ['#232b38']],
+     ['date time']
+  ],
+  [
+    'zdt_datetime_header_bg',
+     [['default'], ['#f6f8fb']],
+     [['dark'], ['#262f3d']]
+  ],
+  [
+    'zdt_datetime_header_border',
+     [['default'], ['#ebf0f5']],
+     [['dark'], ['#2d3748']]
+  ],
+  [
+    'zdt_datetime_datestr_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_datetime_datestr_hover_bg',
+     [['default'], ['#ebf0f5']],
+     [['dark'], ['#2d3748']]
+  ],
+  [
+    'zdt_datetime_separator_border',
+     [['default'], ['#d5dde7']],
+     [['dark'], ['#2d3748']]
+  ],
+  [
+    'zdt_datetime_daystr_text',
+     [['default'], ['#788190']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_datetime_invalid_text',
+     [['default'], ['#c8cbdc']],
+     [['dark'], ['#c8cbdc']]
+  ],
+  [
+    'zdt_datetime_invalid_hover_text',
+     [['default'], ['var(--dot_text_brightRed)']],
+     [['dark'], ['#ff6b6b']]
+  ],
+  [
+    'zdt_datetime_invaliddate_text',
+     [['default'], ['rgba(222, 53, 53, 0.3)']],
+     [['dark'], ['rgba(222, 53, 53, 0.3)']]
+  ],
+  [
+    'zdt_datetime_today_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_datetime_today_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['var(--dot_text_white)']]
+  ],
+  [
+    'zdt_datetime_text',
+     [['default'], ['#5a616f']],
+     [['dark'], ['#5a616f']]
+  ],
+  [
+    'zdt_yearview_default_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']],
+     ['year view']
+  ],
+  [
+    'zdt_yearview_month_bg',
+     [['default'], ['#f6f8fb']],
+     [['dark'], ['#262f3d']]
+  ],
+  [
+    'zdt_yearview_month_hover_bg',
+     [['default'], ['#e7ecf4']],
+     [['dark'], ['#384157']]
+  ],
+  [
+    'zdt_yearview_currentmonth_bg',
+     [['default'], ['var(--zdt_cta_primary_bg)']],
+     [['dark'], ['var(--zdt_cta_primary_bg)']]
+  ],
+  [
+    'zdt_yearview_currentmonth_text',
+     [['default'], ['var(--dot_text_white)']],
+     [['dark'], ['var(--dot_text_white)']]
+  ],
+  [
+    'zdt_yearview_yearbox_border',
+     [['default'], ['#d5dde7']],
+     [['dark'], ['#384157']]
+  ],
+  [
+    'zdt_yearview_year_hover_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_yearview_yeartext_text',
+     [['default'], ['#788190']],
+     [['dark'], ['#828994']]
+  ],
+  [
+    'zdt_datewidget_input_border',
+     [['default'], ['var(--dot_inputLine)']],
+     [['dark'], ['var(--dot_inputLine)']],
+     ['date widget']
+  ],
+  [
+    'zdt_datewidget_enabled_border',
+     [['default'], ['var(--dot_inputLineHover)']],
+     [['dark'], ['var(--dot_inputLineHover)']]
+  ],
+  [
+    'zdt_datewidget_textboxfocus_border',
+     [['default'], ['var(--dot_inputLineFocus)']],
+     [['dark'], ['var(--dot_inputLineFocus)']]
+  ],
+  [
+    'zdt_datewidget_placeholder_text',
+     [['default'], ['var(--dot_inputPlaceholder)']],
+     [['dark'], ['var(--dot_inputPlaceholder)']]
+  ],
+  [
+    'zdt_datewidget_placeholder_selection_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_datewidget_placeholder_selection_bg',
+     [['default'], ['#b4d5fe']],
+     [['dark'], ['#b4d5fe']]
+  ],
+  [
+    'zdt_tab_default_border',
+     [['default'], ['var(--dot_bg_mirror)']],
+     [['dark'], ['var(--dot_bg_mirror)']],
+     ['tab']
+  ],
+  [
+    'zdt_tab_alpha_text',
+     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['dark'], ['#a8b0bd']]
+  ],
+  [
+    'zdt_tab_alpha_hover_text',
+     [['default'], ['var(--dot_text_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_tab_alpha_hover_bg',
+     [['default'], ['var(--zdt_cta_grey_10_bg)']],
+     [['dark'], ['var(--zdt_cta_grey_10_bg)']]
+  ],
+  [
+    'zdt_tab_alpha_active_text',
+     [['default'], ['var(--zdt_cta_primary_text)']],
+     [['dark'], ['var(--zdt_cta_primary_text)']]
+  ],
+  [
+    'zdt_tab_alpha_active_border',
+     [['default'], ['var(--dot_bg_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_tab_delta_active_border',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'zdt_tabs_alpha_bg',
+     [['default'], ['var(--dot_bg_white)']],
+     [['dark'], ['#232b38']],
+     ['tabs']
+  ],
+  [
+    'zdt_tabs_alpha_border',
+     [['default'], ['var(--zdt_cta_grey_15_border)']],
+     [['dark'], ['var(--zdt_cta_grey_15_border)']]
+  ],
+  [
+    'zdt_tabs_alpha_box_shadow',
+     [['default'], ['var(--zd_shadow_dark10)']],
+     [['dark'], ['var(--zd_shadow_dark10)']]
+  ],
+  [
+    'zdt_tabs_delta_border',
+     [['default'], ['var(--zdt_cta_primary_border)']],
+     [['dark'], ['var(--zdt_cta_primary_border)']]
+  ],
+  [
+    'zdt_tabs_highlight_border',
+     [['default'], ['var(--dot_border_black)']],
+     [['dark'], ['#e2e4e6']]
+  ],
+  [
+    'zdt_customscroll_default_bg',
+     [['default'], ['rgba(0, 0, 0, 0.02)']],
+     [['dark'], ['rgba(225, 225, 225, 0.06)']],
+     ['custom scroll']
+  ],
+  [
+    'zdt_customscroll_thump_bg',
+     [['default'], ['rgba(0, 0, 0, 0.12)']],
+     [['dark'], ['rgba(225, 225, 225, 0.12)']]
+  ],
+  [
+    'zdt_customscroll_thump_hover_bg',
+     [['default'], ['rgba(0, 0, 0, 0.16)']],
+     [['dark'], ['rgba(168, 176, 189, 0.3)']]
+  ],
+  [
+    'zdt_customscroll_border',
+     [['default'], ['rgba(44, 51, 77, 0.1)']],
+     [['dark'], ['rgba(225, 225, 225, 0.12)']]
+  ],
+  [
+    'zdt_customscroll_thump_dark_bg',
+     [['default'], ['rgba(225, 225, 225, 0.15)']],
+     [['dark'], ['rgba(225, 225, 225, 0.12)']]
+  ],
+  [
+    'zdt_customscroll_thump_dark_hover_bg',
+     [['default'], ['rgba(225, 225, 225, 0.17)']],
+     [['dark'], ['rgba(225, 225, 225, 0.14)']]
+  ],
+  [
+    'zdt_customscroll_dark_border',
+     [['default'], ['rgba(225, 225, 225, 0.12)']],
+     [['dark'], ['rgba(225, 225, 225, 0.12)']]
+  ],
+  [
+    'zdt_customscroll_dark_bg',
+     [['default'], ['rgba(225, 225, 225, 0.06)']],
+     [['dark'], ['rgba(225, 225, 225, 0.06)']]
+  ]
+];
+
+module.exports = { componentAppearanceVariables: componentAppearanceVariables };