@unpunnyfuns/swatchbook-blocks 0.4.0 → 0.5.0

package/README.md

@@ -50,15 +50,15 @@ import { TokenTable, ColorPalette, TokenDetail } from '@unpunnyfuns/swatchbook-b
 
 # Color tokens
 
-<ColorPalette filter="color.sys.*" />
+<ColorPalette filter="color.*" />
 
 ## Every color token
 
-<TokenTable filter="color.sys.*" type="color" />
+<TokenTable filter="color.*" type="color" />
 
 ## Inspect one
 
-<TokenDetail path="color.sys.accent.bg" />
+<TokenDetail path="color.accent.bg" />
 ```
 
 ### Outside Storybook
@@ -72,7 +72,7 @@ import snapshot from './tokens-snapshot.json';
 export function TokenDocs() {
   return (
     <SwatchbookProvider value={snapshot}>
-      <TokenTable filter='color.sys.*' />
+      <TokenTable filter='color.*' />
     </SwatchbookProvider>
   );
 }
@@ -83,10 +83,10 @@ export function TokenDocs() {
 ## Props
 
 ```ts
-<TokenTable filter="color.sys.*" type="color" />
-<ColorPalette filter="color.sys.*" />
+<TokenTable filter="color.*" type="color" />
+<ColorPalette filter="color.*" />
 <TypographyScale filter="typography" sample="The quick brown fox" />
