m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Feat/16187/text housekeeping (#16589)

Browse Source 
* text housekeeping

* update testing

* Text constant

* TEXT const to story

* format text sizes

* add associated constants to text component

* add all exports to global index.js

* update snapshot

* update text component variants

* Update ui/components/component-library/text/README.mdx

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update rearrangements

* update text in tests

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear 2022-12-01 09:26:19 -08:00 committed by GitHub
parent a861cc6dae
commit 1007930078
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 183 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`ButtonBase should render button element correctly and match snapshot 1`
data-testid="button-base"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button base
</span>

2
ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`ButtonLink should render button element correctly 1`] = `
data-testid="button-link"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button Link
</span>

2
ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`ButtonPrimary should render button element correctly 1`] = `
data-testid="button-primary"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button Primary
</span>

2
ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`ButtonSecondary should render button element correctly 1`] = `
data-testid="button-secondary"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button Secondary
</span>

8
ui/components/component-library/button/__snapshots__/button.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`Button should render button element correctly 1`] = `
data-testid="button"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button
</span>
@ -22,7 +22,7 @@ exports[`Button should render with different button types 1`] = `
data-testid="primary"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button
</span>
@ -32,7 +32,7 @@ exports[`Button should render with different button types 1`] = `
data-testid="secondary"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button
</span>
@ -42,7 +42,7 @@ exports[`Button should render with different button types 1`] = `
data-testid="link"
>
<span
class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
class="box mm-text mm-button__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
>
Button
</span>

2
ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`FormTextField should render correctly 1`] = `
>
<input
autocomplete="off"
class="box text mm-text-field-base__input text--body-md text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent"
class="box mm-text mm-text-field-base__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent"
focused="false"
type="text"
value=""

2
ui/components/component-library/form-text-field/form-text-field.test.js
View File

@ -83,7 +83,7 @@ describe('FormTextField', () => {
);
expect(getByTestId('text-field')).toHaveClass('mm-text-field-base--error');
expect(getByText('test help text')).toHaveClass(
'text--color-error-default',
'mm-text--color-error-default',
);
});
// helpText

2
ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`HelpText should render with text inside the HelpText 1`] = `
<div>
<span
class="box text mm-help-text text--body-xs text--color-text-default box--flex-direction-row"
class="box mm-text mm-help-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row"
>
help text
</span>

10
ui/components/component-library/help-text/help-text.test.js
View File

@ -30,7 +30,7 @@ describe('HelpText', () => {
});
it('should render with error state', () => {
const { getByText } = render(<HelpText error>error</HelpText>);
expect(getByText('error')).toHaveClass('text--color-error-default');
expect(getByText('error')).toHaveClass('mm-text--color-error-default');
});
it('should render with different colors', () => {
const { getByText } = render(
@ -41,9 +41,9 @@ describe('HelpText', () => {
<HelpText color={COLORS.INFO_DEFAULT}>info</HelpText>
</>,
);
expect(getByText('default')).toHaveClass('text--color-text-default');
expect(getByText('warning')).toHaveClass('text--color-warning-default');
expect(getByText('success')).toHaveClass('text--color-success-default');
expect(getByText('info')).toHaveClass('text--color-info-default');
expect(getByText('default')).toHaveClass('mm-text--color-text-default');
expect(getByText('warning')).toHaveClass('mm-text--color-warning-default');
expect(getByText('success')).toHaveClass('mm-text--color-success-default');
expect(getByText('info')).toHaveClass('mm-text--color-info-default');
});
});

2
ui/components/component-library/index.js
View File

@ -17,7 +17,7 @@ export { Label } from './label';
export { PickerNetwork } from './picker-network';
export { Tag } from './tag';
export { TagUrl } from './tag-url';
export { Text } from './text';
export { Text, TEXT_VARIANTS } from './text';
export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
export {
TextFieldBase,

2
ui/components/component-library/label/__snapshots__/label.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`label should render text inside the label 1`] = `
<div>
<label
class="box text mm-label text--body-md text--font-weight-bold text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
class="box mm-text mm-label mm-text--body-md mm-text--font-weight-bold mm-text--color-text-default box--display-inline-flex box--flex-direction-row box--align-items-center"
>
label
</label>

