Skip to content

feat: site-tokens - Capture every live button style for Fill, Outline and the block style variations #4027

Open

Description

@ZaredRogers

Found in scaffold end-to-end test run 2 (9 Nov 2026), in the review of the step 3a retry.

Problem

The skill reduces the live buttons to three action colours (primary, secondary, cta). On TSP, primary and secondary both came out as brand-600, because brand is the most used button fill. The other button looks on the site are lost, so the new theme can't represent them.

Decision (Zared, 9 Nov)

All button styles come from the buttons used on the live site:

  • Fill (the default button in theme.json) is the most common button.
  • Outline (also in theme.json) is usually an outline button. It can also be the button that shows well on dark backgrounds.
  • Every other live button style becomes a block style variation in styles/blocks/buttons/*.json.

Every live button style must be represented in the new theme somehow.

Fix

  • site-to-design-tokens: group the crawled buttons into distinct styles (fill, text, border, radius, padding, hover). Rank them by use, mark Fill and Outline, and list the rest as variations in the proposal and report.
  • figma-to-block-theme (or whichever step writes the theme): write Fill and Outline into theme.json, and one styles/blocks/buttons/<name>.json for each other variation.

Done when

On the TSP crawl, the proposal lists every distinct live button style, with Fill and Outline chosen and the rest as variations. A generated theme has all of them.

Agent notes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Fields

Priority

Medium

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions