@examind/block-editor 0.1.14 → 0.1.16

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.
package/dist/index.css CHANGED
@@ -1,945 +1,3 @@
1
- /* src/styles/theme-dark.css */
2
- :host,
3
- .theme-dark {
4
- color-scheme: dark;
5
- --sl-color-slate-950: #f8fafc;
6
- --sl-color-slate-900: #f1f5f9;
7
- --sl-color-slate-800: #e2e8f0;
8
- --sl-color-slate-700: #cbd5e1;
9
- --sl-color-slate-600: #94a3b8;
10
- --sl-color-slate-500: #64748b;
11
- --sl-color-slate-400: #475569;
12
- --sl-color-slate-300: #334155;
13
- --sl-color-slate-200: #1e293b;
14
- --sl-color-slate-100: #0f172a;
15
- --sl-color-slate-50: #020617;
16
- --sl-color-gray-50: hsl(240 5.1% 15%);
17
- --sl-color-gray-100: hsl(240 5.7% 18.2%);
18
- --sl-color-gray-200: hsl(240 4.6% 22%);
19
- --sl-color-gray-300: hsl(240 5% 27.6%);
20
- --sl-color-gray-400: hsl(240 5% 35.5%);
21
- --sl-color-gray-500: hsl(240 3.7% 44%);
22
- --sl-color-gray-600: hsl(240 5.3% 58%);
23
- --sl-color-gray-700: hsl(240 5.6% 73%);
24
- --sl-color-gray-800: hsl(240 7.3% 84%);
25
- --sl-color-gray-900: hsl(240 9.1% 91.8%);
26
- --sl-color-gray-950: hsl(0 0% 95%);
27
- --sl-color-red-50: hsl(0 56% 23.9%);
28
- --sl-color-red-100: hsl(0.6 60% 33.9%);
29
- --sl-color-red-200: hsl(0.9 67.2% 37.1%);
30
- --sl-color-red-300: hsl(1.1 71.3% 43.7%);
31
- --sl-color-red-400: hsl(1 76% 52.5%);
32
- --sl-color-red-500: hsl(0.7 89.6% 57.2%);
33
- --sl-color-red-600: hsl(0 98.6% 67.9%);
34
- --sl-color-red-700: hsl(0 100% 72.3%);
35
- --sl-color-red-800: hsl(0 100% 85.6%);
36
- --sl-color-red-900: hsl(0 100% 90.3%);
37
- --sl-color-red-950: hsl(0 100% 95.9%);
38
- --sl-color-orange-50: hsl(15 64.2% 23.3%);
39
- --sl-color-orange-100: hsl(15.1 70.9% 31.1%);
40
- --sl-color-orange-200: hsl(15.3 75.7% 35.5%);
41
- --sl-color-orange-300: hsl(17.1 83.5% 42.7%);
42
- --sl-color-orange-400: hsl(20.1 88% 50.8%);
43
- --sl-color-orange-500: hsl(24.3 100% 50.5%);
44
- --sl-color-orange-600: hsl(27.2 100% 57.7%);
45
- --sl-color-orange-700: hsl(31.3 100% 68.7%);
46
- --sl-color-orange-800: hsl(33.8 100% 79.3%);
47
- --sl-color-orange-900: hsl(38.9 100% 87.7%);
48
- --sl-color-orange-950: hsl(46.2 100% 95%);
49
- --sl-color-amber-50: hsl(21.9 66.3% 21.1%);
50
- --sl-color-amber-100: hsl(21.5 73.6% 29.7%);
51
- --sl-color-amber-200: hsl(22.3 77.6% 33.3%);
52
- --sl-color-amber-300: hsl(25.4 84.2% 39.6%);
53
- --sl-color-amber-400: hsl(31.4 87.4% 46.7%);
54
- --sl-color-amber-500: hsl(37 96.6% 48.3%);
55
- --sl-color-amber-600: hsl(43.3 100% 53.4%);
56
- --sl-color-amber-700: hsl(46.5 100% 61.1%);
57
- --sl-color-amber-800: hsl(49.3 100% 73%);
58
- --sl-color-amber-900: hsl(51.8 100% 85%);
59
- --sl-color-amber-950: hsl(60 100% 94.6%);
60
- --sl-color-yellow-50: hsl(32.5 60% 18.2%);
61
- --sl-color-yellow-100: hsl(28.1 68.6% 29%);
62
- --sl-color-yellow-200: hsl(31.3 75.8% 30.8%);
63
- --sl-color-yellow-300: hsl(34.7 84.4% 35.3%);
64
- --sl-color-yellow-400: hsl(40.1 87.3% 43.3%);
65
- --sl-color-yellow-500: hsl(44.7 88% 46%);
66
- --sl-color-yellow-600: hsl(47.7 100% 50.9%);
67
- --sl-color-yellow-700: hsl(51.3 100% 59.9%);
68
- --sl-color-yellow-800: hsl(54.6 100% 73%);
69
- --sl-color-yellow-900: hsl(58.9 100% 84.2%);
70
- --sl-color-yellow-950: hsl(60 100% 94%);
71
- --sl-color-lime-50: hsl(86.5 54.4% 18%);
72
- --sl-color-lime-100: hsl(87.6 56.8% 23.3%);
73
- --sl-color-lime-200: hsl(85.8 63.2% 24.5%);
74
- --sl-color-lime-300: hsl(86.1 72% 29.4%);
75
- --sl-color-lime-400: hsl(85.5 76.8% 37.3%);
76
- --sl-color-lime-500: hsl(84.3 74.2% 42.1%);
77
- --sl-color-lime-600: hsl(82.8 81.5% 52.6%);
78
- --sl-color-lime-700: hsl(82 89.9% 64%);
79
- --sl-color-lime-800: hsl(80.9 97.9% 76.6%);
80
- --sl-color-lime-900: hsl(77.9 100% 85.8%);
81
- --sl-color-lime-950: hsl(69.5 100% 93.8%);
82
- --sl-color-green-50: hsl(144.3 53.6% 16%);
83
- --sl-color-green-100: hsl(143.2 55.4% 23.5%);
84
- --sl-color-green-200: hsl(141.5 58.2% 26.3%);
85
- --sl-color-green-300: hsl(140.8 64.2% 31.8%);
86
- --sl-color-green-400: hsl(140.3 68% 39.2%);
87
- --sl-color-green-500: hsl(141.1 64.9% 43%);
88
- --sl-color-green-600: hsl(141.6 72.4% 55.2%);
89
- --sl-color-green-700: hsl(141.7 82.7% 70.1%);
90
- --sl-color-green-800: hsl(141 90.9% 82.1%);
91
- --sl-color-green-900: hsl(142 100% 89.1%);
92
- --sl-color-green-950: hsl(144 100% 95.5%);
93
- --sl-color-emerald-50: hsl(164.3 75% 13.5%);
94
- --sl-color-emerald-100: hsl(163.5 72.6% 20.1%);
95
- --sl-color-emerald-200: hsl(162.1 73.7% 22.4%);
96
- --sl-color-emerald-300: hsl(161.3 77.3% 27.6%);
97
- --sl-color-emerald-400: hsl(159.6 77.1% 34.3%);
98
- --sl-color-emerald-500: hsl(159.1 73.5% 37.9%);
99
- --sl-color-emerald-600: hsl(157.8 66.8% 48.9%);
100
- --sl-color-emerald-700: hsl(156.2 76.1% 63.8%);
101
- --sl-color-emerald-800: hsl(152.4 84.4% 77.4%);
102
- --sl-color-emerald-900: hsl(149.3 100% 87%);
103
- --sl-color-emerald-950: hsl(158.6 100% 94.8%);
104
- --sl-color-teal-50: hsl(176.5 51.5% 15.4%);
105
- --sl-color-teal-100: hsl(175.9 54.7% 22.3%);
106
- --sl-color-teal-200: hsl(175.9 60.7% 23.9%);
107
- --sl-color-teal-300: hsl(174.5 67.3% 28.8%);
108
- --sl-color-teal-400: hsl(174.4 71.9% 34.9%);
109
- --sl-color-teal-500: hsl(173.1 71% 38.3%);
110
- --sl-color-teal-600: hsl(172.3 68.2% 48.1%);
111
- --sl-color-teal-700: hsl(170.5 81.3% 61.5%);
112
- --sl-color-teal-800: hsl(168.4 92.1% 75.2%);
113
- --sl-color-teal-900: hsl(168.3 100% 86%);
114
- --sl-color-teal-950: hsl(180 100% 95.5%);
115
- --sl-color-cyan-50: hsl(197.1 53.8% 20.3%);
116
- --sl-color-cyan-100: hsl(196.8 57.3% 27.2%);
117
- --sl-color-cyan-200: hsl(195.3 62.7% 29.4%);
118
- --sl-color-cyan-300: hsl(193.5 71.3% 34.1%);
119
- --sl-color-cyan-400: hsl(192.5 76.8% 40.6%);
120
- --sl-color-cyan-500: hsl(189.4 78.6% 42.6%);
121
- --sl-color-cyan-600: hsl(188.2 89.1% 51.7%);
122
- --sl-color-cyan-700: hsl(187 98.6% 66.2%);
123
- --sl-color-cyan-800: hsl(184.9 100% 78.3%);
124
- --sl-color-cyan-900: hsl(180 100% 86.6%);
125
- --sl-color-cyan-950: hsl(180 100% 94.8%);
126
- --sl-color-sky-50: hsl(203 63.8% 20.9%);
127
- --sl-color-sky-100: hsl(203.4 70.4% 28%);
128
- --sl-color-sky-200: hsl(202.7 75.8% 30.8%);
129
- --sl-color-sky-300: hsl(203.1 80.4% 36.1%);
130
- --sl-color-sky-400: hsl(202.1 80.5% 44.3%);
131
- --sl-color-sky-500: hsl(199.7 85.9% 47.7%);
132
- --sl-color-sky-600: hsl(198.7 97.9% 57.2%);
133
- --sl-color-sky-700: hsl(198.7 100% 70.5%);
134
- --sl-color-sky-800: hsl(198.8 100% 82.5%);
135
- --sl-color-sky-900: hsl(198.5 100% 89.9%);
136
- --sl-color-sky-950: hsl(186 100% 95.5%);
137
- --sl-color-blue-50: hsl(227.1 49.5% 22.7%);
138
- --sl-color-blue-100: hsl(225.8 58.9% 36.8%);
139
- --sl-color-blue-200: hsl(227.7 64.4% 42.9%);
140
- --sl-color-blue-300: hsl(226.1 72.7% 51.2%);
141
- --sl-color-blue-400: hsl(222.6 86.5% 56.3%);
142
- --sl-color-blue-500: hsl(217.8 95.8% 57.4%);
143
- --sl-color-blue-600: hsl(213.3 100% 65%);
144
- --sl-color-blue-700: hsl(210.9 100% 74.8%);
145
- --sl-color-blue-800: hsl(211.5 100% 83.4%);
146
- --sl-color-blue-900: hsl(211 100% 88.9%);
147
- --sl-color-blue-950: hsl(201.8 100% 95.3%);
148
- --sl-color-indigo-50: hsl(243.5 40.8% 27%);
149
- --sl-color-indigo-100: hsl(242.9 45.7% 37.6%);
150
- --sl-color-indigo-200: hsl(244.7 52.7% 43.1%);
151
- --sl-color-indigo-300: hsl(245.3 60.5% 52.4%);
152
- --sl-color-indigo-400: hsl(244.1 79.2% 60.4%);
153
- --sl-color-indigo-500: hsl(239.6 88.7% 63.8%);
154
- --sl-color-indigo-600: hsl(234.5 96.7% 70.9%);
155
- --sl-color-indigo-700: hsl(229.4 100% 78.3%);
156
- --sl-color-indigo-800: hsl(227.1 100% 85%);
157
- --sl-color-indigo-900: hsl(223.8 100% 89.9%);
158
- --sl-color-indigo-950: hsl(220 100% 95.1%);
159
- --sl-color-violet-50: hsl(265.1 57.3% 25.4%);
160
- --sl-color-violet-100: hsl(263.5 63.8% 39.4%);
161
- --sl-color-violet-200: hsl(263.4 66.2% 44.1%);
162
- --sl-color-violet-300: hsl(263.7 72.8% 52.4%);
163
- --sl-color-violet-400: hsl(262.5 87.3% 59.8%);
164
- --sl-color-violet-500: hsl(258.3 95.1% 63.2%);
165
- --sl-color-violet-600: hsl(255.1 100% 67.2%);
166
- --sl-color-violet-700: hsl(253 100% 81.5%);
167
- --sl-color-violet-800: hsl(251.7 100% 87.9%);
168
- --sl-color-violet-900: hsl(254.1 100% 91.7%);
169
- --sl-color-violet-950: hsl(257.1 100% 96.1%);
170
- --sl-color-purple-50: hsl(276 54.3% 20.5%);
171
- --sl-color-purple-100: hsl(273.6 61.8% 35.4%);
172
- --sl-color-purple-200: hsl(272.9 64% 41.4%);
173
- --sl-color-purple-300: hsl(271.9 68.1% 49.2%);
174
- --sl-color-purple-400: hsl(271.5 85.1% 57.8%);
175
- --sl-color-purple-500: hsl(270.7 96.4% 62.1%);
176
- --sl-color-purple-600: hsl(270.5 100% 71.9%);
177
- --sl-color-purple-700: hsl(270.9 100% 81.3%);
178
- --sl-color-purple-800: hsl(272.4 100% 87.7%);
179
- --sl-color-purple-900: hsl(276.7 100% 91.5%);
180
- --sl-color-purple-950: hsl(300 100% 96.5%);
181
- --sl-color-fuchsia-50: hsl(297.1 51.2% 18.6%);
182
- --sl-color-fuchsia-100: hsl(296.7 59.5% 31.5%);
183
- --sl-color-fuchsia-200: hsl(295.4 65.4% 35.1%);
184
- --sl-color-fuchsia-300: hsl(294.6 67.4% 42.2%);
185
- --sl-color-fuchsia-400: hsl(293.3 68.7% 51.2%);
186
- --sl-color-fuchsia-500: hsl(292.1 88.4% 57.7%);
187
- --sl-color-fuchsia-600: hsl(292 98.5% 59.5%);
188
- --sl-color-fuchsia-700: hsl(292.4 100% 79.5%);
189
- --sl-color-fuchsia-800: hsl(292.9 100% 86.8%);
190
- --sl-color-fuchsia-900: hsl(300 100% 91.5%);
191
- --sl-color-fuchsia-950: hsl(300 100% 96.3%);
192
- --sl-color-pink-50: hsl(336.2 59.6% 20%);
193
- --sl-color-pink-100: hsl(336.8 63.9% 34%);
194
- --sl-color-pink-200: hsl(336.8 68.7% 37.6%);
195
- --sl-color-pink-300: hsl(336.1 71.8% 44.5%);
196
- --sl-color-pink-400: hsl(333.9 74.9% 53.1%);
197
- --sl-color-pink-500: hsl(330.7 86.3% 57.7%);
198
- --sl-color-pink-600: hsl(328.6 91.5% 67.2%);
199
- --sl-color-pink-700: hsl(327.4 97.6% 78.7%);
200
- --sl-color-pink-800: hsl(325.1 100% 86.6%);
201
- --sl-color-pink-900: hsl(322.1 100% 91.3%);
202
- --sl-color-pink-950: hsl(315 100% 95.9%);
203
- --sl-color-rose-50: hsl(342.3 62.9% 21.5%);
204
- --sl-color-rose-100: hsl(342.8 68.9% 34.2%);
205
- --sl-color-rose-200: hsl(344.8 72.6% 37.3%);
206
- --sl-color-rose-300: hsl(346.9 75.8% 43.7%);
207
- --sl-color-rose-400: hsl(348.2 80.1% 52.7%);
208
- --sl-color-rose-500: hsl(350.4 94.8% 57.5%);
209
- --sl-color-rose-600: hsl(351.2 100% 58.1%);
210
- --sl-color-rose-700: hsl(352.3 100% 78.1%);
211
- --sl-color-rose-800: hsl(352 100% 86.2%);
212
- --sl-color-rose-900: hsl(354.5 100% 90.7%);
213
- --sl-color-rose-950: hsl(353.3 100% 95.7%);
214
- --sl-color-primary-950: #f0f9ff;
215
- --sl-color-primary-900: #e0f2fe;
216
- --sl-color-primary-800: #bae6fd;
217
- --sl-color-primary-700: #93c5fd;
218
- --sl-color-primary-600: #60a5fa;
219
- --sl-color-primary-500: #3b82f6;
220
- --sl-color-primary-400: #2563eb;
221
- --sl-color-primary-300: #1d4ed8;
222
- --sl-color-primary-200: #1e40af;
223
- --sl-color-primary-100: #1e3a8a;
224
- --sl-color-primary-50: #172554;
225
- --sl-color-success-950: #f0fdf4;
226
- --sl-color-success-900: #dcfce7;
227
- --sl-color-success-800: #bbf7d0;
228
- --sl-color-success-700: #86efac;
229
- --sl-color-success-600: #4ade80;
230
- --sl-color-success-500: #22c55e;
231
- --sl-color-success-400: #16a34a;
232
- --sl-color-success-300: #15803d;
233
- --sl-color-success-200: #166534;
234
- --sl-color-success-100: #14532d;
235
- --sl-color-success-50: #052e16;
236
- --sl-color-warning-950: #fffbeb;
237
- --sl-color-warning-900: #fef3c7;
238
- --sl-color-warning-800: #fde68a;
239
- --sl-color-warning-700: #fcd34d;
240
- --sl-color-warning-600: #fbbf24;
241
- --sl-color-warning-500: #f59e0b;
242
- --sl-color-warning-400: #d97706;
243
- --sl-color-warning-300: #b45309;
244
- --sl-color-warning-200: #92400e;
245
- --sl-color-warning-100: #78350f;
246
- --sl-color-warning-50: #451a03;
247
- --sl-color-danger-950: #fef2f2;
248
- --sl-color-danger-900: #fee2e2;
249
- --sl-color-danger-800: #fecaca;
250
- --sl-color-danger-700: #fca5a5;
251
- --sl-color-danger-600: #f87171;
252
- --sl-color-danger-500: #ef4444;
253
- --sl-color-danger-400: #dc2626;
254
- --sl-color-danger-300: #b91c1c;
255
- --sl-color-danger-200: #991b1b;
256
- --sl-color-danger-100: #7f1d1d;
257
- --sl-color-danger-50: #450a0a;
258
- --sl-color-neutral-950: #fafafa;
259
- --sl-color-neutral-900: #f4f4f5;
260
- --sl-color-neutral-800: #e4e4e7;
261
- --sl-color-neutral-700: #d4d4d8;
262
- --sl-color-neutral-600: #a1a1aa;
263
- --sl-color-neutral-500: #71717a;
264
- --sl-color-neutral-400: #71717a;
265
- --sl-color-neutral-300: #52525b;
266
- --sl-color-neutral-200: #3f3f46;
267
- --sl-color-neutral-100: #27272a;
268
- --sl-color-neutral-50: #18181b;
269
- --sl-color-neutral-0: #09090b;
270
- --sl-color-neutral-1000: hsl(0, 0%, 100%);
271
- --sl-border-base: var(--be-border-base);
272
- --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
273
- --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
274
- --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
275
- --sl-border-radius-x-large: var( --sl-border-base );
276
- --sl-border-radius-circle: 50%;
277
- --sl-border-radius-pill: 9999px;
278
- --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
279
- --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
280
- --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
281
- --sl-shadow-large: var( --be-shadow-large, 0 2px 8px rgb(0 0 0 / 24%) );
282
- --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
283
- --sl-spacing-base: var(--be-spacing-base, 1rem);
284
- --sl-spacing-3x-small: calc( var(--sl-spacing-base) * 0.125 );
285
- --sl-spacing-2x-small: calc( var(--sl-spacing-base) * 0.25 );
286
- --sl-spacing-1_5x-small: calc( var(--sl-spacing-base) * 0.375 );
287
- --sl-spacing-x-small: calc( var(--sl-spacing-base) * 0.5 );
288
- --sl-spacing-small: calc( var(--sl-spacing-base) * 0.75 );
289
- --sl-spacing-medium: var(--sl-spacing-base);
290
- --sl-spacing-large: calc( var(--sl-spacing-base) * 1.25 );
291
- --sl-spacing-x-large: calc( var(--sl-spacing-base) * 1.75 );
292
- --sl-spacing-2x-large: calc( var(--sl-spacing-base) * 2.25 );
293
- --sl-spacing-3x-large: calc( var(--sl-spacing-base) * 3 );
294
- --sl-spacing-4x-large: calc( var(--sl-spacing-base) * 4.5 );
295
- --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
296
- --indent-size: var(--sl-spacing-large);
297
- --sl-transition-x-slow: 1000ms;
298
- --sl-transition-slow: 500ms;
299
- --sl-transition-medium: 250ms;
300
- --sl-transition-fast: 150ms;
301
- --sl-transition-x-fast: 50ms;
302
- --sl-font-mono: var( --be-font-mono, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace );
303
- --sl-font-sans: var( --be-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" );
304
- --sl-font-serif: var( --be-font-serif, Georgia, "Times New Roman", serif );
305
- --sl-font-size-base: var(--be-font-size-base, 1rem);
306
- --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
307
- --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
308
- --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
309
- --sl-font-size-medium: var(--sl-font-size-base);
310
- --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
311
- --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
312
- --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
313
- --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
314
- --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
315
- --sl-font-weight-light: 300;
316
- --sl-font-weight-normal: 400;
317
- --sl-font-weight-semibold: 500;
318
- --sl-font-weight-bold: 700;
319
- --sl-letter-spacing-denser: -0.03em;
320
- --sl-letter-spacing-dense: -0.015em;
321
- --sl-letter-spacing-normal: normal;
322
- --sl-letter-spacing-loose: 0.075em;
323
- --sl-letter-spacing-looser: 0.15em;
324
- --sl-line-height-base: 1;
325
- --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
326
- --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
327
- --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
328
- --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
329
- --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
330
- --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
331
- --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
332
- --sl-focus-ring-color: var(--sl-color-primary-700);
333
- --sl-focus-ring-style: solid;
334
- --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
335
- --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
336
- --sl-focus-ring-offset: 1px;
337
- --sl-button-font-size-small: var(--sl-font-size-x-small);
338
- --sl-button-font-size-medium: var(--sl-font-size-small);
339
- --sl-button-font-size-large: var(--sl-font-size-medium);
340
- --sl-input-height-base: 1rem;
341
- --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
342
- --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
343
- --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
344
- --sl-input-background-color: var(--sl-color-neutral-0);
345
- --sl-input-background-color-hover: var(--sl-input-background-color);
346
- --sl-input-background-color-focus: var(--sl-input-background-color);
347
- --sl-input-background-color-disabled: var(--sl-color-neutral-100);
348
- --sl-input-border-color: var(--sl-color-neutral-300);
349
- --sl-input-border-color-hover: var(--sl-color-neutral-400);
350
- --sl-input-border-color-focus: var(--sl-color-primary-500);
351
- --sl-input-border-color-disabled: var(--sl-color-neutral-300);
352
- --sl-input-border-width: 1px;
353
- --sl-input-required-content: "*";
354
- --sl-input-required-content-offset: -2px;
355
- --sl-input-required-content-color: var(--sl-input-label-color);
356
- --sl-input-border-radius-small: var(--sl-border-radius-medium);
357
- --sl-input-border-radius-medium: var(--sl-border-radius-medium);
358
- --sl-input-border-radius-large: var(--sl-border-radius-medium);
359
- --sl-input-font-family: var(--sl-font-sans);
360
- --sl-input-font-weight: var(--sl-font-weight-normal);
361
- --sl-input-font-size-small: var(--sl-font-size-small);
362
- --sl-input-font-size-medium: var(--sl-font-size-medium);
363
- --sl-input-font-size-large: var(--sl-font-size-large);
364
- --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
365
- --sl-input-color: var(--sl-color-neutral-700);
366
- --sl-input-color-hover: var(--sl-color-neutral-700);
367
- --sl-input-color-focus: var(--sl-color-neutral-700);
368
- --sl-input-color-disabled: var(--sl-color-neutral-900);
369
- --sl-input-icon-color: var(--sl-color-neutral-400);
370
- --sl-input-icon-color-hover: var(--sl-color-neutral-500);
371
- --sl-input-icon-color-focus: var(--sl-color-neutral-500);
372
- --sl-input-placeholder-color: var(--sl-color-neutral-400);
373
- --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
374
- --sl-input-spacing-small: var(--sl-spacing-small);
375
- --sl-input-spacing-medium: var(--sl-spacing-medium);
376
- --sl-input-spacing-large: var(--sl-spacing-large);
377
- --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
378
- --sl-input-focus-ring-offset: 0;
379
- --sl-input-filled-background-color: var(--sl-color-neutral-100);
380
- --sl-input-filled-background-color-hover: var( --sl-color-neutral-100 );
381
- --sl-input-filled-background-color-focus: var( --sl-color-neutral-100 );
382
- --sl-input-filled-background-color-disabled: var( --sl-color-neutral-100 );
383
- --sl-input-filled-color: var(--sl-color-neutral-800);
384
- --sl-input-filled-color-hover: var(--sl-color-neutral-800);
385
- --sl-input-filled-color-focus: var(--sl-color-neutral-700);
386
- --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
387
- --sl-input-label-font-size-small: var(--sl-font-size-small);
388
- --sl-input-label-font-size-medium: var(--sl-font-size-medium);
389
- --sl-input-label-font-size-large: var(--sl-font-size-large);
390
- --sl-input-label-color: inherit;
391
- --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
392
- --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
393
- --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
394
- --sl-input-help-text-color: var(--sl-color-neutral-500);
395
- --sl-toggle-size-small: 0.875rem;
396
- --sl-toggle-size-medium: 1.125rem;
397
- --sl-toggle-size-large: 1.375rem;
398
- --sl-overlay-background-color: hsla(0, 0%, 100%, 0.05);
399
- --sl-panel-background-color: var(--sl-color-neutral-0);
400
- --sl-panel-border-color: var(--sl-color-neutral-300);
401
- --sl-panel-border-width: 1px;
402
- --sl-tooltip-border-radius: var(--sl-border-radius-medium);
403
- --sl-tooltip-background-color: var(--sl-color-neutral-800);
404
- --sl-tooltip-color: var(--sl-color-neutral-0);
405
- --sl-tooltip-font-family: var(--sl-font-sans);
406
- --sl-tooltip-font-weight: var(--sl-font-weight-normal);
407
- --sl-tooltip-font-size: var(--sl-font-size-small);
408
- --sl-tooltip-line-height: var(--sl-line-height-dense);
409
- --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
410
- --sl-tooltip-arrow-size: 6px;
411
- --sl-z-index-drawer: 700;
412
- --sl-z-index-dialog: 800;
413
- --sl-z-index-dropdown: 900;
414
- --sl-z-index-toast: 950;
415
- --sl-z-index-tooltip: 1000;
416
- --td-footer-background-color: #09090b;
417
- --td-footer-color: #e4e4e7;
418
- --td-code-block-toolbar-cell-background-color: #09090b;
419
- --td-code-block-highlighted-background-color: #1e293b;
420
- --td-card-color: "inherit";
421
- --td-card-background-color: var(--sl-color-neutral-0);
422
- --td-card-background-hover-color: var(--sl-color-neutral-50);
423
- --td-card-border-color: rgba(255, 255, 255, 0.1);
424
- --td-card-box-shadow-1: rgba(0, 0, 0, 0.05);
425
- --td-card-box-shadow-1-y: 3px;
426
- --td-card-box-shadow-1-blur: 6px;
427
- --td-card-box-shadow-2: rgba(0, 0, 0, 0.1);
428
- --td-card-box-shadow-2-y: 8px;
429
- --td-card-box-shadow-2-blur: 15px;
430
- --td-card-hover-border-color: rgba(255, 255, 255, 0.2);
431
- --td-card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
432
- --td-card-hover-box-shadow-1-y: 5px;
433
- --td-card-hover-box-shadow-1-blur: 10px;
434
- --td-card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
435
- --td-card-hover-box-shadow-2-y: 15px;
436
- --td-card-hover-box-shadow-2-blur: 25px;
437
- --td-body-gradient-line-color: #27272a47;
438
- --td-editor-text-color-blue: hsl(221, 100%, 70%);
439
- --td-editor-text-color-purple: hsl(291, 100%, 65%);
440
- --td-editor-text-color-red: hsl(4, 100%, 63%);
441
- --td-editor-text-color-green: hsl(122, 100%, 34%);
442
- --td-editor-bg-color-blue: hsl(221, 100%, 70%, 0.2);
443
- --td-editor-bg-color-purple: hsl(291, 100%, 65%, 0.2);
444
- --td-editor-bg-color-red: hsl(4, 100%, 63%, 0.2);
445
- --td-editor-bg-color-green: hsl(122, 100%, 34%, 0.2);
446
- }
447
- @supports (scrollbar-gutter: stable) {
448
- .sl-scroll-lock {
449
- scrollbar-gutter: stable !important;
450
- overflow: hidden !important;
451
- }
452
- }
453
- @supports not (scrollbar-gutter: stable) {
454
- .sl-scroll-lock body {
455
- padding-right: var(--sl-scroll-lock-size) !important;
456
- overflow: hidden !important;
457
- }
458
- }
459
-
460
- /* src/styles/theme-light.css */
461
- :host,
462
- .theme-light {
463
- color-scheme: light;
464
- --sl-color-slate-50: #f8fafc;
465
- --sl-color-slate-100: #f1f5f9;
466
- --sl-color-slate-200: #e2e8f0;
467
- --sl-color-slate-300: #cbd5e1;
468
- --sl-color-slate-400: #94a3b8;
469
- --sl-color-slate-500: #64748b;
470
- --sl-color-slate-600: #475569;
471
- --sl-color-slate-700: #334155;
472
- --sl-color-slate-800: #1e293b;
473
- --sl-color-slate-900: #0f172a;
474
- --sl-color-slate-950: #020617;
475
- --sl-color-gray-50: hsl(0 0% 97.5%);
476
- --sl-color-gray-100: hsl(240 4.8% 95.9%);
477
- --sl-color-gray-200: hsl(240 5.9% 90%);
478
- --sl-color-gray-300: hsl(240 4.9% 83.9%);
479
- --sl-color-gray-400: hsl(240 5% 64.9%);
480
- --sl-color-gray-500: hsl(240 3.8% 46.1%);
481
- --sl-color-gray-600: hsl(240 5.2% 33.9%);
482
- --sl-color-gray-700: hsl(240 5.3% 26.1%);
483
- --sl-color-gray-800: hsl(240 3.7% 15.9%);
484
- --sl-color-gray-900: hsl(240 5.9% 10%);
485
- --sl-color-gray-950: hsl(240 7.3% 8%);
486
- --sl-color-red-50: hsl(0 85.7% 97.3%);
487
- --sl-color-red-100: hsl(0 93.3% 94.1%);
488
- --sl-color-red-200: hsl(0 96.3% 89.4%);
489
- --sl-color-red-300: hsl(0 93.5% 81.8%);
490
- --sl-color-red-400: hsl(0 90.6% 70.8%);
491
- --sl-color-red-500: hsl(0 84.2% 60.2%);
492
- --sl-color-red-600: hsl(0 72.2% 50.6%);
493
- --sl-color-red-700: hsl(0 73.7% 41.8%);
494
- --sl-color-red-800: hsl(0 70% 35.3%);
495
- --sl-color-red-900: hsl(0 62.8% 30.6%);
496
- --sl-color-red-950: hsl(0 60% 19.6%);
497
- --sl-color-orange-50: hsl(33.3 100% 96.5%);
498
- --sl-color-orange-100: hsl(34.3 100% 91.8%);
499
- --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
500
- --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
501
- --sl-color-orange-400: hsl(27 96% 61%);
502
- --sl-color-orange-500: hsl(24.6 95% 53.1%);
503
- --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
504
- --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
505
- --sl-color-orange-800: hsl(15 79.1% 33.7%);
506
- --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
507
- --sl-color-orange-950: hsl(15.2 69.1% 19%);
508
- --sl-color-amber-50: hsl(48 100% 96.1%);
509
- --sl-color-amber-100: hsl(48 96.5% 88.8%);
510
- --sl-color-amber-200: hsl(48 96.6% 76.7%);
511
- --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
512
- --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
513
- --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
514
- --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
515
- --sl-color-amber-700: hsl(26 90.5% 37.1%);
516
- --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
517
- --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
518
- --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
519
- --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
520
- --sl-color-yellow-100: hsl(54.9 96.7% 88%);
521
- --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
522
- --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
523
- --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
524
- --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
525
- --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
526
- --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
527
- --sl-color-yellow-800: hsl(31.8 81% 28.8%);
528
- --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
529
- --sl-color-yellow-950: hsl(33.1 69% 13.9%);
530
- --sl-color-lime-50: hsl(78.3 92% 95.1%);
531
- --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
532
- --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
533
- --sl-color-lime-300: hsl(82 84.5% 67.1%);
534
- --sl-color-lime-400: hsl(82.7 78% 55.5%);
535
- --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
536
- --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
537
- --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
538
- --sl-color-lime-800: hsl(86.3 69% 22.7%);
539
- --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
540
- --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
541
- --sl-color-green-50: hsl(138.5 76.5% 96.7%);
542
- --sl-color-green-100: hsl(140.6 84.2% 92.5%);
543
- --sl-color-green-200: hsl(141 78.9% 85.1%);
544
- --sl-color-green-300: hsl(141.7 76.6% 73.1%);
545
- --sl-color-green-400: hsl(141.9 69.2% 58%);
546
- --sl-color-green-500: hsl(142.1 70.6% 45.3%);
547
- --sl-color-green-600: hsl(142.1 76.2% 36.3%);
548
- --sl-color-green-700: hsl(142.4 71.8% 29.2%);
549
- --sl-color-green-800: hsl(142.8 64.2% 24.1%);
550
- --sl-color-green-900: hsl(143.8 61.2% 20.2%);
551
- --sl-color-green-950: hsl(144.3 60.7% 12%);
552
- --sl-color-emerald-50: hsl(151.8 81% 95.9%);
553
- --sl-color-emerald-100: hsl(149.3 80.4% 90%);
554
- --sl-color-emerald-200: hsl(152.4 76% 80.4%);
555
- --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
556
- --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
557
- --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
558
- --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
559
- --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
560
- --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
561
- --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
562
- --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
563
- --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
564
- --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
565
- --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
566
- --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
567
- --sl-color-teal-400: hsl(172.5 66% 50.4%);
568
- --sl-color-teal-500: hsl(173.4 80.4% 40%);
569
- --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
570
- --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
571
- --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
572
- --sl-color-teal-900: hsl(175.9 60.8% 19%);
573
- --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
574
- --sl-color-cyan-50: hsl(183.2 100% 96.3%);
575
- --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
576
- --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
577
- --sl-color-cyan-300: hsl(187 92.4% 69%);
578
- --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
579
- --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
580
- --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
581
- --sl-color-cyan-700: hsl(192.9 82.3% 31%);
582
- --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
583
- --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
584
- --sl-color-cyan-950: hsl(196.8 61% 16.1%);
585
- --sl-color-sky-50: hsl(204 100% 97.1%);
586
- --sl-color-sky-100: hsl(204 93.8% 93.7%);
587
- --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
588
- --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
589
- --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
590
- --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
591
- --sl-color-sky-600: hsl(200.4 98% 39.4%);
592
- --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
593
- --sl-color-sky-800: hsl(201 90% 27.5%);
594
- --sl-color-sky-900: hsl(202 80.3% 23.9%);
595
- --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
596
- --sl-color-blue-50: hsl(213.8 100% 96.9%);
597
- --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
598
- --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
599
- --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
600
- --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
601
- --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
602
- --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
603
- --sl-color-blue-700: hsl(224.3 76.3% 48%);
604
- --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
605
- --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
606
- --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
607
- --sl-color-indigo-50: hsl(225.9 100% 96.7%);
608
- --sl-color-indigo-100: hsl(226.5 100% 93.9%);
609
- --sl-color-indigo-200: hsl(228 96.5% 88.8%);
610
- --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
611
- --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
612
- --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
613
- --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
614
- --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
615
- --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
616
- --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
617
- --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
618
- --sl-color-violet-50: hsl(250 100% 97.6%);
619
- --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
620
- --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
621
- --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
622
- --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
623
- --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
624
- --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
625
- --sl-color-violet-700: hsl(263.4 70% 50.4%);
626
- --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
627
- --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
628
- --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
629
- --sl-color-purple-50: hsl(270 100% 98%);
630
- --sl-color-purple-100: hsl(268.7 100% 95.5%);
631
- --sl-color-purple-200: hsl(268.6 100% 91.8%);
632
- --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
633
- --sl-color-purple-400: hsl(270 95.2% 75.3%);
634
- --sl-color-purple-500: hsl(270.7 91% 65.1%);
635
- --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
636
- --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
637
- --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
638
- --sl-color-purple-900: hsl(273.6 65.6% 32%);
639
- --sl-color-purple-950: hsl(276 59.5% 16.5%);
640
- --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
641
- --sl-color-fuchsia-100: hsl(287 100% 95.5%);
642
- --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
643
- --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
644
- --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
645
- --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
646
- --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
647
- --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
648
- --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
649
- --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
650
- --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
651
- --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
652
- --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
653
- --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
654
- --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
655
- --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
656
- --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
657
- --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
658
- --sl-color-pink-700: hsl(335.1 77.6% 42%);
659
- --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
660
- --sl-color-pink-900: hsl(335.9 69% 30.4%);
661
- --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
662
- --sl-color-rose-50: hsl(355.7 100% 97.3%);
663
- --sl-color-rose-100: hsl(355.6 100% 94.7%);
664
- --sl-color-rose-200: hsl(352.7 96.1% 90%);
665
- --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
666
- --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
667
- --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
668
- --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
669
- --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
670
- --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
671
- --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
672
- --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
673
- --sl-color-primary-50: #f0f9ff;
674
- --sl-color-primary-100: #e0f2fe;
675
- --sl-color-primary-200: #bae6fd;
676
- --sl-color-primary-300: #93c5fd;
677
- --sl-color-primary-400: #60a5fa;
678
- --sl-color-primary-500: #3b82f6;
679
- --sl-color-primary-600: #2563eb;
680
- --sl-color-primary-700: #1d4ed8;
681
- --sl-color-primary-800: #1e40af;
682
- --sl-color-primary-900: #1e3a8a;
683
- --sl-color-primary-950: #172554;
684
- --sl-color-success-50: #f0fdf4;
685
- --sl-color-success-100: #dcfce7;
686
- --sl-color-success-200: #bbf7d0;
687
- --sl-color-success-300: #86efac;
688
- --sl-color-success-400: #4ade80;
689
- --sl-color-success-500: #22c55e;
690
- --sl-color-success-600: #16a34a;
691
- --sl-color-success-700: #15803d;
692
- --sl-color-success-800: #166534;
693
- --sl-color-success-900: #14532d;
694
- --sl-color-success-950: #052e16;
695
- --sl-color-warning-50: #fffbeb;
696
- --sl-color-warning-100: #fef3c7;
697
- --sl-color-warning-200: #fde68a;
698
- --sl-color-warning-300: #fcd34d;
699
- --sl-color-warning-400: #fbbf24;
700
- --sl-color-warning-500: #f59e0b;
701
- --sl-color-warning-600: #d97706;
702
- --sl-color-warning-700: #b45309;
703
- --sl-color-warning-800: #92400e;
704
- --sl-color-warning-900: #78350f;
705
- --sl-color-warning-950: #451a03;
706
- --sl-color-danger-50: #fef2f2;
707
- --sl-color-danger-100: #fee2e2;
708
- --sl-color-danger-200: #fecaca;
709
- --sl-color-danger-300: #fca5a5;
710
- --sl-color-danger-400: #f87171;
711
- --sl-color-danger-500: #ef4444;
712
- --sl-color-danger-600: #dc2626;
713
- --sl-color-danger-700: #b91c1c;
714
- --sl-color-danger-800: #991b1b;
715
- --sl-color-danger-900: #7f1d1d;
716
- --sl-color-danger-950: #450a0a;
717
- --sl-color-neutral-50: #fafafa;
718
- --sl-color-neutral-100: #f4f4f5;
719
- --sl-color-neutral-200: #e4e4e7;
720
- --sl-color-neutral-300: #d4d4d8;
721
- --sl-color-neutral-400: #a1a1aa;
722
- --sl-color-neutral-500: #71717a;
723
- --sl-color-neutral-600: #52525b;
724
- --sl-color-neutral-700: #3f3f46;
725
- --sl-color-neutral-800: #27272a;
726
- --sl-color-neutral-900: #18181b;
727
- --sl-color-neutral-950: #09090b;
728
- --sl-color-neutral-0: #ffffff;
729
- --sl-color-neutral-1000: hsl(0, 0%, 0%);
730
- --sl-border-base: var(--be-border-base);
731
- --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
732
- --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
733
- --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
734
- --sl-border-radius-x-large: var( --sl-border-base );
735
- --sl-border-radius-circle: 50%;
736
- --sl-border-radius-pill: 9999px;
737
- --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
738
- --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
739
- --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
740
- --sl-shadow-large: var( --be-shadow-large, 0 2px 8px hsl(240 3.8% 46.1% / 12%) );
741
- --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
742
- --sl-spacing-base: var(--be-spacing-base, 1rem);
743
- --sl-spacing-3x-small: calc( var(--sl-spacing-base) * 0.125 );
744
- --sl-spacing-2x-small: calc( var(--sl-spacing-base) * 0.25 );
745
- --sl-spacing-1_5x-small: calc( var(--sl-spacing-base) * 0.375 );
746
- --sl-spacing-x-small: calc( var(--sl-spacing-base) * 0.5 );
747
- --sl-spacing-small: calc( var(--sl-spacing-base) * 0.75 );
748
- --sl-spacing-medium: var(--sl-spacing-base);
749
- --sl-spacing-large: calc( var(--sl-spacing-base) * 1.25 );
750
- --sl-spacing-x-large: calc( var(--sl-spacing-base) * 1.75 );
751
- --sl-spacing-2x-large: calc( var(--sl-spacing-base) * 2.25 );
752
- --sl-spacing-3x-large: calc( var(--sl-spacing-base) * 3 );
753
- --sl-spacing-4x-large: calc( var(--sl-spacing-base) * 4.5 );
754
- --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
755
- --indent-size: var(--sl-spacing-large);
756
- --sl-transition-x-slow: 1000ms;
757
- --sl-transition-slow: 500ms;
758
- --sl-transition-medium: 250ms;
759
- --sl-transition-fast: 150ms;
760
- --sl-transition-x-fast: 50ms;
761
- --sl-font-mono:
762
- SFMono-Regular,
763
- Consolas,
764
- "Liberation Mono",
765
- Menlo,
766
- monospace;
767
- --sl-font-sans: var( --be-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" );
768
- --sl-font-serif: var( --be-font-serif, Georgia, "Times New Roman", serif );
769
- --sl-font-size-base: var(--be-font-size-base, 1rem);
770
- --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
771
- --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
772
- --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
773
- --sl-font-size-medium: var(--sl-font-size-base);
774
- --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
775
- --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
776
- --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
777
- --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
778
- --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
779
- --sl-font-weight-light: 300;
780
- --sl-font-weight-normal: 400;
781
- --sl-font-weight-semibold: 500;
782
- --sl-font-weight-bold: 700;
783
- --sl-letter-spacing-denser: -0.03em;
784
- --sl-letter-spacing-dense: -0.015em;
785
- --sl-letter-spacing-normal: normal;
786
- --sl-letter-spacing-loose: 0.075em;
787
- --sl-letter-spacing-looser: 0.15em;
788
- --sl-line-height-base: 1;
789
- --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
790
- --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
791
- --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
792
- --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
793
- --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
794
- --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
795
- --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
796
- --sl-focus-ring-color: var(--sl-color-primary-600);
797
- --sl-focus-ring-style: solid;
798
- --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
799
- --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
800
- --sl-focus-ring-offset: 1px;
801
- --sl-button-font-size-small: var(--sl-font-size-x-small);
802
- --sl-button-font-size-medium: var(--sl-font-size-small);
803
- --sl-button-font-size-large: var(--sl-font-size-medium);
804
- --sl-input-height-base: 1rem;
805
- --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
806
- --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
807
- --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
808
- --sl-input-background-color: var(--sl-color-neutral-0);
809
- --sl-input-background-color-hover: var(--sl-input-background-color);
810
- --sl-input-background-color-focus: var(--sl-input-background-color);
811
- --sl-input-background-color-disabled: var(--sl-color-neutral-100);
812
- --sl-input-border-color: var(--sl-color-neutral-300);
813
- --sl-input-border-color-hover: var(--sl-color-neutral-400);
814
- --sl-input-border-color-focus: var(--sl-color-primary-500);
815
- --sl-input-border-color-disabled: var(--sl-color-neutral-300);
816
- --sl-input-border-width: 1px;
817
- --sl-input-required-content: "*";
818
- --sl-input-required-content-offset: -2px;
819
- --sl-input-required-content-color: var(--sl-input-label-color);
820
- --sl-input-border-radius-small: var(--sl-border-radius-medium);
821
- --sl-input-border-radius-medium: var(--sl-border-radius-medium);
822
- --sl-input-border-radius-large: var(--sl-border-radius-medium);
823
- --sl-input-font-family: var(--sl-font-sans);
824
- --sl-input-font-weight: var(--sl-font-weight-normal);
825
- --sl-input-font-size-small: var(--sl-font-size-small);
826
- --sl-input-font-size-medium: var(--sl-font-size-medium);
827
- --sl-input-font-size-large: var(--sl-font-size-large);
828
- --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
829
- --sl-input-color: var(--sl-color-neutral-700);
830
- --sl-input-color-hover: var(--sl-color-neutral-700);
831
- --sl-input-color-focus: var(--sl-color-neutral-700);
832
- --sl-input-color-disabled: var(--sl-color-neutral-900);
833
- --sl-input-icon-color: var(--sl-color-neutral-400);
834
- --sl-input-icon-color-hover: var(--sl-color-neutral-500);
835
- --sl-input-icon-color-focus: var(--sl-color-neutral-500);
836
- --sl-input-placeholder-color: var(--sl-color-neutral-400);
837
- --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
838
- --sl-input-spacing-small: var(--sl-spacing-small);
839
- --sl-input-spacing-medium: var(--sl-spacing-medium);
840
- --sl-input-spacing-large: var(--sl-spacing-large);
841
- --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
842
- --sl-input-focus-ring-offset: 0;
843
- --sl-input-filled-background-color: var(--sl-color-neutral-100);
844
- --sl-input-filled-background-color-hover: var( --sl-color-neutral-100 );
845
- --sl-input-filled-background-color-focus: var( --sl-color-neutral-100 );
846
- --sl-input-filled-background-color-disabled: var( --sl-color-neutral-100 );
847
- --sl-input-filled-color: var(--sl-color-neutral-800);
848
- --sl-input-filled-color-hover: var(--sl-color-neutral-800);
849
- --sl-input-filled-color-focus: var(--sl-color-neutral-700);
850
- --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
851
- --sl-input-label-font-size-small: var(--sl-font-size-small);
852
- --sl-input-label-font-size-medium: var(--sl-font-size-medium);
853
- --sl-input-label-font-size-large: var(--sl-font-size-large);
854
- --sl-input-label-color: inherit;
855
- --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
856
- --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
857
- --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
858
- --sl-input-help-text-color: var(--sl-color-neutral-500);
859
- --sl-toggle-size-small: 0.875rem;
860
- --sl-toggle-size-medium: 1.125rem;
861
- --sl-toggle-size-large: 1.375rem;
862
- --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
863
- --sl-panel-background-color: var(--sl-color-neutral-0);
864
- --sl-panel-border-color: var(--sl-color-neutral-300);
865
- --sl-panel-border-width: 1px;
866
- --sl-tooltip-border-radius: var(--sl-border-radius-medium);
867
- --sl-tooltip-background-color: var(--sl-color-neutral-800);
868
- --sl-tooltip-color: var(--sl-color-neutral-0);
869
- --sl-tooltip-font-family: var(--sl-font-sans);
870
- --sl-tooltip-font-weight: var(--sl-font-weight-normal);
871
- --sl-tooltip-font-size: var(--sl-font-size-small);
872
- --sl-tooltip-line-height: var(--sl-line-height-dense);
873
- --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
874
- --sl-tooltip-arrow-size: 6px;
875
- --sl-z-index-drawer: 700;
876
- --sl-z-index-dialog: 800;
877
- --sl-z-index-dropdown: 900;
878
- --sl-z-index-toast: 950;
879
- --sl-z-index-tooltip: 1000;
880
- --td-footer-background-color: #09090b;
881
- --td-footer-color: #e4e4e7;
882
- --td-code-block-toolbar-cell-background-color: #e2e8f0;
883
- --td-code-block-highlighted-background-color: #dbeafe;
884
- --td-card-color: "inherit";
885
- --td-card-background-color: var(--sl-color-neutral-0);
886
- --td-card-background-hover-color: var(--sl-color-neutral-50);
887
- --td-card-border-color: rgba(24, 24, 27, 0.08);
888
- --td-card-box-shadow-1: rgba(24, 24, 27, 0.02);
889
- --td-card-box-shadow-1-y: 3px;
890
- --td-card-box-shadow-1-blur: 6px;
891
- --td-card-box-shadow-2: rgba(24, 24, 27, 0.04);
892
- --td-card-box-shadow-2-y: 2px;
893
- --td-card-box-shadow-2-blur: 7px;
894
- --td-card-hover-border-color: rgba(24, 24, 27, 0.15);
895
- --td-card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
896
- --td-card-hover-box-shadow-1-y: 3px;
897
- --td-card-hover-box-shadow-1-blur: 6px;
898
- --td-card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
899
- --td-card-hover-box-shadow-2-y: 8px;
900
- --td-card-hover-box-shadow-2-blur: 15px;
901
- --td-body-gradient-line-color: #ffffff;
902
- --td-editor-text-color-blue: hsl(221, 100%, 50%);
903
- --td-editor-text-color-purple: hsl(291, 100%, 39%);
904
- --td-editor-text-color-red: hsl(4, 100%, 40%);
905
- --td-editor-text-color-green: hsl(122, 100%, 23%);
906
- --td-editor-bg-color-blue: hsl(221, 100%, 50%, 0.1);
907
- --td-editor-bg-color-purple: hsl(291, 100%, 39%, 0.1);
908
- --td-editor-bg-color-red: hsl(4, 100%, 40%, 0.1);
909
- --td-editor-bg-color-green: hsl(122, 100%, 23%, 0.1);
910
- }
911
- @supports (scrollbar-gutter: stable) {
912
- .sl-scroll-lock {
913
- scrollbar-gutter: stable !important;
914
- overflow: hidden !important;
915
- }
916
- }
917
- @supports not (scrollbar-gutter: stable) {
918
- .sl-scroll-lock body {
919
- padding-right: var(--sl-scroll-lock-size) !important;
920
- overflow: hidden !important;
921
- }
922
- }
923
-
924
- /* src/styles/theme-settings.css */
925
- .theme-settings {
926
- --be-border-base: 1rem;
927
- --be-font-sans: "Inter", sans-serif;
928
- --be-font-serif:
929
- Georgia,
930
- "Times New Roman",
931
- serif;
932
- --be-font-mono:
933
- Menlo,
934
- Monaco,
935
- "Courier New",
936
- monospace;
937
- --be-focus-ring-width: 1px;
938
- --be-shadow-large: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
939
- --be-spacing-base: 1rem;
940
- --be-font-size-base: 1rem;
941
- }
942
-
943
1
  /* src/styles/body-normalize.css */
944
2
  .be-article {
945
3
  --toggle-size: var(--sl-toggle-size-small);
@@ -1222,6 +280,9 @@
1222
280
  width: 0;
1223
281
  height: 100%;
1224
282
  }
283
+ nav.disabled {
284
+ display: none;
285
+ }
1225
286
  nav.shown {
1226
287
  opacity: 1;
1227
288
  width: var(--settings-panel-width);
@@ -1289,6 +350,18 @@
1289
350
  }
1290
351
  }
1291
352
  }
