@schukai/monster 4.38.7 → 4.38.9

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.
@@ -2,335 +2,334 @@
2
2
  :after,
3
3
  :before,
4
4
  :root {
5
- --monster-font-family:
6
- -apple-system, BlinkMacSystemFont, "Quicksand", "Segoe UI", "Roboto",
7
- "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
8
- "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
9
- "Segoe UI Symbol";
10
- --monster-font-family-monospace:
11
- "Consolas", "Courier New", "Roboto Mono", "Source Code Pro", "Fira Mono",
12
- monospace;
13
- --monster-color-primary-1: var(--monster-color-gray-6);
14
- --monster-color-primary-2: var(--monster-color-gray-6);
15
- --monster-color-primary-3: var(--monster-color-cinnamon-1);
16
- --monster-color-primary-4: var(--monster-color-cinnamon-1);
17
- --monster-bg-color-primary-1: var(--monster-color-gray-1);
18
- --monster-bg-color-primary-2: var(--monster-color-gray-2);
19
- --monster-bg-color-primary-3: var(--monster-color-gray-6);
20
- --monster-bg-color-primary-4: var(--monster-color-gray-4);
5
+ --monster-font-family:
6
+ -apple-system, BlinkMacSystemFont, "Quicksand", "Segoe UI", "Roboto",
7
+ "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
8
+ "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
9
+ "Segoe UI Symbol";
10
+ --monster-font-family-monospace: "Consolas", "Courier New", "Roboto Mono",
11
+ "Source Code Pro", "Fira Mono", monospace;
12
+ --monster-color-primary-1: var(--monster-color-gray-6);
13
+ --monster-color-primary-2: var(--monster-color-gray-6);
14
+ --monster-color-primary-3: var(--monster-color-cinnamon-1);
15
+ --monster-color-primary-4: var(--monster-color-cinnamon-1);
16
+ --monster-bg-color-primary-1: var(--monster-color-gray-1);
17
+ --monster-bg-color-primary-2: var(--monster-color-gray-2);
18
+ --monster-bg-color-primary-3: var(--monster-color-gray-6);
19
+ --monster-bg-color-primary-4: var(--monster-color-gray-4);
21
20
  }
22
21
  @media (prefers-color-scheme: dark) {
23
- :after,
24
- :before,
25
- :root {
26
- --monster-color-primary-1: var(--monster-color-gray-1);
27
- --monster-color-primary-2: var(--monster-color-gray-1);
28
- --monster-color-primary-3: var(--monster-color-gray-6);
29
- --monster-color-primary-4: var(--monster-color-gray-6);
30
- --monster-bg-color-primary-1: var(--monster-color-gray-6);
31
- --monster-bg-color-primary-2: var(--monster-color-gray-3);
32
- --monster-bg-color-primary-3: var(--monster-color-gray-2);
33
- --monster-bg-color-primary-4: var(--monster-color-gray-1);
34
- }
22
+ :after,
23
+ :before,
24
+ :root {
25
+ --monster-color-primary-1: var(--monster-color-gray-1);
26
+ --monster-color-primary-2: var(--monster-color-gray-1);
27
+ --monster-color-primary-3: var(--monster-color-gray-6);
28
+ --monster-color-primary-4: var(--monster-color-gray-6);
29
+ --monster-bg-color-primary-1: var(--monster-color-gray-6);
30
+ --monster-bg-color-primary-2: var(--monster-color-gray-3);
31
+ --monster-bg-color-primary-3: var(--monster-color-gray-2);
32
+ --monster-bg-color-primary-4: var(--monster-color-gray-1);
33
+ }
35
34
  }
36
35
  :after,
37
36
  :before,
