@happyvertical/smrt-playground 0.38.23 → 0.38.25

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 (2) hide show
  1. package/dist/svelte/PlaygroundHost.svelte +41 -39
  2. package/package.json +2 -2
package/dist/svelte/PlaygroundHost.svelte CHANGED
@@ -353,15 +353,6 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
353
353
  <style>
354
354
  :global(body) {
355
355
  margin: 0;
356
- font-family:
357
- "IBM Plex Sans",
358
- "Inter",
359
- system-ui,
360
- sans-serif;
361
- background:
362
- radial-gradient(circle at top left, rgba(30, 96, 145, 0.16), transparent 28rem),
363
- linear-gradient(180deg, #f4f7fb 0%, #eef2f8 100%);
364
- color: #0f1722;
365
356
  min-height: 100vh;
366
357
  }
367
358
 
@@ -369,6 +360,9 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
369
360
  display: grid;
370
361
  grid-template-columns: 20rem minmax(0, 1fr);
371
362
  min-height: 100vh;
363
+ background: var(--smrt-color-background);
364
+ color: var(--smrt-color-on-background);
365
+ font-family: var(--smrt-font-family);
372
366
  }
373
367
 
374
368
  .sidebar {
@@ -376,9 +370,9 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
376
370
  align-content: start;
377
371
  gap: 1.25rem;
378
372
  padding: 1.5rem;
379
- background: rgba(7, 15, 26, 0.92);
380
- color: #ecf2ff;
381
- border-right: 1px solid rgba(255, 255, 255, 0.08);
373
+ border-right: 1px solid var(--smrt-color-outline-variant);
374
+ background: var(--smrt-color-surface-container);
375
+ color: var(--smrt-color-on-surface);
382
376
  backdrop-filter: blur(18px);
383
377
  }
384
378
 
@@ -404,7 +398,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
404
398
  font-size: 0.75rem;
405
399
  letter-spacing: 0.12em;
406
400
  text-transform: uppercase;
407
- color: #6aa4ff;
401
+ color: var(--smrt-color-primary);
408
402
  }
409
403
 
410
404
  .sidebar__header p:last-child,
@@ -432,19 +426,24 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
432
426
 
433
427
  .search span {
434
428
  font-size: 0.82rem;
435
- color: rgba(236, 242, 255, 0.72);
429
+ color: var(--smrt-color-on-surface-variant);
436
430
  }
437
431
 
438
432
  .search input {
439
433
  width: 100%;
440
434
  box-sizing: border-box;
441
- border: 1px solid rgba(255, 255, 255, 0.16);
435
+ border: 1px solid var(--smrt-color-outline-variant);
442
436
  border-radius: 0.9rem;
443
- background: rgba(255, 255, 255, 0.08);
444
- color: inherit;
437
+ background: var(--smrt-color-surface-container-lowest);
438
+ color: var(--smrt-color-on-surface);
445
439
  padding: 0.8rem 0.95rem;
446
440
  }
447
441
 
442
+ .search input::placeholder {
443
+ color: var(--smrt-color-on-surface-variant);
444
+ opacity: 0.72;
445
+ }
446
+
448
447
  .module-list button,
449
448
  .entry-list button,
450
449
  .mode-toggle button {
@@ -466,15 +465,16 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
466
465
  }
467
466
 
468
467
  .module-list button {
469
- background: rgba(255, 255, 255, 0.06);
470
- color: inherit;
468
+ background: var(--smrt-color-surface-container-low);
469
+ color: var(--smrt-color-on-surface);
471
470
  border: 1px solid transparent;
472
471
  }
473
472
 
474
473
  .module-list button.selected,
475
474
  .module-list button:hover {
476
- background: rgba(106, 164, 255, 0.14);
477
- border-color: rgba(106, 164, 255, 0.34);
475
+ border-color: var(--smrt-color-primary);
476
+ background: var(--smrt-color-primary-container);
477
+ color: var(--smrt-color-on-primary-container);
478
478
  }
479
479
 
480
480
  .module-list button span,
