CSS: text

.instui-text — Szövegtörzs tipográfia méret, súly, szín és stílus módosítókkal.

Forrás: text.css

Használat

@import "@pantoken/components/components.css";
@import "@pantoken/components/text.css";

Példák

<span class="instui-text -size-xs">x-small text</span>

x-small text

Módosítók

Módosító	Leírás
.-color-ai	AI-hangsúly szövegszín.
.-color-brand	Márka szövegszín.
.-color-danger	Veszély szövegszín.
.-color-primary-inverse	Sötéten (elsődleges inverz) szövegszín.
.-color-secondary	Másodlagos (elnémított) szövegszín.
.-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-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-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

Kapcsolódó

• heading — Tipográfia a címekhez, nem a szövegtörzshez.
• truncate — Ezt a szöveget egy sorra vagy egy meghatározott számú sorra vágja le.