Sync brand kit colors through canvas.brand-kit.json in the Canvas CLI

Lauri Timmaneerequested to merge
issue/canvas-3592019:3592019-sync-brand-kit-colors-through-canvasbrand-kitjson-in-the-canvas-cli into 1.x

Testing

Setup

  • Enable canvas_dev_mode
  • Run database updates to add the Color entity type
  • Enable canvas_test_code_components_color — installs 7 brand kit colors (Brand Red, Brand Green, Brand Blue, Father Christmas, Baguette Legs, Wow Monster, Doctor Cigarettes) and 2 folders (Pastel Lab Revelation, Absolute Neon Casserole)
  • In the Canvas editor, create a page using the Three Colors component. Set values on several of its color props and note which colors you chose — you will need these when testing deletion protection later.
  • In the Canvas editor, open a page template (Templates > Page templates; use the default or create one). Add a Three Colors component to it. Set a color value on its Brand All prop and note which color you chose.
  • In the Canvas editor create a content template also with a Three colors component.

canvas pull — colors

  • Run canvas pull. Confirm canvas.brand-kit.json is created (or updated) with a colors key containing all 7 colors as CSS variable keys (brand-red, brand-green, etc.)
  • Run canvas pull again without changing anything on the site. Confirm the file is not rewritten (no diff).
  • Add an entry to canvas.brand-kit.json that does not exist on the site (e.g. "local-only": "#ff00ff"). Run canvas pull. Confirm the local-only entry is preserved at the end of the file and reported in the pull output.
  • Run canvas pull --skip-overwrite. Confirm existing entries in the file are left untouched and only colors absent from the file are appended.
  • Open the pulled page template file in page-templates/ and content template in content-templates/. Confirm the color prop you set on the Three Colors component appears as canvas-color: (e.g. "canvas-color:brand-red"), not as a UUID or a raw color object.

canvas push — colors

  • Add a new color to canvas.brand-kit.json (e.g. "test-push": "#aabbcc"). Run canvas push. Confirm the pre-confirmation table shows a Create row for it and the color appears on the site after push.
  • Change an existing color's value in canvas.brand-kit.json. Run canvas push. Confirm the the site color value is updated.
  • Remove a color entry from canvas.brand-kit.json (choose one that is not in use on any page). Run canvas push without --prune-colors. Confirm push reports the server-only color as unmanaged and suggests canvas pull or canvas push --prune-colors, but does not delete it from the site.
  • Run canvas push --prune-colors for the same removed entry. Confirm the pre-confirmation table shows a Delete row and the color is removed from the site after push.
  • Remove from canvas.brand-kit.json one of the colors you set on the Three Colors page during setup. Run canvas push --prune-colors. Confirm:
    • The deletion is refused and the site's reason is reported
    • All other push operations complete normally
    • The command exits non-zero
    • Re-running canvas push --prune-colors reports the same refusal again
  • In the pulled page & content template files, change the Three Colors component's color prop to a different canvas-color: from canvas.brand-kit.json. Run canvas push. Open the page template in the Canvas editor and confirm the component reflects the updated color.

canvas validate

  • Set a color value to an invalid string (e.g. "brand-red": "notacolor"). Run canvas validate. Confirm it reports an error under canvas.brand-kit.json naming the offending key.
  • Add two keys that map to the same variable (e.g. "my-color" and "--my-color"). Run canvas validate. Confirm the duplicate variable is reported.
  • Add two entries that derive the same display name (e.g. "my-color" and "my_color"). Run canvas validate. Confirm the name collision is reported.
  • Remove canvas.brand-kit.json entirely. Run canvas validate. Confirm no brand kit result appears and validation passes.

Folders

  • After a push that creates a new color, open the Canvas Brand Kit UI. Confirm the new color appears in the colors root (not in any folder).
  • Update the value of a color that belongs to Pastel Lab Revelation (e.g. Baguette Legs) in canvas.brand-kit.json and push. Confirm the color remains in the Pastel Lab Revelation folder after the push.
  • The Brand Pastel prop on Three Colors is restricted to the Pastel Lab Revelation folder. Confirm that a color pushed to the root is not available in that prop's picker until moved to the folder via the UI.

Workbench preview

  • With colors in canvas.brand-kit.json, open a component or page preview in the Workbench. Inspect the preview iframe and confirm brand kit colors are injected as CSS custom properties (e.g. --brand-red: #cc0000) before the global CSS.
  • With the Workbench dev server running, change a color value in canvas.brand-kit.json and save. Confirm the component preview and page previews update without restarting the server.
  • Open the Workbench dev server. In the sidebar under Page/Content templates, click the page/content template that contains the Three Colors component. Confirm the color prop renders as a colored swatch — not a broken, missing, or raw string value.
  • With the Workbench dev server running, change the color value of the component's prop directly in the page-templates/ JSON file and save. Confirm the page template preview updates without restarting the server.

--no-include-brand-kit

  • Run canvas push --no-include-brand-kit. Confirm brand kit colors are not pushed (no brand kit colors rows in the output) and the site's colors are unchanged.

Co-authored with Claude Code.

Closes #3592019 (closed)

Edited by Ben Mullins

Merge request reports