@unpunnyfuns/swatchbook-blocks 1.2.0 → 2.0.0

package/dist/style.css

@@ -66,12 +66,6 @@
 .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);
 }
@@ -90,42 +84,6 @@
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   display: grid;
 }
-
-.sb-color-palette__card {
-  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);
-  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;
-  display: flex;
-}
-
-.sb-color-palette__leaf {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-caption);
-}
-
-.sb-color-palette__value {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  opacity: var(--swatchbook-opacity-muted);
-}
-
-.sb-color-palette__gamut-warn {
-  margin-left: var(--swatchbook-space-2xs);
-}
 .sb-color-table__scroll {
   width: 100%;
   max-width: 100%;
@@ -717,122 +675,6 @@
   opacity: var(--swatchbook-opacity-muted);
   white-space: nowrap;
 }
-.sb-dimension-sample {
-  align-items: center;
-  gap: var(--swatchbook-space-3xs);
-  min-width: 0;
-  max-width: 100%;
-  display: inline-flex;
-}
-
-.sb-dimension-sample__cap {
-  color: var(--swatchbook-text-muted);
-  font-size: var(--swatchbook-type-micro);
-  line-height: var(--swatchbook-leading-none);
-  user-select: none;
-}
-
-.sb-dimension-sample__bar {
-  background: var(--swatchbook-accent-bg);
-  border-radius: 2px;
-  min-width: 1px;
-  max-width: 100%;
-  height: 14px;
-}
-
-.sb-dimension-sample__radius-sample {
-  background: var(--swatchbook-accent-bg);
-  border: 1px solid var(--swatchbook-border-default);
-  width: 56px;
-  height: 56px;
-}
-
-.sb-dimension-sample__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);
-  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;
-  display: grid;
-}
-
-.sb-font-family-sample__meta {
-  gap: var(--swatchbook-space-3xs);
-  flex-direction: column;
-  min-width: 0;
-  display: flex;
-}
-
-.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;
-  overflow: hidden;
-}
-
-.sb-font-family-sample__stack {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  color: var(--swatchbook-text-muted);
-}
-
-.sb-font-family-sample__sample {
-  font-size: var(--swatchbook-type-sample);
-  line-height: var(--swatchbook-leading-tight);
-}
-
-.sb-font-family-sample__css-var {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  color: var(--swatchbook-text-muted);
-}
-.sb-font-weight-scale__row {
-  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;
-  display: grid;
-}
-
-.sb-font-weight-scale__meta {
-  gap: var(--swatchbook-space-3xs);
-  flex-direction: column;
-  min-width: 0;
-  display: flex;
-}
-
-.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;
-  overflow: hidden;
-}
-
-.sb-font-weight-scale__value {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  color: var(--swatchbook-text-muted);
-}
-
-.sb-font-weight-scale__sample {
-  font-size: var(--swatchbook-type-sample-lg);
-  line-height: var(--swatchbook-leading-none);
-}
-
-.sb-font-weight-scale__css-var {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  color: var(--swatchbook-text-muted);
-}
 .sb-gradient-palette__row {
   gap: var(--swatchbook-space-lg);
   padding: var(--swatchbook-space-lg) 0;
@@ -863,12 +705,6 @@
   opacity: var(--swatchbook-opacity-muted);
 }
 
-.sb-gradient-palette__sample {
-  border-radius: var(--swatchbook-radius-xs);
-  border: 1px solid var(--swatchbook-border-default);
-  height: 56px;
-}
-
 .sb-gradient-palette__stops {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: var(--swatchbook-type-micro);
@@ -972,37 +808,6 @@
   color: var(--swatchbook-text-muted);
   white-space: nowrap;
 }
-.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);
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
@@ -1010,29 +815,9 @@
 }
 
 .sb-opacity-scale__card {
-  border: 1px solid var(--swatchbook-border-default);
-  border-radius: var(--swatchbook-radius-xs);
+  gap: var(--swatchbook-space-2xs);
   flex-direction: column;
   display: flex;
-  overflow: hidden;
-}
-
-.sb-opacity-scale__swatch {
-  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;
-  background-size: 12px 12px;
-  height: 64px;
-  position: relative;
-}
-
-.sb-opacity-scale__swatch:after {
-  content: "";
-  background: var(--swatchbook-opacity-scale-color);
-  opacity: var(--swatchbook-opacity-scale-alpha);
-  position: absolute;
-  inset: 0;
 }
 
 .sb-opacity-scale__meta {
@@ -1174,13 +959,6 @@
 .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;
@@ -1205,20 +983,7 @@
   overflow: hidden;
 }
 
