@schukai/monster 3.89.1 → 3.91.0

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 (53) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/datatable.mjs +2 -0
  4. package/source/components/datatable/filter.mjs +3 -0
  5. package/source/components/form/action-button.mjs +11 -40
  6. package/source/components/form/api-bar.mjs +551 -0
  7. package/source/components/form/button.mjs +1 -3
  8. package/source/components/form/field-set.mjs +2 -4
  9. package/source/components/form/message-state-button.mjs +10 -12
  10. package/source/components/form/password.mjs +1 -1
  11. package/source/components/form/select.mjs +2 -0
  12. package/source/components/form/style/action-button.pcss +11 -17
  13. package/source/components/form/style/api-bar.pcss +0 -0
  14. package/source/components/form/style/button-bar.pcss +5 -0
  15. package/source/components/form/style/button.pcss +1 -0
  16. package/source/components/form/style/message-state-button.pcss +1 -0
  17. package/source/components/form/style/state-button.pcss +1 -0
  18. package/source/components/form/stylesheet/action-button.mjs +1 -1
  19. package/source/components/form/stylesheet/api-bar.mjs +38 -0
  20. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  21. package/source/components/form/stylesheet/button.mjs +1 -1
  22. package/source/components/form/stylesheet/message-state-button.mjs +1 -1
  23. package/source/components/form/stylesheet/state-button.mjs +1 -1
  24. package/source/components/layout/iframe.mjs +1 -3
  25. package/source/components/style/badge.css +147 -1
  26. package/source/components/style/border.css +65 -1
  27. package/source/components/style/button.css +205 -1
  28. package/source/components/style/card.css +149 -1
  29. package/source/components/style/color.css +166 -1
  30. package/source/components/style/common.css +159 -1
  31. package/source/components/style/control.css +14 -1
  32. package/source/components/style/data-grid.css +447 -1
  33. package/source/components/style/display.css +32 -1
  34. package/source/components/style/floating-ui.css +42 -1
  35. package/source/components/style/form.css +47 -1
  36. package/source/components/style/host.css +14 -1
  37. package/source/components/style/icons.css +1584 -1
  38. package/source/components/style/link.css +37 -1
  39. package/source/components/style/normalize.css +144 -1
  40. package/source/components/style/popper.css +101 -1
  41. package/source/components/style/property.css +327 -1
  42. package/source/components/style/ripple.css +13 -1
  43. package/source/components/style/skeleton.css +164 -1
  44. package/source/components/style/space.css +240 -1
  45. package/source/components/style/spinner.css +7 -1
  46. package/source/components/style/table.css +39 -1
  47. package/source/components/style/theme.css +356 -1
  48. package/source/components/style/typography.css +178 -1
  49. package/source/monster.mjs +1 -0
  50. package/source/types/version.mjs +1 -1
  51. package/test/cases/monster.mjs +1 -1
  52. package/test/web/test.html +2 -2
  53. package/test/web/tests.js +25 -47
package/source/components/style/theme.css CHANGED
@@ -1,2 +1,357 @@
1
1
  /** generated from theme.pcss **/
