v0.1.2

August 29 2021

Summary

This release brings an overall rework of the theming system, which was introduced in early versions of Nuclui. Having very few components to theme, the structure lacked consistency and clarity on where parts of the palette should be used. After the form components were created, I decided to rework this structure based on them. The ultimate goal is to have a reusable palette for future components. However, I foresee changes to this structure as more components are added to the framework.

The deployment of this release has a new theme select and the Benchmark page has been used to test the overall theme. As of now, the themes presented will not ship with the package. They are only examples of what can be done by overriding theme properties of the Root component.

Theming Changes

Background

• primary has been renamed to main. This color should typically be used only once for the app's background.
• secondary has been renamed to surface. This color can be used to distinguish elements over main elements.
• dimmed has been renamed to surfaceAlt. This color is an alternate surface color. It can be used for less distinguishable elements over main elements.
• active and activeAlt have been added as colors that represent a component being interacted with. They can often be found on hover and active states.

Context

All context colors have been revamped. Previously, context colors had a "shading" structure (VLight, Light Dark and VDark). I realized it was the wrong approach for flexible themes. When building the dark theme, some components had the VLight color when I actually wanted much darker colors. At first, this resulted in VLight colors being dark. This didn't make much sense. Instead, I was inspired by the changes made to background to rename all context colors. The following list only shows primary, but this applies to all other context colors.

• primaryVLight, primaryLight, primaryDark and primaryVDark have been removed.
• primaryActive and primaryActiveAlt were added. Similarly to background, they represent colors when a component is being interacted with.
• primarySurface has been added. Although the only use case I've found so far for this one is the Slider's track, I can see future components using them, such as a Toast.
• primaryContrastText has been added. This is the text color that should be applied when it appears on a background of that context color. For example, this is what makes the color switch from black to white on a selected date of the DatePicker calendar

Border, Shadow and Text

So far, there has no been any issues with these theme properties. They haven't been modified.

Other

• Update packages to fix vulnerability warnings.