Plain CSS version of Source Foundations

[frederickobrien]

It would be fab for interactive development (and likely beyond) if more of source was available as plain CSS.

Most atoms are built using Svelte, which makes it harder to integrate with Source at present. This is a shame in principle and also means interactive atom templates have their own hardcoded boilerplate styles which over time will inevitably get out of sync with Guardian design conventions.

A proof of concept for this idea already exists in variables.css, which is generated from tokens.json. Documentation:

Source Design Tokens

tokens.json contains the design tokens for Source, which are used to auto-generate values that are exported from @guardian/source/foundations.

Development

Edit tokens.json and run make build to update the code in ../foundations/__generated__, then include those changes in your commit.

If we can rejig the generated CSS we can import and use it as the design base for atoms going forward.

Also worth thinking about tapping into Dotcom's palette system: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/paletteDeclarations.ts

Some old PRs for context:

• Build JS version of design tokens for Source Foundations #980
• Add web typography presets to design tokens #1247
• Export typography presets as CSS #1270
• Update Design Tokens package to export multiple objects #1380