diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx index fff8d906f..5a9cffc97 100755 --- a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx +++ b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx @@ -5,7 +5,7 @@ import styles from './TypographyPresets.module.css'; export const PRESET_SIZE_MAP = { '001': { - weights: ['regular', 'bold'], + weights: ['light', 'regular', 'bold'], fontSize: 40, lineHeight: 48, }, @@ -15,12 +15,12 @@ export const PRESET_SIZE_MAP = { lineHeight: 40, }, '003': { - weights: ['regular', 'bold'], + weights: ['light', 'regular', 'bold'], fontSize: 24, lineHeight: 32, }, '004': { - weights: ['regular', 'bold'], + weights: ['light', 'regular', 'bold'], fontSize: 18, lineHeight: 24, }, @@ -35,12 +35,12 @@ export const PRESET_SIZE_MAP = { lineHeight: 22, }, '007': { - weights: ['regular', 'bold'], + weights: ['light', 'regular', 'bold'], fontSize: 14, lineHeight: 18, }, '008': { - weights: ['light', 'bold'], + weights: ['light', 'regular', 'bold'], fontSize: 12, lineHeight: 20, }, diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css b/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css index 4ce7ddb67..d0ec289da 100644 --- a/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css +++ b/.storybook/components/DesignTokens/Tier1/TypographyPresets.module.css @@ -12,6 +12,10 @@ @mixin eds-typography-preset-001; } +.typography-presets--001-light { + @mixin eds-typography-preset-001-light; +} + .typography-presets--001-bold { @mixin eds-typography-preset-001-bold; } @@ -32,18 +36,22 @@ @mixin eds-typography-preset-003; } -.typography-presets--003-bold { - @mixin eds-typography-preset-003-bold; +.typography-presets--003-light { + @mixin eds-typography-preset-003-light; } -.typography-presets--004-light { - @mixin eds-typography-preset-004-light; +.typography-presets--003-bold { + @mixin eds-typography-preset-003-bold; } .typography-presets--004 { @mixin eds-typography-preset-004; } +.typography-presets--004-light { + @mixin eds-typography-preset-004-light; +} + .typography-presets--004-bold { @mixin eds-typography-preset-004-bold; } @@ -60,14 +68,14 @@ @mixin eds-typography-preset-005-bold; } -.typography-presets--006-light { - @mixin eds-typography-preset-006-light; -} - .typography-presets--006 { @mixin eds-typography-preset-006; } +.typography-presets--006-light { + @mixin eds-typography-preset-006-light; +} + .typography-presets--006-bold { @mixin eds-typography-preset-006-bold; } @@ -76,10 +84,18 @@ @mixin eds-typography-preset-007; } +.typography-presets--007-light { + @mixin eds-typography-preset-007-light; +} + .typography-presets--007-bold { @mixin eds-typography-preset-007-bold; } +.typography-presets--008 { + @mixin eds-typography-preset-008; +} + .typography-presets--008-bold { @mixin eds-typography-preset-008-bold; } diff --git a/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx b/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx index 9ea563235..3a8b7778a 100755 --- a/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx +++ b/.storybook/components/DesignTokens/Tier2/TypographyUsage.jsx @@ -63,9 +63,9 @@ export class Tier2TypographyUsage extends Component {
- {renderTypeToken('caption-text-lg', '006')} - {renderTypeToken('caption-text-md', '008')} - {renderTypeToken('caption-text-sm', '010')} + {renderTypeToken('caption-lg', '006')} + {renderTypeToken('caption-md', '008')} + {renderTypeToken('caption-sm', '010')}
diff --git a/src/design-tokens/tier-1-definitions/typography-presets.css b/src/design-tokens/tier-1-definitions/typography-presets.css index d34894fae..8633fe7f7 100644 --- a/src/design-tokens/tier-1-definitions/typography-presets.css +++ b/src/design-tokens/tier-1-definitions/typography-presets.css @@ -4,17 +4,17 @@ */ /** - * Typography Preset 001: Regular, Mobile, & Bold - */ + * Typography Preset 001: Regular, Mobile, Light & 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; @@ -24,13 +24,18 @@ } } +@define-mixin eds-typography-preset-001-light $important { + @mixin eds-typography-preset-001 $important; + font-weight: var(--eds-font-weight-light) $important; +} + @define-mixin eds-typography-preset-001-bold $important { @mixin eds-typography-preset-001 $important; font-weight: var(--eds-font-weight-bold) $important; } /** - * Typography Preset 002: Light, Regular, Mobile, & Bold + * Typography Preset 002: Light, Regular, Mobile & Bold */ @define-mixin eds-typography-preset-002 $important { font-family: var(--eds-font-family-primary) $important; @@ -50,7 +55,6 @@ } } -/* TODO: Verify whether this one should be removed */ @define-mixin eds-typography-preset-002-light $important { @mixin eds-typography-preset-002 $important; font-weight: var(--eds-font-weight-light) $important; @@ -62,7 +66,7 @@ } /** - * Typography Preset 003: Regular, Mobile, & Bold + * Typography Preset 003: Regular, Mobile, Light & Bold */ @define-mixin eds-typography-preset-003 $important { font-family: var(--eds-font-family-primary) $important; @@ -82,13 +86,18 @@ } } +@define-mixin eds-typography-preset-003-light $important { + @mixin eds-typography-preset-003 $important; + font-weight: var(--eds-font-weight-light) $important; +} + @define-mixin eds-typography-preset-003-bold $important { @mixin eds-typography-preset-003 $important; font-weight: var(--eds-font-weight-bold) $important; } /** - * Typography Preset 004: Regular, Light, & Bold + * Typography Preset 004: Regular, Light & Bold */ @define-mixin eds-typography-preset-004 $important { font-family: var(--eds-font-family-primary) $important; @@ -101,14 +110,14 @@ @mixin eds-typography-preset-004 $important; font-weight: var(--eds-font-weight-light) $important; } - + @define-mixin eds-typography-preset-004-bold $important { @mixin eds-typography-preset-004 $important; font-weight: var(--eds-font-weight-bold) $important; } /** - * Typography Preset 005: Regular, Light, & Bold + * Typography Preset 005: Regular, Light & Bold */ @define-mixin eds-typography-preset-005 $important { font-family: var(--eds-font-family-primary) $important; @@ -128,7 +137,7 @@ } /** - * Typography Preset 006: Regular, Light, & Bold + * Typography Preset 006: Regular, Light & Bold */ @define-mixin eds-typography-preset-006 $important { font-family: var(--eds-font-family-primary) $important; @@ -148,7 +157,7 @@ } /** - * Typography Preset 007: Regular & Bold + * Typography Preset 007: Regular, Light & Bold */ @define-mixin eds-typography-preset-007 $important { font-family: var(--eds-font-family-primary) $important; @@ -157,6 +166,11 @@ line-height: 1.28571429 $important; } +@define-mixin eds-typography-preset-007-light $important { + @mixin eds-typography-preset-007 $important; + font-weight: var(--eds-font-weight-light) $important; +} + @define-mixin eds-typography-preset-007-bold $important { @mixin eds-typography-preset-007 $important; font-weight: var(--eds-font-weight-bold) $important; @@ -167,6 +181,7 @@ */ @define-mixin eds-typography-preset-008 $important { font-family: var(--eds-font-family-primary) $important; + font-weight: var(--eds-font-weight-medium) $important; font-size: var(--eds-font-size-12) $important; line-height: 1.666666667 $important; } diff --git a/src/design-tokens/tier-2-usage/typography-usage.css b/src/design-tokens/tier-2-usage/typography-usage.css index 2a0cb5cf4..5f6fe0c68 100644 --- a/src/design-tokens/tier-2-usage/typography-usage.css +++ b/src/design-tokens/tier-2-usage/typography-usage.css @@ -60,7 +60,6 @@ @mixin eds-typography-preset-006-light $important; } -/* TODO: This does not exist on the type ramp currently */ @define-mixin eds-theme-typography-caption-md $important { @mixin eds-typography-preset-008 $important; }