@examind/block-editor 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +23 -535
  2. package/dist/index.d.mts +13 -4
  3. package/dist/index.d.ts +13 -4
  4. package/dist/index.js +881 -186
  5. package/dist/index.mjs +881 -187
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,527 +1,3 @@
1
- /* src/styles/theme-dark.css */
2
- :host,
3
- .theme-dark {
4
- color-scheme: dark;
5
- --sl-color-primary-950: #f0f9ff;
6
- --sl-color-primary-900: #e0f2fe;
7
- --sl-color-primary-800: #bae6fd;
8
- --sl-color-primary-700: #93c5fd;
9
- --sl-color-primary-600: #60a5fa;
10
- --sl-color-primary-500: #3b82f6;
11
- --sl-color-primary-400: #2563eb;
12
- --sl-color-primary-300: #1d4ed8;
13
- --sl-color-primary-200: #1e40af;
14
- --sl-color-primary-100: #1e3a8a;
15
- --sl-color-primary-50: #172554;
16
- --sl-color-success-950: #f0fdf4;
17
- --sl-color-success-900: #dcfce7;
18
- --sl-color-success-800: #bbf7d0;
19
- --sl-color-success-700: #86efac;
20
- --sl-color-success-600: #4ade80;
21
- --sl-color-success-500: #22c55e;
22
- --sl-color-success-400: #16a34a;
23
- --sl-color-success-300: #15803d;
24
- --sl-color-success-200: #166534;
25
- --sl-color-success-100: #14532d;
26
- --sl-color-success-50: #052e16;
27
- --sl-color-warning-950: #fffbeb;
28
- --sl-color-warning-900: #fef3c7;
29
- --sl-color-warning-800: #fde68a;
30
- --sl-color-warning-700: #fcd34d;
31
- --sl-color-warning-600: #fbbf24;
32
- --sl-color-warning-500: #f59e0b;
33
- --sl-color-warning-400: #d97706;
34
- --sl-color-warning-300: #b45309;
35
- --sl-color-warning-200: #92400e;
36
- --sl-color-warning-100: #78350f;
37
- --sl-color-warning-50: #451a03;
38
- --sl-color-danger-950: #fef2f2;
39
- --sl-color-danger-900: #fee2e2;
40
- --sl-color-danger-800: #fecaca;
41
- --sl-color-danger-700: #fca5a5;
42
- --sl-color-danger-600: #f87171;
43
- --sl-color-danger-500: #ef4444;
44
- --sl-color-danger-400: #dc2626;
45
- --sl-color-danger-300: #b91c1c;
46
- --sl-color-danger-200: #991b1b;
47
- --sl-color-danger-100: #7f1d1d;
48
- --sl-color-danger-50: #450a0a;
49
- --sl-color-neutral-950: #fafafa;
50
- --sl-color-neutral-900: #f4f4f5;
51
- --sl-color-neutral-800: #e4e4e7;
52
- --sl-color-neutral-700: #d4d4d8;
53
- --sl-color-neutral-600: #a1a1aa;
54
- --sl-color-neutral-500: #71717a;
55
- --sl-color-neutral-400: #71717a;
56
- --sl-color-neutral-300: #52525b;
57
- --sl-color-neutral-200: #3f3f46;
58
- --sl-color-neutral-100: #27272a;
59
- --sl-color-neutral-50: #18181b;
60
- --sl-color-neutral-0: #09090b;
61
- --sl-color-neutral-1000: hsl(0, 0%, 100%);
62
- --sl-border-base: var(--be-border-base);
63
- --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
64
- --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
65
- --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
66
- --sl-border-radius-x-large: var( --sl-border-base );
67
- --sl-border-radius-circle: 50%;
68
- --sl-border-radius-pill: 9999px;
69
- --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
70
- --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
71
- --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
72
- --sl-shadow-large: var( --be-shadow-large, 0 2px 8px rgb(0 0 0 / 24%) );
73
- --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
74
- --sl-spacing-base: var(--be-spacing-base, 1rem);
75
- --sl-spacing-3x-small: calc( var(--sl-spacing-base) * 0.125 );
76
- --sl-spacing-2x-small: calc( var(--sl-spacing-base) * 0.25 );
77
- --sl-spacing-1_5x-small: calc( var(--sl-spacing-base) * 0.375 );
78
- --sl-spacing-x-small: calc( var(--sl-spacing-base) * 0.5 );
79
- --sl-spacing-small: calc( var(--sl-spacing-base) * 0.75 );
80
- --sl-spacing-medium: var(--sl-spacing-base);
81
- --sl-spacing-large: calc( var(--sl-spacing-base) * 1.25 );
82
- --sl-spacing-x-large: calc( var(--sl-spacing-base) * 1.75 );
83
- --sl-spacing-2x-large: calc( var(--sl-spacing-base) * 2.25 );
84
- --sl-spacing-3x-large: calc( var(--sl-spacing-base) * 3 );
85
- --sl-spacing-4x-large: calc( var(--sl-spacing-base) * 4.5 );
86
- --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
87
- --indent-size: var(--sl-spacing-large);
88
- --sl-transition-x-slow: 1000ms;
89
- --sl-transition-slow: 500ms;
90
- --sl-transition-medium: 250ms;
91
- --sl-transition-fast: 150ms;
92
- --sl-transition-x-fast: 50ms;
93
- --sl-font-mono: var( --be-font-mono, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace );
94
- --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" );
95
- --sl-font-serif: var( --be-font-serif, Georgia, "Times New Roman", serif );
96
- --sl-font-size-base: var(--be-font-size-base, 1rem);
97
- --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
98
- --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
99
- --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
100
- --sl-font-size-medium: var(--sl-font-size-base);
101
- --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
102
- --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
103
- --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
104
- --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
105
- --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
106
- --sl-font-weight-light: 300;
107
- --sl-font-weight-normal: 400;
108
- --sl-font-weight-semibold: 500;
109
- --sl-font-weight-bold: 700;
110
- --sl-letter-spacing-denser: -0.03em;
111
- --sl-letter-spacing-dense: -0.015em;
112
- --sl-letter-spacing-normal: normal;
113
- --sl-letter-spacing-loose: 0.075em;
114
- --sl-letter-spacing-looser: 0.15em;
115
- --sl-line-height-base: 1;
116
- --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
117
- --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
118
- --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
119
- --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
120
- --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
121
- --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
122
- --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
123
- --sl-focus-ring-color: var(--sl-color-primary-700);
124
- --sl-focus-ring-style: solid;
125
- --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
126
- --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
127
- --sl-focus-ring-offset: 1px;
128
- --sl-button-font-size-small: var(--sl-font-size-x-small);
129
- --sl-button-font-size-medium: var(--sl-font-size-small);
130
- --sl-button-font-size-large: var(--sl-font-size-medium);
131
- --sl-input-height-base: 1rem;
132
- --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
133
- --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
134
- --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
135
- --sl-input-background-color: var(--sl-color-neutral-0);
136
- --sl-input-background-color-hover: var(--sl-input-background-color);
137
- --sl-input-background-color-focus: var(--sl-input-background-color);
138
- --sl-input-background-color-disabled: var(--sl-color-neutral-100);
139
- --sl-input-border-color: var(--sl-color-neutral-300);
140
- --sl-input-border-color-hover: var(--sl-color-neutral-400);
141
- --sl-input-border-color-focus: var(--sl-color-primary-500);
142
- --sl-input-border-color-disabled: var(--sl-color-neutral-300);
143
- --sl-input-border-width: 1px;
144
- --sl-input-required-content: "*";
145
- --sl-input-required-content-offset: -2px;
146
- --sl-input-required-content-color: var(--sl-input-label-color);
147
- --sl-input-border-radius-small: var(--sl-border-radius-medium);
148
- --sl-input-border-radius-medium: var(--sl-border-radius-medium);
149
- --sl-input-border-radius-large: var(--sl-border-radius-medium);
150
- --sl-input-font-family: var(--sl-font-sans);
151
- --sl-input-font-weight: var(--sl-font-weight-normal);
152
- --sl-input-font-size-small: var(--sl-font-size-small);
153
- --sl-input-font-size-medium: var(--sl-font-size-medium);
154
- --sl-input-font-size-large: var(--sl-font-size-large);
155
- --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
156
- --sl-input-color: var(--sl-color-neutral-700);
157
- --sl-input-color-hover: var(--sl-color-neutral-700);
158
- --sl-input-color-focus: var(--sl-color-neutral-700);
159
- --sl-input-color-disabled: var(--sl-color-neutral-900);
160
- --sl-input-icon-color: var(--sl-color-neutral-400);
161
- --sl-input-icon-color-hover: var(--sl-color-neutral-500);
162
- --sl-input-icon-color-focus: var(--sl-color-neutral-500);
163
- --sl-input-placeholder-color: var(--sl-color-neutral-400);
164
- --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
165
- --sl-input-spacing-small: var(--sl-spacing-small);
166
- --sl-input-spacing-medium: var(--sl-spacing-medium);
167
- --sl-input-spacing-large: var(--sl-spacing-large);
168
- --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
169
- --sl-input-focus-ring-offset: 0;
170
- --sl-input-filled-background-color: var(--sl-color-neutral-100);
171
- --sl-input-filled-background-color-hover: var( --sl-color-neutral-100 );
172
- --sl-input-filled-background-color-focus: var( --sl-color-neutral-100 );
173
- --sl-input-filled-background-color-disabled: var( --sl-color-neutral-100 );
174
- --sl-input-filled-color: var(--sl-color-neutral-800);
175
- --sl-input-filled-color-hover: var(--sl-color-neutral-800);
176
- --sl-input-filled-color-focus: var(--sl-color-neutral-700);
177
- --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
178
- --sl-input-label-font-size-small: var(--sl-font-size-small);
179
- --sl-input-label-font-size-medium: var(--sl-font-size-medium);
180
- --sl-input-label-font-size-large: var(--sl-font-size-large);
181
- --sl-input-label-color: inherit;
182
- --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
183
- --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
184
- --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
185
- --sl-input-help-text-color: var(--sl-color-neutral-500);
186
- --sl-toggle-size-small: 0.875rem;
187
- --sl-toggle-size-medium: 1.125rem;
188
- --sl-toggle-size-large: 1.375rem;
189
- --sl-overlay-background-color: hsla(0, 0%, 100%, 0.05);
190
- --sl-panel-background-color: var(--sl-color-neutral-0);
191
- --sl-panel-border-color: var(--sl-color-neutral-300);
192
- --sl-panel-border-width: 1px;
193
- --sl-tooltip-border-radius: var(--sl-border-radius-medium);
194
- --sl-tooltip-background-color: var(--sl-color-neutral-800);
195
- --sl-tooltip-color: var(--sl-color-neutral-0);
196
- --sl-tooltip-font-family: var(--sl-font-sans);
197
- --sl-tooltip-font-weight: var(--sl-font-weight-normal);
198
- --sl-tooltip-font-size: var(--sl-font-size-small);
199
- --sl-tooltip-line-height: var(--sl-line-height-dense);
200
- --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
201
- --sl-tooltip-arrow-size: 6px;
202
- --sl-z-index-drawer: 700;
203
- --sl-z-index-dialog: 800;
204
- --sl-z-index-dropdown: 900;
205
- --sl-z-index-toast: 950;
206
- --sl-z-index-tooltip: 1000;
207
- --td-footer-background-color: #09090b;
208
- --td-footer-color: #e4e4e7;
209
- --td-code-block-toolbar-cell-background-color: #09090b;
210
- --td-code-block-highlighted-background-color: #1e293b;
211
- --td-card-color: "inherit";
212
- --td-card-background-color: var(--sl-color-neutral-0);
213
- --td-card-background-hover-color: var(--sl-color-neutral-50);
214
- --td-card-border-color: rgba(255, 255, 255, 0.1);
215
- --td-card-box-shadow-1: rgba(0, 0, 0, 0.05);
216
- --td-card-box-shadow-1-y: 3px;
217
- --td-card-box-shadow-1-blur: 6px;
218
- --td-card-box-shadow-2: rgba(0, 0, 0, 0.1);
219
- --td-card-box-shadow-2-y: 8px;
220
- --td-card-box-shadow-2-blur: 15px;
221
- --td-card-hover-border-color: rgba(255, 255, 255, 0.2);
222
- --td-card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
223
- --td-card-hover-box-shadow-1-y: 5px;
224
- --td-card-hover-box-shadow-1-blur: 10px;
225
- --td-card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
226
- --td-card-hover-box-shadow-2-y: 15px;
227
- --td-card-hover-box-shadow-2-blur: 25px;
228
- --td-body-gradient-line-color: #27272a47;
229
- --td-editor-text-color-blue: hsl(221, 100%, 70%);
230
- --td-editor-text-color-purple: hsl(291, 100%, 65%);
231
- --td-editor-text-color-red: hsl(4, 100%, 63%);
232
- --td-editor-text-color-green: hsl(122, 100%, 34%);
233
- --td-editor-bg-color-blue: hsl(221, 100%, 70%, 0.2);
234
- --td-editor-bg-color-purple: hsl(291, 100%, 65%, 0.2);
235
- --td-editor-bg-color-red: hsl(4, 100%, 63%, 0.2);
236
- --td-editor-bg-color-green: hsl(122, 100%, 34%, 0.2);
237
- }
238
- @supports (scrollbar-gutter: stable) {
239
- .sl-scroll-lock {
240
- scrollbar-gutter: stable !important;
241
- overflow: hidden !important;
242
- }
243
- }
244
- @supports not (scrollbar-gutter: stable) {
245
- .sl-scroll-lock body {
246
- padding-right: var(--sl-scroll-lock-size) !important;
247
- overflow: hidden !important;
248
- }
249
- }
250
-
251
- /* src/styles/theme-light.css */
252
- :host,
253
- .theme-light {
254
- color-scheme: light;
255
- --sl-color-primary-50: #f0f9ff;
256
- --sl-color-primary-100: #e0f2fe;
257
- --sl-color-primary-200: #bae6fd;
258
- --sl-color-primary-300: #93c5fd;
259
- --sl-color-primary-400: #60a5fa;
260
- --sl-color-primary-500: #3b82f6;
261
- --sl-color-primary-600: #2563eb;
262
- --sl-color-primary-700: #1d4ed8;
263
- --sl-color-primary-800: #1e40af;
264
- --sl-color-primary-900: #1e3a8a;
265
- --sl-color-primary-950: #172554;
266
- --sl-color-success-50: #f0fdf4;
267
- --sl-color-success-100: #dcfce7;
268
- --sl-color-success-200: #bbf7d0;
269
- --sl-color-success-300: #86efac;
270
- --sl-color-success-400: #4ade80;
271
- --sl-color-success-500: #22c55e;
272
- --sl-color-success-600: #16a34a;
273
- --sl-color-success-700: #15803d;
274
- --sl-color-success-800: #166534;
275
- --sl-color-success-900: #14532d;
276
- --sl-color-success-950: #052e16;
277
- --sl-color-warning-50: #fffbeb;
278
- --sl-color-warning-100: #fef3c7;
279
- --sl-color-warning-200: #fde68a;
280
- --sl-color-warning-300: #fcd34d;
281
- --sl-color-warning-400: #fbbf24;
282
- --sl-color-warning-500: #f59e0b;
283
- --sl-color-warning-600: #d97706;
284
- --sl-color-warning-700: #b45309;
285
- --sl-color-warning-800: #92400e;
286
- --sl-color-warning-900: #78350f;
287
- --sl-color-warning-950: #451a03;
288
- --sl-color-danger-50: #fef2f2;
289
- --sl-color-danger-100: #fee2e2;
290
- --sl-color-danger-200: #fecaca;
291
- --sl-color-danger-300: #fca5a5;
292
- --sl-color-danger-400: #f87171;
293
- --sl-color-danger-500: #ef4444;
294
- --sl-color-danger-600: #dc2626;
295
- --sl-color-danger-700: #b91c1c;
296
- --sl-color-danger-800: #991b1b;
297
- --sl-color-danger-900: #7f1d1d;
298
- --sl-color-danger-950: #450a0a;
299
- --sl-color-neutral-50: #fafafa;
300
- --sl-color-neutral-100: #f4f4f5;
301
- --sl-color-neutral-200: #e4e4e7;
302
- --sl-color-neutral-300: #d4d4d8;
303
- --sl-color-neutral-400: #a1a1aa;
304
- --sl-color-neutral-500: #71717a;
305
- --sl-color-neutral-600: #52525b;
306
- --sl-color-neutral-700: #3f3f46;
307
- --sl-color-neutral-800: #27272a;
308
- --sl-color-neutral-900: #18181b;
309
- --sl-color-neutral-950: #09090b;
310
- --sl-color-neutral-0: #ffffff;
311
- --sl-color-neutral-1000: hsl(0, 0%, 0%);
312
- --sl-border-base: var(--be-border-base);
313
- --sl-border-radius-small: calc(var(--sl-border-base) * 0.1875);
314
- --sl-border-radius-medium: calc(var(--sl-border-base) * 0.25);
315
- --sl-border-radius-large: calc(var(--sl-border-base) * 0.5);
316
- --sl-border-radius-x-large: var( --sl-border-base );
317
- --sl-border-radius-circle: 50%;
318
- --sl-border-radius-pill: 9999px;
319
- --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
320
- --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
321
- --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
322
- --sl-shadow-large: var( --be-shadow-large, 0 2px 8px hsl(240 3.8% 46.1% / 12%) );
323
- --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
324
- --sl-spacing-base: var(--be-spacing-base, 1rem);
325
- --sl-spacing-3x-small: calc( var(--sl-spacing-base) * 0.125 );
326
- --sl-spacing-2x-small: calc( var(--sl-spacing-base) * 0.25 );
327
- --sl-spacing-1_5x-small: calc( var(--sl-spacing-base) * 0.375 );
328
- --sl-spacing-x-small: calc( var(--sl-spacing-base) * 0.5 );
329
- --sl-spacing-small: calc( var(--sl-spacing-base) * 0.75 );
330
- --sl-spacing-medium: var(--sl-spacing-base);
331
- --sl-spacing-large: calc( var(--sl-spacing-base) * 1.25 );
332
- --sl-spacing-x-large: calc( var(--sl-spacing-base) * 1.75 );
333
- --sl-spacing-2x-large: calc( var(--sl-spacing-base) * 2.25 );
334
- --sl-spacing-3x-large: calc( var(--sl-spacing-base) * 3 );
335
- --sl-spacing-4x-large: calc( var(--sl-spacing-base) * 4.5 );
336
- --sl-spacing-5x-large: calc(var(--sl-spacing-base) * 5);
337
- --indent-size: var(--sl-spacing-large);
338
- --sl-transition-x-slow: 1000ms;
339
- --sl-transition-slow: 500ms;
340
- --sl-transition-medium: 250ms;
341
- --sl-transition-fast: 150ms;
342
- --sl-transition-x-fast: 50ms;
343
- --sl-font-mono:
344
- SFMono-Regular,
345
- Consolas,
346
- "Liberation Mono",
347
- Menlo,
348
- monospace;
349
- --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" );
350
- --sl-font-serif: var( --be-font-serif, Georgia, "Times New Roman", serif );
351
- --sl-font-size-base: var(--be-font-size-base, 1rem);
352
- --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
353
- --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
354
- --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
355
- --sl-font-size-medium: var(--sl-font-size-base);
356
- --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
357
- --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
358
- --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
359
- --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
360
- --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
361
- --sl-font-weight-light: 300;
362
- --sl-font-weight-normal: 400;
363
- --sl-font-weight-semibold: 500;
364
- --sl-font-weight-bold: 700;
365
- --sl-letter-spacing-denser: -0.03em;
366
- --sl-letter-spacing-dense: -0.015em;
367
- --sl-letter-spacing-normal: normal;
368
- --sl-letter-spacing-loose: 0.075em;
369
- --sl-letter-spacing-looser: 0.15em;
370
- --sl-line-height-base: 1;
371
- --sl-line-height-x-denser: calc(var(--sl-line-height-base) * 1.1);
372
- --sl-line-height-denser: calc(var(--sl-line-height-base) * 1.2);
373
- --sl-line-height-dense: calc(var(--sl-line-height-base) * 1.4);
374
- --sl-line-height-subnormal: calc(var(--sl-line-height-base) * 1.6);
375
- --sl-line-height-normal: calc(var(--sl-line-height-base) * 1.8);
376
- --sl-line-height-loose: calc(var(--sl-line-height-base) * 2.2);
377
- --sl-line-height-looser: calc(var(--sl-line-height-base) * 2.6);
378
- --sl-focus-ring-color: var(--sl-color-primary-600);
379
- --sl-focus-ring-style: solid;
380
- --sl-focus-ring-width: var(--be-focus-ring-width, 1px);
381
- --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
382
- --sl-focus-ring-offset: 1px;
383
- --sl-button-font-size-small: var(--sl-font-size-x-small);
384
- --sl-button-font-size-medium: var(--sl-font-size-small);
385
- --sl-button-font-size-large: var(--sl-font-size-medium);
386
- --sl-input-height-base: 1rem;
387
- --sl-input-height-small: calc(var(--sl-input-height-base) * 1.875);
388
- --sl-input-height-medium: calc(var(--sl-input-height-base) * 2.5);
389
- --sl-input-height-large: calc(var(--sl-input-height-base) * 3.125);
390
- --sl-input-background-color: var(--sl-color-neutral-0);
391
- --sl-input-background-color-hover: var(--sl-input-background-color);
392
- --sl-input-background-color-focus: var(--sl-input-background-color);
393
- --sl-input-background-color-disabled: var(--sl-color-neutral-100);
394
- --sl-input-border-color: var(--sl-color-neutral-300);
395
- --sl-input-border-color-hover: var(--sl-color-neutral-400);
396
- --sl-input-border-color-focus: var(--sl-color-primary-500);
397
- --sl-input-border-color-disabled: var(--sl-color-neutral-300);
398
- --sl-input-border-width: 1px;
399
- --sl-input-required-content: "*";
400
- --sl-input-required-content-offset: -2px;
401
- --sl-input-required-content-color: var(--sl-input-label-color);
402
- --sl-input-border-radius-small: var(--sl-border-radius-medium);
403
- --sl-input-border-radius-medium: var(--sl-border-radius-medium);
404
- --sl-input-border-radius-large: var(--sl-border-radius-medium);
405
- --sl-input-font-family: var(--sl-font-sans);
406
- --sl-input-font-weight: var(--sl-font-weight-normal);
407
- --sl-input-font-size-small: var(--sl-font-size-small);
408
- --sl-input-font-size-medium: var(--sl-font-size-medium);
409
- --sl-input-font-size-large: var(--sl-font-size-large);
410
- --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
411
- --sl-input-color: var(--sl-color-neutral-700);
412
- --sl-input-color-hover: var(--sl-color-neutral-700);
413
- --sl-input-color-focus: var(--sl-color-neutral-700);
414
- --sl-input-color-disabled: var(--sl-color-neutral-900);
415
- --sl-input-icon-color: var(--sl-color-neutral-400);
416
- --sl-input-icon-color-hover: var(--sl-color-neutral-500);
417
- --sl-input-icon-color-focus: var(--sl-color-neutral-500);
418
- --sl-input-placeholder-color: var(--sl-color-neutral-400);
419
- --sl-input-placeholder-color-disabled: var(--sl-color-neutral-500);
420
- --sl-input-spacing-small: var(--sl-spacing-small);
421
- --sl-input-spacing-medium: var(--sl-spacing-medium);
422
- --sl-input-spacing-large: var(--sl-spacing-large);
423
- --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
424
- --sl-input-focus-ring-offset: 0;
425
- --sl-input-filled-background-color: var(--sl-color-neutral-100);
426
- --sl-input-filled-background-color-hover: var( --sl-color-neutral-100 );
427
- --sl-input-filled-background-color-focus: var( --sl-color-neutral-100 );
428
- --sl-input-filled-background-color-disabled: var( --sl-color-neutral-100 );
429
- --sl-input-filled-color: var(--sl-color-neutral-800);
430
- --sl-input-filled-color-hover: var(--sl-color-neutral-800);
431
- --sl-input-filled-color-focus: var(--sl-color-neutral-700);
432
- --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
433
- --sl-input-label-font-size-small: var(--sl-font-size-small);
434
- --sl-input-label-font-size-medium: var(--sl-font-size-medium);
435
- --sl-input-label-font-size-large: var(--sl-font-size-large);
436
- --sl-input-label-color: inherit;
437
- --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
438
- --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
439
- --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
440
- --sl-input-help-text-color: var(--sl-color-neutral-500);
441
- --sl-toggle-size-small: 0.875rem;
442
- --sl-toggle-size-medium: 1.125rem;
443
- --sl-toggle-size-large: 1.375rem;
444
- --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
445
- --sl-panel-background-color: var(--sl-color-neutral-0);
446
- --sl-panel-border-color: var(--sl-color-neutral-300);
447
- --sl-panel-border-width: 1px;
448
- --sl-tooltip-border-radius: var(--sl-border-radius-medium);
449
- --sl-tooltip-background-color: var(--sl-color-neutral-800);
450
- --sl-tooltip-color: var(--sl-color-neutral-0);
451
- --sl-tooltip-font-family: var(--sl-font-sans);
452
- --sl-tooltip-font-weight: var(--sl-font-weight-normal);
453
- --sl-tooltip-font-size: var(--sl-font-size-small);
454
- --sl-tooltip-line-height: var(--sl-line-height-dense);
455
- --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
456
- --sl-tooltip-arrow-size: 6px;
457
- --sl-z-index-drawer: 700;
458
- --sl-z-index-dialog: 800;
459
- --sl-z-index-dropdown: 900;
460
- --sl-z-index-toast: 950;
461
- --sl-z-index-tooltip: 1000;
462
- --td-footer-background-color: #09090b;
463
- --td-footer-color: #e4e4e7;
464
- --td-code-block-toolbar-cell-background-color: #e2e8f0;
465
- --td-code-block-highlighted-background-color: #dbeafe;
466
- --td-card-color: "inherit";
467
- --td-card-background-color: var(--sl-color-neutral-0);
468
- --td-card-background-hover-color: var(--sl-color-neutral-50);
469
- --td-card-border-color: rgba(24, 24, 27, 0.08);
470
- --td-card-box-shadow-1: rgba(24, 24, 27, 0.02);
471
- --td-card-box-shadow-1-y: 3px;
472
- --td-card-box-shadow-1-blur: 6px;
473
- --td-card-box-shadow-2: rgba(24, 24, 27, 0.04);
474
- --td-card-box-shadow-2-y: 2px;
475
- --td-card-box-shadow-2-blur: 7px;
476
- --td-card-hover-border-color: rgba(24, 24, 27, 0.15);
477
- --td-card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
478
- --td-card-hover-box-shadow-1-y: 3px;
479
- --td-card-hover-box-shadow-1-blur: 6px;
480
- --td-card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
481
- --td-card-hover-box-shadow-2-y: 8px;
482
- --td-card-hover-box-shadow-2-blur: 15px;
483
- --td-body-gradient-line-color: #ffffff;
484
- --td-editor-text-color-blue: hsl(221, 100%, 50%);
485
- --td-editor-text-color-purple: hsl(291, 100%, 39%);
486
- --td-editor-text-color-red: hsl(4, 100%, 40%);
487
- --td-editor-text-color-green: hsl(122, 100%, 23%);
488
- --td-editor-bg-color-blue: hsl(221, 100%, 50%, 0.1);
489
- --td-editor-bg-color-purple: hsl(291, 100%, 39%, 0.1);
490
- --td-editor-bg-color-red: hsl(4, 100%, 40%, 0.1);
491
- --td-editor-bg-color-green: hsl(122, 100%, 23%, 0.1);
492
- }
493
- @supports (scrollbar-gutter: stable) {
494
- .sl-scroll-lock {
495
- scrollbar-gutter: stable !important;
496
- overflow: hidden !important;
497
- }
498
- }
499
- @supports not (scrollbar-gutter: stable) {
500
- .sl-scroll-lock body {
501
- padding-right: var(--sl-scroll-lock-size) !important;
502
- overflow: hidden !important;
503
- }
504
- }
505
-
506
- /* src/styles/theme-settings.css */
507
- .theme-settings {
508
- --be-border-base: 1rem;
509
- --be-font-sans: "Inter", sans-serif;
510
- --be-font-serif:
511
- Georgia,
512
- "Times New Roman",
513
- serif;
514
- --be-font-mono:
515
- Menlo,
516
- Monaco,
517
- "Courier New",
518
- monospace;
519
- --be-focus-ring-width: 1px;
520
- --be-shadow-large: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
521
- --be-spacing-base: 1rem;
522
- --be-font-size-base: 1rem;
523
- }
524
-
525
1
  /* src/styles/body-normalize.css */