38
37
  :root {
39
- --monster-color-secondary-1: var(--monster-color-red-4);
40
- --monster-color-secondary-2: var(--monster-color-red-4);
41
- --monster-color-secondary-3: var(--monster-color-red-1);
42
- --monster-color-secondary-4: var(--monster-color-red-1);
43
- --monster-bg-color-secondary-1: var(--monster-color-gray-1);
44
- --monster-bg-color-secondary-2: var(--monster-color-red-2);
45
- --monster-bg-color-secondary-3: var(--monster-color-red-3);
46
- --monster-bg-color-secondary-4: var(--monster-color-red-6);
38
+ --monster-color-secondary-1: var(--monster-color-red-4);
39
+ --monster-color-secondary-2: var(--monster-color-red-4);
40
+ --monster-color-secondary-3: var(--monster-color-red-1);
41
+ --monster-color-secondary-4: var(--monster-color-red-1);
42
+ --monster-bg-color-secondary-1: var(--monster-color-gray-1);
43
+ --monster-bg-color-secondary-2: var(--monster-color-red-2);
44
+ --monster-bg-color-secondary-3: var(--monster-color-red-3);
45
+ --monster-bg-color-secondary-4: var(--monster-color-red-6);
47
46
  }
48
47
  @media (prefers-color-scheme: dark) {
49
- :after,
50
- :before,
51
- :root {
52
- --monster-color-secondary-1: var(--monster-color-red-1);
53
- --monster-color-secondary-2: var(--monster-color-red-1);
54
- --monster-color-secondary-3: var(--monster-color-red-6);
55
- --monster-color-secondary-4: var(--monster-color-red-4);
56
- --monster-bg-color-secondary-1: var(--monster-color-gray-6);
57
- --monster-bg-color-secondary-2: var(--monster-color-red-3);
58
- --monster-bg-color-secondary-3: var(--monster-color-red-2);
59
- --monster-bg-color-secondary-4: var(--monster-color-red-1);
60
- }
48
+ :after,
49
+ :before,
50
+ :root {
51
+ --monster-color-secondary-1: var(--monster-color-red-1);
52
+ --monster-color-secondary-2: var(--monster-color-red-1);
53
+ --monster-color-secondary-3: var(--monster-color-red-6);
54
+ --monster-color-secondary-4: var(--monster-color-red-4);
55
+ --monster-bg-color-secondary-1: var(--monster-color-gray-6);
56
+ --monster-bg-color-secondary-2: var(--monster-color-red-3);
57
+ --monster-bg-color-secondary-3: var(--monster-color-red-2);
58
+ --monster-bg-color-secondary-4: var(--monster-color-red-1);
59
+ }
61
60
  }
62
61
  :after,
63
62
  :before,
64
63
  :root {
65
- --monster-color-tertiary-1: var(--monster-color-magenta-4);
66
- --monster-color-tertiary-2: var(--monster-color-magenta-4);
67
- --monster-color-tertiary-3: var(--monster-color-magenta-6);
68
- --monster-color-tertiary-4: var(--monster-color-magenta-1);
69
- --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
70
- --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
71
- --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
72
- --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
64
+ --monster-color-tertiary-1: var(--monster-color-magenta-4);
65
+ --monster-color-tertiary-2: var(--monster-color-magenta-4);
66
+ --monster-color-tertiary-3: var(--monster-color-magenta-6);
67
+ --monster-color-tertiary-4: var(--monster-color-magenta-1);
68
+ --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
69
+ --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
70
+ --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
71
+ --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
73
72
  }
74
73
  @media (prefers-color-scheme: dark) {
75
- :after,
76
- :before,
77
- :root {
78
- --monster-color-tertiary-1: var(--monster-color-magenta-1);
79
- --monster-color-tertiary-2: var(--monster-color-magenta-6);
80
- --monster-color-tertiary-3: var(--monster-color-magenta-4);
81
- --monster-color-tertiary-4: var(--monster-color-magenta-4);
82
- --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
83
- --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
84
- --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
85
- --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
86
- }
74
+ :after,
75
+ :before,
76
+ :root {
77
+ --monster-color-tertiary-1: var(--monster-color-magenta-1);
78
+ --monster-color-tertiary-2: var(--monster-color-magenta-6);
79
+ --monster-color-tertiary-3: var(--monster-color-magenta-4);
80
+ --monster-color-tertiary-4: var(--monster-color-magenta-4);
81
+ --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
82
+ --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
83
+ --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
84
+ --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
85
+ }
87
86
  }
