CSS Variables

[kylenathan]

Breaking change!

This release moves theming from build time based variables to CSS variables so that theming in consuming apps becomes much easier, and can be fine tuned through setting CSS variables with selectors (as opposed to having to select exposed classes).

E.g.

• Old approach

.nav-bar :global(.ui-button) {
    background: blue;
}

• New approach

.nav-bar {
    --ea-colour-button-background: blue;
}

Migrating from <0.13

To migrate, existing apps will need to move their theme config from environment.js to app.css / app.scss and set the values for the :root selector.

E.g.

:root {
    --ea-colour-blue-b0: #0000ff;
}

---

This discussion was created from the release CSS Variables.