526
2
  .be-article {
527
3
  --toggle-size: var(--sl-toggle-size-small);
@@ -874,6 +350,18 @@
874
350
  }
875
351
  }
876
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
+ }
877
365
 
878
366
  /* src/styles/misc.css */
879
367
  .divider__drawer {
@@ -2270,7 +1758,7 @@ sl-progress-bar {
2270
1758
  }
2271
1759
 
2272
1760
  /* src/styles/article-image-box.css */
2273
- article {
1761
+ .be-article {
2274
1762
  .image-box-wrapper {
2275
1763
  margin-top: var(--sl-spacing-large);
2276
1764
  margin-bottom: var(--sl-spacing-large);
@@ -2310,7 +1798,7 @@ article {
2310
1798
  }
2311
1799
 
2312
1800
  /* src/styles/article-layout-grid.css */
2313
- article {
1801
+ .be-article {
2314
1802
  .layout-grid-wrapper {
2315
1803
  margin-top: var(--sl-spacing-large);
2316
1804
  margin-bottom: var(--sl-spacing-large);
@@ -2417,7 +1905,7 @@ article {
2417
1905
  }
2418
1906
 
2419
1907
  /* src/styles/article-callout-box.css */
2420
- article {
1908
+ .be-article {
2421
1909
  .callout-box-wrapper {
2422
1910
  position: relative;
2423
1911
  margin-top: var(--sl-spacing-large);
@@ -2479,7 +1967,7 @@ article {
2479
1967
  }
2480
1968
 
2481
1969
  /* src/styles/article-multiple-option-question.css */
2482
- article {
1970
+ .be-article {
2483
1971
  .multiple-option-question-wrapper {
2484
1972
  position: relative;
2485
1973
  margin-top: var(--sl-spacing-large);
@@ -2578,7 +2066,7 @@ article {
2578
2066
  }
2579
2067
 
2580
2068
  /* src/styles/article-short-answer-question.css */
2581
- article {
2069
+ .be-article {
2582
2070
  .short-answer-question-wrapper {
2583
2071
  position: relative;
2584
2072
  margin-top: var(--sl-spacing-large);
@@ -2635,7 +2123,7 @@ article {
2635
2123
  }
2636
2124
 
2637
2125
  /* src/styles/article-matching-question.css */
2638
- article {
2126
+ .be-article {
2639
2127
  .matching-question-wrapper {
2640
2128
  position: relative;
2641
2129
  margin-top: var(--sl-spacing-large);
@@ -2755,7 +2243,7 @@ article {
2755
2243
  }
2756
2244
 
2757
2245
  /* src/styles/article-fill-in-the-blank-question.css */
2758
- article {
2246
+ .be-article {
2759
2247
  --space-highlight-border-width: 3px;
2760
2248
  .fill-in-the-blank-question-wrapper {
2761
2249
  position: relative;
@@ -2829,7 +2317,7 @@ article {
2829
2317
  }
2830
2318
 
2831
2319
  /* src/styles/article-journal-entry-question.css */
2832
- article {
2320
+ .be-article {
2833
2321
  .journal-entry-question-wrapper {
2834
2322
  position: relative;
2835
2323
  margin-top: var(--sl-spacing-large);
@@ -2953,7 +2441,7 @@ article {
2953
2441
  }
2954
2442
 
2955
2443
  /* src/styles/article-financial-statement-question.css */
2956
- article {
2444
+ .be-article {
2957
2445
  .financial-statement-question-wrapper {
2958
2446
  position: relative;
2959
2447
  margin-top: var(--sl-spacing-large);
@@ -2999,7 +2487,7 @@ article {
2999
2487
  }
3000
2488
 
3001
2489
  /* src/styles/article-essay-question.css */
3002
- article {
2490
+ .be-article {
3003
2491
  .essay-question-wrapper {
3004
2492
  position: relative;
3005
2493
  margin-top: var(--sl-spacing-large);
@@ -3056,7 +2544,7 @@ article {
3056
2544
  }
3057
2545
 
3058
2546
  /* src/styles/article-simulation-question.css */
3059
- article {
2547
+ .be-article {
3060
2548
  .simulation-question-wrapper {
3061
2549
  position: relative;
3062
2550
  margin-top: var(--sl-spacing-large);
package/dist/index.d.mts CHANGED
@@ -3,26 +3,35 @@ import React from 'react';
3
3
  import { SerializedEditorState } from '@examind/block-types';
4
4
 
5
5
  type Theme = 'light' | 'dark';
6
- type ThemeVariables = {
6
+ type ThemeSettings = {
7
7
  borderBase?: string;
8
8
  fontSans?: string;
9
9
  fontSerif?: string;
10
10
  fontMono?: string;
11
11
  spacingBase?: string;
12
12
  fontSizeBase?: string;
13
+ focusRingWidth?: string;
14
+ shadowLarge?: string;
13
15
  };
14
16
 
15
17
  type BlockEditorProps = {
16
- themeSettings?: ThemeVariables;
17
18
  editable?: boolean;
18
19
  editorState?: SerializedEditorState;
19
20
  theme?: Theme;
21
+ themeSettings?: ThemeSettings;
20
22
  onChange?: (editorState: SerializedEditorState) => void;
21
23
  children?: React.ReactNode;
22
24
  renderSettings?: () => React.ReactNode;
23
25
  };
24
26
  declare function BlockEditor(props: BlockEditorProps): react_jsx_runtime.JSX.Element;
25
27
 
28
+ type BlockEditorStyleProps = {
29
+ theme?: Theme;
30
+ themeSettings?: ThemeSettings;
31
+ children: React.ReactNode;
32
+ };
33
+ declare function BlockEditorStyle(props: BlockEditorStyleProps): react_jsx_runtime.JSX.Element;
34
+
26
35
  declare function Callout(): react_jsx_runtime.JSX.Element;
27
36
 
28
37
  declare function Debug(): react_jsx_runtime.JSX.Element;
@@ -56,7 +65,7 @@ type VariablesSettings = {
56
65
  onCreated: (name: string) => void;
57
66
  onUpdated: (newName: string, oldName: string) => void;
58
67
  list: Array<string>;
59
- getVariableValues: () => Record<string, string>;
68
+ getVariableValues: () => Record<string, any>;
60
69
  };
61
70
 
62
71
  type VariablesProps = {
@@ -64,4 +73,4 @@ type VariablesProps = {
64
73
  };
65
74
  declare function Variables(props: VariablesProps): react_jsx_runtime.JSX.Element;
66
75
 
67
- export { BlockEditor, type BlockEditorProps, Callout, Debug, Image, type ImageProps, Link, Questions, SettingsPanel, type SettingsPanelProps, Table, type Theme, Variables, type VariablesProps };
76
+ export { BlockEditor, type BlockEditorProps, BlockEditorStyle, Callout, Debug, Image, type ImageProps, Link, Questions, SettingsPanel, type SettingsPanelProps, Table, type Theme, type ThemeSettings, Variables, type VariablesProps };