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

@unpunnyfuns/swatchbook-blocks 0.66.3 → 0.67.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 (4) hide show

package/dist/style.css CHANGED Viewed

@@ -1,35 +1,35 @@
 .sb-block {
-  font-family: var(--swatchbook-body-font-family, system-ui);
-  font-size: var(--swatchbook-body-font-size, 14px);
-  color: var(--swatchbook-text-default, CanvasText);
-  background: var(--swatchbook-surface-default, Canvas);
-  border-radius: 6px;
-  padding: 12px;
+  font-family: var(--swatchbook-body-font-family);
+  font-size: var(--swatchbook-body-font-size);
+  color: var(--swatchbook-text-default);
+  background: var(--swatchbook-surface-default);
+  padding: var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-xs);
 }
 .sb-block__caption {
-  color: var(--swatchbook-text-muted, CanvasText);
-  padding: 4px 0 12px;
+  padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
+  color: var(--swatchbook-text-muted);
   font-size: 12px;
 }
 .sb-block__empty {
+  padding: var(--swatchbook-space-xl) var(--swatchbook-space-md);
   text-align: center;
-  color: var(--swatchbook-text-muted, CanvasText);
-  padding: 24px 12px;
+  color: var(--swatchbook-text-muted);
 }
 .sb-border-preview__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 140px 1fr;
   align-items: center;
-  gap: 16px;
-  padding: 14px 0;
   display: grid;
 }
 .sb-border-preview__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -55,53 +55,54 @@
 }
 .sb-border-preview__breakdown {
+  column-gap: var(--swatchbook-space-md);
+  row-gap: var(--swatchbook-space-3xs);
   grid-template-columns: auto 1fr;
-  gap: 2px 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   display: grid;
 }
 .sb-border-preview__breakdown-key {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
 }
 .sb-color-palette__group {
-  margin-bottom: 20px;
+  margin-bottom: var(--swatchbook-space-xl);
 }
 .sb-color-palette__group-header {
   text-transform: uppercase;
   letter-spacing: .5px;
   opacity: .6;
-  margin-bottom: 8px;
+  margin-bottom: var(--swatchbook-space-sm);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-color-palette__grid {
+  gap: var(--swatchbook-space-sm);
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 8px;
   display: grid;
 }
 .sb-color-palette__card {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 6px;
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-xs);
   flex-direction: column;
   display: flex;
   overflow: hidden;
 }
 .sb-color-palette__swatch {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   width: 100%;
   height: 56px;
 }
 .sb-color-palette__meta {
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
-  padding: 8px 10px;
   display: flex;
 }
