Main website
Government Drupal Developers NetworkCommunity

Site BuildingDesign Systems

Design tokens in Twig: keeping our theme in step with the NHS design system

Started by Hannah Price on · 244 views · 3 replies · 9 likes

HP

Hannah PriceGroup leadStarted the thread

Frontend Developer, NHS England ·

We keep drifting from the NHS design system every time it releases. Current idea: generate CSS custom properties from the design system's tokens at build time, and only reference tokens in our Twig components.

Has anyone automated this end to end? Style Dictionary, a custom script, something else?

3 Latest reply

3 replies

  1. SN

    Sophie Nguyen

    Accessibility Specialist, Digital Transformation Agency ·

    #1

    Style Dictionary → CSS custom properties, run in CI on a schedule. A PR opens when tokens change, so a human reviews visual diffs in Storybook.

    2
  2. TR

    Tama Rangi

    Tech Lead, Department of Internal Affairs ·

    #2

    Same here, plus a stylelint rule that bans raw hex values in component CSS. It forces people to use tokens.

    3
  3. PS

    Priya ShahModerator

    Lead Drupal Developer, Government Digital Service ·

    #3

    GDS is moving GOV.UK Frontend config to Sass modules, which makes this easier. Happy to share our setup at the next show & tell.

    1

Join the conversation

GDDN is for people working on Drupal in government. Log in or apply to reply.

Log inApply to join