@ioca/react 1.5.9 → 1.5.11

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 (240) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +33 -31
  3. package/lib/cjs/components/affix/affix.js.map +1 -1
  4. package/lib/cjs/components/affix/totop.js.map +1 -1
  5. package/lib/cjs/components/badge/badge.js.map +1 -1
  6. package/lib/cjs/components/button/button.js.map +1 -1
  7. package/lib/cjs/components/button/confirm.js.map +1 -1
  8. package/lib/cjs/components/button/group.js.map +1 -1
  9. package/lib/cjs/components/button/toggle.js.map +1 -1
  10. package/lib/cjs/components/card/card.js.map +1 -1
  11. package/lib/cjs/components/checkbox/checkbox.js +1 -1
  12. package/lib/cjs/components/checkbox/checkbox.js.map +1 -1
  13. package/lib/cjs/components/checkbox/item.js.map +1 -1
  14. package/lib/cjs/components/collapse/collapse.js.map +1 -1
  15. package/lib/cjs/components/collapse/item.js.map +1 -1
  16. package/lib/cjs/components/datagrid/cell.js +5 -2
  17. package/lib/cjs/components/datagrid/cell.js.map +1 -1
  18. package/lib/cjs/components/datagrid/datagrid.js +148 -50
  19. package/lib/cjs/components/datagrid/datagrid.js.map +1 -1
  20. package/lib/cjs/components/datagrid/helper.js +83 -0
  21. package/lib/cjs/components/datagrid/helper.js.map +1 -0
  22. package/lib/cjs/components/datagrid/resize.js +35 -7
  23. package/lib/cjs/components/datagrid/resize.js.map +1 -1
  24. package/lib/cjs/components/datagrid/row.js +17 -3
  25. package/lib/cjs/components/datagrid/row.js.map +1 -1
  26. package/lib/cjs/components/datagrid/sorter.js.map +1 -1
  27. package/lib/cjs/components/datagrid/virtual.js +283 -0
  28. package/lib/cjs/components/datagrid/virtual.js.map +1 -0
  29. package/lib/cjs/components/description/description.js.map +1 -1
  30. package/lib/cjs/components/drawer/drawer.js.map +1 -1
  31. package/lib/cjs/components/dropdown/dropdown.js.map +1 -1
  32. package/lib/cjs/components/dropdown/item.js.map +1 -1
  33. package/lib/cjs/components/editor/controls.js.map +1 -1
  34. package/lib/cjs/components/editor/editor.js +5 -0
  35. package/lib/cjs/components/editor/editor.js.map +1 -1
  36. package/lib/cjs/components/editor/memtion.js.map +1 -1
  37. package/lib/cjs/components/flex/flex.js.map +1 -1
  38. package/lib/cjs/components/form/context.js.map +1 -1
  39. package/lib/cjs/components/form/field.js.map +1 -1
  40. package/lib/cjs/components/form/form.js.map +1 -1
  41. package/lib/cjs/components/form/useConfig.js.map +1 -1
  42. package/lib/cjs/components/form/useForm.js.map +1 -1
  43. package/lib/cjs/components/icon/icon.js.map +1 -1
  44. package/lib/cjs/components/image/image.js.map +1 -1
  45. package/lib/cjs/components/image/list.js.map +1 -1
  46. package/lib/cjs/components/input/container.js.map +1 -1
  47. package/lib/cjs/components/input/input.js.map +1 -1
  48. package/lib/cjs/components/input/number.js.map +1 -1
  49. package/lib/cjs/components/input/range.js.map +1 -1
  50. package/lib/cjs/components/input/textarea.js.map +1 -1
  51. package/lib/cjs/components/list/item.js.map +1 -1
  52. package/lib/cjs/components/list/list.js.map +1 -1
  53. package/lib/cjs/components/loading/loading.js.map +1 -1
  54. package/lib/cjs/components/message/message.js.map +1 -1
  55. package/lib/cjs/components/modal/content.js.map +1 -1
  56. package/lib/cjs/components/modal/context.js.map +1 -1
  57. package/lib/cjs/components/modal/hookModal.js.map +1 -1
  58. package/lib/cjs/components/modal/modal.js.map +1 -1
  59. package/lib/cjs/components/modal/useModal.js.map +1 -1
  60. package/lib/cjs/components/pagination/page.js.map +1 -1
  61. package/lib/cjs/components/pagination/pagination.js.map +1 -1
  62. package/lib/cjs/components/picker/colors/footer.js.map +1 -1
  63. package/lib/cjs/components/picker/colors/handle.js.map +1 -1
  64. package/lib/cjs/components/picker/colors/index.js.map +1 -1
  65. package/lib/cjs/components/picker/dates/dates.js.map +1 -1
  66. package/lib/cjs/components/picker/dates/index.js.map +1 -1
  67. package/lib/cjs/components/picker/dates/panel.js.map +1 -1
  68. package/lib/cjs/components/picker/time/index.js.map +1 -1
  69. package/lib/cjs/components/picker/time/item.js.map +1 -1
  70. package/lib/cjs/components/picker/time/panel.js.map +1 -1
  71. package/lib/cjs/components/popconfirm/popconfirm.js.map +1 -1
  72. package/lib/cjs/components/popup/content.js.map +1 -1
  73. package/lib/cjs/components/popup/popup.js.map +1 -1
  74. package/lib/cjs/components/progress/circle.js.map +1 -1
  75. package/lib/cjs/components/progress/line.js.map +1 -1
  76. package/lib/cjs/components/progress/progress.js.map +1 -1
  77. package/lib/cjs/components/radio/item.js.map +1 -1
  78. package/lib/cjs/components/radio/radio.js +2 -2
  79. package/lib/cjs/components/radio/radio.js.map +1 -1
  80. package/lib/cjs/components/resizable/resizable.js.map +1 -1
  81. package/lib/cjs/components/river/river.js.map +1 -1
  82. package/lib/cjs/components/select/options.js.map +1 -1
  83. package/lib/cjs/components/select/select.js.map +1 -1
  84. package/lib/cjs/components/step/divider.js.map +1 -1
  85. package/lib/cjs/components/step/item.js.map +1 -1
  86. package/lib/cjs/components/step/step.js.map +1 -1
  87. package/lib/cjs/components/swiper/item.js.map +1 -1
  88. package/lib/cjs/components/swiper/swiper.js.map +1 -1
  89. package/lib/cjs/components/tabs/item.js.map +1 -1
  90. package/lib/cjs/components/tabs/tabs.js.map +1 -1
  91. package/lib/cjs/components/tag/tag.js.map +1 -1
  92. package/lib/cjs/components/text/highlight.js.map +1 -1
  93. package/lib/cjs/components/text/number.js.map +1 -1
  94. package/lib/cjs/components/text/text.js.map +1 -1
  95. package/lib/cjs/components/text/time.js.map +1 -1
  96. package/lib/cjs/components/tree/item.js.map +1 -1
  97. package/lib/cjs/components/tree/tree.js.map +1 -1
  98. package/lib/cjs/components/upload/dropbox.js +54 -0
  99. package/lib/cjs/components/upload/dropbox.js.map +1 -0
  100. package/lib/cjs/components/upload/renderFile.js +33 -36
  101. package/lib/cjs/components/upload/renderFile.js.map +1 -1
  102. package/lib/cjs/components/upload/upload.js +100 -69
  103. package/lib/cjs/components/upload/upload.js.map +1 -1
  104. package/lib/cjs/components/utils/empty/index.js.map +1 -1
  105. package/lib/cjs/components/utils/helpericon/helpericon.js.map +1 -1
  106. package/lib/cjs/components/video/video.js.map +1 -1
  107. package/lib/cjs/js/hooks.js +7 -0
  108. package/lib/cjs/js/hooks.js.map +1 -1
  109. package/lib/cjs/js/usePreview/content.js.map +1 -1
  110. package/lib/cjs/js/usePreview/index.js.map +1 -1
  111. package/lib/cjs/js/usePreview/renderFile.js +1 -1
  112. package/lib/cjs/js/usePreview/renderFile.js.map +1 -1
  113. package/lib/cjs/js/usePreview/type.js.map +1 -1
  114. package/lib/cjs/js/useRipple/index.js +6 -6
  115. package/lib/cjs/js/useRipple/index.js.map +1 -1
  116. package/lib/cjs/js/useTheme/index.js.map +1 -1
  117. package/lib/cjs/js/utils.js.map +1 -1
  118. package/lib/css/colors.css +784 -779
  119. package/lib/css/index.css +1 -2
  120. package/lib/css/index.css.map +1 -1
  121. package/lib/css/reset.css +59 -69
  122. package/lib/es/components/affix/affix.js.map +1 -1
  123. package/lib/es/components/affix/totop.js.map +1 -1
  124. package/lib/es/components/badge/badge.js.map +1 -1
  125. package/lib/es/components/button/button.js.map +1 -1
  126. package/lib/es/components/button/confirm.js.map +1 -1
  127. package/lib/es/components/button/group.js.map +1 -1
  128. package/lib/es/components/button/toggle.js.map +1 -1
  129. package/lib/es/components/card/card.js.map +1 -1
  130. package/lib/es/components/checkbox/checkbox.js +1 -1
  131. package/lib/es/components/checkbox/checkbox.js.map +1 -1
  132. package/lib/es/components/checkbox/item.js.map +1 -1
  133. package/lib/es/components/collapse/collapse.js.map +1 -1
  134. package/lib/es/components/collapse/item.js.map +1 -1
  135. package/lib/es/components/datagrid/cell.js +5 -2
  136. package/lib/es/components/datagrid/cell.js.map +1 -1
  137. package/lib/es/components/datagrid/datagrid.js +149 -51
  138. package/lib/es/components/datagrid/datagrid.js.map +1 -1
  139. package/lib/es/components/datagrid/helper.js +79 -0
  140. package/lib/es/components/datagrid/helper.js.map +1 -0
  141. package/lib/es/components/datagrid/resize.js +35 -7
  142. package/lib/es/components/datagrid/resize.js.map +1 -1
  143. package/lib/es/components/datagrid/row.js +17 -3
  144. package/lib/es/components/datagrid/row.js.map +1 -1
  145. package/lib/es/components/datagrid/sorter.js.map +1 -1
  146. package/lib/es/components/datagrid/virtual.js +275 -0
  147. package/lib/es/components/datagrid/virtual.js.map +1 -0
  148. package/lib/es/components/description/description.js.map +1 -1
  149. package/lib/es/components/drawer/drawer.js.map +1 -1
  150. package/lib/es/components/dropdown/dropdown.js.map +1 -1
  151. package/lib/es/components/dropdown/item.js.map +1 -1
  152. package/lib/es/components/editor/controls.js.map +1 -1
  153. package/lib/es/components/editor/editor.js +5 -0
  154. package/lib/es/components/editor/editor.js.map +1 -1
  155. package/lib/es/components/editor/memtion.js.map +1 -1
  156. package/lib/es/components/flex/flex.js.map +1 -1
  157. package/lib/es/components/form/context.js.map +1 -1
  158. package/lib/es/components/form/field.js.map +1 -1
  159. package/lib/es/components/form/form.js.map +1 -1
  160. package/lib/es/components/form/useConfig.js.map +1 -1
  161. package/lib/es/components/form/useForm.js.map +1 -1
  162. package/lib/es/components/icon/icon.js.map +1 -1
  163. package/lib/es/components/image/image.js.map +1 -1
  164. package/lib/es/components/image/list.js.map +1 -1
  165. package/lib/es/components/input/container.js.map +1 -1
  166. package/lib/es/components/input/input.js.map +1 -1
  167. package/lib/es/components/input/number.js.map +1 -1
  168. package/lib/es/components/input/range.js.map +1 -1
  169. package/lib/es/components/input/textarea.js.map +1 -1
  170. package/lib/es/components/list/item.js.map +1 -1
  171. package/lib/es/components/list/list.js.map +1 -1
  172. package/lib/es/components/loading/loading.js.map +1 -1
  173. package/lib/es/components/message/message.js.map +1 -1
  174. package/lib/es/components/modal/content.js.map +1 -1
  175. package/lib/es/components/modal/context.js.map +1 -1
  176. package/lib/es/components/modal/hookModal.js.map +1 -1
  177. package/lib/es/components/modal/modal.js.map +1 -1
  178. package/lib/es/components/modal/useModal.js.map +1 -1
  179. package/lib/es/components/pagination/page.js.map +1 -1
  180. package/lib/es/components/pagination/pagination.js.map +1 -1
  181. package/lib/es/components/picker/colors/footer.js.map +1 -1
  182. package/lib/es/components/picker/colors/handle.js.map +1 -1
  183. package/lib/es/components/picker/colors/index.js.map +1 -1
  184. package/lib/es/components/picker/dates/dates.js.map +1 -1
  185. package/lib/es/components/picker/dates/index.js.map +1 -1
  186. package/lib/es/components/picker/dates/panel.js.map +1 -1
  187. package/lib/es/components/picker/time/index.js.map +1 -1
  188. package/lib/es/components/picker/time/item.js.map +1 -1
  189. package/lib/es/components/picker/time/panel.js.map +1 -1
  190. package/lib/es/components/popconfirm/popconfirm.js.map +1 -1
  191. package/lib/es/components/popup/content.js.map +1 -1
  192. package/lib/es/components/popup/popup.js.map +1 -1
  193. package/lib/es/components/progress/circle.js.map +1 -1
  194. package/lib/es/components/progress/line.js.map +1 -1
  195. package/lib/es/components/progress/progress.js.map +1 -1
  196. package/lib/es/components/radio/item.js.map +1 -1
  197. package/lib/es/components/radio/radio.js +2 -2
  198. package/lib/es/components/radio/radio.js.map +1 -1
  199. package/lib/es/components/resizable/resizable.js.map +1 -1
  200. package/lib/es/components/river/river.js.map +1 -1
  201. package/lib/es/components/select/options.js.map +1 -1
  202. package/lib/es/components/select/select.js.map +1 -1
  203. package/lib/es/components/step/divider.js.map +1 -1
  204. package/lib/es/components/step/item.js.map +1 -1
  205. package/lib/es/components/step/step.js.map +1 -1
  206. package/lib/es/components/swiper/item.js.map +1 -1
  207. package/lib/es/components/swiper/swiper.js.map +1 -1
  208. package/lib/es/components/tabs/item.js.map +1 -1
  209. package/lib/es/components/tabs/tabs.js.map +1 -1
  210. package/lib/es/components/tag/tag.js.map +1 -1
  211. package/lib/es/components/text/highlight.js.map +1 -1
  212. package/lib/es/components/text/number.js.map +1 -1
  213. package/lib/es/components/text/text.js.map +1 -1
  214. package/lib/es/components/text/time.js.map +1 -1
  215. package/lib/es/components/tree/item.js.map +1 -1
  216. package/lib/es/components/tree/tree.js.map +1 -1
  217. package/lib/es/components/upload/dropbox.js +46 -0
  218. package/lib/es/components/upload/dropbox.js.map +1 -0
  219. package/lib/es/components/upload/renderFile.js +34 -37
  220. package/lib/es/components/upload/renderFile.js.map +1 -1
  221. package/lib/es/components/upload/upload.js +101 -70
  222. package/lib/es/components/upload/upload.js.map +1 -1
  223. package/lib/es/components/utils/empty/index.js.map +1 -1
  224. package/lib/es/components/utils/helpericon/helpericon.js.map +1 -1
  225. package/lib/es/components/video/video.js.map +1 -1
  226. package/lib/es/js/hooks.js +8 -1
  227. package/lib/es/js/hooks.js.map +1 -1
  228. package/lib/es/js/usePreview/content.js.map +1 -1
  229. package/lib/es/js/usePreview/index.js.map +1 -1
  230. package/lib/es/js/usePreview/renderFile.js +1 -1
  231. package/lib/es/js/usePreview/renderFile.js.map +1 -1
  232. package/lib/es/js/usePreview/type.js.map +1 -1
  233. package/lib/es/js/useRipple/index.js +6 -6
  234. package/lib/es/js/useRipple/index.js.map +1 -1
  235. package/lib/es/js/useTheme/index.js.map +1 -1
  236. package/lib/es/js/utils.js.map +1 -1
  237. package/lib/index.js +734 -177
  238. package/lib/types/components/datagrid/type.d.ts +10 -1
  239. package/lib/types/components/upload/type.d.ts +3 -8
  240. package/package.json +97 -98
