Drupal is a registered trademark of Dries Buytaert
drupal 11.3.8 — Update released for Drupal core (11.3.8)! drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! linkit 7.0.14 — Minor update available for module linkit (7.0.14). masquerade 8.x-2.2 — Minor update available for module masquerade (8.x-2.2). video_embed_field 3.1.0 — Minor update available for module video_embed_field (3.1.0). bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). editoria11y 3.0.1 — Minor update available for module editoria11y (3.0.1). geofield_map 11.1.9 — Minor update available for module geofield_map (11.1.9). domain 3.0.0 — Major update available for module domain (3.0.0). ai 1.2.15 — Minor update available for module ai (1.2.15). ai 1.3.4 — Minor update available for module ai (1.3.4). leaflet 10.4.7 — Minor update available for module leaflet (10.4.7).
← All modules

canvas_styles

No security coverage
View on drupal.org

Canvas Styles is a site-builder UI for editing the CSS custom properties (design tokens) that Drupal Canvas uses to control colors, typography, spacing, shadows, and similar visual primitives. Without it, changing a brand color or body font in a Canvas-built site means typing CSS into the Global CSS tab. With it, those tokens become Form API fields with the right widget for each value type, so editors and designers can adjust them without writing CSS by hand.

Canvas Styles reads every top-level :root { ... } and Tailwind @theme { ... } block in the global asset library CSS and surfaces each token as an editable field. Tokens authored by hand and tokens added through this module flow through the same form, so a team can mix manual CSS authoring and form-driven editing without conflict.

This module may be a stopgap until equivalent functionality ships in Canvas itself.

Features

  • Edits the same CSS custom properties Canvas already uses. No parallel data store, no schema duplication.
  • Typed widgets per token (color picker, length input, font weight selector, shadow editor, and others) chosen from the token name and value shape.
  • Live preview swatch next to every field so the effect of a change is visible before saving.
  • Add new tokens through an inline sub-form. The new token appears in the matching category (a --color-* token in Color, a --spacing-* token in Spacing & Size, and so on) and is editable from then on like any other.
  • Hand-authored declarations are edited byte-for-byte: only the value span changes, surrounding whitespace and comments stay exactly as written.
  • Clearing a hand-authored token never deletes it. The form preserves the declaration and warns the editor instead, so a mistyped clear cannot wipe out brand styling.
  • Uninstall is non-destructive. Sentinel comments are stripped, but the tokens added through the form are preserved as a plain :root { } block so the cascade keeps applying them.
  • Token name allowlist and value-object validation on every write path block url(), @import, javascript:, and similar smuggling vectors before they reach the config entity.

Post-Installation

  1. Grant the administer canvas styles permission to the roles that should be able to change token values (typically site-builders and designers).
  2. Visit Admin › Appearance › Canvas Styles (/admin/appearance/canvas-styles) to see every token Canvas currently exposes, grouped by category.
  3. Edit values inline. The form saves to Canvas's existing asset_library.global config entity, so changes take effect on the next cache rebuild.

Additional Requirements

  • Drupal core 11.x
  • Drupal Canvas 1.2 or later (enabled)
  • PHP 8.3 or later

Recommended modules/libraries

  • Drupal Canvas is required, not optional. The module has no function without it and refuses to install if Canvas is not enabled.
  • The admin form uses --gin-border-color as a CSS variable fallback, so it integrates visually with the Gin admin theme when present, while remaining usable on Claro and Seven.

Similar projects

Canvas itself ships a Global CSS tab and per-component CSS fields aimed at developers comfortable writing CSS by hand. Canvas Styles is the site-builder counterpart, not a replacement. The two tabs are complementary: developers can keep authoring CSS in the Global CSS tab while site-builders adjust tokens through this module, and both surfaces edit the same underlying CSS.

Supporting this Module

  • Report bugs and request features in the issue queue.
  • Patches and merge requests are welcome. The full test suite (unit, kernel, functional) runs in drupal.org's GitLab CI on every push.

Community Documentation

  • The README covers installation, usage, and the deletion semantics that protect hand-authored CSS.
  • The architecture document explains the read-write design, the three write paths, and the safety model.

Activity

Total releases
1
First release
May 2026
Latest release
4 hours ago
Release cadence
—
Stability
0% stable

Releases

Version Type Release date
1.0.0-beta1 Pre-release May 1, 2026