From 6e8efe5efe57f3d0e37a45c2025924d6b9fa9d26 Mon Sep 17 00:00:00 2001 From: fpasquet Date: Tue, 30 Jan 2024 16:01:18 +0100 Subject: [PATCH] feat: add custom properties for desktop (#67) --- .eslintignore | 1 + .gitignore | 2 + .../formats/css/variables.ts | 38 +++++ bin/build-design-tokens/formats/register.ts | 1 + bin/build-design-tokens/index.ts | 133 +++++++++++------- package-lock.json | 4 +- package.json | 2 +- src/assets/svgs/rss.svg | 10 +- .../Blocks/HomeIntroBlock/HomeIntroBlock.tsx | 2 +- .../Molecules/SearchField/SearchField.scss | 4 - src/constants/index.ts | 1 + src/constants/tokenNameList.ts | 6 +- .../heading-markup.desktop.tokens.json | 26 ++++ .../typography/heading-markup.tokens.json | 26 ---- .../typography/heading.desktop.tokens.json | 34 +++++ .../typography/heading.tokens.json | 37 ----- src/designTokens/typography/text.tokens.json | 30 ---- .../typography/texts.desktop.tokens.json | 30 ++++ src/helpers/storybookHelper.ts | 6 +- src/pages/PostPage/PostPage.stories.tsx | 42 ++++++ src/pages/PostPage/PostPageContent.scss | 36 ++++- src/styles/_reset.scss | 5 - src/styles/common.scss | 1 + src/styles/utilities/_typography.scss | 11 -- src/types/tokenTypes.ts | 10 +- 25 files changed, 307 insertions(+), 191 deletions(-) create mode 100644 bin/build-design-tokens/formats/css/variables.ts create mode 100644 src/designTokens/typography/heading-markup.desktop.tokens.json create mode 100644 src/designTokens/typography/heading.desktop.tokens.json create mode 100644 src/designTokens/typography/texts.desktop.tokens.json diff --git a/.eslintignore b/.eslintignore index 32a97bbe..5192ceb4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ vite.config.ts vitest.config.ts src/constants/tokenVariables.ts +src/constants/tokenVariablesDesktop.ts src/components/Atoms/Svgs bin diff --git a/.gitignore b/.gitignore index e2bc0f3d..f148e7f5 100644 --- a/.gitignore +++ b/.gitignore @@ -26,7 +26,9 @@ storybook-static public/svgs src/components/Atoms/Svgs src/styles/_token-custom-properties.scss +src/styles/_token-custom-properties-desktop.scss src/styles/abstracts/variables/_token-variables.scss src/styles/abstracts/variables/_variables.scss src/styles/_fonts.scss src/constants/tokenVariables.ts +src/constants/tokenVariablesDesktop.ts diff --git a/bin/build-design-tokens/formats/css/variables.ts b/bin/build-design-tokens/formats/css/variables.ts new file mode 100644 index 00000000..cb53e268 --- /dev/null +++ b/bin/build-design-tokens/formats/css/variables.ts @@ -0,0 +1,38 @@ +import StyleDictionary from 'style-dictionary'; + +StyleDictionary.registerFormat({ + name: 'css/variables', + formatter: ({ dictionary, file, options = {} }) => { + let output = ''; + if (options?.showFileHeader !== false) { + output += StyleDictionary.formatHelpers.fileHeader({ file }); + } + + const variables = StyleDictionary.formatHelpers.formattedVariables({ + dictionary, + outputReferences: options.outputReferences, + format: 'css', + formatting: { + prefix: '--', + indentation: '\t\t', + separator: ':' + } + }); + + if (options.mediaQuery) { + output += `@use './abstracts' as *;\n\n`; + } + + output += [ + `${options.selector ? options.selector : `:root`} {`, + options.mediaQuery ? [ + `\t@include create-media-queries('${options.mediaQuery}') {`, + variables, + `\t}`, + ].join('\n') : variables, + '}' + ].join('\n'); + + return output; + }, +}); diff --git a/bin/build-design-tokens/formats/register.ts b/bin/build-design-tokens/formats/register.ts index c367c727..b9ac68ec 100644 --- a/bin/build-design-tokens/formats/register.ts +++ b/bin/build-design-tokens/formats/register.ts @@ -1,2 +1,3 @@ +import './css/variables'; import './scss/map-deep-with-css-variables'; import './typescript/object'; diff --git a/bin/build-design-tokens/index.ts b/bin/build-design-tokens/index.ts index ce5c85ea..01912d64 100644 --- a/bin/build-design-tokens/index.ts +++ b/bin/build-design-tokens/index.ts @@ -1,6 +1,6 @@ #!/usr/bin/env node -import type { File, TransformedToken } from 'style-dictionary'; +import { Config, File, TransformedToken } from 'style-dictionary'; import StyleDictionary from 'style-dictionary'; import './formats/register'; @@ -9,57 +9,92 @@ import './transforms/register'; const filterExcludesCategories = (token: TransformedToken, categories: string[]): boolean => token?.attributes?.category ? !categories.includes(token.attributes.category) : false; -const styleDictionary = StyleDictionary.extend({ - source: ['src/designTokens/**/*.tokens.json'], - platforms: { - 'css/variables': { - buildPath: './src/styles/', - transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'], - files: [ - { - format: 'css/variables', - filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']), - destination: '_token-custom-properties.scss', - }, - ], - }, - 'scss/variables': { - buildPath: './src/styles/', - transforms: ['attribute/cti'], - files: [ - { - format: 'scss/map-deep', - filter: (token): boolean => token?.attributes?.category === 'color', - destination: 'abstracts/variables/_variables.scss', - mapName: 'variables', - } as File, - ], - }, - 'scss/token-variables': { - buildPath: './src/styles/', - transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'], - files: [ - { - format: 'scss/map-deep-with-css-variables', - filter: (token): boolean => filterExcludesCategories(token, ['asset']), - destination: 'abstracts/variables/_token-variables.scss', +const sdConfigs: Config[] = [ + { + source: ['src/designTokens/**/!(*.desktop).tokens.json'], + platforms: { + 'css/variables': { + buildPath: './src/styles/', + transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'], + files: [ + { + format: 'css/variables', + filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']), + destination: '_token-custom-properties.scss', + }, + ], + }, + 'scss/variables': { + buildPath: './src/styles/', + transforms: ['attribute/cti'], + files: [ + { + format: 'scss/map-deep', + filter: (token): boolean => token?.attributes?.category === 'color', + destination: 'abstracts/variables/_variables.scss', + mapName: 'variables', + } as File, + ], + }, + 'scss/token-variables': { + buildPath: './src/styles/', + transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'], + files: [ + { + format: 'scss/map-deep-with-css-variables', + filter: (token): boolean => filterExcludesCategories(token, ['asset']), + destination: 'abstracts/variables/_token-variables.scss', + }, + ], + options: { + categoriesWithNotCssVariables: ['breakpoint'], }, - ], - options: { - categoriesWithNotCssVariables: ['breakpoint'], + }, + 'typescript/token-variables': { + buildPath: './src/', + transforms: ['attribute/cti', 'math', 'size/px'], + files: [ + { + format: 'typescript/object', + destination: 'constants/tokenVariables.ts', + }, + ], }, }, - 'typescript/token-variables': { - buildPath: './src/', - transforms: ['attribute/cti', 'math', 'size/px'], - files: [ - { - format: 'typescript/object', - destination: 'constants/tokenVariables.ts', - }, - ], + }, + { + include: ['src/designTokens/**/!(*.desktop).tokens.json'], + source: ['src/designTokens/**/*.desktop.tokens.json'], + platforms: { + 'css/variables': { + buildPath: './src/styles/', + transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'], + files: [ + { + format: 'css/variables', + filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']) && token.filePath.indexOf(`.desktop`) > -1, + destination: '_token-custom-properties-desktop.scss', + options: { + mediaQuery: 'md', + }, + }, + ], + }, + 'typescript/token-variables': { + buildPath: './src/', + transforms: ['attribute/cti', 'math', 'size/px'], + files: [ + { + format: 'typescript/object', + filter: (token): boolean => token.filePath.indexOf(`.desktop`) > -1, + destination: 'constants/tokenVariablesDesktop.ts', + }, + ], + }, }, }, -}); +]; -styleDictionary.buildAllPlatforms(); +for (const sdConfig of sdConfigs) { + StyleDictionary.extend(sdConfig).buildAllPlatforms(); +} diff --git a/package-lock.json b/package-lock.json index d29584e3..405d735d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@eleven-labs/design-system", - "version": "0.28.0", + "version": "0.29.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@eleven-labs/design-system", - "version": "0.28.0", + "version": "0.29.0", "license": "MIT", "dependencies": { "autosuggest-highlight": "^3.3.4", diff --git a/package.json b/package.json index 20c55ccc..19e4739e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eleven-labs/design-system", "description": "Design System for Eleven Labs", - "version": "0.28.0", + "version": "0.29.0", "repository": { "type": "git", "url": "https://github.com/eleven-labs/design-system.git" diff --git a/src/assets/svgs/rss.svg b/src/assets/svgs/rss.svg index 6f12fb19..cbde54d7 100644 --- a/src/assets/svgs/rss.svg +++ b/src/assets/svgs/rss.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx index 715de3a2..595c3535 100644 --- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx +++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx @@ -29,7 +29,7 @@ export const HomeIntroBlock: React.FC = ({ ml={{ xs: '0', md: 'xxl' }} className="home-intro-block__container" > - + {intro} diff --git a/src/components/Molecules/SearchField/SearchField.scss b/src/components/Molecules/SearchField/SearchField.scss index 6c704332..66e3cde3 100644 --- a/src/components/Molecules/SearchField/SearchField.scss +++ b/src/components/Molecules/SearchField/SearchField.scss @@ -18,10 +18,6 @@ border-radius: 22px; background-color: #{map-get-strict($token-variables, 'color', 'secondary')}; - @include create-media-queries('md') { - --font-size-input: #{map-get-strict($token-variables, 'desktop', 'typography', 'text', 'xs', 'font-size')}; - } - &, &::placeholder { color: #{map-get-strict($token-variables, 'color', 'primary')}; } diff --git a/src/constants/index.ts b/src/constants/index.ts index 49b8c25e..a6aaedfb 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,4 +1,5 @@ export * from './tokenVariables'; +export { tokenVariables as tokenVariablesDesktop } from './tokenVariablesDesktop'; export * from './tokenNameList'; export * from './cssProperties'; export * from './cssPropertyNameList'; diff --git a/src/constants/tokenNameList.ts b/src/constants/tokenNameList.ts index 4852217f..def7131d 100644 --- a/src/constants/tokenNameList.ts +++ b/src/constants/tokenNameList.ts @@ -23,8 +23,6 @@ export const fontWeightTokenNameList = Object.keys(tokenVariables['font-weight'] export const iconTokenNameList = Object.keys(tokenVariables['asset']['icon']) as ReadonlyArray; export const headingSizeTokenNameList = Object.keys( - tokenVariables['typography']['heading'] || tokenVariables['desktop']['typography']['heading'] + tokenVariables['typography']['heading'] ) as ReadonlyArray; -export const textSizeTokenNameList = Object.keys( - tokenVariables['typography']['text'] || tokenVariables['desktop']['typography']['text'] -) as ReadonlyArray; +export const textSizeTokenNameList = Object.keys(tokenVariables['typography']['text']) as ReadonlyArray; diff --git a/src/designTokens/typography/heading-markup.desktop.tokens.json b/src/designTokens/typography/heading-markup.desktop.tokens.json new file mode 100644 index 00000000..39bbf921 --- /dev/null +++ b/src/designTokens/typography/heading-markup.desktop.tokens.json @@ -0,0 +1,26 @@ +{ + "typography": { + "heading-markup": { + "s": { + "font-size": { + "value": "24px" + } + }, + "m": { + "font-size": { + "value": "{typography.heading-markup.s.font-size.value} + 2" + } + }, + "l": { + "font-size": { + "value": "{typography.heading-markup.m.font-size.value} + 2" + } + }, + "xl": { + "font-size": { + "value": "{typography.heading-markup.m.font-size.value} + 2" + } + } + } + } +} diff --git a/src/designTokens/typography/heading-markup.tokens.json b/src/designTokens/typography/heading-markup.tokens.json index 1809da5b..b77fb535 100644 --- a/src/designTokens/typography/heading-markup.tokens.json +++ b/src/designTokens/typography/heading-markup.tokens.json @@ -51,31 +51,5 @@ } } } - }, - "desktop": { - "typography": { - "heading-markup": { - "s": { - "font-size": { - "value": "24px" - } - }, - "m": { - "font-size": { - "value": "{desktop.typography.heading-markup.s.font-size.value} + 2" - } - }, - "l": { - "font-size": { - "value": "{desktop.typography.heading-markup.m.font-size.value} + 2" - } - }, - "xl": { - "font-size": { - "value": "{desktop.typography.heading-markup.m.font-size.value} + 2" - } - } - } - } } } diff --git a/src/designTokens/typography/heading.desktop.tokens.json b/src/designTokens/typography/heading.desktop.tokens.json new file mode 100644 index 00000000..ea6be47c --- /dev/null +++ b/src/designTokens/typography/heading.desktop.tokens.json @@ -0,0 +1,34 @@ +{ + "typography": { + "base": { + "letter-spacing": { + "value": "2px" + } + }, + "heading": { + "s": { + "font-size": { + "value": "24px" + } + }, + "m": { + "font-size": { + "value": "{typography.heading.s.font-size.value} + 8" + } + }, + "l": { + "font-size": { + "value": "{typography.heading.m.font-size.value} + 8" + } + }, + "xl": { + "font-size": { + "value": "{typography.heading.m.font-size.value} * 2" + }, + "letter-spacing": { + "value": "3px" + } + } + } + } +} diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json index 0e178f60..9df69a3c 100644 --- a/src/designTokens/typography/heading.tokens.json +++ b/src/designTokens/typography/heading.tokens.json @@ -18,9 +18,6 @@ }, "font-weight": { "value": "{font-weight.bold.value}" - }, - "text-transform": { - "value": "uppercase" } }, "m": { @@ -51,39 +48,5 @@ } } } - }, - "desktop": { - "base": { - "letter-spacing": { - "value": "2px" - } - }, - "typography": { - "heading": { - "s": { - "font-size": { - "value": "24px" - } - }, - "m": { - "font-size": { - "value": "{desktop.typography.heading.s.font-size.value} + 8" - } - }, - "l": { - "font-size": { - "value": "{desktop.typography.heading.m.font-size.value} + 8" - } - }, - "xl": { - "font-size": { - "value": "{desktop.typography.heading.m.font-size.value} * 2" - }, - "letter-spacing": { - "value": "3px" - } - } - } - } } } diff --git a/src/designTokens/typography/text.tokens.json b/src/designTokens/typography/text.tokens.json index 764b2f34..aa29a656 100644 --- a/src/designTokens/typography/text.tokens.json +++ b/src/designTokens/typography/text.tokens.json @@ -31,35 +31,5 @@ } } } - }, - "desktop": { - "typography": { - "text": { - "xs": { - "font-size": { - "value": "14px" - }, - "icon-size": { - "value": "{desktop.typography.text.s.font-size.value} + 2" - } - }, - "s": { - "font-size": { - "value": "{desktop.typography.text.xs.font-size.value} + 2" - }, - "icon-size": { - "value": "{desktop.typography.text.s.font-size.value} + 2" - } - }, - "m": { - "font-size": { - "value": "{desktop.typography.text.s.font-size.value} + 4" - }, - "icon-size": { - "value": "{desktop.typography.text.m.font-size.value} + 2" - } - } - } - } } } diff --git a/src/designTokens/typography/texts.desktop.tokens.json b/src/designTokens/typography/texts.desktop.tokens.json new file mode 100644 index 00000000..cf077187 --- /dev/null +++ b/src/designTokens/typography/texts.desktop.tokens.json @@ -0,0 +1,30 @@ +{ + "typography": { + "text": { + "xs": { + "font-size": { + "value": "14px" + }, + "icon-size": { + "value": "{typography.text.s.font-size.value} + 2" + } + }, + "s": { + "font-size": { + "value": "{typography.text.xs.font-size.value} + 2" + }, + "icon-size": { + "value": "{typography.text.s.font-size.value} + 2" + } + }, + "m": { + "font-size": { + "value": "{typography.text.s.font-size.value} + 4" + }, + "icon-size": { + "value": "{typography.text.m.font-size.value} + 2" + } + } + } + } +} diff --git a/src/helpers/storybookHelper.ts b/src/helpers/storybookHelper.ts index ef9ff094..02db8034 100644 --- a/src/helpers/storybookHelper.ts +++ b/src/helpers/storybookHelper.ts @@ -1,7 +1,7 @@ import type { ControlType } from '@storybook/blocks'; import type { ArgTypes, InputType } from '@storybook/csf'; -import { tokenVariables } from '@/constants'; +import { tokenVariables, tokenVariablesDesktop } from '@/constants'; import { get } from '@/helpers/objectHelper'; import { kebabCase } from './stringHelper'; @@ -78,8 +78,8 @@ export const getValueOfCssPropertyInDesignTokens = (options: { isDesktop?: boolean; }): number | string => get( - tokenVariables, - `${options.isDesktop ? 'desktop.' : ''}${options.path}.${options.tokenName}.${options.propertyCSS}.value` + options.isDesktop ? tokenVariablesDesktop : tokenVariables, + `${options.path}.${options.tokenName}.${options.propertyCSS}.value` ) || get(tokenVariables, `${options.path}.${options.tokenName}.${options.propertyCSS}.value`) || get(tokenVariables, `${options.path}.base.${options.propertyCSS}.value`); diff --git a/src/pages/PostPage/PostPage.stories.tsx b/src/pages/PostPage/PostPage.stories.tsx index 97b0dc3f..775fe31d 100644 --- a/src/pages/PostPage/PostPage.stories.tsx +++ b/src/pages/PostPage/PostPage.stories.tsx @@ -50,6 +50,48 @@ const meta: Meta = { Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.

+

+ I just love bold text. +

+

+ Italicized text is the cat's meow. +

+

+ Use `code` in your Markdown file. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida + ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet. +

+
Dorothy followed her through many of the beautiful rooms in her castle.
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida + ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet. +

+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. + Third item +
      +
    1. Indented item
      2. +
    2. Indented item
      3. +
    +
    4. +
  4. Fourth item
    5. +
+ ), footer: PostFooterStories.args as PostPageProps['footer'], diff --git a/src/pages/PostPage/PostPageContent.scss b/src/pages/PostPage/PostPageContent.scss index bef0e959..b61b5acf 100644 --- a/src/pages/PostPage/PostPageContent.scss +++ b/src/pages/PostPage/PostPageContent.scss @@ -2,7 +2,6 @@ @use '@/styles/abstracts' as *; $heading-markup-config: map-get-strict($token-variables, 'typography', 'heading-markup'); -$heading-markup-desktop-config: map-get-strict($token-variables, 'desktop', 'typography', 'heading-markup'); $headings-by-compoent-variant-name: ( 's': 'h5', 'm': 'h4', @@ -45,11 +44,38 @@ $headings-by-compoent-variant-name: ( @include heading($heading-markup-config); - @include create-media-queries('md') { - @include heading($heading-markup-desktop-config); + p, ul, ol, blockquote { + margin: 0 0 #{map-get-strict($token-variables, 'spacing', 'xs')} 0; } - p { - margin-bottom: #{map-get-strict($token-variables, 'spacing', 'xs')}; + blockquote { + padding: 0 var(--spacing-xxl); + font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')}; + font-size: #{map-get-strict($token-variables, 'typography', 'text', 'm', 'font-size')}; + font-style: italic; + line-height: #{map-get-strict($token-variables, 'line-height', 'base')}; + + &::before, &::after { + content: "“"; + display: block; + height: 3rem; + line-height: 6rem; + font-size: 8rem; + font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')}; + color: #{map-get-strict($token-variables, 'color', 'primary')}; + } + + &::before { + margin-left: calc(var(--spacing-xxl) * -1); + } + + &::after { + margin-right: calc(var(--spacing-xxl) * -1); + transform: rotate(180deg); + } + } + + figure { + text-align: center; } } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 5bd8f37c..fd9608d4 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -31,8 +31,3 @@ button { a { text-decoration: none; } - -ol { - margin: 0; - padding: 0; -} diff --git a/src/styles/common.scss b/src/styles/common.scss index d01981c7..0658194e 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -1,4 +1,5 @@ @use 'reset'; @use 'token-custom-properties'; +@use 'token-custom-properties-desktop'; @use 'base'; @use 'utilities'; diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss index 02e0dd6d..2b95a1d3 100644 --- a/src/styles/utilities/_typography.scss +++ b/src/styles/utilities/_typography.scss @@ -67,18 +67,7 @@ $typography-prop-list-with-breakpoints: ( } $heading-config: map.get($token-variables, 'typography', 'heading'); -$heading-desktop-config: map.get($token-variables, 'desktop', 'typography', 'heading'); $text-config: map.get($token-variables, 'typography', 'text'); -$text-desktop-config: map.get($token-variables, 'desktop', 'typography', 'text'); @include component('heading', $heading-config); - -@include create-media-queries('md') { - @include component('heading', map.merge($heading-config, $heading-desktop-config)); -} - @include text-component($text-config); - -@include create-media-queries('md') { - @include text-component(map.merge($text-config, $text-desktop-config)); -} diff --git a/src/types/tokenTypes.ts b/src/types/tokenTypes.ts index a7fdb653..0c70febe 100644 --- a/src/types/tokenTypes.ts +++ b/src/types/tokenTypes.ts @@ -11,11 +11,5 @@ export type FontWeightType = keyof (typeof tokenVariables)['font-weight']; export type IconNameType = keyof (typeof tokenVariables)['asset']['icon']; -export type HeadingSizeType = keyof ( - | (typeof tokenVariables)['typography']['heading'] - | (typeof tokenVariables)['desktop']['typography']['heading'] -); -export type TextSizeType = keyof ( - | (typeof tokenVariables)['typography']['text'] - | (typeof tokenVariables)['desktop']['typography']['text'] -); +export type HeadingSizeType = keyof (typeof tokenVariables)['typography']['heading']; +export type TextSizeType = keyof (typeof tokenVariables)['typography']['text'];