@unpunnyfuns/swatchbook-blocks 0.63.0 → 0.64.0

package/dist/style.css

@@ -1491,16 +1491,56 @@
   overflow: hidden;
 }
 
-.sb-token-navigator__indicators {
+.sb-token-navigator__leaf-row[data-deprecated="true"] .sb-token-navigator__tail {
+  opacity: .75;
+  text-decoration: line-through light-dark(#92400e, #fbbf24);
+}
+.sb-detail-overlay__backdrop {
+  z-index: 10000;
+  background: #0006;
+  justify-content: flex-end;
+  align-items: stretch;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.sb-detail-overlay__panel {
+  background: var(--swatchbook-surface-default, Canvas);
+  width: min(560px, 100%);
+  height: 100%;
+  color: var(--swatchbook-text-default, CanvasText);
+  padding: 16px;
+  position: relative;
+  overflow-y: auto;
+  box-shadow: -8px 0 24px #0003;
+}
+
+.sb-detail-overlay__close {
+  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  width: 32px;
+  height: 32px;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border-radius: 4px;
+  font-size: 16px;
+  line-height: 1;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.sb-indicator__indicators {
   min-width: 0;
   color: var(--swatchbook-text-muted, #808080e6);
   align-items: center;
   gap: 8px;
-  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
   display: inline-flex;
 }
 
-.sb-token-navigator__alias-forward, .sb-token-navigator__alias-reverse {
+.sb-indicator__alias-forward, .sb-indicator__alias-reverse {
   white-space: nowrap;
   text-overflow: ellipsis;
   align-items: center;
@@ -1509,13 +1549,13 @@
   overflow: hidden;
 }
 
-.sb-token-navigator__alias-arrow {
+.sb-indicator__alias-arrow {
   color: var(--swatchbook-text-muted, #80808099);
 }
 
-.sb-token-navigator__alias-node {
+.sb-indicator__alias-node {
   font: inherit;
-  color: var(--swatchbook-accent-default, light-dark(#1d4ed8, #93c5fd));
+  color: var(--swatchbook-accent-default, LinkText);
   cursor: pointer;
   background: none;
   border: none;
@@ -1523,17 +1563,17 @@
   padding: 0 2px;
 }
 
-.sb-token-navigator__alias-node:hover {
+.sb-indicator__alias-node:hover {
   text-decoration: underline;
 }
 
-.sb-token-navigator__alias-node--offview {
+.sb-indicator__alias-node--offview {
   color: var(--swatchbook-text-muted, #80808099);
   cursor: default;
   text-decoration: none;
 }
 
-.sb-token-navigator__variance, .sb-token-navigator__deprecated {
+.sb-indicator__variance, .sb-indicator__deprecated {
   white-space: nowrap;
   border-radius: 3px;
   align-items: center;
@@ -1542,15 +1582,15 @@
   display: inline-flex;
 }
 
-.sb-token-navigator__variance-glyph {
+.sb-indicator__variance-glyph {
   color: var(--swatchbook-text-muted, #808080b3);
 }
 
-.sb-token-navigator__gamut {
+.sb-indicator__gamut {
   margin-left: 2px;
 }
 
-.sb-token-navigator__deprecated {
+.sb-indicator__deprecated {
   letter-spacing: .04em;
   text-transform: uppercase;
   color: light-dark(#92400e, #fbbf24);
@@ -1558,17 +1598,12 @@
   font-size: 9px;
 }
 
-.sb-token-navigator__leaf-row[data-deprecated="true"] .sb-token-navigator__tail {
-  opacity: .75;
-  text-decoration: line-through light-dark(#92400e, #fbbf24);
-}
-
-.sb-token-navigator__reverse-wrap {
+.sb-indicator__reverse-wrap {
   display: inline-flex;
   position: relative;
 }
 
-.sb-token-navigator__reverse-menu {
+.sb-indicator__reverse-menu {
   z-index: 10;
   background: var(--swatchbook-surface-raised, light-dark(#fff, #1a1a1a));
   border: 1px solid var(--swatchbook-border-default, #8080804d);
@@ -1582,12 +1617,12 @@
   box-shadow: 0 4px 12px #00000026;
 }
 
-.sb-token-navigator__reverse-item {
+.sb-indicator__reverse-item {
   width: 100%;
   font: inherit;
   text-align: left;
   white-space: nowrap;
-  color: var(--swatchbook-accent-default, light-dark(#1d4ed8, #93c5fd));
+  color: var(--swatchbook-accent-default, LinkText);
   cursor: pointer;
   background: none;
   border: none;
@@ -1596,49 +1631,14 @@
   display: block;
 }
 
-.sb-token-navigator__reverse-item:hover:not(:disabled) {
+.sb-indicator__reverse-item:hover:not(:disabled) {
   background: var(--swatchbook-surface-muted, #8080801f);
 }
 
-.sb-token-navigator__reverse-item:disabled {
+.sb-indicator__reverse-item:disabled {
   color: var(--swatchbook-text-muted, #80808099);
   cursor: default;
 }
-.sb-detail-overlay__backdrop {
-  z-index: 10000;
-  background: #0006;
-  justify-content: flex-end;
-  align-items: stretch;
-  display: flex;
-  position: fixed;
-  inset: 0;
-}
-
-.sb-detail-overlay__panel {
-  background: var(--swatchbook-surface-default, Canvas);
-  width: min(560px, 100%);
-  height: 100%;
-  color: var(--swatchbook-text-default, CanvasText);
-  padding: 16px;
-  position: relative;
-  overflow-y: auto;
-  box-shadow: -8px 0 24px #0003;
-}
-
-.sb-detail-overlay__close {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  width: 32px;
-  height: 32px;
-  color: inherit;
-  cursor: pointer;
-  background: none;
-  border-radius: 4px;
-  font-size: 16px;
-  line-height: 1;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-}
 .sb-token-table__table {
   border-collapse: collapse;
   width: 100%;
@@ -1692,11 +1692,11 @@
 }
 
 .sb-token-table__th--path {
-  min-width: 180px;
+  min-width: 220px;
 }
 
 .sb-token-table__th--value {
-  min-width: 160px;
+  min-width: 200px;
 }
 
 .sb-token-table__row {
@@ -1715,6 +1715,7 @@
 }
 
 .sb-token-table__path {
+  overflow-wrap: break-word;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
 }
@@ -1751,10 +1752,8 @@
 }
 
 .sb-token-table__value-text {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
   min-width: 0;
-  overflow: hidden;
 }
 
 .sb-token-table__gamut-warn {
@@ -1774,6 +1773,15 @@
   opacity: 1;
 }
 
+.sb-token-table__path[data-deprecated="true"] {
+  opacity: .75;
+  text-decoration: line-through light-dark(#92400e, #fbbf24);
+}
+
+.sb-token-table__refs {
+  white-space: nowrap;
+}
+
 .sb-token-table__sr-status {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpunnyfuns/swatchbook-blocks",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "Storybook MDX doc blocks for DTCG design tokens — TokenTable, ColorPalette, TypographyScale, TokenDetail.",
   "license": "MIT",
   "author": "unpunnyfuns <unpunnyfuns@gmail.com>",
@@ -70,7 +70,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "colorjs.io": "^0.6.1",
-    "@unpunnyfuns/swatchbook-core": "0.63.0"
+    "@unpunnyfuns/swatchbook-core": "0.64.0"
   },
   "scripts": {
     "build": "tsdown",