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

package/preprocess/json/componentAppearanceVariableJson.js

@@ -14,7 +14,7 @@ const componentAppearanceVariables = [
   [
     'dot_inputDisable',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'dot_inputLine',
@@ -24,7 +24,7 @@ const componentAppearanceVariables = [
   [
     'dot_inputLineHover',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'dot_inputLineFocus',
@@ -50,13 +50,13 @@ const componentAppearanceVariables = [
   [
     'zdt_avatar_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['avatar']
   ],
   [
     'zdt_avatar_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_avatar_default_border',
@@ -66,7 +66,7 @@ const componentAppearanceVariables = [
   [
     'zdt_avatar_default_borderHover',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_avatar_default_boxshadow',
@@ -86,7 +86,7 @@ const componentAppearanceVariables = [
   [
     'zdt_avatar_secondary_bg',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_avatar_info_bg',
@@ -112,12 +112,12 @@ const componentAppearanceVariables = [
   [
     'zdt_avatarteam_primary_hover_bg',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_avatarteam_secondary_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_avatarteam_nofill_border',
@@ -127,7 +127,7 @@ const componentAppearanceVariables = [
   [
     'zdt_avatarteam_nofill_hover_border',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_button_default_text',
@@ -168,12 +168,12 @@ const componentAppearanceVariables = [
   [
     'zdt_button_secondary_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_button_secondary_hover_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_button_secondary_border',
@@ -183,17 +183,17 @@ const componentAppearanceVariables = [
   [
     'zdt_button_secondary_hover_border',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_button_danger_border',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_button_danger_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_button_danger_hover_border',
@@ -203,7 +203,7 @@ const componentAppearanceVariables = [
   [
     'zdt_button_danger_hover_text',
      [['default'], ['var(--dot_fireBrick)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_button_danger_box_shadow',
@@ -238,7 +238,7 @@ const componentAppearanceVariables = [
   [
     'zdt_button_dangerfill_bg',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_button_dangerfill_text',
@@ -253,32 +253,32 @@ const componentAppearanceVariables = [
   [
     'zdt_button_successfill_border',
      [['default'], ['var(--dot_strongGreen)']],
-     [['dark'], ['#4ac064']]
+     [['dark'], ['var(--dot_darkmint)']]
   ],
   [
     'zdt_button_successfill_bg',
      [['default'], ['var(--dot_strongGreen)']],
-     [['dark'], ['#4ac064']]
+     [['dark'], ['var(--dot_darkmint)']]
   ],
   [
     'zdt_button_successfill_hover_border',
      [['default'], ['var(--dot_camarone)']],
-     [['dark'], ['#1b8c35']]
+     [['dark'], ['var(--dot_irishgreen)']]
   ],
   [
     'zdt_button_successfill_hover_bg',
      [['default'], ['var(--dot_camarone)']],
-     [['dark'], ['#1b8c35']]
+     [['dark'], ['var(--dot_irishgreen)']]
   ],
   [
     'zdt_button_tertiaryfill_bg',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_button_tertiaryfill_hover_bg',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_button_success_default_border',
@@ -293,7 +293,7 @@ const componentAppearanceVariables = [
   [
     'zdt_button_loading_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_button_loading_linear_gradient',
@@ -303,7 +303,7 @@ const componentAppearanceVariables = [
   [
     'zdt_buttongroup_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['button group']
   ],
   [
@@ -319,13 +319,13 @@ const componentAppearanceVariables = [
   [
     'zdt_checkbox_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['checkbox']
   ],
   [
     'zdt_checkbox_default_stroke_border',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_checkbox_primary_stroke_border',
@@ -335,7 +335,7 @@ const componentAppearanceVariables = [
   [
     'zdt_checkbox_danger_stroke_border',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_checkbox_label_primary_text',
@@ -345,12 +345,12 @@ const componentAppearanceVariables = [
   [
     'zdt_checkbox_label_danger_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_dropbox_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['dropbox']
   ],
   [
@@ -376,18 +376,18 @@ const componentAppearanceVariables = [
   [
     'zdt_label_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['label']
   ],
   [
     'zdt_label_primary_text',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_label_secondary_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_label_danger_text',
@@ -397,7 +397,7 @@ const componentAppearanceVariables = [
   [
     'zdt_label_mandatory_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_label_disable_text',
@@ -407,7 +407,7 @@ const componentAppearanceVariables = [
   [
     'zdt_tag_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['tag']
   ],
   [
@@ -458,12 +458,12 @@ const componentAppearanceVariables = [
   [
     'zdt_tag_danger_bg',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_tag_danger_hover_bg',
      [['default'], ['var(--zd_danger18)']],
-     [['dark'], ['#503348']]
+     [['dark'], ['var(--dot_matterhorn)']]
   ],
   [
     'zdt_tag_primary_bg',
@@ -498,7 +498,7 @@ const componentAppearanceVariables = [
   [
     'zdt_tag_pure_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_tag_pure_border',
@@ -523,7 +523,7 @@ const componentAppearanceVariables = [
   [
     'zdt_textbox_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['textbox']
   ],
   [
@@ -564,12 +564,12 @@ const componentAppearanceVariables = [
   [
     'zdt_textbox_secondary_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_dropdown_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['dropdown']
   ],
   [
@@ -580,17 +580,17 @@ const componentAppearanceVariables = [
   [
     'zdt_dropdown_default_bg',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_dropdown_darkheading_bg',
-     [['default'], ['#383f57']],
-     [['dark'], ['#383f57']]
+     [['default'], ['var(--dot_unknown2)']],
+     [['dark'], ['var(--dot_unknown2)']]
   ],
   [
     'zdt_dropdown_darkheading_underline_bg',
-     [['default'], ['#565e72']],
-     [['dark'], ['#828994']]
+     [['default'], ['var(--dot_comet)']],
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_dropdown_mirror_bg',
@@ -600,7 +600,7 @@ const componentAppearanceVariables = [
   [
     'zdt_dropdown_user_default_border',
      [['default'], ['var(--zdt_cta_grey_35_border)']],
-     [['dark'], ['#2d3748']]
+     [['dark'], ['var(--dot_tuna)']]
   ],
   [
     'zdt_dropdown_listactive_border',
@@ -610,7 +610,7 @@ const componentAppearanceVariables = [
   [
     'zdt_dropdown_listactive_bg',
      [['default'], ['var(--dot_aliceBlue)']],
-     [['dark'], ['#2c3b4d']]
+     [['dark'], ['var(--dot_darkbluegrey)']]
   ],
   [
     'zdt_dropdown_listhover_bg',
@@ -620,13 +620,13 @@ const componentAppearanceVariables = [
   [
     'zdt_radio_default_stroke',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']],
+     [['dark'], ['var(--dot_oslogrey)']],
      ['radio']
   ],
   [
     'zdt_radio_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_radio_primary_stroke',
@@ -641,12 +641,12 @@ const componentAppearanceVariables = [
   [
     'zdt_radio_danger_stroke',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_radio_danger_fill',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_radio_label_primary_text',
@@ -656,12 +656,12 @@ const componentAppearanceVariables = [
   [
     'zdt_radio_label_danger_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_listitem_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['listitem']
   ],
   [
@@ -702,12 +702,12 @@ const componentAppearanceVariables = [
   [
     'zdt_listitem_secondary_text',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_ribbon_default_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']],
+     [['dark'], ['var(--dot_platinum)']],
      ['ribbon']
   ],
   [
@@ -738,12 +738,12 @@ const componentAppearanceVariables = [
   [
     'zdt_ribbon_white_text',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_ribbon_white_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_ribbon_palette_bg',
@@ -753,12 +753,12 @@ const componentAppearanceVariables = [
   [
     'zdt_ribbon_danger_bg',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_ribbon_danger_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_ribbon_danger_shadow',
@@ -778,12 +778,12 @@ const componentAppearanceVariables = [
   [
     'zdt_ribbon_primary_bg',
      [['default'], ['var(--dot_primary)']],
-     [['dark'], ['#479dff']]
+     [['dark'], ['var(--dot_butterflyblue)']]
   ],
   [
     'zdt_ribbon_primary_text',
      [['default'], ['var(--dot_primary)']],
-     [['dark'], ['#479dff']]
+     [['dark'], ['var(--dot_butterflyblue)']]
   ],
   [
     'zdt_ribbon_primary_shadow',
@@ -853,7 +853,7 @@ const componentAppearanceVariables = [
   [
     'zdt_ribbon_dark_bg',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_ribbon_dark_shadow',
@@ -883,7 +883,7 @@ const componentAppearanceVariables = [
   [
     'zdt_ribbon_flag_white_border',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_stencil_primary_bg',
@@ -915,7 +915,7 @@ const componentAppearanceVariables = [
   [
     'zdt_switch_default_on_bg',
      [['default'], ['var(--dot_strongGreen)']],
-     [['dark'], ['#4ac064']]
+     [['dark'], ['var(--dot_darkmint)']]
   ],
   [
     'zdt_switch_circle_bg',
@@ -941,12 +941,12 @@ const componentAppearanceVariables = [
   [
     'zdt_textboxicon_default_icon',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_textboxicon_hover_icon',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_textboxicon_hover_line_bg',
@@ -1007,12 +1007,12 @@ const componentAppearanceVariables = [
   [
     'zdt_textarea_black_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_tooltip_default_bg',
      [['default'], ['rgba(0, 0, 0, 0.95)']],
-     [['dark'], ['#3e4d63']],
+     [['dark'], ['var(--dot_riverbed)']],
      ['tooltip']
   ],
   [
@@ -1028,7 +1028,7 @@ const componentAppearanceVariables = [
   [
     'zdt_select_emptystate_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']],
+     [['dark'], ['var(--dot_cadetblue)']],
      ['select']
   ],
   [
@@ -1059,8 +1059,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_dark_hover_border',
-     [['default'], ['#9699a6']],
-     [['dark'], ['#9699a6']]
+     [['default'], ['var(--dot_stardust)']],
+     [['dark'], ['var(--dot_stardust)']]
   ],
   [
     'zdt_multiselect_default_active_border',
@@ -1074,13 +1074,13 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_dark_active_border',
-     [['default'], ['#9699a6']],
-     [['dark'], ['#9699a6']]
+     [['default'], ['var(--dot_stardust)']],
+     [['dark'], ['var(--dot_stardust)']]
   ],
   [
     'zdt_multiselect_delete_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_multiselect_delete_bg',
@@ -1090,17 +1090,17 @@ const componentAppearanceVariables = [
   [
     'zdt_multiselect_delete_hover_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_multiselect_darkdelete_text',
-     [['default'], ['#9c9fab']],
-     [['dark'], ['#9c9fab']]
+     [['default'], ['var(--dot_santagrey)']],
+     [['dark'], ['var(--dot_santagrey)']]
   ],
   [
     'zdt_multiselect_box_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_multiselect_selectall_text',
@@ -1110,7 +1110,7 @@ const componentAppearanceVariables = [
   [
     'zdt_multiselect_message_text',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_advancedmultiselect_default_border',
@@ -1125,8 +1125,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_advancedmultiselect_dark_border',
-     [['default'], ['#4b5168']],
-     [['dark'], ['#4b5168']]
+     [['default'], ['var(--dot_mulledwine)']],
+     [['dark'], ['var(--dot_mulledwine)']]
   ],
   [
     'zdt_advancedmultiselect_default_hover_border',
@@ -1140,8 +1140,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_advancedmultiselect_dark_hover_border',
-     [['default'], ['#9699a6']],
-     [['dark'], ['#9699a6']]
+     [['default'], ['var(--dot_stardust)']],
+     [['dark'], ['var(--dot_stardust)']]
   ],
   [
     'zdt_advancedmultiselect_default_active_border',
@@ -1155,18 +1155,18 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_advancedmultiselect_dark_active_border',
-     [['default'], ['#9699a6']],
-     [['dark'], ['#9699a6']]
+     [['default'], ['var(--dot_stardust)']],
+     [['dark'], ['var(--dot_stardust)']]
   ],
   [
     'zdt_advancedmultiselect_delete_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_advancedmultiselect_delete_hover_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_advancedmultiselect_delete_bg',
@@ -1176,12 +1176,12 @@ const componentAppearanceVariables = [
   [
     'zdt_advancedmultiselect_box_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']]
+     [['dark'], ['var(--dot_ebonyclay)']]
   ],
   [
     'zdt_advancedmultiselect_droppopup_text',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_advancedmultiselect_more_text',
@@ -1242,17 +1242,17 @@ const componentAppearanceVariables = [
   [
     'zdt_rippleeffect_green_border',
      [['default'], ['var(--dot_strongGreen)']],
-     [['dark'], ['#4ac064']]
+     [['dark'], ['var(--dot_darkmint)']]
   ],
   [
     'zdt_rippleeffect_green_bg',
-     [['default'], ['#f2faf5']],
-     [['dark'], ['#f2faf5']]
+     [['default'], ['var(--dot_blacksqueeze)']],
+     [['dark'], ['var(--dot_blacksqueeze)']]
   ],
   [
     'zdt_rippleeffect_slate_border',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_rippleeffect_navy_border',
@@ -1262,7 +1262,7 @@ const componentAppearanceVariables = [
   [
     'zdt_rippleeffect_danger_border',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_rippleeffect_danger_bg',
@@ -1272,38 +1272,38 @@ const componentAppearanceVariables = [
   [
     'zdt_datetime_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['date time']
   ],
   [
     'zdt_datetime_header_bg',
      [['default'], ['var(--dot_catskillWhite)']],
-     [['dark'], ['#262f3d']]
+     [['dark'], ['var(--dot_unknown1)']]
   ],
   [
     'zdt_datetime_header_border',
      [['default'], ['var(--dot_solitude)']],
-     [['dark'], ['#2d3748']]
+     [['dark'], ['var(--dot_tuna)']]
   ],
   [
     'zdt_datetime_datestr_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_datetime_datestr_hover_bg',
      [['default'], ['var(--dot_solitude)']],
-     [['dark'], ['#2d3748']]
+     [['dark'], ['var(--dot_tuna)']]
   ],
   [
     'zdt_datetime_separator_border',
      [['default'], ['var(--dot_paleBlue)']],
-     [['dark'], ['#2d3748']]
+     [['dark'], ['var(--dot_tuna)']]
   ],
   [
     'zdt_datetime_daystr_text',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_datetime_invalid_text',
@@ -1313,7 +1313,7 @@ const componentAppearanceVariables = [
   [
     'zdt_datetime_invalid_hover_text',
      [['default'], ['var(--dot_brightRed)']],
-     [['dark'], ['#ff6b6b']]
+     [['dark'], ['var(--dot_bittersweet)']]
   ],
   [
     'zdt_datetime_invaliddate_text',
@@ -1338,18 +1338,18 @@ const componentAppearanceVariables = [
   [
     'zdt_yearview_default_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['year view']
   ],
   [
     'zdt_yearview_month_bg',
      [['default'], ['var(--dot_catskillWhite)']],
-     [['dark'], ['#262f3d']]
+     [['dark'], ['var(--dot_unknown1)']]
   ],
   [
     'zdt_yearview_month_hover_bg',
      [['default'], ['var(--dot_hawkesBlue)']],
-     [['dark'], ['#384157']]
+     [['dark'], ['var(--dot_brightgrey)']]
   ],
   [
     'zdt_yearview_currentmonth_bg',
@@ -1369,12 +1369,12 @@ const componentAppearanceVariables = [
   [
     'zdt_yearview_year_hover_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_yearview_yeartext_text',
      [['default'], ['var(--dot_slateGrey)']],
-     [['dark'], ['#828994']]
+     [['dark'], ['var(--dot_oslogrey)']]
   ],
   [
     'zdt_datewidget_input_border',
@@ -1400,7 +1400,7 @@ const componentAppearanceVariables = [
   [
     'zdt_datewidget_placeholder_selection_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_datewidget_placeholder_selection_bg',
@@ -1416,12 +1416,12 @@ const componentAppearanceVariables = [
   [
     'zdt_tab_alpha_text',
      [['default'], ['var(--dot_shuttleGrey)']],
-     [['dark'], ['#a8b0bd']]
+     [['dark'], ['var(--dot_cadetblue)']]
   ],
   [
     'zdt_tab_alpha_hover_text',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_tab_alpha_hover_bg',
@@ -1436,7 +1436,7 @@ const componentAppearanceVariables = [
   [
     'zdt_tab_alpha_active_border',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_tab_delta_active_border',
@@ -1446,7 +1446,7 @@ const componentAppearanceVariables = [
   [
     'zdt_tabs_alpha_bg',
      [['default'], ['var(--dot_white)']],
-     [['dark'], ['#232b38']],
+     [['dark'], ['var(--dot_ebonyclay)']],
      ['tabs']
   ],
   [
@@ -1467,7 +1467,7 @@ const componentAppearanceVariables = [
   [
     'zdt_tabs_highlight_border',
      [['default'], ['var(--dot_black)']],
-     [['dark'], ['#e2e4e6']]
+     [['dark'], ['var(--dot_platinum)']]
   ],
   [
     'zdt_customscroll_default_bg',