Skip to content

feat(styling): align colours and typography with B.C. Design System(engage-235) - #314

Merged
Ckoelewyn merged 1 commit into
bcgov:mainfrom
Ckoelewyn:engage-235-2
Jul 29, 2026
Merged

feat(styling): align colours and typography with B.C. Design System(engage-235)#314
Ckoelewyn merged 1 commit into
bcgov:mainfrom
Ckoelewyn:engage-235-2

Conversation

@Ckoelewyn

@Ckoelewyn Ckoelewyn commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

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:

  • 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.

ref engage-235

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
Ckoelewyn merged commit 7393adc into bcgov:main Jul 29, 2026
4 checks passed
@Ckoelewyn
Ckoelewyn deleted the engage-235-2 branch July 29, 2026 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants