Export · #421

Your stories, this palette

A Storybook decorator that sets the site's tokens as custom properties around every story. Values are the same ones the tokens export carries — both read the stylesheet — so a token change moves the decorator too.

Download the decorator The token file →

The file (1.3 KB, complete)

/* Motif UI Storybook decorator — tokens from src/app/globals.css.
 *
 * Wrap a preview so stories inherit this site's palette. The decorator sets
 * custom properties rather than importing a stylesheet: the tokens are the
 * contract, the component classes are not part of this export.
 *
 * Usage:  // .storybook/preview.js
 *         import { withMotif } from "./motif-storybook-decorator";
 *          */
import React from "react";

const TOKENS = {
        "--color-bg": "#06070b",
        "--color-panel": "#0b0d14",
        "--color-raised": "#10131d",
        "--color-edge": "rgba(255, 255, 255, 0.08)",
        "--color-edge-strong": "rgba(255, 255, 255, 0.16)",
        "--color-ink": "#edf0f7",
        "--color-ink-dim": "#9aa3b5",
        "--color-ink-faint": "#747b87",
        "--color-accent": "#8b5cf6",
        "--color-accent-2": "#22d3ee",
        "--color-accent-3": "#f472b6",
        "--color-mint": "#34d399",
        "--color-amber": "#fbbf24",
        "--color-danger": "#f87171",
};

export const withMotif = (Story) =>
  React.createElement(
    "div",
    {
      style: {
        ...TOKENS,
        background: TOKENS["--color-bg"],
        color: TOKENS["--color-ink"],
        padding: "2rem",
        fontFamily: "system-ui",
      },
    },
    React.createElement(Story)
  );

export default withMotif;

Why properties, not a stylesheet

A decorator can only promise what it can enforce. Setting custom properties gives a story the exact colours; it cannot give it this site's utility classes, because those live in a stylesheet that is not part of the export. So the decorator does the part it can do completely and the page says what is missing.

Not published to npm

The file is served from this site, not from a registry. That means no version resolution, no lockfile entry and no way to know a copy you took six months ago still matches — so nothing here claims a package version. Downloading it again is the update mechanism, which is a real limitation of shipping a file instead of a package.