@unpunnyfuns/swatchbook-blocks 0.64.0 → 0.66.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.
package/dist/style.css CHANGED
@@ -304,19 +304,8 @@
304
304
  margin-left: 6px;
305
305
  }
306
306
 
307
- .sb-color-table__alias {
308
- color: var(--swatchbook-text-muted, CanvasText);
307
+ .sb-color-table__refs {
309
308
  white-space: nowrap;
310
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
311
- font-size: 12px;
312
- }
313
-
314
- .sb-color-table__alias-text {
315
- font-style: italic;
316
- }
317
-
318
- .sb-color-table__alias-empty {
319
- opacity: .4;
320
309
  }
321
310
 
322
311
  .sb-color-table__expand-cell {
@@ -444,6 +433,129 @@
444
433
  padding: 16px 12px;
445
434
  font-style: italic;
446
435
  }
436
+
437
+ .sb-color-table__path[data-deprecated="true"] .sb-color-table__path-text {
438
+ opacity: .75;
439
+ text-decoration: line-through light-dark(#92400e, #fbbf24);
440
+ }
441
+ .sb-indicator__indicators {
442
+ min-width: 0;
443
+ color: var(--swatchbook-text-muted, #808080e6);
444
+ align-items: center;
445
+ gap: 8px;
446
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
447
+ font-size: 12px;
448
+ display: inline-flex;
449
+ }
450
+
451
+ .sb-indicator__alias-forward, .sb-indicator__alias-reverse {
452
+ white-space: nowrap;
453
+ text-overflow: ellipsis;
454
+ align-items: center;
455
+ gap: 2px;
456
+ display: inline-flex;
457
+ overflow: hidden;
458
+ }
459
+
460
+ .sb-indicator__alias-arrow {
461
+ color: var(--swatchbook-text-muted, #80808099);
462
+ }
463
+
464
+ .sb-indicator__alias-node {
465
+ font: inherit;
466
+ color: var(--swatchbook-accent-default, LinkText);
467
+ cursor: pointer;
468
+ background: none;
469
+ border: none;
470
+ border-radius: 3px;
471
+ padding: 0 2px;
472
+ }
473
+
474
+ .sb-indicator__alias-node:hover {
475
+ text-decoration: underline;
476
+ }
477
+
478
+ .sb-indicator__alias-node--offview {
479
+ color: var(--swatchbook-text-muted, #80808099);
480
+ cursor: default;
481
+ text-decoration: none;
482
+ }
483
+
484
+ .sb-indicator__variance, .sb-indicator__composes, .sb-indicator__deprecated {
485
+ white-space: nowrap;
486
+ border-radius: 3px;
487
+ align-items: center;
488
+ gap: 2px;
489
+ padding: 0 4px;
490
+ display: inline-flex;
491
+ }
492
+
493
+ .sb-indicator__variance-glyph, .sb-indicator__composes-glyph {
494
+ color: var(--swatchbook-text-muted, #808080b3);
495
+ }
496
+
497
+ .sb-indicator__composes {
498
+ color: var(--swatchbook-text-muted, #808080cc);
499
+ }
500
+
501
+ .sb-indicator__gamut {
502
+ margin-left: 2px;
503
+ }
504
+
505
+ .sb-indicator__deprecated {
506
+ letter-spacing: .04em;
507
+ text-transform: uppercase;
508
+ color: light-dark(#92400e, #fbbf24);
509
+ background: light-dark(#f59e0b26, #f59e0b2e);
510
+ font-size: 9px;
511
+ }
512
+
513
+ .sb-indicator__reverse-wrap {
514
+ display: inline-flex;
515
+ position: relative;
516
+ }
517
+
518
+ .sb-indicator__reverse-menu {
519
+ z-index: 10;
520
+ background: var(--swatchbook-surface-raised, light-dark(#fff, #1a1a1a));
521
+ border: 1px solid var(--swatchbook-border-default, #8080804d);
522
+ border-radius: 6px;
523
+ margin: 2px 0 0;
524
+ padding: 4px;
525
+ list-style: none;
526
+ position: absolute;
527
+ top: 100%;
528
+ right: 0;
529
+ box-shadow: 0 4px 12px #00000026;
530
+ }
531
+
532
+ .sb-indicator__reverse-item {
533
+ width: 100%;
534
+ font: inherit;
535
+ text-align: left;
536
+ white-space: nowrap;
537
+ color: var(--swatchbook-accent-default, LinkText);
538
+ cursor: pointer;
539
+ background: none;
540
+ border: none;
541
+ border-radius: 4px;
542
+ padding: 4px 8px;
543
+ display: block;
544
+ }
545
+
546
+ .sb-indicator__reverse-item:hover:not(:disabled) {
547
+ background: var(--swatchbook-surface-muted, #8080801f);
548
+ }
549
+
550
+ .sb-indicator__reverse-item:disabled {
551
+ color: var(--swatchbook-text-muted, #80808099);
552
+ cursor: default;
553
+ }
554
+
555
+ .sb-indicator__description {
556
+ color: var(--swatchbook-text-muted, #808080cc);
557
+ cursor: help;
558
+ }
447
559
  .sb-copy-button {
448
560
  color: var(--swatchbook-text-muted, CanvasText);
449
561
  font: inherit;
@@ -1530,115 +1642,6 @@
1530
1642
  top: 16px;
1531
1643
  right: 16px;
1532
1644
  }
1533
- .sb-indicator__indicators {
1534
- min-width: 0;
1535
- color: var(--swatchbook-text-muted, #808080e6);
1536
- align-items: center;
1537
- gap: 8px;
1538
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1539
- font-size: 12px;
1540
- display: inline-flex;
1541
- }
1542
-
1543
- .sb-indicator__alias-forward, .sb-indicator__alias-reverse {
1544
- white-space: nowrap;
1545
- text-overflow: ellipsis;
1546
- align-items: center;
1547
- gap: 2px;
1548
- display: inline-flex;
1549
- overflow: hidden;
1550
- }
1551
-
1552
- .sb-indicator__alias-arrow {
1553
- color: var(--swatchbook-text-muted, #80808099);
1554
- }
1555
-
1556
- .sb-indicator__alias-node {
1557
- font: inherit;
1558
- color: var(--swatchbook-accent-default, LinkText);
1559
- cursor: pointer;
1560
- background: none;
1561
- border: none;
1562
- border-radius: 3px;
1563
- padding: 0 2px;
1564
- }
1565
-
1566
- .sb-indicator__alias-node:hover {
1567
- text-decoration: underline;
1568
- }
1569
-
1570
- .sb-indicator__alias-node--offview {
1571
- color: var(--swatchbook-text-muted, #80808099);
1572
- cursor: default;
1573
- text-decoration: none;
1574
- }
1575
-
1576
- .sb-indicator__variance, .sb-indicator__deprecated {
1577
- white-space: nowrap;
1578
- border-radius: 3px;
1579
- align-items: center;
1580
- gap: 2px;
1581
- padding: 0 4px;
1582
- display: inline-flex;
1583
- }
1584
-
1585
- .sb-indicator__variance-glyph {
1586
- color: var(--swatchbook-text-muted, #808080b3);
1587
- }
1588
-
1589
- .sb-indicator__gamut {
1590
- margin-left: 2px;
1591
- }
1592
-
1593
- .sb-indicator__deprecated {
1594
- letter-spacing: .04em;
1595
- text-transform: uppercase;
1596
- color: light-dark(#92400e, #fbbf24);
1597
- background: light-dark(#f59e0b26, #f59e0b2e);
1598
- font-size: 9px;
1599
- }
1600
-
1601
- .sb-indicator__reverse-wrap {
1602
- display: inline-flex;
1603
- position: relative;
1604
- }
1605
-
1606
- .sb-indicator__reverse-menu {
1607
- z-index: 10;
1608
- background: var(--swatchbook-surface-raised, light-dark(#fff, #1a1a1a));
1609
- border: 1px solid var(--swatchbook-border-default, #8080804d);
1610
- border-radius: 6px;
1611
- margin: 2px 0 0;
1612
- padding: 4px;
1613
- list-style: none;
1614
- position: absolute;
1615
- top: 100%;
1616
- right: 0;
1617
- box-shadow: 0 4px 12px #00000026;
1618
- }
1619
-
1620
- .sb-indicator__reverse-item {
1621
- width: 100%;
1622
- font: inherit;
1623
- text-align: left;
1624
- white-space: nowrap;
1625
- color: var(--swatchbook-accent-default, LinkText);
1626
- cursor: pointer;
1627
- background: none;
1628
- border: none;
1629
- border-radius: 4px;
1630
- padding: 4px 8px;
1631
- display: block;
1632
- }
1633
-
1634
- .sb-indicator__reverse-item:hover:not(:disabled) {
1635
- background: var(--swatchbook-surface-muted, #8080801f);
1636
- }
1637
-
1638
- .sb-indicator__reverse-item:disabled {
1639
- color: var(--swatchbook-text-muted, #80808099);
1640
- cursor: default;
1641
- }
1642
1645
  .sb-token-table__table {
1643
1646
  border-collapse: collapse;
1644
1647
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unpunnyfuns/swatchbook-blocks",
3
- "version": "0.64.0",
3
+ "version": "0.66.0",
4
4
  "description": "Storybook MDX doc blocks for DTCG design tokens — TokenTable, ColorPalette, TypographyScale, TokenDetail.",
5
5
  "license": "MIT",
6
6
  "author": "unpunnyfuns <unpunnyfuns@gmail.com>",
@@ -70,7 +70,7 @@
70
70
  "dependencies": {
71
71
  "clsx": "^2.1.1",
72
72
  "colorjs.io": "^0.6.1",
73
- "@unpunnyfuns/swatchbook-core": "0.64.0"
73
+ "@unpunnyfuns/swatchbook-core": "0.66.0"
74
74
  },
75
75
  "scripts": {
76
76
  "build": "tsdown",