Color Controls

Helper utilities for rendering contextual color fields as select controls in Storybook's Controls panel.

colorArgType()

Returns a Storybook argType configuration object that renders a field as a select with all contextual color options plus an empty "none" choice.

function colorArgType(colors?: readonly string[]): { control: { type: 'select' }; options: readonly string[] }

When called without arguments, colorArgType() uses the CONTEXT_COLORS array configured by the addon. Pass a custom array to override the options for a specific field.

Usage

import type { Meta, StoryObj } from '@storybook/html';
import { definePattern, colorArgType } from '@pdrittenhouse/storybook-addon-twig-wordpress';

export default {
  title: 'Atoms/Button',
  ...definePattern('@atoms/button/_button.tpl.twig'),
  argTypes: {
    button_color: colorArgType(),
    icon_color:   colorArgType(),
  },
  args: {
    button_text:  'Click me',
    button_color: 'primary',
    icon_color:   '',
  },
} satisfies Meta;

// use addon-configured context colors (default)
argTypes: { button_color: colorArgType() }

// use a custom color list
argTypes: { brand_color: colorArgType(['red', 'blue', 'green']) }

CONTEXT_COLORS

A readonly tuple of all contextual color names, including empty string for "none":

const CONTEXT_COLORS = [
  '',
  'default',
  'primary',
  'secondary',
  'tertiary',
  'quaternary',
  'quinary',
  'senary',
  'septenary',
  'octonary',
  'nonary',
  'denary',
  'white',
  'black',
  'light',
  'dark',
  'success',
  'danger',
  'warning',
  'info',
  'link',
] as const;

Use CONTEXT_COLORS when you need the array directly — for example, to build a custom argType or validate color values in tests.

ContextColor

TypeScript union type derived from CONTEXT_COLORS:

type ContextColor = '' | 'default' | 'primary' | 'secondary' | ... | 'link';

Use satisfies ContextColor to get type-checking on color arg defaults:

args: {
  button_color: 'primary' satisfies ContextColor,
}