88
87
  :after,
89
88
  :before,
90
89
  :root {
91
- --monster-color-destructive-1: var(--monster-color-red-1);
92
- --monster-color-destructive-2: var(--monster-color-red-4);
93
- --monster-color-destructive-3: var(--monster-color-red-6);
94
- --monster-color-destructive-4: var(--monster-color-red-1);
95
- --monster-bg-color-destructive-1: var(--monster-color-red-4);
96
- --monster-bg-color-destructive-2: var(--monster-color-gray-1);
97
- --monster-bg-color-destructive-3: var(--monster-color-red-2);
98
- --monster-bg-color-destructive-4: var(--monster-color-red-5);
90
+ --monster-color-destructive-1: var(--monster-color-red-1);
91
+ --monster-color-destructive-2: var(--monster-color-red-4);
92
+ --monster-color-destructive-3: var(--monster-color-red-6);
93
+ --monster-color-destructive-4: var(--monster-color-red-1);
94
+ --monster-bg-color-destructive-1: var(--monster-color-red-4);
95
+ --monster-bg-color-destructive-2: var(--monster-color-gray-1);
96
+ --monster-bg-color-destructive-3: var(--monster-color-red-2);
97
+ --monster-bg-color-destructive-4: var(--monster-color-red-5);
99
98
  }
100
99
  @media (prefers-color-scheme: dark) {
101
- :after,
102
- :before,
103
- :root {
104
- --monster-color-destructive-1: var(--monster-color-red-1);
105
- --monster-color-destructive-2: var(--monster-color-red-3);
106
- --monster-color-destructive-3: var(--monster-color-red-4);
107
- --monster-color-destructive-4: var(--monster-color-red-1);
108
- --monster-bg-color-destructive-1: var(--monster-color-red-5);
109
- --monster-bg-color-destructive-2: var(--monster-color-gray-6);
110
- --monster-bg-color-destructive-3: var(--monster-color-red-1);
111
- --monster-bg-color-destructive-4: var(--monster-color-red-4);
112
- }
100
+ :after,
101
+ :before,
102
+ :root {
103
+ --monster-color-destructive-1: var(--monster-color-red-1);
104
+ --monster-color-destructive-2: var(--monster-color-red-3);
105
+ --monster-color-destructive-3: var(--monster-color-red-4);
106
+ --monster-color-destructive-4: var(--monster-color-red-1);
107
+ --monster-bg-color-destructive-1: var(--monster-color-red-5);
108
+ --monster-bg-color-destructive-2: var(--monster-color-gray-6);
109
+ --monster-bg-color-destructive-3: var(--monster-color-red-1);
110
+ --monster-bg-color-destructive-4: var(--monster-color-red-4);
111
+ }
113
112
  }
114
113
  :after,
115
114
  :before,
116
115
  :root {
117
- --monster-color-success-1: var(--monster-color-green-1);
118
- --monster-color-success-2: var(--monster-color-green-4);
119
- --monster-color-success-3: var(--monster-color-green-6);
120
- --monster-color-success-4: var(--monster-color-green-1);
121
- --monster-bg-color-success-1: var(--monster-color-green-3);
122
- --monster-bg-color-success-2: var(--monster-color-gray-1);
123
- --monster-bg-color-success-3: var(--monster-color-green-2);
124
- --monster-bg-color-success-4: var(--monster-color-green-5);
116
+ --monster-color-success-1: var(--monster-color-green-1);
117
+ --monster-color-success-2: var(--monster-color-green-4);
118
+ --monster-color-success-3: var(--monster-color-green-6);
119
+ --monster-color-success-4: var(--monster-color-green-1);
120
+ --monster-bg-color-success-1: var(--monster-color-green-3);
121
+ --monster-bg-color-success-2: var(--monster-color-gray-1);
122
+ --monster-bg-color-success-3: var(--monster-color-green-2);
123
+ --monster-bg-color-success-4: var(--monster-color-green-5);
125
124
  }