2
ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
I
</div>
<p
class="box text text--body-sm text--ellipsis text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
>
Imported
</p>

2
ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
View File

@ -16,7 +16,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
/>
</div>
<p
class="box text text--body-md text--ellipsis text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-md mm-text--ellipsis mm-text--color-text-default box--flex-direction-row"
>
https://app.uniswap.org
</p>

2
ui/components/component-library/tag/__snapshots__/tag.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`Tag should render the label inside the tag and match snapshot 1`] = `
data-testid="tag"
>
<p
class="box text text--body-sm text--color-text-default box--flex-direction-row"
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
Imported
</p>

7
ui/components/component-library/text/README.mdx
View File

@ -14,12 +14,16 @@ Good typography improves readability, legibility and hierarchy of information.
## Props
The `Text` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
<ArgsTable of={Text} />
### Variant
Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design-system.js` to change the font size of the component.
Optional: `TEXT_VARIANTS` from ./text object can also be used.
<Canvas>
<Story id="ui-components-component-library-text-text-stories-js--variant" />
</Canvas>
@ -32,8 +36,11 @@ import { TEXT } from '../../../helpers/constants/design-system';
<Text variant={TEXT.HEADING_LG}>heading-lg</Text>
<Text variant={TEXT.HEADING_MD}>heading-md</Text>
<Text variant={TEXT.HEADING_SM}>heading-sm</Text>
<Text variant={TEXT.BODY_LG_MEDIUM}>body-lg-medium</Text>
<Text variant={TEXT.BODY_MD}>body-md</Text>
<Text variant={TEXT.BODY_MD_BOLD}>body-md-bold</Text>
<Text variant={TEXT.BODY_SM}>body-sm</Text>
<Text variant={TEXT.BODY_SM_BOLD}>body-sm-bold</Text>
<Text variant={TEXT.BODY_XS}>body-xs</Text>
<Text variant={TEXT.INHERIT}>inherit</Text>
```

56
ui/components/component-library/text/__snapshots__/text.test.js.snap Normal file
View File

@ -0,0 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Text should render the Text with proper variant class name 1`] = `
<div>
<h1
class="box mm-text mm-text--display-md mm-text--color-text-default box--flex-direction-row"
>
display-md
</h1>
<h2
class="box mm-text mm-text--heading-lg mm-text--color-text-default box--flex-direction-row"
>
heading-lg
</h2>
<h2
class="box mm-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
>
heading-md
</h2>
<h2
class="box mm-text mm-text--heading-sm mm-text--color-text-default box--flex-direction-row"
>
heading-sm
</h2>
<p
class="box mm-text mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
>
body-lg-medium
</p>
<p
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
>
body-md
</p>
<p
class="box mm-text mm-text--body-md-bold mm-text--color-text-default box--flex-direction-row"
>
body-md-bold
</p>
<p
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
body-sm
</p>
<p
class="box mm-text mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
>
body-sm-bold
</p>
<p
class="box mm-text mm-text--body-xs mm-text--color-text-default box--flex-direction-row"
>
body-xs
</p>
</div>
`;

1
ui/components/component-library/text/index.js
View File

@ -1 +1,2 @@
export { Text } from './text';
export { TEXT_VARIANTS } from './text.constants';

15
ui/components/component-library/text/text.constants.js Normal file
View File