-<TokenDetail path="color.sys.accent.bg" />
+<TokenDetail path="color.accent.bg" />
 ```
 
 ## Do / don't

package/dist/index.d.mts

@@ -155,7 +155,7 @@ type SortDir = 'asc' | 'desc';
 interface BorderPreviewProps {
   /**
    * Token-path filter. Defaults to every `border` token. Use e.g.
-   * `"border.sys.*"` to scope to the semantic layer.
+   * `"border.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -189,20 +189,20 @@ declare function BorderSample({
 interface ColorPaletteProps {
   /**
    * Token-path filter. Defaults to every `color` token. Use e.g.
-   * `"color.sys.*"` to scope to the semantic layer, or `"color.ref.blue.*"`
+   * `"color.*"` to scope to the semantic layer, or `"color.palette.blue.*"`
    * for a single ref ramp.
    */
   filter?: string;
   /**
    * Grouping depth. Tokens are grouped by the first `groupBy` dot-segments
-   * of their path. `2` yields groups like `color.sys`, `color.ref`; `3`
-   * yields `color.sys.surface`, `color.sys.text`, etc.
+   * of their path. `1` yields a single `color` group; `2` yields
+   * `color.surface`, `color.text`, `color.blue`, etc.
    *
    * If omitted, groupBy is derived from the filter: one level below the
    * filter's fixed prefix (segments before the first `*`), clamped so each
-   * swatch still carries a leaf label. `"color.sys.*"` → groups at
-   * `color.sys.<family>`; `"color.ref.blue.*"` collapses all shades into
-   * one `color.ref.blue` group because the tokens have no deeper level.
+   * swatch still carries a leaf label. `"color.*"` → groups at
+   * `color.<family>`; `"color.palette.blue.*"` collapses all shades into
+   * one `color.blue` group because the tokens have no deeper level.
    */
   groupBy?: number;
   /** Override the section caption. */
@@ -267,7 +267,7 @@ declare function DimensionBar({
 interface DimensionScaleProps {
   /**
    * Token-path filter. Defaults to every `dimension` token. Use e.g.
-   * `"space.sys.*"` to scope to the spacing scale.
+   * `"space.*"` to scope to the spacing scale.
    */
   filter?: string;
   /**
@@ -302,7 +302,7 @@ declare function DimensionScale({
 interface FontFamilySampleProps {
   /**
    * Token-path filter. Defaults to every `fontFamily` token. Use e.g.
-   * `"font.ref.family.*"` to scope to the ref layer.
+   * `"font.family.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */
@@ -330,7 +330,7 @@ declare function FontFamilySample({
 interface FontWeightScaleProps {
   /**
    * Token-path filter. Defaults to every `fontWeight` token. Use e.g.
-   * `"font.ref.weight.*"` to scope to the ref layer.
+   * `"font.weight.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */
@@ -359,7 +359,7 @@ declare function FontWeightScale({
 interface GradientPaletteProps {
   /**
    * Token-path filter. Defaults to every `gradient` token. Use e.g.
-   * `"gradient.ref.*"` or `"gradient.sys.accent"` to scope.
+   * `"gradient.*"` or `"gradient.accent"` to scope.
    */
   filter?: string;
   /** Override the caption. */
@@ -404,7 +404,7 @@ declare function MotionSample({
 interface MotionPreviewProps {
   /**
    * Token-path filter. Defaults to transition + duration + cubicBezier
-   * tokens. Use e.g. `"motion.sys.*"` to scope to the semantic layer.
+   * tokens. Use e.g. `"transition.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -444,7 +444,7 @@ declare function useSwatchbookData(): ProjectSnapshot;
 interface ShadowPreviewProps {
   /**
    * Token-path filter. Defaults to every `shadow` token. Use e.g.
-   * `"shadow.sys.*"` to scope to the semantic layer.
+   * `"shadow.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -478,7 +478,7 @@ declare function ShadowSample({
 interface StrokeStyleSampleProps {
   /**
    * Token-path filter. Defaults to every `strokeStyle` token. Use e.g.
-   * `"stroke.ref.style.*"` to scope to the ref layer.
+   * `"stroke.style.*"` to scope to the ref layer.
    */
   filter?: string;
   /** Override the caption. */
@@ -612,7 +612,7 @@ declare function TokenNavigator({
 //#region src/TokenTable.d.ts
 interface TokenTableProps {
   /**
-   * Token-path filter. `"color.sys.*"` matches every `color.sys.…` token;
+   * Token-path filter. `"color.*"` matches every `color.…` token;
    * omit to include everything. Combines with `type` (both must match).
    */
   filter?: string;
@@ -652,7 +652,7 @@ declare function TokenTable({
 interface TypographyScaleProps {
   /**
    * Token-path filter. Defaults to every `typography` token. Use e.g.
-   * `"typography.sys.*"` to scope to the semantic layer.
+   * `"typography.*"` to scope to the semantic layer.
    */
   filter?: string;
   /** Override the sample text rendered for each token. */

package/dist/index.mjs

@@ -408,7 +408,7 @@ function useVirtualModuleFallback(enabled) {
 	};
 }
 function makeCssVar(path, prefix) {
-	const tail = path.replaceAll(".", "-");
+	const tail = path.split(".").map((segment) => segment.replaceAll(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase()).join("-");
 	return prefix ? `var(--${prefix}-${tail})` : `var(--${tail})`;
 }
 /**
@@ -422,7 +422,7 @@ function makeCssVar(path, prefix) {
 * | `undefined` / `''` | everything                                          |
 * | `*` or `**`        | everything                                          |
 * | `color`            | exact path `color`, or any descendant `color.*`     |
-* | `color.sys.*`      | any path whose fixed prefix is `color.sys.`         |
+* | `color.*`      | any path whose fixed prefix is `color.`         |
 * | `color**`          | any path starting with `color`                      |
 *
 * Not supported (all pass through as literal segment matchers): brace
@@ -707,7 +707,7 @@ function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
 //#region src/ColorPalette.tsx
 /**
 * Count segments in the filter before the first glob (`*` / `**`).
-* `color.ref.*` → 2; `color.sys.surface.*` → 3; `color` → 1; undefined → 0.
+* `color.*` → 2; `color.surface.*` → 3; `color` → 1; undefined → 0.
 */
 function fixedPrefixLength(filter) {
 	if (!filter) return 0;