@zohodesk/components 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/README.md +5 -1
  2. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +24 -24
  3. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +24 -24
  4. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +24 -24
  5. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +24 -24
  6. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +24 -24
  7. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +24 -24
  8. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +24 -24
  9. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +24 -24
  10. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +24 -24
  11. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +24 -24
  12. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +24 -24
  13. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +24 -24
  14. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +24 -24
  15. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +24 -24
  16. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +24 -24
  17. package/es/Button/__tests__/Button.spec.js +61 -0
  18. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +440 -0
  19. package/lib/Button/__tests__/Button.spec.js +62 -0
  20. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +440 -0
  21. package/package.json +12 -7
  22. package/result.json +1 -0
  23. package/es/Accordion/__tests__/Accordion.spec.js +0 -79
  24. package/es/Animation/__tests__/Animation.spec.js +0 -17
  25. package/es/Avatar/__tests__/Avatar.spec.js +0 -161
  26. package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +0 -288
  27. package/es/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -76
  28. package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +0 -226
  29. package/es/Buttongroup/__test__/Buttongroup.spec.js +0 -73
  30. package/es/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap +0 -146
  31. package/es/Card/__tests__/Card.spec.js +0 -36
  32. package/es/CheckBox/__tests__/CheckBox.spec.js +0 -12
  33. package/es/DateTime/__tests__/CalendarView.spec.js +0 -33
  34. package/es/DateTime/__tests__/DateTime.spec.js +0 -115
  35. package/es/DateTime/__tests__/DateWidget.spec.js +0 -75
  36. package/es/DropBox/__tests__/DropBox.spec.js +0 -81
  37. package/es/DropDown/__tests__/DropDown.spec.js +0 -44
  38. package/es/DropDown/__tests__/DropDownItem.spec.js +0 -45
  39. package/es/DropDown/__tests__/DropDownSearch.spec.js +0 -11
  40. package/es/Label/__tests__/Label.spec.js +0 -120
  41. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +0 -101
  42. package/es/Layout/__tests__/Box.spec.js +0 -114
  43. package/es/Layout/__tests__/Container.spec.js +0 -120
  44. package/es/MultiSelect/__tests__/MultiSelect.spec.js +0 -160
  45. package/es/PopOver/__tests__/PopOver.spec.js +0 -14
  46. package/es/Popup/__tests__/Popup.spec.js +0 -134
  47. package/es/Radio/__tests__/Radiospec.js +0 -23
  48. package/es/Ribbon/__tests__/Ribbon.spec.js +0 -168
  49. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +0 -163
  50. package/es/Select/__tests__/Select.spec.js +0 -345
  51. package/es/Stencils/__tests__/Stencils.spec.js +0 -69
  52. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +0 -49
  53. package/es/Tab/__tests__/Tab.spec.js +0 -117
  54. package/es/Tab/__tests__/TabContent.spec.js +0 -16
  55. package/es/Tab/__tests__/TabContentWrapper.spec.js +0 -50
  56. package/es/Tab/__tests__/TabWrapper.spec.js +0 -86
  57. package/es/Tab/__tests__/Tabs.spec.js +0 -115
  58. package/es/Tag/__tests__/Tag.spec.js +0 -28
  59. package/es/TextBox/__tests__/TextBox.spec.js +0 -189
  60. package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +0 -127
  61. package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +0 -212
  62. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +0 -334
  63. package/es/Textarea/__tests__/Textarea.spec.js +0 -171
  64. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +0 -97
  65. package/es/Tooltip/__tests__/Tooltip.spec.js +0 -52
  66. package/es/utils/__tests__/constructFullName.spec.js +0 -9
  67. package/es/utils/__tests__/debounce.spec.js +0 -37
  68. package/es/utils/__tests__/getInitial.spec.js +0 -23
  69. package/lib/Accordion/__tests__/Accordion.spec.js +0 -85
  70. package/lib/Animation/__tests__/Animation.spec.js +0 -23
  71. package/lib/Avatar/__tests__/Avatar.spec.js +0 -208
  72. package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +0 -288
  73. package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -92
  74. package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +0 -226
  75. package/lib/Buttongroup/__test__/Buttongroup.spec.js +0 -86
  76. package/lib/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap +0 -146
  77. package/lib/Card/__tests__/Card.spec.js +0 -56
  78. package/lib/CheckBox/__tests__/CheckBox.spec.js +0 -18
  79. package/lib/DateTime/__tests__/CalendarView.spec.js +0 -45
  80. package/lib/DateTime/__tests__/DateTime.spec.js +0 -127
  81. package/lib/DateTime/__tests__/DateWidget.spec.js +0 -81
  82. package/lib/DropBox/__tests__/DropBox.spec.js +0 -87
  83. package/lib/DropDown/__tests__/DropDown.spec.js +0 -50
  84. package/lib/DropDown/__tests__/DropDownItem.spec.js +0 -51
  85. package/lib/DropDown/__tests__/DropDownSearch.spec.js +0 -17
  86. package/lib/Label/__tests__/Label.spec.js +0 -137
  87. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +0 -101
  88. package/lib/Layout/__tests__/Box.spec.js +0 -121
  89. package/lib/Layout/__tests__/Container.spec.js +0 -127
  90. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +0 -170
  91. package/lib/PopOver/__tests__/PopOver.spec.js +0 -20
  92. package/lib/Popup/__tests__/Popup.spec.js +0 -192
  93. package/lib/Radio/__tests__/Radiospec.js +0 -29
  94. package/lib/Ribbon/__tests__/Ribbon.spec.js +0 -193
  95. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +0 -163
  96. package/lib/Select/__tests__/Select.spec.js +0 -383
  97. package/lib/Stencils/__tests__/Stencils.spec.js +0 -84
  98. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +0 -49
  99. package/lib/Tab/__tests__/Tab.spec.js +0 -123
  100. package/lib/Tab/__tests__/TabContent.spec.js +0 -22
  101. package/lib/Tab/__tests__/TabContentWrapper.spec.js +0 -59
  102. package/lib/Tab/__tests__/TabWrapper.spec.js +0 -100
  103. package/lib/Tab/__tests__/Tabs.spec.js +0 -123
  104. package/lib/Tag/__tests__/Tag.spec.js +0 -35
  105. package/lib/TextBox/__tests__/TextBox.spec.js +0 -205
  106. package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +0 -127
  107. package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +0 -228
  108. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +0 -334
  109. package/lib/Textarea/__tests__/Textarea.spec.js +0 -186
  110. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +0 -97
  111. package/lib/Tooltip/__tests__/Tooltip.spec.js +0 -98
  112. package/lib/utils/__tests__/constructFullName.spec.js +0 -12
  113. package/lib/utils/__tests__/debounce.spec.js +0 -40
  114. package/lib/utils/__tests__/getInitial.spec.js +0 -26
