diff --git a/src/components/Avatar/Avatar.style.ts b/src/components/Avatar/Avatar.style.ts index 992c02250..6db3acf73 100644 --- a/src/components/Avatar/Avatar.style.ts +++ b/src/components/Avatar/Avatar.style.ts @@ -1,32 +1,27 @@ import { css, SerializedStyles } from '@emotion/react'; -import { get } from 'lodash'; -import { - AvatarTextTokens, - AvatarTokens, - getAvatarTextTokens, - getAvatarTokens, -} from './Avatar.tokens'; +import { getAvatarTextTokens, getAvatarTokens } from './Avatar.tokens'; import { AvatarColors, AvatarSizes } from './Avatar.types'; import { Theme } from '../../theme'; import { flex } from '../../theme/functions'; +import { generateStylesFromTokens } from 'components/Typography/utils'; export const avatarStyle = ({ size, color }: { size: AvatarSizes; color: AvatarColors }) => (theme: Theme): SerializedStyles => { const tokens = getAvatarTokens(theme); - const typographyTokens = getAvatarTextTokens(); + const typographyTokens = getAvatarTextTokens(theme); return css` ${flex}; - width: ${tokens(`size.${size}` as AvatarTokens)}; - height: ${tokens(`size.${size}` as AvatarTokens)}; + width: ${tokens(`size.${size}` as const)}; + height: ${tokens(`size.${size}` as const)}; border-radius: ${tokens('borderRadius')}; border: ${tokens('borderWidth')} solid; - border-color: ${tokens(`borderColor.${color}` as AvatarTokens)}; + border-color: ${tokens(`borderColor.${color}` as const)}; box-sizing: border-box; - background-color: ${tokens(`backgroundColor.${color}` as AvatarTokens)}; - color: ${tokens(`textColor.${color}` as AvatarTokens)}; + background-color: ${tokens(`backgroundColor.${color}` as const)}; + color: ${tokens(`textColor.${color}` as const)}; overflow: hidden; position: relative; align-items: center; @@ -34,10 +29,7 @@ export const avatarStyle = user-select: none; justify-content: center; - font-size: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'fontSize')}; - font-weight: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'fontWeight')}; - line-height: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'lineHeight')}; - letter-spacing: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'letterSpacing')}; + ${generateStylesFromTokens(typographyTokens(`${size}`))}; img { border-radius: ${tokens('borderRadius')}; diff --git a/src/components/Avatar/Avatar.tokens.ts b/src/components/Avatar/Avatar.tokens.ts index ddde3f07f..4123a2e08 100644 --- a/src/components/Avatar/Avatar.tokens.ts +++ b/src/components/Avatar/Avatar.tokens.ts @@ -1,6 +1,6 @@ import avatar from 'theme/tokens/components/variables/avatar'; import avatarText from 'theme/tokens/components/variables/avatarText'; -import { getComponentTokens, parseCompositionToken, DotKeys } from 'theme/tokens/utils'; +import { getComponentTokens, DotKeys } from 'theme/tokens/utils'; import { rem } from 'theme/utils'; import { Theme } from '../../theme'; @@ -15,12 +15,10 @@ export const parseAvatarStackSize = (val: string) => export type AvatarTokens = DotKeys; export type AvatarTextTokens = DotKeys; -export const getAvatarTokens = ( - theme: Theme -): ((path: AvatarTokens, fn?: (val: string) => any) => string) => { +export const getAvatarTokens = (theme: Theme) => { return getComponentTokens(avatar, theme); }; -export const getAvatarTextTokens = (): ((path: DotKeys) => string) => { - return parseCompositionToken(avatarText); +export const getAvatarTextTokens = (theme: Theme) => { + return getComponentTokens(avatarText, theme); }; diff --git a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot index 358891709..8b24775a8 100644 --- a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot +++ b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot @@ -63,9 +63,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar Playground 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -229,9 +230,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -300,9 +302,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.75rem; + font-family: Roboto; font-weight: 500; line-height: 1.125rem; + font-size: 0.75rem; letter-spacing: 0.015625rem; } @@ -355,9 +358,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.875rem; + font-family: Roboto; font-weight: 500; line-height: 1.25rem; + font-size: 0.875rem; letter-spacing: 0.015625rem; } @@ -410,9 +414,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1rem; + font-family: Roboto; font-weight: 500; line-height: 1.375rem; + font-size: 1rem; letter-spacing: 0.00625rem; } @@ -465,9 +470,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1.5rem; + font-family: Roboto; font-weight: 500; line-height: 2rem; + font-size: 1.5rem; letter-spacing: 0rem; } @@ -520,9 +526,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 2rem; + font-family: Roboto; font-weight: 500; line-height: 2.5rem; + font-size: 2rem; letter-spacing: 0rem; } @@ -745,9 +752,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -790,9 +798,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.75rem; + font-family: Roboto; font-weight: 500; line-height: 1.125rem; + font-size: 0.75rem; letter-spacing: 0.015625rem; } @@ -835,9 +844,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.875rem; + font-family: Roboto; font-weight: 500; line-height: 1.25rem; + font-size: 0.875rem; letter-spacing: 0.015625rem; } @@ -880,9 +890,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1rem; + font-family: Roboto; font-weight: 500; line-height: 1.375rem; + font-size: 1rem; letter-spacing: 0.00625rem; } @@ -925,9 +936,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1.5rem; + font-family: Roboto; font-weight: 500; line-height: 2rem; + font-size: 1.5rem; letter-spacing: 0rem; } @@ -970,9 +982,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 2rem; + font-family: Roboto; font-weight: 500; line-height: 2.5rem; + font-size: 2rem; letter-spacing: 0rem; } @@ -1143,9 +1156,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -1188,9 +1202,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.75rem; + font-family: Roboto; font-weight: 500; line-height: 1.125rem; + font-size: 0.75rem; letter-spacing: 0.015625rem; } @@ -1233,9 +1248,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.875rem; + font-family: Roboto; font-weight: 500; line-height: 1.25rem; + font-size: 0.875rem; letter-spacing: 0.015625rem; } @@ -1278,9 +1294,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1rem; + font-family: Roboto; font-weight: 500; line-height: 1.375rem; + font-size: 1rem; letter-spacing: 0.00625rem; } @@ -1323,9 +1340,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1.5rem; + font-family: Roboto; font-weight: 500; line-height: 2rem; + font-size: 1.5rem; letter-spacing: 0rem; } @@ -1368,9 +1386,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 2rem; + font-family: Roboto; font-weight: 500; line-height: 2.5rem; + font-size: 2rem; letter-spacing: 0rem; } diff --git a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot index 961e2c17c..9e26e1560 100644 --- a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot +++ b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot @@ -82,9 +82,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -166,9 +167,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.75rem; + font-family: Roboto; font-weight: 500; line-height: 1.125rem; + font-size: 0.75rem; letter-spacing: 0.015625rem; } @@ -250,9 +252,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.875rem; + font-family: Roboto; font-weight: 500; line-height: 1.25rem; + font-size: 0.875rem; letter-spacing: 0.015625rem; } @@ -355,9 +358,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1rem; + font-family: Roboto; font-weight: 500; line-height: 1.375rem; + font-size: 1rem; letter-spacing: 0.00625rem; } @@ -439,9 +443,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 1.5rem; + font-family: Roboto; font-weight: 500; line-height: 2rem; + font-size: 1.5rem; letter-spacing: 0rem; } @@ -528,9 +533,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 2rem; + font-family: Roboto; font-weight: 500; line-height: 2.5rem; + font-size: 2rem; letter-spacing: 0rem; } diff --git a/src/components/Button/Button.tokens.ts b/src/components/Button/Button.tokens.ts index 51be44586..ef1775177 100644 --- a/src/components/Button/Button.tokens.ts +++ b/src/components/Button/Button.tokens.ts @@ -9,20 +9,14 @@ export type ButtonTokens = DotKeys; export type TextButtonTokens = DotKeys; export type IconButtonTokens = DotKeys; -export const getButtonTokens = ( - theme: Theme -): ((path: ButtonTokens, fn?: (val: string) => any) => string) => { +export const getButtonTokens = (theme: Theme) => { return getComponentTokens(button, theme); }; -export const getTextButtonTokens = ( - theme: Theme -): ((path: TextButtonTokens, fn?: (val: string) => any) => string) => { +export const getTextButtonTokens = (theme: Theme) => { return getComponentTokens(textButton, theme); }; -export const getIconButtonTokens = ( - theme: Theme -): ((path: IconButtonTokens, fn?: (val: string) => any) => string) => { +export const getIconButtonTokens = (theme: Theme) => { return getComponentTokens(iconButton, theme); }; diff --git a/src/components/ButtonBase/ButtonBase.style.ts b/src/components/ButtonBase/ButtonBase.style.ts index a8f52471f..6ec43414f 100644 --- a/src/components/ButtonBase/ButtonBase.style.ts +++ b/src/components/ButtonBase/ButtonBase.style.ts @@ -2,13 +2,8 @@ import { css, SerializedStyles } from '@emotion/react'; import { ButtonBaseProps } from './ButtonBase'; import { Theme } from '../../theme'; -import { - ButtonTokens, - getButtonTokens, - getIconButtonTokens, - getTextButtonTokens, -} from '../Button/Button.tokens'; -import { label02 } from '../Typography/Typography.config.styles'; +import { getButtonTokens, getIconButtonTokens, getTextButtonTokens } from '../Button/Button.tokens'; +import { generateStylesFromTokens } from 'components/Typography/utils'; export const buttonWrapperStyle = ({ isBlock, @@ -31,10 +26,10 @@ export const buttonBaseStyle = const textButtonTokens = getTextButtonTokens(theme); const baseButtonStyles = { - color: tokens(`${type}.textColor` as ButtonTokens), + color: tokens(`${type}.textColor` as const), width: isBlock ? '100%' : undefined, backgroundColor: tokens( - `${type}.backgroundColor.${isLoading ? 'active' : 'default'}` as ButtonTokens + `${type}.backgroundColor.${isLoading ? 'active' : 'default'}` as const ), padding: isIconButton ? iconButtonTokens('padding') @@ -51,17 +46,17 @@ export const buttonBaseStyle = transition: 'background-color,border 150ms linear', ':focus-visible:not(:disabled)': { - backgroundColor: tokens(`${type}.backgroundColor.hover` as ButtonTokens), + backgroundColor: tokens(`${type}.backgroundColor.hover` as const), }, ':disabled': { opacity: theme.tokens.disabledState.get('default'), cursor: 'not-allowed', }, ':hover:not(:disabled)': { - backgroundColor: tokens(`${type}.backgroundColor.hover` as ButtonTokens), + backgroundColor: tokens(`${type}.backgroundColor.hover` as const), }, ':active:not(:disabled)': { - backgroundColor: tokens(`${type}.backgroundColor.active` as ButtonTokens), + backgroundColor: tokens(`${type}.backgroundColor.active` as const), }, }; @@ -73,7 +68,7 @@ export const buttonBaseStyle = : {}; return css` - ${label02(theme)}; + ${generateStylesFromTokens(tokens('text.normal'))}; ${baseButtonStyles}; ${loadingStyles}; ${sx?.container}; diff --git a/src/components/Chip/__snapshots__/Chip.stories.storyshot b/src/components/Chip/__snapshots__/Chip.stories.storyshot index fc8016125..7d0cdd884 100644 --- a/src/components/Chip/__snapshots__/Chip.stories.storyshot +++ b/src/components/Chip/__snapshots__/Chip.stories.storyshot @@ -399,9 +399,10 @@ exports[`Storyshots Design System/Chip Read-Only Chips 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } diff --git a/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/components/Menu/__snapshots__/Menu.stories.storyshot index 42b166acd..130c9971c 100644 --- a/src/components/Menu/__snapshots__/Menu.stories.storyshot +++ b/src/components/Menu/__snapshots__/Menu.stories.storyshot @@ -124,9 +124,10 @@ exports[`Storyshots Design System/Menu Disabled Menu 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -351,9 +352,10 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -757,9 +759,10 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } diff --git a/src/components/ThemeProvider/ThemeProvider.style.ts b/src/components/ThemeProvider/ThemeProvider.style.ts index 4923b01e3..b1184a99f 100644 --- a/src/components/ThemeProvider/ThemeProvider.style.ts +++ b/src/components/ThemeProvider/ThemeProvider.style.ts @@ -29,7 +29,7 @@ export const scrollbar = (theme: Theme): SerializedStyles => css` `; export const globalStyles = (theme: Theme): SerializedStyles => css` - @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900'); + @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&display=swap'); ${emotionReset}; ${scrollbar(theme)} diff --git a/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot b/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot index 469000416..5db68b68d 100644 --- a/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot +++ b/src/components/TopAppBar/__snapshots__/TopAppBar.stories.storyshot @@ -305,9 +305,10 @@ exports[`Storyshots Design System/TopNavBar playground 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -865,9 +866,10 @@ exports[`Storyshots Design System/TopNavBar with Additional Tools 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -1371,9 +1373,10 @@ exports[`Storyshots Design System/TopNavBar with Dark theme enabled 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -1813,9 +1816,10 @@ exports[`Storyshots Design System/TopNavBar with Logo Placeholder 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } diff --git a/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap b/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap index 409a4cc39..04524215f 100644 --- a/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap +++ b/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap @@ -259,9 +259,10 @@ exports[`TopAppBar should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -559,9 +560,10 @@ exports[`TopAppBar should render correctly 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -940,9 +942,10 @@ exports[`TopAppBar should render correctly on dark 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } @@ -1240,9 +1243,10 @@ exports[`TopAppBar should render correctly on dark 1`] = ` -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - font-size: 0.625rem; + font-family: Roboto; font-weight: 500; line-height: 0.875rem; + font-size: 0.625rem; letter-spacing: 0.00625rem; } diff --git a/src/components/Typography/Typography.config.styles.ts b/src/components/Typography/Typography.config.styles.ts index 9b4e49623..aaa54f165 100644 --- a/src/components/Typography/Typography.config.styles.ts +++ b/src/components/Typography/Typography.config.styles.ts @@ -1,48 +1,87 @@ import { Theme } from 'theme'; +import { FontSpacing, SemanticTypographyKey } from 'theme/tokens/semantic/typography'; import { generateStylesFromTokens } from './utils'; -export const headline01 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('headline01')); +export const headline01 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.headline01` as SemanticTypographyKey) + ); -export const headline02 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('headline02')); +export const headline02 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.headline02` as SemanticTypographyKey) + ); -export const headline03 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('headline03')); +export const headline03 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.headline03` as SemanticTypographyKey) + ); -export const headline04 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('headline04')); +export const headline04 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.headline04` as SemanticTypographyKey) + ); -export const headline05 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('headline05')); +export const headline05 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.headline05` as SemanticTypographyKey) + ); // titles -export const title01 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('title01')); +export const title01 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.title01` as SemanticTypographyKey) + ); -export const title02 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('title02')); +export const title02 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.title02` as SemanticTypographyKey) + ); -export const title03 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('title03')); +export const title03 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.title03` as SemanticTypographyKey) + ); // labels -export const label01 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('label01')); +export const label01 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.label01` as SemanticTypographyKey) + ); -export const label02 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('label02')); +export const label02 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.label02` as SemanticTypographyKey) + ); -export const label03 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('label03')); +export const label03 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.label03` as SemanticTypographyKey) + ); + +export const label04 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.label04` as SemanticTypographyKey) + ); // body -export const body01 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('body01')); +export const body01 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.body01` as SemanticTypographyKey) + ); + +export const body02 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.body02` as SemanticTypographyKey) + ); -export const body02 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('body02')); +export const body03 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.body03` as SemanticTypographyKey) + ); -export const body03 = (theme: Theme) => - generateStylesFromTokens(theme.tokens.typography.get('body03')); +export const body04 = (theme: Theme, fontSpacing: FontSpacing = 'normal') => + generateStylesFromTokens( + theme.tokens.typography.get(`${fontSpacing}.body04` as SemanticTypographyKey) + ); diff --git a/src/components/Typography/Typography.stories.mdx b/src/components/Typography/Typography.stories.mdx index e1b1b7d6d..637d02807 100644 --- a/src/components/Typography/Typography.stories.mdx +++ b/src/components/Typography/Typography.stories.mdx @@ -65,9 +65,38 @@ General use of Typography based on available variants Label 01 Label 02 Label 03 + Label 04 Body 01 Body 02 Body 03 + Body 04 + + + + +### Font Spacing Variations + +We have 2 different font spacing variations, normal (font-family: Roboto) and mono (font-family: Roboto Mono) + + + + + Headline 01 (Normal) + Title 01 (Normal) + Label 01 (Normal) + Body 01 (Normal) + + Headline 01 (Mono) + + + Title 01 (Mono) + + + Label 01 (Mono) + + + Body 01 (Mono) + diff --git a/src/components/Typography/Typography.style.ts b/src/components/Typography/Typography.style.ts index c96be1d90..df74b00ae 100644 --- a/src/components/Typography/Typography.style.ts +++ b/src/components/Typography/Typography.style.ts @@ -1,5 +1,6 @@ import { css, SerializedStyles } from '@emotion/react'; import { Theme } from 'theme'; +import { FontSpacing } from 'theme/tokens/semantic/typography'; import { TypographyVariant, TextColorTypes } from './Typography'; import { @@ -14,9 +15,11 @@ import { label01, label02, label03, + label04, body01, body02, body03, + body04, } from './Typography.config.styles'; import colorsFigma from '../../theme/tokens/semantic/variables/colors'; import { DotKeys } from '../../theme/tokens/utils'; @@ -25,12 +28,14 @@ export const typographyWrapper = ({ variant, isInverted, + fontSpacing = 'normal', isItalic, isBold, isUnderline, type, }: { variant: TypographyVariant; + fontSpacing: FontSpacing; isInverted?: boolean; isItalic?: boolean; isBold?: boolean; @@ -50,16 +55,18 @@ export const typographyWrapper = label01, label02, label03, + label04, body01, body02, body03, + body04, }; const textColorCategory = isInverted ? 'inverted' : 'light'; const textColor = `textColor.${textColorCategory}.${type}` as DotKeys; return css` - ${allStyles[variant](theme)}; + ${allStyles[variant](theme, fontSpacing)}; font-style: ${isItalic ? 'italic' : undefined}; font-weight: ${isBold ? theme.globals.typography.fontWeight.get('bold') : undefined}; text-decoration: ${isUnderline diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx index bca89c97f..9d7f83380 100644 --- a/src/components/Typography/Typography.tsx +++ b/src/components/Typography/Typography.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { FontSpacing } from 'theme/tokens/semantic/typography'; import { typographyWrapper } from './Typography.style'; @@ -14,9 +15,11 @@ export type TypographyVariant = | 'label01' | 'label02' | 'label03' + | 'label04' | 'body01' | 'body02' - | 'body03'; + | 'body03' + | 'body04'; export type TypographyComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; @@ -27,6 +30,8 @@ export type TypographyProps = { type?: TextColorTypes; /** The variant of the Typography is the style of the text (font size, weight, line height, etc) */ variant?: TypographyVariant; + /** The Font Spacing used in the selection of the font family */ + fontSpacing?: FontSpacing; /** How you want to represent it, eg div, span or other */ component?: TypographyComponent; /** A boolean definition of the inverted case */ @@ -62,6 +67,7 @@ const Typography = React.forwardRef( { type = 'primary', variant = 'body01', + fontSpacing = 'normal', component, isInverted, isUnderline, @@ -81,6 +87,7 @@ const Typography = React.forwardRef( isInverted, type, variant, + fontSpacing, isUnderline, isItalic, isBold, diff --git a/src/components/Typography/__snapshots__/Typography.stories.storyshot b/src/components/Typography/__snapshots__/Typography.stories.storyshot index 5f6920096..a42e0931f 100644 --- a/src/components/Typography/__snapshots__/Typography.stories.storyshot +++ b/src/components/Typography/__snapshots__/Typography.stories.storyshot @@ -89,16 +89,16 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` font-weight: 700; line-height: 1.25rem; font-size: 0.875rem; - letter-spacing: 0.00625rem; + letter-spacing: 0.015625rem; color: #212332; } .emotion-10 { font-family: Roboto; font-weight: 700; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; - letter-spacing: 0.015625rem; + letter-spacing: 0.00625rem; color: #212332; } @@ -123,7 +123,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` .emotion-13 { font-family: Roboto; font-weight: 500; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; color: #212332; @@ -150,7 +150,7 @@ exports[`Storyshots Design System/Typography As specific element 1`] = ` .emotion-16 { font-family: Roboto; font-weight: 400; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; color: #212332; @@ -466,6 +466,226 @@ exports[`Storyshots Design System/Typography Extra style 1`] = ` `; +exports[`Storyshots Design System/Typography Font Spacing Variations 1`] = ` +.emotion-0 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + position: relative; + padding: 0.25rem; +} + +.emotion-1 { + margin: 1rem; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.emotion-3 { + font-family: Roboto; + font-weight: 700; + line-height: 2.5rem; + font-size: 2rem; + letter-spacing: 0rem; + color: #212332; +} + +.emotion-4 { + font-family: Roboto; + font-weight: 700; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.00625rem; + color: #212332; +} + +.emotion-5 { + font-family: Roboto; + font-weight: 500; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.00625rem; + color: #212332; +} + +.emotion-6 { + font-family: Roboto; + font-weight: 400; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.015625rem; + color: #212332; +} + +.emotion-7 { + font-family: Roboto Mono; + font-weight: 700; + line-height: 2.5rem; + font-size: 2rem; + letter-spacing: 0rem; + color: #212332; +} + +.emotion-8 { + font-family: Roboto Mono; + font-weight: 700; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.00625rem; + color: #212332; +} + +.emotion-9 { + font-family: Roboto Mono; + font-weight: 500; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.00625rem; + color: #212332; +} + +.emotion-10 { + font-family: Roboto Mono; + font-weight: 400; + line-height: 1.375rem; + font-size: 1rem; + letter-spacing: 0.015625rem; + color: #212332; +} + +
+
+
+
+

