@seedgrid/fe-components 2026.3.3-6 → 2026.3.3-7
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/others/SgPlayground.d.ts.map +1 -1
- package/dist/others/SgPlayground.js +248 -11
- package/dist/sandbox.cjs +93 -42
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA8iCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoctE"}
|
|
@@ -303,6 +303,7 @@ module.exports = processShim;
|
|
|
303
303
|
module.exports.default = processShim;
|
|
304
304
|
`;
|
|
305
305
|
const SANDPACK_FALLBACK_THEME_VARS = {
|
|
306
|
+
// shadcn/ui design tokens (HSL)
|
|
306
307
|
"--background": "0 0% 100%",
|
|
307
308
|
"--foreground": "222.2 84% 4.9%",
|
|
308
309
|
"--primary": "142 76% 36%",
|
|
@@ -315,7 +316,7 @@ const SANDPACK_FALLBACK_THEME_VARS = {
|
|
|
315
316
|
"--destructive-foreground": "0 0% 100%",
|
|
316
317
|
"--border": "214.3 31.8% 91.4%",
|
|
317
318
|
"--input": "214.3 31.8% 91.4%",
|
|
318
|
-
"--ring": "
|
|
319
|
+
"--ring": "142 76% 36%",
|
|
319
320
|
"--muted": "210 40% 96.1%",
|
|
320
321
|
"--muted-foreground": "215.4 16.3% 46.9%",
|
|
321
322
|
"--card": "0 0% 100%",
|
|
@@ -323,13 +324,143 @@ const SANDPACK_FALLBACK_THEME_VARS = {
|
|
|
323
324
|
"--popover": "0 0% 100%",
|
|
324
325
|
"--popover-foreground": "222.2 84% 4.9%",
|
|
325
326
|
"--radius": "0.5rem",
|
|
327
|
+
// SeedGrid neutrals (RGB space-separated)
|
|
328
|
+
"--sg-bg": "255 255 255",
|
|
329
|
+
"--sg-surface": "248 250 252",
|
|
330
|
+
"--sg-muted-surface": "241 245 249",
|
|
331
|
+
"--sg-text": "15 23 42",
|
|
332
|
+
"--sg-muted": "100 116 139",
|
|
333
|
+
"--sg-border": "226 232 240",
|
|
334
|
+
"--sg-ring": "74 222 128",
|
|
335
|
+
"--sg-disabled": "203 213 225",
|
|
336
|
+
"--sg-on-disabled": "148 163 184",
|
|
337
|
+
"--sg-link": "22 163 74",
|
|
338
|
+
"--sg-link-hover": "21 128 61",
|
|
339
|
+
"--sg-radius": "0.5rem",
|
|
340
|
+
// On-color tokens
|
|
341
|
+
"--sg-on-primary": "255 255 255",
|
|
342
|
+
"--sg-on-secondary": "255 255 255",
|
|
343
|
+
"--sg-on-tertiary": "255 255 255",
|
|
344
|
+
"--sg-on-warning": "255 255 255",
|
|
345
|
+
"--sg-on-error": "255 255 255",
|
|
346
|
+
"--sg-on-info": "255 255 255",
|
|
347
|
+
"--sg-on-success": "255 255 255",
|
|
348
|
+
// Primary palette (green)
|
|
349
|
+
"--sg-primary-50": "240 253 244",
|
|
350
|
+
"--sg-primary-100": "220 252 231",
|
|
351
|
+
"--sg-primary-200": "187 247 208",
|
|
352
|
+
"--sg-primary-300": "134 239 172",
|
|
353
|
+
"--sg-primary-400": "74 222 128",
|
|
354
|
+
"--sg-primary-500": "34 197 94",
|
|
326
355
|
"--sg-primary-600": "22 163 74",
|
|
356
|
+
"--sg-primary-700": "21 128 61",
|
|
357
|
+
"--sg-primary-800": "22 101 52",
|
|
358
|
+
"--sg-primary-900": "20 83 45",
|
|
359
|
+
"--sg-primary-hover": "21 128 61",
|
|
360
|
+
"--sg-primary-active": "22 101 52",
|
|
361
|
+
// Secondary palette (zinc)
|
|
362
|
+
"--sg-secondary-50": "250 250 250",
|
|
363
|
+
"--sg-secondary-100": "244 244 245",
|
|
364
|
+
"--sg-secondary-200": "228 228 231",
|
|
365
|
+
"--sg-secondary-300": "212 212 216",
|
|
366
|
+
"--sg-secondary-400": "161 161 170",
|
|
367
|
+
"--sg-secondary-500": "113 113 122",
|
|
327
368
|
"--sg-secondary-600": "82 82 91",
|
|
328
|
-
"--sg-
|
|
329
|
-
"--sg-
|
|
369
|
+
"--sg-secondary-700": "63 63 70",
|
|
370
|
+
"--sg-secondary-800": "39 39 42",
|
|
371
|
+
"--sg-secondary-900": "24 24 27",
|
|
372
|
+
"--sg-secondary-hover": "63 63 70",
|
|
373
|
+
"--sg-secondary-active": "39 39 42",
|
|
374
|
+
// Tertiary palette (teal)
|
|
375
|
+
"--sg-tertiary-50": "240 253 250",
|
|
376
|
+
"--sg-tertiary-100": "204 251 241",
|
|
377
|
+
"--sg-tertiary-200": "153 246 228",
|
|
378
|
+
"--sg-tertiary-300": "94 234 212",
|
|
379
|
+
"--sg-tertiary-400": "45 212 191",
|
|
380
|
+
"--sg-tertiary-500": "20 184 166",
|
|
381
|
+
"--sg-tertiary-600": "13 148 136",
|
|
382
|
+
"--sg-tertiary-700": "15 118 110",
|
|
383
|
+
"--sg-tertiary-800": "17 94 89",
|
|
384
|
+
"--sg-tertiary-900": "19 78 74",
|
|
385
|
+
"--sg-tertiary-hover": "15 118 110",
|
|
386
|
+
"--sg-tertiary-active": "17 94 89",
|
|
387
|
+
// Warning palette (amber)
|
|
388
|
+
"--sg-warning-50": "255 251 235",
|
|
389
|
+
"--sg-warning-100": "254 243 199",
|
|
390
|
+
"--sg-warning-200": "253 230 138",
|
|
391
|
+
"--sg-warning-300": "252 211 77",
|
|
392
|
+
"--sg-warning-400": "251 191 36",
|
|
393
|
+
"--sg-warning-500": "245 158 11",
|
|
330
394
|
"--sg-warning-600": "217 119 6",
|
|
395
|
+
"--sg-warning-700": "180 83 9",
|
|
396
|
+
"--sg-warning-800": "146 64 14",
|
|
397
|
+
"--sg-warning-900": "120 53 15",
|
|
398
|
+
"--sg-warning-hover": "180 83 9",
|
|
399
|
+
"--sg-warning-active": "146 64 14",
|
|
400
|
+
// Error palette (red)
|
|
401
|
+
"--sg-error-50": "254 242 242",
|
|
402
|
+
"--sg-error-100": "254 226 226",
|
|
403
|
+
"--sg-error-200": "254 202 202",
|
|
404
|
+
"--sg-error-300": "252 165 165",
|
|
405
|
+
"--sg-error-400": "248 113 113",
|
|
406
|
+
"--sg-error-500": "239 68 68",
|
|
407
|
+
"--sg-error-600": "220 38 38",
|
|
408
|
+
"--sg-error-700": "185 28 28",
|
|
409
|
+
"--sg-error-800": "153 27 27",
|
|
410
|
+
"--sg-error-900": "127 29 29",
|
|
411
|
+
"--sg-error-hover": "185 28 28",
|
|
412
|
+
"--sg-error-active": "153 27 27",
|
|
413
|
+
// Info palette (sky)
|
|
414
|
+
"--sg-info-50": "240 249 255",
|
|
415
|
+
"--sg-info-100": "224 242 254",
|
|
416
|
+
"--sg-info-200": "186 230 253",
|
|
417
|
+
"--sg-info-300": "125 211 252",
|
|
418
|
+
"--sg-info-400": "56 189 248",
|
|
419
|
+
"--sg-info-500": "14 165 233",
|
|
331
420
|
"--sg-info-600": "2 132 199",
|
|
332
|
-
"--sg-
|
|
421
|
+
"--sg-info-700": "3 105 161",
|
|
422
|
+
"--sg-info-800": "7 89 133",
|
|
423
|
+
"--sg-info-900": "12 74 110",
|
|
424
|
+
"--sg-info-hover": "3 105 161",
|
|
425
|
+
"--sg-info-active": "7 89 133",
|
|
426
|
+
// Success palette (green, same as primary)
|
|
427
|
+
"--sg-success-50": "240 253 244",
|
|
428
|
+
"--sg-success-100": "220 252 231",
|
|
429
|
+
"--sg-success-200": "187 247 208",
|
|
430
|
+
"--sg-success-300": "134 239 172",
|
|
431
|
+
"--sg-success-400": "74 222 128",
|
|
432
|
+
"--sg-success-500": "34 197 94",
|
|
433
|
+
"--sg-success-600": "22 163 74",
|
|
434
|
+
"--sg-success-700": "21 128 61",
|
|
435
|
+
"--sg-success-800": "22 101 52",
|
|
436
|
+
"--sg-success-900": "20 83 45",
|
|
437
|
+
"--sg-success-hover": "21 128 61",
|
|
438
|
+
"--sg-success-active": "22 101 52",
|
|
439
|
+
// Button component vars (green primary default)
|
|
440
|
+
"--sg-btn-bg": "rgb(22 163 74)",
|
|
441
|
+
"--sg-btn-fg": "rgb(255 255 255)",
|
|
442
|
+
"--sg-btn-border": "rgb(22 163 74)",
|
|
443
|
+
"--sg-btn-hover-bg": "rgb(21 128 61)",
|
|
444
|
+
"--sg-btn-hover-fg": "rgb(255 255 255)",
|
|
445
|
+
"--sg-btn-hover-border": "rgb(21 128 61)",
|
|
446
|
+
"--sg-btn-active-bg": "rgb(22 101 52)",
|
|
447
|
+
"--sg-btn-ring": "rgb(74 222 128 / 0.4)",
|
|
448
|
+
"--sg-btn-tint": "22 163 74",
|
|
449
|
+
// Avatar component vars
|
|
450
|
+
"--sg-avatar-bg": "rgb(22 163 74)",
|
|
451
|
+
"--sg-avatar-fg": "rgb(255 255 255)",
|
|
452
|
+
"--sg-avatar-border": "transparent",
|
|
453
|
+
"--sg-avatar-ring": "rgb(74 222 128)",
|
|
454
|
+
// Badge component vars
|
|
455
|
+
"--sg-badge-bg": "rgb(240 253 244)",
|
|
456
|
+
"--sg-badge-fg": "rgb(22 163 74)",
|
|
457
|
+
"--sg-badge-border": "rgb(187 247 208)",
|
|
458
|
+
"--sg-badge-hover-bg": "rgb(220 252 231)",
|
|
459
|
+
"--sg-badge-hover-fg": "rgb(21 128 61)",
|
|
460
|
+
"--sg-badge-hover-border": "rgb(134 239 172)",
|
|
461
|
+
"--sg-badge-ring": "rgb(74 222 128)",
|
|
462
|
+
"--sg-badge-soft-bg": "rgb(240 253 244)",
|
|
463
|
+
"--sg-badge-soft-fg": "rgb(22 163 74)",
|
|
333
464
|
};
|
|
334
465
|
const SANDPACK_CORE_THEME_VARS = [
|
|
335
466
|
"--background",
|
|
@@ -343,7 +474,63 @@ const SANDPACK_CORE_THEME_VARS = [
|
|
|
343
474
|
"--destructive",
|
|
344
475
|
"--destructive-foreground",
|
|
345
476
|
"--border",
|
|
346
|
-
"--
|
|
477
|
+
"--input",
|
|
478
|
+
"--ring",
|
|
479
|
+
"--muted",
|
|
480
|
+
"--muted-foreground",
|
|
481
|
+
"--radius"
|
|
482
|
+
];
|
|
483
|
+
// Explicit list of --sg-* vars to read from host via getPropertyValue().
|
|
484
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
485
|
+
// so we must call getPropertyValue() for each var by name.
|
|
486
|
+
const SANDPACK_SG_VARS = [
|
|
487
|
+
// Neutrals
|
|
488
|
+
"--sg-bg", "--sg-surface", "--sg-muted-surface",
|
|
489
|
+
"--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
|
|
490
|
+
"--sg-disabled", "--sg-on-disabled",
|
|
491
|
+
"--sg-link", "--sg-link-hover",
|
|
492
|
+
"--sg-radius",
|
|
493
|
+
// On-color tokens
|
|
494
|
+
"--sg-on-primary", "--sg-on-secondary", "--sg-on-tertiary",
|
|
495
|
+
"--sg-on-warning", "--sg-on-error", "--sg-on-info", "--sg-on-success",
|
|
496
|
+
// Primary palette
|
|
497
|
+
"--sg-primary-50", "--sg-primary-100", "--sg-primary-200", "--sg-primary-300",
|
|
498
|
+
"--sg-primary-400", "--sg-primary-500", "--sg-primary-600", "--sg-primary-700",
|
|
499
|
+
"--sg-primary-800", "--sg-primary-900", "--sg-primary-hover", "--sg-primary-active",
|
|
500
|
+
// Secondary palette
|
|
501
|
+
"--sg-secondary-50", "--sg-secondary-100", "--sg-secondary-200", "--sg-secondary-300",
|
|
502
|
+
"--sg-secondary-400", "--sg-secondary-500", "--sg-secondary-600", "--sg-secondary-700",
|
|
503
|
+
"--sg-secondary-800", "--sg-secondary-900", "--sg-secondary-hover", "--sg-secondary-active",
|
|
504
|
+
// Tertiary palette
|
|
505
|
+
"--sg-tertiary-50", "--sg-tertiary-100", "--sg-tertiary-200", "--sg-tertiary-300",
|
|
506
|
+
"--sg-tertiary-400", "--sg-tertiary-500", "--sg-tertiary-600", "--sg-tertiary-700",
|
|
507
|
+
"--sg-tertiary-800", "--sg-tertiary-900", "--sg-tertiary-hover", "--sg-tertiary-active",
|
|
508
|
+
// Warning palette
|
|
509
|
+
"--sg-warning-50", "--sg-warning-100", "--sg-warning-200", "--sg-warning-300",
|
|
510
|
+
"--sg-warning-400", "--sg-warning-500", "--sg-warning-600", "--sg-warning-700",
|
|
511
|
+
"--sg-warning-800", "--sg-warning-900", "--sg-warning-hover", "--sg-warning-active",
|
|
512
|
+
// Error palette
|
|
513
|
+
"--sg-error-50", "--sg-error-100", "--sg-error-200", "--sg-error-300",
|
|
514
|
+
"--sg-error-400", "--sg-error-500", "--sg-error-600", "--sg-error-700",
|
|
515
|
+
"--sg-error-800", "--sg-error-900", "--sg-error-hover", "--sg-error-active",
|
|
516
|
+
// Info palette
|
|
517
|
+
"--sg-info-50", "--sg-info-100", "--sg-info-200", "--sg-info-300",
|
|
518
|
+
"--sg-info-400", "--sg-info-500", "--sg-info-600", "--sg-info-700",
|
|
519
|
+
"--sg-info-800", "--sg-info-900", "--sg-info-hover", "--sg-info-active",
|
|
520
|
+
// Success palette
|
|
521
|
+
"--sg-success-50", "--sg-success-100", "--sg-success-200", "--sg-success-300",
|
|
522
|
+
"--sg-success-400", "--sg-success-500", "--sg-success-600", "--sg-success-700",
|
|
523
|
+
"--sg-success-800", "--sg-success-900", "--sg-success-hover", "--sg-success-active",
|
|
524
|
+
// Button component vars
|
|
525
|
+
"--sg-btn-bg", "--sg-btn-fg", "--sg-btn-border",
|
|
526
|
+
"--sg-btn-hover-bg", "--sg-btn-hover-fg", "--sg-btn-hover-border",
|
|
527
|
+
"--sg-btn-active-bg", "--sg-btn-ring", "--sg-btn-tint",
|
|
528
|
+
// Avatar component vars
|
|
529
|
+
"--sg-avatar-bg", "--sg-avatar-fg", "--sg-avatar-border", "--sg-avatar-ring",
|
|
530
|
+
// Badge component vars
|
|
531
|
+
"--sg-badge-bg", "--sg-badge-fg", "--sg-badge-border",
|
|
532
|
+
"--sg-badge-hover-bg", "--sg-badge-hover-fg", "--sg-badge-hover-border",
|
|
533
|
+
"--sg-badge-ring", "--sg-badge-soft-bg", "--sg-badge-soft-fg",
|
|
347
534
|
];
|
|
348
535
|
const SANDPACK_BASE_STYLES_CSS = `* {
|
|
349
536
|
box-sizing: border-box;
|
|
@@ -401,6 +588,23 @@ const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
|
|
|
401
588
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
402
589
|
<title>Document</title>
|
|
403
590
|
<script>
|
|
591
|
+
function sgPalette(name) {
|
|
592
|
+
return {
|
|
593
|
+
50: "rgb(var(--sg-" + name + "-50) / <alpha-value>)",
|
|
594
|
+
100: "rgb(var(--sg-" + name + "-100) / <alpha-value>)",
|
|
595
|
+
200: "rgb(var(--sg-" + name + "-200) / <alpha-value>)",
|
|
596
|
+
300: "rgb(var(--sg-" + name + "-300) / <alpha-value>)",
|
|
597
|
+
400: "rgb(var(--sg-" + name + "-400) / <alpha-value>)",
|
|
598
|
+
500: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
599
|
+
600: "rgb(var(--sg-" + name + "-600) / <alpha-value>)",
|
|
600
|
+
700: "rgb(var(--sg-" + name + "-700) / <alpha-value>)",
|
|
601
|
+
800: "rgb(var(--sg-" + name + "-800) / <alpha-value>)",
|
|
602
|
+
900: "rgb(var(--sg-" + name + "-900) / <alpha-value>)",
|
|
603
|
+
DEFAULT: "rgb(var(--sg-" + name + "-500) / <alpha-value>)",
|
|
604
|
+
hover: "rgb(var(--sg-" + name + "-hover) / <alpha-value>)",
|
|
605
|
+
active: "rgb(var(--sg-" + name + "-active) / <alpha-value>)"
|
|
606
|
+
};
|
|
607
|
+
}
|
|
404
608
|
tailwind = {
|
|
405
609
|
config: {
|
|
406
610
|
theme: {
|
|
@@ -415,12 +619,46 @@ const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
|
|
|
415
619
|
secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
|
|
416
620
|
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
|
|
417
621
|
muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
|
|
418
|
-
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" }
|
|
622
|
+
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
|
|
623
|
+
card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
|
|
624
|
+
popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
|
|
625
|
+
sg: {
|
|
626
|
+
bg: "rgb(var(--sg-bg) / <alpha-value>)",
|
|
627
|
+
surface: "rgb(var(--sg-surface) / <alpha-value>)",
|
|
628
|
+
"muted-surface": "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
629
|
+
border: "rgb(var(--sg-border) / <alpha-value>)",
|
|
630
|
+
ring: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
631
|
+
focus: "rgb(var(--sg-ring) / <alpha-value>)",
|
|
632
|
+
text: "rgb(var(--sg-text) / <alpha-value>)",
|
|
633
|
+
muted: "rgb(var(--sg-muted) / <alpha-value>)",
|
|
634
|
+
disabled: "rgb(var(--sg-disabled) / <alpha-value>)",
|
|
635
|
+
"on-disabled": "rgb(var(--sg-on-disabled) / <alpha-value>)",
|
|
636
|
+
hover: "rgb(var(--sg-primary-50) / <alpha-value>)",
|
|
637
|
+
hover2: "rgb(var(--sg-primary-100) / <alpha-value>)",
|
|
638
|
+
surface2: "rgb(var(--sg-muted-surface) / <alpha-value>)",
|
|
639
|
+
link: "rgb(var(--sg-link) / <alpha-value>)",
|
|
640
|
+
"link-hover": "rgb(var(--sg-link-hover) / <alpha-value>)",
|
|
641
|
+
"on-primary": "rgb(var(--sg-on-primary) / <alpha-value>)",
|
|
642
|
+
"on-secondary": "rgb(var(--sg-on-secondary) / <alpha-value>)",
|
|
643
|
+
"on-tertiary": "rgb(var(--sg-on-tertiary) / <alpha-value>)",
|
|
644
|
+
"on-warning": "rgb(var(--sg-on-warning) / <alpha-value>)",
|
|
645
|
+
"on-error": "rgb(var(--sg-on-error) / <alpha-value>)",
|
|
646
|
+
"on-info": "rgb(var(--sg-on-info) / <alpha-value>)",
|
|
647
|
+
"on-success": "rgb(var(--sg-on-success) / <alpha-value>)",
|
|
648
|
+
primary: sgPalette("primary"),
|
|
649
|
+
secondary: sgPalette("secondary"),
|
|
650
|
+
tertiary: sgPalette("tertiary"),
|
|
651
|
+
warning: sgPalette("warning"),
|
|
652
|
+
error: sgPalette("error"),
|
|
653
|
+
info: sgPalette("info"),
|
|
654
|
+
success: sgPalette("success")
|
|
655
|
+
}
|
|
419
656
|
},
|
|
420
657
|
borderRadius: {
|
|
421
658
|
lg: "var(--radius)",
|
|
422
659
|
md: "calc(var(--radius) - 2px)",
|
|
423
|
-
sm: "calc(var(--radius) - 4px)"
|
|
660
|
+
sm: "calc(var(--radius) - 4px)",
|
|
661
|
+
sg: "var(--sg-radius)"
|
|
424
662
|
}
|
|
425
663
|
}
|
|
426
664
|
}
|
|
@@ -608,10 +846,9 @@ function readThemeVarsFromHost() {
|
|
|
608
846
|
if (value)
|
|
609
847
|
themeVars[varName] = value;
|
|
610
848
|
}
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
continue;
|
|
849
|
+
// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
|
|
850
|
+
// so we explicitly call getPropertyValue() for each known --sg-* var.
|
|
851
|
+
for (const varName of SANDPACK_SG_VARS) {
|
|
615
852
|
const value = computed.getPropertyValue(varName).trim();
|
|
616
853
|
if (value)
|
|
617
854
|
themeVars[varName] = value;
|