CSS: text ​

.instui-text · stable — He momo ā-tuhi tinana (body-text) me ngā whakarerekētanga rahi, taumaha, tae, me te āhua.

Ko ngā tautuhinga -variant-* me ngā whakarerekētanga -color-*/-size-*/-weight-* ka whakakotahi katoa i runga i te tūemi kotahi; kāore i pēnei i a heading, kāore e whakatakoto i tētahi taumata tikanga ā-waho.

Source: text.css

Ngā Whakamahi ​

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

Ngā tauira ​

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>

Ngā Kaitī ​

KaiwhakatikatikaWhakamārama
.-color-aiKua tukuna — use .-color-ai-highlight.
.-color-ai-highlightTae tuhi whakanikoniko AI me te āwhina papamuri mō te whakamāramatanga.
.-color-brandTae tuhi waitohu (brand).
.-color-dangerTae tuhi mō te mōrearea (danger).
.-color-primaryTae tuhi matua (primary).
.-color-primary-inverseTae tuhi mō runga-pango (on-dark / primary inverse).
.-color-primary-onTae tuhi matua i runga i te papamuri tae.
.-color-secondaryTae tuhi tuarua (muted).
.-color-secondary-inverseTae tuhi tuarua mō runga-pango (secondary inverse / on-dark).
.-color-secondary-onTae tuhi tuarua i runga i te papamuri tae.
.-color-successTae tuhi angitu (success).
.-color-warningTae tuhi whakatūpato (warning).
.-size-largeNui. He ingoa roa mō -size-lg.
.-size-lgNui.
.-size-smItiti.
.-size-smallItiti. He ingoa roa mō -size-sm.
.-size-x-largeNui rawa. He ingoa roa mō -size-xl.
.-size-x-smallItiti rawa. He ingoa roa mō -size-xs.
.-size-xlNui rawa.
.-size-xsItiti rawa.
.-style-italicItaliki.
.-transform-capitalizeTīmataia ia kupu ki te pūtuhi nui (Capitalise each word).
.-transform-lowercaseWhakararohia te tuhinga (lowercase).
.-transform-uppercaseWhakatūpatohia te tuhinga (uppercase).
.-variant-contentTautuhi momo ihirangi (content type preset).
.-variant-content-importantTautuhi momo ihirangi hira (important-content type preset).
.-variant-content-quoteTautuhi momo ihirangi whakataukī (quote-content type preset).
.-variant-content-smallTautuhi momo ihirangi iti (small-content type preset).
.-variant-description-pageTautuhi momo ihirangi whakamārama whārangi (page-description type preset).
.-variant-description-sectionTautuhi momo ihirangi whakamārama wāhanga (section-description type preset).
.-variant-legendTautuhi momo ihirangi ārahi (legend type preset).
.-weight-boldTaumaha māngaro (Bold weight).

Ngā tohu i whakamahia ​

TokenMomoUara
--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)

Hono ​

  • heading — Ngā momo ā-tuhi mō ngā taitara, kaua mō te tuhinga tinana.
  • truncate — Ka tapahia tēnei tuhinga kia kotahi rārangi, kia maha rānei ngā rārangi kua whakaritea.