npm - @unpunnyfuns/swatchbook-blocks - Versions diffs - 0.16.0 → 0.18.0 - Mend

@unpunnyfuns/swatchbook-blocks 0.16.0 → 0.18.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 (5) hide show

package/dist/style.css CHANGED Viewed

@@ -173,6 +173,10 @@
   min-width: 200px;
 }
+.sb-color-table__th--expand {
+  width: 28px;
+}
 .sb-color-table__row {
   cursor: pointer;
 }
@@ -182,12 +186,20 @@
   outline-offset: -2px;
 }
+.sb-color-table__row--expanded {
+  background: var(--swatchbook-surface-muted, #8080800f);
+}
 .sb-color-table__td {
   border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
   vertical-align: middle;
   padding: 8px 12px;
 }
+.sb-color-table__row--expanded > .sb-color-table__td {
+  border-bottom: 0;
+}
 .sb-color-table__path {
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -199,20 +211,44 @@
   display: inline-block;
 }
+.sb-color-table__variant-pills {
+  vertical-align: middle;
+  gap: 4px;
+  margin-left: 8px;
+  display: inline-flex;
+}
 .sb-color-table__variant-pill {
   letter-spacing: .5px;
   text-transform: uppercase;
   background: var(--swatchbook-surface-muted, #80808026);
   color: var(--swatchbook-text-muted, CanvasText);
-  vertical-align: middle;
+  cursor: pointer;
+  border: 0;
   border-radius: 4px;
-  margin-left: 6px;
+  margin: 0;
   padding: 1px 6px;
   font-family: inherit;
   font-size: 10px;
+  transition: background-color .12s, color .12s;
   display: inline-block;
 }
+.sb-color-table__variant-pill:hover {
+  background: var(--swatchbook-surface-raised, #80808040);
+  color: var(--swatchbook-text-default, CanvasText);
+}
+.sb-color-table__variant-pill:focus-visible {
+  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline-offset: 1px;
+}
+.sb-color-table__variant-pill--active, .sb-color-table__variant-pill--active:hover {
+  background: var(--swatchbook-accent-bg, #1d4ed8);
+  color: var(--swatchbook-accent-fg, white);
+}
 .sb-color-table__swatch-cell {
   width: 32px;
 }
@@ -277,6 +313,113 @@
   opacity: .4;
 }
+.sb-color-table__expand-cell {
+  text-align: center;
+  width: 28px;
+  color: var(--swatchbook-text-muted, CanvasText);
+}
+.sb-color-table__chevron {
+  transition: transform .12s;
+  display: inline-block;
+}
+.sb-color-table__chevron--expanded {
+  transform: rotate(90deg);
+}
+.sb-color-table__detail-row {
+  background: var(--swatchbook-surface-muted, #8080800f);
+}
+.sb-color-table__detail-cell {
+  padding: 12px 16px 20px;
+}
+.sb-color-table__detail {
+  color: var(--swatchbook-text-default, CanvasText);
+  flex-direction: column;
+  gap: 10px;
+  font-size: 12px;
+  display: flex;
+}
+.sb-color-table__description {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.sb-color-table__chain {
+  color: var(--swatchbook-text-muted, CanvasText);
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+.sb-color-table__detail-label {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  margin-right: 4px;
+  font-family: inherit;
+  font-size: 10px;
+}
+.sb-color-table__detail-empty {
+  color: var(--swatchbook-text-muted, CanvasText);
+  margin: 0;
+  font-style: italic;
+}
+.sb-color-table__variant-grid {
+  margin-top: 4px;
+}
+.sb-color-table__variant-grid-header {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--swatchbook-text-muted, CanvasText);
+  margin-bottom: 6px;
+  font-size: 10px;
+}
+.sb-color-table__subtable {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+.sb-color-table__subth {
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--swatchbook-text-muted, CanvasText);
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  padding: 4px 8px;
+  font-family: inherit;
+  font-size: 10px;
+}
+.sb-color-table__subtd {
+  border-bottom: 1px solid var(--swatchbook-border-default, #8080801a);
+  vertical-align: middle;
+  padding: 4px 8px;
+}
+.sb-color-table__subtd--path {
+  color: var(--swatchbook-text-muted, CanvasText);
+}
+.sb-color-table__subrow--active {
+  background: var(--swatchbook-surface-raised, #8080801f);
+}
+.sb-color-table__subrow--active > .sb-color-table__subtd {
+  color: var(--swatchbook-text-default, CanvasText);
+  font-weight: 600;
+}
 .sb-color-table__sr-only {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -338,462 +481,315 @@
 .sb-copy-button--copied {
   color: var(--swatchbook-accent-default, Highlight);
 }
-.sb-detail-overlay__backdrop {
-  z-index: 10000;
-  background: #0006;
-  justify-content: flex-end;
-  align-items: stretch;
+.sb-diagnostics__summary {
+  cursor: pointer;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+  font-weight: 600;
+  list-style: none;
   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-diagnostics__summary--ok {
+  color: #30a46c;
 }
-.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-diagnostics__summary--error {
+  color: #d64545;
 }
-.sb-token-detail {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  padding: 16px;
+.sb-diagnostics__summary--warn {
+  color: #b08900;
 }
-.sb-token-detail__heading {
-  margin: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 16px;
+.sb-diagnostics__list {
+  flex-direction: column;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
 }
-.sb-token-detail__subline {
-  opacity: .8;
-  align-items: center;
-  gap: 8px;
-  margin: 4px 0 12px;
+.sb-diagnostics__row {
+  border-top: 1px solid var(--swatchbook-border-default, #80808026);
+  grid-template-columns: 60px 1fr;
+  gap: 12px;
+  padding: 8px 4px;
   font-size: 12px;
-  display: flex;
+  display: grid;
 }
-.sb-token-detail__type-pill {
+.sb-diagnostics__label {
   letter-spacing: .5px;
-  text-transform: uppercase;
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 4px;
-  padding: 2px 6px;
   font-size: 10px;
-  display: inline-block;
+  font-weight: 600;
 }
-.sb-token-detail__description {
-  opacity: .85;
-  margin: 0 0 12px;
+.sb-diagnostics__label--error {
+  color: #d64545;
 }
-.sb-token-detail__section-header {
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  opacity: .6;
-  margin: 12px 0 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+.sb-diagnostics__label--warn {
+  color: #b08900;
 }
-.sb-token-detail__chain {
-  flex-wrap: wrap;
+.sb-diagnostics__meta {
+  color: var(--swatchbook-text-muted, CanvasText);
+  opacity: .7;
+  margin-top: 4px;
+  font-size: 11px;
+}
+.sb-dimension-scale__row {
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  grid-template-columns: minmax(160px, 220px) 1fr auto;
   align-items: center;
-  gap: 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  display: flex;
+  gap: 16px;
+  padding: 10px 0;
+  display: grid;
 }
-.sb-token-detail__chain-node {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 4px;
-  padding: 2px 6px;
+.sb-dimension-scale__meta {
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  display: flex;
 }
-.sb-token-detail__arrow {
-  opacity: .5;
+.sb-dimension-scale__path {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  overflow: hidden;
 }
-.sb-token-detail__theme-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  font-size: 12px;
+.sb-dimension-scale__specs {
+  opacity: .7;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-token-detail__theme-row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+.sb-dimension-scale__visual-cell {
+  align-items: center;
+  min-width: 0;
+  display: flex;
 }
-.sb-token-detail__theme-cell {
-  vertical-align: middle;
-  padding: 6px 8px;
+.sb-dimension-scale__css-var {
+  opacity: .7;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-token-detail__swatch {
-  vertical-align: middle;
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 3px;
-  width: 14px;
-  height: 14px;
-  margin-right: 6px;
-  display: inline-block;
-}
-.sb-token-detail__snippet {
-  background: var(--swatchbook-surface-muted, #80808026);
-  white-space: pre;
-  border-radius: 4px;
-  flex: 1;
-  min-width: 0;
-  padding: 8px 10px;
+.sb-dimension-scale__cap {
+  opacity: .6;
+  margin-left: 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  display: block;
-  overflow: auto;
-}
-.sb-token-detail__snippet-row {
-  align-items: center;
-  gap: 8px;
-  display: flex;
-}
-.sb-token-detail__missing {
-  opacity: .7;
-  padding: 12px;
-}
-.sb-token-detail__typography-sample {
-  padding: 8px 0;
-}
-.sb-token-detail__shadow-sample {
-  background: var(--swatchbook-surface-raised, Canvas);
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
-  width: 140px;
-  height: 56px;
-}
-.sb-token-detail__border-sample {
-  background: var(--swatchbook-surface-raised, Canvas);
-  border-radius: 6px;
-  width: 140px;
-  height: 56px;
-}
-.sb-token-detail__gradient-sample {
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
-  width: 220px;
-  height: 56px;
+  font-size: 10px;
 }
-.sb-token-detail__stroke-style-line {
-  border-top-width: 4px;
-  border-top-color: var(--swatchbook-text-default, CanvasText);
-  width: 220px;
-  height: 0;
+.sb-font-family-sample__row {
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  grid-template-columns: minmax(160px, 220px) 1fr auto;
+  align-items: baseline;
+  gap: 16px;
+  padding: 14px 0;
+  display: grid;
 }
-.sb-token-detail__stroke-style-svg {
-  width: 220px;
-  height: 24px;
-  color: var(--swatchbook-text-default, CanvasText);
+.sb-font-family-sample__meta {
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  display: flex;
 }
-.sb-token-detail__stroke-style-fallback {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-font-family-sample__path {
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
-}
-.sb-token-detail__color-swatch-row {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 6px;
-  gap: 1px;
-  width: 220px;
-  height: 56px;
-  display: flex;
   overflow: hidden;
 }
-.sb-token-detail__color-swatch-light {
-  flex: 1;
-  box-shadow: inset 0 0 0 8px #ffffffe6;
+.sb-font-family-sample__stack {
+  color: var(--swatchbook-text-muted, CanvasText);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-token-detail__color-swatch-dark {
-  flex: 1;
-  box-shadow: inset 0 0 0 8px #111111e6;
+.sb-font-family-sample__sample {
+  font-size: 22px;
+  line-height: 1.2;
 }
-.sb-token-detail__breakdown-section {
-  grid-template-columns: auto 1fr;
-  gap: 3px 12px;
-  margin-top: 6px;
+.sb-font-family-sample__css-var {
+  color: var(--swatchbook-text-muted, CanvasText);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  display: grid;
+  font-size: 11px;
 }
-.sb-token-detail__breakdown-key {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-font-weight-scale__row {
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  grid-template-columns: minmax(160px, 220px) 1fr auto;
+  align-items: baseline;
+  gap: 16px;
+  padding: 12px 0;
+  display: grid;
 }
-.sb-token-detail__breakdown-value {
+.sb-font-weight-scale__meta {
   flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
-.sb-token-detail__breakdown-alias {
-  opacity: .8;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  display: flex;
-}
-.sb-token-detail__breakdown-alias-step {
-  align-items: center;
-  gap: 4px;
-  display: inline-flex;
+.sb-font-weight-scale__path {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  overflow: hidden;
 }
-.sb-token-detail__breakdown-layer-header {
-  text-transform: uppercase;
-  letter-spacing: .5px;
+.sb-font-weight-scale__value {
   color: var(--swatchbook-text-muted, CanvasText);
-  grid-column: 1 / -1;
-  margin-top: 4px;
-  font-size: 10px;
-}
-.sb-token-detail__font-family-sample {
-  padding: 4px 0;
-  font-size: 22px;
-  line-height: 1.2;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-token-detail__font-weight-sample {
-  padding: 4px 0;
-  font-size: 32px;
+.sb-font-weight-scale__sample {
+  font-size: 28px;
   line-height: 1;
 }
-.sb-token-detail__dimension-track {
-  align-items: center;
-  max-width: 100%;
-  height: 32px;
-  display: flex;
-  overflow: hidden;
-}
-.sb-token-detail__dimension-bar {
-  background: var(--swatchbook-accent-bg, #3b82f6);
-  border-radius: 3px;
-  max-width: 100%;
-  height: 16px;
+.sb-font-weight-scale__css-var {
+  color: var(--swatchbook-text-muted, CanvasText);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-token-detail__motion-track {
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 16px;
-  width: 100%;
-  max-width: 320px;
-  height: 32px;
-  position: relative;
-  overflow: hidden;
+.sb-gradient-palette__row {
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  grid-template-columns: minmax(180px, 240px) 1fr minmax(140px, 220px);
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+  display: grid;
 }
-.sb-token-detail__motion-ball {
-  background: var(--swatchbook-accent-bg, #3b82f6);
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  margin-top: -12px;
-  position: absolute;
-  top: 50%;
+.sb-gradient-palette__meta {
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  display: flex;
 }
-.sb-token-detail__aliased-by-list {
-  margin: 0;
-  padding: 0;
+.sb-gradient-palette__path {
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
-  list-style: none;
-}
-.sb-token-detail__aliased-by-row {
-  align-items: center;
-  gap: 6px;
-  padding: 2px 0;
-  display: flex;
+  overflow: hidden;
 }
-.sb-token-detail__aliased-by-truncated {
-  opacity: .6;
-  margin-top: 4px;
+.sb-gradient-palette__css-var {
+  opacity: .7;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
-  font-style: italic;
 }
-.sb-token-detail__reduced-motion {
-  color: var(--swatchbook-text-muted, CanvasText);
-  font-size: 11px;
-  font-style: italic;
+.sb-gradient-palette__sample {
+  border: 1px solid var(--swatchbook-border-default, #80808026);
+  border-radius: 6px;
+  height: 56px;
 }
-.sb-token-detail__tuple-indicator {
-  opacity: .7;
-  margin: 0 0 6px;
+.sb-gradient-palette__stops {
+  flex-direction: column;
+  gap: 2px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
+  display: flex;
 }
-.sb-token-detail__consumer-row {
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 4px;
+.sb-gradient-palette__stop-row {
   align-items: center;
   gap: 8px;
-  margin-bottom: 4px;
-  padding: 6px 10px;
   display: flex;
 }
-.sb-token-detail__consumer-row-label {
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  opacity: .6;
-  flex-shrink: 0;
-  min-width: 32px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
-}
-.sb-token-detail__consumer-row-value {
-  white-space: nowrap;
-  flex: 1;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  overflow: auto;
+.sb-gradient-palette__stop-swatch {
+  border: 1px solid var(--swatchbook-border-default, #80808033);
+  border-radius: 2px;
+  flex: none;
+  width: 10px;
+  height: 10px;
 }
-.sb-token-detail__consumer-row-copy {
-  background: var(--swatchbook-surface-raised, Canvas);
-  color: var(--swatchbook-text-default, CanvasText);
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  cursor: pointer;
-  border-radius: 4px;
-  flex-shrink: 0;
-  padding: 3px 8px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+.sb-gradient-palette__stop-position {
+  opacity: .6;
 }
-.sb-diagnostics__summary {
-  cursor: pointer;
+.sb-motion-preview__controls {
   align-items: center;
   gap: 8px;
-  padding: 4px 0;
-  font-size: 13px;
-  font-weight: 600;
-  list-style: none;
-  display: flex;
-}
-.sb-diagnostics__summary--ok {
-  color: #30a46c;
-}
-.sb-diagnostics__summary--error {
-  color: #d64545;
-}
-.sb-diagnostics__summary--warn {
-  color: #b08900;
-}
-.sb-diagnostics__list {
-  flex-direction: column;
-  margin: 8px 0 0;
-  padding: 0;
-  list-style: none;
+  padding: 8px 0 12px;
   display: flex;
 }
-.sb-diagnostics__row {
-  border-top: 1px solid var(--swatchbook-border-default, #80808026);
-  grid-template-columns: 60px 1fr;
-  gap: 12px;
-  padding: 8px 4px;
-  font-size: 12px;
-  display: grid;
-}
-.sb-diagnostics__label {
+.sb-motion-preview__control-label {
+  color: var(--swatchbook-text-muted, CanvasText);
+  text-transform: uppercase;
   letter-spacing: .5px;
-  font-size: 10px;
-  font-weight: 600;
+  font-size: 11px;
 }
-.sb-diagnostics__label--error {
-  color: #d64545;
+.sb-motion-preview__speed-btn {
+  color: inherit;
+  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  cursor: pointer;
+  background: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-diagnostics__label--warn {
-  color: #b08900;
+.sb-motion-preview__speed-btn--active {
+  background: var(--swatchbook-accent-bg, #3b82f6);
+  color: var(--swatchbook-accent-fg, #fff);
+  border-color: #0000;
 }
-.sb-diagnostics__meta {
-  color: var(--swatchbook-text-muted, CanvasText);
-  opacity: .7;
-  margin-top: 4px;
+.sb-motion-preview__replay-btn {
+  color: inherit;
+  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  cursor: pointer;
+  background: none;
+  border-radius: 4px;
+  margin-left: auto;
+  padding: 4px 10px;
   font-size: 11px;
 }
-.sb-dimension-scale__row {
+.sb-motion-preview__row {
   border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(160px, 220px) 1fr auto;
+  grid-template-columns: minmax(180px, 240px) 1fr auto;
   align-items: center;
   gap: 16px;
-  padding: 10px 0;
+  padding: 14px 0;
   display: grid;
 }
-.sb-dimension-scale__meta {
+.sb-motion-preview__meta {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   display: flex;
 }
-.sb-dimension-scale__path {
+.sb-motion-preview__path {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -801,48 +797,35 @@
   overflow: hidden;
 }
-.sb-dimension-scale__specs {
-  opacity: .7;
+.sb-motion-preview__specs {
+  color: var(--swatchbook-text-muted, CanvasText);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
-.sb-dimension-scale__visual-cell {
-  align-items: center;
-  min-width: 0;
-  display: flex;
-}
-.sb-dimension-scale__css-var {
-  opacity: .7;
+.sb-motion-preview__css-var {
+  color: var(--swatchbook-text-muted, CanvasText);
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
-.sb-dimension-scale__cap {
-  opacity: .6;
-  margin-left: 6px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
-}
-.sb-font-family-sample__row {
+.sb-shadow-preview__row {
   border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(160px, 220px) 1fr auto;
-  align-items: baseline;
+  grid-template-columns: minmax(160px, 220px) 140px 1fr;
+  align-items: center;
   gap: 16px;
-  padding: 14px 0;
+  padding: 16px 0;
   display: grid;
 }
-.sb-font-family-sample__meta {
+.sb-shadow-preview__meta {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   display: flex;
 }
-.sb-font-family-sample__path {
+.sb-shadow-preview__path {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -850,39 +833,63 @@
   overflow: hidden;
 }
-.sb-font-family-sample__stack {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-shadow-preview__css-var {
+  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
-.sb-font-family-sample__sample {
-  font-size: 22px;
-  line-height: 1.2;
+.sb-shadow-preview__sample-cell {
+  justify-content: center;
+  align-items: center;
+  height: 96px;
+  display: flex;
 }
-.sb-font-family-sample__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-shadow-preview__breakdown {
+  grid-template-columns: auto 1fr;
+  gap: 2px 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
+  display: grid;
 }
-.sb-font-weight-scale__row {
+.sb-shadow-preview__breakdown-key {
+  color: var(--swatchbook-text-muted, CanvasText);
+}
+.sb-shadow-preview__layer {
+  grid-column: 1 / -1;
+}
+.sb-shadow-preview__layer-header {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--swatchbook-text-muted, CanvasText);
+  margin-top: 6px;
+  font-size: 10px;
+}
+.sb-shadow-preview__layer-breakdown {
+  margin-top: 2px;
+}
+.sb-stroke-style-sample__row {
   border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
   grid-template-columns: minmax(160px, 220px) 1fr auto;
-  align-items: baseline;
+  align-items: center;
   gap: 16px;
-  padding: 12px 0;
+  padding: 14px 0;
   display: grid;
 }
-.sb-font-weight-scale__meta {
+.sb-stroke-style-sample__meta {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
   display: flex;
 }
-.sb-font-weight-scale__path {
+.sb-stroke-style-sample__path {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -890,264 +897,365 @@
   overflow: hidden;
 }
-.sb-font-weight-scale__value {
+.sb-stroke-style-sample__value {
   color: var(--swatchbook-text-muted, CanvasText);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
-.sb-font-weight-scale__sample {
-  font-size: 28px;
-  line-height: 1;
+.sb-stroke-style-sample__line {
+  border-top-width: 4px;
+  border-top-color: var(--swatchbook-text-default, CanvasText);
+  width: 100%;
+  height: 0;
 }
-.sb-font-weight-scale__css-var {
+.sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
   color: var(--swatchbook-text-muted, CanvasText);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
-.sb-gradient-palette__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(180px, 240px) 1fr minmax(140px, 220px);
-  align-items: center;
-  gap: 16px;
-  padding: 16px 0;
-  display: grid;
+.sb-token-detail {
+  border: 1px solid var(--swatchbook-border-default, #80808033);
+  padding: 16px;
 }
-.sb-gradient-palette__meta {
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  display: flex;
+.sb-token-detail__heading {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 16px;
 }
-.sb-gradient-palette__path {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+.sb-token-detail__subline {
+  opacity: .8;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0 12px;
   font-size: 12px;
-  overflow: hidden;
+  display: flex;
 }
-.sb-gradient-palette__css-var {
-  opacity: .7;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+.sb-token-detail__type-pill {
+  letter-spacing: .5px;
+  text-transform: uppercase;
+  background: var(--swatchbook-surface-muted, #80808026);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
+  display: inline-block;
 }
-.sb-gradient-palette__sample {
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
-  height: 56px;
+.sb-token-detail__description {
+  opacity: .85;
+  margin: 0 0 12px;
 }
-.sb-gradient-palette__stops {
-  flex-direction: column;
-  gap: 2px;
+.sb-token-detail__section-header {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  opacity: .6;
+  margin: 12px 0 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
-  display: flex;
 }
-.sb-gradient-palette__stop-row {
+.sb-token-detail__chain {
+  flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
   display: flex;
 }
-.sb-gradient-palette__stop-swatch {
+.sb-token-detail__chain-node {
   border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 2px;
-  flex: none;
-  width: 10px;
-  height: 10px;
+  border-radius: 4px;
+  padding: 2px 6px;
 }
-.sb-gradient-palette__stop-position {
-  opacity: .6;
+.sb-token-detail__arrow {
+  opacity: .5;
 }
-.sb-motion-preview__controls {
+.sb-token-detail__theme-table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  font-size: 12px;
+}
+.sb-token-detail__theme-row {
+  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+}
+.sb-token-detail__theme-cell {
+  vertical-align: middle;
+  padding: 6px 8px;
+}
+.sb-token-detail__swatch {
+  vertical-align: middle;
+  border: 1px solid var(--swatchbook-border-default, #80808033);
+  border-radius: 3px;
+  width: 14px;
+  height: 14px;
+  margin-right: 6px;
+  display: inline-block;
+}
+.sb-token-detail__snippet {
+  background: var(--swatchbook-surface-muted, #80808026);
+  white-space: pre;
+  border-radius: 4px;
+  flex: 1;
+  min-width: 0;
+  padding: 8px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  display: block;
+  overflow: auto;
+}
+.sb-token-detail__snippet-row {
   align-items: center;
   gap: 8px;
-  padding: 8px 0 12px;
   display: flex;
 }
-.sb-motion-preview__control-label {
-  color: var(--swatchbook-text-muted, CanvasText);
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  font-size: 11px;
+.sb-token-detail__missing {
+  opacity: .7;
+  padding: 12px;
 }
-.sb-motion-preview__speed-btn {
-  color: inherit;
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  cursor: pointer;
-  background: none;
-  border-radius: 4px;
-  padding: 4px 8px;
+.sb-token-detail__typography-sample {
+  padding: 8px 0;
+}
+.sb-token-detail__shadow-sample {
+  background: var(--swatchbook-surface-raised, Canvas);
+  border: 1px solid var(--swatchbook-border-default, #80808026);
+  border-radius: 6px;
+  width: 140px;
+  height: 56px;
+}
+.sb-token-detail__border-sample {
+  background: var(--swatchbook-surface-raised, Canvas);
+  border-radius: 6px;
+  width: 140px;
+  height: 56px;
+}
+.sb-token-detail__gradient-sample {
+  border: 1px solid var(--swatchbook-border-default, #80808026);
+  border-radius: 6px;
+  width: 220px;
+  height: 56px;
+}
+.sb-token-detail__stroke-style-line {
+  border-top-width: 4px;
+  border-top-color: var(--swatchbook-text-default, CanvasText);
+  width: 220px;
+  height: 0;
+}
+.sb-token-detail__stroke-style-svg {
+  width: 220px;
+  height: 24px;
+  color: var(--swatchbook-text-default, CanvasText);
+}
+.sb-token-detail__stroke-style-fallback {
+  color: var(--swatchbook-text-muted, CanvasText);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: 12px;
 }
-.sb-motion-preview__speed-btn--active {
-  background: var(--swatchbook-accent-bg, #3b82f6);
-  color: var(--swatchbook-accent-fg, #fff);
-  border-color: #0000;
+.sb-token-detail__color-swatch-row {
+  border: 1px solid var(--swatchbook-border-default, #80808033);
+  border-radius: 6px;
+  gap: 1px;
+  width: 220px;
+  height: 56px;
+  display: flex;
+  overflow: hidden;
+}
+.sb-token-detail__color-swatch-light {
+  flex: 1;
+  box-shadow: inset 0 0 0 8px #ffffffe6;
 }
-.sb-motion-preview__replay-btn {
-  color: inherit;
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  cursor: pointer;
-  background: none;
-  border-radius: 4px;
-  margin-left: auto;
-  padding: 4px 10px;
-  font-size: 11px;
+.sb-token-detail__color-swatch-dark {
+  flex: 1;
+  box-shadow: inset 0 0 0 8px #111111e6;
 }
-.sb-motion-preview__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(180px, 240px) 1fr auto;
-  align-items: center;
-  gap: 16px;
-  padding: 14px 0;
+.sb-token-detail__breakdown-section {
+  grid-template-columns: auto 1fr;
+  gap: 3px 12px;
+  margin-top: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
   display: grid;
 }
-.sb-motion-preview__meta {
+.sb-token-detail__breakdown-key {
+  color: var(--swatchbook-text-muted, CanvasText);
+}
+.sb-token-detail__breakdown-value {
   flex-direction: column;
-  gap: 2px;
+  align-items: flex-start;
+  gap: 4px;
   min-width: 0;
   display: flex;
 }
-.sb-motion-preview__path {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  overflow: hidden;
+.sb-token-detail__breakdown-alias {
+  opacity: .8;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  display: flex;
 }
-.sb-motion-preview__specs {
-  color: var(--swatchbook-text-muted, CanvasText);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+.sb-token-detail__breakdown-alias-step {
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
 }
-.sb-motion-preview__css-var {
+.sb-token-detail__breakdown-layer-header {
+  text-transform: uppercase;
+  letter-spacing: .5px;
   color: var(--swatchbook-text-muted, CanvasText);
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  grid-column: 1 / -1;
+  margin-top: 4px;
+  font-size: 10px;
 }
-.sb-shadow-preview__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(160px, 220px) 140px 1fr;
-  align-items: center;
-  gap: 16px;
-  padding: 16px 0;
-  display: grid;
+.sb-token-detail__font-family-sample {
+  padding: 4px 0;
+  font-size: 22px;
+  line-height: 1.2;
 }
-.sb-shadow-preview__meta {
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+.sb-token-detail__font-weight-sample {
+  padding: 4px 0;
+  font-size: 32px;
+  line-height: 1;
+}
+.sb-token-detail__dimension-track {
+  align-items: center;
+  max-width: 100%;
+  height: 32px;
   display: flex;
+  overflow: hidden;
 }
-.sb-shadow-preview__path {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+.sb-token-detail__dimension-bar {
+  background: var(--swatchbook-accent-bg, #3b82f6);
+  border-radius: 3px;
+  max-width: 100%;
+  height: 16px;
+}
+.sb-token-detail__motion-track {
+  background: var(--swatchbook-surface-muted, #80808026);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 320px;
+  height: 32px;
+  position: relative;
   overflow: hidden;
 }
-.sb-shadow-preview__css-var {
-  opacity: .7;
+.sb-token-detail__motion-ball {
+  background: var(--swatchbook-accent-bg, #3b82f6);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  position: absolute;
+  top: 50%;
+}
+.sb-token-detail__aliased-by-list {
+  margin: 0;
+  padding: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: 12px;
+  list-style: none;
 }
-.sb-shadow-preview__sample-cell {
-  justify-content: center;
+.sb-token-detail__aliased-by-row {
   align-items: center;
-  height: 96px;
+  gap: 6px;
+  padding: 2px 0;
   display: flex;
 }
-.sb-shadow-preview__breakdown {
-  grid-template-columns: auto 1fr;
-  gap: 2px 12px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+.sb-token-detail__aliased-by-truncated {
+  opacity: .6;
+  margin-top: 4px;
   font-size: 11px;
-  display: grid;
+  font-style: italic;
 }
-.sb-shadow-preview__breakdown-key {
+.sb-token-detail__reduced-motion {
   color: var(--swatchbook-text-muted, CanvasText);
+  font-size: 11px;
+  font-style: italic;
 }
-.sb-shadow-preview__layer {
-  grid-column: 1 / -1;
-}
-.sb-shadow-preview__layer-header {
-  text-transform: uppercase;
-  letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  margin-top: 6px;
-  font-size: 10px;
+.sb-token-detail__tuple-indicator {
+  opacity: .7;
+  margin: 0 0 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
 }
-.sb-shadow-preview__layer-breakdown {
-  margin-top: 2px;
-}
-.sb-stroke-style-sample__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
-  grid-template-columns: minmax(160px, 220px) 1fr auto;
+.sb-token-detail__consumer-row {
+  background: var(--swatchbook-surface-muted, #80808026);
+  border-radius: 4px;
   align-items: center;
-  gap: 16px;
-  padding: 14px 0;
-  display: grid;
-}
-.sb-stroke-style-sample__meta {
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+  gap: 8px;
+  margin-bottom: 4px;
+  padding: 6px 10px;
   display: flex;
 }
-.sb-stroke-style-sample__path {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.sb-token-detail__consumer-row-label {
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  opacity: .6;
+  flex-shrink: 0;
+  min-width: 32px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  overflow: hidden;
+  font-size: 10px;
 }
-.sb-stroke-style-sample__value {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-token-detail__consumer-row-value {
+  white-space: nowrap;
+  flex: 1;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-}
-.sb-stroke-style-sample__line {
-  border-top-width: 4px;
-  border-top-color: var(--swatchbook-text-default, CanvasText);
-  width: 100%;
-  height: 0;
+  font-size: 12px;
+  overflow: auto;
 }
-.sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+.sb-token-detail__consumer-row-copy {
+  background: var(--swatchbook-surface-raised, Canvas);
+  color: var(--swatchbook-text-default, CanvasText);
+  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  cursor: pointer;
+  border-radius: 4px;
+  flex-shrink: 0;
+  padding: 3px 8px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
@@ -1289,6 +1397,41 @@
   margin-left: 8px;
   display: inline-block;
 }
+.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%;