Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Export typography presets as CSS #1270

Merged
merged 11 commits into from Mar 11, 2024
Merged

Export typography presets as CSS #1270

merged 11 commits into from Mar 11, 2024

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Mar 6, 2024 •
edited

What are you changing?

  • Adds built script to generate CSS for new web typography presets from the existing definitions in the design tokens package and export these as individual variables from Source Foundations
  • Updates some incorrect font sizes in the design tokens
pnpm nx run @guardian/source-foundations:build-type-presets
"textSansBold15": {
  "$value": {
    "fontFamily": "{typography.fontFamily.textSans}",
    "fontSize": "{typography.fontSize.15}",
    "lineHeight": "{typography.lineHeight.regular}",
    "fontWeight": "{typography.fontWeight.bold}",
    "fontStyle": "normal"
  }
},

⬇️

export const textSansBold15 = `
  font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 700;
  font-style: normal;
`;

@jamesmockett jamesmockett requested review from a team as code owners March 6, 2024 17:09
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Mar 6, 2024 •
edited

⚠️ No Changeset found

Latest commit: eb03cd5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@jamesmockett jamesmockett marked this pull request as draft March 6, 2024 17:09
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 6, 2024

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 github-actions bot added the 📦 npm Affects a @guardian package on NPM label Mar 6, 2024
@jamesmockett jamesmockett changed the title Jm/build type presets Export typography presets as CSS strings Mar 6, 2024
@jamesmockett jamesmockett changed the title Export typography presets as CSS strings Export typography presets as CSS Mar 6, 2024
@jamesmockett jamesmockett self-assigned this Mar 6, 2024
@jamesmockett jamesmockett linked an issue Mar 6, 2024 that may be closed by this pull request
Build script to export presets as CSS strings #1266
Open
@jamesmockett jamesmockett marked this pull request as ready for review March 7, 2024 11:40
oliverabrahams
oliverabrahams requested changes Mar 11, 2024
View reviewed changes
Copy link
Contributor

@oliverabrahams oliverabrahams left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

libs/@guardian/source-foundations/src/tokens.test.ts Show resolved Hide resolved
@jamesmockett jamesmockett merged commit cc58a40 into jm/type-preset-release-branch Mar 11, 2024
10 checks passed
@jamesmockett jamesmockett deleted the jm/build-type-presets branch March 11, 2024 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliverabrahams oliverabrahams oliverabrahams approved these changes

Assignees

@jamesmockett jamesmockett

Labels
🎨 Design System 📦 npm Affects a @guardian package on NPM
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Build script to export presets as CSS strings
2 participants
@jamesmockett @oliverabrahams