2
- .monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}
2
+ .monster-theme-primary-1 {
3
+ background-color: var(--monster-bg-color-primary-1);
4
+ color: var(--monster-color-primary-1);
5
+ }
6
+ .monster-theme-primary-disabled-1 {
7
+ background-color: var(--monster-bg-color-primary-disabled-1);
8
+ color: var(--monster-color-primary-disabled-1);
9
+ }
10
+ .monster-theme-secondary-1 {
11
+ background-color: var(--monster-bg-color-secondary-1);
12
+ color: var(--monster-color-secondary-1);
13
+ }
14
+ .monster-theme-tertiary-1 {
15
+ background-color: var(--monster-bg-color-tertiary-1);
16
+ color: var(--monster-color-tertiary-1);
17
+ }
18
+ .monster-theme-destructive-1 {
19
+ background-color: var(--monster-bg-color-destructive-1);
20
+ color: var(--monster-color-destructive-1);
21
+ }
22
+ .monster-theme-success-1 {
23
+ background-color: var(--monster-bg-color-success-1);
24
+ color: var(--monster-color-success-1);
25
+ }
26
+ .monster-theme-warning-1 {
27
+ background-color: var(--monster-bg-color-warning-1);
28
+ color: var(--monster-color-warning-1);
29
+ }
30
+ .monster-theme-error-1 {
31
+ background-color: var(--monster-bg-color-error-1);
32
+ color: var(--monster-color-error-1);
33
+ }
34
+ .monster-theme-selection-1 {
35
+ background-color: var(--monster-bg-color-selection-1);
36
+ color: var(--monster-color-selection-1);
37
+ }
38
+ .monster-border-color-1 {
39
+ border-color: var(--monster-color-border-1);
40
+ }
41
+ .monster-color-neutral-1 {
42
+ color: var(--monster-color-primary-1);
43
+ }
44
+ .monster-bg-color-primary-1 {
45
+ background-color: var(--monster-bg-color-primary-1);
46
+ }
47
+ .monster-bg-color-secondary-1 {
48
+ background-color: var(--monster-bg-color-secondary-1);
49
+ }
50
+ .monster-bg-color-tertiary-1 {
51
+ background-color: var(--monster-bg-color-tertiary-1);
52
+ }
53
+ .monster-color-primary-1 {
54
+ background-color: var(--monster-bg-color-primary-1);
55
+ color: var(--monster-color-primary-1);
56
+ }
57
+ .monster-color-secondary-1 {
58
+ background-color: var(--monster-bg-color-secondary-1);
59
+ color: var(--monster-color-secondary-1);
60
+ }
61
+ .monster-color-tertiary-1 {
62
+ background-color: var(--monster-bg-color-tertiary-1);
63
+ color: var(--monster-color-tertiary-1);
64
+ }
65
+ .monster-color-destructive-1 {
66
+ background-color: var(--monster-bg-color-destructive-1);
67
+ color: var(--monster-color-destructive-1);
68
+ }
69
+ .monster-color-success-1 {
70
+ background-color: var(--monster-bg-color-success-1);
71
+ color: var(--monster-color-success-1);
72
+ }
73
+ .monster-color-warning-1 {
74
+ background-color: var(--monster-bg-color-warning-1);
75
+ color: var(--monster-color-warning-1);
76
+ }
77
+ .monster-color-error-1 {
78
+ background-color: var(--monster-bg-color-error-1);
79
+ color: var(--monster-color-error-1);
80
+ }
81
+ .monster-color-selection-1 {
82
+ background-color: var(--monster-bg-color-selection-1);
83
+ color: var(--monster-color-selection-1);
84
+ }
85
+ .monster-theme-primary-2 {
86
+ background-color: var(--monster-bg-color-primary-2);
87
+ color: var(--monster-color-primary-2);
88
+ }
89
+ .monster-theme-primary-disabled-2 {
90
+ background-color: var(--monster-bg-color-primary-disabled-2);
91
+ color: var(--monster-color-primary-disabled-2);
92
+ }
93
+ .monster-theme-secondary-2 {
94
+ background-color: var(--monster-bg-color-secondary-2);
95
+ color: var(--monster-color-secondary-2);
96
+ }
97
+ .monster-theme-tertiary-2 {
98
+ background-color: var(--monster-bg-color-tertiary-2);
99
+ color: var(--monster-color-tertiary-2);
100
+ }
101
+ .monster-theme-destructive-2 {
102
+ background-color: var(--monster-bg-color-destructive-2);
103
+ color: var(--monster-color-destructive-2);
104
+ }
105
+ .monster-theme-success-2 {
106
+ background-color: var(--monster-bg-color-success-2);
107
+ color: var(--monster-color-success-2);
108
+ }
109
+ .monster-theme-warning-2 {
110
+ background-color: var(--monster-bg-color-warning-2);
111
+ color: var(--monster-color-warning-2);
112
+ }
113
+ .monster-theme-error-2 {
114
+ background-color: var(--monster-bg-color-error-2);
115
+ color: var(--monster-color-error-2);
116
+ }
117
+ .monster-theme-selection-2 {
118
+ background-color: var(--monster-bg-color-selection-2);
119
+ color: var(--monster-color-selection-2);
120
+ }
121
+ .monster-border-color-2 {
122
+ border-color: var(--monster-color-border-2);
123
+ }
124
+ .monster-color-neutral-2 {
125
+ color: var(--monster-color-primary-2);
126
+ }
127
+ .monster-bg-color-primary-2 {
128
+ background-color: var(--monster-bg-color-primary-2);
129
+ }
130
+ .monster-bg-color-secondary-2 {
131
+ background-color: var(--monster-bg-color-secondary-2);
132
+ }
133
+ .monster-bg-color-tertiary-2 {
134
+ background-color: var(--monster-bg-color-tertiary-2);
135
+ }
136
+ .monster-color-primary-2 {
137
+ background-color: var(--monster-bg-color-primary-2);
138
+ color: var(--monster-color-primary-2);
139
+ }
140
+ .monster-color-secondary-2 {
141
+ background-color: var(--monster-bg-color-secondary-2);
142
+ color: var(--monster-color-secondary-2);
143
+ }
144
+ .monster-color-tertiary-2 {
145
+ background-color: var(--monster-bg-color-tertiary-2);
146
+ color: var(--monster-color-tertiary-2);
147
+ }
148
+ .monster-color-destructive-2 {
149
+ background-color: var(--monster-bg-color-destructive-2);
150
+ color: var(--monster-color-destructive-2);
151
+ }
152
+ .monster-color-success-2 {
153
+ background-color: var(--monster-bg-color-success-2);
154
+ color: var(--monster-color-success-2);
155
+ }
156
+ .monster-color-warning-2 {
157
+ background-color: var(--monster-bg-color-warning-2);
158
+ color: var(--monster-color-warning-2);
159
+ }
160
+ .monster-color-error-2 {
161
+ background-color: var(--monster-bg-color-error-2);
162
+ color: var(--monster-color-error-2);
163
+ }
164
+ .monster-color-selection-2 {
165
+ background-color: var(--monster-bg-color-selection-2);
166
+ color: var(--monster-color-selection-2);
167
+ }
168
+ .monster-theme-primary-3 {
169
+ background-color: var(--monster-bg-color-primary-3);
170
+ color: var(--monster-color-primary-3);
171
+ }
172
+ .monster-theme-primary-disabled-3 {
173
+ background-color: var(--monster-bg-color-primary-disabled-3);
174
+ color: var(--monster-color-primary-disabled-3);
175
+ }
176
+ .monster-theme-secondary-3 {
177
+ background-color: var(--monster-bg-color-secondary-3);
178
+ color: var(--monster-color-secondary-3);
179
+ }
180
+ .monster-theme-tertiary-3 {
181
+ background-color: var(--monster-bg-color-tertiary-3);
182
+ color: var(--monster-color-tertiary-3);
183
+ }
184
+ .monster-theme-destructive-3 {
185
+ background-color: var(--monster-bg-color-destructive-3);
186
+ color: var(--monster-color-destructive-3);
187
+ }
188
+ .monster-theme-success-3 {
189
+ background-color: var(--monster-bg-color-success-3);
190
+ color: var(--monster-color-success-3);
191
+ }
192
+ .monster-theme-warning-3 {
193
+ background-color: var(--monster-bg-color-warning-3);
194
+ color: var(--monster-color-warning-3);
195
+ }
196
+ .monster-theme-error-3 {
197
+ background-color: var(--monster-bg-color-error-3);
198
+ color: var(--monster-color-error-3);
199
+ }
200
+ .monster-theme-selection-3 {
201
+ background-color: var(--monster-bg-color-selection-3);
202
+ color: var(--monster-color-selection-3);
203
+ }
204
+ .monster-border-color-3 {
205
+ border-color: var(--monster-color-border-3);
206
+ }
207
+ .monster-color-neutral-3 {
208
+ color: var(--monster-color-primary-3);
209
+ }
210
+ .monster-bg-color-primary-3 {
211
+ background-color: var(--monster-bg-color-primary-3);
212
+ }
213
+ .monster-bg-color-secondary-3 {
214
+ background-color: var(--monster-bg-color-secondary-3);
215
+ }
216
+ .monster-bg-color-tertiary-3 {
217
+ background-color: var(--monster-bg-color-tertiary-3);
218
+ }
219
+ .monster-color-primary-3 {
220
+ background-color: var(--monster-bg-color-primary-3);
221
+ color: var(--monster-color-primary-3);
222
+ }
223
+ .monster-color-secondary-3 {
224
+ background-color: var(--monster-bg-color-secondary-3);
225
+ color: var(--monster-color-secondary-3);
226
+ }
227
+ .monster-color-tertiary-3 {
228
+ background-color: var(--monster-bg-color-tertiary-3);
229
+ color: var(--monster-color-tertiary-3);
230
+ }
231
+ .monster-color-destructive-3 {
232
+ background-color: var(--monster-bg-color-destructive-3);
233
+ color: var(--monster-color-destructive-3);
234
+ }
235
+ .monster-color-success-3 {
236
+ background-color: var(--monster-bg-color-success-3);
237
+ color: var(--monster-color-success-3);
238
+ }
239
+ .monster-color-warning-3 {
240
+ background-color: var(--monster-bg-color-warning-3);
241
+ color: var(--monster-color-warning-3);
242
+ }
243
+ .monster-color-error-3 {
244
+ background-color: var(--monster-bg-color-error-3);
245
+ color: var(--monster-color-error-3);
246
+ }
247
+ .monster-color-selection-3 {
248
+ background-color: var(--monster-bg-color-selection-3);
249
+ color: var(--monster-color-selection-3);
250
+ }
251
+ .monster-theme-primary-4 {
252
+ background-color: var(--monster-bg-color-primary-4);
253
+ color: var(--monster-color-primary-4);
254
+ }
255
+ .monster-theme-primary-disabled-4 {
256
+ background-color: var(--monster-bg-color-primary-disabled-4);
257
+ color: var(--monster-color-primary-disabled-4);
258
+ }
259
+ .monster-theme-secondary-4 {
260
+ background-color: var(--monster-bg-color-secondary-4);
261
+ color: var(--monster-color-secondary-4);
262
+ }
263
+ .monster-theme-tertiary-4 {
264
+ background-color: var(--monster-bg-color-tertiary-4);
265
+ color: var(--monster-color-tertiary-4);
266
+ }
267
+ .monster-theme-destructive-4 {
268
+ background-color: var(--monster-bg-color-destructive-4);
269
+ color: var(--monster-color-destructive-4);
270
+ }
271
+ .monster-theme-success-4 {
272
+ background-color: var(--monster-bg-color-success-4);
273
+ color: var(--monster-color-success-4);
274
+ }
275
+ .monster-theme-warning-4 {
276
+ background-color: var(--monster-bg-color-warning-4);
277
+ color: var(--monster-color-warning-4);
278
+ }
279
+ .monster-theme-error-4 {
280
+ background-color: var(--monster-bg-color-error-4);
281
+ color: var(--monster-color-error-4);
282
+ }
283
+ .monster-theme-selection-4 {
284
+ background-color: var(--monster-bg-color-selection-4);
285
+ color: var(--monster-color-selection-4);
286
+ }
287
+ .monster-border-color-4 {
288
+ border-color: var(--monster-color-border-4);
289
+ }
290
+ .monster-color-neutral-4 {
291
+ color: var(--monster-color-primary-4);
292
+ }
293
+ .monster-bg-color-primary-4 {
294
+ background-color: var(--monster-bg-color-primary-4);
295
+ }
296
+ .monster-bg-color-secondary-4 {
297
+ background-color: var(--monster-bg-color-secondary-4);
298
+ }
299
+ .monster-bg-color-tertiary-4 {
300
+ background-color: var(--monster-bg-color-tertiary-4);
301
+ }
302
+ .monster-color-primary-4 {
303
+ background-color: var(--monster-bg-color-primary-4);
304
+ color: var(--monster-color-primary-4);
305
+ }
306
+ .monster-color-secondary-4 {
307
+ background-color: var(--monster-bg-color-secondary-4);
308
+ color: var(--monster-color-secondary-4);
309
+ }
310
+ .monster-color-tertiary-4 {
311
+ background-color: var(--monster-bg-color-tertiary-4);
312
+ color: var(--monster-color-tertiary-4);
313
+ }
314
+ .monster-color-destructive-4 {
315
+ background-color: var(--monster-bg-color-destructive-4);
316
+ color: var(--monster-color-destructive-4);
317
+ }
318
+ .monster-color-success-4 {
319
+ background-color: var(--monster-bg-color-success-4);
320
+ color: var(--monster-color-success-4);
321
+ }
322
+ .monster-color-warning-4 {
323
+ background-color: var(--monster-bg-color-warning-4);
324
+ color: var(--monster-color-warning-4);
325
+ }
326
+ .monster-color-error-4 {
327
+ background-color: var(--monster-bg-color-error-4);
328
+ color: var(--monster-color-error-4);
329
+ }
330
+ .monster-color-selection-4 {
331
+ background-color: var(--monster-bg-color-selection-4);
332
+ color: var(--monster-color-selection-4);
333
+ }
334
+ .monster-theme-control-container-1,
335
+ .monster-theme-control-row-1 {
336
+ border: 1px solid var(--monster-theme-control-border-color);
337
+ }
338
+ .monster-theme-control-container-1,
339
+ .monster-theme-control-element,
340
+ .monster-theme-control-row-1 {
341
+ background-color: var(--monster-theme-control-bg-color);
342
+ color: var(--monster-theme-control-color);
343
+ }
344
+ .monster-theme-control-background {
345
+ background-color: var(--monster-theme-control-bg-color);
346
+ }
347
+ .monster-theme-background-inherit {
348
+ background-color: inherit !important;
349
+ }
350
+ .monster-theme-on {
351
+ background-color: var(--monster-theme-on-bg-color);
352
+ color: var(--monster-theme-on-color);
353
+ }
354
+ .monster-theme-off {
355
+ background-color: var(--monster-theme-off-bg-color);
356
+ color: var(--monster-theme-off-color);
357
+ }