@@ -494,16 +494,19 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
494
494
  }
495
495
 
496
496
  .entry-list button {
497
- background: rgba(255, 255, 255, 0.72);
498
- border: 1px solid rgba(15, 23, 34, 0.08);
499
- box-shadow: 0 18px 45px rgba(15, 23, 34, 0.05);
497
+ border: 1px solid var(--smrt-color-outline-variant);
498
+ background: var(--smrt-color-surface);
499
+ color: var(--smrt-color-on-surface);
500
+ box-shadow: 0 18px 45px color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent);
500
501
  }
501
502
 
502
503
  .entry-list button.selected,
503
504
  .entry-list button:hover {
504
505
  transform: translateY(-1px);
505
- border-color: rgba(14, 93, 224, 0.25);
506
- box-shadow: 0 18px 45px rgba(14, 93, 224, 0.12);
506
+ border-color: var(--smrt-color-primary);
507
+ background: var(--smrt-color-primary-container);
508
+ color: var(--smrt-color-on-primary-container);
509
+ box-shadow: 0 18px 45px color-mix(in srgb, var(--smrt-color-primary) 14%, transparent);
507
510
  }
508
511
 
509
512
  .mode-pills {
@@ -522,17 +525,18 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
522
525
  }
523
526
 
524
527
  .mode-pills span {
525
- background: rgba(14, 93, 224, 0.08);
526
- color: #0e5de0;
528
+ background: var(--smrt-color-primary-container);
529
+ color: var(--smrt-color-on-primary-container);
527
530
  }
528
531
 
529
532
  .preview-panel,
530
533
  .empty-card {
531
534
  padding: 1.1rem;
532
535
  border-radius: 1.25rem;
533
- background: rgba(255, 255, 255, 0.82);
534
- border: 1px solid rgba(15, 23, 34, 0.08);
535
- box-shadow: 0 24px 60px rgba(15, 23, 34, 0.08);
536
+ border: 1px solid var(--smrt-color-outline-variant);
537
+ background: var(--smrt-color-surface);
538
+ color: var(--smrt-color-on-surface);
539
+ box-shadow: 0 24px 60px color-mix(in srgb, var(--smrt-color-shadow) 8%, transparent);
536
540
  backdrop-filter: blur(18px);
537
541
  }
538
542
 
@@ -549,26 +553,24 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
549
553
  gap: 0.45rem;
550
554
  padding: 0.2rem;
551
555
  border-radius: 999px;
552
- background: #e6edf9;
556
+ background: var(--smrt-color-surface-container-high);
553
557
  }
554
558
 
555
559
  .mode-toggle button {
556
560
  background: transparent;
557
- color: #36527b;
561
+ color: var(--smrt-color-on-surface-variant);
558
562
  }
559
563
 
560
564
  .mode-toggle button.active {
561
- background: #0e5de0;
562
- color: white;
565
+ background: var(--smrt-color-primary);
566
+ color: var(--smrt-color-on-primary);
563
567
  }
564
568
 
565
569
  .preview-stage {
566
570
  padding: 1rem;
567
571
  border-radius: 1rem;
568
- background:
569
- linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 248, 252, 0.94)),
570
- radial-gradient(circle at top, rgba(106, 164, 255, 0.12), transparent 28rem);
571
- border: 1px solid rgba(15, 23, 34, 0.06);
572
+ border: 1px solid var(--smrt-color-outline-variant);
573
+ background: var(--smrt-color-surface-container-lowest);
572
574
  overflow: auto;
573
575
  min-height: 24rem;
574
576
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@happyvertical/smrt-playground",
3
- "version": "0.38.23",
3
+ "version": "0.38.25",
4
4
  "description": "Shared playground discovery, runtime, and host components for SMRT UI packages",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "fast-glob": "3.3.3",
31
31
  "tsx": "^4.23.0",
32
- "@happyvertical/smrt-ui": "0.38.23"
32
+ "@happyvertical/smrt-ui": "0.38.25"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "svelte": "^5.56.4",