@schukai/monster 4.38.4 → 4.38.5

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