package/README.md CHANGED
@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
32
32
  - TextBoxIcon
33
33
  - Tooltip
34
34
 
35
+ # 1.1.1
36
+
37
+ - ComponentTheme file --zdt_ prefix missing changes
38
+
35
39
  # 1.1.0
36
40
 
37
41
  - Internal color-variable-preprocessor package implemented
@@ -42,7 +46,7 @@ In this Package, we Provide Some Basic Components to Build Web App
42
46
 
43
47
  # 1.0.0-alpha-278
44
48
 
45
- - **DateTime** - Date.Raplace check added to avoid run time error
49
+ - **DateTime** - Date.Replace check added to avoid run time error
46
50
 
47
51
  # 1.0.0-alpha-277
48
52
 
package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='dark'][data-theme='blue'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(35,43,56);
7
+ --zdt_dropbox_dark_bg: rgb(35,43,56);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(35,43,56);
11
- --listitem_dark_text: rgb(226,228,230);
12
- --listitem_dark_effect_bg: rgb(38,47,61);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(71,157,255);
10
+ --zdt_listitem_dark_bg: rgb(35,43,56);
11
+ --zdt_listitem_dark_text: rgb(226,228,230);
12
+ --zdt_listitem_dark_effect_bg: rgb(38,47,61);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(71,157,255);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(35,43,56);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(226,228,230);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(35,43,56);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(168,176,189);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(168,176,189);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(168,176,189);
41
+ --zdt_dropdown_darkheading_text: rgb(168,176,189);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(71,157,255);
44
+ --zdt_a11y_focusScope_focus_border: rgb(71,157,255);
45
45
  }
package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='dark'][data-theme='green'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(35,43,56);
7
+ --zdt_dropbox_dark_bg: rgb(35,43,56);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(35,43,56);
11
- --listitem_dark_text: rgb(226,228,230);
12
- --listitem_dark_effect_bg: rgb(38,47,61);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(69,161,89);
10
+ --zdt_listitem_dark_bg: rgb(35,43,56);
11
+ --zdt_listitem_dark_text: rgb(226,228,230);
12
+ --zdt_listitem_dark_effect_bg: rgb(38,47,61);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(69,161,89);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(35,43,56);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(226,228,230);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(35,43,56);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(168,176,189);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(168,176,189);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(168,176,189);
41
+ --zdt_dropdown_darkheading_text: rgb(168,176,189);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(69,161,89);
44
+ --zdt_a11y_focusScope_focus_border: rgb(69,161,89);
45
45
  }
