CSS: text ​

.instui-text · stable — Մարմնի տեքստի տիպոգրաֆիա՝ չափի, հաստության, գույնի և ոճի մոդիֆիկատորներով:

-variant-* պրեսեթներն ու -color-*/-size-*/-weight-* մոդիֆիկատորները 모두 նույն տարրի վրա իրար հետ համադրելի են; heading-ի նման՝ այն չի տարբերակում որևէ իմփլիցիտ սեմանտիկ մակարդակ։

Source: text.css

Օգտագործում ​

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

Օրինակներ ​

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>

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-color-aiՀնացած — use .-color-ai-highlight.
.-color-ai-highlightAI-հատուկ ընդգծման տեքստի գույն՝ ֆոնային հայլայթի հետ։
.-color-brandԲրենդային տեքստի գույն։
.-color-dangerՎթարային (danger) տեքստի գույն։
.-color-primaryԱռաջնային (primary) տեքստի գույն։
.-color-primary-inverseԾածկված մուգ ֆոնի վրա (on-dark, primary inverse) տեքստի գույն։
.-color-primary-onԳունավոր ֆոնի վրա առջնային տեքստի գույն։
.-color-secondaryԵրկրորդային (muted) տեքստի գույն։
.-color-secondary-inverseԾածկված մուգ ֆոնի վրա (on-dark, secondary inverse) երկրորդային տեքստի գույն։
.-color-secondary-onԳունավոր ֆոնի վրա երկրորդային տեքստի գույն։
.-color-successՀաջողության (success) տեքստի գույն։
.-color-warningՆշում/ճիշտացում (warning) տեքստի գույն։
.-size-largeՄեծ։ -size-lg–ի երկարաձգված անունը։
.-size-lgՄեծ։
.-size-smՓոքր։
.-size-smallՓոքր. -size-sm–ի երկարաձգված անունը։
.-size-x-largeԱագ ստանդարտ։ -size-xl–ի երկարաձգված անունը։
.-size-x-smallԱրտաքին փոքր։ -size-xs–ի երկարաձգված անունը։
.-size-xlԱրտահայտորեն մեծ։
.-size-xsԱրտահայտորեն փոքր։
.-style-italicԿիսատեսական (italic):
.-transform-capitalizeԲոլոր բառերը մեծատառ դարձնել (Capitalise each word).
.-transform-lowercaseՏեքստը փոքրատառ դարձնել։
.-transform-uppercaseՏեքստը մեծատառ դարձնել։
.-variant-contentԲովանդակության տիպի պրեսեթ։
.-variant-content-importantMahImportance (Important)-բովանդակության տիպի պրեսեթ։
.-variant-content-quoteԱրտահայտության (Quote) բովանդակության տիպի պրեսեթ։
.-variant-content-smallՓոքր (Small) բովանդակության տիպի պրեսեթ։
.-variant-description-pageԷջի նկարագրության (Page-description) տիպի պրեսեթ։
.-variant-description-sectionԱնձեռնամասի (Section-description) տիպի պրեսեթ։
.-variant-legendԱնվանման (Legend) տիպի պրեսեթ։
.-weight-boldԴնդուկ (Bold) հաստություն։

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--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)

Ավելին կապված ​

  • heading — Տիպոգրաֆիա՝ վերնագրերի համար, ոչ թե մարմնի տեքստի համար։
  • truncate — Սեղմում է այս տեքստը մեկ տող կամ մի հատվածի վրա։