Aurelia UX Overhaul

We've been doing some major work on Aurelia UX, both in terms of building out components and refining the core capabilities and approach. In this post, we'd like to share a bit about the details of our most recent set of releases.

Monorepo

One of the most noticeable changes in 0.4.0 is that Aurelia UX has moved to use a Monorepo approach. We have implemented Lerna , letting us split out the various components into self-contained packages within a single repo.

This has several advantages:

We now have a single repository for the Aurelia UX core and all official components.
All issues are now tracked against a single repository.
Development, dependency management, setup, testing and releasing are made simpler for both our core team and community.
It's now easier to choose which components you wish to include in your own projects.

Style Engine Overhaul

One of the many ongoing issues we've had was that the JavaScript interpolation style system did not work well with a variety of tools. First, code editors did not like this and it would cause issues with auto formatting features as well as issues with syntax highlighting. Second, it would never work out of the box with Webpack. The reason for all of this is that the binding syntax that was used was not valid CSS.

Enter CSS Variables. We have completely rewritten the style engine to use CSS Variables out of the box. This gives us a fast and native solution to theming that will work great with existing tools. Now, each component in Aurelia is associated with a TypeScript class that defines the theme. Each property on the class is automatically turned into a CSS variable by the framework. The framework then works to keep the variable values in sync with the theme instance. By default, most theme properties are set to design-language-specific values, such as control-background or control-foreground. This allows for a great deal of flexibility:

You can change all components across your app, by simply changing the design language properties.
You can change the details of all components of a type by changing the component's theme properties.
You can create new instances of themes and associate them with individual components or groups of components. Themes are not just global, but can be scoped and assigned in any number of ways.
Themes are "plain old JavaScript objects" so they can be updated and manipulated like any object, allowing for real-time or data-driven theming.

Key New APIs

`applyTheme`

Processes a UxTheme into the corresponding CSS Variables and applies them to the provided element. If no theme is provided then the theme will be setup as a default theme and set CSS Variables in the document head.

`applyThemeGroup`

Applies an array of themes. This is to enable the creation of large theme sets that can be easily applied with one call.

Design Language Improvements

All swatches and design variables are now exposed as CSS variables. They are given a prefix of --ux-swatch-- and --ux-design--. For example the following CSS variables are just some that are exposed to be used anywhere you use Aurelia UX.

Design

    
    --ux-design--app-background
    --ux-design--app-foreground
    --ux-design--control-background
    --ux-design--control-foreground
    --ux-design--primary
    --ux-design--primary-foreground

Swatches

    
    --ux-swatch--blue-grey-p50
    --ux-swatch--blue-grey-p100
    --ux-swatch--blue-grey-p200
    --ux-swatch--blue-grey-p300
    --ux-swatch--blue-grey-p400
    --ux-swatch--blue-grey-p500
    --ux-swatch--blue-grey-p600
    --ux-swatch--blue-grey-p700
    --ux-swatch--blue-grey-p800
    --ux-swatch--blue-grey-p900
    --ux-swatch--black
    --ux-swatch--white
    ...

New Publish Location

Finally, as part of this overhaul, we've moved to publishing all Aurelia UX packages under the aurelia-ux NPM organization . As mentioned above, we've split the 10 current components into their own packages, so you can easily pick which ones you want to use. We've also split out the core so that you can use the style engine independently of the components.

Final Thoughts

These improvements bring Aurelia UX into better alignment with web standards and evolve our repository factoring, development and release in ways that we believe will foster easier contribution from both our core team and community. We're greatly looking forward to delivering more components, additional themes and empowering new user experiences as we move forward.