package/lib/css/colors.css CHANGED
@@ -1,787 +1,792 @@
1
1
  :root {
2
- --white: white;
3
- --white-0: white;
4
- --white-1: #fafafa;
5
- --black: black;
6
- --black-0: #dbdbdb;
7
- --black-1: #1a1a1a;
8
- --red: #dc143c;
9
- --red-0: #fcdfe4;
10
- --red-1: #ec002f;
11
- --blue: #1e90ff;
12
- --blue-0: #d6ebff;
13
- --blue-1: #007cf4;
14
- --green: #3cb371;
15
- --green-0: #e7fff2;
16
- --green-1: #37a467;
17
- --yellow: #ffc549;
18
- --yellow-0: #fff5c9;
19
- --yellow-1: #ffb820;
20
- --brown: #95410c;
21
- --brown-0: #fbece2;
22
- --brown-1: #8b3a07;
23
- --grey: #d7d7d7;
24
- --grey-0: #f6f6f6;
25
- --grey-1: #b1b1b1;
26
- --pink: #ff69b4;
27
- --pink-0: #ffe3f1;
28
- --pink-1: #ff55aa;
29
- --purple: #8a2be2;
30
- --purple-0: #eddefb;
31
- --purple-1: #751bc9;
32
- --aqua: aqua;
33
- --aqua-0: #e8ffff;
34
- --aqua-1: #1efdfd;
35
- --orange: #fb812a;
36
- --orange-0: #fff1e8;
37
- --orange-1: #eb7521;
38
- --warning: #ffb01f;
39
- --warning-0: #fff0bf;
40
- --warning-1: #f0a313;
41
- --error: #ff4545;
42
- --error-0: #ffdbdb;
43
- --error-1: #f13636;
44
- --success: #20a100;
45
- --success-0: #acf899;
46
- --success-1: #1b8500;
47
-
48
- --color-0: #020202;
49
- --color-1: #1b1b1b;
50
- --color-2: #363636;
51
- --color-3: #505050;
52
- --color-4: #6b6b6b;
53
- --color-5: #868686;
54
- --color-6: #a1a1a1;
55
- --color-7: #bbbbbb;
56
- --color-8: #d6d6d6;
57
- --color-9: #f1f1f1;
58
-
59
- --background: #fff;
60
- --background-hover: transparent;
61
- --background-opacity: rgba(255, 255, 255, 0.4);
62
- --background-opacity-1: rgba(211, 211, 211, 0.4);
63
- --background-opacity-2: rgba(188, 188, 188, 0.15);
64
- --color-backdrop: rgba(255, 255, 255, 0.4);
65
-
66
- --color: var(--color-2);
67
- --color-main: var(--color-2);
68
- --color-main-1: var(--color-0);
69
- --color-main-0: var(--color-9);
70
- --color-main-reverse: var(--white);
71
-
72
- --shadow: 0 0 8px rgba(0, 0, 0, 0.15);
73
-
74
- [class^="bg-"],
75
- [class*=" bg-"] {
76
- background-color: var(--background);
77
- color: var(--color);
78
- }
79
-
80
- .white {
81
- --color: var(--white);
82
- color: var(--color);
83
-
84
- &.i-btn,
85
- &.i-tag {
86
- --color: var(--white);
87
- }
88
- }
89
-
90
- .white-0 {
91
- --color: var(--white-0);
92
- --color-hover: var(--white);
93
- color: var(--color);
94
- }
95
-
96
- .black {
97
- --color: var(--black);
98
- color: var(--color);
99
-
100
- &.i-btn,
101
- &.i-tag {
102
- --color: var(--black);
103
- }
104
- }
105
-
106
- .black-0 {
107
- --color: var(--black-0);
108
- --color-hover: var(--black);
109
- color: var(--color);
110
- }
111
-
112
- .red {
113
- --color: var(--red);
114
- color: var(--color);
115
-
116
- &.i-btn,
117
- &.i-tag {
118
- --color: var(--red);
119
- }
120
- }
121
-
122
- .red-0 {
123
- --color: var(--red-0);
124
- --color-hover: var(--red);
125
- color: var(--color);
126
- }
127
-
128
- .blue {
129
- --color: var(--blue);
130
- color: var(--color);
131
-
132
- &.i-btn,
133
- &.i-tag {
134
- --color: var(--blue);
135
- }
136
- }
137
-
138
- .blue-0 {
139
- --color: var(--blue-0);
140
- --color-hover: var(--blue);
141
- color: var(--color);
142
- }
143
-
144
- .green {
145
- --color: var(--green);
146
- color: var(--color);
147
-
148
- &.i-btn,
149
- &.i-tag {
150
- --background-hover: var(--green-0);
151
- --color: var(--green);
152
- }
153
- }
154
-
155
- .green-0 {
156
- --color: var(--green-0);
157
- --color-hover: var(--green);
158
- color: var(--color);
159
- }
160
-
161
- .yellow {
162
- --color: var(--yellow);
163
- color: var(--color);
164
-
165
- &.i-btn,
166
- &.i-tag {
167
- --background-hover: var(--yellow-0);
168
- --color: var(--yellow);
169
- }
170
- }
171
-
172
- .yellow-0 {
173
- --color: var(--yellow-0);
174
- --color-hover: var(--yellow);
175
- color: var(--color);
176
- }
177
-
178
- .brown {
179
- --color: var(--brown);
180
- color: var(--color);
181
-
182
- &.i-btn,
183
- &.i-tag {
184
- --background-hover: var(--brown-0);
185
- --color: var(--brown);
186
- }
187
- }
188
-
189
- .brown-0 {
190
- --color: var(--brown-0);
191
- --color-hover: var(--brown);
192
- color: var(--color);
193
- }
194
-
195
- .grey {
196
- --color: var(--grey);
197
- color: var(--color);
198
-
199
- &.i-btn,
200
- &.i-tag {
201
- --background-hover: var(--grey-0);
202
- --color: var(--grey);
203
- }
204
- }
205
-
206
- .grey-0 {
207
- --color: var(--grey-0);
208
- --color-hover: var(--grey);
209
- color: var(--color);
210
- }
211
-
212
- .pink {
213
- --color: var(--pink);
214
- color: var(--color);
215
-
216
- &.i-btn,
217
- &.i-tag {
218
- --background-hover: var(--pink-0);
219
- --color: var(--pink);
220
- }
221
- }
222
-
223
- .pink-0 {
224
- --color: var(--pink-0);
225
- --color-hover: var(--pink);
226
- color: var(--color);
227
- }
228
-
229
- .purple {
230
- --color: var(--purple);
231
- color: var(--color);
232
-
233
- &.i-btn,
234
- &.i-tag {
235
- --background-hover: var(--purple-0);
236
- --color: var(--purple);
237
- }
238
- }
239
-
240
- .purple-0 {
241
- --color: var(--purple-0);
242
- --color-hover: var(--purple);
243
- color: var(--color);
244
- }
245
-
246
- .aqua {
247
- --color: var(--aqua);
248
- color: var(--color);
249
-
250
- &.i-btn,
251
- &.i-tag {
252
- --background-hover: var(--aqua-0);
253
- --color: var(--aqua);
254
- }
255
- }
256
-
257
- .aqua-0 {
258
- --color: var(--aqua-0);
259
- --color-hover: var(--aqua);
260
- color: var(--color);
261
- }
262
-
263
- .orange {
264
- --color: var(--orange);
265
- color: var(--color);
266
-
267
- &.i-btn,
268
- &.i-tag {
269
- --background-hover: var(--orange-0);
270
- --color: var(--orange);
271
- }
272
- }
273
-
274
- .orange-0 {
275
- --color: var(--orange-0);
276
- --color-hover: var(--orange);
277
- color: var(--color);
278
- }
279
-
280
- .warning {
281
- --color: var(--warning);
282
- color: var(--color);
283
-
284
- &.i-btn,
285
- &.i-tag {
286
- --background-hover: var(--warning-0);
287
- --color: var(--warning);
288
- }
289
- }
290
-
291
- .warning-0 {
292
- --color: var(--warning-0);
293
- --color-hover: var(--warning);
294
- color: var(--color);
295
- }
296
-
297
- .error {
298
- --color: var(--error);
299
- color: var(--color);
300
-
301
- &.i-btn,
302
- &.i-tag {
303
- --background-hover: var(--error-0);
304
- --color: var(--error);
305
- }
306
- }
307
-
308
- .error-0 {
309
- --color: var(--error-0);
310
- --color-hover: var(--error);
311
- color: var(--color);
312
- }
313
-
314
- .success {
315
- --color: var(--success);
316
- color: var(--color);
317
-
318
- &.i-btn,
319
- &.i-tag {
320
- --background-hover: var(--success-0);
321
- --color: var(--success);
322
- }
323
- }
324
-
325
- .success-0 {
326
- --color: var(--success-0);
327
- --color-hover: var(--success);
328
- color: var(--color);
329
- }
330
-
331
- .color-0 {
332
- --color: var(--color-0);
333
- color: var(--color-0);
334
- }
335
-
336
- .color-1 {
337
- --color: var(--color-1);
338
- color: var(--color-1);
339
- }
340
-
341
- .color-2 {
342
- --color: var(--color-2);
343
- color: var(--color-2);
344
- }
345
-
346
- .color-3 {
347
- --color: var(--color-3);
348
- color: var(--color-3);
349
- }
350
-
351
- .color-4 {
352
- --color: var(--color-4);
353
- color: var(--color-4);
354
- }
355
-
356
- .color-5 {
357
- --color: var(--color-5);
358
- color: var(--color-5);
359
- }
360
-
361
- .color-6 {
362
- --color: var(--color-6);
363
- color: var(--color-6);
364
- }
365
-
366
- .color-7 {
367
- --color: var(--color-7);
368
- color: var(--color-7);
369
- }
370
-
371
- .color-8 {
372
- --color: var(--color-8);
373
- color: var(--color-8);
374
- }
375
-
376
- .color-9 {
377
- --color: var(--color-9);
378
- color: var(--color-9);
379
- }
380
-
381
- .bg-white {
382
- --background: var(--white);
383
- --color: var(--black);
384
- }
385
-
386
- .bg-white-0 {
387
- --background: var(--white-0);
388
- --background-hover: var(--white-1);
389
- --color: var(--black);
390
- --color-hover: var(--black);
391
- }
392
-
393
- .bg-black {
394
- --background: var(--black);
395
- --background-hover: var(--black-1);
396
- --color: var(--white);
397
- --color-hover: var(--white);
398
-
399
- &.i-btn,
400
- &.i-tag {
401
- --background-hover: var(--black-1);
402
- }
403
- }
404
-
405
- .bg-black-0 {
406
- --background: var(--black-0);
407
- --background-hover: var(--black-1);
408
- --color: var(--black);
409
- --color-hover: var(--white);
410
- }
411
-
412
- .bg-red {
413
- --background: var(--red);
414
- --background-hover: var(--red-1);
415
- --color: var(--white);
416
- --color-hover: var(--white);
417
-
418
- &.i-btn,
419
- &.i-tag {
420
- --background-hover: var(--red-1);
421
- }
422
- }
423
-
424
- .bg-red-0 {
425
- --background: var(--red-0);
426
- --background-hover: var(--red-1);
427
- --color-hover: var(--white);
428
- }
429
-
430
- .bg-blue {
431
- --background: var(--blue);
432
- --background-hover: var(--blue-1);
433
- --color: var(--white);
434
- --color-hover: var(--white);
435
-
436
- &.i-btn,
437
- &.i-tag {
438
- --background-hover: var(--blue-1);
439
- }
440
- }
441
-
442
- .bg-blue-0 {
443
- --background: var(--blue-0);
444
- --background-hover: var(--blue-1);
445
- --color-hover: var(--white);
446
- }
447
-
448
- .bg-green {
449
- --background: var(--green);
450
- --background-hover: var(--green-1);
451
- --color: var(--white);
452
- --color-hover: var(--white);
453
-
454
- &.i-btn,
455
- &.i-tag {
456
- --background-hover: var(--green-1);
457
- }
458
- }
459
-
460
- .bg-green-0 {
461
- --background: var(--green-0);
462
- --background-hover: var(--green-1);
463
- --color-hover: var(--white);
464
- }
465
-
466
- .bg-yellow {
467
- --background: var(--yellow);
468
- --background-hover: var(--yellow-1);
469
- --color: var(--black);
470
- --color-hover: var(--black);
471
-
472
- &.i-btn,
473
- &.i-tag {
474
- --background-hover: var(--yellow-1);
475
- }
476
- }
477
-
478
- .bg-yellow-0 {
479
- --background: var(--yellow-0);
480
- --background-hover: var(--yellow-1);
481
- --color-hover: var(--black);
482
- }
483
-
484
- .bg-brown {
485
- --background: var(--brown);
486
- --background-hover: var(--brown-1);
487
- --color: var(--white);
488
- --color-hover: var(--white);
489
-
490
- &.i-btn,
491
- &.i-tag {
492
- --background-hover: var(--brown-1);
493
- }
494
- }
495
-
496
- .bg-brown-0 {
497
- --background: var(--brown-0);
498
- --background-hover: var(--brown-1);
499
- --color-hover: var(--white);
500
- }
501
-
502
- .bg-grey {
503
- --background: var(--grey);
504
- --background-hover: var(--grey-1);
505
- --color: var(--black);
506
- --color-hover: var(--black);
507
-
508
- &.i-btn,
509
- &.i-tag {
510
- --background-hover: var(--grey-1);
511
- }
512
- }
513
-
514
- .bg-grey-0 {
515
- --background: var(--grey-0);
516
- --background-hover: var(--grey-1);
517
- --color-hover: var(--black);
518
- }
519
-
520
- .bg-pink {
521
- --background: var(--pink);
522
- --background-hover: var(--pink-1);
523
- --color: var(--white);
524
- --color-hover: var(--white);
525
-
526
- &.i-btn,
527
- &.i-tag {
528
- --background-hover: var(--pink-1);
529
- }
530
- }
531
-
532
- .bg-pink-0 {
533
- --background: var(--pink-0);
534
- --background-hover: var(--pink-1);
535
- --color-hover: var(--white);
536
- }
537
-
538
- .bg-purple {
539
- --background: var(--purple);
540
- --background-hover: var(--purple-1);
541
- --color: var(--white);
542
- --color-hover: var(--white);
543
-
544
- &.i-btn,
545
- &.i-tag {
546
- --background-hover: var(--purple-1);
547
- }
548
- }
549
-
550
- .bg-purple-0 {
551
- --background: var(--purple-0);
552
- --background-hover: var(--purple-1);
553
- --color-hover: var(--white);
554
- }
555
-
556
- .bg-aqua {
557
- --background: var(--aqua);
558
- --background-hover: var(--aqua-1);
559
- --color: var(--black);
560
- --color-hover: var(--black);
561
-
562
- &.i-btn,
563
- &.i-tag {
564
- --background-hover: var(--aqua-1);
565
- }
566
- }
567
-
568
- .bg-aqua-0 {
569
- --background: var(--aqua-0);
570
- --background-hover: var(--aqua-1);
571
- --color-hover: var(--black);
572
- }
573
-
574
- .bg-orange {
575
- --background: var(--orange);
576
- --background-hover: var(--orange-1);
577
- --color: var(--white);
578
- --color-hover: var(--white);
579
-
580
- &.i-btn,
581
- &.i-tag {
582
- --background-hover: var(--orange-1);
583
- }
584
- }
585
-
586
- .bg-orange-0 {
587
- --background: var(--orange-0);
588
- --background-hover: var(--orange-1);
589
- --color-hover: var(--black);
590
- }
591
-
592
- .bg-warning {
593
- --background: var(--warning);
594
- --background-hover: var(--warning-1);
595
- --color: var(--black);
596
- --color-hover: var(--black);
597
-
598
- &.i-btn,
599
- &.i-tag {
600
- --background-hover: var(--warning-1);
601
- }
602
- }
603
-
604
- .bg-warning-0 {
605
- --background: var(--warning-0);
606
- --background-hover: var(--warning-1);
607
- --color-hover: var(--black);
608
- }
609
-
610
- .bg-error {
611
- --background: var(--error);
612
- --background-hover: var(--error-1);
613
- --color: var(--white);
614
- --color-hover: var(--white);
615
-
616
- &.i-btn,
617
- &.i-tag {
618
- --background-hover: var(--error-1);
619
- }
620
- }
621
-
622
- .bg-error-0 {
623
- --background: var(--error-0);
624
- --background-hover: var(--error-1);
625
- --color-hover: var(--white);
626
- }
627
-
628
- .bg-success {
629
- --background: var(--success);
630
- --background-hover: var(--success-1);
631
- --color: var(--white);
632
- --color-hover: var(--white);
633
-
634
- &.i-btn,
635
- &.i-tag {
636
- --background-hover: var(--success-1);
637
- }
638
- }
639
-
640
- .bg-success-0 {
641
- --background: var(--success-0);
642
- --background-hover: var(--success-1);
643
- --color-hover: var(--white);
644
- }
645
-
646
- .bg-0 {
647
- --background: var(--color-0);
648
- --color: var(--color-9);
649
- }
650
-
651
- .bg-1 {
652
- --background: var(--color-1);
653
- --color: var(--color-9);
654
- }
655
-
656
- .bg-2 {
657
- --background: var(--color-2);
658
- --color: var(--color-9);
659
- }
660
-
661
- .bg-3 {
662
- --background: var(--color-3);
663
- --color: var(--color-9);
664
- }
665
-
666
- .bg-4 {
667
- --background: var(--color-4);
668
- --color: var(--color-9);
669
- }
670
-
671
- .bg-5 {
672
- --background: var(--color-5);
673
- --color: var(--color-0);
674
- }
675
-
676
- .bg-6 {
677
- --background: var(--color-6);
678
- --color: var(--color-0);
679
- }
680
-
681
- .bg-7 {
682
- --background: var(--color-7);
683
- --color: var(--color-0);
684
- }
685
-
686
- .bg-8 {
687
- --background: var(--color-8);
688
- --color: var(--color-0);
689
- }
690
-
691
- .bg-9 {
692
- --background: var(--color-9);
693
- --color: var(--color-0);
694
- }
2
+ --white: white;
3
+ --white-0: white;
4
+ --white-1: #fafafa;
5
+ --black: black;
6
+ --black-0: #dbdbdb;
7
+ --black-1: #1a1a1a;
8
+ --red: #dc143c;
9
+ --red-0: #fcdfe4;
10
+ --red-1: #ec002f;
11
+ --blue: #1e90ff;
12
+ --blue-0: #d6ebff;
13
+ --blue-1: #007cf4;
14
+ --green: #3cb371;
15
+ --green-0: #e7fff2;
16
+ --green-1: #37a467;
17
+ --yellow: #ffc549;
18
+ --yellow-0: #fff5c9;
19
+ --yellow-1: #ffb820;
20
+ --brown: #95410c;
21
+ --brown-0: #fbece2;
22
+ --brown-1: #8b3a07;
23
+ --grey: #d7d7d7;
24
+ --grey-0: #f6f6f6;
25
+ --grey-1: #b1b1b1;
26
+ --pink: #ff69b4;
27
+ --pink-0: #ffe3f1;
28
+ --pink-1: #ff55aa;
29
+ --purple: #8a2be2;
30
+ --purple-0: #eddefb;
31
+ --purple-1: #751bc9;
32
+ --aqua: aqua;
33
+ --aqua-0: #e8ffff;
34
+ --aqua-1: #1efdfd;
35
+ --orange: #fb812a;
36
+ --orange-0: #fff1e8;
37
+ --orange-1: #eb7521;
38
+ --warning: #ffb01f;
39
+ --warning-0: #fff0bf;
40
+ --warning-1: #f0a313;
41
+ --error: #ff4545;
42
+ --error-0: #ffdbdb;
43
+ --error-1: #f13636;
44
+ --success: #20a100;
45
+ --success-0: #acf899;
46
+ --success-1: #1b8500;
47
+
48
+ --color-0: #020202;
49
+ --color-1: #1b1b1b;
50
+ --color-2: #363636;
51
+ --color-3: #505050;
52
+ --color-4: #6b6b6b;
53
+ --color-5: #868686;
54
+ --color-6: #a1a1a1;
55
+ --color-7: #bbbbbb;
56
+ --color-8: #d6d6d6;
57
+ --color-9: #f1f1f1;
58
+
59
+ --background: #fff;
60
+ --background-1: #f1f1f1;
61
+ --background-hover: transparent;
62
+ --background-opacity: rgba(255, 255, 255, 0.4);
63
+ --background-opacity-1: rgba(211, 211, 211, 0.4);
64
+ --background-opacity-2: rgba(188, 188, 188, 0.15);
65
+ --color-backdrop: rgba(255, 255, 255, 0.4);
66
+
67
+ --color: var(--color-2);
68
+ --color-main: var(--color-2);
69
+ --color-main-1: var(--color-0);
70
+ --color-main-0: var(--color-9);
71
+ --color-main-reverse: var(--white);
72
+
73
+ --shadow: 0 0 8px rgba(0, 0, 0, 0.15);
74
+
75
+ [class^="bg-"],
76
+ [class*=" bg-"] {
77
+ background-color: var(--background);
78
+ color: var(--color);
79
+ }
80
+
81
+ .white {
82
+ --color: var(--white);
83
+ color: var(--color);
84
+
85
+ &.i-btn,
86
+ &.i-tag {
87
+ --color: var(--white);
88
+ }
89
+ }
90
+
91
+ .white-0 {
92
+ --color: var(--white-0);
93
+ --color-hover: var(--white);
94
+ color: var(--color);
95
+ }
96
+
97
+ .black {
98
+ --color: var(--black);
99
+ color: var(--color);
100
+
101
+ &.i-btn,
102
+ &.i-tag {
103
+ --color: var(--black);
104
+ }
105
+ }
106
+
107
+ .black-0 {
108
+ --color: var(--black-0);
109
+ --color-hover: var(--black);
110
+ color: var(--color);
111
+ }
112
+
113
+ .red {
114
+ --color: var(--red);
115
+ color: var(--color);
116
+
117
+ &.i-btn,
118
+ &.i-tag {
119
+ --color: var(--red);
120
+ }
121
+ }
122
+
123
+ .red-0 {
124
+ --color: var(--red-0);
125
+ --color-hover: var(--red);
126
+ color: var(--color);
127
+ }
128
+
129
+ .blue {
130
+ --color: var(--blue);
131
+ color: var(--color);
132
+
133
+ &.i-btn,
134
+ &.i-tag {
135
+ --color: var(--blue);
136
+ }
137
+ }
138
+
139
+ .blue-0 {
140
+ --color: var(--blue-0);
141
+ --color-hover: var(--blue);
142
+ color: var(--color);
143
+ }
144
+
145
+ .green {
146
+ --color: var(--green);
147
+ color: var(--color);
148
+
149
+ &.i-btn,
150
+ &.i-tag {
151
+ --background-hover: var(--green-0);
152
+ --color: var(--green);
153
+ }
154
+ }
155
+
156
+ .green-0 {
157
+ --color: var(--green-0);
158
+ --color-hover: var(--green);
159
+ color: var(--color);
160
+ }
161
+
162
+ .yellow {
163
+ --color: var(--yellow);
164
+ color: var(--color);
165
+
166
+ &.i-btn,
167
+ &.i-tag {
168
+ --background-hover: var(--yellow-0);
169
+ --color: var(--yellow);
170
+ }
171
+ }
172
+
173
+ .yellow-0 {
174
+ --color: var(--yellow-0);
175
+ --color-hover: var(--yellow);
176
+ color: var(--color);
177
+ }
178
+
179
+ .brown {
180
+ --color: var(--brown);
181
+ color: var(--color);
182
+
183
+ &.i-btn,
184
+ &.i-tag {
185
+ --background-hover: var(--brown-0);
186
+ --color: var(--brown);
187
+ }
188
+ }
189
+
190
+ .brown-0 {
191
+ --color: var(--brown-0);
192
+ --color-hover: var(--brown);
193
+ color: var(--color);
194
+ }
195
+
196
+ .grey {
197
+ --color: var(--grey);
198
+ color: var(--color);
199
+
200
+ &.i-btn,
201
+ &.i-tag {
202
+ --background-hover: var(--grey-0);
203
+ --color: var(--grey);
204
+ }
205
+ }
206
+
207
+ .grey-0 {
208
+ --color: var(--grey-0);
209
+ --color-hover: var(--grey);
210
+ color: var(--color);
211
+ }
212
+
213
+ .pink {
214
+ --color: var(--pink);
215
+ color: var(--color);
216
+
217
+ &.i-btn,
218
+ &.i-tag {
219
+ --background-hover: var(--pink-0);
220
+ --color: var(--pink);
221
+ }
222
+ }
223
+
224
+ .pink-0 {
225
+ --color: var(--pink-0);
226
+ --color-hover: var(--pink);
227
+ color: var(--color);
228
+ }
229
+
230
+ .purple {
231
+ --color: var(--purple);
232
+ color: var(--color);
233
+
234
+ &.i-btn,
235
+ &.i-tag {
236
+ --background-hover: var(--purple-0);
237
+ --color: var(--purple);
238
+ }
239
+ }
240
+
241
+ .purple-0 {
242
+ --color: var(--purple-0);
243
+ --color-hover: var(--purple);
244
+ color: var(--color);
245
+ }
246
+
247
+ .aqua {
248
+ --color: var(--aqua);
249
+ color: var(--color);
250
+
251
+ &.i-btn,
252
+ &.i-tag {
253
+ --background-hover: var(--aqua-0);
254
+ --color: var(--aqua);
255
+ }
256
+ }
257
+
258
+ .aqua-0 {
259
+ --color: var(--aqua-0);
260
+ --color-hover: var(--aqua);
261
+ color: var(--color);
262
+ }
263
+
264
+ .orange {
265
+ --color: var(--orange);
266
+ color: var(--color);
267
+
268
+ &.i-btn,
269
+ &.i-tag {
270
+ --background-hover: var(--orange-0);
271
+ --color: var(--orange);
272
+ }
273
+ }
274
+
275
+ .orange-0 {
276
+ --color: var(--orange-0);
277
+ --color-hover: var(--orange);
278
+ color: var(--color);
279
+ }
280
+
281
+ .warning {
282
+ --color: var(--warning);
283
+ color: var(--color);
284
+
285
+ &.i-btn,
286
+ &.i-tag {
287
+ --background-hover: var(--warning-0);
288
+ --color: var(--warning);
289
+ }
290
+ }
291
+
292
+ .warning-0 {
293
+ --color: var(--warning-0);
294
+ --color-hover: var(--warning);
295
+ color: var(--color);
296
+ }
297
+
298
+ .error {
299
+ --color: var(--error);
300
+ color: var(--color);
301
+
302
+ &.i-btn,
303
+ &.i-tag {
304
+ --background-hover: var(--error-0);
305
+ --color: var(--error);
306
+ }
307
+ }
308
+
309
+ .error-0 {
310
+ --color: var(--error-0);
311
+ --color-hover: var(--error);
312
+ color: var(--color);
313
+ }
314
+
315
+ .success {
316
+ --color: var(--success);
317
+ color: var(--color);
318
+
319
+ &.i-btn,
320
+ &.i-tag {
321
+ --background-hover: var(--success-0);
322
+ --color: var(--success);
323
+ }
324
+ }
325
+
326
+ .success-0 {
327
+ --color: var(--success-0);
328
+ --color-hover: var(--success);
329
+ color: var(--color);
330
+ }
331
+
332
+ .color-0 {
333
+ --color: var(--color-0);
334
+ color: var(--color-0);
335
+ }
336
+
337
+ .color-1 {
338
+ --color: var(--color-1);
339
+ color: var(--color-1);
340
+ }
341
+
342
+ .color-2 {
343
+ --color: var(--color-2);
344
+ color: var(--color-2);
345
+ }
346
+
347
+ .color-3 {
348
+ --color: var(--color-3);
349
+ color: var(--color-3);
350
+ }
351
+
352
+ .color-4 {
353
+ --color: var(--color-4);
354
+ color: var(--color-4);
355
+ }
356
+
357
+ .color-5 {
358
+ --color: var(--color-5);
359
+ color: var(--color-5);
360
+ }
361
+
362
+ .color-6 {
363
+ --color: var(--color-6);
364
+ color: var(--color-6);
365
+ }
366
+
367
+ .color-7 {
368
+ --color: var(--color-7);
369
+ color: var(--color-7);
370
+ }
371
+
372
+ .color-8 {
373
+ --color: var(--color-8);
374
+ color: var(--color-8);
375
+ }
376
+
377
+ .color-9 {
378
+ --color: var(--color-9);
379
+ color: var(--color-9);
380
+ }
381
+
382
+ .bg-white {
383
+ --background: var(--white);
384
+ --color: var(--black);
385
+ }
386
+
387
+ .bg-white-0 {
388
+ --background: var(--white-0);
389
+ --background-hover: var(--white-1);
390
+ --color: var(--black);
391
+ --color-hover: var(--black);
392
+ }
393
+
394
+ .bg-black {
395
+ --background: var(--black);
396
+ --background-hover: var(--black-1);
397
+ --color: var(--white);
398
+ --color-hover: var(--white);
399
+
400
+ &.i-btn,
401
+ &.i-tag {
402
+ --background-hover: var(--black-1);
403
+ }
404
+ }
405
+
406
+ .bg-black-0 {
407
+ --background: var(--black-0);
408
+ --background-hover: var(--black-1);
409
+ --color: var(--black);
410
+ --color-hover: var(--white);
411
+ }
412
+
413
+ .bg-red {
414
+ --background: var(--red);
415
+ --background-hover: var(--red-1);
416
+ --color: var(--white);
417
+ --color-hover: var(--white);
418
+
419
+ &.i-btn,
420
+ &.i-tag {
421
+ --background-hover: var(--red-1);
422
+ }
423
+ }
424
+
425
+ .bg-red-0 {
426
+ --background: var(--red-0);
427
+ --background-hover: var(--red-1);
428
+ --color-hover: var(--white);
429
+ }
430
+
431
+ .bg-blue {
432
+ --background: var(--blue);
433
+ --background-hover: var(--blue-1);
434
+ --color: var(--white);
435
+ --color-hover: var(--white);
436
+
437
+ &.i-btn,
438
+ &.i-tag {
439
+ --background-hover: var(--blue-1);
440
+ }
441
+ }
442
+
443
+ .bg-blue-0 {
444
+ --background: var(--blue-0);
445
+ --background-hover: var(--blue-1);
446
+ --color-hover: var(--white);
447
+ }
448
+
449
+ .bg-green {
450
+ --background: var(--green);
451
+ --background-hover: var(--green-1);
452
+ --color: var(--white);
453
+ --color-hover: var(--white);
454
+
455
+ &.i-btn,
456
+ &.i-tag {
457
+ --background-hover: var(--green-1);
458
+ }
459
+ }
460
+
461
+ .bg-green-0 {
462
+ --background: var(--green-0);
463
+ --background-hover: var(--green-1);
464
+ --color-hover: var(--white);
465
+ }
466
+
467
+ .bg-yellow {
468
+ --background: var(--yellow);
469
+ --background-hover: var(--yellow-1);
470
+ --color: var(--black);
471
+ --color-hover: var(--black);
472
+
473
+ &.i-btn,
474
+ &.i-tag {
475
+ --background-hover: var(--yellow-1);
476
+ }
477
+ }
478
+
479
+ .bg-yellow-0 {
480
+ --background: var(--yellow-0);
481
+ --background-hover: var(--yellow-1);
482
+ --color-hover: var(--black);
483
+ }
484
+
485
+ .bg-brown {
486
+ --background: var(--brown);
487
+ --background-hover: var(--brown-1);
488
+ --color: var(--white);
489
+ --color-hover: var(--white);
490
+
491
+ &.i-btn,
492
+ &.i-tag {
493
+ --background-hover: var(--brown-1);
494
+ }
495
+ }
496
+
497
+ .bg-brown-0 {
498
+ --background: var(--brown-0);
499
+ --background-hover: var(--brown-1);
500
+ --color-hover: var(--white);
501
+ }
502
+
503
+ .bg-grey {
504
+ --background: var(--grey);
505
+ --background-hover: var(--grey-1);
506
+ --color: var(--black);
507
+ --color-hover: var(--black);
508
+
509
+ &.i-btn,
510
+ &.i-tag {
511
+ --background-hover: var(--grey-1);
512
+ }
513
+ }
514
+
515
+ .bg-grey-0 {
516
+ --background: var(--grey-0);
517
+ --background-hover: var(--grey-1);
518
+ --color-hover: var(--black);
519
+ }
520
+
521
+ .bg-pink {
522
+ --background: var(--pink);
523
+ --background-hover: var(--pink-1);
524
+ --color: var(--white);
525
+ --color-hover: var(--white);
526
+
527
+ &.i-btn,
528
+ &.i-tag {
529
+ --background-hover: var(--pink-1);
530
+ }
531
+ }
532
+
533
+ .bg-pink-0 {
534
+ --background: var(--pink-0);
535
+ --background-hover: var(--pink-1);
536
+ --color-hover: var(--white);
537
+ }
538
+
539
+ .bg-purple {
540
+ --background: var(--purple);
541
+ --background-hover: var(--purple-1);
542
+ --color: var(--white);
543
+ --color-hover: var(--white);
544
+
545
+ &.i-btn,
546
+ &.i-tag {
547
+ --background-hover: var(--purple-1);
548
+ }
549
+ }
550
+
551
+ .bg-purple-0 {
552
+ --background: var(--purple-0);
553
+ --background-hover: var(--purple-1);
554
+ --color-hover: var(--white);
555
+ }
556
+
557
+ .bg-aqua {
558
+ --background: var(--aqua);
559
+ --background-hover: var(--aqua-1);
560
+ --color: var(--black);
561
+ --color-hover: var(--black);
562
+
563
+ &.i-btn,
564
+ &.i-tag {
565
+ --background-hover: var(--aqua-1);
566
+ }
567
+ }
568
+
569
+ .bg-aqua-0 {
570
+ --background: var(--aqua-0);
571
+ --background-hover: var(--aqua-1);
572
+ --color-hover: var(--black);
573
+ }
574
+
575
+ .bg-orange {
576
+ --background: var(--orange);
577
+ --background-hover: var(--orange-1);
578
+ --color: var(--white);
579
+ --color-hover: var(--white);
580
+
581
+ &.i-btn,
582
+ &.i-tag {
583
+ --background-hover: var(--orange-1);
584
+ }
585
+ }
586
+
587
+ .bg-orange-0 {
588
+ --background: var(--orange-0);
589
+ --background-hover: var(--orange-1);
590
+ --color-hover: var(--black);
591
+ }
592
+
593
+ .bg-warning {
594
+ --background: var(--warning);
595
+ --background-hover: var(--warning-1);
596
+ --color: var(--black);
597
+ --color-hover: var(--black);
598
+
599
+ &.i-btn,
600
+ &.i-tag {
601
+ --background-hover: var(--warning-1);
602
+ }
603
+ }
604
+
605
+ .bg-warning-0 {
606
+ --background: var(--warning-0);
607
+ --background-hover: var(--warning-1);
608
+ --color-hover: var(--black);
609
+ }
610
+
611
+ .bg-error {
612
+ --background: var(--error);
613
+ --background-hover: var(--error-1);
614
+ --color: var(--white);
615
+ --color-hover: var(--white);
616
+
617
+ &.i-btn,
618
+ &.i-tag {
619
+ --background-hover: var(--error-1);
620
+ }
621
+ }
622
+
623
+ .bg-error-0 {
624
+ --background: var(--error-0);
625
+ --background-hover: var(--error-1);
626
+ --color-hover: var(--white);
627
+ }
628
+
629
+ .bg-success {
630
+ --background: var(--success);
631
+ --background-hover: var(--success-1);
632
+ --color: var(--white);
633
+ --color-hover: var(--white);
634
+
635
+ &.i-btn,
636
+ &.i-tag {
637
+ --background-hover: var(--success-1);
638
+ }
639
+ }
640
+
641
+ .bg-success-0 {
642
+ --background: var(--success-0);
643
+ --background-hover: var(--success-1);
644
+ --color-hover: var(--white);
645
+ }
646
+
647
+ .bg-0 {
648
+ --background: var(--color-0);
649
+ --color: var(--color-9);
650
+ }
651
+
652
+ .bg-1 {
653
+ --background: var(--color-1);
654
+ --color: var(--color-9);
655
+ }
656
+
657
+ .bg-2 {
658
+ --background: var(--color-2);
659
+ --color: var(--color-9);
660
+ }
661
+
662
+ .bg-3 {
663
+ --background: var(--color-3);
664
+ --color: var(--color-9);
665
+ }
666
+
667
+ .bg-4 {
668
+ --background: var(--color-4);
669
+ --color: var(--color-9);
670
+ }
671
+
672
+ .bg-5 {
673
+ --background: var(--color-5);
674
+ --color: var(--color-0);
675
+ }
676
+
677
+ .bg-6 {
678
+ --background: var(--color-6);
679
+ --color: var(--color-0);
680
+ }
681
+
682
+ .bg-7 {
683
+ --background: var(--color-7);
684
+ --color: var(--color-0);
685
+ }
686
+
687
+ .bg-8 {
688
+ --background: var(--color-8);
689
+ --color: var(--color-0);
690
+ }
691
+
692
+ .bg-9 {
693
+ --background: var(--color-9);
694
+ --color: var(--color-0);
695
+ }
695
696
  }