package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='dark'][data-theme='orange'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(35,43,56);
7
+ --zdt_dropbox_dark_bg: rgb(35,43,56);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(35,43,56);
11
- --listitem_dark_text: rgb(226,228,230);
12
- --listitem_dark_effect_bg: rgb(38,47,61);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(233,79,79);
10
+ --zdt_listitem_dark_bg: rgb(35,43,56);
11
+ --zdt_listitem_dark_text: rgb(226,228,230);
12
+ --zdt_listitem_dark_effect_bg: rgb(38,47,61);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(233,79,79);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(35,43,56);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(226,228,230);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(35,43,56);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(168,176,189);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(168,176,189);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(168,176,189);
41
+ --zdt_dropdown_darkheading_text: rgb(168,176,189);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(255,128,31);
44
+ --zdt_a11y_focusScope_focus_border: rgb(255,128,31);
45
45
  }
package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='dark'][data-theme='red'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(35,43,56);
7
+ --zdt_dropbox_dark_bg: rgb(35,43,56);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(35,43,56);
11
- --listitem_dark_text: rgb(226,228,230);
12
- --listitem_dark_effect_bg: rgb(38,47,61);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(255,128,31);
10
+ --zdt_listitem_dark_bg: rgb(35,43,56);
11
+ --zdt_listitem_dark_text: rgb(226,228,230);
12
+ --zdt_listitem_dark_effect_bg: rgb(38,47,61);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(255,128,31);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(35,43,56);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(226,228,230);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(35,43,56);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(168,176,189);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(168,176,189);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(168,176,189);
41
+ --zdt_dropdown_darkheading_text: rgb(168,176,189);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(233,79,79);
44
+ --zdt_a11y_focusScope_focus_border: rgb(233,79,79);
45
45
  }
package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='dark'][data-theme='yellow'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(35,43,56);
7
+ --zdt_dropbox_dark_bg: rgb(35,43,56);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(35,43,56);
11
- --listitem_dark_text: rgb(226,228,230);
12
- --listitem_dark_effect_bg: rgb(38,47,61);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(215,152,53);
10
+ --zdt_listitem_dark_bg: rgb(35,43,56);
11
+ --zdt_listitem_dark_text: rgb(226,228,230);
12
+ --zdt_listitem_dark_effect_bg: rgb(38,47,61);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(215,152,53);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(35,43,56);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(226,228,230);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(35,43,56);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(168,176,189);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(168,176,189);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(168,176,189);
41
+ --zdt_dropdown_darkheading_text: rgb(168,176,189);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(215,152,53);
44
+ --zdt_a11y_focusScope_focus_border: rgb(215,152,53);
45
45
  }
package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='light'][data-theme='blue'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgb(56,63,85);
4
- --stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
3
+ --zdt_stencil_dark_bg: rgb(56,63,85);
4
+ --zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(56,63,87);
7
+ --zdt_dropbox_dark_bg: rgb(56,63,87);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(56,63,87);
11
- --listitem_dark_text: rgb(208,208,212);
12
- --listitem_dark_effect_bg: rgb(68,74,97);
13
- --listitem_dark_active_bg: rgb(59,77,109);
14
- --listitem_dark_tickicon: rgb(108,187,252);
10
+ --zdt_listitem_dark_bg: rgb(56,63,87);
11
+ --zdt_listitem_dark_text: rgb(208,208,212);
12
+ --zdt_listitem_dark_effect_bg: rgb(68,74,97);
13
+ --zdt_listitem_dark_active_bg: rgb(59,77,109);
14
+ --zdt_listitem_dark_tickicon: rgb(108,187,252);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgb(66,72,95);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgb(66,72,95);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgb(75,81,104);
26
- --multiselect_darkmsg_bg: rgb(56,63,87);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(255,255,255);
25
+ --zdt_multiselect_dark_border: rgb(75,81,104);
26
+ --zdt_multiselect_darkmsg_bg: rgb(56,63,87);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgb(90,97,111);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgb(90,97,111);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(255,255,255);
41
+ --zdt_dropdown_darkheading_text: rgb(255,255,255);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(10,115,235);
44
+ --zdt_a11y_focusScope_focus_border: rgb(10,115,235);
45
45
  }
package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='light'][data-theme='green'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --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%);
3
+ --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
+ --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%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(29,47,51);
7
+ --zdt_dropbox_dark_bg: rgb(29,47,51);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(29,47,51);
11
- --listitem_dark_text: rgb(208,208,212);
12
- --listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --listitem_dark_active_bg: rgb(45,72,78);
14
- --listitem_dark_tickicon: rgb(74,192,100);
10
+ --zdt_listitem_dark_bg: rgb(29,47,51);
11
+ --zdt_listitem_dark_text: rgb(208,208,212);
12
+ --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
+ --zdt_listitem_dark_active_bg: rgb(45,72,78);
14
+ --zdt_listitem_dark_tickicon: rgb(74,192,100);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(255,255,255);
25
+ --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
+ --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(255,255,255);
41
+ --zdt_dropdown_darkheading_text: rgb(255,255,255);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(38,169,66);
44
+ --zdt_a11y_focusScope_focus_border: rgb(38,169,66);
45
45
  }
