Skip to content

Commit

Permalink
fix(tokens)!: fix all letter spacing values (#537)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Natalie9
Natalie9 authored Sep 10, 2024
1 parent f0252ca commit 550fd34
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 61 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/pr-title-check.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ jobs:

- name: Validate PR Title
run: |
if [[ ! "${{ github.event.pull_request.title }}" =~ ^(feat|fix|chore|major|docs|ci)\(([a-z_-]+)\):(.+|\d+)$ ]]; then
if [[ ! "${{ github.event.pull_request.title }}" =~ ^(feat|fix|chore|major|docs|ci)\(([a-z_-]+)\)!*:(.+|\d+)$ ]]; then
echo "The Pull Request title must follow the convention: 'type(context): description'."
echo "The types must be: feat, fix, chore, major, docs, ci."
echo "Example of a correct title: feat(component): create link component"
Expand Down
84 changes: 42 additions & 42 deletions packages/tokens/src/tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,37 +106,37 @@
/* Typography
* ------------------------- */
--title-giant: var(--font-weight-bold) 52px/68px var(--font-family);
--title-giant-letter: 0.025em;
--title-giant-letter: 0.0025em;
--title-display: var(--font-weight-bold) 46px/60px var(--font-family);
--title-display-letter: 0.025em;
--title-display-letter: 0.0025em;
--title-headline-xxlarge: var(--font-weight-bold) 42px/56px var(--font-family);
--title-headline-xxlarge-letter: 0.025em;
--title-headline-xxlarge-letter: 0.0025em;
--title-headline-xlarge: var(--font-weight-bold) 36px/48px var(--font-family);
--title-headline-xlarge-letter: 0.025em;
--title-headline-xlarge-letter: 0.0025em;
--title-headline-large: var(--font-weight-bold) 32px/40px var(--font-family);
--title-headline-large-letter: 0.025em;
--title-headline-large-letter: 0.0025em;
--title-headline-medium: var(--font-weight-bold) 28px/36px var(--font-family);
--title-headline-medium-letter: 0.015em;
--title-headline-medium-letter: 0.0015em;
--title-headline-small: var(--font-weight-bold) 26px/36px var(--font-family);
--title-headline-small-letter: 0.015em;
--title-headline-small-letter: 0.0015em;
--title-headline-xsmall: var(--font-weight-bold) 22px/28px var(--font-family);
--title-headline-xsmall-letter: 0.015em;
--title-headline-xsmall-letter: 0.0015em;
--text-subtitle-large: var(--font-weight-bold) 20px/28px var(--font-family);
--text-subtitle-large-letter: 0.015em;
--text-subtitle-large-letter: 0.0015em;
--text-subtitle-medium: var(--font-weight-bold) 18px/24px var(--font-family);
--text-subtitle-medium-letter: 0.001em;
--text-subtitle-medium-letter: 0.0001em;
--text-body-large: var(--font-weight-regular) 18px/28px var(--font-family);
--text-body-large-letter: 0.005em;
--text-body-medium: var(--font-weight-regular) 16px/24px var(--font-family);
--text-body-medium-letter: 0.005em;
--text-body-small: var(--font-weight-regular) 14px/24px var(--font-family);
--text-body-small-letter: 0.025em;
--text-body-small-letter: 0.0025em;
--text-link-large: var(--font-weight-bold) 18px/28px var(--font-family);
--text-link-large-letter: 0.005em;
--text-link-medium: var(--font-weight-bold) 16px/24px var(--font-family);
--text-link-medium-letter: 0.005em;
--text-link-small: var(--font-weight-bold) 14px/24px var(--font-family);
--text-link-small-letter: 0.025em;
--text-link-small-letter: 0.0025em;
--button-large: var(--font-weight-bold) 18px/28px var(--font-family);
--button-large-letter: 0.08em;
--button-medium: var(--font-weight-bold) 16px/24px var(--font-family);
Expand All @@ -148,9 +148,9 @@
--text-caption-focused: var(--font-weight-bold) 12px/20px var(--font-family);
--text-caption-focused-letter: 0.0004em;
--text-overline: var(--font-weight-regular) 11px/20px var(--font-family);
--text-overline-letter: 0.014em;
--text-overline-letter: 0.16em;
--text-badge: var(--font-weight-bold) 10px/16px var(--font-family);
--text-badge-letter: 0.0004em;
--text-badge-letter: 0.04em;

/* Screens
* ------------------------- */
Expand All @@ -166,21 +166,21 @@

/* Elevations
* ------------------------- */
--elevation-1: 0px 1px 1px rgba(0, 0, 0, 0.14);
--elevation-2: 0px 1px 5px rgba(0, 0, 0, 0.12),
0px 2px 2px rgba(0, 0, 0, 0.14);
--elevation-3: 0px 1px 10px rgba(0, 0, 0, 0.12),
0px 4px 5px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.2);
--elevation-4: 0px 1px 18px rgba(0, 0, 0, 0.12),
0px 6px 10px rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.2);
--elevation-5: 0px 5px 22px rgba(0, 0, 0, 0.12),
0px 12px 17px rgba(0, 0, 0, 0.14), 0px 7px 8px rgba(0, 0, 0, 0.2);
--elevation-6: 0px 6px 30px rgba(0, 0, 0, 0.12),
0px 16px 24px rgba(0, 0, 0, 0.14), 0px 8px 10px rgba(0, 0, 0, 0.2);
--elevation-7: 0px 8px 38px rgba(0, 0, 0, 0.12),
0px 20px 31px rgba(0, 0, 0, 0.14), 0px 10px 13px rgba(0, 0, 0, 0.2);
--elevation-8: 0px 9px 46px rgba(0, 0, 0, 0.12),
0px 24px 38px rgba(0, 0, 0, 0.14), 0px 11px 15px rgba(0, 0, 0, 0.2);
--elevation-1: 0 1px 1px rgba(0, 0, 0, 0.14);
--elevation-2: 0 1px 5px rgba(0, 0, 0, 0.12),
0 2px 2px rgba(0, 0, 0, 0.14);
--elevation-3: 0 1px 10px rgba(0, 0, 0, 0.12),
0 4px 5px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.2);
--elevation-4: 0 1px 18px rgba(0, 0, 0, 0.12),
0 6px 10px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.2);
--elevation-5: 0 5px 22px rgba(0, 0, 0, 0.12),
0 12px 17px rgba(0, 0, 0, 0.14), 0 7px 8px rgba(0, 0, 0, 0.2);
--elevation-6: 0 6px 30px rgba(0, 0, 0, 0.12),
0 16px 24px rgba(0, 0, 0, 0.14), 0 8px 10px rgba(0, 0, 0, 0.2);
--elevation-7: 0 8px 38px rgba(0, 0, 0, 0.12),
0 20px 31px rgba(0, 0, 0, 0.14), 0 10px 13px rgba(0, 0, 0, 0.2);
--elevation-8: 0 9px 46px rgba(0, 0, 0, 0.12),
0 24px 38px rgba(0, 0, 0, 0.14), 0 11px 15px rgba(0, 0, 0, 0.2);

