Skip to content

Commit

Permalink
feat(typography): support typography theming
Browse files Browse the repository at this point in the history 
- use font property instead of fixed mixins and property templates
- add in tokens for each preset and usage
- ensure mapping and snapshots match without change
- replace documentation to explain font-based approach
- fix and sync typography items not represented in code
  • Loading branch information
@booc0mtaco
booc0mtaco committed Jun 26, 2023
1 parent a8e572e commit 94f72da
Show file tree
Hide file tree
Showing 19 changed files with 640 additions and 95 deletions.
75 changes: 40 additions & 35 deletions .storybook/components/DesignTokens/Tier1/TypographyPresets.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,142 @@
@import '../../../../src/design-tokens/mixins.css';
/*------------------------------------*\
# TYPOGRAPHY PRESETS
\*------------------------------------*/

/**
 * Use typography mixins to display the type ramp
* TODO: revisit type ramp definitions to simplify this layout
 * Use typography tokens to display the type ramp
 */

.typography-presets--001 {
@mixin eds-typography-preset-001;
font: var(--eds-typography-preset-001);
}

.typography-presets--001-light {
@mixin eds-typography-preset-001-light;
font: var(--eds-typography-preset-001-light);
}

.typography-presets--001-bold {
@mixin eds-typography-preset-001-bold;
font: var(--eds-typography-preset-001-bold);
}

.typography-presets--002 {
@mixin eds-typography-preset-002;
font: var(--eds-typography-preset-002);
}

.typography-presets--002-light {
@mixin eds-typography-preset-002-light;
font: var(--eds-typography-preset-002-light);
}

.typography-presets--002-bold {
@mixin eds-typography-preset-002-bold;
font: var(--eds-typography-preset-002-bold);
}

.typography-presets--003 {
@mixin eds-typography-preset-003;
font: var(--eds-typography-preset-003);
}

.typography-presets--003-light {
@mixin eds-typography-preset-003-light;
font: var(--eds-typography-preset-003-light);
}

.typography-presets--003-bold {
@mixin eds-typography-preset-003-bold;
font: var(--eds-typography-preset-003-bold);
}

.typography-presets--004 {
@mixin eds-typography-preset-004;
font: var(--eds-typography-preset-004);
}

.typography-presets--004-light {
@mixin eds-typography-preset-004-light;
font: var(--eds-typography-preset-004-light);
}

.typography-presets--004-bold {
@mixin eds-typography-preset-004-bold;
font: var(--eds-typography-preset-004-bold);
}

.typography-presets--005 {
@mixin eds-typography-preset-005;
font: var(--eds-typography-preset-005);
}

.typography-presets--005-light {
@mixin eds-typography-preset-005-light;
font: var(--eds-typography-preset-005-light);
}

.typography-presets--005-bold {
@mixin eds-typography-preset-005-bold;
font: var(--eds-typography-preset-005-bold);
}

.typography-presets--006 {
@mixin eds-typography-preset-006;
font: var(--eds-typography-preset-006);
}

.typography-presets--006-light {
@mixin eds-typography-preset-006-light;
font: var(--eds-typography-preset-006-light);
}

.typography-presets--006-bold {
@mixin eds-typography-preset-006-bold;
font: var(--eds-typography-preset-006-bold);
}

.typography-presets--007 {
@mixin eds-typography-preset-007;
font: var(--eds-typography-preset-007);
}

.typography-presets--007-light {
@mixin eds-typography-preset-007-light;
font: var(--eds-typography-preset-007-light);
}

.typography-presets--007-bold {
@mixin eds-typography-preset-007-bold;
font: var(--eds-typography-preset-007-bold);
}

.typography-presets--008 {
@mixin eds-typography-preset-008;
font: var(--eds-typography-preset-008);

}

.typography-presets--008-bold {
@mixin eds-typography-preset-008-bold;
font: var(--eds-typography-preset-008-bold);
}

.typography-presets--008-light {
@mixin eds-typography-preset-008-light;
font: var(--eds-typography-preset-008-light);
}

.typography-presets--009 {
@mixin eds-typography-preset-009;
font: var(--eds-typography-preset-009);
}

.typography-presets--009-bold {
@mixin eds-typography-preset-009-bold;
font: var(--eds-typography-preset-009-bold);
}

.typography-presets--010 {
@mixin eds-typography-preset-010;
font: var(--eds-typography-preset-010);
text-transform: uppercase;
}

.typography-presets--010-bold {
@mixin eds-typography-preset-010-bold;
font: var(--eds-typography-preset-010-bold);
text-transform: uppercase;
}

.typography-presets--011 {
@mixin eds-typography-preset-011;
font: var(--eds-typography-preset-011);
text-transform: uppercase;
}

.typography-presets--011-bold {
@mixin eds-typography-preset-011-bold;
font: var(--eds-typography-preset-011-bold);
text-transform: uppercase;
}

.typography-presets--012 {
@mixin eds-typography-preset-012;
font: var(--eds-typography-preset-012);
text-transform: uppercase;
}