package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='light'][data-theme='orange'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --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%);
3
+ --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
+ --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%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(51,46,36);
7
+ --zdt_dropbox_dark_bg: rgb(51,46,36);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(51,46,36);
11
- --listitem_dark_text: rgb(208,208,212);
12
- --listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --listitem_dark_active_bg: rgb(75,67,53);
14
- --listitem_dark_tickicon: rgb(255,99,99);
10
+ --zdt_listitem_dark_bg: rgb(51,46,36);
11
+ --zdt_listitem_dark_text: rgb(208,208,212);
12
+ --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
+ --zdt_listitem_dark_active_bg: rgb(75,67,53);
14
+ --zdt_listitem_dark_tickicon: rgb(255,99,99);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(255,255,255);
25
+ --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
+ --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(255,255,255);
41
+ --zdt_dropdown_darkheading_text: rgb(255,255,255);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(229,119,23);
44
+ --zdt_a11y_focusScope_focus_border: rgb(229,119,23);
45
45
  }
package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css CHANGED
@@ -1,45 +1,45 @@
1
1
  [data-mode='light'][data-theme='red'] {
2
2
  /* stencil */
3
- --stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
- --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%);
3
+ --zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
4
+ --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%);
5
5
 
6
6
  /* dropbox */
7
- --dropbox_dark_bg: rgb(52,34,45);
7
+ --zdt_dropbox_dark_bg: rgb(52,34,45);
8
8
 
9
9
  /* listitem */
10
- --listitem_dark_bg: rgb(52,34,45);
11
- --listitem_dark_text: rgb(208,208,212);
12
- --listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
- --listitem_dark_active_bg: rgb(77,50,67);
14
- --listitem_dark_tickicon: rgb(229,119,23);
10
+ --zdt_listitem_dark_bg: rgb(52,34,45);
11
+ --zdt_listitem_dark_text: rgb(208,208,212);
12
+ --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
13
+ --zdt_listitem_dark_active_bg: rgb(77,50,67);
14
+ --zdt_listitem_dark_tickicon: rgb(229,119,23);
15
15
 
16
16
  /* tag */
17
- --tag_dark_text: rgb(208,208,212);
18
- --tag_dark_bg: rgba(255, 255, 255, 0.07);
19
- --tag_dark_hover_text: rgb(208,208,212);
20
- --tag_dark_hover_bg: rgb(80,51,72);
21
- --tag_dark_close_bg: rgb(134,70,84);
22
- --tag_dark_close_text: rgb(222,53,53);
17
+ --zdt_tag_dark_text: rgb(208,208,212);
18
+ --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
19
+ --zdt_tag_dark_hover_text: rgb(208,208,212);
20
+ --zdt_tag_dark_hover_bg: rgb(80,51,72);
21
+ --zdt_tag_dark_close_bg: rgb(134,70,84);
22
+ --zdt_tag_dark_close_text: rgb(222,53,53);
23
23
 
24
24
  /* multiselect */
25
- --multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
- --multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
- --multiselect_darkmsg_text: rgb(208,208,212);
28
- --multiselect_darkdelete_hover_text: rgb(255,255,255);
25
+ --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
26
+ --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
27
+ --zdt_multiselect_darkmsg_text: rgb(208,208,212);
28
+ --zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
29
29
 
30
30
  /* avatar */
31
- --avatar_white_border: rgba(255, 255, 255, 0.2);
32
- --avatar_white_text: rgb(255,255,255);
31
+ --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
32
+ --zdt_avatar_white_text: rgb(255,255,255);
33
33
 
34
34
  /* label */
35
- --label_dark_text: rgb(208,208,212);
35
+ --zdt_label_dark_text: rgb(208,208,212);
36
36
 
37
37
  /* textbox */
38
- --textbox_light_text: rgb(255,255,255);
38
+ --zdt_textbox_light_text: rgb(255,255,255);
39
39
 
40
40
  /* dropdown */
41
- --dropdown_darkheading_text: rgb(255,255,255);
41
+ --zdt_dropdown_darkheading_text: rgb(255,255,255);
42
42
 
43
43
  /* focusscope */
44
- --a11y_focusScope_focus_border: rgb(222,53,53);
44
+ --zdt_a11y_focusScope_focus_border: rgb(222,53,53);
45
45
  }