Theming Playground

Web app and Figma plugin for creating a custom themes

Theme Options

Design Systems

React

Figma Plugin

June 20, 2024

Theming Playground is a web app for configuring, previewing, and saving themes.

I created the Theming Playground as part of my work at OpenStore. The goal was to create and manage brand identities for over 50 eCommerce stores in a scalable way, so that the incremental cost of adding a new brand would approach zero.

How It Works

Select theme options and immediately see what they look like on sample UI components, eCommerce pages, and emails.

Design tokens are generated for colors, typography, and corner radius based on the selected brand options.

type Theme = {
  name: string,
  color: {
    brand: { //
      BASE: ShadeNumber,
      FOREGROUND: ShadeNumber,
      "50": string, // hexcode
      "100": string, // hexcode
      "200": string, // hexcode
      "300": string, // hexcode
      "400": string, // hexcode
      "500": string, // hexcode
      "600": string, // hexcode
      "700": string, // hexcode
      "800": string, // hexcode
      "900": string, // hexcode
      "950": string, // hexcode
    },
    accent: {
      ...   // color scale
    },
    supplemental: {
      ... // color scale
    },
    neutral: {
      ... // color scale
    },
  },
  radius: {
    BASE: number,
    xs: number,
    sm: number,
    md: number,
    lg: number,
  },
  heading: {
    font: string,
    weight: string,
    style: string,
  },
};

type Theme = {
  name: string,
  color: {
    brand: { //
      BASE: ShadeNumber,
      FOREGROUND: ShadeNumber,
      "50": string, // hexcode
      "100": string, // hexcode
      "200": string, // hexcode
      "300": string, // hexcode
      "400": string, // hexcode
      "500": string, // hexcode
      "600": string, // hexcode
      "700": string, // hexcode
      "800": string, // hexcode
      "900": string, // hexcode
      "950": string, // hexcode
    },
    accent: {
      ...   // color scale
    },
    supplemental: {
      ... // color scale
    },
    neutral: {
      ... // color scale
    },
  },
  radius: {
    BASE: number,
    xs: number,
    sm: number,
    md: number,
    lg: number,
  },
  heading: {
    font: string,
    weight: string,
    style: string,
  },
};

Themes and their corresponding design tokens are saved to a database that is the single source of truth for all themes.

Design tokens are fetched from the database via API endpoint and are used in each branded surface to programatically style UI components, emails, and other surfaces.

    const theme = await getThemeByName(themeName);
    await createColorVars(theme);
    await createSemanticColorVars(theme);
    await createRadiusVars(theme);
    await createTypographyVars(theme);

    const theme = await getThemeByName(themeName);
    await createColorVars(theme);
    await createSemanticColorVars(theme);
    await createRadiusVars(theme);
    await createTypographyVars(theme);

For web components, design tokens are used to generate CSS variables. Whereas for emails, the design tokens are passed as props defined by a third-party library.

Companion Figma Plugin

I also coded a companion Figma plugin that generates Figma styles and variables and then automatically applies them to the Figma components in our component library.

A large part of the work was defining what design tokens were needed for the system to flexibly support a wide range of brand identities, and coming up with a naming convention for semantic variables that was easy to understand and use.