126
125
  @media (prefers-color-scheme: dark) {
127
- :after,
128
- :before,
129
- :root {
130
- --monster-color-success-1: var(--monster-color-green-1);
131
- --monster-color-success-2: var(--monster-color-green-2);
132
- --monster-color-success-3: var(--monster-color-green-4);
133
- --monster-color-success-4: var(--monster-color-green-1);
134
- --monster-bg-color-success-1: var(--monster-color-green-5);
135
- --monster-bg-color-success-2: var(--monster-color-gray-6);
136
- --monster-bg-color-success-3: var(--monster-color-green-1);
137
- --monster-bg-color-success-4: var(--monster-color-green-3);
138
- }
126
+ :after,
127
+ :before,
128
+ :root {
129
+ --monster-color-success-1: var(--monster-color-green-1);
130
+ --monster-color-success-2: var(--monster-color-green-2);
131
+ --monster-color-success-3: var(--monster-color-green-4);
132
+ --monster-color-success-4: var(--monster-color-green-1);
133
+ --monster-bg-color-success-1: var(--monster-color-green-5);
134
+ --monster-bg-color-success-2: var(--monster-color-gray-6);
135
+ --monster-bg-color-success-3: var(--monster-color-green-1);
136
+ --monster-bg-color-success-4: var(--monster-color-green-3);
137
+ }
139
138
  }
140
139
  :after,
141
140
  :before,
142
141
  :root {
143
- --monster-color-warning-1: var(--monster-color-orange-1);
144
- --monster-color-warning-2: var(--monster-color-orange-4);
145
- --monster-color-warning-3: var(--monster-color-orange-6);
146
- --monster-color-warning-4: var(--monster-color-orange-1);
147
- --monster-bg-color-warning-1: var(--monster-color-orange-3);
148
- --monster-bg-color-warning-2: var(--monster-color-gray-1);
149
- --monster-bg-color-warning-3: var(--monster-color-orange-2);
150
- --monster-bg-color-warning-4: var(--monster-color-orange-5);
142
+ --monster-color-warning-1: var(--monster-color-orange-1);
143
+ --monster-color-warning-2: var(--monster-color-orange-4);
144
+ --monster-color-warning-3: var(--monster-color-orange-6);
145
+ --monster-color-warning-4: var(--monster-color-orange-1);
146
+ --monster-bg-color-warning-1: var(--monster-color-orange-3);
147
+ --monster-bg-color-warning-2: var(--monster-color-gray-1);
148
+ --monster-bg-color-warning-3: var(--monster-color-orange-2);
149
+ --monster-bg-color-warning-4: var(--monster-color-orange-5);
151
150
  }
152
151
  @media (prefers-color-scheme: dark) {
153
- :after,
154
- :before,
155
- :root {
156
- --monster-color-warning-1: var(--monster-color-orange-1);
157
- --monster-color-warning-2: var(--monster-color-orange-3);
158
- --monster-color-warning-3: var(--monster-color-orange-4);
159
- --monster-color-warning-4: var(--monster-color-orange-1);
160
- --monster-bg-color-warning-1: var(--monster-color-orange-5);
161
- --monster-bg-color-warning-2: var(--monster-color-gray-6);
162
- --monster-bg-color-warning-3: var(--monster-color-orange-1);
163
- --monster-bg-color-warning-4: var(--monster-color-orange-3);
164
- }
152
+ :after,
153
+ :before,
154
+ :root {
155
+ --monster-color-warning-1: var(--monster-color-orange-1);
156
+ --monster-color-warning-2: var(--monster-color-orange-3);
157
+ --monster-color-warning-3: var(--monster-color-orange-4);
158
+ --monster-color-warning-4: var(--monster-color-orange-1);
159
+ --monster-bg-color-warning-1: var(--monster-color-orange-5);
160
+ --monster-bg-color-warning-2: var(--monster-color-gray-6);
161
+ --monster-bg-color-warning-3: var(--monster-color-orange-1);
162
+ --monster-bg-color-warning-4: var(--monster-color-orange-3);
163
+ }
165
164
  }
