Clarity v2 CSS Variable Theming Does Not Propagate to Shadow DOM Components

Variable Propagation in Clarity v2

CSS custom properties (variables) set on a host element or the :root do propagate through the Shadow DOM boundary. Unlike standard CSS selectors, which are blocked by encapsulation, custom properties are inherited by all elements within a shadow root, provided the component's internal styles are authored to use those variables.

How Inheritance Works in Clarity v2

Whether a global theme change affects a Clarity v2 component depends on the component's internal implementation, not the Shadow DOM boundary itself:

• Variable-Driven Styles: If a component's internal CSS uses var(--clr-variable-name), it will automatically inherit the value defined on the host or root.
• Hard-coded Styles: If a component uses static values (e.g., color: #333) instead of variables, global CSS variables will have no effect.
• The Role of ::part: The ::part selector is used to target specific internal elements for property overrides (like border-radius). It is not required for variable inheritance; variables flow into the shadow root regardless of whether a part is exposed.

Implementation Steps for Global Theming

To apply a theme across all compatible Clarity v2 components, define your variables at the highest possible level:

1. Define your theme variables in the global stylesheet using the :root selector or a top-level wrapper class.
2. Use the specific Clarity variable names (typically prefixed with --clr-).

:root {
  --clr-primary-color: #005fb8;
  --clr-accent-color: #ffcc00;
}

Verification and Diagnostics

If a component is not responding to your theme variables, perform the following checks:

• Inspect Internal Styles: Open Browser DevTools, expand the #shadow-root of the component, and check the computed styles. Look for var() references. If the property is a hard-coded hex value, that specific component cannot be themed via variables.
• Check Specificity: Ensure no more specific selector is overriding your :root variables on the host element.

Diagnostic Detail Needed: To provide a definitive list of which components are affected, please specify the exact version of Clarity v2 you are using, as internal style mappings may vary between minor releases.