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

package/preprocess/json/componentAppearanceVariableJson.js

@@ -1,6 +1,6 @@
-/* sample color order => 
---zdt_cta_variable_name, 
-[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow)']], 
+/* sample color order =>
+--zdt_cta_variable_name,
+[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow)']],
 [['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow)']],
 ['css comment name'] */
 
@@ -13,7 +13,7 @@ const componentAppearanceVariables = [
   ],
   [
     'dot_inputDisable',
-     [['default'], ['var(--dot_text_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -23,7 +23,7 @@ const componentAppearanceVariables = [
   ],
   [
     'dot_inputLineHover',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -49,13 +49,13 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_avatar_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['avatar']
   ],
   [
     'zdt_avatar_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -65,7 +65,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_avatar_default_borderHover',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -85,24 +85,24 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_avatar_secondary_bg',
-     [['default'], ['var(--dot_bg_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
     'zdt_avatar_info_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_avatarteam_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']],
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']],
      ['avatar team']
   ],
   [
     'zdt_avatarteam_default_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_avatarteam_primary_bg',
@@ -111,12 +111,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_avatarteam_primary_hover_bg',
-     [['default'], ['var(--dot_bg_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
     'zdt_avatarteam_secondary_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -126,7 +126,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_avatarteam_nofill_hover_border',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -137,8 +137,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_button_default_border',
@@ -167,12 +167,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_secondary_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_button_secondary_hover_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
@@ -182,33 +182,33 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_secondary_hover_border',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
     'zdt_button_danger_border',
-     [['default'], ['var(--dot_border_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_button_danger_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_button_danger_hover_border',
-     [['default'], ['var(--dot_border_fireBrick)']],
+     [['default'], ['var(--dot_fireBrick)']],
      [['dark'], ['#cc302d']]
   ],
   [
     'zdt_button_danger_hover_text',
-     [['default'], ['var(--dot_text_fireBrick)']],
+     [['default'], ['var(--dot_fireBrick)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_button_danger_box_shadow',
-     [['default'], ['var(--zd_shadow_dangertrans6)']],
-     [['dark'], ['var(--zd_shadow_dangertrans6)']]
+     [['default'], ['var(--zd_dangertrans6)']],
+     [['dark'], ['var(--zd_dangertrans6)']]
   ],
   [
     'zdt_button_primaryfill_text',
@@ -222,8 +222,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_primaryfill_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_button_primaryfill_hover_bg',
@@ -237,53 +237,53 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_dangerfill_bg',
-     [['default'], ['var(--dot_bg_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_button_dangerfill_text',
-     [['default'], ['var(--dot_text_white)']],
-     [['dark'], ['var(--dot_text_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_button_dangerfill_hover_bg',
-     [['default'], ['var(--dot_bg_fireBrick)']],
+     [['default'], ['var(--dot_fireBrick)']],
      [['dark'], ['#cc302d']]
   ],
   [
     'zdt_button_successfill_border',
-     [['default'], ['var(--dot_border_strongGreen)']],
+     [['default'], ['var(--dot_strongGreen)']],
      [['dark'], ['#4ac064']]
   ],
   [
     'zdt_button_successfill_bg',
-     [['default'], ['var(--dot_bg_strongGreen)']],
+     [['default'], ['var(--dot_strongGreen)']],
      [['dark'], ['#4ac064']]
   ],
   [
     'zdt_button_successfill_hover_border',
-     [['default'], ['var(--dot_border_camarone)']],
+     [['default'], ['var(--dot_camarone)']],
      [['dark'], ['#1b8c35']]
   ],
   [
     'zdt_button_successfill_hover_bg',
-     [['default'], ['var(--dot_text_camarone)']],
+     [['default'], ['var(--dot_camarone)']],
      [['dark'], ['#1b8c35']]
   ],
   [
     'zdt_button_tertiaryfill_bg',
-     [['default'], ['var(--dot_bg_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_button_tertiaryfill_hover_bg',
-     [['default'], ['var(--dot_bg_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
     'zdt_button_success_default_border',
-     [['default'], ['var(--dot_border_white)']],
-     [['dark'], ['var(--dot_border_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_button_tick_primary_border',
@@ -292,7 +292,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_button_loading_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -302,29 +302,29 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_buttongroup_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['button group']
   ],
   [
     'zdt_buttongroup_default_border',
-     [['default'], ['var(--zd_border_smoke7)']],
-     [['dark'], ['var(--zd_border_smoke7)']]
+     [['default'], ['var(--zd_smoke7)']],
+     [['dark'], ['var(--zd_smoke7)']]
   ],
   [
     'zdt_buttongroup_footer_box_shadow',
-     [['default'], ['var(--zd_shadow_graytrans4)']],
-     [['dark'], ['var(--zd_shadow_graytrans4)']]
+     [['default'], ['var(--zd_graytrans4)']],
+     [['dark'], ['var(--zd_graytrans4)']]
   ],
   [
     'zdt_checkbox_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['checkbox']
   ],
   [
     'zdt_checkbox_default_stroke_border',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -334,7 +334,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_checkbox_danger_stroke_border',
-     [['default'], ['var(--dot_border_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
@@ -344,12 +344,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_checkbox_label_danger_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_dropbox_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['dropbox']
   ],
@@ -360,8 +360,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_dropbox_arrow_shadow',
-     [['default'], ['var(--zd_shadow_graytrans4)']],
-     [['dark'], ['var(--zd_shadow_graytrans4)']]
+     [['default'], ['var(--zd_graytrans4)']],
+     [['dark'], ['var(--zd_graytrans4)']]
   ],
   [
     'zdt_dropbox_mob_bg',
@@ -375,28 +375,28 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_label_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['label']
   ],
   [
     'zdt_label_primary_text',
-     [['default'], ['var(--dot_text_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
     'zdt_label_secondary_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_label_danger_text',
-     [['default'], ['var(--dot_text_brightOrange)']],
-     [['dark'], ['var(--dot_text_brightOrange)']]
+     [['default'], ['var(--dot_brightOrange)']],
+     [['dark'], ['var(--dot_brightOrange)']]
   ],
   [
     'zdt_label_mandatory_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
@@ -406,7 +406,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tag_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['tag']
   ],
@@ -417,8 +417,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tag_default_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_tag_default_hover_bg',
@@ -427,28 +427,28 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tag_secondary_text',
-     [['default'], ['var(--dot_text_white)']],
-     [['dark'], ['var(--dot_text_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_tag_secondary_bg',
-     [['default'], ['var(--zd_bg_dark32)']],
-     [['dark'], ['var(--zd_bg_dark32)']]
+     [['default'], ['var(--zd_dark32)']],
+     [['dark'], ['var(--zd_dark32)']]
   ],
   [
     'zdt_tag_secondary_hover_bg',
-     [['default'], ['var(--zd_bg_dark33)']],
-     [['dark'], ['var(--zd_bg_dark33)']]
+     [['default'], ['var(--zd_dark33)']],
+     [['dark'], ['var(--zd_dark33)']]
   ],
   [
     'zdt_tag_closedanger_bg',
-     [['default'], ['var(--zd_bg_dangertrans5)']],
-     [['dark'], ['var(--zd_bg_dangertrans5)']]
+     [['default'], ['var(--zd_dangertrans5)']],
+     [['dark'], ['var(--zd_dangertrans5)']]
   ],
   [
     'zdt_tag_icon_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_tag_disabled_text',
@@ -457,12 +457,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tag_danger_bg',
-     [['default'], ['var(--dot_bg_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_tag_danger_hover_bg',
-     [['default'], ['var(--zd_bg_danger18)']],
+     [['default'], ['var(--zd_danger18)']],
      [['dark'], ['#503348']]
   ],
   [
@@ -497,23 +497,23 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tag_pure_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
     'zdt_tag_pure_border',
-     [['default'], ['var(--zd_border_smoke91)']],
-     [['dark'], ['var(--zd_border_smoke91)']]
+     [['default'], ['var(--zd_smoke91)']],
+     [['dark'], ['var(--zd_smoke91)']]
   ],
   [
     'zdt_tag_pure_hover_bg',
-     [['default'], ['var(--zd_bg_smoke6)']],
-     [['dark'], ['var(--zd_bg_smoke6)']]
+     [['default'], ['var(--zd_smoke6)']],
+     [['dark'], ['var(--zd_smoke6)']]
   ],
   [
     'zdt_tag_pure_hover_border',
-     [['default'], ['var(--zd_border_dark6)']],
-     [['dark'], ['var(--zd_border_dark6)']]
+     [['default'], ['var(--zd_dark6)']],
+     [['dark'], ['var(--zd_dark6)']]
   ],
   [
     'zdt_tag_dark_close_hover_bg',
@@ -522,14 +522,14 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textbox_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['textbox']
   ],
   [
     'zdt_textbox_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_textbox_default_border',
@@ -548,8 +548,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textbox_transparent_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_textbox_effect_hover_border',
@@ -563,23 +563,23 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textbox_secondary_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_dropdown_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['dropdown']
   ],
   [
     'zdt_dropdown_default_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_dropdown_default_bg',
-     [['default'], ['var(--dot_bg_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
@@ -594,8 +594,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_dropdown_mirror_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_dropdown_user_default_border',
@@ -609,7 +609,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_dropdown_listactive_bg',
-     [['default'], ['var(--dot_bg_aliceBlue)']],
+     [['default'], ['var(--dot_aliceBlue)']],
      [['dark'], ['#2c3b4d']]
   ],
   [
@@ -619,13 +619,13 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_radio_default_stroke',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']],
      ['radio']
   ],
   [
     'zdt_radio_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -640,12 +640,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_radio_danger_stroke',
-     [['default'], ['var(--dot_border_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_radio_danger_fill',
-     [['default'], ['var(--dot_bg_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
@@ -655,24 +655,24 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_radio_label_danger_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_listitem_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['listitem']
   ],
   [
     'zdt_listitem_default_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_listitem_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_listitem_default_tickicon',
@@ -701,188 +701,188 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_listitem_secondary_text',
-     [['default'], ['var(--dot_text_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
     'zdt_ribbon_default_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']],
      ['ribbon']
   ],
   [
     'zdt_ribbon_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_ribbon_default_border',
-     [['default'], ['var(--zd_border_graytrans9)']],
-     [['dark'], ['var(--zd_border_graytrans9)']]
+     [['default'], ['var(--zd_graytrans9)']],
+     [['dark'], ['var(--zd_graytrans9)']]
   ],
   [
     'zdt_ribbon_default_tag_border',
-     [['default'], ['var(--zd_border_smoke12)']],
-     [['dark'], ['var(--zd_border_smoke12)']]
+     [['default'], ['var(--zd_smoke12)']],
+     [['dark'], ['var(--zd_smoke12)']]
   ],
   [
     'zdt_ribbon_default_shadow',
-     [['default'], ['var(--zd_shadow_graytrans9)']],
-     [['dark'], ['var(--zd_shadow_graytrans9)']]
+     [['default'], ['var(--zd_graytrans9)']],
+     [['dark'], ['var(--zd_graytrans9)']]
   ],
   [
     'zdt_ribbon_default_stamp_bg',
-     [['default'], ['var(--zd_bg_graytrans9)']],
-     [['dark'], ['var(--zd_bg_graytrans9)']]
+     [['default'], ['var(--zd_graytrans9)']],
+     [['dark'], ['var(--zd_graytrans9)']]
   ],
   [
     'zdt_ribbon_white_text',
-     [['default'], ['var(--dot_text_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
     'zdt_ribbon_white_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
     'zdt_ribbon_palette_bg',
-     [['default'], ['var(--zd_bg_dark5)']],
-     [['dark'], ['var(--zd_bg_dark5)']]
+     [['default'], ['var(--zd_dark5)']],
+     [['dark'], ['var(--zd_dark5)']]
   ],
   [
     'zdt_ribbon_danger_bg',
-     [['default'], ['var(--dot_bg_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_ribbon_danger_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_ribbon_danger_shadow',
-     [['default'], ['var(--zd_shadow_dangertrans7)']],
-     [['dark'], ['var(--zd_shadow_dangertrans7)']]
+     [['default'], ['var(--zd_dangertrans7)']],
+     [['dark'], ['var(--zd_dangertrans7)']]
   ],
   [
     'zdt_ribbon_danger_border',
-     [['default'], ['var(--zd_border_dangertrans7)']],
-     [['dark'], ['var(--zd_border_dangertrans7)']]
+     [['default'], ['var(--zd_dangertrans7)']],
+     [['dark'], ['var(--zd_dangertrans7)']]
   ],
   [
     'zdt_ribbon_danger_stamp_bg',
-     [['default'], ['var(--zd_bg_dangertrans7)']],
-     [['dark'], ['var(--zd_bg_dangertrans7)']]
+     [['default'], ['var(--zd_dangertrans7)']],
+     [['dark'], ['var(--zd_dangertrans7)']]
   ],
   [
     'zdt_ribbon_primary_bg',
-     [['default'], ['var(--dot_bg_primary)']],
+     [['default'], ['var(--dot_primary)']],
      [['dark'], ['#479dff']]
   ],
   [
     'zdt_ribbon_primary_text',
-     [['default'], ['var(--dot_text_primary)']],
+     [['default'], ['var(--dot_primary)']],
      [['dark'], ['#479dff']]
   ],
   [
     'zdt_ribbon_primary_shadow',
-     [['default'], ['var(--zd_shadow_primarytrans10)']],
-     [['dark'], ['var(--zd_shadow_primarytrans10)']]
+     [['default'], ['var(--zd_primarytrans10)']],
+     [['dark'], ['var(--zd_primarytrans10)']]
   ],
   [
     'zdt_ribbon_primary_border',
-     [['default'], ['var(--zd_border_primarytrans10)']],
-     [['dark'], ['var(--zd_border_primarytrans10)']]
+     [['default'], ['var(--zd_primarytrans10)']],
+     [['dark'], ['var(--zd_primarytrans10)']]
   ],
   [
     'zdt_ribbon_primary_stamp_bg',
-     [['default'], ['var(--zd_bg_primarytrans10)']],
-     [['dark'], ['var(--zd_bg_primarytrans10)']]
+     [['default'], ['var(--zd_primarytrans10)']],
+     [['dark'], ['var(--zd_primarytrans10)']]
   ],
   [
     'zdt_ribbon_secondary_bg',
-     [['default'], ['var(--zd_bg_olive13)']],
-     [['dark'], ['var(--zd_bg_olive13)']]
+     [['default'], ['var(--zd_olive13)']],
+     [['dark'], ['var(--zd_olive13)']]
   ],
   [
     'zdt_ribbon_secondary_text',
-     [['default'], ['var(--zd_text_olive13)']],
-     [['dark'], ['var(--zd_text_olive13)']]
+     [['default'], ['var(--zd_olive13)']],
+     [['dark'], ['var(--zd_olive13)']]
   ],
   [
     'zdt_ribbon_secondary_shadow',
-     [['default'], ['var(--zd_shadow_olivetrans)']],
-     [['dark'], ['var(--zd_shadow_olivetrans)']]
+     [['default'], ['var(--zd_olivetrans)']],
+     [['dark'], ['var(--zd_olivetrans)']]
   ],
   [
     'zdt_ribbon_secondary_border',
-     [['default'], ['var(--zd_border_olivetrans)']],
-     [['dark'], ['var(--zd_border_olivetrans)']]
+     [['default'], ['var(--zd_olivetrans)']],
+     [['dark'], ['var(--zd_olivetrans)']]
   ],
   [
     'zdt_ribbon_secondary_stamp_bg',
-     [['default'], ['var(--zd_bg_olivetrans)']],
-     [['dark'], ['var(--zd_bg_olivetrans)']]
+     [['default'], ['var(--zd_olivetrans)']],
+     [['dark'], ['var(--zd_olivetrans)']]
   ],
   [
     'zdt_ribbon_info_bg',
-     [['default'], ['var(--zd_bg_info)']],
-     [['dark'], ['var(--zd_bg_info)']]
+     [['default'], ['var(--zd_info)']],
+     [['dark'], ['var(--zd_info)']]
   ],
   [
     'zdt_ribbon_info_text',
-     [['default'], ['var(--zd_text_info)']],
-     [['dark'], ['var(--zd_text_info)']]
+     [['default'], ['var(--zd_info)']],
+     [['dark'], ['var(--zd_info)']]
   ],
   [
     'zdt_ribbon_info_shadow',
-     [['default'], ['var(--zd_shadow_orangetrans)']],
-     [['dark'], ['var(--zd_shadow_orangetrans)']]
+     [['default'], ['var(--zd_orangetrans)']],
+     [['dark'], ['var(--zd_orangetrans)']]
   ],
   [
     'zdt_ribbon_info_border',
-     [['default'], ['var(--zd_border_orangetrans)']],
-     [['dark'], ['var(--zd_border_orangetrans)']]
+     [['default'], ['var(--zd_orangetrans)']],
+     [['dark'], ['var(--zd_orangetrans)']]
   ],
   [
     'zdt_ribbon_info_stamp_bg',
-     [['default'], ['var(--zd_bg_orangetrans)']],
-     [['dark'], ['var(--zd_bg_orangetrans)']]
+     [['default'], ['var(--zd_orangetrans)']],
+     [['dark'], ['var(--zd_orangetrans)']]
   ],
   [
     'zdt_ribbon_dark_bg',
-     [['default'], ['var(--dot_bg_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
     'zdt_ribbon_dark_shadow',
-     [['default'], ['var(--zd_shadow_graytrans6)']],
-     [['dark'], ['var(--zd_shadow_graytrans6)']]
+     [['default'], ['var(--zd_graytrans6)']],
+     [['dark'], ['var(--zd_graytrans6)']]
   ],
   [
     'zdt_ribbon_dark_border',
-     [['default'], ['var(--zd_bg_graytrans6)']],
-     [['dark'], ['var(--zd_bg_graytrans6)']]
+     [['default'], ['var(--zd_graytrans6)']],
+     [['dark'], ['var(--zd_graytrans6)']]
   ],
   [
     'zdt_ribbon_dark_stamp_bg',
-     [['default'], ['var(--zd_bg_graytrans4)']],
-     [['dark'], ['var(--zd_bg_graytrans4)']]
+     [['default'], ['var(--zd_graytrans4)']],
+     [['dark'], ['var(--zd_graytrans4)']]
   ],
   [
     'zdt_ribbon_plain_text',
-     [['default'], ['var(--zd_text_dark5)']],
-     [['dark'], ['var(--zd_text_dark5)']]
+     [['default'], ['var(--zd_dark5)']],
+     [['dark'], ['var(--zd_dark5)']]
   ],
   [
     'zdt_ribbon_flag_mirror_border',
-     [['default'], ['var(--zd_border_mirror)']],
-     [['dark'], ['var(--zd_border_mirror)']]
+     [['default'], ['var(--zd_mirror)']],
+     [['dark'], ['var(--zd_mirror)']]
   ],
   [
     'zdt_ribbon_flag_white_border',
-     [['default'], ['var(--dot_border_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -914,18 +914,18 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_switch_default_on_bg',
-     [['default'], ['var(--dot_bg_strongGreen)']],
+     [['default'], ['var(--dot_strongGreen)']],
      [['dark'], ['#4ac064']]
   ],
   [
     'zdt_switch_circle_bg',
-     [['default'], ['var(--dot_bg_white)']],
-     [['dark'], ['var(--dot_bg_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_switch_circle_shadow',
-     [['default'], ['var(--zd_shadow_smoke21)']],
-     [['dark'], ['var(--zd_shadow_smoke21)']]
+     [['default'], ['var(--zd_smoke21)']],
+     [['dark'], ['var(--zd_smoke21)']]
   ],
   [
     'zdt_switch_effect_off_bg',
@@ -940,12 +940,12 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textboxicon_default_icon',
-     [['default'], ['var(--dot_text_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
     'zdt_textboxicon_hover_icon',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -955,8 +955,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textboxicon_transparent_line_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_textboxicon_focus_line_bg',
@@ -965,7 +965,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textboxicon_error_line_bg',
-     [['default'], ['var(--dot_border_fireBrick)']],
+     [['default'], ['var(--dot_fireBrick)']],
      [['dark'], ['#cc302d']]
   ],
   [
@@ -976,8 +976,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textarea_default_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_textarea_default_border',
@@ -991,8 +991,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textarea_transparent_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_textarea_hover_border',
@@ -1006,7 +1006,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_textarea_black_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1017,8 +1017,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tooltip_default_text',
-     [['default'], ['var(--dot_text_white)']],
-     [['dark'], ['var(--dot_text_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_tooltip_default_box_shadow',
@@ -1027,7 +1027,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_select_emptystate_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']],
      ['select']
   ],
@@ -1044,8 +1044,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_transparent_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_multiselect_default_hover_border',
@@ -1079,17 +1079,17 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_delete_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_multiselect_delete_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_multiselect_delete_hover_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1099,7 +1099,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_box_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
@@ -1109,7 +1109,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_multiselect_message_text',
-     [['default'], ['var(--dot_text_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -1120,8 +1120,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_advancedmultiselect_transparent_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_advancedmultiselect_dark_border',
@@ -1160,27 +1160,27 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_advancedmultiselect_delete_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_advancedmultiselect_delete_hover_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
     'zdt_advancedmultiselect_delete_bg',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']]
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']]
   ],
   [
     'zdt_advancedmultiselect_box_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']]
   ],
   [
     'zdt_advancedmultiselect_droppopup_text',
-     [['default'], ['var(--dot_text_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -1190,8 +1190,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_rippleeffect_default_border',
-     [['default'], ['var(--dot_border_mirror)']],
-     [['dark'], ['var(--dot_border_mirror)']],
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']],
      ['ripple effect']
   ],
   [
@@ -1241,7 +1241,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_rippleeffect_green_border',
-     [['default'], ['var(--dot_border_strongGreen)']],
+     [['default'], ['var(--dot_strongGreen)']],
      [['dark'], ['#4ac064']]
   ],
   [
@@ -1251,7 +1251,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_rippleeffect_slate_border',
-     [['default'], ['var(--dot_border_slateGrey)']],
+     [['default'], ['var(--dot_slateGrey)']],
      [['dark'], ['#828994']]
   ],
   [
@@ -1261,17 +1261,17 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_rippleeffect_danger_border',
-     [['default'], ['var(--dot_border_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
     'zdt_rippleeffect_danger_bg',
-     [['default'], ['var(--dot_bg_whiteSmoke)']],
+     [['default'], ['var(--dot_whiteSmoke)']],
      [['dark'], ['rgba(255, 107, 107, 0.05)']]
   ],
   [
     'zdt_datetime_default_bg',
-     [['default'], ['var(--zd_bg_pure)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['date time']
   ],
@@ -1287,7 +1287,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_datetime_datestr_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1312,7 +1312,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_datetime_invalid_hover_text',
-     [['default'], ['var(--dot_text_brightRed)']],
+     [['default'], ['var(--dot_brightRed)']],
      [['dark'], ['#ff6b6b']]
   ],
   [
@@ -1327,8 +1327,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_datetime_today_text',
-     [['default'], ['var(--dot_text_white)']],
-     [['dark'], ['var(--dot_text_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_datetime_text',
@@ -1337,7 +1337,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_yearview_default_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['year view']
   ],
@@ -1358,8 +1358,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_yearview_currentmonth_text',
-     [['default'], ['var(--dot_text_white)']],
-     [['dark'], ['var(--dot_text_white)']]
+     [['default'], ['var(--dot_white)']],
+     [['dark'], ['var(--dot_white)']]
   ],
   [
     'zdt_yearview_yearbox_border',
@@ -1368,7 +1368,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_yearview_year_hover_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1399,7 +1399,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_datewidget_placeholder_selection_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1409,18 +1409,18 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tab_default_border',
-     [['default'], ['var(--dot_bg_mirror)']],
-     [['dark'], ['var(--dot_bg_mirror)']],
+     [['default'], ['var(--dot_mirror)']],
+     [['dark'], ['var(--dot_mirror)']],
      ['tab']
   ],
   [
     'zdt_tab_alpha_text',
-     [['default'], ['var(--dot_text_shuttleGrey)']],
+     [['default'], ['var(--dot_shuttleGrey)']],
      [['dark'], ['#a8b0bd']]
   ],
   [
     'zdt_tab_alpha_hover_text',
-     [['default'], ['var(--dot_text_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1435,7 +1435,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tab_alpha_active_border',
-     [['default'], ['var(--dot_bg_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [
@@ -1445,7 +1445,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tabs_alpha_bg',
-     [['default'], ['var(--dot_bg_white)']],
+     [['default'], ['var(--dot_white)']],
      [['dark'], ['#232b38']],
      ['tabs']
   ],
@@ -1456,8 +1456,8 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tabs_alpha_box_shadow',
-     [['default'], ['var(--zd_shadow_dark10)']],
-     [['dark'], ['var(--zd_shadow_dark10)']]
+     [['default'], ['var(--zd_dark10)']],
+     [['dark'], ['var(--zd_dark10)']]
   ],
   [
     'zdt_tabs_delta_border',
@@ -1466,7 +1466,7 @@ const componentAppearanceVariables = [
   ],
   [
     'zdt_tabs_highlight_border',
-     [['default'], ['var(--dot_border_black)']],
+     [['default'], ['var(--dot_black)']],
      [['dark'], ['#e2e4e6']]
   ],
   [