@razorwind/storybook 0.0.43 → 0.0.44

package/dist/index.cjs

@@ -1,5 +1,5 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/core/utils"),n=require("node:path");function r(e,n={}){let r=n.cssVarPrefix??`rw`;return(0,t.flattenTokens)(e,{includeTypes:n.includeTypes,enrichToken:e=>({...e,cssVar:(0,t.toCssVar)(e.path,r)})})}function i(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
-`,`\\n`).replaceAll(`\r`,`\\r`)}function a(e){return typeof e==`string`?`"${i(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function o(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("@razorwind/core/plugin"),t=require("@razorwind/core/lib/fonts"),n=require("@razorwind/core/utils"),r=require("node:path");function i(e,t={}){let r=t.cssVarPrefix??`rw`;return(0,n.flattenTokens)(e,{includeTypes:t.includeTypes,enrichToken:e=>({...e,cssVar:(0,n.toCssVar)(e.path,r)})})}function a(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
+`,`\\n`).replaceAll(`\r`,`\\r`)}function o(e){return typeof e==`string`?`"${a(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function s(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
 ## Storybook UI theme
 
 Generated theme module(s):
@@ -50,7 +50,7 @@ import { ColorPaletteBlock } from "./blocks";
 ## Regenerate
 
 Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputPath}/\`.
-`}function s(e,t){let n=new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function c(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function l(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
+`}function c(e,t){let n=new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function l(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function u(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
 
 /**
  * Color tokens rendered with Storybook's ColorPalette doc block.
@@ -60,10 +60,10 @@ Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputP
 export function ColorPaletteBlock() {
   return (
     <ColorPalette>
-${[...s(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>`      ${a(c(t.path,e))}: ${a(t.cssValue)}`).join(`,
+${[...c(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>`      ${o(l(t.path,e))}: ${o(t.cssValue)}`).join(`,
 `),r=t.find(e=>e.description)?.description??`${t.length} token${t.length===1?``:`s`}`;return`    <ColorItem
-      title={${a(e)}}
-      subtitle={${a(r)}}
+      title={${o(e)}}
+      subtitle={${o(r)}}
       colors={{
 ${n}
       }}
@@ -72,7 +72,7 @@ ${n}
     </ColorPalette>
   );
 }
-`}function u(e,t={}){let n=t.sampleText??`The quick brown fox jumps over the lazy dog`,r=e.filter(e=>e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)).map(e=>{let t=/^(\d+(?:\.\d+)?)/.exec(e.cssValue);return t?Number(t[1]):e.cssValue}),i=[...new Set(r)],o=e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,s=e.find(e=>e.type===`fontWeight`),c=s&&Number.parseFloat(s.cssValue)||400,l=i.length>0?`[${i.map(e=>a(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
+`}function d(e,n={}){let r=n.sampleText??`The quick brown fox jumps over the lazy dog`,i=e.filter(e=>e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)).map(e=>{let t=/^(\d+(?:\.\d+)?)/.exec(e.cssValue);return t?Number(t[1]):e.cssValue}),a=[...new Set(i)],s=(0,t.pickFontByRole)(n.fonts,t.SANS_ROLES),c=(s?(0,t.cssFontFamily)(s):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,l=e.find(e=>e.type===`fontWeight`),u=l&&Number.parseFloat(l.cssValue)||400,d=a.length>0?`[${a.map(e=>o(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
 
 /**
  * Typography tokens rendered with Storybook's Typeset doc block.
@@ -82,14 +82,14 @@ ${n}
 export function TypesetBlock() {
   return (
     <Typeset
-      fontFamily={${a(o)}}
-      fontSizes={${l}}
-      fontWeight={${a(c)}}
-      sampleText={${a(n)}}
+      fontFamily={${o(c)}}
+      fontSizes={${d}}
+      fontWeight={${o(u)}}
+      sampleText={${o(r)}}
     />
   );
 }
-`}function d(e){return`import type { CSSProperties, ReactElement } from "react";
+`}function f(e){return`import type { CSSProperties, ReactElement } from "react";
 
 export interface TokenTableRow {
   path: string;
@@ -101,12 +101,12 @@ export interface TokenTableRow {
 }
 
 const TOKENS: TokenTableRow[] = [
-${e.map(e=>{let t=e.theme?a(e.theme):`undefined`;return`    {
-      path: ${a(e.path)},
-      type: ${e.type?a(e.type):`undefined`},
-      value: ${a(e.cssValue)},
-      cssVar: ${a(e.cssVar)},
-      description: ${e.description?a(e.description):`undefined`},
+${e.map(e=>{let t=e.theme?o(e.theme):`undefined`;return`    {
+      path: ${o(e.path)},
+      type: ${e.type?o(e.type):`undefined`},
+      value: ${o(e.cssValue)},
+      cssVar: ${o(e.cssVar)},
+      description: ${e.description?o(e.description):`undefined`},
       theme: ${t}
     }`}).join(`,
 `)||``}
@@ -193,7 +193,7 @@ export function TokenTableBlock({
     </table>
   );
 }
-`}function f(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
+`}function p(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
 ## Colors
 
 <ColorPaletteBlock />
@@ -206,7 +206,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
 import { TokenTableBlock } from "./blocks/TokenTable";
 import { TypesetBlock } from "./blocks/Typeset";
 
-<Meta title="${i(t)}/Overview" />
+<Meta title="${a(t)}/Overview" />
 
 # ${t}
 
@@ -215,23 +215,23 @@ ${n}${r}
 ## All tokens
 
 <TokenTableBlock />
-`}function p(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function m(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { ColorPaletteBlock } from "./blocks/ColorPalette";
 
-<Meta title="${i(e.titlePrefix??`Design Tokens`)}/Colors" />
+<Meta title="${a(e.titlePrefix??`Design Tokens`)}/Colors" />
 
 # Colors
 
 <ColorPaletteBlock />
-`}function m(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function h(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { TypesetBlock } from "./blocks/Typeset";
 
-<Meta title="${i(e.titlePrefix??`Design Tokens`)}/Typography" />
+<Meta title="${a(e.titlePrefix??`Design Tokens`)}/Typography" />
 
 # Typography
 
 <TypesetBlock />
-`}function h(e,t){let n=e[t];return typeof n==`string`?n:void 0}function g(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function _(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
+`}function g(e,t){let n=e[t];return typeof n==`string`?n:void 0}function _(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function v(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
 
 /**
  * Icons rendered with Storybook's IconGallery doc block.
@@ -241,30 +241,30 @@ import { TypesetBlock } from "./blocks/Typeset";
 export function IconGalleryBlock() {
   return (
     <IconGallery>
-${(g(e)?Object.values(e).filter(g).toSorted((e,t)=>(h(e,`name`)??``).localeCompare(h(t,`name`)??``)):[]).map(e=>{let t=h(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>g(e)&&h(e,`type`)===`svg`&&typeof e.content==`string`),r=g(n)&&typeof n.content==`string`?`<span
+${(_(e)?Object.values(e).filter(_).toSorted((e,t)=>(g(e,`name`)??``).localeCompare(g(t,`name`)??``)):[]).map(e=>{let t=g(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>_(e)&&g(e,`type`)===`svg`&&typeof e.content==`string`),r=_(n)&&typeof n.content==`string`?`<span
           style={{ display: "inline-flex", width: 24, height: 24 }}
-          dangerouslySetInnerHTML={{ __html: ${a(n.content)} }}
-        />`:`<code>${i(t)}</code>`;return`    <IconItem name={${a(t)}}>
+          dangerouslySetInnerHTML={{ __html: ${o(n.content)} }}
+        />`:`<code>${a(t)}</code>`;return`    <IconItem name={${o(t)}}>
       ${r}
     </IconItem>`}).join(`
 `)||`      {/* No icons */}`}
     </IconGallery>
   );
 }
-`}function v(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function y(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { IconGalleryBlock } from "./blocks/IconGallery";
 
-<Meta title="${i(e.titlePrefix??`Design Tokens`)}/Icons" />
+<Meta title="${a(e.titlePrefix??`Design Tokens`)}/Icons" />
 
 # Icons
 
 <IconGalleryBlock />
-`}function y(){return`export { ColorPaletteBlock } from "./ColorPalette";
+`}function b(){return`export { ColorPaletteBlock } from "./ColorPalette";
 export { IconGalleryBlock } from "./IconGallery";
 export { TokenTableBlock } from "./TokenTable";
 export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
 export { TypesetBlock } from "./Typeset";
-`}function b(e){return g(e)?e.base===`light`||e.base===`dark`:!1}function x(e,t){return{...e,brandTitle:e.brandTitle??t.title,brandUrl:e.brandUrl??t.homepage,brandImage:e.brandImage??t.logo}}function S(e){return`import { create } from "storybook/theming";
+`}function x(e){return _(e)?e.base===`light`||e.base===`dark`:!1}function S(e,n,r){let i=(0,t.pickFontByRole)(r,t.SANS_ROLES),a=(0,t.pickFontByRole)(r,t.MONO_ROLES);return{...e,brandTitle:e.brandTitle??n.title,brandUrl:e.brandUrl??n.homepage,brandImage:e.brandImage??n.logo,fontBase:e.fontBase??(i?(0,t.cssFontFamily)(i):void 0),fontCode:e.fontCode??(a?(0,t.cssFontFamily)(a):void 0)}}function C(e){return`import { create } from "storybook/theming";
 
 /**
  * Storybook UI theme generated by \`@razorwind/storybook\`.
@@ -272,7 +272,7 @@ export { TypesetBlock } from "./Typeset";
  * @see https://storybook.js.org/docs/configure/user-interface/theming
  */
 export default create({
-${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${a(t)}`).join(`,
+${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${o(t)}`).join(`,
 `)}
 });
-`}function C(e,n,r){return(0,t.createDocument)(e,n,{name:`razorwind-storybook`},r)}function w(e,i={}){let a=i.outputPath??`storybook/tokens`,s=(0,t.resolveSchemaIdentity)(e),c=i.titlePrefix??s.title??`Design Tokens`,h={...i,titlePrefix:c},w=r(e.tokens,i),T=w.some(e=>e.type===`color`),E=w.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),D=!i.skipIcons&&g(e.icons)&&Object.keys(e.icons).length>0,O={[(0,n.join)(a,`blocks/ColorPalette.tsx`)]:C((0,n.join)(a,`blocks/ColorPalette.tsx`),l(w,h),`tsx`),[(0,n.join)(a,`blocks/Typeset.tsx`)]:C((0,n.join)(a,`blocks/Typeset.tsx`),u(w,h),`tsx`),[(0,n.join)(a,`blocks/TokenTable.tsx`)]:C((0,n.join)(a,`blocks/TokenTable.tsx`),d(w),`tsx`),[(0,n.join)(a,`blocks/IconGallery.tsx`)]:C((0,n.join)(a,`blocks/IconGallery.tsx`),_(i.skipIcons?{}:e.icons),`tsx`),[(0,n.join)(a,`blocks/index.ts`)]:C((0,n.join)(a,`blocks/index.ts`),y(),`typescript`),[(0,n.join)(a,`Tokens.mdx`)]:C((0,n.join)(a,`Tokens.mdx`),f({titlePrefix:c,hasColors:T,hasTypography:E}),`mdx`)};if(T&&(O[(0,n.join)(a,`Colors.mdx`)]=C((0,n.join)(a,`Colors.mdx`),p(h),`mdx`)),E&&(O[(0,n.join)(a,`Typography.mdx`)]=C((0,n.join)(a,`Typography.mdx`),m(h),`mdx`)),D&&(O[(0,n.join)(a,`Icons.mdx`)]=C((0,n.join)(a,`Icons.mdx`),v(h),`mdx`)),O[(0,n.join)(a,`tokens.json`)]=C((0,n.join)(a,`tokens.json`),`${JSON.stringify(w,null,2)}\n`,`json`),i.mapTheme){let t=i.mapTheme(e.tokens);if(b(t))O[(0,n.join)(a,`theme.ts`)]=C((0,n.join)(a,`theme.ts`),S(x(t,s)),`typescript`);else if(g(t))for(let[e,r]of Object.entries(t))b(r)&&(O[(0,n.join)(a,`theme-${e}.ts`)]=C((0,n.join)(a,`theme-${e}.ts`),S(x(r,s)),`typescript`))}let k=Object.keys(O).filter(e=>e.startsWith((0,n.join)(a,`theme`))).map(e=>e.slice(a.length+1)),A=i.installGuide??o({outputPath:a,titlePrefix:c,themeFiles:k.length>0?k:void 0}),j=(0,n.join)(a,`INSTALL.md`);return O[j]=C(j,A,`markdown`),O}var T=(0,e.definePlugin)(e=>({name:`storybook`,generate:async t=>w(t,e??{})}));exports.applyBrandDefaults=x,exports.default=T,exports.flattenTokens=r,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return t.formatTokenValue}}),exports.generateTokenDocs=w,exports.renderInstallMd=o,exports.renderThemeFile=S,exports.resolveTokenSets=t.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return t.toCssVar}});
+`}function w(e,t,r){return(0,n.createDocument)(e,t,{name:`razorwind-storybook`},r)}function T(e,t={}){let a=t.outputPath??`storybook/tokens`,o=(0,n.resolveSchemaIdentity)(e),c=t.titlePrefix??o.title??`Design Tokens`,l={...t,titlePrefix:c},g=i(e.tokens,t),T=g.some(e=>e.type===`color`),E=e.fonts&&Object.keys(e.fonts).length>0||g.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),D=!t.skipIcons&&_(e.icons)&&Object.keys(e.icons).length>0,O={[(0,r.join)(a,`blocks/ColorPalette.tsx`)]:w((0,r.join)(a,`blocks/ColorPalette.tsx`),u(g,l),`tsx`),[(0,r.join)(a,`blocks/Typeset.tsx`)]:w((0,r.join)(a,`blocks/Typeset.tsx`),d(g,{...l,fonts:e.fonts}),`tsx`),[(0,r.join)(a,`blocks/TokenTable.tsx`)]:w((0,r.join)(a,`blocks/TokenTable.tsx`),f(g),`tsx`),[(0,r.join)(a,`blocks/IconGallery.tsx`)]:w((0,r.join)(a,`blocks/IconGallery.tsx`),v(t.skipIcons?{}:e.icons),`tsx`),[(0,r.join)(a,`blocks/index.ts`)]:w((0,r.join)(a,`blocks/index.ts`),b(),`typescript`),[(0,r.join)(a,`Tokens.mdx`)]:w((0,r.join)(a,`Tokens.mdx`),p({titlePrefix:c,hasColors:T,hasTypography:E}),`mdx`)};if(T&&(O[(0,r.join)(a,`Colors.mdx`)]=w((0,r.join)(a,`Colors.mdx`),m(l),`mdx`)),E&&(O[(0,r.join)(a,`Typography.mdx`)]=w((0,r.join)(a,`Typography.mdx`),h(l),`mdx`)),D&&(O[(0,r.join)(a,`Icons.mdx`)]=w((0,r.join)(a,`Icons.mdx`),y(l),`mdx`)),O[(0,r.join)(a,`tokens.json`)]=w((0,r.join)(a,`tokens.json`),`${JSON.stringify(g,null,2)}\n`,`json`),t.mapTheme){let n=t.mapTheme(e.tokens);if(x(n))O[(0,r.join)(a,`theme.ts`)]=w((0,r.join)(a,`theme.ts`),C(S(n,o,e.fonts)),`typescript`);else if(_(n))for(let[t,i]of Object.entries(n))x(i)&&(O[(0,r.join)(a,`theme-${t}.ts`)]=w((0,r.join)(a,`theme-${t}.ts`),C(S(i,o,e.fonts)),`typescript`))}let k=Object.keys(O).filter(e=>e.startsWith((0,r.join)(a,`theme`))).map(e=>e.slice(a.length+1)),A=t.installGuide??s({outputPath:a,titlePrefix:c,themeFiles:k.length>0?k:void 0}),j=(0,r.join)(a,`INSTALL.md`);return O[j]=w(j,A,`markdown`),O}var E=(0,e.definePlugin)(e=>({name:`storybook`,generate:async t=>T(t,e??{})}));exports.applyBrandDefaults=S,exports.default=E,exports.flattenTokens=i,Object.defineProperty(exports,"formatTokenValue",{enumerable:!0,get:function(){return n.formatTokenValue}}),exports.generateTokenDocs=T,exports.renderInstallMd=s,exports.renderThemeFile=C,exports.resolveTokenSets=n.resolveTokenSets,Object.defineProperty(exports,"toCssVar",{enumerable:!0,get:function(){return n.toCssVar}});

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { TokenType, Tokens } from "@power-plant/dtcg-schema";
-import { Schema, Tokens as Tokens$1 } from "@razorwind/core/schema";
+import { Fonts, Schema, Tokens as Tokens$1 } from "@razorwind/core/schema";
 import { formatTokenValue, resolveTokenSets, toCssVar } from "@razorwind/core/utils";
 import { GeneratorFunctionResult } from "@power-plant/core";
 //#region src/types.d.ts
@@ -155,7 +155,7 @@ declare function applyBrandDefaults(theme: StorybookTheme, identity: {
   title?: string;
   homepage?: string;
   logo?: string;
-}): StorybookTheme;
+}, fonts?: Fonts): StorybookTheme;
 /**
  * Serialize a Storybook theme object as a `storybook/theming` `create()` module.
  *

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;UAuBiB;;EAEf;;EAEA,OAAO;;EAEP;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;UAQe;;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,uBACV,iBAAiB,eAAe;;;;;;KAOtB,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;EAUA,WAAW;;;;;;EAOX;;;;;EAMA;;;;;;;iBC7Hc,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBCba,gBAAgB;EAC9B;EACA;EACA;;;;;;;iBC+bc,mBACd,OAAO,gBACP;EAAY;EAAgB;EAAmB;IAC9C;;;;;;iBAca,gBAAgB,OAAO;;;;iBAqCvB,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/flatten.ts","../src/install.ts","../src/generate.ts","../src/index.ts"],"mappings":";;;;;;;;UAuBiB;;EAEf;;EAEA,OAAO;;EAEP;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;UAQe;;EAEf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,uBACV,iBAAiB,eAAe;;;;;;KAOtB,0BACV,QAAQ,SAAS,eAAe,YAC7B;;;;UAKY;;;;;;EAMf;;;;;;EAOA;;;;;;EAOA;;;;;;EAOA;;;;;EAMA,eAAe;;;;;;EAOf;;;;;;;;;EAUA,WAAW;;;;;;EAOX;;;;;EAMA;;;;;;;iBC7Hc,cACd,QAAQ,WAAS,eAAe,WAChC,UAAS,KAAK,2DACb;;;;;;;;iBCba,gBAAgB;EAC9B;EACA;EACA;;;;;;;iBCucc,mBACd,OAAO,gBACP;EAAY;EAAgB;EAAmB;GAC/C,QAAQ,QACP;;;;;;iBAmBa,gBAAgB,OAAO;;;;iBAqCvB,kBACd,MAAM,QACN,UAAS,yBACR,wBAAwB,QAAQ"}

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { formatTokenValue, resolveTokenSets, toCssVar } from "@razorwind/core/utils";
 import { TokenType, Tokens } from "@power-plant/dtcg-schema";
-import { Schema, Tokens as Tokens$1 } from "@razorwind/core/schema";
+import { Fonts, Schema, Tokens as Tokens$1 } from "@razorwind/core/schema";
 import { GeneratorFunctionResult } from "@power-plant/core";
 //#region src/types.d.ts
 /**
@@ -155,7 +155,7 @@ declare function applyBrandDefaults(theme: StorybookTheme, identity: {
   title?: string;
   homepage?: string;
   logo?: string;
-}): StorybookTheme;
+}, fonts?: Fonts): StorybookTheme;
 /**
  * Serialize a Storybook theme object as a `storybook/theming` `create()` module.
  *

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import{definePlugin as e}from"@razorwind/core/plugin";import{createDocument as t,flattenTokens as n,formatTokenValue as r,resolveSchemaIdentity as i,resolveTokenSets as a,toCssVar as o,toCssVar as s}from"@razorwind/core/utils";import{join as c}from"node:path";function l(e,t={}){let r=t.cssVarPrefix??`rw`;return n(e,{includeTypes:t.includeTypes,enrichToken:e=>({...e,cssVar:s(e.path,r)})})}function u(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
-`,`\\n`).replaceAll(`\r`,`\\r`)}function d(e){return typeof e==`string`?`"${u(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function f(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
+import{definePlugin as e}from"@razorwind/core/plugin";import{MONO_ROLES as t,SANS_ROLES as n,cssFontFamily as r,pickFontByRole as i}from"@razorwind/core/lib/fonts";import{createDocument as a,flattenTokens as o,formatTokenValue as s,resolveSchemaIdentity as c,resolveTokenSets as l,toCssVar as u,toCssVar as d}from"@razorwind/core/utils";import{join as f}from"node:path";function p(e,t={}){let n=t.cssVarPrefix??`rw`;return o(e,{includeTypes:t.includeTypes,enrichToken:e=>({...e,cssVar:d(e.path,n)})})}function m(e){return e.replaceAll(`\\`,`\\\\`).replaceAll(`"`,`\\"`).replaceAll(`
+`,`\\n`).replaceAll(`\r`,`\\r`)}function h(e){return typeof e==`string`?`"${m(e)}"`:typeof e==`number`||typeof e==`boolean`?String(e):e==null?`undefined`:JSON.stringify(e)}function g(e){let t=e.titlePrefix??`Design Tokens`,n=e.themeFiles&&e.themeFiles.length>0?`
 ## Storybook UI theme
 
 Generated theme module(s):
@@ -50,7 +50,7 @@ import { ColorPaletteBlock } from "./blocks";
 ## Regenerate
 
 Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputPath}/\`.
-`}function p(e,t){let n=new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function m(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function h(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
+`}function _(e,t){let n=new Map;for(let r of e){let e=r.path.split(`.`).slice(0,Math.max(t,1)).join(`.`)||r.path,i=n.get(e)??[];i.push(r),n.set(e,i)}return n}function v(e,t){return e===t?e.split(`.`).at(-1)??e:e.startsWith(`${t}.`)?e.slice(t.length+1):e.split(`.`).at(-1)??e}function y(e,t={}){return`import { ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";
 
 /**
  * Color tokens rendered with Storybook's ColorPalette doc block.
@@ -60,10 +60,10 @@ Re-run Razorwind generate when tokens change to refresh docs under \`${e.outputP
 export function ColorPaletteBlock() {
   return (
     <ColorPalette>
-${[...p(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>`      ${d(m(t.path,e))}: ${d(t.cssValue)}`).join(`,
+${[..._(e.filter(e=>e.type===`color`),t.colorGroupBy??2).entries()].toSorted(([e],[t])=>e.localeCompare(t)).map(([e,t])=>{let n=t.map(t=>`      ${h(v(t.path,e))}: ${h(t.cssValue)}`).join(`,
 `),r=t.find(e=>e.description)?.description??`${t.length} token${t.length===1?``:`s`}`;return`    <ColorItem
-      title={${d(e)}}
-      subtitle={${d(r)}}
+      title={${h(e)}}
+      subtitle={${h(r)}}
       colors={{
 ${n}
       }}
@@ -72,7 +72,7 @@ ${n}
     </ColorPalette>
   );
 }
-`}function g(e,t={}){let n=t.sampleText??`The quick brown fox jumps over the lazy dog`,r=e.filter(e=>e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)).map(e=>{let t=/^(\d+(?:\.\d+)?)/.exec(e.cssValue);return t?Number(t[1]):e.cssValue}),i=[...new Set(r)],a=e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,o=e.find(e=>e.type===`fontWeight`),s=o&&Number.parseFloat(o.cssValue)||400,c=i.length>0?`[${i.map(e=>d(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
+`}function b(e,t={}){let a=t.sampleText??`The quick brown fox jumps over the lazy dog`,o=e.filter(e=>e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)).map(e=>{let t=/^(\d+(?:\.\d+)?)/.exec(e.cssValue);return t?Number(t[1]):e.cssValue}),s=[...new Set(o)],c=i(t.fonts,n),l=(c?r(c):void 0)??e.find(e=>e.type===`fontFamily`)?.cssValue??`system-ui, sans-serif`,u=e.find(e=>e.type===`fontWeight`),d=u&&Number.parseFloat(u.cssValue)||400,f=s.length>0?`[${s.map(e=>h(e)).join(`, `)}]`:`[12, 14, 16, 20, 24, 32]`;return`import { Typeset } from "@storybook/addon-docs/blocks";
 
 /**
  * Typography tokens rendered with Storybook's Typeset doc block.
@@ -82,14 +82,14 @@ ${n}
 export function TypesetBlock() {
   return (
     <Typeset
-      fontFamily={${d(a)}}
-      fontSizes={${c}}
-      fontWeight={${d(s)}}
-      sampleText={${d(n)}}
+      fontFamily={${h(l)}}
+      fontSizes={${f}}
+      fontWeight={${h(d)}}
+      sampleText={${h(a)}}
     />
   );
 }
-`}function _(e){return`import type { CSSProperties, ReactElement } from "react";
+`}function x(e){return`import type { CSSProperties, ReactElement } from "react";
 
 export interface TokenTableRow {
   path: string;
@@ -101,12 +101,12 @@ export interface TokenTableRow {
 }
 
 const TOKENS: TokenTableRow[] = [
-${e.map(e=>{let t=e.theme?d(e.theme):`undefined`;return`    {
-      path: ${d(e.path)},
-      type: ${e.type?d(e.type):`undefined`},
-      value: ${d(e.cssValue)},
-      cssVar: ${d(e.cssVar)},
-      description: ${e.description?d(e.description):`undefined`},
+${e.map(e=>{let t=e.theme?h(e.theme):`undefined`;return`    {
+      path: ${h(e.path)},
+      type: ${e.type?h(e.type):`undefined`},
+      value: ${h(e.cssValue)},
+      cssVar: ${h(e.cssVar)},
+      description: ${e.description?h(e.description):`undefined`},
       theme: ${t}
     }`}).join(`,
 `)||``}
@@ -193,7 +193,7 @@ export function TokenTableBlock({
     </table>
   );
 }
-`}function v(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
+`}function S(e){let t=e.titlePrefix??`Design Tokens`,n=e.hasColors?`
 ## Colors
 
 <ColorPaletteBlock />
@@ -206,7 +206,7 @@ import { ColorPaletteBlock } from "./blocks/ColorPalette";
 import { TokenTableBlock } from "./blocks/TokenTable";
 import { TypesetBlock } from "./blocks/Typeset";
 
-<Meta title="${u(t)}/Overview" />
+<Meta title="${m(t)}/Overview" />
 
 # ${t}
 
@@ -215,23 +215,23 @@ ${n}${r}
 ## All tokens
 
 <TokenTableBlock />
-`}function y(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function C(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { ColorPaletteBlock } from "./blocks/ColorPalette";
 
-<Meta title="${u(e.titlePrefix??`Design Tokens`)}/Colors" />
+<Meta title="${m(e.titlePrefix??`Design Tokens`)}/Colors" />
 
 # Colors
 
 <ColorPaletteBlock />
-`}function b(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function w(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { TypesetBlock } from "./blocks/Typeset";
 
-<Meta title="${u(e.titlePrefix??`Design Tokens`)}/Typography" />
+<Meta title="${m(e.titlePrefix??`Design Tokens`)}/Typography" />
 
 # Typography
 
 <TypesetBlock />
-`}function x(e,t){let n=e[t];return typeof n==`string`?n:void 0}function S(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function C(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
+`}function T(e,t){let n=e[t];return typeof n==`string`?n:void 0}function E(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function D(e){return`import { IconGallery, IconItem } from "@storybook/addon-docs/blocks";
 
 /**
  * Icons rendered with Storybook's IconGallery doc block.
@@ -241,30 +241,30 @@ import { TypesetBlock } from "./blocks/Typeset";
 export function IconGalleryBlock() {
   return (
     <IconGallery>
-${(S(e)?Object.values(e).filter(S).toSorted((e,t)=>(x(e,`name`)??``).localeCompare(x(t,`name`)??``)):[]).map(e=>{let t=x(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>S(e)&&x(e,`type`)===`svg`&&typeof e.content==`string`),r=S(n)&&typeof n.content==`string`?`<span
+${(E(e)?Object.values(e).filter(E).toSorted((e,t)=>(T(e,`name`)??``).localeCompare(T(t,`name`)??``)):[]).map(e=>{let t=T(e,`name`)??`unknown`,n=(Array.isArray(e.files)?e.files:[]).find(e=>E(e)&&T(e,`type`)===`svg`&&typeof e.content==`string`),r=E(n)&&typeof n.content==`string`?`<span
           style={{ display: "inline-flex", width: 24, height: 24 }}
-          dangerouslySetInnerHTML={{ __html: ${d(n.content)} }}
-        />`:`<code>${u(t)}</code>`;return`    <IconItem name={${d(t)}}>
+          dangerouslySetInnerHTML={{ __html: ${h(n.content)} }}
+        />`:`<code>${m(t)}</code>`;return`    <IconItem name={${h(t)}}>
       ${r}
     </IconItem>`}).join(`
 `)||`      {/* No icons */}`}
     </IconGallery>
   );
 }
-`}function w(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
+`}function O(e={}){return`import { Meta } from "@storybook/addon-docs/blocks";
 import { IconGalleryBlock } from "./blocks/IconGallery";
 
-<Meta title="${u(e.titlePrefix??`Design Tokens`)}/Icons" />
+<Meta title="${m(e.titlePrefix??`Design Tokens`)}/Icons" />
 
 # Icons
 
 <IconGalleryBlock />
-`}function T(){return`export { ColorPaletteBlock } from "./ColorPalette";
+`}function k(){return`export { ColorPaletteBlock } from "./ColorPalette";
 export { IconGalleryBlock } from "./IconGallery";
 export { TokenTableBlock } from "./TokenTable";
 export type { TokenTableBlockProps, TokenTableRow } from "./TokenTable";
 export { TypesetBlock } from "./Typeset";
-`}function E(e){return S(e)?e.base===`light`||e.base===`dark`:!1}function D(e,t){return{...e,brandTitle:e.brandTitle??t.title,brandUrl:e.brandUrl??t.homepage,brandImage:e.brandImage??t.logo}}function O(e){return`import { create } from "storybook/theming";
+`}function A(e){return E(e)?e.base===`light`||e.base===`dark`:!1}function j(e,a,o){let s=i(o,n),c=i(o,t);return{...e,brandTitle:e.brandTitle??a.title,brandUrl:e.brandUrl??a.homepage,brandImage:e.brandImage??a.logo,fontBase:e.fontBase??(s?r(s):void 0),fontCode:e.fontCode??(c?r(c):void 0)}}function M(e){return`import { create } from "storybook/theming";
 
 /**
  * Storybook UI theme generated by \`@razorwind/storybook\`.
@@ -272,8 +272,8 @@ export { TypesetBlock } from "./Typeset";
  * @see https://storybook.js.org/docs/configure/user-interface/theming
  */
 export default create({
-${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${d(t)}`).join(`,
+${Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`  ${e}: ${h(t)}`).join(`,
 `)}
 });
-`}function k(e,n,r){return t(e,n,{name:`razorwind-storybook`},r)}function A(e,t={}){let n=t.outputPath??`storybook/tokens`,r=i(e),a=t.titlePrefix??r.title??`Design Tokens`,o={...t,titlePrefix:a},s=l(e.tokens,t),u=s.some(e=>e.type===`color`),d=s.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),p=!t.skipIcons&&S(e.icons)&&Object.keys(e.icons).length>0,m={[c(n,`blocks/ColorPalette.tsx`)]:k(c(n,`blocks/ColorPalette.tsx`),h(s,o),`tsx`),[c(n,`blocks/Typeset.tsx`)]:k(c(n,`blocks/Typeset.tsx`),g(s,o),`tsx`),[c(n,`blocks/TokenTable.tsx`)]:k(c(n,`blocks/TokenTable.tsx`),_(s),`tsx`),[c(n,`blocks/IconGallery.tsx`)]:k(c(n,`blocks/IconGallery.tsx`),C(t.skipIcons?{}:e.icons),`tsx`),[c(n,`blocks/index.ts`)]:k(c(n,`blocks/index.ts`),T(),`typescript`),[c(n,`Tokens.mdx`)]:k(c(n,`Tokens.mdx`),v({titlePrefix:a,hasColors:u,hasTypography:d}),`mdx`)};if(u&&(m[c(n,`Colors.mdx`)]=k(c(n,`Colors.mdx`),y(o),`mdx`)),d&&(m[c(n,`Typography.mdx`)]=k(c(n,`Typography.mdx`),b(o),`mdx`)),p&&(m[c(n,`Icons.mdx`)]=k(c(n,`Icons.mdx`),w(o),`mdx`)),m[c(n,`tokens.json`)]=k(c(n,`tokens.json`),`${JSON.stringify(s,null,2)}\n`,`json`),t.mapTheme){let i=t.mapTheme(e.tokens);if(E(i))m[c(n,`theme.ts`)]=k(c(n,`theme.ts`),O(D(i,r)),`typescript`);else if(S(i))for(let[e,t]of Object.entries(i))E(t)&&(m[c(n,`theme-${e}.ts`)]=k(c(n,`theme-${e}.ts`),O(D(t,r)),`typescript`))}let x=Object.keys(m).filter(e=>e.startsWith(c(n,`theme`))).map(e=>e.slice(n.length+1)),A=t.installGuide??f({outputPath:n,titlePrefix:a,themeFiles:x.length>0?x:void 0}),j=c(n,`INSTALL.md`);return m[j]=k(j,A,`markdown`),m}var j=e(e=>({name:`storybook`,generate:async t=>A(t,e??{})}));export{D as applyBrandDefaults,j as default,l as flattenTokens,r as formatTokenValue,A as generateTokenDocs,f as renderInstallMd,O as renderThemeFile,a as resolveTokenSets,o as toCssVar};
+`}function N(e,t,n){return a(e,t,{name:`razorwind-storybook`},n)}function P(e,t={}){let n=t.outputPath??`storybook/tokens`,r=c(e),i=t.titlePrefix??r.title??`Design Tokens`,a={...t,titlePrefix:i},o=p(e.tokens,t),s=o.some(e=>e.type===`color`),l=e.fonts&&Object.keys(e.fonts).length>0||o.some(e=>e.type===`fontFamily`||e.type===`fontWeight`||e.type===`typography`||e.type===`dimension`&&/(?:font|type|text).*size|size.*(?:font|type|text)/i.test(e.path)),u=!t.skipIcons&&E(e.icons)&&Object.keys(e.icons).length>0,d={[f(n,`blocks/ColorPalette.tsx`)]:N(f(n,`blocks/ColorPalette.tsx`),y(o,a),`tsx`),[f(n,`blocks/Typeset.tsx`)]:N(f(n,`blocks/Typeset.tsx`),b(o,{...a,fonts:e.fonts}),`tsx`),[f(n,`blocks/TokenTable.tsx`)]:N(f(n,`blocks/TokenTable.tsx`),x(o),`tsx`),[f(n,`blocks/IconGallery.tsx`)]:N(f(n,`blocks/IconGallery.tsx`),D(t.skipIcons?{}:e.icons),`tsx`),[f(n,`blocks/index.ts`)]:N(f(n,`blocks/index.ts`),k(),`typescript`),[f(n,`Tokens.mdx`)]:N(f(n,`Tokens.mdx`),S({titlePrefix:i,hasColors:s,hasTypography:l}),`mdx`)};if(s&&(d[f(n,`Colors.mdx`)]=N(f(n,`Colors.mdx`),C(a),`mdx`)),l&&(d[f(n,`Typography.mdx`)]=N(f(n,`Typography.mdx`),w(a),`mdx`)),u&&(d[f(n,`Icons.mdx`)]=N(f(n,`Icons.mdx`),O(a),`mdx`)),d[f(n,`tokens.json`)]=N(f(n,`tokens.json`),`${JSON.stringify(o,null,2)}\n`,`json`),t.mapTheme){let i=t.mapTheme(e.tokens);if(A(i))d[f(n,`theme.ts`)]=N(f(n,`theme.ts`),M(j(i,r,e.fonts)),`typescript`);else if(E(i))for(let[t,a]of Object.entries(i))A(a)&&(d[f(n,`theme-${t}.ts`)]=N(f(n,`theme-${t}.ts`),M(j(a,r,e.fonts)),`typescript`))}let m=Object.keys(d).filter(e=>e.startsWith(f(n,`theme`))).map(e=>e.slice(n.length+1)),h=t.installGuide??g({outputPath:n,titlePrefix:i,themeFiles:m.length>0?m:void 0}),_=f(n,`INSTALL.md`);return d[_]=N(_,h,`markdown`),d}var F=e(e=>({name:`storybook`,generate:async t=>P(t,e??{})}));export{j as applyBrandDefaults,F as default,p as flattenTokens,s as formatTokenValue,P as generateTokenDocs,g as renderInstallMd,M as renderThemeFile,l as resolveTokenSets,u as toCssVar};
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razorwind/storybook",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "type": "module",
   "description": "Razorwind plugin that creates Storybook MDX token doc blocks from Razorwind design tokens.",
   "repository": {
@@ -85,7 +85,7 @@
   "dependencies": {
     "@power-plant/core": "^0.0.90",
     "@power-plant/dtcg-schema": "^0.0.1",
-    "@razorwind/core": "^0.0.46",
+    "@razorwind/core": "^0.0.47",
     "@stryke/type-checks": "^0.6.41"
   },
   "peerDependencies": {
@@ -104,5 +104,5 @@
     "typescript": "^6.0.3"
   },
   "publishConfig": { "access": "public" },
-  "gitHead": "0bfdb728cdb6c241eae5072dab7984fe48146c22"
+  "gitHead": "ca5955e41399f13b752e589a14338d6821b78f6c"
 }