guardian / csnx

Monorepo for Guardian UIs
https://guardian.github.io/csnx
Apache License 2.0
36 stars 3 forks source link

Update `source-foundations` to use design tokens #894

Open jamesmockett opened 1 year ago

jamesmockett commented 1 year ago

As a first step to introducing design tokens we want to add them directly to source-foundations so they are used to generate the existing tokens this package exports. Consumers of the package will see no difference: rather than the TS objects and variables being created and updated by hand, they'll be automatically generated from a set of common design tokens. By not publishing these as a separate package their use is slightly under the radar, allowing us to experiment without the burden of having to support usage elsewhere. Eventually it's likely these will be moved out to a separate package and become another dependency.

Prototype source-design-tokens package: https://github.com/guardian/csnx/pull/896

### Tasks
- [x] https://github.com/guardian/csnx/issues/987
- [x] https://github.com/guardian/csnx/issues/988
- [x] https://github.com/guardian/csnx/issues/989
- [x] https://github.com/guardian/csnx/issues/990
- [x] Build remaining set of tokens
- [x] Investigate outputting tokens as TypeScript
- [x] Generate spacing tokens as TS
- [x] Consume spacing tokens in Source Foundations
- [x] Generate size tokens as TS
- [x] Generate colour tokens as TS
- [x] Generate typography tokens as TS
- [x] Generate breakpoint tokens as TS
- [x] Consume typography tokens in Source Foundations
- [x] Consume remainder of tokens in Source Foundations
- [x] Investigate generating token JSON from Figma
joecowton1 commented 10 months ago

@jamesmockett is this finished now?

jamesmockett commented 10 months ago

I've ticked the last item off as Ollie has investigated pulling tokens from Figma so this is finished now!