166
165
  :after,
167
166
  :before,
168
167
  :root {
169
- --monster-color-error-1: var(--monster-color-red-1);
170
- --monster-color-error-2: var(--monster-color-red-4);
171
- --monster-color-error-3: var(--monster-color-red-6);
172
- --monster-color-error-4: var(--monster-color-red-1);
173
- --monster-bg-color-error-1: var(--monster-color-red-4);
174
- --monster-bg-color-error-2: var(--monster-color-gray-1);
175
- --monster-bg-color-error-3: var(--monster-color-red-2);
176
- --monster-bg-color-error-4: var(--monster-color-red-5);
168
+ --monster-color-error-1: var(--monster-color-red-1);
169
+ --monster-color-error-2: var(--monster-color-red-4);
170
+ --monster-color-error-3: var(--monster-color-red-6);
171
+ --monster-color-error-4: var(--monster-color-red-1);
172
+ --monster-bg-color-error-1: var(--monster-color-red-4);
173
+ --monster-bg-color-error-2: var(--monster-color-gray-1);
174
+ --monster-bg-color-error-3: var(--monster-color-red-2);
175
+ --monster-bg-color-error-4: var(--monster-color-red-5);
177
176
  }
178
177
  @media (prefers-color-scheme: dark) {
179
- :after,
180
- :before,
181
- :root {
182
- --monster-color-error-1: var(--monster-color-red-1);
183
- --monster-color-error-2: var(--monster-color-red-3);
184
- --monster-color-error-3: var(--monster-color-red-4);
185
- --monster-color-error-4: var(--monster-color-red-1);
186
- --monster-bg-color-error-1: var(--monster-color-red-5);
187
- --monster-bg-color-error-2: var(--monster-color-gray-6);
188
- --monster-bg-color-error-3: var(--monster-color-red-1);
189
- --monster-bg-color-error-4: var(--monster-color-red-4);
190
- }
178
+ :after,
179
+ :before,
180
+ :root {
181
+ --monster-color-error-1: var(--monster-color-red-1);
182
+ --monster-color-error-2: var(--monster-color-red-3);
183
+ --monster-color-error-3: var(--monster-color-red-4);
184
+ --monster-color-error-4: var(--monster-color-red-1);
185
+ --monster-bg-color-error-1: var(--monster-color-red-5);
186
+ --monster-bg-color-error-2: var(--monster-color-gray-6);
187
+ --monster-bg-color-error-3: var(--monster-color-red-1);
188
+ --monster-bg-color-error-4: var(--monster-color-red-4);
189
+ }
191
190
  }
192
191
  :after,
193
192
  :before,
194
193
  :root {
195
- --monster-color-selection-1: var(--monster-color-gray-6);
196
- --monster-color-selection-2: var(--monster-color-gray-6);
197
- --monster-color-selection-3: var(--monster-color-gray-6);
198
- --monster-color-selection-4: var(--monster-color-gray-1);
199
- --monster-bg-color-selection-1: var(--monster-color-yellow-2);
200
- --monster-bg-color-selection-2: var(--monster-color-yellow-1);
201
- --monster-bg-color-selection-3: var(--monster-color-yellow-2);
202
- --monster-bg-color-selection-4: var(--monster-color-yellow-6);
194
+ --monster-color-selection-1: var(--monster-color-gray-6);
195
+ --monster-color-selection-2: var(--monster-color-gray-6);
196
+ --monster-color-selection-3: var(--monster-color-gray-6);
197
+ --monster-color-selection-4: var(--monster-color-gray-1);
198
+ --monster-bg-color-selection-1: var(--monster-color-yellow-2);
199
+ --monster-bg-color-selection-2: var(--monster-color-yellow-1);
200
+ --monster-bg-color-selection-3: var(--monster-color-yellow-2);
201
+ --monster-bg-color-selection-4: var(--monster-color-yellow-6);
203
202
  }