/* Misc
* ------------------------- */
Expand All @@ -200,35 +200,35 @@
/* Typography
* ------------------------- */
--title-giant: var(--font-weight-bold) 30px/40px var(--font-family);
--title-giant-letter: 0.025em;
--title-giant-letter: 0.0025em;
--title-display: var(--font-weight-bold) 28px/36px var(--font-family);
--title-display-letter: 0.025em;
--title-display-letter: 0.0025em;
--title-headline-xxlarge: var(--font-weight-bold) 26px/36px
var(--font-family);
--title-headline-xxlarge-letter: 0.025em;
--title-headline-xxlarge-letter: 0.0025em;
--title-headline-xlarge: var(--font-weight-bold) 25px/32px
var(--font-family);
--title-headline-xlarge-letter: 0.025em;
--title-headline-xlarge-letter: 0.0025em;
--title-headline-large: var(--font-weight-bold) 24px/32px var(--font-family);
--title-headline-large-letter: 0.025em;
--title-headline-large-letter: 0.0025em;
--title-headline-medium: var(--font-weight-bold) 22px/28px
var(--font-family);
--title-headline-medium-letter: 0.015em;
--title-headline-medium-letter: 0.0015em;
--title-headline-small: var(--font-weight-bold) 20px/28px var(--font-family);
--title-headline-small-letter: 0.015em;
--title-headline-small-letter: 0.0015em;
--title-headline-xsmall: var(--font-weight-bold) 19px/24px
var(--font-family);
--title-headline-xsmall-letter: 0.015em;
--title-headline-xsmall-letter: 0.0015em;
--text-subtitle-large: var(--font-weight-bold) 18px/24px var(--font-family);
--text-subtitle-large-letter: 0.015em;
--text-subtitle-large-letter: 0.0015em;
--text-subtitle-medium: var(--font-weight-bold) 16px/20px var(--font-family);
--text-subtitle-medium-letter: 0.001em;
--text-body-large: var(--font-weight-regular) 18px/28px var(--font-family);
--text-body-large-letter: 0.005em;
--text-body-medium: var(--font-weight-regular) 16px/24px var(--font-family);
--text-body-medium-letter: 0.005em;
--text-body-small: var(--font-weight-regular) 14px/24px var(--font-family);
--text-body-small-letter: 0.025em;
--text-body-small-letter: 0.0025em;
--text-link-large: var(--font-weight-bold) 18px/28px var(--font-family);
--text-link-large-letter: 0.005em;
--text-link-medium: var(--font-weight-bold) 16px/24px var(--font-family);
Expand All @@ -243,11 +243,11 @@
--text-caption-letter: 0.004em;
--text-caption-focused: var(--font-weight-regular) 12px/20px
var(--font-family);
--text-caption-focused-letter: 0.0004em;
--text-caption-focused-letter: 0.004em;
--text-overline: var(--font-weight-regular) 11px/20px var(--font-family);
--text-overline-letter: 0.014em;
--text-overline-letter: 0.16em;
--text-badge: var(--font-weight-bold) 10px/16px var(--font-family);
--text-badge-letter: 0.0004em;
--text-badge-letter: 0.04em;