+ Headline 01 (Normal) +

+
+
+
+ Title 01 (Normal) +
+
+
+ + Label 01 (Normal) + +
+
+

+ Body 01 (Normal) +

+
+
+

+ Headline 01 (Mono) +

+
+
+
+ Title 01 (Mono) +
+
+
+ + Label 01 (Mono) + +
+
+

+ Body 01 (Mono) +

+
+
+
+
+`; + exports[`Storyshots Design System/Typography Types (inverted) 1`] = ` .emotion-0 { -webkit-flex-direction: column; @@ -864,16 +1084,16 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` font-weight: 700; line-height: 1.25rem; font-size: 0.875rem; - letter-spacing: 0.00625rem; + letter-spacing: 0.015625rem; color: #212332; } .emotion-10 { font-family: Roboto; font-weight: 700; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; - letter-spacing: 0.015625rem; + letter-spacing: 0.00625rem; color: #212332; } @@ -898,13 +1118,22 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` .emotion-13 { font-family: Roboto; font-weight: 500; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; color: #212332; } .emotion-14 { + font-family: Roboto; + font-weight: 500; + line-height: 0.875rem; + font-size: 0.625rem; + letter-spacing: 0.00625rem; + color: #212332; +} + +.emotion-15 { font-family: Roboto; font-weight: 400; line-height: 1.375rem; @@ -913,7 +1142,7 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` color: #212332; } -.emotion-15 { +.emotion-16 { font-family: Roboto; font-weight: 400; line-height: 1.25rem; @@ -922,15 +1151,24 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` color: #212332; } -.emotion-16 { +.emotion-17 { font-family: Roboto; font-weight: 400; - line-height: 1.125rem; + line-height: 1rem; font-size: 0.75rem; letter-spacing: 0.015625rem; color: #212332; } +.emotion-18 { + font-family: Roboto; + font-weight: 400; + line-height: 0.875rem; + font-size: 0.625rem; + letter-spacing: 0.00625rem; + color: #212332; +} +
@@ -1090,8 +1328,21 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` } } > -

+ Label 04 + +

+
+

Body 01

@@ -1104,7 +1355,7 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` } >

Body 02

@@ -1117,11 +1368,24 @@ exports[`Storyshots Design System/Typography Variants 1`] = ` } >

Body 03

+
+

+ Body 04 +

+
diff --git a/src/components/Typography/utils.ts b/src/components/Typography/utils.ts index f6e2106e9..c3b5794ff 100644 --- a/src/components/Typography/utils.ts +++ b/src/components/Typography/utils.ts @@ -1,11 +1,13 @@ import { css } from '@emotion/react'; -import { SemanticTypographyKeys } from 'theme/tokens/semantic/typography'; +import { TypographyObject } from 'theme/tokens/semantic/typography'; /** Generates a css object with the values included in the value object */ -export const generateStylesFromTokens = (value: Record) => css` +export const generateStylesFromTokens = (value: TypographyObject) => css` font-family: ${value.fontFamily}; font-weight: ${value.fontWeight}; line-height: ${value.lineHeight}; font-size: ${value.fontSize}; letter-spacing: ${value.letterSpacing}; + text-transform: ${value?.textCase}; + text-decoration: ${value?.textDecoration}; `; diff --git a/src/storybook/Showcases/TypographyTokensShowcase/TypographyTokensShowcase.tsx b/src/storybook/Showcases/TypographyTokensShowcase/TypographyTokensShowcase.tsx index 1e45b5fdf..a0adca3cb 100644 --- a/src/storybook/Showcases/TypographyTokensShowcase/TypographyTokensShowcase.tsx +++ b/src/storybook/Showcases/TypographyTokensShowcase/TypographyTokensShowcase.tsx @@ -7,9 +7,9 @@ import { TableWrapperStyle } from './TypographyTokensShowcase.style'; import Typography, { TypographyVariant } from 'components/Typography'; const TypographyTokensShowcase = () => { - const typographyArray = map(typographyCollection, (value, key) => ({ key, ...value })); + const typographyArray = map(typographyCollection.normal, (value, key) => ({ key, ...value })); - const parsedTypographyCompositionToken = parseCompositionToken(typographyCollection); + const parsedTypographyCompositionToken = parseCompositionToken(typographyCollection.normal); return ( @@ -25,6 +25,11 @@ const TypographyTokensShowcase = () => {
{key} +
+ + {key} (Mono) + +
{description} diff --git a/src/theme/tokens/semantic/typography.ts b/src/theme/tokens/semantic/typography.ts index b361a9792..ba7183b28 100644 --- a/src/theme/tokens/semantic/typography.ts +++ b/src/theme/tokens/semantic/typography.ts @@ -1,10 +1,23 @@ import typographyFigma from './variables/typography'; import { DotKeys, parseCompositionToken } from '../utils'; -export type SemanticTypographyKeys = keyof typeof typographyFigma.headline01.value; +export type TypographyKeys = + | 'fontSize' + | 'fontWeight' + | 'fontFamily' + | 'lineHeight' + | 'letterSpacing' + | 'textCase' + | 'textDecoration'; + +export type SemanticTypographyKey = DotKeys; + +export type FontSpacing = keyof typeof typographyFigma; + +export type TypographyObject = Record; export type SemanticTypography = { - get: (val: DotKeys) => Record; + get: (val: SemanticTypographyKey) => TypographyObject; }; const typography: SemanticTypography = { diff --git a/src/theme/tokens/semantic/variables/typography.ts b/src/theme/tokens/semantic/variables/typography.ts index 758f8c479..adf891019 100644 --- a/src/theme/tokens/semantic/variables/typography.ts +++ b/src/theme/tokens/semantic/variables/typography.ts @@ -1,167 +1,381 @@ const typography = { - headline01: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.10}', - fontSize: '{fontSize.10}', - letterSpacing: '{letterSpacing.0}', - }, - type: 'typography', - description: 'Largest text on the screen, reserved for the page title. Can only appear once', - }, - headline02: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.9}', - fontSize: '{fontSize.9}', - letterSpacing: '{letterSpacing.0}', - }, - type: 'typography', - description: - 'Headline variant 2, reserved for important copy that is not a title (e.g. section titles)', - }, - headline03: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.8}', - fontSize: '{fontSize.8}', - letterSpacing: '{letterSpacing.0}', - }, - type: 'typography', - description: 'Headline variant 3', - }, - headline04: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.7}', - fontSize: '{fontSize.6}', - letterSpacing: '{letterSpacing.0}', - }, - type: 'typography', - description: 'Headline variant 4', - }, - headline05: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.6}', - fontSize: '{fontSize.5}', - letterSpacing: '{letterSpacing.0}', - }, - type: 'typography', - description: 'Headline variant 5', - }, - title01: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.5}', - fontSize: '{fontSize.4}', - letterSpacing: '{letterSpacing.1}', - }, - type: 'typography', - description: - 'Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant', - }, - title02: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.4}', - fontSize: '{fontSize.3}', - letterSpacing: '{letterSpacing.1}', - }, - type: 'typography', - description: - 'Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant', - }, - title03: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.bold}', - lineHeight: '{lineHeight.3}', - fontSize: '{fontSize.2}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant', - }, - label01: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.medium}', - lineHeight: '{lineHeight.5}', - fontSize: '{fontSize.4}', - letterSpacing: '{letterSpacing.1}', - }, - type: 'typography', - description: - 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant', - }, - label02: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.medium}', - lineHeight: '{lineHeight.4}', - fontSize: '{fontSize.3}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant', - }, - label03: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.medium}', - lineHeight: '{lineHeight.3}', - fontSize: '{fontSize.2}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant', - }, - body01: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.regular}', - lineHeight: '{lineHeight.5}', - fontSize: '{fontSize.4}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Used for longer text string of regular emphasis or text within components. Large variant', - }, - body02: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.regular}', - lineHeight: '{lineHeight.4}', - fontSize: '{fontSize.3}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Used for longer text string of regular emphasis or text within components. Medium variant', + normal: { + headline01: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.10}', + fontSize: '{fontSize.10}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Largest text on the screen, reserved for the page title. Can only appear once', + }, + headline02: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.9}', + fontSize: '{fontSize.9}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: + 'Headline variant 2, reserved for important copy that is not a title (e.g. section titles)', + }, + headline03: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.8}', + fontSize: '{fontSize.8}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 3', + }, + headline04: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.7}', + fontSize: '{fontSize.6}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 4', + }, + headline05: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.6}', + fontSize: '{fontSize.5}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 5', + }, + title01: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant', + }, + title02: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant', + }, + title03: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant', + }, + label01: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant', + }, + label02: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant', + }, + label03: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant', + }, + label04: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.1}', + fontSize: '{fontSize.1}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant', + }, + body01: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Large variant', + }, + body02: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Medium variant', + }, + body03: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Small variant', + }, + body04: { + value: { + fontFamily: '{fontFamily.roboto}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.1}', + fontSize: '{fontSize.1}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: 'Used for text within components. Extra small variant', + }, }, - body03: { - value: { - fontFamily: '{fontFamily.roboto}', - fontWeight: '{fontWeight.regular}', - lineHeight: '{lineHeight.3}', - fontSize: '{fontSize.2}', - letterSpacing: '{letterSpacing.2}', - }, - type: 'typography', - description: - 'Used for longer text string of regular emphasis or text within components. Small variant', + mono: { + headline01: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.10}', + fontSize: '{fontSize.10}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Largest text on the screen, reserved for the page title. Can only appear once', + }, + body04: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.1}', + fontSize: '{fontSize.1}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: 'Used for text within components. Extra small variant', + }, + headline02: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.9}', + fontSize: '{fontSize.9}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: + 'Headline variant 2, reserved for important copy that is not a title (e.g. section titles)', + }, + headline03: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.8}', + fontSize: '{fontSize.8}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 3', + }, + headline04: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.7}', + fontSize: '{fontSize.6}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 4', + }, + headline05: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.6}', + fontSize: '{fontSize.5}', + letterSpacing: '{letterSpacing.0}', + }, + type: 'typography', + description: 'Headline variant 5', + }, + title01: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant', + }, + title02: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant', + }, + title03: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.bold}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant', + }, + label01: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant', + }, + label02: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant', + }, + label03: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant', + }, + label04: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.medium}', + lineHeight: '{lineHeight.1}', + fontSize: '{fontSize.1}', + letterSpacing: '{letterSpacing.1}', + }, + type: 'typography', + description: + 'Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant', + }, + body01: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.5}', + fontSize: '{fontSize.4}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Large variant', + }, + body02: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.4}', + fontSize: '{fontSize.3}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Medium variant', + }, + body03: { + value: { + fontFamily: '{fontFamily.robotoMono}', + fontWeight: '{fontWeight.regular}', + lineHeight: '{lineHeight.2}', + fontSize: '{fontSize.2}', + letterSpacing: '{letterSpacing.2}', + }, + type: 'typography', + description: + 'Used for longer text string of regular emphasis or text within components. Small variant', + }, }, } as const; diff --git a/src/theme/tokens/utils/components.ts b/src/theme/tokens/utils/components.ts index 278897ec6..485a8ffc1 100644 --- a/src/theme/tokens/utils/components.ts +++ b/src/theme/tokens/utils/components.ts @@ -1,7 +1,7 @@ import { get, isEmpty } from 'lodash'; import { Theme } from 'theme'; -import { parseComponentToken } from './parsers'; +import { parseComponentToken, parseCompositionToken } from './parsers'; import { Token, TokensObject } from './types'; /** @@ -22,5 +22,10 @@ export const getComponentTokens = const pathKeys = path.split('.'); const tokensObject = get(object, pathKeys, {}); + if (tokensObject.type === 'typography' && typeof tokensObject.value === 'object') { + /** In this case value is a composition token with global typography keys */ + return parseCompositionToken(object)(path); + } + return !isEmpty(tokensObject) ? parseComponentToken(tokensObject.value, fn)(theme) : ''; }; diff --git a/src/theme/tokens/utils/parsers.ts b/src/theme/tokens/utils/parsers.ts index 949d899ec..3b9bad972 100644 --- a/src/theme/tokens/utils/parsers.ts +++ b/src/theme/tokens/utils/parsers.ts @@ -91,7 +91,7 @@ export const parseComponentToken = const pathKeys = path.slice(1, -1).split('.'); if (pathKeys[0] === 'sem') { - const category = pathKeys[1]; // backdrop | backgroundColor | borderColor | disabledState | palette | textColor + const category = pathKeys[1]; // backdrop | backgroundColor | borderColor | disabledState | palette | textColor | typography const rest = pathKeys.slice(2).join('.'); return theme.tokens[category].get(rest, fn);