@teseor/css 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +14 -0
  3. package/package.json +1 -1
  4. package/src/04-components/actions/close-button/close-button-visual.png +0 -0
  5. package/src/04-components/actions/close-button/close-button.api.json +71 -0
  6. package/src/04-components/actions/close-button/close-button.docs.json +264 -0
  7. package/src/04-components/actions/close-button/close-button.visual.spec.ts +14 -0
  8. package/src/04-components/actions/close-button/index.scss +101 -0
  9. package/src/04-components/data-display/image/image-visual.png +0 -0
  10. package/src/04-components/data-display/image/image.api.json +76 -0
  11. package/src/04-components/data-display/image/image.docs.json +337 -0
  12. package/src/04-components/data-display/image/image.visual.spec.ts +14 -0
  13. package/src/04-components/data-display/image/index.scss +103 -0
  14. package/src/04-components/feedback/progress-circle/index.scss +92 -0
  15. package/src/04-components/feedback/progress-circle/progress-circle-visual.png +0 -0
  16. package/src/04-components/feedback/progress-circle/progress-circle.api.json +53 -0
  17. package/src/04-components/feedback/progress-circle/progress-circle.docs.json +377 -0
  18. package/src/04-components/feedback/progress-circle/progress-circle.visual.spec.ts +14 -0
  19. package/src/04-components/forms/fieldset/fieldset-visual.png +0 -0
  20. package/src/04-components/forms/fieldset/fieldset.api.json +49 -0
  21. package/src/04-components/forms/fieldset/fieldset.docs.json +520 -0
  22. package/src/04-components/forms/fieldset/fieldset.visual.spec.ts +14 -0
  23. package/src/04-components/forms/fieldset/index.scss +69 -0
  24. package/src/04-components/forms/form/form-visual.png +0 -0
  25. package/src/04-components/forms/form/form.api.json +38 -0
  26. package/src/04-components/forms/form/form.docs.json +482 -0
  27. package/src/04-components/forms/form/form.visual.spec.ts +14 -0
  28. package/src/04-components/forms/form/index.scss +62 -0
  29. package/src/04-components/index.scss +7 -0
  30. package/src/04-components/typography/code-block/code-block-visual.png +0 -0
  31. package/src/04-components/typography/code-block/code-block.api.json +56 -0
  32. package/src/04-components/typography/code-block/code-block.docs.json +289 -0
  33. package/src/04-components/typography/code-block/code-block.visual.spec.ts +14 -0
  34. package/src/04-components/typography/code-block/index.scss +87 -0
  35. package/src/04-components/typography/list/index.scss +65 -0
  36. package/src/04-components/typography/list/list-visual.png +0 -0
  37. package/src/04-components/typography/list/list.api.json +33 -0
  38. package/src/04-components/typography/list/list.docs.json +293 -0
  39. package/src/04-components/typography/list/list.visual.spec.ts +14 -0