204
203
  @media (prefers-color-scheme: dark) {
205
- :after,
206
- :before,
207
- :root {
208
- --monster-color-selection-1: var(--monster-color-gray-6);
209
- --monster-color-selection-2: var(--monster-color-gray-6);
210
- --monster-color-selection-3: var(--monster-color-gray-6);
211
- --monster-color-selection-4: var(--monster-color-gray-1);
212
- --monster-bg-color-selection-1: var(--monster-color-yellow-2);
213
- --monster-bg-color-selection-2: var(--monster-color-yellow-1);
214
- --monster-bg-color-selection-3: var(--monster-color-yellow-2);
215
- --monster-bg-color-selection-4: var(--monster-color-yellow-6);
216
- }
204
+ :after,
205
+ :before,
206
+ :root {
207
+ --monster-color-selection-1: var(--monster-color-gray-6);
208
+ --monster-color-selection-2: var(--monster-color-gray-6);
209
+ --monster-color-selection-3: var(--monster-color-gray-6);
210
+ --monster-color-selection-4: var(--monster-color-gray-1);
211
+ --monster-bg-color-selection-1: var(--monster-color-yellow-2);
212
+ --monster-bg-color-selection-2: var(--monster-color-yellow-1);
213
+ --monster-bg-color-selection-3: var(--monster-color-yellow-2);
214
+ --monster-bg-color-selection-4: var(--monster-color-yellow-6);
215
+ }
217
216
  }
218
217
  :after,
219
218
  :before,
220
219
  :root {
221
- --monster-color-primary-disabled-1: var(--monster-color-gray-4);
222
- --monster-color-primary-disabled-2: var(--monster-color-gray-4);
223
- --monster-color-primary-disabled-3: var(--monster-color-gray-4);
224
- --monster-color-primary-disabled-4: var(--monster-color-gray-4);
225
- --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
226
- --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
227
- --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
228
- --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
229
- --monster-color-gradient-1: #833ab4;
230
- --monster-color-gradient-2: #fd1d1d;
231
- --monster-color-gradient-3: #fcb045;
220
+ --monster-color-primary-disabled-1: var(--monster-color-gray-4);
221
+ --monster-color-primary-disabled-2: var(--monster-color-gray-4);
222
+ --monster-color-primary-disabled-3: var(--monster-color-gray-4);
223
+ --monster-color-primary-disabled-4: var(--monster-color-gray-4);
224
+ --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
225
+ --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
226
+ --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
227
+ --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
228
+ --monster-color-gradient-1: #833ab4;
229
+ --monster-color-gradient-2: #fd1d1d;
230
+ --monster-color-gradient-3: #fcb045;
232
231
  }
233
232
  @media (prefers-color-scheme: dark) {
234
- :after,
235
- :before,
236
- :root {
237
- --monster-color-primary-disabled-1: var(--monster-color-gray-4);
238
- --monster-color-primary-disabled-2: var(--monster-color-gray-4);
239
- --monster-color-primary-disabled-3: var(--monster-color-gray-3);
240
- --monster-color-primary-disabled-4: var(--monster-color-gray-3);
241
- --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
242
- --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
243
- --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
244
- --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
245
- --monster-color-gradient-1: #ffe0b2;
246
- --monster-color-gradient-2: #ad8275;
247
- --monster-color-gradient-3: #771ba3;
248
- }
233
+ :after,
234
+ :before,
235
+ :root {
236
+ --monster-color-primary-disabled-1: var(--monster-color-gray-4);
237
+ --monster-color-primary-disabled-2: var(--monster-color-gray-4);
238
+ --monster-color-primary-disabled-3: var(--monster-color-gray-3);
239
+ --monster-color-primary-disabled-4: var(--monster-color-gray-3);
240
+ --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
241
+ --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
242
+ --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
243
+ --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
244
+ --monster-color-gradient-1: #ffe0b2;
245
+ --monster-color-gradient-2: #ad8275;
246
+ --monster-color-gradient-3: #771ba3;
247
+ }
249
248
  }
