Skip to content

Commit

Permalink
Export typography presets as CSS (#1270)
Browse files Browse the repository at this point in the history 
## What are you changing?

- Adds built script to generate CSS for new [web typography
presets](https://theguardian.design/2a1e5182b/p/01555f-typography-presets/b/830670)
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

```bash
pnpm nx run @guardian/source-foundations:build-type-presets
```

```json
"textSansBold15": {
  "$value": {
    "fontFamily": "{typography.fontFamily.textSans}",
    "fontSize": "{typography.fontSize.15}",
    "lineHeight": "{typography.lineHeight.regular}",
    "fontWeight": "{typography.fontWeight.bold}",
    "fontStyle": "normal"
  }
},
```

⬇️

```tsx
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;
`;
```
  • Loading branch information
@jamesmockett
jamesmockett authored Mar 11, 2024
2 parents 1b77501 + eb03cd5 commit cc58a40
Show file tree
Hide file tree
Showing 15 changed files with 2,011 additions and 86 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ Project-specific are defined in their `project.json`, and can be run with `make

- `make @guardian/source-foundations:build`
- `make @guardian/source-foundations:build-storybook`
- `make @guardian/source-foundations:build-type-presets`
- `make @guardian/source-foundations:dev`
- `make @guardian/source-foundations:fix`
- `make @guardian/source-foundations:lint`
Expand Down
42 changes: 21 additions & 21 deletions libs/@guardian/design-tokens/src/tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1372,7 +1372,7 @@
"textSans14": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.14}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1381,7 +1381,7 @@
"textSans15": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.15}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1390,7 +1390,7 @@
"textSans17": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.17}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1399,7 +1399,7 @@
"textSans20": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.20}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1408,7 +1408,7 @@
"textSans24": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.24}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1417,7 +1417,7 @@
"textSans28": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.28}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1426,7 +1426,7 @@
"textSans34": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.34}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "normal"
Expand All @@ -1444,7 +1444,7 @@
"textSansBold14": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.14}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1453,7 +1453,7 @@
"textSansBold15": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.15}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1462,7 +1462,7 @@
"textSansBold17": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.17}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1471,7 +1471,7 @@
"textSansBold20": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.20}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1480,7 +1480,7 @@
"textSansBold24": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.24}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1489,7 +1489,7 @@
"textSansBold28": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.28}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1498,7 +1498,7 @@
"textSansBold34": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.34}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.bold}",
"fontStyle": "normal"
Expand All @@ -1516,7 +1516,7 @@
"textSansItalic14": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.14}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "Italic"
Expand All @@ -1525,7 +1525,7 @@
"textSansItalic15": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.15}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand All @@ -1534,7 +1534,7 @@
"textSansItalic17": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.17}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand All @@ -1543,7 +1543,7 @@
"textSansItalic20": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.20}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand All @@ -1552,7 +1552,7 @@
"textSansItalic24": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.24}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand All @@ -1561,7 +1561,7 @@
"textSansItalic28": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.28}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand All @@ -1570,7 +1570,7 @@
"textSansItalic34": {
"$value": {
"fontFamily": "{typography.fontFamily.textSans}",
"fontSize": "{typography.fontSize.12}",
"fontSize": "{typography.fontSize.34}",
"lineHeight": "{typography.lineHeight.regular}",
"fontWeight": "{typography.fontWeight.regular}",
"fontStyle": "italic"
Expand Down
42 changes: 21 additions & 21 deletions libs/@guardian/design-tokens/tokens.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1201,7 +1201,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '14px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1216,7 +1216,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '15px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1231,7 +1231,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '17px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1246,7 +1246,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '20px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1261,7 +1261,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '24px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1276,7 +1276,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '28px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand All @@ -1291,7 +1291,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '34px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'normal';
Expand Down Expand Up @@ -1321,7 +1321,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '14px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1336,7 +1336,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '15px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1351,7 +1351,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '17px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1366,7 +1366,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '20px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1381,7 +1381,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '24px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1396,7 +1396,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '28px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand All @@ -1411,7 +1411,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '34px';
readonly lineHeight: 1.3;
readonly fontWeight: 700;
readonly fontStyle: 'normal';
Expand Down Expand Up @@ -1441,7 +1441,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '14px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'Italic';
Expand All @@ -1456,7 +1456,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '15px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand All @@ -1471,7 +1471,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '17px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand All @@ -1486,7 +1486,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '20px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand All @@ -1501,7 +1501,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '24px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand All @@ -1516,7 +1516,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '28px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand All @@ -1531,7 +1531,7 @@ export declare const tokens: {
'Lucida Grande',
'sans-serif',
];
readonly fontSize: '12px';
readonly fontSize: '34px';
readonly lineHeight: 1.3;
readonly fontWeight: 400;
readonly fontStyle: 'italic';
Expand Down
Loading

0 comments on commit cc58a40

Please sign in to comment.