สีข้อความ

คลาสยูทิลิตี้เหล่านี้ใช้ตั้งค่าสีข้อความโดยใช้ชื่อที่มีความหมายสำหรับสถานะและบริบทต่างๆ ใช้เพื่อให้มั่นใจว่าการใช้สีข้อความจะสม่ำเสมอทั่วทั้ง UI ของคุณ

การใช้งาน

สีข้อความพื้นฐาน

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-strong	สีข้อความที่เน้นแรง	spr-text-mushroom-950
.spr-text-color-supporting	สีข้อความสนับสนุน	spr-text-mushroom-500
.spr-text-color-base	สีข้อความฐานสำหรับเนื้อหาปกติ	spr-text-mushroom-600
.spr-text-color-weak	สีข้อความที่เน้นอ่อน	spr-text-mushroom-400
.spr-text-color-disabled	สีข้อความสำหรับองค์ประกอบที่ปิดใช้งาน	spr-text-white-400
.spr-text-color-on-fill-disabled	สีข้อความบนองค์ประกอบที่เติมสีและปิดใช้งาน	spr-text-white-500

สีข้อความกลับด้าน

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-inverted-strong	ข้อความเน้นบนพื้นหลังสีเข้ม	spr-text-white-50
.spr-text-color-inverted-base	ข้อความฐานบนพื้นหลังสีเข้ม	spr-text-mushroom-200
.spr-text-color-inverted-weak	ข้อความอ่อนบนพื้นหลังสีเข้ม	spr-text-mushroom-400
.spr-text-color-inverted-disabled	ข้อความปิดใช้งานบนพื้นหลังสีเข้ม	spr-text-white-600

สีข้อความแบรนด์

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-brand-base	สีข้อความแบรนด์	spr-text-kangkong-700
.spr-text-color-brand-hover	ข้อความแบรนด์เมื่อ hover	spr-text-kangkong-800
.spr-text-color-brand-pressed	ข้อความแบรนด์เมื่อกด	spr-text-kangkong-900

สีข้อความสำเร็จ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-success-base	สีข้อความสำเร็จ	spr-text-kangkong-700
.spr-text-color-success-hover	ข้อความสำเร็จเมื่อ hover	spr-text-kangkong-800
.spr-text-color-success-pressed	ข้อความสำเร็จเมื่อกด	spr-text-kangkong-900

สีข้อความข้อมูล

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-information-base	สีข้อความข้อมูล	spr-text-blueberry-800
.spr-text-color-information-hover	ข้อความข้อมูลเมื่อ hover	spr-text-blueberry-900
.spr-text-color-information-pressed	ข้อความข้อมูลเมื่อกด	spr-text-blueberry-950

สีข้อความอันตราย

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-danger-base	สีข้อความอันตราย	spr-text-tomato-700
.spr-text-color-danger-hover	ข้อความอันตรายเมื่อ hover	spr-text-tomato-800
.spr-text-color-danger-pressed	ข้อความอันตรายเมื่อกด	spr-text-tomato-900

สีข้อความรอดำเนินการ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-pending-base	สีข้อความรอดำเนินการ	spr-text-mango-800
.spr-text-color-pending-hover	ข้อความรอดำเนินการเมื่อ hover	spr-text-mango-900
.spr-text-color-pending-pressed	ข้อความรอดำเนินการเมื่อกด	spr-text-mango-950

สีข้อความระวัง

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-caution-base	สีข้อความระวัง	spr-text-carrot-800
.spr-text-color-caution-hover	ข้อความระวังเมื่อ hover	spr-text-carrot-900
.spr-text-color-caution-pressed	ข้อความระวังเมื่อกด	spr-text-carrot-950

สีข้อความเน้น

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-accent-base	สีข้อความเน้น	spr-text-wintermelon-700
.spr-text-color-accent-hover	ข้อความเน้นเมื่อ hover	spr-text-wintermelon-800
.spr-text-color-accent-pressed	ข้อความเน้นเมื่อกด	spr-text-wintermelon-900

สีข้อความพิเศษ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-text-color-specialty-token-dark	ข้อความโทเค็นเข้มพิเศษ	spr-text-mushroom-950

ตัวอย่าง

<!-- การใช้งานพื้นฐาน -->
<p class="spr-text-color-strong">ข้อความที่เน้นแรง</p>
<p class="spr-text-color-base">ข้อความเนื้อหาปกติ</p>
<p class="spr-text-color-weak">ข้อมูลรอง</p>

<!-- สถานะการโต้ตอบ -->
<a href="#" class="spr-text-color-brand-base hover:spr-text-color-brand-hover"> ลิงก์แบรนด์ </a>

<!-- ข้อความสถานะ -->
<p class="spr-text-color-success-base">ข้อความสำเร็จ</p>
<p class="spr-text-color-danger-base">ข้อความข้อผิดพลาด</p>
<p class="spr-text-color-information-base">ข้อความข้อมูล</p>

<!-- กลับด้านสำหรับพื้นหลังสีเข้ม -->
<div class="spr-background-color-inverted">
  <p class="spr-text-color-inverted-strong">หัวข้อบนพื้นหลังสีเข้ม</p>
  <p class="spr-text-color-inverted-base">ข้อความเนื้อหาบนพื้นหลังสีเข้ม</p>
</div>