fix(theme): update brand colors in response to config changes
Brand colours were not updating in some UI components in response to config changes. This was for two reasons:
- The components in question were requiring the theme file directly, which was not being dynamically updated
- They were accessing the
colors
property of themes, which was not being updated even when accessed via thedynamicTheme
.
I've changed all use of brand colors to access via e.g. th('colors.brand1.tint10')
as opposed to theme.colors.brand1.tint10
. This is a bit cumbersome but OK for an urgent fix. Note that some non-branding colors are still accessed as e.g. theme.colors.neutral.gray60
, which is not consistent, but I don't want to change all these until we have decided on the best consistent approach.
I've also modified the creation of the dynamicTheme
in Pages.js
to update not only its colorPrimary
and colorSecondary
properties, but also its colors
property with all sub-properties. (This property is where we want to get all colors from in the future, and we are gradually migrating the UI to use this in preference.)
I would like to refactor so we can access colors more succinctly, and access all colors the same way rather than giving branding colors special treatment; but not in this urgent fix.