For Developers

How components actually reach the page, how to theme them, and worked examples of doing both for real.

• 

  Architecture

  How Canvas, Layout Builder, SDC and a direct Twig include all reach the same component, and the two-layer contract every one of them follows.

• 

  Theming

  The priority order for retheming anything: Bootstrap Sass variables first, the --theme-* contract as the escape hatch.

• Token reference

  The full --theme-* contract at its base values, beside two custom themes' own overrides.

• Frameworks

  Overriding an SDC template with replaces:, keeping the BEM classes, swapping Bootstrap for anything else one component at a time.

• Examples

  One real custom theme's whole --theme-* contract, and the same component shown three ways from it.

• Retheme a Hero Banner

  A worked example, start to finish: reskin with tokens, scope a component-level override, or add a layout the component doesn't ship.