696
697
 
697
698
  .theme-dark {
698
- --color-0: #fff;
699
- --color-1: #e6e6e6;
700
- --color-2: #cecece;
701
- --color-3: #b5b5b5;
702
- --color-4: #9c9c9c;
703
- --color-5: #848484;
704
- --color-6: #6b6b6b;
705
- --color-7: #525252;
706
- --color-8: #3a3a3a;
707
- --color-9: #212121;
708
-
709
- --background: #1a1a1a;
710
- --background-hover: transparent;
711
- --background-opacity: #1a1a1a66;
712
- --background-opacity-1: rgba(0, 0, 0, 0.4);
713
- --background-opacity-2: rgba(33, 33, 33, 0.4);
714
- --color-backdrop: rgba(0, 0, 0, 0.4);
715
-
716
- --color: var(--color-0);
717
- --color-main: #26f8dd;
718
- --color-main-1: #0eddc3;
719
- --color-main-0: #0065581f;
720
- --color-main-reverse: var(--black);
721
-
722
- --black-0: #00000040;
723
- --white-0: #ffffff40;
724
- --red-0: #ed130040;
725
- --blue-0: #0060ff40;
726
- --green-0: #00ff4832;
727
- --yellow-0: #ffca0032;
728
- --orange-0: #ff920054;
729
- --purple-0: #b800d740;
730
- --aqua-0: #00d1d140;
731
- --pink-0: #b5005a60;
732
- --grey-0: #ffffff17;
733
- --brown-0: #9d3d0040;
734
-
735
- --warning-0: #ffd74040;
736
- --error-0: #ff525240;
737
- --success-0: #69f0ae40;
738
-
739
- background: var(--background);
699
+ --color-0: #fff;
700
+ --color-1: #e6e6e6;
701
+ --color-2: #cecece;
702
+ --color-3: #b5b5b5;
703
+ --color-4: #9c9c9c;
704
+ --color-5: #848484;
705
+ --color-6: #6b6b6b;
706
+ --color-7: #525252;
707
+ --color-8: #3a3a3a;
708
+ --color-9: #212121;
709
+
710
+ --background: #1a1a1a;
711
+ --background-1: #2a2a2a;
712
+ --background-hover: transparent;
713
+ --background-opacity: #1a1a1a66;
714
+ --background-opacity-1: rgba(0, 0, 0, 0.4);
715
+ --background-opacity-2: rgba(66, 66, 66, 0.4);
716
+ --color-backdrop: rgba(0, 0, 0, 0.4);
717
+
718
+ --color: var(--color-0);
719
+ --color-main: #fff;
720
+ --color-main-1: #fafafa;
721
+ --color-main-0: #f1f1f133;
722
+ --color-main-reverse: var(--black);
723
+
724
+ --black-0: #00000040;
725
+ --white-0: #ffffff40;
726
+ --red-0: #ed130040;
727
+ --blue-0: #0060ff40;
728
+ --green-0: #00ff4832;
729
+ --yellow-0: #ffca0032;
730
+ --orange-0: #ff920054;
731
+ --purple-0: #b800d740;
732
+ --aqua-0: #00d1d140;
733
+ --pink-0: #b5005a60;
734
+ --grey-0: #ffffff17;
735
+ --brown-0: #9d3d0040;
736
+
737
+ --warning-0: #ffd74040;
738
+ --error-0: #ff525240;
739
+ --success-0: #69f0ae40;
740
+
741
+ background: var(--background);
740
742
  }
