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: sync typography presets to documentation #1592

Merged
merged 1 commit into from
Apr 17, 2023
Merged

fix: sync typography presets to documentation #1592

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
46 changes: 33 additions & 13 deletions src/design-tokens/tier-1-definitions/typography-presets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
/* Updates to font-size and line-height in this file
should be reflected in the TypographyPresets story */
/**
* Updates to font-size and line-height in this file
* should be reflected in the TypographyPresets story
*/

/**
* Typography Preset 001: Medium, Mobile, & Bold
* Typography Preset 001: Regular, Mobile, & Bold
*/
@define-mixin eds-typography-preset-001 $important {
font-family: var(--eds-font-family-primary) $important;
font-weight: var(--eds-font-weight-medium) $important;
font-size: var(--eds-font-size-40) $important;
line-height: 1.2 $important;

@mixin eds-typography-preset-001-mobile $important;
}

@define-mixin eds-typography-preset-001-mobile @important {
@media all and (max-width: $eds-bp-md) {
font-family: var(--eds-font-family-primary) $important;
font-size: var(--eds-font-size-32) $important;
font-weight: var(--eds-font-weight-bold) $important;
line-height: 1.25 $important;
}
}
Expand All @@ -22,16 +30,22 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 002: Light, Medium, Mobile, & Bold
* Typography Preset 002: Light, Regular, Mobile, & Bold
*/
@define-mixin eds-typography-preset-002 $important {
font-family: var(--eds-font-family-primary) $important;
font-weight: var(--eds-font-weight-medium) $important;
font-size: var(--eds-font-size-32) $important;
line-height: 1.25 $important;

@mixin eds-typography-preset-002-mobile $important;
}

@define-mixin eds-typography-preset-002-mobile $important {
@media all and (max-width: $eds-bp-md) {
font-family: var(--eds-font-family-primary) $important;
font-size: var(--eds-font-size-28) $important;
font-weight: var(--eds-font-weight-bold) $important;
line-height: 1.2857 $important;
}
}
Expand All @@ -47,16 +61,22 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 003: Medium, Mobile, & Bold
* Typography Preset 003: Regular, Mobile, & Bold
*/
@define-mixin eds-typography-preset-003 $important {
font-family: var(--eds-font-family-primary) $important;
font-weight: var(--eds-font-weight-medium) $important;
font-size: var(--eds-font-size-24) $important;
line-height: 1.333 $important;

@mixin eds-typography-preset-003-mobile $important;
}

@define-mixin eds-typography-preset-003-mobile $important {
@media all and (max-width: $eds-bp-md) {
font-family: var(--eds-font-family-primary) $important;
font-size: var(--eds-font-size-20) $important;
font-weight: var(--eds-font-weight-bold) $important;
line-height: 1.4 $important;
}
}
Expand All @@ -67,7 +87,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 004: Medium, Light, & Bold
* Typography Preset 004: Regular, Light, & Bold
*/
@define-mixin eds-typography-preset-004 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -87,7 +107,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 005: Medium, Light, & Bold
* Typography Preset 005: Regular, Light, & Bold
*/
@define-mixin eds-typography-preset-005 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -107,7 +127,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 006: Medium, Light, & Bold
* Typography Preset 006: Regular, Light, & Bold
*/
@define-mixin eds-typography-preset-006 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -127,7 +147,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 007: Medium & Bold
* Typography Preset 007: Regular & Bold
*/
@define-mixin eds-typography-preset-007 $important {
font-family: var(--eds-font-family-primary) $important;
Expand Down Expand Up @@ -157,7 +177,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 009: Medium & Bold
* Typography Preset 009: Regular & Bold
*/
@define-mixin eds-typography-preset-009 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -172,7 +192,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 010: Medium & Bold
* Typography Preset 010: Regular & Bold
*/
@define-mixin eds-typography-preset-010 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -187,7 +207,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 011: Medium & Bold
* Typography Preset 011: Regular & Bold
*/
@define-mixin eds-typography-preset-011 $important {
font-family: var(--eds-font-family-primary) $important;
Expand All @@ -203,7 +223,7 @@ should be reflected in the TypographyPresets story */
}

/**
* Typography Preset 012: Medium & Bold
* Typography Preset 012: Regular & Bold
*/
@define-mixin eds-typography-preset-012 $important {
font-family: var(--eds-font-family-primary) $important;
Expand Down