npm - @unpunnyfuns/swatchbook-blocks - Versions diffs - 0.67.0 → 0.68.0 - Mend

@unpunnyfuns/swatchbook-blocks 0.67.0 → 0.68.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

@@ -1,6 +1,6 @@
 .sb-block {
   font-family: var(--swatchbook-body-font-family);
-  font-size: var(--swatchbook-body-font-size);
+  font-size: var(--swatchbook-type-body);
   color: var(--swatchbook-text-default);
   background: var(--swatchbook-surface-default);
   padding: var(--swatchbook-space-md);
@@ -10,7 +10,7 @@
 .sb-block__caption {
   padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
   color: var(--swatchbook-text-muted);
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-block__empty {
@@ -35,17 +35,17 @@
 }
 .sb-border-preview__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-border-preview__css-var {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-border-preview__sample-cell {
@@ -55,28 +55,34 @@
 }
 .sb-border-preview__breakdown {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   column-gap: var(--swatchbook-space-md);
   row-gap: var(--swatchbook-space-3xs);
   grid-template-columns: auto 1fr;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
   display: grid;
 }
 .sb-border-preview__breakdown-key {
   color: var(--swatchbook-text-muted);
 }
+.sb-border-sample {
+  background: var(--swatchbook-surface-raised);
+  border-radius: 6px;
+  width: 120px;
+  height: 56px;
+}
 .sb-color-palette__group {
   margin-bottom: var(--swatchbook-space-xl);
 }
 .sb-color-palette__group-header {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
-  opacity: .6;
+  letter-spacing: var(--swatchbook-tracking-label);
+  opacity: var(--swatchbook-opacity-scrim);
   margin-bottom: var(--swatchbook-space-sm);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
 }
 .sb-color-palette__grid {
@@ -108,13 +114,13 @@
 .sb-color-palette__leaf {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-color-palette__value {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-color-palette__gamut-warn {
@@ -144,8 +150,8 @@
   background: var(--swatchbook-surface-default);
   color: var(--swatchbook-text-default);
   font-family: inherit;
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: var(--swatchbook-type-caption);
+  line-height: var(--swatchbook-leading-normal);
 }
 .sb-color-table__search-input:focus-visible {
@@ -158,18 +164,18 @@
   text-align: left;
   padding: var(--swatchbook-space-sm) 0;
   color: var(--swatchbook-text-muted);
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-color-table__th {
   text-align: left;
   padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
   color: var(--swatchbook-text-muted);
   border-bottom: 1px solid var(--swatchbook-border-default);
   white-space: nowrap;
-  font-size: 11px;
 }
 .sb-color-table__th--swatch {
@@ -208,9 +214,9 @@
 }
 .sb-color-table__path {
-  white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
+  white-space: nowrap;
 }
 .sb-color-table__path-text {
@@ -228,15 +234,15 @@
 .sb-color-table__variant-pill {
   padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
   border-radius: var(--swatchbook-radius-2xs);
-  letter-spacing: .5px;
+  font-family: inherit;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   background: var(--swatchbook-surface-muted);
   color: var(--swatchbook-text-muted);
   cursor: pointer;
   border: 0;
   margin: 0;
-  font-family: inherit;
-  font-size: 10px;
   transition: background-color .12s, color .12s;
   display: inline-block;
 }
@@ -270,9 +276,9 @@
 }
 .sb-color-table__value-cell {
-  white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
+  white-space: nowrap;
 }
 .sb-color-table__value-text {
@@ -334,31 +340,31 @@
 .sb-color-table__detail {
   gap: var(--swatchbook-space-md);
+  font-size: var(--swatchbook-type-caption);
   color: var(--swatchbook-text-default);
   flex-direction: column;
-  font-size: 12px;
   display: flex;
 }
 .sb-color-table__description {
+  font-size: var(--swatchbook-type-caption);
+  line-height: var(--swatchbook-leading-loose);
   margin: 0;
-  font-size: 13px;
-  line-height: 1.5;
 }
 .sb-color-table__chain {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   color: var(--swatchbook-text-muted);
   margin: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
 }
 .sb-color-table__detail-label {
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
+  font-size: var(--swatchbook-type-micro);
   margin-right: var(--swatchbook-space-2xs);
   font-family: inherit;
-  font-size: 10px;
 }
 .sb-color-table__detail-empty {
@@ -373,28 +379,28 @@
 .sb-color-table__variant-grid-header {
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
   margin-bottom: var(--swatchbook-space-xs);
-  font-size: 10px;
 }
 .sb-color-table__subtable {
   border-collapse: collapse;
   width: 100%;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
 }
 .sb-color-table__subth {
   text-align: left;
   padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
+  font-family: inherit;
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
   color: var(--swatchbook-text-muted);
   border-bottom: 1px solid var(--swatchbook-border-default);
-  font-family: inherit;
-  font-size: 10px;
 }
 .sb-color-table__subtd {
@@ -444,9 +450,9 @@
   align-items: center;
   gap: var(--swatchbook-space-sm);
   min-width: 0;
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
+  color: var(--swatchbook-text-muted);
   display: inline-flex;
 }
@@ -501,11 +507,11 @@
 }
 .sb-indicator__deprecated {
-  letter-spacing: .04em;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   color: var(--swatchbook-text-muted);
   background: var(--swatchbook-deprecated-bg);
-  font-size: 9px;
 }
 .sb-indicator__reverse-wrap {
@@ -582,16 +588,16 @@
 .sb-copy-button--icon {
   width: 20px;
   height: 20px;
-  font-size: 13px;
-  line-height: 1;
+  font-size: var(--swatchbook-type-caption);
+  line-height: var(--swatchbook-leading-none);
 }
 .sb-copy-button--text {
   padding: var(--swatchbook-space-3xs) var(--swatchbook-space-sm);
-  letter-spacing: .5px;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   border: 1px solid var(--swatchbook-border-default);
-  font-size: 11px;
 }
 .sb-copy-button--copied {
@@ -613,8 +619,8 @@
   align-items: center;
   gap: var(--swatchbook-space-sm);
   padding: var(--swatchbook-space-2xs) 0;
+  font-size: var(--swatchbook-type-caption);
   cursor: pointer;
-  font-size: 13px;
   font-weight: 600;
   list-style: none;
   display: flex;
@@ -644,14 +650,14 @@
   gap: var(--swatchbook-space-md);
   padding: var(--swatchbook-space-sm) var(--swatchbook-space-2xs);
   border-top: 1px solid var(--swatchbook-border-default);
+  font-size: var(--swatchbook-type-caption);
   grid-template-columns: 60px 1fr;
-  font-size: 12px;
   display: grid;
 }
 .sb-diagnostics__label {
-  letter-spacing: .5px;
-  font-size: 10px;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   font-weight: 600;
 }
@@ -666,8 +672,8 @@
 .sb-diagnostics__meta {
   margin-top: var(--swatchbook-space-2xs);
   color: var(--swatchbook-text-muted);
-  opacity: .7;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-dimension-scale__row {
   gap: var(--swatchbook-space-lg);
@@ -686,17 +692,17 @@
 }
 .sb-dimension-scale__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-dimension-scale__specs {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-dimension-scale__visual-cell {
@@ -706,10 +712,46 @@
 }
 .sb-dimension-scale__css-var {
-  opacity: .7;
-  white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
+  white-space: nowrap;
+}
+.sb-dimension-bar {
+  align-items: center;
+  gap: var(--swatchbook-space-3xs);
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+}
+.sb-dimension-bar__cap {
+  color: var(--swatchbook-text-muted);
+  font-size: var(--swatchbook-type-micro);
+  line-height: var(--swatchbook-leading-none);
+  user-select: none;
+}
+.sb-dimension-bar__bar {
+  background: var(--swatchbook-accent-bg);
+  border-radius: 2px;
+  min-width: 1px;
+  max-width: 100%;
+  height: 14px;
+}
+.sb-dimension-bar__radius-sample {
+  background: var(--swatchbook-accent-bg);
+  border: 1px solid var(--swatchbook-border-default);
+  width: 56px;
+  height: 56px;
+}
+.sb-dimension-bar__size-sample {
+  background: var(--swatchbook-accent-bg);
+  border: 1px solid var(--swatchbook-border-default);
+  min-width: 1px;
+  min-height: 1px;
 }
 .sb-font-family-sample__row {
   gap: var(--swatchbook-space-lg);
@@ -728,28 +770,28 @@
 }
 .sb-font-family-sample__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-font-family-sample__stack {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-font-family-sample__sample {
-  font-size: 22px;
-  line-height: 1.2;
+  font-size: var(--swatchbook-type-sample);
+  line-height: var(--swatchbook-leading-tight);
 }
 .sb-font-family-sample__css-var {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-font-weight-scale__row {
   gap: var(--swatchbook-space-lg);
@@ -768,28 +810,28 @@
 }
 .sb-font-weight-scale__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-font-weight-scale__value {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-font-weight-scale__sample {
-  font-size: 28px;
-  line-height: 1;
+  font-size: var(--swatchbook-type-sample-lg);
+  line-height: var(--swatchbook-leading-none);
 }
 .sb-font-weight-scale__css-var {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-gradient-palette__row {
   gap: var(--swatchbook-space-lg);
@@ -808,17 +850,17 @@
 }
 .sb-gradient-palette__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-gradient-palette__css-var {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-gradient-palette__sample {
@@ -828,10 +870,10 @@
 }
 .sb-gradient-palette__stops {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
   display: flex;
 }
@@ -850,7 +892,7 @@
 }
 .sb-gradient-palette__stop-position {
-  opacity: .6;
+  opacity: var(--swatchbook-opacity-scrim);
 }
 .sb-motion-preview__controls {
   align-items: center;
@@ -860,21 +902,21 @@
 }
 .sb-motion-preview__control-label {
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
   text-transform: uppercase;
-  letter-spacing: .5px;
-  font-size: 11px;
+  letter-spacing: var(--swatchbook-tracking-label);
 }
 .sb-motion-preview__speed-btn {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
   color: inherit;
   border: 1px solid var(--swatchbook-border-default);
   border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
   background: none;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
 }
 .sb-motion-preview__speed-btn--active {
@@ -884,6 +926,7 @@
 }
 .sb-motion-preview__replay-btn {
+  font-size: var(--swatchbook-type-micro);
   padding: var(--swatchbook-space-2xs) var(--swatchbook-space-md);
   color: inherit;
   border: 1px solid var(--swatchbook-border-default);
@@ -891,7 +934,6 @@
   cursor: pointer;
   background: none;
   margin-left: auto;
-  font-size: 11px;
 }
 .sb-motion-preview__row {
@@ -911,24 +953,55 @@
 }
 .sb-motion-preview__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-motion-preview__specs {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-motion-preview__css-var {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+}
+.sb-motion-sample__track {
+  background: var(--swatchbook-surface-muted);
+  border-radius: 18px;
+  height: 36px;
+  position: relative;
+  overflow: hidden;
+}
+.sb-motion-sample__ball {
+  background: var(--swatchbook-accent-bg);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  margin-top: -14px;
+  position: absolute;
+  top: 50%;
+}
+.sb-motion-sample__ball--start {
+  left: 4px;
+}
+.sb-motion-sample__ball--end {
+  left: calc(100% - 32px);
+}
+.sb-motion-sample__reduced-motion {
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+  font-style: italic;
 }
 .sb-opacity-scale__grid {
   gap: var(--swatchbook-space-md);
@@ -971,25 +1044,24 @@
 .sb-opacity-scale__path {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-opacity-scale__value, .sb-opacity-scale__css-var {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 :root {
-  --swatchbook-border-default: #e5e7eb;
+  --swatchbook-border-default: #e2e8f0;
   --swatchbook-surface-default: #fff;
-  --swatchbook-surface-muted: #f4f4f5;
+  --swatchbook-surface-muted: #f8fafc;
   --swatchbook-surface-raised: #fff;
-  --swatchbook-text-default: #111827;
-  --swatchbook-text-muted: #4b5563;
+  --swatchbook-text-default: #0f172a;
+  --swatchbook-text-muted: #475569;
   --swatchbook-accent-bg: #1d4ed8;
   --swatchbook-accent-fg: #fff;
   --swatchbook-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --swatchbook-body-font-size: 14px;
 }
 :root {
   --swatchbook-status-success: color-mix(in oklab, #30a46c, var(--swatchbook-text-default) 35%);
@@ -999,24 +1071,43 @@
   --swatchbook-deprecated-bg: #f59e0b26;
 }
 :root {
-  --swatchbook-space-none: 0;
-  --swatchbook-space-3xs: 2px;
-  --swatchbook-space-2xs: 4px;
-  --swatchbook-space-xs: 6px;
-  --swatchbook-space-sm: 8px;
-  --swatchbook-space-md: 12px;
-  --swatchbook-space-lg: 16px;
-  --swatchbook-space-xl: 24px;
-  --swatchbook-space-2xl: 40px;
-  --swatchbook-space-3xl: 64px;
-  --swatchbook-radius-3xs: 2px;
   --swatchbook-radius-2xs: 4px;
-  --swatchbook-radius-xs: 6px;
-  --swatchbook-radius-sm: 8px;
-  --swatchbook-radius-md: 12px;
+  --swatchbook-radius-3xs: 2px;
   --swatchbook-radius-lg: 16px;
-  --swatchbook-radius-xl: 24px;
+  --swatchbook-radius-md: 12px;
+  --swatchbook-radius-none: 0;
   --swatchbook-radius-pill: 9999px;
+  --swatchbook-radius-sm: 8px;
+  --swatchbook-radius-xl: 24px;
+  --swatchbook-radius-xs: 6px;
+  --swatchbook-space-2xl: 40px;
+  --swatchbook-space-2xs: 4px;
+  --swatchbook-space-3xl: 64px;
+  --swatchbook-space-3xs: 2px;
+  --swatchbook-space-lg: 16px;
+  --swatchbook-space-md: 12px;
+  --swatchbook-space-none: 0;
+  --swatchbook-space-sm: 8px;
+  --swatchbook-space-xl: 24px;
+  --swatchbook-space-xs: 6px;
+}
+:root {
+  --swatchbook-leading-loose: 1.5;
+  --swatchbook-leading-none: 1;
+  --swatchbook-leading-normal: 1.4;
+  --swatchbook-leading-tight: 1.2;
+  --swatchbook-opacity-disabled: .4;
+  --swatchbook-opacity-muted: .7;
+  --swatchbook-opacity-scrim: .6;
+  --swatchbook-tracking-label: .5px;
+  --swatchbook-type-body: 1rem;
+  --swatchbook-type-caption: .75rem;
+  --swatchbook-type-heading: 1.25rem;
+  --swatchbook-type-micro: .6875rem;
+  --swatchbook-type-sample-lg: 1.75rem;
+  --swatchbook-type-sample-xl: 2rem;
+  --swatchbook-type-sample: 1.5rem;
+  --swatchbook-type-small: .875rem;
 }
 .sb-shadow-preview__row {
   gap: var(--swatchbook-space-lg);
@@ -1035,17 +1126,17 @@
 }
 .sb-shadow-preview__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-shadow-preview__css-var {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-shadow-preview__sample-cell {
@@ -1056,11 +1147,11 @@
 }
 .sb-shadow-preview__breakdown {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   column-gap: var(--swatchbook-space-md);
   row-gap: var(--swatchbook-space-3xs);
   grid-template-columns: auto 1fr;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
   display: grid;
 }
@@ -1073,16 +1164,23 @@
 }
 .sb-shadow-preview__layer-header {
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
   color: var(--swatchbook-text-muted);
   margin-top: var(--swatchbook-space-xs);
-  font-size: 10px;
 }
 .sb-shadow-preview__layer-breakdown {
   margin-top: var(--swatchbook-space-3xs);
 }
+.sb-shadow-sample {
+  background: var(--swatchbook-surface-raised);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: 6px;
+  width: 120px;
+  height: 56px;
+}
 .sb-stroke-style-sample__row {
   gap: var(--swatchbook-space-lg);
   padding: var(--swatchbook-space-lg) 0;
@@ -1100,17 +1198,17 @@
 }
 .sb-stroke-style-sample__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: hidden;
 }
 .sb-stroke-style-sample__value {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-stroke-style-sample__line {
@@ -1121,9 +1219,9 @@
 }
 .sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
 }
 .sb-token-detail {
   padding: var(--swatchbook-space-lg);
@@ -1131,27 +1229,27 @@
 }
 .sb-token-detail__heading {
-  margin: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 16px;
+  font-size: var(--swatchbook-type-heading);
+  margin: 0;
 }
 .sb-token-detail__subline {
   align-items: center;
   gap: var(--swatchbook-space-sm);
   margin: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
+  font-size: var(--swatchbook-type-caption);
   opacity: .8;
-  font-size: 12px;
   display: flex;
 }
 .sb-token-detail__type-pill {
   padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
   border-radius: var(--swatchbook-radius-2xs);
-  letter-spacing: .5px;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   background: var(--swatchbook-surface-muted);
-  font-size: 10px;
   display: inline-block;
 }
@@ -1161,20 +1259,20 @@
 }
 .sb-token-detail__section-header {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
-  opacity: .6;
+  letter-spacing: var(--swatchbook-tracking-label);
+  opacity: var(--swatchbook-opacity-scrim);
   margin: var(--swatchbook-space-md) 0 var(--swatchbook-space-xs);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
 }
 .sb-token-detail__chain {
   gap: var(--swatchbook-space-xs);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   flex-wrap: wrap;
   align-items: center;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   display: flex;
 }
@@ -1192,7 +1290,7 @@
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-token-detail__theme-row {
@@ -1218,11 +1316,11 @@
   padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
   border-radius: var(--swatchbook-radius-2xs);
   background: var(--swatchbook-surface-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   white-space: pre;
   flex: 1;
   min-width: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   display: block;
   overflow: auto;
 }
@@ -1235,7 +1333,7 @@
 .sb-token-detail__missing {
   padding: var(--swatchbook-space-md);
-  opacity: .7;
+  opacity: var(--swatchbook-opacity-muted);
 }
 .sb-token-detail__typography-sample {
@@ -1278,9 +1376,9 @@
 }
 .sb-token-detail__stroke-style-fallback {
-  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
+  color: var(--swatchbook-text-muted);
 }
 .sb-token-detail__color-swatch-row {
@@ -1304,12 +1402,12 @@
 }
 .sb-token-detail__breakdown-section {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   column-gap: var(--swatchbook-space-md);
   row-gap: var(--swatchbook-space-2xs);
   margin-top: var(--swatchbook-space-xs);
   grid-template-columns: auto 1fr;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   display: grid;
 }
@@ -1328,9 +1426,9 @@
 .sb-token-detail__breakdown-alias {
   align-items: center;
   gap: var(--swatchbook-space-2xs);
+  font-size: var(--swatchbook-type-micro);
   opacity: .8;
   flex-wrap: wrap;
-  font-size: 11px;
   display: flex;
 }
@@ -1341,24 +1439,24 @@
 }
 .sb-token-detail__breakdown-layer-header {
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
   color: var(--swatchbook-text-muted);
   margin-top: var(--swatchbook-space-2xs);
   grid-column: 1 / -1;
-  font-size: 10px;
 }
 .sb-token-detail__font-family-sample {
   padding: var(--swatchbook-space-2xs) 0;
-  font-size: 22px;
-  line-height: 1.2;
+  font-size: var(--swatchbook-type-sample);
+  line-height: var(--swatchbook-leading-tight);
 }
 .sb-token-detail__font-weight-sample {
   padding: var(--swatchbook-space-2xs) 0;
-  font-size: 32px;
-  line-height: 1;
+  font-size: var(--swatchbook-type-sample-xl);
+  line-height: var(--swatchbook-leading-none);
 }
 .sb-token-detail__dimension-track {
@@ -1396,11 +1494,19 @@
   top: 50%;
 }
+.sb-token-detail__motion-ball--start {
+  left: 4px;
+}
+.sb-token-detail__motion-ball--end {
+  left: calc(100% - 28px);
+}
 .sb-token-detail__aliased-by-list {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   margin: 0;
   padding: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   list-style: none;
 }
@@ -1412,23 +1518,27 @@
 }
 .sb-token-detail__aliased-by-truncated {
-  opacity: .6;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-scrim);
   margin-top: var(--swatchbook-space-2xs);
-  font-size: 11px;
   font-style: italic;
 }
+.sb-token-detail__aliased-by-truncated--axis-note {
+  margin-top: var(--swatchbook-space-xs);
+}
 .sb-token-detail__reduced-motion {
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
-  font-size: 11px;
   font-style: italic;
 }
 .sb-token-detail__tuple-indicator {
-  opacity: .7;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
   margin: 0 0 var(--swatchbook-space-xs);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
 }
 .sb-token-detail__consumer-row {
@@ -1442,25 +1552,26 @@
 }
 .sb-token-detail__consumer-row-label {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
-  opacity: .6;
+  letter-spacing: var(--swatchbook-tracking-label);
+  opacity: var(--swatchbook-opacity-scrim);
   flex-shrink: 0;
   min-width: 32px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
 }
 .sb-token-detail__consumer-row-value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
   white-space: nowrap;
   flex: 1;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
   overflow: auto;
 }
 .sb-token-detail__consumer-row-copy {
   padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
+  font-size: var(--swatchbook-type-micro);
   background: var(--swatchbook-surface-raised);
   color: var(--swatchbook-text-default);
   border: 1px solid var(--swatchbook-border-default);
@@ -1468,16 +1579,37 @@
   cursor: pointer;
   flex-shrink: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
 }
 .sb-token-detail__deprecated {
   margin: var(--swatchbook-space-xs) 0;
   padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
   border-radius: var(--swatchbook-radius-xs);
+  font-size: var(--swatchbook-type-caption);
   color: var(--swatchbook-text-muted);
   background: var(--swatchbook-deprecated-bg);
-  font-size: 12px;
+}
+.sb-token-detail__out-of-gamut-icon {
+  margin-left: var(--swatchbook-space-xs);
+}
+.sb-token-detail__theme-cell--label {
+  width: 30%;
+}
+.sb-token-detail__theme-cell--header {
+  text-align: left;
+  opacity: var(--swatchbook-opacity-muted);
+}
+.sb-token-detail__constant-label-note {
+  opacity: var(--swatchbook-opacity-scrim);
+  margin-left: var(--swatchbook-space-sm);
+}
+.sb-token-detail__shadow-layer {
+  display: contents;
 }
 .sb-token-navigator__search {
   padding: 0 0 var(--swatchbook-space-sm);
@@ -1492,8 +1624,8 @@
   background: var(--swatchbook-surface-default);
   color: var(--swatchbook-text-default);
   font-family: inherit;
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: var(--swatchbook-type-caption);
+  line-height: var(--swatchbook-leading-normal);
 }
 .sb-token-navigator__search-input:focus-visible {
@@ -1504,7 +1636,7 @@
 .sb-token-navigator__caption {
   padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
   color: var(--swatchbook-text-muted);
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-token-navigator__tree {
@@ -1528,7 +1660,7 @@
   cursor: pointer;
   user-select: none;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
   display: flex;
 }
@@ -1544,7 +1676,7 @@
   border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
   display: flex;
 }
@@ -1557,34 +1689,34 @@
 .sb-token-navigator__tail {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-token-navigator__type-pill {
   padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
   border-radius: var(--swatchbook-radius-2xs);
-  letter-spacing: .5px;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   background: var(--swatchbook-surface-muted);
-  font-size: 10px;
   display: inline-block;
 }
 .sb-token-navigator__value {
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
   margin-left: auto;
-  font-size: 11px;
   overflow: hidden;
 }
 .sb-token-navigator__count {
+  font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-default);
   margin-left: auto;
-  font-size: 11px;
 }
 .sb-token-navigator__color-swatch {
@@ -1670,9 +1802,9 @@
   height: 32px;
   color: inherit;
   cursor: pointer;
+  font-size: var(--swatchbook-type-heading);
+  line-height: var(--swatchbook-leading-none);
   background: none;
-  font-size: 16px;
-  line-height: 1;
   position: absolute;
 }
 .sb-token-table__table {
@@ -1693,8 +1825,8 @@
   background: var(--swatchbook-surface-default);
   color: var(--swatchbook-text-default);
   font-family: inherit;
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: var(--swatchbook-type-caption);
+  line-height: var(--swatchbook-leading-normal);
 }
 .sb-token-table__search-input:focus-visible {
@@ -1714,17 +1846,17 @@
   text-align: left;
   padding: var(--swatchbook-space-sm) 0;
   color: var(--swatchbook-text-muted);
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-token-table__th {
   text-align: left;
   padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  font-size: var(--swatchbook-type-micro);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: var(--swatchbook-tracking-label);
   color: var(--swatchbook-text-muted);
   border-bottom: 1px solid var(--swatchbook-border-default);
-  font-size: 11px;
 }
 .sb-token-table__th--path {
@@ -1751,9 +1883,9 @@
 }
 .sb-token-table__path {
-  overflow-wrap: break-word;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
+  overflow-wrap: break-word;
 }
 .sb-token-table__value-cell {
@@ -1761,20 +1893,20 @@
   gap: var(--swatchbook-space-sm);
   min-width: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
   display: flex;
 }
 .sb-token-table__type-pill {
   padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
   border-radius: var(--swatchbook-radius-2xs);
-  letter-spacing: .5px;
+  font-size: var(--swatchbook-type-micro);
+  letter-spacing: var(--swatchbook-tracking-label);
   text-transform: uppercase;
   background: var(--swatchbook-surface-muted);
   color: var(--swatchbook-text-muted);
   flex-shrink: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 10px;
   display: inline-block;
 }
@@ -1847,11 +1979,11 @@
 .sb-typography-scale__path {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+  font-size: var(--swatchbook-type-caption);
 }
 .sb-typography-scale__specs {
-  opacity: .7;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
 }