@zohodesk/components 1.0.0-alpha-221 → 1.0.0-alpha-225

package/preprocess/json/componentAppearanceVariableJson.js

@@ -0,0 +1,1346 @@
+/* sample => 
+  {
+    "comment": "comment name",
+    "data": {
+      "--zdt_variable_name": {
+        'lightMode': ['white'],
+        'nightMode': ['black]
+      }
+    }
+  }
+*/
+
+const componentAppearanceVariables = [
+  {
+    "comment": "list common",
+    "data": {
+        "dot_inputPlaceholder": {
+            'light': ['var(--zdt_cta_grey_40_text)'],
+            'dark': ['var(--dot_shuttleGrey)']
+        },
+        "dot_inputDisable": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "dot_inputLine": {
+            'light': ['var(--zdt_cta_grey_35_border)'],
+            'dark': ['var(--zdt_cta_grey_35_border)']
+        },
+        "dot_inputLineHover": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "dot_inputLineFocus": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        },
+        "dot_listItemHover": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        },
+        "dot_listItemActive": {
+            'light': ['var(--zdt_cta_primary_light_bg)'],
+            'dark': ['var(--zdt_cta_primary_light_bg)']
+        }
+    }
+  },
+  {
+    "comment": "common",
+    "data": {
+        "zdt_disable_bg": {
+            'light': ['rgba(255, 255, 255, 0.5)'],
+            'dark': ['rgba(22, 27, 35, 0.5)']
+        }
+    }
+  },
+  {
+    "comment": "avatar",
+    "data": {
+        "zdt_avatar_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_avatar_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_avatar_default_border": {
+            'light': ['var(--zdt_cta_grey_40_border)'],
+            'dark': ['var(--zdt_cta_grey_40_border)']
+        },
+        "zdt_avatar_default_borderHover": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_avatar_default_boxshadow": {
+            'light': ['rgba(0, 0, 0, 0.11)'],
+            'dark': ['rgba(255, 255, 255, 0.14)']
+        },
+        "zdt_avatar_white_borderHover": {
+            'light': ['var(--zdt_cta_grey_40_border)'],
+            'dark': ['var(--zdt_cta_grey_40_border)']
+        },
+        "zdt_avatar_white_boxshadow": {
+            'light': ['rgba(255, 255, 255, 0.14)'],
+            'dark': ['rgba(0, 0, 0, 0.11)']
+        },
+        "zdt_avatar_secondary_bg": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_avatar_info_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        }
+    }
+  },
+  {
+    "comment": "avatar team",
+    "data": {
+        "zdt_avatarteam_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_avatarteam_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_avatarteam_primary_bg": {
+            'light': ['var(--zdt_cta_grey_40_bg)'],
+            'dark': ['var(--zdt_cta_grey_40_bg)']
+        },
+        "zdt_avatarteam_primary_hover_bg": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_avatarteam_secondary_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_avatarteam_nofill_border": {
+            'light': ['var(--zdt_cta_grey_40_border)'],
+            'dark': ['var(--zdt_cta_grey_40_border)']
+        },
+        "zdt_avatarteam_nofill_hover_border": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        }
+    }
+  },
+  {
+    "comment": "button",
+    "data": {
+        "zdt_button_default_text": {
+            'light': ['var(--zdt_cta_alpha_text)'],
+            'dark': ['var(--zdt_cta_alpha_text)']
+        },
+        "zdt_button_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_button_default_border": {
+            'light': ['var(--zdt_cta_alpha_border)'],
+            'dark': ['var(--zdt_cta_alpha_border)']
+        },
+        "zdt_button_primary_hover_text": {
+            'light': ['var(--zdt_cta_alpha_hover_text)'],
+            'dark': ['var(--zdt_cta_alpha_text)']
+        },
+        "zdt_button_primary_hover_border": {
+            'light': ['var(--zdt_cta_alpha_hover_border)'],
+            'dark': ['var(--zdt_cta_alpha_hover_border)']
+        },
+        "zdt_button_primary_box_shadow": {
+            'light': ['var(--zdt_cta_primary_box_shadow)'],
+            'dark': ['var(--zdt_cta_primary_box_shadow)']
+        },
+        "zdt_button_plainprimary_hover_text": {
+            'light': ['var(--zdt_cta_primary_hover_text)'],
+            'dark': ['var(--zdt_cta_primary_hover_text)']
+        },
+        "zdt_button_secondary_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_button_secondary_hover_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_button_secondary_border": {
+            'light': ['var(--zdt_cta_grey_35_border)'],
+            'dark': ['var(--zdt_cta_grey_35_border)']
+        },
+        "zdt_button_secondary_hover_border": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_button_danger_border": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_button_danger_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_button_danger_hover_border": {
+            'light': ['var(--dot_fireBrick)'],
+            'dark': ['#cc302d']
+        },
+        "zdt_button_danger_hover_text": {
+            'light': ['var(--dot_fireBrick)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_button_danger_box_shadow": {
+            'light': ['var(--zd_dangertrans6)'],
+            'dark': ['var(--zd_dangertrans6)']
+        },
+        "zdt_button_primaryfill_text": {
+            'light': ['var(--zdt_cta_secondary_text)'],
+            'dark': ['var(--zdt_cta_secondary_text)']
+        },
+        "zdt_button_primaryfill_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_button_primaryfill_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_button_primaryfill_hover_bg": {
+            'light': ['var(--zdt_cta_primary_hover_bg)'],
+            'dark': ['var(--zdt_cta_primary_hover_bg)']
+        },
+        "zdt_button_secondaryfill_bg": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        },
+        "zdt_button_dangerfill_bg": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_button_dangerfill_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_button_dangerfill_hover_bg": {
+            'light': ['var(--dot_fireBrick)'],
+            'dark': ['#cc302d']
+        },
+        "zdt_button_successfill_border": {
+            'light': ['var(--dot_strongGreen)'],
+            'dark': ['var(--dot_darkmint)']
+        },
+        "zdt_button_successfill_bg": {
+            'light': ['var(--dot_strongGreen)'],
+            'dark': ['var(--dot_darkmint)']
+        },
+        "zdt_button_successfill_hover_border": {
+            'light': ['var(--dot_camarone)'],
+            'dark': ['var(--dot_irishgreen)']
+        },
+        "zdt_button_successfill_hover_bg": {
+            'light': ['var(--dot_camarone)'],
+            'dark': ['var(--dot_irishgreen)']
+        },
+        "zdt_button_tertiaryfill_bg": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_button_tertiaryfill_hover_bg": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_button_success_default_border": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_button_tick_primary_border": {
+            'light': ['var(--zdt_cta_secondary_text)'],
+            'dark': ['var(--zdt_cta_secondary_text)']
+        },
+        "zdt_button_loading_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_button_loading_linear_gradient": {
+            'light': ['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%']
+        }
+    }
+  },
+  {
+    "comment": "button group",
+    "data": {
+        "zdt_buttongroup_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_buttongroup_default_border": {
+            'light': ['var(--zd_smoke7)'],
+            'dark': ['var(--zd_smoke7)']
+        },
+        "zdt_buttongroup_footer_box_shadow": {
+            'light': ['var(--zd_graytrans4)'],
+            'dark': ['var(--zd_graytrans4)']
+        }
+    }
+  },
+  {
+    "comment": "checkbox",
+    "data": {
+        "zdt_checkbox_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_checkbox_default_stroke_border": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_checkbox_primary_stroke_border": {
+            'light': ['var(--zdt_cta_beta_border)'],
+            'dark': ['var(--zdt_cta_beta_border)']
+        },
+        "zdt_checkbox_danger_stroke_border": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_checkbox_label_primary_text": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        },
+        "zdt_checkbox_label_danger_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        }
+    }
+  },
+  {
+    "comment": "dropbox",
+    "data": {
+        "zdt_dropbox_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_dropbox_default_box_shadow": {
+            'light': ['rgba(0, 0, 0, 0.13)'],
+            'dark': ['rgba(0, 0, 0, 0.5)']
+        },
+        "zdt_dropbox_arrow_shadow": {
+            'light': ['var(--zd_graytrans4)'],
+            'dark': ['var(--zd_graytrans4)']
+        },
+        "zdt_dropbox_mob_bg": {
+            'light': ['rgba(0, 0, 0, 0.4)'],
+            'dark': ['rgba(0, 0, 0, 0.4)']
+        },
+        "zdt_dropbox_mob_close_bg": {
+            'light': ['var(--zd_smoke53)'],
+            'dark': ['var(--zd_smoke53)']
+        }
+    }
+  },
+  {
+    "comment": "label",
+    "data": {
+        "zdt_label_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_label_primary_text": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_label_secondary_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_label_danger_text": {
+            'light': ['var(--dot_brightOrange)'],
+            'dark': ['var(--dot_brightOrange)']
+        },
+        "zdt_label_mandatory_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_label_disable_text": {
+            'light': ['var(--dot_inputDisable)'],
+            'dark': ['var(--dot_inputDisable)']
+        }
+    }
+  },
+  {
+    "comment": "tag",
+    "data": {
+        "zdt_tag_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_tag_default_bg": {
+            'light': ['var(--zdt_cta_grey_20_bg)'],
+            'dark': ['var(--zdt_cta_grey_20_bg)']
+        },
+        "zdt_tag_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_tag_default_hover_bg": {
+            'light': ['var(--zdt_cta_grey_35_bg)'],
+            'dark': ['var(--zdt_cta_grey_35_bg)']
+        },
+        "zdt_tag_secondary_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_tag_secondary_bg": {
+            'light': ['var(--zd_dark32)'],
+            'dark': ['var(--zd_dark32)']
+        },
+        "zdt_tag_secondary_hover_bg": {
+            'light': ['var(--zd_dark33)'],
+            'dark': ['var(--zd_dark33)']
+        },
+        "zdt_tag_closedanger_bg": {
+            'light': ['var(--zd_dangertrans5)'],
+            'dark': ['var(--zd_dangertrans5)']
+        },
+        "zdt_tag_icon_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_tag_disabled_text": {
+            'light': ['var(--dot_inputDisable)'],
+            'dark': ['var(--dot_inputDisable)']
+        },
+        "zdt_tag_danger_bg": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_tag_danger_hover_bg": {
+            'light': ['var(--zd_danger18)'],
+            'dark': ['var(--dot_matterhorn)']
+        },
+        "zdt_tag_primary_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_tag_primary_hover_bg": {
+            'light': ['var(--zdt_cta_primary_hover_bg)'],
+            'dark': ['var(--zdt_cta_primary_hover_bg)']
+        },
+        "zdt_tag_primary_border": {
+            'light': ['var(--zdt_cta_primary_light_border)'],
+            'dark': ['var(--zdt_cta_primary_light_border)']
+        },
+        "zdt_tag_closeprimary_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_tag_default_danger_bg": {
+            'light': ['var(--zdt_cta_grey_15_bg)'],
+            'dark': ['var(--zdt_cta_grey_15_bg)']
+        },
+        "zdt_tag_active_default_bg": {
+            'light': ['var(--zdt_cta_primary_light_bg)'],
+            'dark': ['var(--zdt_cta_primary_light_bg)']
+        },
+        "zdt_tag_pure_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_tag_pure_border": {
+            'light': ['var(--zd_smoke91)'],
+            'dark': ['var(--zd_smoke91)']
+        },
+        "zdt_tag_pure_hover_bg": {
+            'light': ['var(--zd_smoke6)'],
+            'dark': ['var(--zd_smoke6)']
+        },
+        "zdt_tag_pure_hover_border": {
+            'light': ['var(--zd_dark6)'],
+            'dark': ['var(--zd_dark6)']
+        },
+        "zdt_tag_dark_close_hover_bg": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_brightRed)']
+        }
+    }
+  },
+  {
+    "comment": "textbox",
+    "data": {
+        "zdt_textbox_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_textbox_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_textbox_default_border": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_textbox_placeholder_text": {
+            'light': ['var(--dot_inputPlaceholder)'],
+            'dark': ['var(--dot_inputPlaceholder)']
+        },
+        "zdt_textbox_disabled_text": {
+            'light': ['var(--dot_inputDisable)'],
+            'dark': ['var(--dot_inputDisable)']
+        },
+        "zdt_textbox_transparent_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_textbox_effect_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_textbox_effect_focus_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_textbox_secondary_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        }
+    }
+  },
+  {
+    "comment": "dropdown",
+    "data": {
+        "zdt_dropdown_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_dropdown_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_dropdown_default_bg": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_dropdown_darkheading_bg": {
+            'light': ['var(--dot_unknown2)'],
+            'dark': ['var(--dot_unknown2)']
+        },
+        "zdt_dropdown_darkheading_underline_bg": {
+            'light': ['var(--dot_comet)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_dropdown_mirror_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_dropdown_user_default_border": {
+            'light': ['var(--zdt_cta_grey_35_border)'],
+            'dark': ['var(--dot_tuna)']
+        },
+        "zdt_dropdown_listactive_border": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        },
+        "zdt_dropdown_listactive_bg": {
+            'light': ['var(--dot_aliceBlue)'],
+            'dark': ['var(--dot_darkbluegrey)']
+        },
+        "zdt_dropdown_listhover_bg": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        }
+    }
+  },
+  {
+    "comment": "radio",
+    "data": {
+        "zdt_radio_default_stroke": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_radio_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_radio_primary_stroke": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        },
+        "zdt_radio_primary_fill": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_radio_danger_stroke": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_radio_danger_fill": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_radio_label_primary_text": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        },
+        "zdt_radio_label_danger_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        }
+    }
+  },
+  {
+    "comment": "listitem",
+    "data": {
+        "zdt_listitem_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_listitem_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_listitem_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_listitem_default_tickicon": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        },
+        "zdt_listitem_highlight_bg": {
+            'light': ['var(--dot_listItemHover)'],
+            'dark': ['rgba(44, 59, 77, 0.45)']
+        },
+        "zdt_listitem_active_border": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        },
+        "zdt_listitem_primary_bg": {
+            'light': ['var(--dot_listItemActive)'],
+            'dark': ['var(--dot_listItemActive)']
+        },
+        "zdt_listitem_secondary_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_listitem_secondary_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        }
+    }
+  },
+  {
+    "comment": "ribbon",
+    "data": {
+        "zdt_ribbon_default_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_ribbon_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_ribbon_default_border": {
+            'light': ['var(--zd_graytrans9)'],
+            'dark': ['var(--zd_graytrans9)']
+        },
+        "zdt_ribbon_default_tag_border": {
+            'light': ['var(--zd_smoke12)'],
+            'dark': ['var(--zd_smoke12)']
+        },
+        "zdt_ribbon_default_shadow": {
+            'light': ['var(--zd_graytrans9)'],
+            'dark': ['var(--zd_graytrans9)']
+        },
+        "zdt_ribbon_default_stamp_bg": {
+            'light': ['var(--zd_graytrans9)'],
+            'dark': ['var(--zd_graytrans9)']
+        },
+        "zdt_ribbon_white_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_ribbon_white_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_ribbon_palette_bg": {
+            'light': ['var(--zd_dark5)'],
+            'dark': ['var(--zd_dark5)']
+        },
+        "zdt_ribbon_danger_bg": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_ribbon_danger_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_ribbon_danger_shadow": {
+            'light': ['var(--zd_dangertrans7)'],
+            'dark': ['var(--zd_dangertrans7)']
+        },
+        "zdt_ribbon_danger_border": {
+            'light': ['var(--zd_dangertrans7)'],
+            'dark': ['var(--zd_dangertrans7)']
+        },
+        "zdt_ribbon_danger_stamp_bg": {
+            'light': ['var(--zd_dangertrans7)'],
+            'dark': ['var(--zd_dangertrans7)']
+        },
+        "zdt_ribbon_primary_bg": {
+            'light': ['var(--dot_primary)'],
+            'dark': ['var(--dot_butterflyblue)']
+        },
+        "zdt_ribbon_primary_text": {
+            'light': ['var(--dot_primary)'],
+            'dark': ['var(--dot_butterflyblue)']
+        },
+        "zdt_ribbon_primary_shadow": {
+            'light': ['var(--zd_primarytrans10)'],
+            'dark': ['var(--zd_primarytrans10)']
+        },
+        "zdt_ribbon_primary_border": {
+            'light': ['var(--zd_primarytrans10)'],
+            'dark': ['var(--zd_primarytrans10)']
+        },
+        "zdt_ribbon_primary_stamp_bg": {
+            'light': ['var(--zd_primarytrans10)'],
+            'dark': ['var(--zd_primarytrans10)']
+        },
+        "zdt_ribbon_secondary_bg": {
+            'light': ['var(--zd_olive13)'],
+            'dark': ['var(--zd_olive13)']
+        },
+        "zdt_ribbon_secondary_text": {
+            'light': ['var(--zd_olive13)'],
+            'dark': ['var(--zd_olive13)']
+        },
+        "zdt_ribbon_secondary_shadow": {
+            'light': ['var(--zd_olivetrans)'],
+            'dark': ['var(--zd_olivetrans)']
+        },
+        "zdt_ribbon_secondary_border": {
+            'light': ['var(--zd_olivetrans)'],
+            'dark': ['var(--zd_olivetrans)']
+        },
+        "zdt_ribbon_secondary_stamp_bg": {
+            'light': ['var(--zd_olivetrans)'],
+            'dark': ['var(--zd_olivetrans)']
+        },
+        "zdt_ribbon_info_bg": {
+            'light': ['var(--zd_info)'],
+            'dark': ['var(--zd_info)']
+        },
+        "zdt_ribbon_info_text": {
+            'light': ['var(--zd_info)'],
+            'dark': ['var(--zd_info)']
+        },
+        "zdt_ribbon_info_shadow": {
+            'light': ['var(--zd_orangetrans)'],
+            'dark': ['var(--zd_orangetrans)']
+        },
+        "zdt_ribbon_info_border": {
+            'light': ['var(--zd_orangetrans)'],
+            'dark': ['var(--zd_orangetrans)']
+        },
+        "zdt_ribbon_info_stamp_bg": {
+            'light': ['var(--zd_orangetrans)'],
+            'dark': ['var(--zd_orangetrans)']
+        },
+        "zdt_ribbon_dark_bg": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_ribbon_dark_shadow": {
+            'light': ['var(--zd_graytrans6)'],
+            'dark': ['var(--zd_graytrans6)']
+        },
+        "zdt_ribbon_dark_border": {
+            'light': ['var(--zd_graytrans6)'],
+            'dark': ['var(--zd_graytrans6)']
+        },
+        "zdt_ribbon_dark_stamp_bg": {
+            'light': ['var(--zd_graytrans4)'],
+            'dark': ['var(--zd_graytrans4)']
+        },
+        "zdt_ribbon_plain_text": {
+            'light': ['var(--zd_dark5)'],
+            'dark': ['var(--zd_dark5)']
+        },
+        "zdt_ribbon_flag_mirror_border": {
+            'light': ['var(--zd_mirror)'],
+            'dark': ['var(--zd_mirror)']
+        },
+        "zdt_ribbon_flag_white_border": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        }
+    }
+  },
+  {
+    "comment": "stencils",
+    "data": {
+        "zdt_stencil_primary_bg": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        },
+        "zdt_stencil_primary_gradient_bg": {
+            'light': ['linear-gradient(to left, var(--dot_catskillWhite) 0%, var(--dot_hawkesBlue) 33.33%, var(--dot_catskillWhite) 66.66%, var(--dot_catskillWhite) 100%)'],
+            'dark': ['linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)']
+        },
+        "zdt_stencil_secondary_bg": {
+            'light': ['var(--zdt_cta_grey_15_bg)'],
+            'dark': ['var(--zdt_cta_grey_15_bg)']
+        },
+        "zdt_stencil_secondary_gradient_bg": {
+            'light': ['linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%)'],
+            'dark': ['linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%)']
+        }
+    }
+  },
+  {
+    "comment": "switch",
+    "data": {
+        "zdt_switch_default_off_bg": {
+            'light': ['var(--zdt_cta_grey_35_border)'],
+            'dark': ['var(--zdt_cta_grey_35_border)']
+        },
+        "zdt_switch_default_on_bg": {
+            'light': ['var(--dot_strongGreen)'],
+            'dark': ['var(--dot_darkmint)']
+        },
+        "zdt_switch_circle_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_switch_circle_shadow": {
+            'light': ['var(--zd_smoke21)'],
+            'dark': ['var(--zd_smoke21)']
+        },
+        "zdt_switch_effect_off_bg": {
+            'light': ['var(--zdt_cta_grey_40_bg)'],
+            'dark': ['var(--zdt_cta_grey_40_bg)']
+        }
+    }
+  },
+  {
+    "comment": "textboxicon",
+    "data": {
+        "zdt_textboxicon_default_line_bg": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_textboxicon_default_icon": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_textboxicon_hover_icon": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_textboxicon_hover_line_bg": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_textboxicon_transparent_line_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_textboxicon_focus_line_bg": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_textboxicon_error_line_bg": {
+            'light': ['var(--dot_fireBrick)'],
+            'dark': ['#cc302d']
+        }
+    }
+  },
+  {
+    "comment": "textarea",
+    "data": {
+        "zdt_textarea_default_text": {
+            'light': ['var(--dot_inputDisable)'],
+            'dark': ['var(--dot_inputDisable)']
+        },
+        "zdt_textarea_default_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_textarea_default_border": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_textarea_placeholder_text": {
+            'light': ['var(--dot_inputPlaceholder)'],
+            'dark': ['var(--dot_inputPlaceholder)']
+        },
+        "zdt_textarea_transparent_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_textarea_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_textarea_focus_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_textarea_black_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        }
+    }
+  },
+  {
+    "comment": "tooltip",
+    "data": {
+        "zdt_tooltip_default_bg": {
+            'light': ['rgba(0, 0, 0, 0.95)'],
+            'dark': ['var(--dot_riverbed)']
+        },
+        "zdt_tooltip_default_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_tooltip_default_box_shadow": {
+            'light': ['none'],
+            'dark': ['rgba(0, 0, 0, 0.35)']
+        }
+    }
+  },
+  {
+    "comment": "select",
+    "data": {
+        "zdt_select_emptystate_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_select_disable_text": {
+            'light': ['var(--dot_inputDisable)'],
+            'dark': ['var(--dot_inputDisable)']
+        }
+    }
+  },
+  {
+    "comment": "multiselect",
+    "data": {
+        "zdt_multiselect_default_border": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_multiselect_transparent_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_multiselect_default_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_multiselect_transparent_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_multiselect_dark_hover_border": {
+            'light': ['var(--dot_stardust)'],
+            'dark': ['var(--dot_stardust)']
+        },
+        "zdt_multiselect_default_active_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_multiselect_transparent_active_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_multiselect_dark_active_border": {
+            'light': ['var(--dot_stardust)'],
+            'dark': ['var(--dot_stardust)']
+        },
+        "zdt_multiselect_delete_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_multiselect_delete_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_multiselect_delete_hover_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_multiselect_darkdelete_text": {
+            'light': ['var(--dot_santagrey)'],
+            'dark': ['var(--dot_santagrey)']
+        },
+        "zdt_multiselect_box_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_multiselect_selectall_text": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        },
+        "zdt_multiselect_message_text": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        }
+    }
+  },
+  {
+    "comment": "advanced multiselect",
+    "data": {
+        "zdt_advancedmultiselect_default_border": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_advancedmultiselect_transparent_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_advancedmultiselect_dark_border": {
+            'light': ['var(--dot_mulledwine)'],
+            'dark': ['var(--dot_mulledwine)']
+        },
+        "zdt_advancedmultiselect_default_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_advancedmultiselect_transparent_hover_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_advancedmultiselect_dark_hover_border": {
+            'light': ['var(--dot_stardust)'],
+            'dark': ['var(--dot_stardust)']
+        },
+        "zdt_advancedmultiselect_default_active_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_advancedmultiselect_transparent_active_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_advancedmultiselect_dark_active_border": {
+            'light': ['var(--dot_stardust)'],
+            'dark': ['var(--dot_stardust)']
+        },
+        "zdt_advancedmultiselect_delete_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_advancedmultiselect_delete_hover_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_advancedmultiselect_delete_bg": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_advancedmultiselect_box_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_advancedmultiselect_droppopup_text": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_advancedmultiselect_more_text": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        }
+    }
+  },
+  {
+    "comment": "ripple effect",
+    "data": {
+        "zdt_rippleeffect_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_rippleeffect_hover_border": {
+            'light': ['var(--zdt_cta_grey_35_border)'],
+            'dark': ['var(--zdt_cta_grey_35_border)']
+        },
+        "zdt_rippleeffect_hover_bg": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        },
+        "zdt_rippleeffect_primary_border": {
+            'light': ['var(--zdt_cta_alpha_hover_border)'],
+            'dark': ['var(--zdt_cta_alpha_hover_border)']
+        },
+        "zdt_rippleeffect_primary_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_rippleeffect_primary_active_border": {
+            'light': ['var(--zdt_cta_alpha_border)'],
+            'dark': ['var(--zdt_cta_alpha_border)']
+        },
+        "zdt_rippleeffect_primary_light_border": {
+            'light': ['var(--zdt_cta_secondary_light_border)'],
+            'dark': ['var(--zdt_cta_secondary_light_border)']
+        },
+        "zdt_rippleeffect_primary_light_bg": {
+            'light': ['var(--zdt_cta_primary_light_bg)'],
+            'dark': ['var(--zdt_cta_primary_light_bg)']
+        },
+        "zdt_rippleeffect_primary_dark_bg": {
+            'light': ['var(--zdt_cta_primary_light_hover_bg)'],
+            'dark': ['var(--zdt_cta_primary_light_hover_bg)']
+        },
+        "zdt_rippleeffect_primaryfilled_bg": {
+            'light': ['var(--zdt_cta_primary_hover_bg)'],
+            'dark': ['var(--zdt_cta_primary_hover_bg)']
+        },
+        "zdt_rippleeffect_green_border": {
+            'light': ['var(--dot_strongGreen)'],
+            'dark': ['var(--dot_darkmint)']
+        },
+        "zdt_rippleeffect_green_bg": {
+            'light': ['var(--dot_blacksqueeze)'],
+            'dark': ['var(--dot_blacksqueeze)']
+        },
+        "zdt_rippleeffect_slate_border": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_rippleeffect_navy_border": {
+            'light': ['var(--zdt_cta_grey_40_border)'],
+            'dark': ['var(--zdt_cta_grey_40_border)']
+        },
+        "zdt_rippleeffect_danger_border": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_rippleeffect_danger_bg": {
+            'light': ['var(--dot_whiteSmoke)'],
+            'dark': ['rgba(255, 107, 107, 0.05)']
+        }
+    }
+  },
+  {
+    "comment": "date time",
+    "data": {
+        "zdt_datetime_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_datetime_header_bg": {
+            'light': ['var(--dot_catskillWhite)'],
+            'dark': ['var(--dot_unknown1)']
+        },
+        "zdt_datetime_header_border": {
+            'light': ['var(--dot_solitude)'],
+            'dark': ['var(--dot_tuna)']
+        },
+        "zdt_datetime_datestr_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_datetime_datestr_hover_bg": {
+            'light': ['var(--dot_solitude)'],
+            'dark': ['var(--dot_tuna)']
+        },
+        "zdt_datetime_separator_border": {
+            'light': ['var(--dot_paleBlue)'],
+            'dark': ['var(--dot_tuna)']
+        },
+        "zdt_datetime_daystr_text": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        },
+        "zdt_datetime_invalid_text": {
+            'light': ['var(--dot_paleNavy)'],
+            'dark': ['var(--dot_paleNavy)']
+        },
+        "zdt_datetime_invalid_hover_text": {
+            'light': ['var(--dot_brightRed)'],
+            'dark': ['var(--dot_bittersweet)']
+        },
+        "zdt_datetime_invaliddate_text": {
+            'light': ['rgba(222, 53, 53, 0.3)'],
+            'dark': ['rgba(222, 53, 53, 0.3)']
+        },
+        "zdt_datetime_today_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_datetime_today_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_datetime_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_shuttleGrey)']
+        }
+    }
+  },
+  {
+    "comment": "year view",
+    "data": {
+        "zdt_yearview_default_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_yearview_month_bg": {
+            'light': ['var(--dot_catskillWhite)'],
+            'dark': ['var(--dot_unknown1)']
+        },
+        "zdt_yearview_month_hover_bg": {
+            'light': ['var(--dot_hawkesBlue)'],
+            'dark': ['var(--dot_brightgrey)']
+        },
+        "zdt_yearview_currentmonth_bg": {
+            'light': ['var(--zdt_cta_primary_bg)'],
+            'dark': ['var(--zdt_cta_primary_bg)']
+        },
+        "zdt_yearview_currentmonth_text": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_white)']
+        },
+        "zdt_yearview_yearbox_border": {
+            'light': ['var(--dot_paleBlue)'],
+            'dark': ['#384157']
+        },
+        "zdt_yearview_year_hover_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_yearview_yeartext_text": {
+            'light': ['var(--dot_slateGrey)'],
+            'dark': ['var(--dot_oslogrey)']
+        }
+    }
+  },
+  {
+    "comment": "date widget",
+    "data": {
+        "zdt_datewidget_input_border": {
+            'light': ['var(--dot_inputLine)'],
+            'dark': ['var(--dot_inputLine)']
+        },
+        "zdt_datewidget_enabled_border": {
+            'light': ['var(--dot_inputLineHover)'],
+            'dark': ['var(--dot_inputLineHover)']
+        },
+        "zdt_datewidget_textboxfocus_border": {
+            'light': ['var(--dot_inputLineFocus)'],
+            'dark': ['var(--dot_inputLineFocus)']
+        },
+        "zdt_datewidget_placeholder_text": {
+            'light': ['var(--dot_inputPlaceholder)'],
+            'dark': ['var(--dot_inputPlaceholder)']
+        },
+        "zdt_datewidget_placeholder_selection_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_datewidget_placeholder_selection_bg": {
+            'light': ['#b4d5fe'],
+            'dark': ['#b4d5fe']
+        }
+    }
+  },
+  {
+    "comment": "tab",
+    "data": {
+        "zdt_tab_default_border": {
+            'light': ['var(--dot_mirror)'],
+            'dark': ['var(--dot_mirror)']
+        },
+        "zdt_tab_alpha_text": {
+            'light': ['var(--dot_shuttleGrey)'],
+            'dark': ['var(--dot_cadetblue)']
+        },
+        "zdt_tab_alpha_hover_text": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_tab_alpha_hover_bg": {
+            'light': ['var(--zdt_cta_grey_10_bg)'],
+            'dark': ['var(--zdt_cta_grey_10_bg)']
+        },
+        "zdt_tab_alpha_active_text": {
+            'light': ['var(--zdt_cta_primary_text)'],
+            'dark': ['var(--zdt_cta_primary_text)']
+        },
+        "zdt_tab_alpha_active_border": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        },
+        "zdt_tab_delta_active_border": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        }
+    }
+  },
+  {
+    "comment": "tabs",
+    "data": {
+        "zdt_tabs_alpha_bg": {
+            'light': ['var(--dot_white)'],
+            'dark': ['var(--dot_ebonyclay)']
+        },
+        "zdt_tabs_alpha_border": {
+            'light': ['var(--zdt_cta_grey_15_border)'],
+            'dark': ['var(--zdt_cta_grey_15_border)']
+        },
+        "zdt_tabs_alpha_box_shadow": {
+            'light': ['var(--zd_dark10)'],
+            'dark': ['var(--zd_dark10)']
+        },
+        "zdt_tabs_delta_border": {
+            'light': ['var(--zdt_cta_primary_border)'],
+            'dark': ['var(--zdt_cta_primary_border)']
+        },
+        "zdt_tabs_highlight_border": {
+            'light': ['var(--dot_black)'],
+            'dark': ['var(--dot_platinum)']
+        }
+    }
+  },
+  {
+    "comment": "custom scroll",
+    "data": {
+        "zdt_customscroll_default_bg": {
+            'light': ['rgba(0, 0, 0, 0.02)'],
+            'dark': ['rgba(225, 225, 225, 0.06)']
+        },
+        "zdt_customscroll_thump_bg": {
+            'light': ['rgba(0, 0, 0, 0.12)'],
+            'dark': ['rgba(225, 225, 225, 0.12)']
+        },
+        "zdt_customscroll_thump_hover_bg": {
+            'light': ['rgba(0, 0, 0, 0.16)'],
+            'dark': ['rgba(168, 176, 189, 0.3)']
+        },
+        "zdt_customscroll_border": {
+            'light': ['rgba(44, 51, 77, 0.1)'],
+            'dark': ['rgba(225, 225, 225, 0.12)']
+        },
+        "zdt_customscroll_thump_dark_bg": {
+            'light': ['rgba(225, 225, 225, 0.15)'],
+            'dark': ['rgba(225, 225, 225, 0.12)']
+        },
+        "zdt_customscroll_thump_dark_hover_bg": {
+            'light': ['rgba(225, 225, 225, 0.17)'],
+            'dark': ['rgba(225, 225, 225, 0.14)']
+        },
+        "zdt_customscroll_dark_border": {
+            'light': ['rgba(225, 225, 225, 0.12)'],
+            'dark': ['rgba(225, 225, 225, 0.12)']
+        },
+        "zdt_customscroll_dark_bg": {
+            'light': ['rgba(225, 225, 225, 0.06)'],
+            'dark': ['rgba(225, 225, 225, 0.06)']
+        }
+    }
+  }
+];
+
+module.exports = { componentAppearanceVariables: componentAppearanceVariables };