or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-integration.mdconfiguration.mddoc-blocks.mdindex.mdpresenters.md
tile.json

tessl/npm-storybook-design-token

Storybook addon to display design token documentation generated from your stylesheets and icon files.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/storybook-design-token@4.1.x

To install, run

npx @tessl/cli install tessl/npm-storybook-design-token@4.1.0

index.mddocs/

Storybook Design Token

Storybook Design Token is a comprehensive addon that enables teams to display design token documentation directly within Storybook, parsing stylesheets (CSS, SCSS, LESS) and icon files to automatically generate visual design token previews. It provides multiple presentation modes including animations, colors, borders, typography, spacing, and shadows with customizable presenters and filtering capabilities.

Package Information

  • Package Name: storybook-design-token
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install storybook-design-token

Core Imports

import { DesignTokenDocBlock } from "storybook-design-token";

For doc blocks specifically:

import { DesignTokenDocBlock } from "storybook-design-token/doc-blocks";

CommonJS:

const { DesignTokenDocBlock } = require("storybook-design-token");

Basic Usage

import { DesignTokenDocBlock } from "storybook-design-token";

// Embed in Storybook docs page
export default {
  title: "Design System/Tokens",
  parameters: {
    docs: { 
      page: () => (
        <DesignTokenDocBlock
          categoryName="Colors"
          viewType="table"
          showSearch={true}
        />
      )
    }
  }
};

// Use in story with custom configuration
export const TokenPreview = {
  parameters: {
    designToken: {
      showSearch: true,
      defaultTab: "Colors",
      pageSize: 10,
      tabs: ["Colors", "Typography", "Spacing"]
    }
  }
};

Architecture

Storybook Design Token is built around several key components:

  • Storybook Integration: Seamless addon panel and doc block integration using Storybook's official APIs
  • File Parser System: Automatic token extraction from CSS, SCSS, LESS, SVG, and image files using glob patterns
  • Presenter System: 15 built-in visual presenters for different design token types with extensibility for custom presenters
  • Configuration System: Flexible options for tabs, search, pagination, and custom styling
  • Type System: Complete TypeScript support with interfaces for Token, Category, and configuration options
  • Build Integration: Support for both Webpack and Vite build systems through dedicated plugins

Capabilities

Doc Block Components

Embeddable React components for displaying design tokens in Storybook documentation pages and stories. Perfect for design system documentation and token showcases.

function DesignTokenDocBlock(props: DesignTokenDocBlockProps): JSX.Element;

interface DesignTokenDocBlockProps {
  categoryName: string;
  maxHeight?: number;
  showValueColumn?: boolean;
  viewType: TokenViewType;
  filterNames?: string[];
  usageMap?: Record<string, string[]>;
  theme?: string;
  showSearch?: boolean;
  pageSize?: number;
  presenters?: PresenterMapType;
}

type TokenViewType = "table" | "card";

Doc Block Components

Token Presenters

Visual presentation components for different types of design tokens including colors, typography, spacing, animations, and more. Supports both built-in presenters and custom presenter extensions.

function TokenPreview(props: TokenPreviewProps): JSX.Element;

interface TokenPreviewProps {
  token: Token;
  presenters?: PresenterMapType;
}

interface PresenterMapType {
  [key: string]: React.FunctionComponent<PresenterProps> | React.ComponentClass<PresenterProps>;
}

interface PresenterProps {
  token: Token;
}

Token Presenters

Configuration System

Comprehensive configuration options for customizing the addon behavior, including tab management, search functionality, pagination, and style injection.

interface Config {
  showSearch?: boolean;
  defaultTab?: string;
  styleInjection?: string;
  pageSize?: number;
  presenters?: PresenterMapType;
  tabs?: string[];
}

Configuration System

Build System Integration

Webpack and Vite plugins for automatic design token file discovery and processing during the build process.

function managerEntries(entry?: any[]): any[];
function viteFinal(viteConfig: Record<string, any>, options: any): Promise<Record<string, any>>;
function webpackFinal(config: any, options: AddonOptions): Promise<any>;

Build System Integration

Core Types

interface Token {
  name: string;
  value: string;
  rawValue: string;
  description?: string;
  isAlias?: boolean;
  categoryName?: string;
  presenter?: TokenPresenter;
  sourceType: TokenSourceType;
  sourcePath: string;
}

interface Category {
  name: string;
  tokens: Token[];
  presenter?: TokenPresenter;
  range?: CategoryRange;
  source?: string;
}

interface Tab {
  label: string;
  categories: Category[];
}

enum TokenPresenter {
  ANIMATION = "Animation",
  BORDER = "Border",
  BORDER_RADIUS = "BorderRadius",
  COLOR = "Color",
  EASING = "Easing",
  FONT_FAMILY = "FontFamily",
  FONT_SIZE = "FontSize",
  FONT_WEIGHT = "FontWeight",
  LINE_HEIGHT = "LineHeight",
  LETTER_SPACING = "LetterSpacing",
  OPACITY = "Opacity",
  SHADOW = "Shadow",
  SPACING = "Spacing",
  SVG = "Svg",
  IMAGE = "Image"
}

enum TokenSourceType {
  CSS = "CSS",
  LESS = "Less",
  SCSS = "SCSS",
  SVG = "SVG",
  THEO = "THEO",
  IMAGE = "IMAGE"
}