353
+ @supports (scrollbar-gutter: stable) {
354
+ .sl-scroll-lock {
355
+ scrollbar-gutter: stable !important;
356
+ overflow: hidden !important;
357
+ }
358
+ }
359
+ @supports not (scrollbar-gutter: stable) {
360
+ .sl-scroll-lock body {
361
+ padding-right: var(--sl-scroll-lock-size) !important;
362
+ overflow: hidden !important;
363
+ }
364
+ }
1292
365
 
1293
366
  /* src/styles/misc.css */
1294
367
  .divider__drawer {
@@ -2256,30 +1329,6 @@ sl-progress-bar {
2256
1329
  --height: 3px;
2257
1330
  }
2258
1331
 
2259
- /* src/styles/color-dialog.css */
2260
- .color-dialog {
2261
- .color-button {
2262
- cursor: pointer;
2263
- width: 1em;
2264
- height: 1em;
2265
- border-radius: 50%;
2266
- border: 1px solid var(--sl-color-neutral-400);
2267
- display: flex;
2268
- align-items: center;
2269
- justify-content: center;
2270
- }
2271
- .color-button:hover {
2272
- scale: 1.3;
2273
- }
2274
- .color-button.selected {
2275
- outline: 1px solid var(--sl-color-neutral-900);
2276
- outline-offset: 2px;
2277
- }
2278
- .color-button.selected:hover {
2279
- z-index: 2;
2280
- }
2281
- }
2282
-
2283
1332
  /* src/styles/icon.css */
2284
1333
  .sl-icon {
2285
1334
  white-space: normal;
@@ -2709,7 +1758,7 @@ sl-progress-bar {
2709
1758
  }
2710
1759
 
2711
1760
  /* src/styles/article-image-box.css */
2712
- article {
1761
+ .be-article {
2713
1762
  .image-box-wrapper {
2714
1763
  margin-top: var(--sl-spacing-large);
2715
1764
  margin-bottom: var(--sl-spacing-large);
@@ -2749,7 +1798,7 @@ article {
2749
1798
  }
2750
1799
 
2751
1800
  /* src/styles/article-layout-grid.css */
2752
- article {
1801
+ .be-article {
2753
1802
  .layout-grid-wrapper {
2754
1803
  margin-top: var(--sl-spacing-large);
2755
1804
  margin-bottom: var(--sl-spacing-large);
@@ -2856,7 +1905,7 @@ article {
2856
1905
  }
2857
1906
 
2858
1907
  /* src/styles/article-callout-box.css */
2859
- article {
1908
+ .be-article {
2860
1909
  .callout-box-wrapper {
2861
1910
  position: relative;
2862
1911
  margin-top: var(--sl-spacing-large);
@@ -2918,7 +1967,7 @@ article {
2918
1967
  }
2919
1968
 
2920
1969
  /* src/styles/article-multiple-option-question.css */
2921
- article {
1970
+ .be-article {
2922
1971
  .multiple-option-question-wrapper {
2923
1972
  position: relative;
2924
1973
  margin-top: var(--sl-spacing-large);
@@ -2970,30 +2019,30 @@ article {
2970
2019
  }
2971
2020
  }
2972
2021
  &.correct {
2973
- border-color: var(--sl-color-green-300);
2974
- background-color: var(--sl-color-green-50);
2022
+ border-color: var(--sl-color-success-300);
2023
+ background-color: var(--sl-color-success-50);
2975
2024
  .title,
2976
2025
  .controls {
2977
- color: var(--sl-color-green-500);
2026
+ color: var(--sl-color-success-500);
2978
2027
  sl-button::part(base) {
2979
- color: var(--sl-color-green-400);
2028
+ color: var(--sl-color-success-400);
2980
2029
  }
2981
2030
  sl-button::part(base):hover {
2982
- color: var(--sl-color-green-500);
2031
+ color: var(--sl-color-success-500);
2983
2032
  }
2984
2033
  }
2985
2034
  }
2986
2035
  &.incorrect {
2987
- border-color: var(--sl-color-red-300);
2988
- background-color: var(--sl-color-red-50);
2036
+ border-color: var(--sl-color-danger-300);
2037
+ background-color: var(--sl-color-danger-50);
2989
2038
  .title,
2990
2039
  .controls {
2991
- color: var(--sl-color-red-500);
2040
+ color: var(--sl-color-danger-500);
2992
2041
  sl-button::part(base) {
2993
- color: var(--sl-color-red-400);
2042
+ color: var(--sl-color-danger-400);
2994
2043
  }
2995
2044
  sl-button::part(base):hover {
2996
- color: var(--sl-color-red-500);
2045
+ color: var(--sl-color-danger-500);
2997
2046
  }
2998
2047
  }
2999
2048
  }
@@ -3017,7 +2066,7 @@ article {
3017
2066
  }
3018
2067
 
3019
2068
  /* src/styles/article-short-answer-question.css */
3020
- article {
2069
+ .be-article {
3021
2070
  .short-answer-question-wrapper {
3022
2071
  position: relative;
3023
2072
  margin-top: var(--sl-spacing-large);
@@ -3051,10 +2100,10 @@ article {
3051
2100
  padding-bottom: var(--sl-spacing-small);
3052
2101
  border: 1px solid var(--sl-color-neutral-300);
3053
2102
  border-radius: var(--sl-border-radius-medium);
3054
- border-color: var(--sl-color-green-300);
3055
- background-color: var(--sl-color-green-50);
2103
+ border-color: var(--sl-color-success-300);
2104
+ background-color: var(--sl-color-success-50);
3056
2105
  .title {
3057
- color: var(--sl-color-green-500);
2106
+ color: var(--sl-color-success-500);
3058
2107
  display: flex;
3059
2108
  flex-direction: row;
3060
2109
  align-items: center;
@@ -3074,7 +2123,7 @@ article {
3074
2123
  }
3075
2124
 
3076
2125
  /* src/styles/article-matching-question.css */
3077
- article {
2126
+ .be-article {
3078
2127
  .matching-question-wrapper {
3079
2128
  position: relative;
3080
2129
  margin-top: var(--sl-spacing-large);
@@ -3112,12 +2161,12 @@ article {
3112
2161
  display: flex;
3113
2162
  flex-flow: row;
3114
2163
  justify-content: end;
3115
- color: var(--sl-color-red-500);
2164
+ color: var(--sl-color-danger-500);
3116
2165
  sl-button::part(base) {
3117
- color: var(--sl-color-red-400);
2166
+ color: var(--sl-color-danger-400);
3118
2167
  }
3119
2168
  sl-button::part(base):hover {
3120
- color: var(--sl-color-red-500);
2169
+ color: var(--sl-color-danger-500);
3121
2170
  }
3122
2171
  }
3123
2172
  .matching-question-prompt-question-item {
@@ -3136,39 +2185,41 @@ article {
3136
2185
  .controls {
3137
2186
  position: absolute;
3138
2187
  top: calc(50% - 20px);
3139
- right: -46px;
2188
+ right: -32px;
3140
2189
  display: flex;
3141
2190
  flex-direction: row;
3142
- gap: var(--sl-spacing-small);
3143
2191
  z-index: 10;
2192
+ sl-button::part(base) {
2193
+ padding-inline: var(--sl-spacing-x-small);
2194
+ }
3144
2195
  }
3145
2196
  &.correct {
3146
- border-color: var(--sl-color-green-300);
3147
- background-color: var(--sl-color-green-50);
2197
+ border-color: var(--sl-color-success-300);
2198
+ background-color: var(--sl-color-success-50);
3148
2199
  padding-right: var(--sl-spacing-3x-large);
3149
2200
  .title,
3150
2201
  .controls {
3151
- color: var(--sl-color-green-500);
2202
+ color: var(--sl-color-success-500);
3152
2203
  sl-button::part(base) {
3153
- color: var(--sl-color-green-400);
2204
+ color: var(--sl-color-success-400);
3154
2205
  }
3155
2206
  sl-button::part(base):hover {
3156
- color: var(--sl-color-green-500);
2207
+ color: var(--sl-color-success-500);
3157
2208
  }
3158
2209
  }
3159
2210
  }
3160
2211
  &.incorrect {
3161
- border-color: var(--sl-color-red-300);
3162
- background-color: var(--sl-color-red-50);
2212
+ border-color: var(--sl-color-danger-300);
2213
+ background-color: var(--sl-color-danger-50);
3163
2214
  padding-right: var(--sl-spacing-3x-large);
3164
2215
  .title,
3165
2216
  .controls {
3166
- color: var(--sl-color-red-500);
2217
+ color: var(--sl-color-danger-500);
3167
2218
  sl-button::part(base) {
3168
- color: var(--sl-color-red-400);
2219
+ color: var(--sl-color-danger-400);
3169
2220
  }
3170
2221
  sl-button::part(base):hover {
3171
- color: var(--sl-color-red-500);
2222
+ color: var(--sl-color-danger-500);
3172
2223
  }
3173
2224
  }
3174
2225
  }
@@ -3192,7 +2243,7 @@ article {
3192
2243
  }
3193
2244
 
3194
2245
  /* src/styles/article-fill-in-the-blank-question.css */
3195
- article {
2246
+ .be-article {
3196
2247
  --space-highlight-border-width: 3px;
3197
2248
  .fill-in-the-blank-question-wrapper {
3198
2249
  position: relative;
@@ -3250,8 +2301,8 @@ article {
3250
2301
  border-width: 1px;
3251
2302
  border-style: solid;
3252
2303
  border-radius: var(--sl-border-radius-small);
3253
- border-color: var(--sl-color-green-300);
3254
- background-color: var(--sl-color-green-50);
2304
+ border-color: var(--sl-color-success-300);
2305
+ background-color: var(--sl-color-success-50);
3255
2306
  padding-left: calc(var(--sl-spacing-2x-small));
3256
2307
  padding-right: var(--sl-spacing-2x-small);
3257
2308
  font-family: var(--sl-font-mono), monospace;
@@ -3266,7 +2317,7 @@ article {
3266
2317
  }
3267
2318
 
3268
2319
  /* src/styles/article-journal-entry-question.css */
3269
- article {
2320
+ .be-article {
3270
2321
  .journal-entry-question-wrapper {
3271
2322
  position: relative;
3272
2323
  margin-top: var(--sl-spacing-large);
@@ -3305,12 +2356,12 @@ article {
3305
2356
  display: flex;
3306
2357
  flex-flow: row;
3307
2358
  justify-content: end;
3308
- color: var(--sl-color-red-500);
2359
+ color: var(--sl-color-danger-500);
3309
2360
  sl-button::part(base) {
3310
- color: var(--sl-color-red-400);
2361
+ color: var(--sl-color-danger-400);
3311
2362
  }
3312
2363
  sl-button::part(base):hover {
3313
- color: var(--sl-color-red-500);
2364
+ color: var(--sl-color-danger-500);
3314
2365
  }
3315
2366
  }
3316
2367
  .journal-entry-question-prompt-question-item {
@@ -3338,32 +2389,32 @@ article {
3338
2389
  }
3339
2390
  }
3340
2391
  &.correct {
3341
- border-color: var(--sl-color-green-300);
3342
- background-color: var(--sl-color-green-50);
2392
+ border-color: var(--sl-color-success-300);
2393
+ background-color: var(--sl-color-success-50);
3343
2394
  padding-right: var(--sl-spacing-3x-large);
3344
2395
  .title,
3345
2396
  .controls {
3346
- color: var(--sl-color-green-500);
2397
+ color: var(--sl-color-success-500);
3347
2398
  sl-button::part(base) {
3348
- color: var(--sl-color-green-400);
2399
+ color: var(--sl-color-success-400);
3349
2400
  }
3350
2401
  sl-button::part(base):hover {
3351
- color: var(--sl-color-green-500);
2402
+ color: var(--sl-color-success-500);
3352
2403
  }
3353
2404
  }
3354
2405
  }
3355
2406
  &.incorrect {
3356
- border-color: var(--sl-color-red-300);
3357
- background-color: var(--sl-color-red-50);
2407
+ border-color: var(--sl-color-danger-300);
2408
+ background-color: var(--sl-color-danger-50);
3358
2409
  padding-right: var(--sl-spacing-3x-large);
3359
2410
  .title,
3360
2411
  .controls {
3361
- color: var(--sl-color-red-500);
2412
+ color: var(--sl-color-danger-500);
3362
2413
  sl-button::part(base) {
3363
- color: var(--sl-color-red-400);
2414
+ color: var(--sl-color-danger-400);
3364
2415
  }
3365
2416
  sl-button::part(base):hover {
3366
- color: var(--sl-color-red-500);
2417
+ color: var(--sl-color-danger-500);
3367
2418
  }
3368
2419
  }
3369
2420
  }
@@ -3390,7 +2441,7 @@ article {
3390
2441
  }
3391
2442
 
3392
2443
  /* src/styles/article-financial-statement-question.css */
3393
- article {
2444
+ .be-article {
3394
2445
  .financial-statement-question-wrapper {
3395
2446
  position: relative;
3396
2447
  margin-top: var(--sl-spacing-large);
@@ -3436,7 +2487,7 @@ article {
3436
2487
  }
3437
2488
 
3438
2489
  /* src/styles/article-essay-question.css */
3439
- article {
2490
+ .be-article {
3440
2491
  .essay-question-wrapper {
3441
2492
  position: relative;
3442
2493
  margin-top: var(--sl-spacing-large);
@@ -3493,7 +2544,7 @@ article {
3493
2544
  }
3494
2545
 
3495
2546
  /* src/styles/article-simulation-question.css */
3496
- article {
2547
+ .be-article {
3497
2548
  .simulation-question-wrapper {
3498
2549
  position: relative;
3499
2550
  margin-top: var(--sl-spacing-large);