CSS: text ​

.instui-text · 穩定 — 具有大小、字重、顏色和樣式修飾子的段落文字排版。

-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-highlight具有背景高亮的 AI 強調文字顏色。
.-color-brand品牌文字顏色。
.-color-danger危險（錯誤）文字顏色。
.-color-primary主要文字顏色。
.-color-primary-inverse深色背景上的文字（主要反向）顏色。
.-color-primary-on彩色背景上的主要文字顏色。
.-color-secondary次要（淡化）文字顏色。
.-color-secondary-inverse深色背景上的文字（次要反向）顏色。
.-color-secondary-on彩色背景上的次要文字顏色。
.-color-success成功（成功狀態）文字顏色。
.-color-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斜體。
.-transform-capitalize每個字首字母大寫。
.-transform-lowercase將文字轉為小寫。
.-transform-uppercase將文字轉為大寫。
.-variant-content內容類型預設。
.-variant-content-important重要內容類型預設。
.-variant-content-quote引用內容類型預設。
.-variant-content-small小型內容類型預設。
.-variant-description-page頁面描述類型預設。
.-variant-description-section區段描述類型預設。
.-variant-legend圖例（legend）類型預設。
.-weight-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 — 將此文字裁切為單行或指定行數。