import { TokenType, Tokens } from "@power-plant/dtcg-schema"; import { PartialKeys } from "@stryke/types/base"; 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 /** * A flattened design token ready for documentation rendering. */ interface FlatToken { /** Dot-separated token path (e.g. `color.primary`). */ path: string; /** DTCG `$type`, when known. */ type?: TokenType | string; /** Raw `$value` from the token document. */ value: unknown; /** CSS-friendly string form of {@link value}. */ cssValue: string; /** Stable CSS custom property name for this path. */ cssVar: string; /** Optional DTCG `$description`. */ description?: string; /** Theme / set id when tokens are a `Record`. */ theme?: string; /** True when this color belongs to an ancestor group marked `palette: true`. */ palette?: boolean; /** Semantic child-theme name from a token or ancestor `theme` property. */ childTheme?: string; } /** * Storybook theme variables passed to `create()` from `storybook/theming`. * * @see https://storybook.js.org/docs/configure/user-interface/theming */ interface StorybookTheme { /** Required baseline palette (`light` or `dark`). */ base: "light" | "dark"; colorPrimary?: string; colorSecondary?: string; appBg?: string; appContentBg?: string; appHoverBg?: string; appPreviewBg?: string; appBorderColor?: string; appBorderRadius?: number; fontBase?: string; fontCode?: string; textColor?: string; textInverseColor?: string; textMutedColor?: string; barTextColor?: string; barHoverColor?: string; barSelectedColor?: string; barBg?: string; buttonBg?: string; buttonBorder?: string; booleanBg?: string; booleanSelectedBg?: string; inputBg?: string; inputBorder?: string; inputTextColor?: string; inputBorderRadius?: number; brandTitle?: string; brandUrl?: string; brandImage?: string; brandTarget?: string; gridCellSize?: number; } type StorybookThemePartial = PartialKeys; type StorybookThemeResult = StorybookThemePartial | Record; /** * Map flattened design tokens to a Storybook theme object. * * @see https://storybook.js.org/docs/configure/user-interface/theming */ type GenerateStorybookTheme = (tokens: Tokens | Record) => StorybookThemeResult; /** * Options for the Razorwind Storybook token docs generator. */ interface StorybookPluginOptions { /** * Directory (relative to the execution cwd) where generated docs are written. * * @defaultValue `"storybook/tokens"` */ outputPath?: string; /** * Storybook sidebar title prefix for generated MDX pages. * * @defaultValue `"Design Tokens"` */ titlePrefix?: string; /** * CSS custom-property prefix used when emitting `var(--…)` references. * * @defaultValue `"rw"` */ cssVarPrefix?: string; /** * Sample text rendered by the typography Typeset doc block. * * @defaultValue `"The quick brown fox jumps over the lazy dog"` */ sampleText?: string; /** * Restrict generated docs to these DTCG `$type` values. * When omitted, all supported types are included. */ includeTypes?: TokenType[]; /** * Depth used when grouping color tokens into `ColorItem` entries. * * @defaultValue `2` */ colorGroupBy?: number; /** * Map extracted token values to a Storybook UI theme. * * When provided, all mapped themes are written to a single * `{outputPath}/theme.ts`. One theme becomes `export default create({…})`; * multiple themes become a record keyed by theme name * (`{ light: create({…}), dark: create({…}) }`). * * DTCG aliases (`{color.base.1}`) and color objects in mapped values are * resolved to concrete CSS colors before emit. * * @see https://storybook.js.org/docs/configure/user-interface/theming */ mapTheme?: GenerateStorybookTheme; /** * Skip generating icon documentation pages. * * @defaultValue `false` */ skipIcons?: boolean; /** * Override body for generated `INSTALL.md`. When omitted, Storybook wiring * steps are generated for the output directory. */ installGuide?: string; } //#endregion //#region src/flatten.d.ts /** * Flatten DTCG token trees into documentation rows. */ declare function flattenTokens(tokens: Tokens$1 | Record, options?: Pick): FlatToken[]; //#endregion //#region src/install.d.ts /** * Build Storybook INSTALL.md for generated token docs. * * @see https://storybook.js.org/docs/writing-docs/mdx */ declare function renderInstallMd(options: { outputPath: string; titlePrefix?: string; themeFiles?: string[]; themeNames?: string[]; tokenThemeNames?: string[]; }): string; //#endregion //#region src/generate.d.ts /** * Fill Storybook brand fields from Schema identity when the mapped theme omits them. */ declare function applyBrandDefaults(base: "light" | "dark", theme: PartialKeys, identity: { title?: string; homepage?: string; logo?: string; }, fonts?: Fonts): StorybookTheme; /** * Serialize Storybook theme(s) as a `storybook/theming` `create()` module. * * A single theme becomes `export default create({…})`. Multiple named themes * become a record: `{ light: create({…}), dark: create({…}) }`. * * @see https://storybook.js.org/docs/configure/user-interface/theming */ declare function renderThemeFile(theme: StorybookTheme | Record): string; /** * Normalize {@link StorybookPluginOptions.mapTheme} results into a named * theme record. Multi-theme token sets are mapped per theme when `mapTheme` * returns a single theme object. */ declare function normalizeThemes(mapped: unknown, spec: Pick, identity: { title?: string; homepage?: string; logo?: string; }, mapTheme: NonNullable): Record; /** * Generate Storybook MDX / React token doc blocks from a Razorwind schema. */ declare function generateTokenDocs(spec: Schema, options?: StorybookPluginOptions): GeneratorFunctionResult; //#endregion //#region src/index.d.ts /** * Razorwind plugin that turns design tokens into Storybook MDX doc blocks * (`ColorPalette`, `Typeset`, `TokenTable`, `IconGallery`) and optional UI themes. * * Light and dark token sets are emitted as a single `theme.ts`: one theme is * `export default create({…})`; multiple themes are a record keyed by name * (`{ light: create({…}), dark: create({…}) }`). * * @see https://storybook.js.org/docs/writing-docs/doc-blocks * @see https://storybook.js.org/docs/configure/user-interface/theming * @see https://github.com/unpunnyfuns/swatchbook/tree/main/packages/addon * * @example * ```ts * import { defineConfig } from "@razorwind/core"; * import storybook from "@razorwind/storybook"; * * export default defineConfig({ * plugins: [ * storybook({ * mapTheme: tokens => ({ * base: "light", * colorPrimary: tokens.find(t => t.path === "color.primary")?.cssValue, * brandTitle: "My Design System" * }) * }) * ] * }); * ``` */ declare const _default: (options?: StorybookPluginOptions | undefined) => import("@razorwind/core/plugin").Plugin; //#endregion export { type FlatToken, type GenerateStorybookTheme, type StorybookPluginOptions, type StorybookTheme, type StorybookThemePartial, type StorybookThemeResult, applyBrandDefaults, _default as default, flattenTokens, formatTokenValue, generateTokenDocs, normalizeThemes, renderInstallMd, renderThemeFile, resolveTokenSets, toCssVar }; //# sourceMappingURL=index.d.cts.map