DS Loop
01 / A COMPLETE, BOUNDED DELIVERYDEMO PROJECT

A small fix.
A complete handoff.

The dark-theme action was still using the light palette. We traced it to two token declarations, preserved the existing theme choices, and applied the change in a working settings preview.

A demo project with reproducible source, browser checks, and a saved decision.

WORKSPACE SETTINGS / THE BIG PICTUREDELIVERED EXAMPLE

WHY THIS WORK, WHAT CHANGED

Follow the palette.
Keep the product’s choices.

Inspect the source
  1. 01 ↗PROBLEM

    One action.
    The wrong theme.

    The action token repeats the light blue in both themes. Changing the dark palette never reaches the button.

  2. 02 ↗DECISION

    Preserve the
    palette choice.

    Keep each theme’s existing palette, text color, and component geometry. Change the semantic alias, not the whole component.

  3. 03 ↗IMPLEMENTATION

    Two declarations.
    One shared role.

    Point the action background to the palette in each theme. Both versions use the same form, component CSS, and save behavior.

  4. 04 ↗VERIFICATION + HANDOFF

    Check the result.
    Leave the rule.

    Measure both themes, compare dimensions, exercise the form by keyboard, and retain the decision with reproducible source.

BEFORE / DARK THEMEA literal bypasses the palette.
AFTER / DARK THEMEThe action follows its theme.

Try changing the workspace name. Each preview saves in page memory only. Use “Light theme” to check the preserved appearance.

THE DARK ACTION#245bdb → #9ab8ff

Now follows the existing dark palette.

THE COMPONENTSame size. Same behavior.

Both themes retain the button dimensions.

THE HANDOFFA decision you can reuse.

Source, checks, limits, and a next-task rule.

Read the checks Read the handoff ↗

Two token finding groups are absent after the change in the 0.4.0 token-only audit. This does not establish full accessibility, full system quality, or backend behavior.

Exactly what changed.

The token change is reused from the existing public button demo. We added a synthetic settings workflow, then rechecked the change with the 0.4.0 source CLI and a browser.

BEFORE / BOTH THEME SCOPES
--color-action-background: #245bdb;
AFTER / BOTH THEME SCOPES
--color-action-background:
  var(--palette-blue-500, #245bdb);

Inspect before.css · after.css · shared component CSS · shared form behavior · before workflow · after workflow

What we verified.

Reproducible source checks and browser measurements are recorded separately. “No findings” refers only to the isolated token declarations.

CheckObserved resultScope
Light action background#245bdb before and afterComputed CSS in browser
Dark action background#245bdb → #9ab8ffExisting palette preserved
Button dimensions129.20 × 43.59 CSS pixels in all four casesSame component CSS and font
Keyboard and formTab reaches Save changes with a 3px outline. Enter updates the preview name.Page-local state; no backend
Token auditTwo finding groups before; zero after0.4.0, isolated token file
LimitsFull accessibility, assistive technology, real persistence, other browsers, and separate-agent retrieval not establishedExplicitly outside this proof

Before audit · After audit · Browser measurements · Source hashes

Leave a useful
starting point.

Keep aliases inside each theme scope. Primary actions follow the theme palette; a different purpose gets a separate semantic role. Check both themes whenever the palette changes.

Read the decision, reproduction steps, and next-task guidance ↗

Start in your repository ↗