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

fix(tokens)!: fix all letter spacing values #537

Merged
merged 6 commits into from
Sep 10, 2024
Merged

fix(tokens)!: fix all letter spacing values #537

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3f06028
feat: fix all letter spacing values
Natalie9 Aug 16, 2024
e5d1728
feat: update storybook typography letter-space
Natalie9 Aug 16, 2024
40f063d
chore: update pr title rule
Natalie9 Aug 16, 2024
a16a0a5
Merge branch 'main' into fix/tokens-letter-spacing-value
Natalie9 Sep 9, 2024
f6326c7
Merge branch 'main' into fix/tokens-letter-spacing-value
Natalie9 Sep 9, 2024
1b774fa
Merge branch 'main' into fix/tokens-letter-spacing-value
Natalie9 Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 42 additions & 42 deletions packages/tokens/src/tokens.scss
View file
Open in desktop
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
Open in desktop
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
Loading