Update colours to match Bolt

[davinotdavid]

What changed?

Warning

This is a breaking change.

• Updated the colours based on the current Bolt colours.
• Added --colour-surface and marked --colour-neutral as deprecated / to be removed once we've all migrated to the new names.
• Removed --colour-send-*, --colour-apmt-* and --colour-service-* since we are moving away from service-specific colour palettes and towards a more unified look.
• Added a new Colours story for the Storybook (and a helper to render them) to visually check the colours.

Why?

• Parity with the Bolt design system. Also it was quite confusing to have different named colours (surface / neutral or critical / danger) so this will help standardize the nomenclature used between design <-> dev.

Limitations and Notes

• This is a breaking change for colours and each service should adapt to them. Since --colour-danger-* and --colour-neutral-* are the most commonly used, there will be a moment until Send and Appointment are updated.
• We should also hopefully remove all the duplicated .css colours form the projects while we're at it!
• We have some extra "forced" -light -dark colours for specific cases and those were kept.

Applicable Issues

Closes #317

QA Log

• Manually checked the new storybook setup that shows the colours to verify that they match Bolt.

Screenshots

Light mode:

Dark mode:

[devmount]

This is awesome, thanks so much for improving the color management! 👏🏻 I found some smaller things and have some bigger questions, all noted below.

1. Just to make sure: We are removing the --colour-service-* and --colour-user-* props directly without deprecating them. Is this intentional? I'm not sure how much they are used in the services apps, so I'm fine with that. Also this PR is flagged as breaking anyway.
   1. Appending to 1.: SyncCard still references --colour-service-primary and --colour-service-secondary. Should we replace them to avoid an undefined state?
   2. Also: BaseButton still references --colour-service-primary
   3. Also: UserAvatar still references --colour-user-blue
   4. Also: LoadingSkeleton still references --colour-user-graphite
2. Since the ColourPalette is a Storybook only component, should we remove the "Show Code" functionality?

[davinotdavid]

@devmount Thanks a lot for the reviews! You caught a lot of bits that I've missed here.

So for the --colour-service-* and --colour-user-*, I believe those should have been deprecated a long time ago as Design doesn't seem to be using this since the start of Thundermail's Community Release / Early Bird.. then my thinking here was that those are long overdue for removal.

For the ones I've marked as deprecated, those are still used and could still continue to be used but they have mismatching names compared with what is on Bolt / Zeplin / Figma files. At least for me, the mismatch was confusing but it might take a little bit of time to adjust.

Both Appointment & Send have their own copies of colours.css so the plan here when we release this is to go over both projects, remove the duplicated colours.css so that it can pull from services-ui directly and update any references of the outdated variables to the new ones. The one exception that I am aware of is Keycloak's theme in Accounts that also has a hard copy of the colours.css there but I believe it has to stay that way for build purposes :(

[devmount]

Perfect, thanks for all the fixes and improvements.

Both Appointment & Send have their own copies of colours.css so the plan here when we release this is to go over both projects, remove the duplicated colours.css so that it can pull from services-ui directly and update any references of the outdated variables to the new ones.

Yes I think this a good way to go to get rid of deprecated and spreaded styles 👍🏻

[MelissaAutumn]

Thanks! To keep up with design, I recommend a useless css variable that marks a version number/date/hash. Like

--bolt-design-version: 2026-09. That way we can see which project is running what version, it'll be handy in the future I think.

[davinotdavid]

Thanks! To keep up with design, I recommend a useless css variable that marks a version number/date/hash. Like

--bolt-design-version: 2026-09. That way we can see which project is running what version, it'll be handy in the future I think.

Oooo that's a good idea, we can try to keep that up-to-date with design changes. I've changed the name slightly to be --bolt-design-synced instead to be a bit more explicit. Thanks for the suggestion! Nice note to add for the Design committee meeting!