250
249
  :after,
251
250
  :before,
252
251
  :root {
253
- --monster-box-shadow-1: none;
254
- --monster-box-shadow-2: -1px 1px 10px 1px hsla(0, 0%, 76%, 0.61);
255
- --monster-text-shadow: none;
256
- --monster-theme-control-bg-color: var(--monster-color-seashell-1);
257
- --monster-theme-control-color: var(--monster-color-seashell-6);
258
- --monster-theme-control-hover-color: var(--monster-color-seashell-6);
259
- --monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
260
- --monster-theme-control-border-width: 2px;
261
- --monster-theme-control-border-style: solid;
262
- --monster-theme-control-border-radius: 0;
263
- --monster-theme-control-border-color: var(--monster-color-primary-1);
252
+ --monster-box-shadow-1: none;
253
+ --monster-box-shadow-2: -1px 1px 10px 1px hsla(0, 0%, 76%, 0.61);
254
+ --monster-text-shadow: none;
255
+ --monster-theme-control-bg-color: var(--monster-color-seashell-1);
256
+ --monster-theme-control-color: var(--monster-color-seashell-6);
257
+ --monster-theme-control-hover-color: var(--monster-color-seashell-6);
258
+ --monster-theme-control-hover-bg-color: var(--monster-color-seashell-2);
259
+ --monster-theme-control-border-width: 2px;
260
+ --monster-theme-control-border-style: solid;
261
+ --monster-theme-control-border-radius: 0;
262
+ --monster-theme-control-border-color: var(--monster-color-primary-1);
264
263
  }
265
264
  @media (prefers-color-scheme: dark) {
266
- :after,
267
- :before,
268
- :root {
269
- --monster-theme-control-bg-color: var(--monster-color-gray-5);
270
- --monster-theme-control-color: var(--monster-color-gray-1);
271
- --monster-theme-control-border-color: var(--monster-color-gray-3);
272
- --monster-theme-control-hover-color: var(--monster-color-gray-1);
273
- --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
274
- }
265
+ :after,
266
+ :before,
267
+ :root {
268
+ --monster-theme-control-bg-color: var(--monster-color-gray-5);
269
+ --monster-theme-control-color: var(--monster-color-gray-1);
270
+ --monster-theme-control-border-color: var(--monster-color-gray-3);
271
+ --monster-theme-control-hover-color: var(--monster-color-gray-1);
272
+ --monster-theme-control-hover-bg-color: var(--monster-color-gray-6);
273
+ }
275
274
  }
276
275
  :after,
277
276
  :before,
278
277
  :root {
279
- --monster-theme-on-color: var(--monster-color-green-1);
280
- --monster-theme-on-bg-color: var(--monster-color-green-5);
281
- --monster-theme-off-color: var(--monster-color-gray-1);
282
- --monster-theme-off-bg-color: var(--monster-color-gray-4);
278
+ --monster-theme-on-color: var(--monster-color-green-1);
279
+ --monster-theme-on-bg-color: var(--monster-color-green-5);
280
+ --monster-theme-off-color: var(--monster-color-gray-1);
281
+ --monster-theme-off-bg-color: var(--monster-color-gray-4);
283
282
  }
284
283
  @media (prefers-color-scheme: dark) {
285
- :after,
286
- :before,
287
- :root {
288
- --monster-theme-on-color: var(--monster-color-gray-6);
289
- --monster-theme-on-bg-color: var(--monster-color-gray-1);
290
- --monster-theme-off-color: var(--monster-color-gray-1);
291
- --monster-theme-off-bg-color: var(--monster-color-gray-5);
292
- }
284
+ :after,
285
+ :before,
286
+ :root {
287
+ --monster-theme-on-color: var(--monster-color-gray-6);
288
+ --monster-theme-on-bg-color: var(--monster-color-gray-1);
289
+ --monster-theme-off-color: var(--monster-color-gray-1);
290
+ --monster-theme-off-bg-color: var(--monster-color-gray-5);
291
+ }
293
292
  }
294
293
  :after,
295
294
  :before,
296
295
  :root {
297
- --monster-border-style: solid;
298
- --monster-border-width: 3px;
299
- --monster-border-radius: 0;
300
- --monster-outline-width: 1px;
301
- --monster-popper-witharrrow-distance: -4px;
302
- --monster-z-index-default: 0;
303
- --monster-z-index-outline: 10;
304
- --monster-z-index-dropdown: 200;
305
- --monster-z-index-dropdown-overlay: 210;
306
- --monster-z-index-sticky: 300;
307
- --monster-z-index-sticky-overlay: 310;
308
- --monster-z-index-fixed: 400;
309
- --monster-z-index-fixed-overlay: 410;
310
- --monster-z-index-modal-backdrop: 500;
311
- --monster-z-index-modal-backdrop-overlay: 510;
312
- --monster-z-index-offcanvas: 600;
313
- --monster-z-index-offcanvas-overlay: 610;
314
- --monster-z-index-modal: 700;
315
- --monster-z-index-modal-overlay: 710;
316
- --monster-z-index-popover: 800;
317
- --monster-z-index-popover-overlay: 810;
318
- --monster-z-index-tooltip: 800;
319
- --monster-z-index-tooltip-overlay: 910;
320
- --monster-space-0: 0;
321
- --monster-space-1: 2px;
322
- --monster-space-2: 4px;
323
- --monster-space-3: 6px;
324
- --monster-space-4: 10px;
325
- --monster-space-5: 16px;
326
- --monster-space-6: 26px;
327
- --monster-space-7: 42px;
328
- --monster-breakpoint-0: 480px;
329
- --monster-breakpoint-4: 480px;
330
- --monster-breakpoint-7: 768px;
331
- --monster-breakpoint-9: 992px;
332
- --monster-breakpoint-12: 1200px;
333
- --monster-dragger-width: 2px;
334
- --monster-dragger-handle-width: 4px;
335
- --monster-dragger-handle-height: 50px;
296
+ --monster-border-style: solid;
297
+ --monster-border-width: 3px;
298
+ --monster-border-radius: 0;
299
+ --monster-outline-width: 1px;
300
+ --monster-popper-witharrrow-distance: -4px;
301
+ --monster-z-index-default: 0;
302
+ --monster-z-index-outline: 10;
303
+ --monster-z-index-dropdown: 200;
304
+ --monster-z-index-dropdown-overlay: 210;
305
+ --monster-z-index-sticky: 300;
306
+ --monster-z-index-sticky-overlay: 310;
307
+ --monster-z-index-fixed: 400;
308
+ --monster-z-index-fixed-overlay: 410;
309
+ --monster-z-index-modal-backdrop: 500;
310
+ --monster-z-index-modal-backdrop-overlay: 510;
311
+ --monster-z-index-offcanvas: 600;
312
+ --monster-z-index-offcanvas-overlay: 610;
313
+ --monster-z-index-modal: 700;
314
+ --monster-z-index-modal-overlay: 710;
315
+ --monster-z-index-popover: 800;
316
+ --monster-z-index-popover-overlay: 810;
317
+ --monster-z-index-tooltip: 800;
318
+ --monster-z-index-tooltip-overlay: 910;
319
+ --monster-space-0: 0;
320
+ --monster-space-1: 2px;
321
+ --monster-space-2: 4px;
322
+ --monster-space-3: 6px;
323
+ --monster-space-4: 10px;
324
+ --monster-space-5: 16px;
325
+ --monster-space-6: 26px;
326
+ --monster-space-7: 42px;
327
+ --monster-breakpoint-0: 480px;
328
+ --monster-breakpoint-4: 480px;
329
+ --monster-breakpoint-7: 768px;
330
+ --monster-breakpoint-9: 992px;
331
+ --monster-breakpoint-12: 1200px;
332
+ --monster-dragger-width: 2px;
333
+ --monster-dragger-handle-width: 4px;
334
+ --monster-dragger-handle-height: 50px;
336
335
  }