.typography-presets--012-bold {
@mixin eds-typography-preset-012-bold;
font: var(--eds-typography-preset-012-bold);
text-transform: uppercase;
}
64 changes: 35 additions & 29 deletions .storybook/components/DesignTokens/Tier2/TypographyUsage.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,112 @@
/* TODO-AH: remove this import once we no longer have mixins */
@import '../../../../src/design-tokens/mixins.css';

/*------------------------------------*\
# TYPOGRAPHY USAGE
\*------------------------------------*/

/**
 * Use typography mixins to display the type ramp
 * Use typography tokens to display the type ramp
 */

/* TODO-AH: these should actually use the relevant tier 2 tokens. the tier 3 ones need to be on their own page */

.typography-usage--headline-lg {
@mixin eds-typography-preset-001-bold;
font: var(--eds-typography-preset-001-bold);
}

.typography-usage--headline-md {
@mixin eds-typography-preset-002-bold;
font: var(--eds-typography-preset-002-bold);
}

.typography-usage--headline-sm {
@mixin eds-typography-preset-003-bold;
font: var(--eds-typography-preset-003-bold);
}

.typography-usage--title-md {
@mixin eds-typography-preset-004-bold;
font: var(--eds-typography-preset-004-bold);
}

.typography-usage--title-sm {
@mixin eds-typography-preset-005-bold;
font: var(--eds-typography-preset-005-bold);
}

.typography-usage--title-xs {
@mixin eds-typography-preset-007-bold;
font: var(--eds-typography-preset-007-bold);
}

.typography-usage--label-lg-subtle {
@mixin eds-typography-preset-005;
font: var(--eds-typography-preset-005);
}

.typography-usage--label-md-subtle {
@mixin eds-typography-preset-007;
font: var(--eds-typography-preset-007);
}

.typography-usage--label-md {
@mixin eds-typography-preset-007-bold;
font: var(--eds-typography-preset-007-bold);
}

.typography-usage--label-sm {
@mixin eds-typography-preset-009-bold;
font: var(--eds-typography-preset-009-bold);
}

.typography-usage--body-lg {
@mixin eds-typography-preset-004;
font: var(--eds-typography-preset-004-light);
}

.typography-usage--body-md {
@mixin eds-typography-preset-005-light;
font: var(--eds-typography-preset-005-light);
}

.typography-usage--body-sm {
@mixin eds-typography-preset-006;
font: var(--eds-typography-preset-006-light);
}

.typography-usage--body-xs {
@mixin eds-typography-preset-008;
font: var(--eds-typography-preset-008-light);
}

.typography-usage--caption-lg {
@mixin eds-typography-preset-006;
font: var(--eds-typography-preset-006);
}

.typography-usage--caption-md {
@mixin eds-typography-preset-008;
font: var(--eds-typography-preset-008);
}

.typography-usage--caption-sm {
@mixin eds-typography-preset-010;
font: var(--eds-typography-preset-010);
}

.typography-usage--button-label {
@mixin eds-typography-preset-006-bold;
font: var(--eds-typography-preset-006-bold);
}

.typography-usage--form-label {
@mixin eds-typography-preset-006-bold;
font: var(--eds-typography-preset-006-bold);
}

.typography-usage--form-input {
@mixin eds-typography-preset-005;
font: var(--eds-typography-preset-005);
}

.typography-usage--overline {
@mixin eds-typography-preset-011-bold;
font: var(--eds-typography-preset-011-bold);
text-transform: uppercase;
}

.typography-usage--overline-sm {
@mixin eds-typography-preset-012-bold;
font: var(--eds-typography-preset-012-bold);
text-transform: uppercase;
}

.typography-usage--tag {
@mixin eds-typography-preset-009-bold;
font: var(--eds-typography-preset-009-bold);
}

.typography-usage--callout {
@mixin eds-typography-preset-002-light;
font: var(--eds-typography-preset-002-light);
}

/**
Expand All @@ -112,28 +118,28 @@
 * Body text bold
 */
.typography-usage--body-bold {
@mixin eds-theme-typography-body-md;
font: var(--eds-theme-typography-body-md);
}

/**
 * Body text sm bold
 */
.typography-usage--body-sm-bold {
@mixin eds-theme-typography-body-sm;
font: var(--eds-theme-typography-body-sm);
}

/**
 * Body text xs bold
 */
.typography-usage--body-xs-bold {
@mixin eds-theme-typography-body-xs-bold;
font: var(--eds-theme-typography-body-xs-bold);
}

/**
 * Body text lg bold
 */
.typography-usage--body-lg-bold {
@mixin eds-theme-typography-body-lg-bold;
font: var(--eds-theme-typography-body-lg-bold);
}

/**
Expand Down
2 changes: 2 additions & 0 deletions .storybook/components/Docs/Guildelines/Typography.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<Meta title="Documentation/Guidelines/Typography" />

*TODO-AH:* Update this to talk about the new font: based approach

# Typography

Typography in EDS follows [the same structure as design tokens](./?path=/story/documentation-guidelines-tokens--page), with the exception that typography operates as a _cluster_ of typography-specific style properties rather than a single style property.
Expand Down
Loading

0 comments on commit 94f72da

Please sign in to comment.