@zohodesk/components 1.0.0-temp-166 → 1.0.0-temp-167

package/README.md

@@ -32,6 +32,26 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.1.0
+
+- Internal color-variable-preprocessor package implemented
+
+# 1.0.0
+
+- alpha release removed and version changed to normal flow
+
+# 1.0.0-alpha-278
+
+- **DateTime** - Date.Replace check added to avoid run time error
+
+# 1.0.0-alpha-277
+
+- **DropBox** - `focusScopeProps` will be served by `customProps` from now.
+
+- **ListItem, ListItemWithAvatar, ListItemWithIcon, ListItemWithCheckBox, ListItemWithRadio** - default role `option` has been added to the list item container.
+
+- **ListContainer** - A11y prop key => `data-a11y-inset-focus` set `true` as default for the ListContainer.
+
 # 1.0.0-alpha-276
 
 - **DateTime** - TimeZone null Case Handled

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='dark'][data-theme='blue'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(35,43,56);
+	--zdt_dropbox_dark_bg: rgb(35,43,56);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(35,43,56);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(38,47,61);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(71,157,255);
+	--zdt_listitem_dark_bg: rgb(35,43,56);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(38,47,61);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(71,157,255);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(35,43,56);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(35,43,56);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(168,176,189);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(168,176,189);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(168,176,189);
+	--zdt_dropdown_darkheading_text: rgb(168,176,189);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(71,157,255);
+	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='dark'][data-theme='green'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(35,43,56);
+	--zdt_dropbox_dark_bg: rgb(35,43,56);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(35,43,56);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(38,47,61);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(69,161,89);
+	--zdt_listitem_dark_bg: rgb(35,43,56);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(38,47,61);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(69,161,89);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(35,43,56);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(35,43,56);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(168,176,189);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(168,176,189);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(168,176,189);
+	--zdt_dropdown_darkheading_text: rgb(168,176,189);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(69,161,89);
+	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='dark'][data-theme='orange'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(35,43,56);
+	--zdt_dropbox_dark_bg: rgb(35,43,56);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(35,43,56);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(38,47,61);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(233,79,79);
+	--zdt_listitem_dark_bg: rgb(35,43,56);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(38,47,61);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(233,79,79);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(35,43,56);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(35,43,56);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(168,176,189);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(168,176,189);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(168,176,189);
+	--zdt_dropdown_darkheading_text: rgb(168,176,189);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(255,128,31);
+	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='dark'][data-theme='red'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(35,43,56);
+	--zdt_dropbox_dark_bg: rgb(35,43,56);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(35,43,56);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(38,47,61);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(255,128,31);
+	--zdt_listitem_dark_bg: rgb(35,43,56);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(38,47,61);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(255,128,31);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(35,43,56);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(35,43,56);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(168,176,189);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(168,176,189);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(168,176,189);
+	--zdt_dropdown_darkheading_text: rgb(168,176,189);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(233,79,79);
+	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='dark'][data-theme='yellow'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(35,43,56);
+	--zdt_dropbox_dark_bg: rgb(35,43,56);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(35,43,56);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(38,47,61);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(215,152,53);
+	--zdt_listitem_dark_bg: rgb(35,43,56);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(38,47,61);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(215,152,53);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(35,43,56);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(35,43,56);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(168,176,189);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(168,176,189);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(168,176,189);
+	--zdt_dropdown_darkheading_text: rgb(168,176,189);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(215,152,53);
+	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
 }

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='light'][data-theme='blue'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(56,63,85);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_bg: rgb(56,63,85);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(56,63,87);
+	--zdt_dropbox_dark_bg: rgb(56,63,87);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(56,63,87);
-	--listitem_dark_text: rgb(208,208,212);
-	--listitem_dark_effect_bg: rgb(68,74,97);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(108,187,252);
+	--zdt_listitem_dark_bg: rgb(56,63,87);
+	--zdt_listitem_dark_text: rgb(208,208,212);
+	--zdt_listitem_dark_effect_bg: rgb(68,74,97);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(108,187,252);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(66,72,95);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(66,72,95);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(75,81,104);
-	--multiselect_darkmsg_bg: rgb(56,63,87);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(255,255,255);
+	--zdt_multiselect_dark_border: rgb(75,81,104);
+	--zdt_multiselect_darkmsg_bg: rgb(56,63,87);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
 	
 	/* avatar */
-	--avatar_white_border: rgb(90,97,111);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(90,97,111);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(255,255,255);
+	--zdt_dropdown_darkheading_text: rgb(255,255,255);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(10,115,235);
+	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='light'][data-theme='green'] {
 	/* stencil */
-	--stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(29,47,51);
+	--zdt_dropbox_dark_bg: rgb(29,47,51);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(29,47,51);
-	--listitem_dark_text: rgb(208,208,212);
-	--listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
-	--listitem_dark_active_bg: rgb(45,72,78);
-	--listitem_dark_tickicon: rgb(74,192,100);
+	--zdt_listitem_dark_bg: rgb(29,47,51);
+	--zdt_listitem_dark_text: rgb(208,208,212);
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: rgb(45,72,78);
+	--zdt_listitem_dark_tickicon: rgb(74,192,100);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgba(255, 255, 255, 0.07);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgba(255, 255, 255, 0.2);
-	--multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(255,255,255);
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
 	
 	/* avatar */
-	--avatar_white_border: rgba(255, 255, 255, 0.2);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(255,255,255);
+	--zdt_dropdown_darkheading_text: rgb(255,255,255);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(38,169,66);
+	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='light'][data-theme='orange'] {
 	/* stencil */
-	--stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(51,46,36);
+	--zdt_dropbox_dark_bg: rgb(51,46,36);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(51,46,36);
-	--listitem_dark_text: rgb(208,208,212);
-	--listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
-	--listitem_dark_active_bg: rgb(75,67,53);
-	--listitem_dark_tickicon: rgb(255,99,99);
+	--zdt_listitem_dark_bg: rgb(51,46,36);
+	--zdt_listitem_dark_text: rgb(208,208,212);
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: rgb(75,67,53);
+	--zdt_listitem_dark_tickicon: rgb(255,99,99);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgba(255, 255, 255, 0.07);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgba(255, 255, 255, 0.2);
-	--multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(255,255,255);
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
 	
 	/* avatar */
-	--avatar_white_border: rgba(255, 255, 255, 0.2);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(255,255,255);
+	--zdt_dropdown_darkheading_text: rgb(255,255,255);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(229,119,23);
+	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
 }