package/src/04-components/forms/form/form.docs.json ADDED
@@ -0,0 +1,482 @@
1
+ {
2
+ "id": "form",
3
+ "type": "component",
4
+ "title": "Form",
5
+ "description": "Layout container for form fields with consistent spacing, sections, and an actions row.",
6
+ "api": "./form.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Default",
10
+ "examples": [
11
+ {
12
+ "items": [
13
+ {
14
+ "tag": "form",
15
+ "class": "ui-form",
16
+ "children": [
17
+ {
18
+ "tag": "div",
19
+ "class": "ui-field",
20
+ "children": [
21
+ {
22
+ "tag": "label",
23
+ "class": "ui-label",
24
+ "text": "Name",
25
+ "attrs": { "for": "f-name" }
26
+ },
27
+ {
28
+ "tag": "div",
29
+ "class": "ui-field__control",
30
+ "children": [
31
+ {
32
+ "tag": "input",
33
+ "class": "ui-input",
34
+ "attrs": {
35
+ "type": "text",
36
+ "id": "f-name",
37
+ "placeholder": "Full name"
38
+ }
39
+ }
40
+ ]
41
+ }
42
+ ]
43
+ },
44
+ {
45
+ "tag": "div",
46
+ "class": "ui-field",
47
+ "children": [
48
+ {
49
+ "tag": "label",
50
+ "class": "ui-label",
51
+ "text": "Email",
52
+ "attrs": { "for": "f-email" }
53
+ },
54
+ {
55
+ "tag": "div",
56
+ "class": "ui-field__control",
57
+ "children": [
58
+ {
59
+ "tag": "input",
60
+ "class": "ui-input",
61
+ "attrs": {
62
+ "type": "email",
63
+ "id": "f-email",
64
+ "placeholder": "you@example.com"
65
+ }
66
+ }
67
+ ]
68
+ }
69
+ ]
70
+ },
71
+ {
72
+ "tag": "div",
73
+ "class": "ui-form__actions",
74
+ "children": [
75
+ { "tag": "button", "class": "ui-button", "text": "Submit" },
76
+ {
77
+ "tag": "button",
78
+ "class": "ui-button ui-button--ghost",
79
+ "text": "Cancel",
80
+ "attrs": { "type": "button" }
81
+ }
82
+ ]
83
+ }
84
+ ]
85
+ }
86
+ ],
87
+ "code": "<form class=\"ui-form\">\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"name\">Name</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"text\" id=\"name\">\n </div>\n </div>\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"email\">Email</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"email\" id=\"email\">\n </div>\n </div>\n <div class=\"ui-form__actions\">\n <button class=\"ui-button\">Submit</button>\n <button class=\"ui-button ui-button--ghost\" type=\"button\">Cancel</button>\n </div>\n</form>"
88
+ }
89
+ ]
90
+ },
91
+ {
92
+ "title": "With Sections",
93
+ "description": "Group related fields using fieldset-based sections",
94
+ "examples": [
95
+ {
96
+ "items": [
97
+ {
98
+ "tag": "form",
99
+ "class": "ui-form",
100
+ "children": [
101
+ {
102
+ "tag": "fieldset",
103
+ "class": "ui-form__section",
104
+ "children": [
105
+ { "tag": "legend", "class": "ui-heading ui-heading--sm", "text": "Personal" },
106
+ {
107
+ "tag": "div",
108
+ "class": "ui-field",
109
+ "children": [
110
+ {
111
+ "tag": "label",
112
+ "class": "ui-label",
113
+ "text": "First name",
114
+ "attrs": { "for": "s-first" }
115
+ },
116
+ {
117
+ "tag": "div",
118
+ "class": "ui-field__control",
119
+ "children": [
120
+ {
121
+ "tag": "input",
122
+ "class": "ui-input",
123
+ "attrs": { "type": "text", "id": "s-first" }
124
+ }
125
+ ]
126
+ }
127
+ ]
128
+ },
129
+ {
130
+ "tag": "div",
131
+ "class": "ui-field",
132
+ "children": [
133
+ {
134
+ "tag": "label",
135
+ "class": "ui-label",
136
+ "text": "Last name",
137
+ "attrs": { "for": "s-last" }
138
+ },
139
+ {
140
+ "tag": "div",
141
+ "class": "ui-field__control",
142
+ "children": [
143
+ {
144
+ "tag": "input",
145
+ "class": "ui-input",
146
+ "attrs": { "type": "text", "id": "s-last" }
147
+ }
148
+ ]
149
+ }
150
+ ]
151
+ }
152
+ ]
153
+ },
154
+ {
155
+ "tag": "fieldset",
156
+ "class": "ui-form__section",
157
+ "children": [
158
+ { "tag": "legend", "class": "ui-heading ui-heading--sm", "text": "Account" },
159
+ {
160
+ "tag": "div",
161
+ "class": "ui-field",
162
+ "children": [
163
+ {
164
+ "tag": "label",
165
+ "class": "ui-label",
166
+ "text": "Email",
167
+ "attrs": { "for": "s-email" }
168
+ },
169
+ {
170
+ "tag": "div",
171
+ "class": "ui-field__control",
172
+ "children": [
173
+ {
174
+ "tag": "input",
175
+ "class": "ui-input",
176
+ "attrs": { "type": "email", "id": "s-email" }
177
+ }
178
+ ]
179
+ }
180
+ ]
181
+ },
182
+ {
183
+ "tag": "div",
184
+ "class": "ui-field",
185
+ "children": [
186
+ {
187
+ "tag": "label",
188
+ "class": "ui-label",
189
+ "text": "Password",
190
+ "attrs": { "for": "s-pass" }
191
+ },
192
+ {
193
+ "tag": "div",
194
+ "class": "ui-field__control",
195
+ "children": [
196
+ {
197
+ "tag": "input",
198
+ "class": "ui-input",
199
+ "attrs": { "type": "password", "id": "s-pass" }
200
+ }
201
+ ]
202
+ }
203
+ ]
204
+ }
205
+ ]
206
+ },
207
+ {
208
+ "tag": "div",
209
+ "class": "ui-form__actions",
210
+ "children": [{ "tag": "button", "class": "ui-button", "text": "Create account" }]
211
+ }
212
+ ]
213
+ }
214
+ ],
215
+ "code": "<form class=\"ui-form\">\n <fieldset class=\"ui-form__section\">\n <legend class=\"ui-heading ui-heading--sm\">Personal</legend>\n <div class=\"ui-field\">...</div>\n <div class=\"ui-field\">...</div>\n </fieldset>\n <fieldset class=\"ui-form__section\">\n <legend class=\"ui-heading ui-heading--sm\">Account</legend>\n <div class=\"ui-field\">...</div>\n </fieldset>\n <div class=\"ui-form__actions\">\n <button class=\"ui-button\">Create account</button>\n </div>\n</form>"
216
+ }
217
+ ]
218
+ },
219
+ {
220
+ "title": "Compact",
221
+ "description": "Tighter spacing for dense interfaces",
222
+ "examples": [
223
+ {
224
+ "items": [
225
+ {
226
+ "tag": "form",
227
+ "class": "ui-form ui-form--compact",
228
+ "children": [
229
+ {
230
+ "tag": "div",
231
+ "class": "ui-field",
232
+ "children": [
233
+ {
234
+ "tag": "label",
235
+ "class": "ui-label",
236
+ "text": "Username",
237
+ "attrs": { "for": "c-user" }
238
+ },
239
+ {
240
+ "tag": "div",
241
+ "class": "ui-field__control",
242
+ "children": [
243
+ {
244
+ "tag": "input",
245
+ "class": "ui-input",
246
+ "attrs": { "type": "text", "id": "c-user" }
247
+ }
248
+ ]
249
+ }
250
+ ]
251
+ },
252
+ {
253
+ "tag": "div",
254
+ "class": "ui-field",
255
+ "children": [
256
+ {
257
+ "tag": "label",
258
+ "class": "ui-label",
259
+ "text": "Password",
260
+ "attrs": { "for": "c-pass" }
261
+ },
262
+ {
263
+ "tag": "div",
264
+ "class": "ui-field__control",
265
+ "children": [
266
+ {
267
+ "tag": "input",
268
+ "class": "ui-input",
269
+ "attrs": { "type": "password", "id": "c-pass" }
270
+ }
271
+ ]
272
+ }
273
+ ]
274
+ },
275
+ {
276
+ "tag": "div",
277
+ "class": "ui-form__actions",
278
+ "children": [{ "tag": "button", "class": "ui-button", "text": "Log in" }]
279
+ }
280
+ ]
281
+ }
282
+ ],
283
+ "code": "<form class=\"ui-form ui-form--compact\">\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"user\">Username</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"text\" id=\"user\">\n </div>\n </div>\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"pass\">Password</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"password\" id=\"pass\">\n </div>\n </div>\n <div class=\"ui-form__actions\">\n <button class=\"ui-button\">Log in</button>\n </div>\n</form>"
284
+ }
285
+ ]
286
+ },
287
+ {
288
+ "title": "Inline",
289
+ "description": "Horizontal layout for short forms like search or filters",
290
+ "examples": [
291
+ {
292
+ "items": [
293
+ {
294
+ "tag": "form",
295
+ "class": "ui-form ui-form--inline",
296
+ "children": [
297
+ {
298
+ "tag": "div",
299
+ "class": "ui-field",
300
+ "children": [
301
+ {
302
+ "tag": "label",
303
+ "class": "ui-label",
304
+ "text": "Search",
305
+ "attrs": { "for": "i-search" }
306
+ },
307
+ {
308
+ "tag": "div",
309
+ "class": "ui-field__control",
310
+ "children": [
311
+ {
312
+ "tag": "input",
313
+ "class": "ui-input",
314
+ "attrs": {
315
+ "type": "search",
316
+ "id": "i-search",
317
+ "placeholder": "Search..."
318
+ }
319
+ }
320
+ ]
321
+ }
322
+ ]
323
+ },
324
+ {
325
+ "tag": "div",
326
+ "class": "ui-field",
327
+ "children": [
328
+ {
329
+ "tag": "label",
330
+ "class": "ui-label",
331
+ "text": "Category",
332
+ "attrs": { "for": "i-cat" }
333
+ },
334
+ {
335
+ "tag": "div",
336
+ "class": "ui-field__control",
337
+ "children": [
338
+ {
339
+ "tag": "select",
340
+ "class": "ui-select",
341
+ "attrs": { "id": "i-cat" },
342
+ "children": [
343
+ { "tag": "option", "text": "All" },
344
+ { "tag": "option", "text": "Articles" },
345
+ { "tag": "option", "text": "Products" }
346
+ ]
347
+ }
348
+ ]
349
+ }
350
+ ]
351
+ },
352
+ {
353
+ "tag": "div",
354
+ "class": "ui-form__actions",
355
+ "children": [{ "tag": "button", "class": "ui-button", "text": "Filter" }]
356
+ }
357
+ ]
358
+ }
359
+ ],
360
+ "code": "<form class=\"ui-form ui-form--inline\">\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"search\">Search</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"search\" id=\"search\">\n </div>\n </div>\n <div class=\"ui-field\">\n <label class=\"ui-label\" for=\"cat\">Category</label>\n <div class=\"ui-field__control\">\n <select class=\"ui-select\" id=\"cat\">\n <option>All</option>\n </select>\n </div>\n </div>\n <div class=\"ui-form__actions\">\n <button class=\"ui-button\">Filter</button>\n </div>\n</form>"
361
+ }
362
+ ]
363
+ },
364
+ {
365
+ "title": "With Validation",
366
+ "description": "Combining form layout with field error states",
367
+ "examples": [
368
+ {
369
+ "items": [
370
+ {
371
+ "tag": "form",
372
+ "class": "ui-form",
373
+ "children": [
374
+ {
375
+ "tag": "div",
376
+ "class": "ui-field",
377
+ "children": [
378
+ {
379
+ "tag": "label",
380
+ "class": "ui-label ui-label--required",
381
+ "text": "Email",
382
+ "attrs": { "for": "v-email" }
383
+ },
384
+ {
385
+ "tag": "div",
386
+ "class": "ui-field__control",
387
+ "children": [
388
+ {
389
+ "tag": "input",
390
+ "class": "ui-input ui-input--error",
391
+ "attrs": {
392
+ "type": "email",
393
+ "id": "v-email",
394
+ "value": "not-an-email"
395
+ }
396
+ },
397
+ {
398
+ "tag": "span",
399
+ "class": "ui-form-error",
400
+ "text": "Enter a valid email address"
401
+ }
402
+ ]
403
+ }
404
+ ]
405
+ },
406
+ {
407
+ "tag": "div",
408
+ "class": "ui-field",
409
+ "children": [
410
+ {
411
+ "tag": "label",
412
+ "class": "ui-label ui-label--required",
413
+ "text": "Password",
414
+ "attrs": { "for": "v-pass" }
415
+ },
416
+ {
417
+ "tag": "div",
418
+ "class": "ui-field__control",
419
+ "children": [
420
+ {
421
+ "tag": "input",
422
+ "class": "ui-input",
423
+ "attrs": { "type": "password", "id": "v-pass" }
424
+ },
425
+ {
426
+ "tag": "span",
427
+ "class": "ui-form-helper",
428
+ "text": "Must be at least 8 characters"
429
+ }
430
+ ]
431
+ }
432
+ ]
433
+ },
434
+ {
435
+ "tag": "div",
436
+ "class": "ui-form__actions",
437
+ "children": [
438
+ { "tag": "button", "class": "ui-button", "text": "Sign up" },
439
+ {
440
+ "tag": "button",
441
+ "class": "ui-button ui-button--ghost",
442
+ "text": "Reset",
443
+ "attrs": { "type": "button" }
444
+ }
445
+ ]
446
+ }
447
+ ]
448
+ }
449
+ ],
450
+ "code": "<form class=\"ui-form\">\n <div class=\"ui-field\">\n <label class=\"ui-label ui-label--required\" for=\"email\">Email</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input ui-input--error\" type=\"email\" id=\"email\">\n <span class=\"ui-form-error\">Enter a valid email address</span>\n </div>\n </div>\n <div class=\"ui-field\">\n <label class=\"ui-label ui-label--required\" for=\"pass\">Password</label>\n <div class=\"ui-field__control\">\n <input class=\"ui-input\" type=\"password\" id=\"pass\">\n <span class=\"ui-form-helper\">Must be at least 8 characters</span>\n </div>\n </div>\n <div class=\"ui-form__actions\">\n <button class=\"ui-button\">Sign up</button>\n <button class=\"ui-button ui-button--ghost\" type=\"button\">Reset</button>\n </div>\n</form>"
451
+ }
452
+ ]
453
+ }
454
+ ],
455
+ "customization": [
456
+ {
457
+ "token": "--ui-form-spacing",
458
+ "default": "var(--ui-space-3)",
459
+ "description": "Gap between fields"
460
+ },
461
+ {
462
+ "token": "--ui-form-actions-gap",
463
+ "default": "var(--ui-space-2)",
464
+ "description": "Gap between action buttons"
465
+ },
466
+ {
467
+ "token": "--ui-form-section-spacing",
468
+ "default": "var(--ui-space-4)",
469
+ "description": "Extra spacing between sections"
470
+ },
471
+ {
472
+ "token": "--ui-form-spacing-compact",
473
+ "default": "var(--ui-space-2)",
474
+ "description": "Field gap in compact variant"
475
+ },
476
+ {
477
+ "token": "--ui-form-section-spacing-compact",
478
+ "default": "var(--ui-space-3)",
479
+ "description": "Section gap in compact variant"
480
+ }
481
+ ]
482
+ }
package/src/04-components/forms/form/form.visual.spec.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { resolve } from 'node:path';
2
+ import { expect, test } from '@playwright/test';
3
+ import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
4
+
5
+ const DOCS_PATH = resolve(__dirname, 'form.docs.json');
6
+
7
+ test.describe('form visual regression', () => {
8
+ test('all variations', async ({ page }) => {
9
+ await setupVisualTestFromDocs(page, DOCS_PATH);
10
+ await validateGridRhythm(page, 'form');
11
+ await saveForLostPixel(page, 'form');
12
+ await expect(page.locator('body')).toHaveScreenshot('form.visual.png');
13
+ });
14
+ });
package/src/04-components/forms/form/index.scss ADDED
@@ -0,0 +1,62 @@
1
+ @use '../../../00-config/tokens/variables' as t;
2
+
3
+ // Form - layout container for form fields
4
+ // Provides consistent vertical spacing between fields, sections, and actions
5
+
6
+ @layer components.tokens {
7
+ .form {
8
+ --_spacing: var(--ui-form-spacing, var(--ui-space-3, calc(#{t.$unit} * 3)));
9
+ --_actions-gap: var(--ui-form-actions-gap, var(--ui-space-2, calc(#{t.$unit} * 2)));
10
+ --_section-spacing: var(--ui-form-section-spacing, var(--ui-space-4, calc(#{t.$unit} * 4)));
11
+ }
12
+ }
13
+
14
+ @layer components.styles {
15
+ .form {
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: var(--_spacing);
19
+ }
20
+
21
+ // Grouped area with optional heading
22
+ .form__section {
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: var(--_spacing);
26
+
27
+ padding: 0;
28
+ margin: 0;
29
+
30
+ border: 0;
31
+ }
32
+
33
+ // Spacing between sections is wider than between fields
34
+ .form__section + .form__section {
35
+ padding-block-start: var(--_section-spacing);
36
+ }
37
+
38
+ // Button row at bottom
39
+ .form__actions {
40
+ display: flex;
41
+ flex-wrap: wrap;
42
+ align-items: center;
43
+ gap: var(--_actions-gap);
44
+ }
45
+
46
+ // Compact variant - tighter spacing
47
+ .form--compact {
48
+ --_spacing: var(--ui-form-spacing-compact, var(--ui-space-2, calc(#{t.$unit} * 2)));
49
+ --_section-spacing: var(--ui-form-section-spacing-compact, var(--ui-space-3, calc(#{t.$unit} * 3)));
50
+ }
51
+
52
+ // Inline variant - horizontal layout for short forms (search, filters)
53
+ .form--inline {
54
+ flex-direction: row;
55
+ flex-wrap: wrap;
56
+ align-items: flex-end;
57
+ }
58
+
59
+ .form--inline > .form__actions {
60
+ align-items: flex-end;
61
+ }
62
+ }
package/src/04-components/index.scss CHANGED
@@ -1,10 +1,12 @@
1
1
  @forward './actions/button/index';
2
2
  @forward './actions/button-group/index';
3
+ @forward './actions/close-button/index';
3
4
  @forward './data-display/avatar/index';
4
5
  @forward './data-display/badge/index';
5
6
  @forward './data-display/card/index';
6
7
  @forward './data-display/data-list/index';
7
8
  @forward './data-display/icon/index';
9
+ @forward './data-display/image/index';
8
10
  @forward './data-display/stat/index';
9
11
  @forward './data-display/status/index';
10
12
  @forward './data-display/table/index';
@@ -13,11 +15,14 @@
13
15
  @forward './disclosure/disclosure/index';
14
16
  @forward './feedback/alert/index';
15
17
  @forward './feedback/progress/index';
18
+ @forward './feedback/progress-circle/index';
16
19
  @forward './feedback/skeleton/index';
17
20
  @forward './feedback/spinner/index';
18
21
  @forward './feedback/toast/index';
19
22
  @forward './forms/checkbox/index';
20
23
  @forward './forms/field/index';
24
+ @forward './forms/fieldset/index';
25
+ @forward './forms/form/index';
21
26
  @forward './forms/form-error/index';
22
27
  @forward './forms/form-helper/index';
23
28
  @forward './forms/input/index';
@@ -41,7 +46,9 @@
41
46
  @forward './overlays/tooltip/index';
42
47
  @forward './typography/blockquote/index';
43
48
  @forward './typography/code/index';
49
+ @forward './typography/code-block/index';
44
50
  @forward './typography/heading/index';
45
51
  @forward './typography/kbd/index';
46
52
  @forward './typography/link/index';
53
+ @forward './typography/list/index';
47
54
  @forward './typography/mark/index';
package/src/04-components/typography/code-block/code-block.api.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "name": "code-block",
3
+ "element": "pre",
4
+ "modifiers": {
5
+ "compact": {
6
+ "type": "boolean"
7
+ },
8
+ "line-numbers": {
9
+ "type": "boolean"
10
+ }
11
+ },
12
+ "subElements": ["code", "line", "line-number"],
13
+ "relatedComponents": ["code"],
14
+ "cssVars": [
15
+ {
16
+ "name": "--ui-code-block-bg",
17
+ "default": "var(--ui-color-bg-muted)"
18
+ },
19
+ {
20
+ "name": "--ui-code-block-color",
21
+ "default": "var(--ui-color-text)"
22
+ },
23
+ {
24
+ "name": "--ui-code-block-border-color",
25
+ "default": "var(--ui-color-border)"
26
+ },
27
+ {
28
+ "name": "--ui-code-block-padding",
29
+ "default": "var(--ui-space-3)"
30
+ },
31
+ {
32
+ "name": "--ui-code-block-font-size",
33
+ "default": "var(--ui-font-size-sm)"
34
+ },
35
+ {
36
+ "name": "--ui-code-block-line-height",
37
+ "default": "var(--ui-leading-tight-sm)"
38
+ },
39
+ {
40
+ "name": "--ui-code-block-radius",
41
+ "default": "var(--ui-radius-md)"
42
+ },
43
+ {
44
+ "name": "--ui-code-block-padding-compact",
45
+ "default": "var(--ui-space-1)"
46
+ },
47
+ {
48
+ "name": "--ui-code-block-line-number-color",
49
+ "default": "var(--ui-color-text-muted)"
50
+ },
51
+ {
52
+ "name": "--ui-code-block-line-number-border-color",
53
+ "default": "var(--ui-color-border)"
54
+ }
55
+ ]
56
+ }