CSS: text
.instui-text — Body-text typography with size, weight, colour, and style modifiers.
Source: text.css
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/text.css";Examples
html
<span class="instui-text -size-xs">x-small text</span>x-small text
Modifiers
| Modifier | Description |
|---|---|
.-color-ai | AI-accent text colour. |
.-color-brand | Brand text colour. |
.-color-danger | Danger text colour. |
.-color-primary-inverse | On-dark (primary inverse) text colour. |
.-color-secondary | Secondary (muted) text colour. |
.-color-success | Success text colour. |
.-color-warning | Warning text colour. |
.-size-large | Large. Long-form alias of -size-lg. |
.-size-lg | Large. |
.-size-sm | Small. |
.-size-small | Small. Long-form alias of -size-sm. |
.-size-x-large | Extra large. Long-form alias of -size-xl. |
.-size-x-small | Extra small. Long-form alias of -size-xs. |
.-size-xl | Extra large. |
.-size-xs | Extra small. |
.-style-italic | Italic. |
.-transform-capitalize | Capitalise each word. |
.-transform-lowercase | Lowercase the text. |
.-transform-uppercase | Uppercase the text. |
.-variant-content-small | Small-content type preset. |
.-variant-description-page | Page-description type preset. |
.-variant-description-section | Section-description type preset. |
.-variant-legend | Legend type preset. |
.-weight-bold | Bold weight. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-component-text-ai-background-color | <color> | light-dark(#F3E5F7, #6D3984)LightDark |
--instui-component-text-ai-color | <color> | light-dark(#8A49A7, #F3E5F7)LightDark |
--instui-component-text-base-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-text-content-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-text-content-line-height | <percentage> | 150% |
--instui-component-text-content-small-font-size | <length> | 0.875rem |
--instui-component-text-content-small-line-height | <percentage> | 150% |
--instui-component-text-description-page-font-size | <length> | 1.25rem |
--instui-component-text-description-page-line-height | <percentage> | 150% |
--instui-component-text-description-section-font-size | <length> | 1rem |
--instui-component-text-description-section-line-height | <percentage> | 150% |
--instui-component-text-error-color | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-component-text-font-size-large | <length> | 1.75rem |
--instui-component-text-font-size-medium | <length> | 1rem |
--instui-component-text-font-size-small | <length> | 0.875rem |
--instui-component-text-font-size-x-large | <length> | 2.5rem |
--instui-component-text-font-size-x-small | <length> | 0.75rem |
--instui-component-text-font-weight-bold | <integer> | 600 |
--instui-component-text-font-weight-normal | <integer> | 400 |
--instui-component-text-inverse-color | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-text-legend-font-size | <length> | 0.75rem |
--instui-component-text-legend-line-height | <percentage> | 150% |
--instui-component-text-muted-color | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-component-text-primary-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-text-success-color | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-component-text-warning-color | <color> | light-dark(#BB4200, #FF905A)LightDark |