Generate CSS/SCSS files for typography, palette, breakpoints

[frederickobrien]

Note

All credit to @egargan who did the actual work in the original PR. We needed to make a copy as Canaries releases (understandably) don't work on forks

What are you changing?

These changes add three new generated files under foundations/__generated__.

• a typography.css file containing plain CSS classes for each typography preset
• a palette.css file containing CSS variable declarations for each palette colour
• a breakpoints.scss file exporting Source's breakpoints as a $breakpoints variable

Three new custom Cobalt plugins were added to generate these files. Each was adapted from the existing plugins that generate the existing TypeScript files already under __generated__.

New folders were added to cobalt-plugins to help with organisation, now that we have multiple plugins for breakpoints, palette, and typography.

To be decided

• Are we happy with the new export paths in package.json?
• Are we happy with the --src prefix before classes and variable names? A prefix is important but it should be as brief as possible

Further work

One potential issue: adding typography class names to all of your text elements could get repetitive and bloat-y.

We could either define a mixin (something like @src-typog("article17")), or, more straightforward, export the typography classes as an SCSS file, so they can be imported and used in @extend rules.

Why?

The design tokens exported by this package are unusable without using a CSS-in-JS framework like Emotion.

I work for the visuals team in editorial. We primarily use Svelte to build our visual projects, a tool which Emotion does not work well with. So we rely on hardcoded stylesheets that copy Source's tokens (such as these), but of course, this is not a sustainable solution.

These changes aim to make Source's design tokens as accessible as possible by exporting them as vanilla CSS (with a bit of SCSS too).

This builds on the experimental work that produces the existing variables.css file.

What does this look like in consuming projects?

Here's an example bit of Svelte (almost identical to HTML save the lang="scss"), assuming the stylesheets have been imported in the appropriate place.

<h2 class="src-headline-medium-34">Breaking news</h2>
<p class="src-article-17">The quick brown fox jumps over the lazy dog.</p>

<div style="background-color: var(--src-brand-400);">🏃</div>
<div style="background-color: var(--src-labs-400);">🟤</div>
<div style="background-color: var(--src-lifestyle-300);">🦊</div>

<style lang="scss">
  @media (min-width: $src.breakpoints.mobile) {
    // ...
  }
</style>

See also

In a similar vein, the visuals team has also been developing a CSS-only version of Source's component library. See guardian/interactive-source-components.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0a23ecf

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/[email protected]

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/[email protected]
• @guardian/[email protected]

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/[email protected]

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/[email protected]

🐥