csnx icon indicating copy to clipboard operation
csnx copied to clipboard

Update `source-foundations` to use design tokens

Open jamesmockett opened this issue 1 year ago • 2 comments

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

jamesmockett avatar Nov 09 '23 17:11 jamesmockett