From 550fd34de953a8868551f9906c28bbd5e3d9786a Mon Sep 17 00:00:00 2001 From: Natalie Tolentino Date: Tue, 10 Sep 2024 09:35:35 -0300 Subject: [PATCH] fix(tokens)!: fix all letter spacing values (#537) --- .github/workflows/pr-title-check.yml | 2 +- packages/tokens/src/tokens.scss | 84 +++++++++---------- .../tokens/stories/3_Typography.stories.mdx | 36 ++++---- 3 files changed, 61 insertions(+), 61 deletions(-) diff --git a/.github/workflows/pr-title-check.yml b/.github/workflows/pr-title-check.yml index 7116b5e3e..8f211761f 100644 --- a/.github/workflows/pr-title-check.yml +++ b/.github/workflows/pr-title-check.yml @@ -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" diff --git a/packages/tokens/src/tokens.scss b/packages/tokens/src/tokens.scss index 6b4f1cf2e..bea128d4c 100644 --- a/packages/tokens/src/tokens.scss +++ b/packages/tokens/src/tokens.scss @@ -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); @@ -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 * ------------------------- */ @@ -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 * ------------------------- */ @@ -200,27 +200,27 @@ /* 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); @@ -228,7 +228,7 @@ --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); @@ -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 * ------------------------- */ diff --git a/packages/tokens/stories/3_Typography.stories.mdx b/packages/tokens/stories/3_Typography.stories.mdx index f5a091382..627c9697d 100644 --- a/packages/tokens/stories/3_Typography.stories.mdx +++ b/packages/tokens/stories/3_Typography.stories.mdx @@ -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