CSS: text ​

.instui-text · stable — ตัวพิมพ์สำหรับเนื้อหาหลัก (body-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สีข้อความสำหรับสถานะอันตราย (Danger)
.-color-primaryสีข้อความหลัก (Primary)
.-color-primary-inverseสีข้อความบนพื้นมืด (อินเวิร์สหลัก)
.-color-primary-onสีข้อความหลักเมื่ออยู่บนพื้นหลังที่มีสี
.-color-secondaryสีข้อความรอง (ลดระดับเสียง)
.-color-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ตัวเอียง
.-transform-capitalizeเขียนตัวอักษรให้แต่ละคำขึ้นต้นด้วยตัวพิมพ์ใหญ่
.-transform-lowercaseแปลงข้อความเป็นตัวพิมพ์เล็ก
.-transform-uppercaseแปลงข้อความเป็นตัวพิมพ์ใหญ่
.-variant-contentพรีเซ็ตประเภทเนื้อหา (Content type)
.-variant-content-importantพรีเซ็ตประเภทเนื้อหาที่สำคัญ (Important-content)
.-variant-content-quoteพรีเซ็ตประเภทเนื้อหาสำหรับคำกล่าวอ้าง (Quote-content)
.-variant-content-smallพรีเซ็ตประเภทเนื้อหาขนาดเล็ก (Small-content)
.-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 — แบบอักษรสำหรับหัวเรื่อง (headings) แทนการใช้กับเนื้อหาหลัก
  • truncate — ตัดข้อความนี้ให้เหลือหนึ่งบรรทัดหรือจำนวนบรรทัดที่กำหนด