@ -0,0 +1,15 @@
import { TEXT } from '../../../helpers/constants/design-system';
export const TEXT_VARIANTS = {
DISPLAY_MD: TEXT.DISPLAY_MD,
HEADING_LG: TEXT.HEADING_LG,
HEADING_MD: TEXT.HEADING_MD,
HEADING_SM: TEXT.HEADING_SM,
BODY_LG_MEDIUM: TEXT.BODY_LG_MEDIUM,
BODY_MD: TEXT.BODY_MD,
BODY_MD_BOLD: TEXT.BODY_MD_BOLD,
BODY_SM: TEXT.BODY_SM,
BODY_SM_BOLD: TEXT.BODY_SM_BOLD,
BODY_XS: TEXT.BODY_XS,
INHERIT: TEXT.INHERIT,
};

35
ui/components/component-library/text/text.js
View File

@ -11,6 +11,7 @@ import {
OVERFLOW_WRAP,
TEXT_COLORS,
} from '../../../helpers/constants/design-system';
import { TEXT_VARIANTS } from './text.constants';
export const ValidTags = [
'dd',
@ -58,18 +59,18 @@ export const Text = React.forwardRef(
}
const computedClassName = classnames(
'text',
'mm-text',
className,
`text--${variant}`,
`mm-text--${variant}`,
(strongTagFontWeight || fontWeight) &&
`text--font-weight-${strongTagFontWeight || fontWeight}`,
`mm-text--font-weight-${strongTagFontWeight || fontWeight}`,
{
[`text--font-style-${fontStyle}`]: Boolean(fontStyle),
[`text--ellipsis`]: Boolean(ellipsis),
[`text--text-transform-${textTransform}`]: Boolean(textTransform),
[`text--text-align-${textAlign}`]: Boolean(textAlign),
[`text--color-${color}`]: Boolean(color),
[`text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
[`mm-text--font-style-${fontStyle}`]: Boolean(fontStyle),
[`mm-text--ellipsis`]: Boolean(ellipsis),
[`mm-text--text-transform-${textTransform}`]: Boolean(textTransform),
[`mm-text--text-align-${textAlign}`]: Boolean(textAlign),
[`mm-text--color-${color}`]: Boolean(color),
[`mm-text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
},
);
@ -98,9 +99,21 @@ export const Text = React.forwardRef(
Text.propTypes = {
/**
* The variation of font styles including sizes and weights of the Text component (display, heading, body)
* The variation of font styles including sizes and weights of the Text component
* Possible values:
* `DISPLAY_MD` large screen: 48px / small screen: 32px,
* `HEADING_LG` large screen: 32px / small screen: 24px,
* `HEADING_MD` large screen: 24px / small screen: 18px,
* `HEADING_SM` large screen: 18px / small screen: 16px,
* `BODY_LG_MEDIUM` large screen: 18px / small screen: 16px,
* `BODY_MD` large screen: 16px / small screen: 14px,
* `BODY_MD_BOLD` large screen: 16px / small screen: 14px,
* `BODY_SM` large screen: 14px / small screen: 12px,
* `BODY_SM_BOLD` large screen: 14px / small screen: 12px,
* `BODY_XS` large screen: 12px / small screen: 10px,
* `INHERIT`
*/
variant: PropTypes.oneOf(Object.values(TEXT)),
variant: PropTypes.oneOf(Object.values(TEXT_VARIANTS)),
/**
* The color of the Text component Should use the COLOR object from
* ./ui/helpers/constants/design-system.js

2
ui/components/component-library/text/text.scss
View File

@ -28,7 +28,7 @@ $text-variants: (
.text {
.mm-text {
// Set default styles
color: var(--color-text-default);
font-family: var(----font-family-sans);

95
ui/components/component-library/text/text.test.js
View File

@ -66,27 +66,32 @@ describe('Text', () => {
});
it('should render the Text with proper variant class name', () => {
const { getByText } = render(
const { getByText, container } = render(
<>
<Text variant={TEXT.DISPLAY_MD}>display-md</Text>
<Text variant={TEXT.HEADING_LG}>heading-lg</Text>
<Text variant={TEXT.HEADING_MD}>heading-md</Text>
<Text variant={TEXT.HEADING_SM}>heading-sm</Text>
<Text variant={TEXT.BODY_LG}>body-lg-medium</Text>
<Text variant={TEXT.BODY_LG_MEDIUM}>body-lg-medium</Text>
<Text variant={TEXT.BODY_MD}>body-md</Text>
<Text variant={TEXT.BODY_MD_BOLD}>body-md-bold</Text>
<Text variant={TEXT.BODY_SM}>body-sm</Text>
<Text variant={TEXT.BODY_SM_BOLD}>body-sm-bold</Text>
<Text variant={TEXT.BODY_XS}>body-xs</Text>
</>,
);
expect(getByText('display-md')).toHaveClass('text--display-md');
expect(getByText('heading-lg')).toHaveClass('text--heading-lg');
expect(getByText('heading-md')).toHaveClass('text--heading-md');
expect(getByText('heading-sm')).toHaveClass('text--heading-sm');
expect(getByText('body-lg-medium')).toHaveClass('text--body-lg-medium');
expect(getByText('body-md')).toHaveClass('text--body-md');
expect(getByText('body-sm')).toHaveClass('text--body-sm');
expect(getByText('body-xs')).toHaveClass('text--body-xs');
expect(getByText('display-md')).toHaveClass('mm-text--display-md');
expect(getByText('heading-lg')).toHaveClass('mm-text--heading-lg');
expect(getByText('heading-md')).toHaveClass('mm-text--heading-md');
expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm');
expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium');
expect(getByText('body-md')).toHaveClass('mm-text--body-md');
expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold');
expect(getByText('body-sm')).toHaveClass('mm-text--body-sm');
expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
expect(container).toMatchSnapshot();
});
it('should render the Text with proper font weight class name', () => {
@ -97,9 +102,9 @@ describe('Text', () => {
<Text fontWeight={FONT_WEIGHT.NORMAL}>normal</Text>
</>,
);
expect(getByText('bold')).toHaveClass('text--font-weight-bold');
expect(getByText('medium')).toHaveClass('text--font-weight-medium');
expect(getByText('normal')).toHaveClass('text--font-weight-normal');
expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold');
expect(getByText('medium')).toHaveClass('mm-text--font-weight-medium');
expect(getByText('normal')).toHaveClass('mm-text--font-weight-normal');
});
it('should render the Text with proper text color class name', () => {
@ -120,33 +125,43 @@ describe('Text', () => {
<Text color={COLORS.INFO_INVERSE}>info-inverse</Text>
</>,
);
expect(getByText('text-default')).toHaveClass('text--color-text-default');
expect(getByText('text-alternative')).toHaveClass(
'text--color-text-alternative',
expect(getByText('text-default')).toHaveClass(
'mm-text--color-text-default',
);
expect(getByText('text-muted')).toHaveClass('text--color-text-muted');
expect(getByText('text-alternative')).toHaveClass(
'mm-text--color-text-alternative',
);
expect(getByText('text-muted')).toHaveClass('mm-text--color-text-muted');
expect(getByText('overlay-inverse')).toHaveClass(
'text--color-overlay-inverse',
'mm-text--color-overlay-inverse',
);
expect(getByText('primary-default')).toHaveClass(
'text--color-primary-default',
'mm-text--color-primary-default',
);
expect(getByText('primary-inverse')).toHaveClass(
'text--color-primary-inverse',
'mm-text--color-primary-inverse',
);
expect(getByText('error-default')).toHaveClass(
'mm-text--color-error-default',
);
expect(getByText('error-inverse')).toHaveClass(
'mm-text--color-error-inverse',
);
expect(getByText('error-default')).toHaveClass('text--color-error-default');
expect(getByText('error-inverse')).toHaveClass('text--color-error-inverse');
expect(getByText('success-default')).toHaveClass(
'text--color-success-default',
'mm-text--color-success-default',
);
expect(getByText('success-inverse')).toHaveClass(
'text--color-success-inverse',
'mm-text--color-success-inverse',
);
expect(getByText('warning-inverse')).toHaveClass(
'text--color-warning-inverse',
'mm-text--color-warning-inverse',
);
expect(getByText('info-default')).toHaveClass(
'mm-text--color-info-default',
);
expect(getByText('info-inverse')).toHaveClass(
'mm-text--color-info-inverse',
);
expect(getByText('info-default')).toHaveClass('text--color-info-default');
expect(getByText('info-inverse')).toHaveClass('text--color-info-inverse');
});
it('should render the Text with proper font style class name', () => {
@ -156,8 +171,8 @@ describe('Text', () => {
<Text fontStyle={FONT_STYLE.NORMAL}>normal</Text>
</>,
);
expect(getByText('italic')).toHaveClass('text--font-style-italic');
expect(getByText('normal')).toHaveClass('text--font-style-normal');
expect(getByText('italic')).toHaveClass('mm-text--font-style-italic');
expect(getByText('normal')).toHaveClass('mm-text--font-style-normal');
});
it('should render the Text with proper text align class name', () => {
@ -171,11 +186,11 @@ describe('Text', () => {
</>,
);
expect(getByText('left')).toHaveClass('text--text-align-left');
expect(getByText('center')).toHaveClass('text--text-align-center');
expect(getByText('right')).toHaveClass('text--text-align-right');
expect(getByText('justify')).toHaveClass('text--text-align-justify');
expect(getByText('end')).toHaveClass('text--text-align-end');
expect(getByText('left')).toHaveClass('mm-text--text-align-left');
expect(getByText('center')).toHaveClass('mm-text--text-align-center');
expect(getByText('right')).toHaveClass('mm-text--text-align-right');
expect(getByText('justify')).toHaveClass('mm-text--text-align-justify');
expect(getByText('end')).toHaveClass('mm-text--text-align-end');
});
it('should render the Text with proper overflow wrap class name', () => {
@ -186,9 +201,9 @@ describe('Text', () => {
</>,
);
expect(getByText('break-word')).toHaveClass(
'text--overflow-wrap-break-word',
'mm-text--overflow-wrap-break-word',
);
expect(getByText('normal')).toHaveClass('text--overflow-wrap-normal');
expect(getByText('normal')).toHaveClass('mm-text--overflow-wrap-normal');
});
it('should render the Text with proper ellipsis class name', () => {
@ -197,7 +212,7 @@ describe('Text', () => {
<Text ellipsis>ellipsis</Text>
</>,
);
expect(getByText('ellipsis')).toHaveClass('text--ellipsis');
expect(getByText('ellipsis')).toHaveClass('mm-text--ellipsis');
});
it('should render the Text with proper text transform class name', () => {
@ -209,13 +224,13 @@ describe('Text', () => {
</>,
);
expect(getByText('uppercase')).toHaveClass(
'text--text-transform-uppercase',
'mm-text--text-transform-uppercase',
);
expect(getByText('lowercase')).toHaveClass(
'text--text-transform-lowercase',
'mm-text--text-transform-lowercase',
);
expect(getByText('capitalize')).toHaveClass(
'text--text-transform-capitalize',
'mm-text--text-transform-capitalize',
);
});
it('should accept a ref prop that is passed down to the html element', () => {

4
ui/helpers/constants/design-system.js
View File

@ -157,9 +157,11 @@ export const TEXT = {
HEADING_LG: 'heading-lg',
HEADING_MD: 'heading-md',
HEADING_SM: 'heading-sm',
BODY_LG: 'body-lg-medium',
BODY_LG_MEDIUM: 'body-lg-medium',
BODY_MD: 'body-md',
BODY_MD_BOLD: 'body-md-bold',
BODY_SM: 'body-sm',
BODY_SM_BOLD: 'body-sm-bold',
BODY_XS: 'body-xs',
INHERIT: 'inherit',
};