diff --git a/docs/guides/typography-system.md b/docs/guides/typography-system.md new file mode 100644 index 0000000000..4360651674 --- /dev/null +++ b/docs/guides/typography-system.md @@ -0,0 +1,56 @@ +--- +title: Typography +category: Guides +order: 8 +--- + +# Typography + +InstUI provides various typography tokens on theme and component level as well. + +## Typography components + +Your every text-based need should be covered by one of our two typography components, namely `` and ``. +These components have a `variant` prop with a handful of semantic values to choose from. These values describe multiple aspects of the text, such as `font-weight`, `font-size`, `line-height` and for `` the DOM element that should be rendered, (i.e.:`

`, `

`, `

`, `

`, `

`). + +While you can set all these properties separately as well, our strong recommendation is to use the variant with semantic values and only deviate from it in cases absolutely necessary. + +## + +Here is the list of semantic variant values and what they do in `` + +This is always rendered as `` + +The values (e.g.:`weightRegular`) are from the currently used theme's typography sections, for example: +[Canvas Theme](https://instructure.design/#canvas) + +| variant | fontStyle | weight | size | lineHeight | +| ------------------ | --------- | --------------- | ------------------ | ------------- | +| descriptionPage | normal | weightRegular | descriptionPage | lineHeight150 | +| descriptionSection | normal | weightRegular | descriptionSection | lineHeight150 | +| content | normal | weightRegular | content | lineHeight150 | +| contentImportant | normal | weightImportant | content | lineHeight150 | +| contentQuote | normal | weightRegular | content | lineHeight150 | +| contentSmall | normal | weightRegular | contentSmall | lineHeight150 | +| legend | normal | weightRegular | legend | lineHeight150 | + +## + +Here is the list of semantic variant values and how are they rendered in `` + +| variant | dom element | +| ---------------- | ----------- | +| titlePageDesktop | h1 | +| titlePageMobile | h1 | +| titleSection | h2 | +| titleCardSection | h2 | +| titleModule | h3 | +| titleCardLarge | h4 | +| titleCardRegular | h4 | +| titleCardMini | h4 | +| label | h5 | +| labelInline | h5 | + +## Legacy values + +For compatibility reasons we still provide the legacy typography tokens (xxLarge, medium, etc.) so updating InstUI is easier but these tokens shouldn't be used when creating new screens. diff --git a/packages/shared-types/src/BaseTheme.ts b/packages/shared-types/src/BaseTheme.ts index 33a904489e..26784a7e4e 100644 --- a/packages/shared-types/src/BaseTheme.ts +++ b/packages/shared-types/src/BaseTheme.ts @@ -111,6 +111,26 @@ type Typography = { letterSpacingNormal: number | 0 letterSpacingCondensed: string | 0 letterSpacingExpanded: string | 0 + + titlePageDesktop: string + titlePageMobile: string + titleSection: string + titleModule: string + titleCardLarge: string + titleCardRegular: string + titleCardMini: string + descriptionPage: string + descriptionSection: string + label: string + content: string + contentSmall: string + legend: string + + lineHeight100: number + lineHeight125: number + lineHeight150: number + weightRegular: number + weightImportant: number } type Size = { diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 6c81308bba..abc6fba108 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -603,7 +603,7 @@ export type GridTheme = { spacingLarge: Spacing['large'] } & Media -export type HeadingTheme = { +export type HeadingTheme = Typography & { lineHeight: Typography['lineHeightCondensed'] h1FontSize: Typography['fontSizeXXLarge'] h1FontWeight: Typography['fontWeightBold'] diff --git a/packages/ui-heading/src/Heading/README.md b/packages/ui-heading/src/Heading/README.md index f865e3ffc6..a18a7523fb 100644 --- a/packages/ui-heading/src/Heading/README.md +++ b/packages/ui-heading/src/Heading/README.md @@ -4,6 +4,31 @@ describes: Heading Heading is a component for creating typographic headings. +## Variant + +Variant takes care of - almost - all use-cases when it comes hedings on pages. Their name reflects the places they meant to be used. It sets the `level` prop and takes care of the style of the heading +We recommend using `variants` instead of the level (and `as`) props. + +NOTE: when `variant` is set, `level` and `as` props are ignored + +```js +--- +type: example +--- +
+ titlePageDesktop
+ titlePageMobile
+ titleSection
+ titleCardSection
+ titleModule
+ titleCardLarge
+ titleCardRegular
+ titleCardMini
+ label
+ labelInline
+
+``` + ```js --- type: example @@ -24,11 +49,7 @@ type: example ---
Heading level One - Heading level Two - Heading level Three - Heading level Four - Heading level Five - Heading level reset as a Two +
``` diff --git a/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts b/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts index 5b11f61b38..a028b10cc4 100644 --- a/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts +++ b/packages/ui-heading/src/Heading/__examples__/Heading.examples.ts @@ -26,7 +26,7 @@ import type { StoryConfig } from '@instructure/ui-test-utils' import type { HeadingProps } from '../props' export default { - sectionProp: 'level', + sectionProp: 'variant', propValues: { color: [ 'primary', @@ -50,5 +50,12 @@ export default { ? 'primary-inverse' : 'primary' } + }, + filter: (props) => { + return ( + (props.color !== 'primary' || + props.level !== 'h1' || + props.as !== 'h1') + ) } } as StoryConfig diff --git a/packages/ui-heading/src/Heading/index.tsx b/packages/ui-heading/src/Heading/index.tsx index e7cb967e34..e4ceaa5eba 100644 --- a/packages/ui-heading/src/Heading/index.tsx +++ b/packages/ui-heading/src/Heading/index.tsx @@ -36,6 +36,22 @@ import generateComponentTheme from './theme' import { propTypes, allowedProps } from './props' import type { HeadingProps } from './props' +const variantLevels: Record< + NonNullable, + 'h1' | 'h2' | 'h3' | 'h4' | 'h5' +> = { + titlePageDesktop: 'h1', + titlePageMobile: 'h1', + titleSection: 'h2', + titleCardSection: 'h2', + titleModule: 'h3', + titleCardLarge: 'h4', + titleCardRegular: 'h4', + titleCardMini: 'h4', + label: 'h5', + labelInline: 'h5' +} + /** --- category: components @@ -67,12 +83,26 @@ class Heading extends Component { } } + checkProps() { + const { variant, level, as } = this.props + if (variant) { + if (level) { + console.warn("[Heading]: Don't use 'level' with 'variant' ") + } + if (as) { + console.warn("[Heading]: Don't use 'as' with 'variant' ") + } + } + } + componentDidMount() { this.props.makeStyles?.() + this.checkProps() } componentDidUpdate() { this.props.makeStyles?.() + this.checkProps() } render() { @@ -84,10 +114,16 @@ class Heading extends Component { margin, elementRef, makeStyles, + variant, ...props } = this.props - const ElementType = getElementType(Heading, this.props, () => { + const propsForGetElementType = variant ? {} : this.props + + const ElementType = getElementType(Heading, propsForGetElementType, () => { + if (variant) { + return variantLevels[variant] + } if (level === 'reset') { return 'span' } else { diff --git a/packages/ui-heading/src/Heading/props.ts b/packages/ui-heading/src/Heading/props.ts index 8a3cf5e304..6a5d16d795 100644 --- a/packages/ui-heading/src/Heading/props.ts +++ b/packages/ui-heading/src/Heading/props.ts @@ -78,6 +78,21 @@ type HeadingOwnProps = { * Provides a ref to the underlying HTML element */ elementRef?: (element: Element | null) => void + /** + * Sets style and level at once. The as property will be the same as the level. + * NOTE: this is the recommended way of setting the appearance, instead of level + */ + variant?: + | 'titlePageDesktop' + | 'titlePageMobile' + | 'titleSection' + | 'titleCardSection' + | 'titleModule' + | 'titleCardLarge' + | 'titleCardRegular' + | 'titleCardMini' + | 'label' + | 'labelInline' } type PropKeys = keyof HeadingOwnProps @@ -103,7 +118,19 @@ const propTypes: PropValidators = { level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']), as: PropTypes.elementType, margin: ThemeablePropTypes.spacing, - elementRef: PropTypes.func + elementRef: PropTypes.func, + variant: PropTypes.oneOf([ + 'titlePageDesktop', + 'titlePageMobile', + 'titleSection', + 'titleCardSection', + 'titleModule', + 'titleCardLarge', + 'titleCardRegular', + 'titleCardMini', + 'label', + 'labelInline' + ]) } const allowedProps: AllowedPropKeys = [ @@ -113,7 +140,8 @@ const allowedProps: AllowedPropKeys = [ 'level', 'as', 'margin', - 'elementRef' + 'elementRef', + 'variant' ] export type { HeadingProps, HeadingStyle } diff --git a/packages/ui-heading/src/Heading/styles.ts b/packages/ui-heading/src/Heading/styles.ts index a588b53984..5bd60262b4 100644 --- a/packages/ui-heading/src/Heading/styles.ts +++ b/packages/ui-heading/src/Heading/styles.ts @@ -39,7 +39,70 @@ const generateStyle = ( componentTheme: HeadingTheme, props: HeadingProps ): HeadingStyle => { - const { level, color, border } = props + const { level, color, border, variant } = props + + const variants: Record, object> = { + titlePageDesktop: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titlePageDesktop, + lineHeight: componentTheme.lineHeight125 + }, + titlePageMobile: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titlePageMobile, + lineHeight: componentTheme.lineHeight125 + }, + titleSection: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleSection, + lineHeight: componentTheme.lineHeight125 + }, + titleCardSection: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleSection, + lineHeight: componentTheme.lineHeight125 + }, + titleModule: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleModule, + lineHeight: componentTheme.lineHeight125 + }, + titleCardLarge: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleCardLarge, + lineHeight: componentTheme.lineHeight125 + }, + titleCardRegular: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleCardRegular, + lineHeight: componentTheme.lineHeight125 + }, + titleCardMini: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.titleCardMini, + lineHeight: componentTheme.lineHeight125 + }, + label: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.label, + lineHeight: componentTheme.lineHeight125 + }, + labelInline: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.label, + lineHeight: componentTheme.lineHeight150 + } + } const levelStyles = { h1: { @@ -125,7 +188,7 @@ const generateStyle = ( '&:is(input)[type]': inputStyles, '&:-webkit-any(input)[type]': inputStyles, - ...levelStyles[level!], + ...(variant ? variants[variant] : levelStyles[level!]), ...colorStyles[color!], ...borderStyles[border!] } diff --git a/packages/ui-heading/src/Heading/theme.ts b/packages/ui-heading/src/Heading/theme.ts index 90b81e2f50..69d192f202 100644 --- a/packages/ui-heading/src/Heading/theme.ts +++ b/packages/ui-heading/src/Heading/theme.ts @@ -50,6 +50,8 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => { } const componentVariables: HeadingTheme = { + ...typography, + lineHeight: typography?.lineHeightCondensed, h1FontSize: typography?.fontSizeXXLarge, diff --git a/packages/ui-text/src/Text/README.md b/packages/ui-text/src/Text/README.md index 5c42e43065..9e6ea1d337 100644 --- a/packages/ui-text/src/Text/README.md +++ b/packages/ui-text/src/Text/README.md @@ -4,6 +4,28 @@ describes: Text A component for styling textual content +## Variant + +Variant takes care of - almost - all use-cases when it comes to texts on pages. Their name reflects the places they meant to be used. It sets `size`, `weight`, `fontStyle` and `lineHeight` +We recommend using `variants` instead of the aforementioned props. + +NOTE: when `variant` is set, `size`, `weight`, `fontStyle` and `lineHeight` props are ignored + +```js +--- +type: example +--- +
+ descriptionPage
+ descriptionSection
+ content
+ contentImportant
+ contentQuote
+ contentSmall
+ legend
+
+``` + ### Font sizes ```js @@ -11,12 +33,11 @@ A component for styling textual content type: example ---
- I'm extra small
- I'm small
- I'm medium
- I'm large
- I'm extra large
- I'm extra extra large + descriptionPage
+ descriptionSection
+ content
+ contentSmall
+ legend
``` @@ -27,9 +48,8 @@ type: example type: example ---
- I'm light text
- I'm normal text
- I'm bold text + weightRegular
+ weightImportant
``` @@ -52,16 +72,14 @@ type: example type: example ---
- +