/* Grid
* ------------------------- */
Expand Down
36 changes: 18 additions & 18 deletions packages/tokens/stories/3_Typography.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,29 +37,29 @@ Tokens could be used as CSS Variables or CSS Classes.

| Variable | Font weight | font-size/line-height | Mobile | Letter Spacing |
| -------------------------- | ----------- | --------------------- | --------- | -------------- |
| `--title-giant` | 700 | 52px/68px | 30px/40px | 25% |
| `--title-display` | 700 | 46px/60px | 28px/36px | 25% |
| `--title-headline-xxlarge` | 700 | 42px/56px | 26px/36px | 25% |
| `--title-headline-xlarge` | 700 | 36px/48px | 25px/32px | 25% |
| `--title-headline-large` | 700 | 32px/40px | 24px/32px | 25% |
| `--title-headline-medium` | 700 | 28px/36px | 22px/28px | 15% |
| `--title-headline-small` | 700 | 26px/36px | 20px/28px | 15% |
| `--title-headline-xsmall` | 700 | 22px/28px | 19px/24px | 15% |
| `--text-subtitle-large` | 700 | 20px/28px | 18px/24px | 15% |
| `--text-subtitle-medium` | 700 | 18px/24px | 16px/20px | 1% |
| `--text-body-large` | 400 | 18px/28px | 18px/28px | 5% |
| `--text-body-medium` | 400 | 16px/24px | 16px/24px | 5% |
| `--text-body-small` | 400 | 14px/24px | 14px/24px | 25% |
| `--text-link-large` | 700 | 18px/28px | 18px/28px | 5% |
| `--text-link-medium` | 700 | 16px/24px | 16px/24px | 5% |
| `--text-link-small` | 700 | 14px/24px | 14px/24px | 25% |
| `--title-giant` | 700 | 52px/68px | 30px/40px | 0.25% |
| `--title-display` | 700 | 46px/60px | 28px/36px | 0.25% |
| `--title-headline-xxlarge` | 700 | 42px/56px | 26px/36px | 0.25% |
| `--title-headline-xlarge` | 700 | 36px/48px | 25px/32px | 0.25% |
| `--title-headline-large` | 700 | 32px/40px | 24px/32px | 0.25% |
| `--title-headline-medium` | 700 | 28px/36px | 22px/28px | 0.15% |
| `--title-headline-small` | 700 | 26px/36px | 20px/28px | 0.15% |
| `--title-headline-xsmall` | 700 | 22px/28px | 19px/24px | 0.15% |
| `--text-subtitle-large` | 700 | 20px/28px | 18px/24px | 0.15% |
| `--text-subtitle-medium` | 700 | 18px/24px | 16px/20px | 0.1% |
| `--text-body-large` | 400 | 18px/28px | 18px/28px | 0.5% |
| `--text-body-medium` | 400 | 16px/24px | 16px/24px | 0.5% |
| `--text-body-small` | 400 | 14px/24px | 14px/24px | 0.25% |
| `--text-link-large` | 700 | 18px/28px | 18px/28px | 0.5% |
| `--text-link-medium` | 700 | 16px/24px | 16px/24px | 0.5% |
| `--text-link-small` | 700 | 14px/24px | 14px/24px | 0.25% |
| `--button-large` | 700 | 18px/28px | 18px/28px | 8% |
| `--button-medium` | 700 | 16px/24px | 16px/24px | 8% |
| `--button-small` | 700 | 14px/20px | 14px/20px | 8% |
| `--text-caption` | 400 | 12px/20px | 14px/24px | 4% |
| `--text-caption` | 400 | 12px/20px | 14px/24px | 0.4% |
| `--text-caption-focused` | 700 | 12px/20px | 14px/24px | 0.4% |
| `--text-overline` | 400 | 11px/20px | 13px/20px | 16% |
| `--text-badge` | 700 | 10px/16px | 12px/20px | 0.4% |
| `--text-badge` | 700 | 10px/16px | 12px/20px | 4% |

#### !important

Expand Down

0 comments on commit 550fd34

Please sign in to comment.