CSS: text
.instui-text · stable — Törzsszöveg-tipográfia méret-, vastagság-, szín- és stílusmódosítókkal.
A -variant-* előállítások és a -color-*/-size-*/-weight-* módosítók mind ugyanazon az elemen összeépülnek; ellentétben a heading-vel, nem jelenít meg implicit szemantikus szintet.
Forrás: text.css
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/text.css";Példák
html
<span class="instui-text -size-xs --display-block">x-small text</span>
<span class="instui-text -size-sm --display-block">small text</span>
<span class="instui-text -variant-content-quote --display-block">Quoted text</span>
<span class="instui-text -color-ai-highlight">AI highlight text</span>Módosítók
| Módosító | Leírás |
|---|---|
.-color-ai | Elavult — use .-color-ai-highlight. |
.-color-ai-highlight | AI-kiemelésű szövegszín háttérkiemeléssel. |
.-color-brand | Márka szövegszín. |
.-color-danger | Veszély szövegszín. |
.-color-primary | Elsődleges szövegszín. |
.-color-primary-inverse | Sötéten (elsődleges inverz) szövegszín. |
.-color-primary-on | Elsődleges szövegszín színes háttéren. |
.-color-secondary | Másodlagos (elnémított) szövegszín. |
.-color-secondary-inverse | Sötét felületen lévő (másodlagos inverz) szövegszín. |
.-color-secondary-on | Másodlagos szövegszín színes háttéren. |
.-color-success | Sikeres szövegszín. |
.-color-warning | Figyelmeztetés szövegszín. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-size-x-large | Nagyon nagy. Hosszú forma alias a -size-xl. |
.-size-x-small | Nagyon kicsi. Hosszú forma alias a -size-xs. |
.-size-xl | Nagyon nagy. |
.-size-xs | Nagyon kicsi. |
.-style-italic | Dőlt. |
.-transform-capitalize | Minden szót nagybetűvel kezdjen. |
.-transform-lowercase | Kisbetűvel írja a szöveget. |
.-transform-uppercase | Nagybetűvel írja a szöveget. |
.-variant-content | Tartalomtípus-előbeállítás. |
.-variant-content-important | Fontos tartalomtípus-előbeállítás. |
.-variant-content-quote | Idézet-tartalomtípus-előbeállítás. |
.-variant-content-small | Kis tartalom típus előbeállítása. |
.-variant-description-page | Oldal-leírás típus előbeállítása. |
.-variant-description-section | Szakasz-leírás típus előbeállítása. |
.-variant-legend | Legenda típus előbeállítása. |
.-weight-bold | Félkövér súly. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-color-institutional-brand-font-color-dark | <color> | LightDarklight-dark(#273540, #ffffff) |
--instui-color-institutional-brand-primary | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-text-ai-background-color | <color> | LightDarklight-dark(#F3E5F7, #6D3984) |
--instui-component-text-ai-color | <color> | LightDarklight-dark(#8A49A7, #F3E5F7) |
--instui-component-text-base-color | <color> | LightDarklight-dark(#273540, #ffffff) |
--instui-component-text-base-on-color | <color> | #ffffff |
--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-font-size | <length> | 1rem |
--instui-component-text-content-font-weight | <integer> | 400 |
--instui-component-text-content-important-font-size | <length> | 1rem |
--instui-component-text-content-important-font-weight | <integer> | 600 |
--instui-component-text-content-important-line-height | <percentage> | 150% |
--instui-component-text-content-line-height | <percentage> | 150% |
--instui-component-text-content-quote-font-size | <length> | 1rem |
--instui-component-text-content-quote-font-style | — | italic |
--instui-component-text-content-quote-font-weight | <integer> | 500 |
--instui-component-text-content-quote-line-height | <percentage> | 150% |
--instui-component-text-content-small-font-size | <length> | 0.875rem |
--instui-component-text-content-small-font-weight | <integer> | 400 |
--instui-component-text-content-small-line-height | <percentage> | 150% |
--instui-component-text-description-page-font-size | <length> | 1.25rem |
--instui-component-text-description-page-font-weight | <integer> | 400 |
--instui-component-text-description-page-line-height | <percentage> | 150% |
--instui-component-text-description-section-font-size | <length> | 1rem |
--instui-component-text-description-section-font-weight | <integer> | 400 |
--instui-component-text-description-section-line-height | <percentage> | 150% |
--instui-component-text-error-color | <color> | LightDarklight-dark(#CF1F24, #FA917F) |
--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> | LightDarklight-dark(#ffffff, #1C222B) |
--instui-component-text-legend-font-size | <length> | 0.75rem |
--instui-component-text-legend-font-weight | <integer> | 400 |
--instui-component-text-legend-line-height | <percentage> | 150% |
--instui-component-text-muted-color | <color> | LightDarklight-dark(#576773, #AAB0B5) |
--instui-component-text-muted-on-color | <color> | #ffffff |
--instui-component-text-primary-color | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-text-success-color | <color> | LightDarklight-dark(#037D37, #61C378) |
--instui-component-text-warning-color | <color> | LightDarklight-dark(#BB4200, #FF905A) |