@highlight-ui/typography
Advanced tools
Readme
Typography component which manages the usage of typographic design tokens through props.
fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, textTransform, and textDecoration
2xlarge, xlarge, large, medium, small and xsmall which are identical with the Figma assets.large, base, small, strong-large, strong-base and strong-small which are identical with the Figma assets.Using npm:
npm install @highlight-ui/typography
Using yarn:
yarn add @highlight-ui/typography
Using pnpm:
pnpm add @highlight-ui/typography
In your (S)CSS file:
@import url('@highlight-ui/typography');
Once the package is installed, you can import the library:
import { Typography } from '@highlight-ui/typography';
import React from 'react';
import { Typography } from '@highlight-ui/typography';
export default function Example() {
return <Typography>Text</Typography>;
}
import React from 'react';
import { Heading } from '@highlight-ui/typography';
export default function Example() {
return <Heading variant="xlarge">some large heading</Heading>;
}
import React from 'react';
import { Body } from '@highlight-ui/typography';
export default function Example() {
return <Body variant="large">some large text</Body>;
}
By default, the Typography component applies the body-base typography token. To override this default style, the token prop can be used to change the applied typographic style.
import React from 'react';
import { Typography } from '@highlight-ui/typography';
export default function Example() {
return <Typography token="heading-medium">Text</Typography>;
}
By default, the Typography component renders a p element. To change the HTML tag that will be used for rendering, the component prop can be used to specify any other HTML tag.
Note: the component prop is of type string, please use valid HTML tags when using this prop. For example: h1, h2, h3, h4, h5, h6, p, or span.
import React from 'react';
import { Typography } from '@highlight-ui/typography';
export default function Example() {
return <Typography component="h1">Text</Typography>;
}
Individual font properties can be overriden through props such as fontFamily. Other properties that can be overriden are: fontSize, fontWeight, letterSpacing, lineHeight, textTransform, and textDecoration. For more details on these props, check out the component's props table.
import React from 'react';
import { Typography } from '@highlight-ui/typography';
export default function Example() {
return <Typography fontFamily="mono">Text</Typography>;
}
Use the className prop to customize the component through CSS classes.
import React from 'react';
import { Typography } from '@highlight-ui/typography';
import styles from './customStyles.scss';
export default function Example() {
return <Typography className={styles.wrappedText}>Text</Typography>;
}
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
className | string | no | undefined | Allows providing a custom class name |
component | string | no | 'p' | Specifies an HTML tag for rendering the element |
token | TypographyToken | no | 'body-base' | Specifies typography token |
color | TypographyColorToken | no | undefined | Specifies a text color |
fontFamily | TypographyFontFamilyToken | no | undefined | Specifies font family |
fontSize | TypographyFontSizeToken | no | undefined | Specifies font size |
fontWeight | TypographyFontWeightToken | no | undefined | Specifies font weight |
letterSpacing | TypographyLetterSpacingToken | no | undefined | Specifies letter spacing |
lineHeight | TypographyLineHeightToken | no | undefined | Specifies line height |
textTransform | TypographyTextCaseToken | no | undefined | Specifies text case |
textDecoration | TypographyTextDecorationToken | no | undefined | Specifies text decoration |
Also accepts props from the React.HTMLAttributes<HTMLElement> type.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color | TypographyColorToken | no | text-default | Specifies a text color |
as | h1,h2, h3, h4, h5, h6 | no | h1 | Specifies an HTML tag for rendering the element |
variant | 2xlarge, xlarge, large, medium, small, xsmall | no | small | Specifies a variant for rendering the element |
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color | TypographyColorToken | no | text-default | Specifies a text color |
as | p,span | no | span | Specifies an HTML tag for rendering the element |
variant | large, base, small, strong-large, strong-base, strong-small | no | base | Specifies a variant for rendering the element |
| Type | Values | Description |
|---|---|---|
TypographyToken | Typography token names | Used for the token prop |
TypographyColorToken | "Text" and "Text On" color token names | Used for the color prop |
TypographyFontFamilyToken | 'default' | 'mono' | Used for the fontFamily prop |
TypographyFontSizeToken | 'small' | 'base' | 'large' | 'xsmall' | 'xlarge' | '2xl' | '3xl' | Used for the fontSize prop |
TypographyFontWeightToken | 'bold' | 'regular' | 'semi-bold' | Used for the fontWeight prop |
TypographyLetterSpacingToken | 'base' | Used for the letterSpacing prop |
TypographyLineHeightToken | 'base' | 'large' | 'xlarge' | Used for the lineHeight prop |
TypographyTextCaseToken | 'none' | 'uppercase' | Used for the textTransform prop |
TypographyTextDecorationToken | 'none' | 'underline' | Used for the textDecoration prop |
import React from 'react';
import { render } from '@testing-library/react';
import { Typography } from '@highlight-ui/typography';
describe('TestExample', () => {
it('test description', () => {
render(<Typography>Text</Typography>);
// write your expect here
});
});
The Typography component is being used in all of Highlight UI to display any kind of text element.
If you're interested in contributing, please visit our contribution page.
FAQs
This is the Typography package used by UI-components in Personio
The npm package @highlight-ui/typography receives a total of 2,184 weekly downloads. As such, @highlight-ui/typography popularity was classified as popular.
We found that @highlight-ui/typography demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.