feat(styling): align colours and typography with B.C. Design System(engage-235) - #314
Merged
Conversation
Colour and type values were spread across a hand-maintained Palette object and
204 hex literals (91 unique) that bypassed the MUI theme entirely. Palette and
BaseTheme were two unsynced sources: only primary/secondary/text/action/info
reached MUI, so the 39 files importing Palette directly could not be restyled
through the theme at all.
Both now resolve from a single set of design tokens in src/styles/designTokens.ts,
transcribed from @bcgov/design-tokens v5.0.0 with the upstream names preserved so
the two can be diffed. Kept local rather than taken as a dependency so values can
be tuned without waiting on an upstream release. A small SCSS twin in _tokens.scss
serves App.scss and formio.scss.
Hex literals in met-web/src drop from 204 to 77; every survivor is a domain
palette (project phases, chart colours, map styling) that the design system does
not govern, documented for follow-up.
Also in this change:
- Upgrade @bcgov/bc-sans 1.0.1 to 2.1.0 and switch to BC_Sans.css, picking up
WOFF2 and the "BC Sans" family name the tokens expect. Collapse six duplicated
font-family strings into one constant.
- Fill in the error, warning, success, background and divider palette entries,
which were undefined, so validation and error states no longer fall through to
MUI defaults. Add central hover, focus-visible, disabled and error overrides for
buttons, inputs, checkboxes, radios and form labels.
- Drive typography from the token scale and expose it through the theme variants,
so the Met* components stop restating sizes. This fixes MetHeader2 rendering
larger than MetHeader1, MetHeader1 and MetHeader3 being identical sizes, sx
being spread first so callers could not override, and the dead bold prop.
- Stop SecondaryButton and TertiaryButton rendering a PrimaryButton when disabled;
each variant now has its own disabled styling.
- Give CommentStatusChip a Needs Further Review case; it previously returned null.
- Point the engagement-tiles web component at BaseTheme instead of createTheme({}),
which rendered it with no BC Sans and no BC colours.
Existing behaviour is otherwise unchanged: 69 test suites pass, typecheck, lint
and production build are clean. Manual verification at the supported breakpoints
is still outstanding, as are design sign-off on the heading scale change
(MetHeader1 1.5rem to 2.25rem) and the lighter widget paper background.
Deferred work is recorded in docs/bc-design-system-followups.md.
Ckoelewyn
requested review from
danieltruong,
marklise,
tolkamps1 and
tom0827
as code owners
July 28, 2026 23:53
tolkamps1
approved these changes
Jul 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Colour and type values were spread across a hand-maintained Palette object and 204 hex literals (91 unique) that bypassed the MUI theme entirely. Palette and BaseTheme were two unsynced sources: only primary/secondary/text/action/info reached MUI, so the 39 files importing Palette directly could not be restyled through the theme at all.
Both now resolve from a single set of design tokens in src/styles/designTokens.ts, transcribed from @bcgov/design-tokens v5.0.0 with the upstream names preserved so the two can be diffed. Kept local rather than taken as a dependency so values can be tuned without waiting on an upstream release. A small SCSS twin in _tokens.scss serves App.scss and formio.scss.
Hex literals in met-web/src drop from 204 to 77; every survivor is a domain palette (project phases, chart colours, map styling) that the design system does not govern.
Also in this change:
Existing behaviour is otherwise unchanged: 69 test suites pass, typecheck, lint and production build are clean. Manual verification at the supported breakpoints is still outstanding, as are design sign-off on the heading scale change (MetHeader1 1.5rem to 2.25rem) and the lighter widget paper background.
ref engage-235