-.sb-stroke-style-sample__value {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: var(--swatchbook-type-micro);
-  color: var(--swatchbook-text-muted);
-}
-
-.sb-stroke-style-sample__line {
-  border-top-width: 4px;
-  border-top-color: var(--swatchbook-text-default);
-  width: 100%;
-  height: 0;
-}
-
-.sb-stroke-style-sample__object-fallback, .sb-stroke-style-sample__css-var {
+.sb-stroke-style-sample__value, .sb-stroke-style-sample__css-var {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: var(--swatchbook-type-micro);
   color: var(--swatchbook-text-muted);
@@ -1971,19 +1736,251 @@
   display: grid;
 }
 
-.sb-typography-scale__meta {
+.sb-typography-scale__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sb-border-sample {
+  background: var(--swatchbook-surface-raised);
+  border-radius: 6px;
+  width: 120px;
+  height: 56px;
+}
+.sb-color-swatch {
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: var(--swatchbook-radius-xs);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.sb-color-swatch__chip {
+  border-bottom: 1px solid var(--swatchbook-border-default);
+  width: 100%;
+  height: 56px;
+}
+
+.sb-color-swatch__meta {
+  padding: var(--swatchbook-space-sm) var(--swatchbook-space-md);
   gap: var(--swatchbook-space-3xs);
   flex-direction: column;
   display: flex;
 }
 
-.sb-typography-scale__path {
+.sb-color-swatch__leaf {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: var(--swatchbook-type-caption);
 }
 
-.sb-typography-scale__specs {
+.sb-color-swatch__value {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: var(--swatchbook-type-micro);
   opacity: var(--swatchbook-opacity-muted);
 }
+
+.sb-color-swatch__gamut-warn {
+  margin-left: var(--swatchbook-space-2xs);
+}
+.sb-dimension-sample {
+  align-items: center;
+  gap: var(--swatchbook-space-3xs);
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+}
+
+.sb-dimension-sample__cap {
+  color: var(--swatchbook-text-muted);
+  font-size: var(--swatchbook-type-micro);
+  line-height: var(--swatchbook-leading-none);
+  user-select: none;
+}
+
+.sb-dimension-sample__bar {
+  background: var(--swatchbook-accent-bg);
+  border-radius: 2px;
+  min-width: 1px;
+  max-width: 100%;
+  height: 14px;
+}
+
+.sb-dimension-sample__radius-sample {
+  background: var(--swatchbook-accent-bg);
+  border: 1px solid var(--swatchbook-border-default);
+  width: 56px;
+  height: 56px;
+}
+
+.sb-dimension-sample__size-sample {
+  background: var(--swatchbook-accent-bg);
+  border: 1px solid var(--swatchbook-border-default);
+  min-width: 1px;
+  min-height: 1px;
+}
+.sb-font-family-specimen__row {
+  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;
+  display: grid;
+}
+
+.sb-font-family-specimen__meta {
+  gap: var(--swatchbook-space-3xs);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.sb-font-family-specimen__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sb-font-family-specimen__stack {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+}
+
+.sb-font-family-specimen__sample {
+  font-size: var(--swatchbook-type-sample);
+  line-height: var(--swatchbook-leading-tight);
+}
+
+.sb-font-family-specimen__css-var {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+}
+.sb-font-weight-specimen__row {
+  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;
+  display: grid;
+}
+
+.sb-font-weight-specimen__meta {
+  gap: var(--swatchbook-space-3xs);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.sb-font-weight-specimen__path {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sb-font-weight-specimen__value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+}
+
+.sb-font-weight-specimen__sample {
+  font-size: var(--swatchbook-type-sample-lg);
+  line-height: var(--swatchbook-leading-none);
+}
+
+.sb-font-weight-specimen__css-var {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+}
+.sb-gradient-swatch__chip {
+  border-radius: var(--swatchbook-radius-xs);
+  border: 1px solid var(--swatchbook-border-default);
+  width: 100%;
+  height: 56px;
+}
+.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-swatch {
+  border-radius: var(--swatchbook-radius-xs);
+  border: 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;
+  background-size: 12px 12px;
+  height: 64px;
+  position: relative;
+  overflow: hidden;
+}
+
+.sb-opacity-swatch__chip {
+  position: absolute;
+  inset: 0;
+}
+.sb-stroke-sample__line {
+  border-top-width: 4px;
+  border-top-color: var(--swatchbook-text-default);
+  width: 100%;
+  height: 0;
+}
+
+.sb-stroke-sample__object-fallback {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  color: var(--swatchbook-text-muted);
+}
+.sb-type-specimen {
+  gap: var(--swatchbook-space-3xs);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.sb-type-specimen__description {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--swatchbook-type-micro);
+  opacity: var(--swatchbook-opacity-muted);
+}
+.sb-shadow-sample {
+  background: var(--swatchbook-surface-raised);
+  border: 1px solid var(--swatchbook-border-default);
+  border-radius: 6px;
+  width: 120px;
+  height: 56px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpunnyfuns/swatchbook-blocks",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Storybook MDX doc blocks for DTCG design tokens — TokenTable, ColorPalette, TypographyScale, TokenDetail.",
   "keywords": [
     "design-system",
@@ -38,6 +38,10 @@
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
+    "./host": {
+      "types": "./dist/host.d.mts",
+      "import": "./dist/host.mjs"
+    },
     "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
@@ -48,7 +52,7 @@
     "@tanstack/react-virtual": "3.14.5",
     "clsx": "^2.1.1",
     "colorjs.io": "^0.6.1",
-    "@unpunnyfuns/swatchbook-core": "1.2.0"
+    "@unpunnyfuns/swatchbook-core": "2.0.0"
   },
   "devDependencies": {
     "@terrazzo/token-tools": "^2.3.0",