Mixins
Typography mixins provide reusable styles for applying consistent and scalable text formatting throughout the design system. These mixins leverage the typography base tokens to ensure alignment with the design principles while offering flexibility for various use cases.
The typography mixins are organized into four groups:
- Head: Used for headings, providing clear hierarchy and emphasis for structured content.
- Paragraph: Designed for body text and smaller content blocks, focusing on readability and simplicity.
- Code: Specifically created for styling code snippets, ensuring clarity and appropriate spacing for technical content.
These mixins simplify the application of text styles while maintaining consistency across all components and layouts.
Mixin tokens
| Sample | Mixin | Base token values |
|---|---|---|
Head L | cds-head-l | 2.5em / Bold |
Head M | cds-head-m | 2em / Bold |
Head S | cds-head-s | 1.5em / Bold |
Head XS | cds-head-xs | 1.25em / Bold |
Paragraph L | cds-paragraph-l | 1.25em / Regular |
Paragraph M | cds-paragraph-m | 1em / Regular |
Paragraph S | cds-paragraph-s | 0.875em / Regular |
Paragraph XS | cds-paragraph-xs | 0.75em / Regular |
Paragraph L Bold | cds-paragraph-l(bold) | 1.25em / Bold |
Paragraph M Bold | cds-paragraph-m(bold) | 1em / Bold |
Paragraph S Bold | cds-paragraph-s(bold) | 0.875em / Bold |
Paragraph XS Bold | cds-paragraph-xs(bold) | 0.75em / Bold |