+

{lorem.paragraph()}

 - +

{lorem.paragraph()}

 - -

{lorem.paragraph()}

- - +

{lorem.paragraph()}
@@ -158,3 +176,7 @@ type: example Thisis sometext. ``` + +### DEPRECATED legacy values + +Multiple values from `size`, `weight` and `lineHeight` are deprecated, but still supported for backward compatibility reasons. Please only use the above listed, semantic values. diff --git a/packages/ui-text/src/Text/__examples__/Text.examples.ts b/packages/ui-text/src/Text/__examples__/Text.examples.ts index 7e121db106..774f0974ee 100644 --- a/packages/ui-text/src/Text/__examples__/Text.examples.ts +++ b/packages/ui-text/src/Text/__examples__/Text.examples.ts @@ -26,14 +26,14 @@ import type { StoryConfig } from '@instructure/ui-test-utils' import type { TextProps } from '../props' export default { - sectionProp: 'weight', + sectionProp: 'variant', maxExamplesPerPage: 50, maxExamples: 1000, getComponentProps: (props) => { return { children: props.size && - ['x-small', 'small', 'medium', 'large'].includes(props.size) + ['x-small', 'small', 'medium', 'large'].includes(props.size) ? 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ullamco' : 'Lorem ipsum dolor sit amet, consectetur' } @@ -46,25 +46,19 @@ export default { maxWidth: '25rem' } }, + excludeProps: [ + "lineHeight", + "size", + "weight", + "fontStyle" + ], filter: (props) => { return ( - // Only generate a 1 variation for non-'primary' color - (props.color !== 'primary' && - (props.fontStyle !== 'normal' || - props.letterSpacing !== 'normal' || - props.lineHeight !== 'default' || - props.size !== 'medium' || - props.transform !== 'none' || - props.weight !== 'normal' || - props.wrap !== 'normal')) || - // Only generate a 1 variation for non-'medium' size - (props.size !== 'medium' && - (props.fontStyle !== 'normal' || - props.letterSpacing !== 'normal' || - props.lineHeight !== 'default' || - props.transform !== 'none' || - props.weight !== 'normal' || - props.wrap !== 'normal')) - ) + (props.color !== 'primary' || + props.letterSpacing !== 'normal' || + props.lineHeight !== 'default' || + props.transform !== 'none' || + props.wrap !== 'normal' + )) } } as StoryConfig diff --git a/packages/ui-text/src/Text/index.tsx b/packages/ui-text/src/Text/index.tsx index 8ea5bb08c3..c460a6ced1 100644 --- a/packages/ui-text/src/Text/index.tsx +++ b/packages/ui-text/src/Text/index.tsx @@ -53,12 +53,32 @@ class Text extends Component { children: null } as const + checkProps() { + const { variant, size, lineHeight, weight, fontStyle } = this.props + if (variant) { + if (size) { + console.warn("[Text]: Don't use 'size' with 'variant' ") + } + if (lineHeight) { + console.warn("[Text]: Don't use 'lineHeight' with 'variant' ") + } + if (weight) { + console.warn("[Text]: Don't use 'weight' with 'variant' ") + } + if (fontStyle) { + console.warn("[Text]: Don't use 'fontStyle' with 'variant' ") + } + } + } + componentDidMount() { this.props.makeStyles?.() + this.checkProps() } componentDidUpdate() { this.props.makeStyles?.() + this.checkProps() } render() { diff --git a/packages/ui-text/src/Text/props.ts b/packages/ui-text/src/Text/props.ts index ae120628a8..1e15de34cc 100644 --- a/packages/ui-text/src/Text/props.ts +++ b/packages/ui-text/src/Text/props.ts @@ -57,10 +57,41 @@ type TextOwnProps = { elementRef?: (element: Element | null) => void fontStyle?: 'italic' | 'normal' letterSpacing?: 'normal' | 'condensed' | 'expanded' - lineHeight?: 'default' | 'fit' | 'condensed' | 'double' - size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' + lineHeight?: + | 'default' + | 'fit' + | 'condensed' + | 'double' + | 'lineHeight100' + | 'lineHeight125' + | 'lineHeight150' + size?: + | 'x-small' + | 'small' + | 'medium' + | 'large' + | 'x-large' + | 'xx-large' + | 'descriptionPage' + | 'descriptionSection' + | 'content' + | 'contentSmall' + | 'legend' transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' - weight?: 'normal' | 'light' | 'bold' + /** + * Sets multiple props at once. (size, fontStyle, lineHeight, weight) + * If set, these props are not allowed. + * NOTE: this is the recommended way of setting these values + */ + variant?: + | 'descriptionPage' + | 'descriptionSection' + | 'content' + | 'contentImportant' + | 'contentQuote' + | 'contentSmall' + | 'legend' + weight?: 'normal' | 'light' | 'bold' | 'weightRegular' | 'weightImportant' wrap?: 'normal' | 'break-word' children?: React.ReactNode } @@ -91,17 +122,45 @@ const propTypes: PropValidators = { elementRef: PropTypes.func, fontStyle: PropTypes.oneOf(['italic', 'normal']), letterSpacing: PropTypes.oneOf(['normal', 'condensed', 'expanded']), - lineHeight: PropTypes.oneOf(['default', 'fit', 'condensed', 'double']), + lineHeight: PropTypes.oneOf([ + 'default', + 'fit', + 'condensed', + 'double', + 'lineHeight100', + 'lineHeight125', + 'lineHeight150' + ]), size: PropTypes.oneOf([ 'x-small', 'small', 'medium', 'large', 'x-large', - 'xx-large' + 'xx-large', + 'descriptionPage', + 'descriptionSection', + 'content', + 'contentSmall', + 'legend' ]), transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']), - weight: PropTypes.oneOf(['normal', 'light', 'bold']), + variant: PropTypes.oneOf([ + 'descriptionPage', + 'descriptionSection', + 'content', + 'contentImportant', + 'contentQuote', + 'contentSmall', + 'legend' + ]), + weight: PropTypes.oneOf([ + 'normal', + 'light', + 'bold', + 'weightRegular', + 'weightImportant' + ]), wrap: PropTypes.oneOf(['normal', 'break-word']) } @@ -115,6 +174,7 @@ const allowedProps: AllowedPropKeys = [ 'lineHeight', 'size', 'transform', + 'variant', 'weight', 'wrap' ] diff --git a/packages/ui-text/src/Text/styles.ts b/packages/ui-text/src/Text/styles.ts index c4b2b024b0..117c57435c 100644 --- a/packages/ui-text/src/Text/styles.ts +++ b/packages/ui-text/src/Text/styles.ts @@ -47,9 +47,55 @@ const generateStyle = ( transform, lineHeight, letterSpacing, - color + color, + variant } = props + const variants: Record, object> = { + descriptionPage: { + fontStyle: 'normal', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.descriptionPage, + lineHeight: componentTheme.lineHeight150 + }, + descriptionSection: { + fontStyle: 'normal', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.descriptionSection, + lineHeight: componentTheme.lineHeight150 + }, + content: { + fontStyle: 'normal', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.content, + lineHeight: componentTheme.lineHeight150 + }, + contentImportant: { + fontStyle: 'normal', + fontWeight: componentTheme.weightImportant, + fontSize: componentTheme.content, + lineHeight: componentTheme.lineHeight150 + }, + contentQuote: { + fontStyle: 'italic', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.content, + lineHeight: componentTheme.lineHeight150 + }, + contentSmall: { + fontStyle: 'normal', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.contentSmall, + lineHeight: componentTheme.lineHeight150 + }, + legend: { + fontStyle: 'normal', + fontWeight: componentTheme.weightRegular, + fontSize: componentTheme.legend, + lineHeight: componentTheme.lineHeight150 + } + } + const colorVariants = { primary: { color: componentTheme.primaryColor }, secondary: { color: componentTheme.secondaryColor }, @@ -70,7 +116,9 @@ const generateStyle = ( const weightStyle = { normal: { fontWeight: componentTheme.fontWeightNormal }, light: { fontWeight: componentTheme.fontWeightLight }, - bold: { fontWeight: componentTheme.fontWeightBold } + bold: { fontWeight: componentTheme.fontWeightBold }, + weightRegular: { fontWeight: componentTheme.weightRegular }, + weightImportant: { fontWeight: componentTheme.weightImportant } } const fontSizeVariants = { @@ -79,14 +127,22 @@ const generateStyle = ( medium: componentTheme.fontSizeMedium, large: componentTheme.fontSizeLarge, 'x-large': componentTheme.fontSizeXLarge, - 'xx-large': componentTheme.fontSizeXXLarge + 'xx-large': componentTheme.fontSizeXXLarge, + descriptionPage: componentTheme.descriptionPage, + descriptionSection: componentTheme.descriptionSection, + content: componentTheme.content, + contentSmall: componentTheme.contentSmall, + legend: componentTheme.legend } const lineHeightVariants = { default: { lineHeight: componentTheme.lineHeight }, fit: { lineHeight: componentTheme.lineHeightFit }, condensed: { lineHeight: componentTheme.lineHeightCondensed }, - double: { lineHeight: componentTheme.lineHeightDouble } + double: { lineHeight: componentTheme.lineHeightDouble }, + lineHeight100: { lineHeight: componentTheme.lineHeight100 }, + lineHeight125: { lineHeight: componentTheme.lineHeight125 }, + lineHeight150: { lineHeight: componentTheme.lineHeight150 } } const letterSpacingVariants = { @@ -95,18 +151,27 @@ const generateStyle = ( expanded: componentTheme.letterSpacingExpanded } + const calcTextStyles = () => { + if (variant) { + return variants[variant] + } + return { + ...(weight ? weightStyle[weight] : {}), + ...(fontStyle ? { fontStyle: fontStyle } : {}), + fontSize: fontSizeVariants[size!], + ...(lineHeight ? lineHeightVariants[lineHeight] : {}) + } + } + const baseStyles = { '&:focus': { outline: 'none' }, ...(color ? colorVariants[color] : {}), ...(wrap === 'break-word' ? wrapStyle : {}), - ...(weight ? weightStyle[weight] : {}), - ...(fontStyle ? { fontStyle: fontStyle } : {}), - fontSize: fontSizeVariants[size!], - ...(lineHeight ? lineHeightVariants[lineHeight] : {}), letterSpacing: letterSpacingVariants[letterSpacing!], - ...(transform ? { textTransform: transform } : {}) + ...(transform ? { textTransform: transform } : {}), + ...calcTextStyles() } const inputStyles = { diff --git a/packages/ui-themes/src/sharedThemeTokens/typography.ts b/packages/ui-themes/src/sharedThemeTokens/typography.ts index c0562d4164..a0f7d8317e 100644 --- a/packages/ui-themes/src/sharedThemeTokens/typography.ts +++ b/packages/ui-themes/src/sharedThemeTokens/typography.ts @@ -28,6 +28,12 @@ const typography: Typography = Object.freeze({ fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif', fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace', + letterSpacingNormal: 0, + letterSpacingCondensed: '-0.0625rem', + letterSpacingExpanded: '0.0625rem', + + // deprecated values + fontSizeXSmall: '0.75rem', // 12px fontSizeSmall: '0.875rem', // 14px fontSizeMedium: '1rem', // 16px @@ -44,9 +50,26 @@ const typography: Typography = Object.freeze({ lineHeightCondensed: 1.25, lineHeightDouble: 2, - letterSpacingNormal: 0, - letterSpacingCondensed: '-0.0625rem', - letterSpacingExpanded: '0.0625rem' + // new values + titlePageDesktop: '2.25rem', + titlePageMobile: '2rem', + titleSection: '1.75rem', + titleModule: '1.5rem', + titleCardLarge: '1.5rem', + titleCardRegular: '1.25rem', + titleCardMini: '1rem', + descriptionPage: '1.25rem', + descriptionSection: '1rem', + label: '1rem', + content: '1rem', + contentSmall: '0.875rem', + legend: '0.75rem', + + lineHeight100: 1, + lineHeight125: 1.25, + lineHeight150: 1.5, + weightRegular: 400, + weightImportant: 700 }) export default typography