741
743
 
742
744
  @media (prefers-color-scheme: dark) {
743
- .theme-auto {
744
- --color-0: #fff;
745
- --color-1: #e6e6e6;
746
- --color-2: #cecece;
747
- --color-3: #b5b5b5;
748
- --color-4: #9c9c9c;
749
- --color-5: #848484;
750
- --color-6: #6b6b6b;
751
- --color-7: #525252;
752
- --color-8: #3a3a3a;
753
- --color-9: #212121;
754
-
755
- --background: #1a1a1a;
756
- --background-hover: transparent;
757
- --background-opacity: #1a1a1a66;
758
- --background-opacity-1: rgba(0, 0, 0, 0.4);
759
- --background-opacity-2: rgba(33, 33, 33, 0.4);
760
- --color-backdrop: rgba(0, 0, 0, 0.4);
761
-
762
- --color: var(--color-0);
763
- --color-main: #26f8dd;
764
- --color-main-1: #0eddc3;
765
- --color-main-0: #0065581f;
766
- --color-main-reverse: var(--black);
767
-
768
- --black-0: #00000040;
769
- --white-0: #ffffff40;
770
- --red-0: #ed130040;
771
- --blue-0: #0060ff40;
772
- --green-0: #00ff4832;
773
- --yellow-0: #ffca0032;
774
- --orange-0: #ff920054;
775
- --purple-0: #b800d740;
776
- --aqua-0: #00d1d140;
777
- --pink-0: #b5005a60;
778
- --grey-0: #ffffff17;
779
- --brown-0: #9d3d0040;
780
-
781
- --warning-0: #ffd74040;
782
- --error-0: #ff525240;
783
- --success-0: #69f0ae40;
784
-
785
- background: var(--background);
786
- }
745
+ .theme-auto {
746
+ --color-0: #fff;
747
+ --color-1: #e6e6e6;
748
+ --color-2: #cecece;
749
+ --color-3: #b5b5b5;
750
+ --color-4: #9c9c9c;
751
+ --color-5: #848484;
752
+ --color-6: #6b6b6b;
753
+ --color-7: #525252;
754
+ --color-8: #3a3a3a;
755
+ --color-9: #212121;
756
+
757
+ --background: #1a1a1a;
758
+ --background-1: #2a2a2a;
759
+ --background-hover: transparent;
760
+ --background-opacity: #1a1a1a66;
761
+ --background-opacity-1: rgba(0, 0, 0, 0.4);
762
+ --background-opacity-2: rgba(66, 66, 66, 0.4);
763
+ --color-backdrop: rgba(0, 0, 0, 0.4);
764
+
765
+ --color: var(--color-0);
766
+ --color-main: #fff;
767
+ --color-main-1: #fafafa;
768
+ --color-main-0: #f1f1f133;
769
+ --color-main-reverse: var(--black);
770
+
771
+ --shadow: 0 0 12px rgba(0, 0, 0, 0.4);
772
+
773
+ --black-0: #00000040;
774
+ --white-0: #ffffff40;
775
+ --red-0: #ed130040;
776
+ --blue-0: #0060ff40;
777
+ --green-0: #00ff4832;
778
+ --yellow-0: #ffca0032;
779
+ --orange-0: #ff920054;
780
+ --purple-0: #b800d740;
781
+ --aqua-0: #00d1d140;
782
+ --pink-0: #b5005a60;
783
+ --grey-0: #ffffff17;
784
+ --brown-0: #9d3d0040;
785
+
786
+ --warning-0: #ffd74040;
787
+ --error-0: #ff525240;
788
+ --success-0: #69f0ae40;
789
+
790
+ background: var(--background);
791
+ }
787
792
  }