Typography

A collection of foundational font design tokens combined into a preset to define reusable typography styles

React

Is new design vision part implemented using new tokens?

Update required

Introduction

Use this component for consistent rendering of texts, using the text presets available.

When to use

Use Typography component in every case you need to render text, from paragraphs to titles.

When not to use

In case the needed preset is not available, please discuss it with Design team and contribute if needed.

Usage

import { Typography } from '@optimus-web/core';

<Typography textStyle="bodySmall" as="p">
  Some example dummy content
</Typography>

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

Name	Description	Type	Default
textStyle	Defines which set of CSS rules will apply to the text	TextStyle	-
as	Defines which element will be render ultimately in the DOM	React.ElementType	-
children	Gives the button a specific data test id	React.ReactNode	-
align?	Aligns the content	'left' \| 'right' \| 'center'	undefined
noWrap?	Prevents text from wrapping	boolean	undefined
overflowWrap?	Controls the overflow-wrap CSS property used for preventing text from overflowing.	'normal' \| 'break-word'	undefined
wordBreak?	Controls the word-break CSS property used for preventing text from overflowing.	'break-all' \| 'break-word' \| 'normal'	undefined
variant?	Defines the color	TypographyVariant	primary
ellipsis?	Enables the text-overflow CSS property.	boolean	undefined
maxLines?	maxLines for the ellispis property	number	undefined

Existing components

Existing typography components are now using this one underneath, configured with the proper preset in each case, so they are up to date, valid and can be used.

Component	Text style
MajorHighlight	highlightMedium
ModerateHighlight	highlightSmall
MinorHighlight	bodyLargeStrong
Label	bodyMediumStrong
SmallLabel	bodySmallStrong
Body	size === 'small' ? 'bodyMedium' : 'bodyLarge'
PageTitle	titleLargeStrong
SectionTitle	titleMediumStrong
SubsectionTitle	titleSmallStrong

Utilities

getTextTokenPreset

This utility allows the use of any textStyle without needing to rely on one of the predefined components mentioned above.

Primarily, it is used within the Design System for styling components, but it can also be applied externally to style native HTML elements or React components in situations where the Design System does not provide a suitable solution.

// Usage

export const MenuCardTitle = styled.div`
    ${getTextTokenPreset('bodyMediumStrong')};

    /***
    returns a string
    `
        font-size: 14;
        font-family: Inter;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0;
    `
    ***/
`;

getTextTokenPresetObject

This utility serves the same purpose as getTextTokenPreset but returning a JS object with the CSS properties:

// Usage

const getAxisStyles = (theme: DefaultTheme) => ({
    fill: getToken('textStaticTertiary')({ theme }),
    ...getTextTokenPresetObject('bodySmall')({ theme }),
    /***
    returns a JS object
    {
        fontSize: 12,
        fontFamily: 'Inter',
        fontWeight: 400,
        lineHeight: 1.5,
        letterSpacing: 0,
    }
    ***/
});