@@ -117,7 +118,7 @@
 }
 .sb-color-palette__gamut-warn {
-  margin-left: 4px;
+  margin-left: var(--swatchbook-space-2xs);
 }
 .sb-color-table__scroll {
   width: 100%;
@@ -131,43 +132,43 @@
 }
 .sb-color-table__search {
-  padding: 0 0 8px;
+  padding: 0 0 var(--swatchbook-space-sm);
 }
 .sb-color-table__search-input {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  background: var(--swatchbook-surface-default, Canvas);
   width: 100%;
   max-width: 360px;
-  color: var(--swatchbook-text-default, CanvasText);
-  border-radius: 4px;
-  padding: 6px 10px;
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
+  background: var(--swatchbook-surface-default);
+  color: var(--swatchbook-text-default);
   font-family: inherit;
   font-size: 13px;
   line-height: 1.4;
 }
 .sb-color-table__search-input:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: 1px;
 }
 .sb-color-table__caption {
   caption-side: top;
   text-align: left;
-  color: var(--swatchbook-text-muted, CanvasText);
-  padding: 8px 0;
+  padding: var(--swatchbook-space-sm) 0;
+  color: var(--swatchbook-text-muted);
   font-size: 12px;
 }
 .sb-color-table__th {
   text-align: left;
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  border-bottom: 1px solid var(--swatchbook-border-default, #8080804d);
+  color: var(--swatchbook-text-muted);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   white-space: nowrap;
-  padding: 8px 12px;
   font-size: 11px;
 }
@@ -188,18 +189,18 @@
 }
 .sb-color-table__row:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: -2px;
 }
 .sb-color-table__row--expanded {
-  background: var(--swatchbook-surface-muted, #8080800f);
+  background: var(--swatchbook-surface-muted);
 }
 .sb-color-table__td {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   vertical-align: middle;
-  padding: 8px 12px;
 }
 .sb-color-table__row--expanded > .sb-color-table__td {
@@ -218,22 +219,22 @@
 }
 .sb-color-table__variant-pills {
+  gap: var(--swatchbook-space-2xs);
+  margin-left: var(--swatchbook-space-sm);
   vertical-align: middle;
-  gap: 4px;
-  margin-left: 8px;
   display: inline-flex;
 }
 .sb-color-table__variant-pill {
+  padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
   letter-spacing: .5px;
   text-transform: uppercase;
-  background: var(--swatchbook-surface-muted, #80808026);
-  color: var(--swatchbook-text-muted, CanvasText);
+  background: var(--swatchbook-surface-muted);
+  color: var(--swatchbook-text-muted);
   cursor: pointer;
   border: 0;
-  border-radius: 4px;
   margin: 0;
-  padding: 1px 6px;
   font-family: inherit;
   font-size: 10px;
   transition: background-color .12s, color .12s;
@@ -241,18 +242,18 @@
 }
 .sb-color-table__variant-pill:hover {
-  background: var(--swatchbook-surface-raised, #80808040);
-  color: var(--swatchbook-text-default, CanvasText);
+  background: var(--swatchbook-surface-raised);
+  color: var(--swatchbook-text-default);
 }
 .sb-color-table__variant-pill:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   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);
+  background: var(--swatchbook-accent-bg);
+  color: var(--swatchbook-accent-fg);
 }
 .sb-color-table__swatch-cell {
@@ -260,9 +261,9 @@
 }
 .sb-color-table__swatch {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
   background-clip: padding-box;
-  border-radius: 4px;
   width: 20px;
   height: 20px;
   display: inline-block;
@@ -283,10 +284,10 @@
 }
 .sb-color-table__copy-wrap {
+  margin-left: var(--swatchbook-space-xs);
   vertical-align: middle;
   opacity: 0;
   align-items: center;
-  margin-left: 6px;
   transition: opacity .12s;
   display: inline-flex;
 }
@@ -301,7 +302,7 @@
 }
 .sb-color-table__gamut-warn {
-  margin-left: 6px;
+  margin-left: var(--swatchbook-space-xs);
 }
 .sb-color-table__refs {
@@ -311,7 +312,7 @@
 .sb-color-table__expand-cell {
   text-align: center;
   width: 28px;
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
 }
 .sb-color-table__chevron {
@@ -324,17 +325,17 @@
 }
 .sb-color-table__detail-row {
-  background: var(--swatchbook-surface-muted, #8080800f);
+  background: var(--swatchbook-surface-muted);
 }
 .sb-color-table__detail-cell {
-  padding: 12px 16px 20px;
+  padding: var(--swatchbook-space-md) var(--swatchbook-space-lg) var(--swatchbook-space-xl);
 }
 .sb-color-table__detail {
-  color: var(--swatchbook-text-default, CanvasText);
+  gap: var(--swatchbook-space-md);
+  color: var(--swatchbook-text-default);
   flex-direction: column;
-  gap: 10px;
   font-size: 12px;
   display: flex;
 }
@@ -346,7 +347,7 @@
 }
 .sb-color-table__chain {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   margin: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
@@ -355,26 +356,26 @@
 .sb-color-table__detail-label {
   text-transform: uppercase;
   letter-spacing: .5px;
-  margin-right: 4px;
+  margin-right: var(--swatchbook-space-2xs);
   font-family: inherit;
   font-size: 10px;
 }
 .sb-color-table__detail-empty {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   margin: 0;
   font-style: italic;
 }
 .sb-color-table__variant-grid {
-  margin-top: 4px;
+  margin-top: var(--swatchbook-space-2xs);
 }
 .sb-color-table__variant-grid-header {
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  margin-bottom: 6px;
+  color: var(--swatchbook-text-muted);
+  margin-bottom: var(--swatchbook-space-xs);
   font-size: 10px;
 }
@@ -387,31 +388,31 @@
 .sb-color-table__subth {
   text-align: left;
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
-  padding: 4px 8px;
+  color: var(--swatchbook-text-muted);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   font-family: inherit;
   font-size: 10px;
 }
 .sb-color-table__subtd {
-  border-bottom: 1px solid var(--swatchbook-border-default, #8080801a);
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   vertical-align: middle;
-  padding: 4px 8px;
 }
 .sb-color-table__subtd--path {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
 }
 .sb-color-table__subrow--active {
-  background: var(--swatchbook-surface-raised, #8080801f);
+  background: var(--swatchbook-surface-raised);
 }
 .sb-color-table__subrow--active > .sb-color-table__subtd {
-  color: var(--swatchbook-text-default, CanvasText);
+  color: var(--swatchbook-text-default);
   font-weight: 600;
 }
@@ -428,47 +429,48 @@
 }
 .sb-color-table__empty-row {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   text-align: center;
-  padding: 16px 12px;
+  padding: var(--swatchbook-space-lg) var(--swatchbook-space-md);
   font-style: italic;
 }
 .sb-color-table__path[data-deprecated="true"] .sb-color-table__path-text {
+  text-decoration: line-through;
+  text-decoration-color: var(--swatchbook-deprecated);
   opacity: .75;
-  text-decoration: line-through light-dark(#92400e, #fbbf24);
 }
 .sb-indicator__indicators {
-  min-width: 0;
-  color: var(--swatchbook-text-muted, #808080e6);
   align-items: center;
-  gap: 8px;
+  gap: var(--swatchbook-space-sm);
+  min-width: 0;
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   display: inline-flex;
 }
 .sb-indicator__alias-forward, .sb-indicator__alias-reverse {
+  align-items: center;
+  gap: var(--swatchbook-space-3xs);
   white-space: nowrap;
   text-overflow: ellipsis;
-  align-items: center;
-  gap: 2px;
   display: inline-flex;
   overflow: hidden;
 }
 .sb-indicator__alias-arrow {
-  color: var(--swatchbook-text-muted, #80808099);
+  color: var(--swatchbook-text-muted);
 }
 .sb-indicator__alias-node {
+  padding: 0 var(--swatchbook-space-3xs);
+  border-radius: var(--swatchbook-radius-2xs);
   font: inherit;
-  color: var(--swatchbook-accent-default, LinkText);
+  color: var(--swatchbook-accent-bg);
   cursor: pointer;
   background: none;
   border: none;
-  border-radius: 3px;
-  padding: 0 2px;
 }
 .sb-indicator__alias-node:hover {
@@ -476,37 +478,33 @@
 }
 .sb-indicator__alias-node--offview {
-  color: var(--swatchbook-text-muted, #80808099);
+  color: var(--swatchbook-text-muted);
   cursor: default;
   text-decoration: none;
 }
 .sb-indicator__variance, .sb-indicator__composes, .sb-indicator__deprecated {
-  white-space: nowrap;
-  border-radius: 3px;
   align-items: center;
-  gap: 2px;
-  padding: 0 4px;
+  gap: var(--swatchbook-space-3xs);
+  padding: 0 var(--swatchbook-space-2xs);
+  border-radius: var(--swatchbook-radius-2xs);
+  white-space: nowrap;
   display: inline-flex;
 }
-.sb-indicator__variance-glyph, .sb-indicator__composes-glyph {
-  color: var(--swatchbook-text-muted, #808080b3);
-}
-.sb-indicator__composes {
-  color: var(--swatchbook-text-muted, #808080cc);
+.sb-indicator__variance-glyph, .sb-indicator__composes-glyph, .sb-indicator__composes {
+  color: var(--swatchbook-text-muted);
 }
 .sb-indicator__gamut {
-  margin-left: 2px;
+  margin-left: var(--swatchbook-space-3xs);
 }
 .sb-indicator__deprecated {
   letter-spacing: .04em;
   text-transform: uppercase;
-  color: light-dark(#92400e, #fbbf24);
-  background: light-dark(#f59e0b26, #f59e0b2e);
+  color: var(--swatchbook-text-muted);
+  background: var(--swatchbook-deprecated-bg);
   font-size: 9px;
 }
@@ -517,11 +515,11 @@
 .sb-indicator__reverse-menu {
   z-index: 10;
-  background: var(--swatchbook-surface-raised, light-dark(#fff, #1a1a1a));
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  border-radius: 6px;
-  margin: 2px 0 0;
-  padding: 4px;
+  margin: var(--swatchbook-space-3xs) 0 0;
+  padding: var(--swatchbook-space-2xs);
+  background: var(--swatchbook-surface-raised);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-xs);
   list-style: none;
   position: absolute;
   top: 100%;
@@ -531,38 +529,38 @@
 .sb-indicator__reverse-item {
   width: 100%;
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
+  border-radius: var(--swatchbook-radius-2xs);
   font: inherit;
   text-align: left;
   white-space: nowrap;
-  color: var(--swatchbook-accent-default, LinkText);
+  color: var(--swatchbook-accent-bg);
   cursor: pointer;
   background: none;
   border: none;
-  border-radius: 4px;
-  padding: 4px 8px;
   display: block;
 }
 .sb-indicator__reverse-item:hover:not(:disabled) {
-  background: var(--swatchbook-surface-muted, #8080801f);
+  background: var(--swatchbook-surface-muted);
 }
 .sb-indicator__reverse-item:disabled {
-  color: var(--swatchbook-text-muted, #80808099);
+  color: var(--swatchbook-text-muted);
   cursor: default;
 }
 .sb-indicator__description {
-  color: var(--swatchbook-text-muted, #808080cc);
+  color: var(--swatchbook-text-muted);
   cursor: help;
 }
 .sb-copy-button {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font: inherit;
   cursor: pointer;
+  border-radius: var(--swatchbook-radius-2xs);
   background: none;
   border: 0;
-  border-radius: 4px;
   justify-content: center;
   align-items: center;
   margin: 0;
@@ -572,12 +570,12 @@
 }
 .sb-copy-button:hover {
-  background: var(--swatchbook-surface-muted, #80808026);
-  color: var(--swatchbook-text-default, CanvasText);
+  background: var(--swatchbook-surface-muted);
+  color: var(--swatchbook-text-default);
 }
 .sb-copy-button:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-default, Highlight);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: 2px;
 }
@@ -589,15 +587,15 @@
 }
 .sb-copy-button--text {
+  padding: var(--swatchbook-space-3xs) var(--swatchbook-space-sm);
   letter-spacing: .5px;
   text-transform: uppercase;
-  border: 1px solid var(--swatchbook-border-default, #80808040);
-  padding: 2px 8px;
+  border: 1px solid var(--swatchbook-border-default);
   font-size: 11px;
 }
 .sb-copy-button--copied {
-  color: var(--swatchbook-accent-default, Highlight);
+  color: var(--swatchbook-accent-bg);
 }
 .sb-copy-button__sr-status {
@@ -612,10 +610,10 @@
   overflow: hidden;
 }
 .sb-diagnostics__summary {
-  cursor: pointer;
   align-items: center;
-  gap: 8px;
-  padding: 4px 0;
+  gap: var(--swatchbook-space-sm);
+  padding: var(--swatchbook-space-2xs) 0;
+  cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   list-style: none;
@@ -623,30 +621,30 @@
 }
 .sb-diagnostics__summary--ok {
-  color: #30a46c;
+  color: var(--swatchbook-status-success);
 }
 .sb-diagnostics__summary--error {
-  color: #d64545;
+  color: var(--swatchbook-status-danger);
 }
 .sb-diagnostics__summary--warn {
-  color: #b08900;
+  color: var(--swatchbook-status-warning);
 }
 .sb-diagnostics__list {
+  margin: var(--swatchbook-space-sm) 0 0;
   flex-direction: column;
-  margin: 8px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
 }
 .sb-diagnostics__row {
-  border-top: 1px solid var(--swatchbook-border-default, #80808026);
+  gap: var(--swatchbook-space-md);
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-2xs);
+  border-top: 1px solid var(--swatchbook-border-default);
   grid-template-columns: 60px 1fr;
-  gap: 12px;
-  padding: 8px 4px;
   font-size: 12px;
   display: grid;
 }
@@ -658,31 +656,31 @@
 }
 .sb-diagnostics__label--error {
-  color: #d64545;
+  color: var(--swatchbook-status-danger);
 }
 .sb-diagnostics__label--warn {
-  color: #b08900;
+  color: var(--swatchbook-status-warning);
 }
 .sb-diagnostics__meta {
-  color: var(--swatchbook-text-muted, CanvasText);
+  margin-top: var(--swatchbook-space-2xs);
+  color: var(--swatchbook-text-muted);
   opacity: .7;
-  margin-top: 4px;
   font-size: 11px;
 }
 .sb-dimension-scale__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-md) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 1fr auto;
   align-items: center;
-  gap: 16px;
-  padding: 10px 0;
   display: grid;
 }
 .sb-dimension-scale__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -713,25 +711,18 @@
   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 {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 1fr auto;
   align-items: baseline;
-  gap: 16px;
-  padding: 14px 0;
   display: grid;
 }
 .sb-font-family-sample__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -745,7 +736,7 @@
 }
 .sb-font-family-sample__stack {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
@@ -756,22 +747,22 @@
 }
 .sb-font-family-sample__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-font-weight-scale__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-md) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 1fr auto;
   align-items: baseline;
-  gap: 16px;
-  padding: 12px 0;
   display: grid;
 }
 .sb-font-weight-scale__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -785,7 +776,7 @@
 }
 .sb-font-weight-scale__value {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
@@ -796,22 +787,22 @@
 }
 .sb-font-weight-scale__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-gradient-palette__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(180px, 240px) 1fr minmax(140px, 220px);
   align-items: center;
-  gap: 16px;
-  padding: 16px 0;
   display: grid;
 }
 .sb-gradient-palette__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -831,14 +822,14 @@
 }
 .sb-gradient-palette__sample {
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
+  border-radius: var(--swatchbook-radius-xs);
+  border: 1px solid var(--swatchbook-border-default);
   height: 56px;
 }
 .sb-gradient-palette__stops {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   display: flex;
@@ -846,13 +837,13 @@
 .sb-gradient-palette__stop-row {
   align-items: center;
-  gap: 8px;
+  gap: var(--swatchbook-space-sm);
   display: flex;
 }
 .sb-gradient-palette__stop-swatch {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 2px;
+  border-radius: var(--swatchbook-radius-3xs);
+  border: 1px solid var(--swatchbook-border-default);
   flex: none;
   width: 10px;
   height: 10px;
@@ -863,58 +854,58 @@
 }
 .sb-motion-preview__controls {
   align-items: center;
-  gap: 8px;
-  padding: 8px 0 12px;
+  gap: var(--swatchbook-space-sm);
+  padding: var(--swatchbook-space-sm) 0 var(--swatchbook-space-md);
   display: flex;
 }
 .sb-motion-preview__control-label {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   text-transform: uppercase;
   letter-spacing: .5px;
   font-size: 11px;
 }
 .sb-motion-preview__speed-btn {
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
   color: inherit;
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
   background: none;
-  border-radius: 4px;
-  padding: 4px 8px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-motion-preview__speed-btn--active {
-  background: var(--swatchbook-accent-bg, #3b82f6);
-  color: var(--swatchbook-accent-fg, #fff);
+  background: var(--swatchbook-accent-bg);
+  color: var(--swatchbook-accent-fg);
   border-color: #0000;
 }
 .sb-motion-preview__replay-btn {
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-md);
   color: inherit;
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
   background: none;
-  border-radius: 4px;
   margin-left: auto;
-  padding: 4px 10px;
   font-size: 11px;
 }
 .sb-motion-preview__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(180px, 240px) 1fr auto;
   align-items: center;
-  gap: 16px;
-  padding: 14px 0;
   display: grid;
 }
 .sb-motion-preview__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -928,33 +919,33 @@
 }
 .sb-motion-preview__specs {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-motion-preview__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-opacity-scale__grid {
+  gap: var(--swatchbook-space-md);
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 12px;
   display: grid;
 }
 .sb-opacity-scale__card {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 6px;
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-xs);
   flex-direction: column;
   display: flex;
   overflow: hidden;
 }
 .sb-opacity-scale__swatch {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   background-color: #fff;
   background-image: linear-gradient(45deg, #00000014 25%, #0000 25%), linear-gradient(-45deg, #00000014 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #00000014 75%), linear-gradient(-45deg, #0000 75%, #00000014 75%);
   background-position: 0 0, 0 6px, 6px -6px, -6px 0;
@@ -965,16 +956,16 @@
 .sb-opacity-scale__swatch:after {
   content: "";
-  background: var(--sb-opacity-scale-color);
-  opacity: var(--sb-opacity-scale-alpha);
+  background: var(--swatchbook-opacity-scale-color);
+  opacity: var(--swatchbook-opacity-scale-alpha);
   position: absolute;
   inset: 0;
 }
 .sb-opacity-scale__meta {
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
-  padding: 8px 10px;
   display: flex;
 }
@@ -988,18 +979,57 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
+:root {
+  --swatchbook-border-default: #e5e7eb;
+  --swatchbook-surface-default: #fff;
+  --swatchbook-surface-muted: #f4f4f5;
+  --swatchbook-surface-raised: #fff;
+  --swatchbook-text-default: #111827;
+  --swatchbook-text-muted: #4b5563;
+  --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%);
+  --swatchbook-status-warning: color-mix(in oklab, #b08900, var(--swatchbook-text-default) 35%);
+  --swatchbook-status-danger: color-mix(in oklab, #d64545, var(--swatchbook-text-default) 35%);
+  --swatchbook-deprecated: #d97706;
+  --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-lg: 16px;
+  --swatchbook-radius-xl: 24px;
+  --swatchbook-radius-pill: 9999px;
+}
 .sb-shadow-preview__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 140px 1fr;
   align-items: center;
-  gap: 16px;
-  padding: 16px 0;
   display: grid;
 }
 .sb-shadow-preview__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -1026,15 +1056,16 @@
 }
 .sb-shadow-preview__breakdown {
+  column-gap: var(--swatchbook-space-md);
+  row-gap: var(--swatchbook-space-3xs);
   grid-template-columns: auto 1fr;
-  gap: 2px 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
   display: grid;
 }
 .sb-shadow-preview__breakdown-key {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
 }
 .sb-shadow-preview__layer {
@@ -1044,26 +1075,26 @@
 .sb-shadow-preview__layer-header {
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  margin-top: 6px;
+  color: var(--swatchbook-text-muted);
+  margin-top: var(--swatchbook-space-xs);
   font-size: 10px;
 }
 .sb-shadow-preview__layer-breakdown {
-  margin-top: 2px;
+  margin-top: var(--swatchbook-space-3xs);
 }
 .sb-stroke-style-sample__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 1fr auto;
   align-items: center;
-  gap: 16px;
-  padding: 14px 0;
   display: grid;
 }
 .sb-stroke-style-sample__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -1077,26 +1108,26 @@
 }
 .sb-stroke-style-sample__value {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   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);
+  border-top-color: var(--swatchbook-text-default);
   width: 100%;
   height: 0;
 }
 .sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-token-detail {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  padding: 16px;
+  padding: var(--swatchbook-space-lg);
+  border: 1px solid var(--swatchbook-border-default);
 }
 .sb-token-detail__heading {
@@ -1106,51 +1137,51 @@
 }
 .sb-token-detail__subline {
-  opacity: .8;
   align-items: center;
-  gap: 8px;
-  margin: 4px 0 12px;
+  gap: var(--swatchbook-space-sm);
+  margin: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
+  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;
   text-transform: uppercase;
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 4px;
-  padding: 2px 6px;
+  background: var(--swatchbook-surface-muted);
   font-size: 10px;
   display: inline-block;
 }
 .sb-token-detail__description {
+  margin: 0 0 var(--swatchbook-space-md);
   opacity: .85;
-  margin: 0 0 12px;
 }
 .sb-token-detail__section-header {
   text-transform: uppercase;
   letter-spacing: .5px;
   opacity: .6;
-  margin: 12px 0 6px;
+  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);
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   display: flex;
 }
 .sb-token-detail__chain-node {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 4px;
-  padding: 2px 6px;
+  padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
 }
 .sb-token-detail__arrow {
@@ -1165,31 +1196,31 @@
 }
 .sb-token-detail__theme-row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  border-bottom: 1px solid var(--swatchbook-border-default);
 }
 .sb-token-detail__theme-cell {
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-sm);
   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;
+  margin-right: var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
   display: inline-block;
 }
 .sb-token-detail__snippet {
-  background: var(--swatchbook-surface-muted, #80808026);
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-2xs);
+  background: var(--swatchbook-surface-muted);
   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;
@@ -1198,44 +1229,44 @@
 .sb-token-detail__snippet-row {
   align-items: center;
-  gap: 8px;
+  gap: var(--swatchbook-space-sm);
   display: flex;
 }
 .sb-token-detail__missing {
+  padding: var(--swatchbook-space-md);
   opacity: .7;
-  padding: 12px;
 }
 .sb-token-detail__typography-sample {
-  padding: 8px 0;
+  padding: var(--swatchbook-space-sm) 0;
 }
 .sb-token-detail__shadow-sample {
-  background: var(--swatchbook-surface-raised, Canvas);
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
+  background: var(--swatchbook-surface-raised);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-xs);
   width: 140px;
   height: 56px;
 }
 .sb-token-detail__border-sample {
-  background: var(--swatchbook-surface-raised, Canvas);
-  border-radius: 6px;
+  background: var(--swatchbook-surface-raised);
+  border-radius: var(--swatchbook-radius-xs);
   width: 140px;
   height: 56px;
 }
 .sb-token-detail__gradient-sample {
-  border: 1px solid var(--swatchbook-border-default, #80808026);
-  border-radius: 6px;
+  border-radius: var(--swatchbook-radius-xs);
+  border: 1px solid var(--swatchbook-border-default);
   width: 220px;
   height: 56px;
 }
 .sb-token-detail__stroke-style-line {
   border-top-width: 4px;
-  border-top-color: var(--swatchbook-text-default, CanvasText);
+  border-top-color: var(--swatchbook-text-default);
   width: 220px;
   height: 0;
 }
@@ -1243,19 +1274,19 @@
 .sb-token-detail__stroke-style-svg {
   width: 220px;
   height: 24px;
-  color: var(--swatchbook-text-default, CanvasText);
+  color: var(--swatchbook-text-default);
 }
 .sb-token-detail__stroke-style-fallback {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   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;
+  gap: var(--swatchbook-space-3xs);
+  border-radius: var(--swatchbook-radius-xs);
+  border: 1px solid var(--swatchbook-border-default);
   width: 220px;
   height: 56px;
   display: flex;
@@ -1273,58 +1304,59 @@
 }
 .sb-token-detail__breakdown-section {
+  column-gap: var(--swatchbook-space-md);
+  row-gap: var(--swatchbook-space-2xs);
+  margin-top: var(--swatchbook-space-xs);
   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-token-detail__breakdown-key {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
 }
 .sb-token-detail__breakdown-value {
-  flex-direction: column;
   align-items: flex-start;
-  gap: 4px;
+  gap: var(--swatchbook-space-2xs);
+  flex-direction: column;
   min-width: 0;
   display: flex;
 }
 .sb-token-detail__breakdown-alias {
+  align-items: center;
+  gap: var(--swatchbook-space-2xs);
   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;
+  gap: var(--swatchbook-space-2xs);
   display: inline-flex;
 }
 .sb-token-detail__breakdown-layer-header {
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
+  margin-top: var(--swatchbook-space-2xs);
   grid-column: 1 / -1;
-  margin-top: 4px;
   font-size: 10px;
 }
 .sb-token-detail__font-family-sample {
-  padding: 4px 0;
+  padding: var(--swatchbook-space-2xs) 0;
   font-size: 22px;
   line-height: 1.2;
 }
 .sb-token-detail__font-weight-sample {
-  padding: 4px 0;
+  padding: var(--swatchbook-space-2xs) 0;
   font-size: 32px;
   line-height: 1;
 }
@@ -1338,15 +1370,15 @@
 }
 .sb-token-detail__dimension-bar {
-  background: var(--swatchbook-accent-bg, #3b82f6);
-  border-radius: 3px;
+  background: var(--swatchbook-accent-bg);
+  border-radius: var(--swatchbook-radius-2xs);
   max-width: 100%;
   height: 16px;
 }
 .sb-token-detail__motion-track {
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 16px;
+  background: var(--swatchbook-surface-muted);
+  border-radius: var(--swatchbook-radius-lg);
   width: 100%;
   max-width: 320px;
   height: 32px;
@@ -1355,7 +1387,7 @@
 }
 .sb-token-detail__motion-ball {
-  background: var(--swatchbook-accent-bg, #3b82f6);
+  background: var(--swatchbook-accent-bg);
   border-radius: 50%;
   width: 24px;
   height: 24px;
@@ -1373,39 +1405,39 @@
 }
 .sb-token-detail__aliased-by-row {
+  padding: var(--swatchbook-space-3xs) 0;
   align-items: center;
-  gap: 6px;
-  padding: 2px 0;
+  gap: var(--swatchbook-space-xs);
   display: flex;
 }
 .sb-token-detail__aliased-by-truncated {
   opacity: .6;
-  margin-top: 4px;
+  margin-top: var(--swatchbook-space-2xs);
   font-size: 11px;
   font-style: italic;
 }
 .sb-token-detail__reduced-motion {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   font-size: 11px;
   font-style: italic;
 }
 .sb-token-detail__tuple-indicator {
   opacity: .7;
-  margin: 0 0 6px;
+  margin: 0 0 var(--swatchbook-space-xs);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-token-detail__consumer-row {
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 4px;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-  padding: 6px 10px;
+  gap: var(--swatchbook-space-sm);
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
+  margin-bottom: var(--swatchbook-space-2xs);
+  border-radius: var(--swatchbook-radius-2xs);
+  background: var(--swatchbook-surface-muted);
   display: flex;
 }
@@ -1428,50 +1460,50 @@
 }
 .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);
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-sm);
+  background: var(--swatchbook-surface-raised);
+  color: var(--swatchbook-text-default);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
-  border-radius: 4px;
   flex-shrink: 0;
-  padding: 3px 8px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
 }
 .sb-token-detail__deprecated {
-  color: light-dark(#92400e, #fbbf24);
-  background: light-dark(#f59e0b26, #f59e0b2e);
-  border-radius: 6px;
-  margin: 6px 0;
-  padding: 6px 10px;
+  margin: var(--swatchbook-space-xs) 0;
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-xs);
+  color: var(--swatchbook-text-muted);
+  background: var(--swatchbook-deprecated-bg);
   font-size: 12px;
 }
 .sb-token-navigator__search {
-  padding: 0 0 8px;
+  padding: 0 0 var(--swatchbook-space-sm);
 }
 .sb-token-navigator__search-input {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  background: var(--swatchbook-surface-default, Canvas);
   width: 100%;
   max-width: 360px;
-  color: var(--swatchbook-text-default, CanvasText);
-  border-radius: 4px;
-  padding: 6px 10px;
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
+  background: var(--swatchbook-surface-default);
+  color: var(--swatchbook-text-default);
   font-family: inherit;
   font-size: 13px;
   line-height: 1.4;
 }
 .sb-token-navigator__search-input:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: 1px;
 }
 .sb-token-navigator__caption {
-  color: var(--swatchbook-text-muted, CanvasText);
-  padding: 4px 0 12px;
+  padding: var(--swatchbook-space-2xs) 0 var(--swatchbook-space-md);
+  color: var(--swatchbook-text-muted);
   font-size: 12px;
 }
@@ -1482,35 +1514,35 @@
 }
 .sb-token-navigator__nested {
-  border-left: 1px solid var(--swatchbook-border-default, #80808033);
+  padding-left: var(--swatchbook-space-lg);
+  border-left: 1px solid var(--swatchbook-border-default);
   margin: 0;
-  padding-left: 18px;
   list-style: none;
 }
 .sb-token-navigator__group-row {
+  align-items: center;
+  gap: var(--swatchbook-space-xs);
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
   cursor: pointer;
   user-select: none;
-  border-radius: 4px;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   display: flex;
 }
 .sb-token-navigator__tree li[role="treeitem"]:focus-visible, .sb-token-navigator__nested li[role="treeitem"]:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: 1px;
 }
 .sb-token-navigator__leaf-row {
-  cursor: pointer;
-  border-radius: 4px;
   align-items: center;
-  gap: 8px;
-  padding: 4px 6px;
+  gap: var(--swatchbook-space-sm);
+  padding: var(--swatchbook-space-2xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
+  cursor: pointer;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
   display: flex;
@@ -1519,7 +1551,7 @@
 .sb-token-navigator__caret {
   text-align: center;
   width: 12px;
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   display: inline-block;
 }
@@ -1529,17 +1561,17 @@
 }
 .sb-token-navigator__type-pill {
+  padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
   letter-spacing: .5px;
   text-transform: uppercase;
-  background: var(--swatchbook-surface-muted, #80808026);
-  border-radius: 4px;
-  padding: 1px 6px;
+  background: var(--swatchbook-surface-muted);
   font-size: 10px;
   display: inline-block;
 }
 .sb-token-navigator__value {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1550,17 +1582,17 @@
 }
 .sb-token-navigator__count {
-  color: var(--swatchbook-text-default, CanvasText);
+  color: var(--swatchbook-text-default);
   margin-left: auto;
   font-size: 11px;
 }
 .sb-token-navigator__color-swatch {
-  border: 1px solid var(--swatchbook-border-default, #80808033);
-  border-radius: 3px;
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
   width: 14px;
   height: 14px;
-  margin-left: 8px;
+  margin-left: var(--swatchbook-space-sm);
   display: inline-block;
 }
@@ -1572,22 +1604,22 @@
 }
 .sb-token-navigator__preview-dimension {
+  margin-left: var(--swatchbook-space-sm);
   min-width: 40px;
   max-width: 120px;
-  margin-left: 8px;
   display: inline-block;
 }
 .sb-token-navigator__preview-scaled {
+  margin-left: var(--swatchbook-space-sm);
   transform-origin: 100%;
-  margin-left: 8px;
   display: inline-block;
   transform: scale(.5);
 }
 .sb-token-navigator__preview-motion {
+  margin-left: var(--swatchbook-space-sm);
   width: 80px;
-  margin-left: 8px;
   display: inline-block;
 }
@@ -1604,8 +1636,9 @@
 }
 .sb-token-navigator__leaf-row[data-deprecated="true"] .sb-token-navigator__tail {
+  text-decoration: line-through;
+  text-decoration-color: var(--swatchbook-deprecated);
   opacity: .75;
-  text-decoration: line-through light-dark(#92400e, #fbbf24);
 }
 .sb-detail-overlay__backdrop {
   z-index: 10000;
@@ -1618,29 +1651,29 @@
 }
 .sb-detail-overlay__panel {
-  background: var(--swatchbook-surface-default, Canvas);
+  background: var(--swatchbook-surface-default);
   width: min(560px, 100%);
   height: 100%;
-  color: var(--swatchbook-text-default, CanvasText);
-  padding: 16px;
+  color: var(--swatchbook-text-default);
+  padding: var(--swatchbook-space-lg);
   position: relative;
   overflow-y: auto;
   box-shadow: -8px 0 24px #0003;
 }
 .sb-detail-overlay__close {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
+  top: var(--swatchbook-space-lg);
+  right: var(--swatchbook-space-lg);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
   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;
@@ -1648,49 +1681,49 @@
 }
 .sb-token-table__search {
-  padding: 0 0 8px;
+  padding: 0 0 var(--swatchbook-space-sm);
 }
 .sb-token-table__search-input {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  background: var(--swatchbook-surface-default, Canvas);
   width: 100%;
   max-width: 360px;
-  color: var(--swatchbook-text-default, CanvasText);
-  border-radius: 4px;
-  padding: 6px 10px;
+  padding: var(--swatchbook-space-xs) var(--swatchbook-space-md);
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
+  background: var(--swatchbook-surface-default);
+  color: var(--swatchbook-text-default);
   font-family: inherit;
   font-size: 13px;
   line-height: 1.4;
 }
 .sb-token-table__search-input:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: 1px;
 }
 .sb-token-table__empty-row {
-  color: var(--swatchbook-text-muted, CanvasText);
+  color: var(--swatchbook-text-muted);
   text-align: center;
-  padding: 16px 12px;
+  padding: var(--swatchbook-space-lg) var(--swatchbook-space-md);
   font-style: italic;
 }
 .sb-token-table__caption {
   caption-side: top;
   text-align: left;
-  color: var(--swatchbook-text-muted, CanvasText);
-  padding: 8px 0;
+  padding: var(--swatchbook-space-sm) 0;
+  color: var(--swatchbook-text-muted);
   font-size: 12px;
 }
 .sb-token-table__th {
   text-align: left;
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
   text-transform: uppercase;
   letter-spacing: .5px;
-  color: var(--swatchbook-text-muted, CanvasText);
-  border-bottom: 1px solid var(--swatchbook-border-default, #8080804d);
-  padding: 8px 12px;
+  color: var(--swatchbook-text-muted);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   font-size: 11px;
 }
@@ -1707,14 +1740,14 @@
 }
 .sb-token-table__row:focus-visible {
-  outline: 2px solid var(--swatchbook-accent-bg, #1d4ed8);
+  outline: 2px solid var(--swatchbook-accent-bg);
   outline-offset: -2px;
 }
 .sb-token-table__td {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808026);
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
+  border-bottom: 1px solid var(--swatchbook-border-default);
   vertical-align: top;
-  padding: 8px 12px;
 }
 .sb-token-table__path {
@@ -1725,7 +1758,7 @@
 .sb-token-table__value-cell {
   align-items: center;
-  gap: 8px;
+  gap: var(--swatchbook-space-sm);
   min-width: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
@@ -1733,21 +1766,21 @@
 }
 .sb-token-table__type-pill {
+  padding: var(--swatchbook-space-3xs) var(--swatchbook-space-xs);
+  border-radius: var(--swatchbook-radius-2xs);
   letter-spacing: .5px;
   text-transform: uppercase;
-  background: var(--swatchbook-surface-muted, #80808026);
-  color: var(--swatchbook-text-muted, CanvasText);
-  border-radius: 4px;
+  background: var(--swatchbook-surface-muted);
+  color: var(--swatchbook-text-muted);
   flex-shrink: 0;
-  padding: 1px 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 10px;
   display: inline-block;
 }
 .sb-token-table__swatch {
-  border: 1px solid var(--swatchbook-border-default, #8080804d);
-  border-radius: 3px;
+  border-radius: var(--swatchbook-radius-2xs);
+  border: 1px solid var(--swatchbook-border-default);
   flex-shrink: 0;
   width: 16px;
   height: 16px;
@@ -1777,8 +1810,9 @@
 }
 .sb-token-table__path[data-deprecated="true"] {
+  text-decoration: line-through;
+  text-decoration-color: var(--swatchbook-deprecated);
   opacity: .75;
-  text-decoration: line-through light-dark(#92400e, #fbbf24);
 }
 .sb-token-table__refs {
@@ -1797,17 +1831,17 @@
   overflow: hidden;
 }
 .sb-typography-scale__row {
-  border-bottom: 1px solid var(--swatchbook-border-default, #80808033);
+  gap: var(--swatchbook-space-lg);
+  padding: var(--swatchbook-space-lg) 0;
+  border-bottom: 1px solid var(--swatchbook-border-default);
   grid-template-columns: minmax(160px, 220px) 1fr;
   align-items: baseline;
-  gap: 16px;
-  padding: 14px 0;
   display: grid;
 }
 .sb-typography-scale__meta {
+  gap: var(--swatchbook-space-3xs);
   flex-direction: column;
-  gap: 2px;
   display: flex;
 }