สีพื้นหลัง

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

การใช้งาน

สีพื้นหลังพื้นฐาน

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color	สีพื้นหลังหลัก	spr-bg-white-50
.spr-background-color-default	สีพื้นหลังเริ่มต้น	spr-bg-mushroom-200
.spr-background-color-surface	สีพื้นหลังผิว	spr-bg-mushroom-50
.spr-background-color-surface-adaptive	สีพื้นหลังผิวแบบปรับได้พร้อมความโปร่งใส	spr-bg-mushroom-950/[0.05]
.spr-background-color-base	สีพื้นหลังฐาน	spr-bg-mushroom-100

สถานะการโต้ตอบ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-hover	สีพื้นหลังเมื่อ hover	spr-bg-mushroom-950/[0.08]
.spr-background-color-pressed	สีพื้นหลังเมื่อกด	spr-bg-mushroom-950/[0.12]
.spr-background-color-disabled	สีพื้นหลังสำหรับองค์ประกอบที่ปิดใช้งาน	spr-bg-white-100

สีกลับด้าน

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-inverted	สีพื้นหลังกลับด้าน	spr-bg-mushroom-950
.spr-background-color-inverted-hover	สีพื้นหลังกลับด้านเมื่อ hover	spr-bg-mushroom-900
.spr-background-color-inverted-pressed	สีพื้นหลังกลับด้านเมื่อกด	spr-bg-mushroom-800

สถานะการเลือก

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-single-active	สีพื้นหลังสำหรับรายการที่เลือกเดียว	spr-bg-kangkong-100
.spr-background-color-multiple-active	สีพื้นหลังสำหรับรายการที่เลือกหลายรายการ	spr-bg-kangkong-50

สีแบรนด์

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-brand-base	สีพื้นหลังแบรนด์	spr-bg-kangkong-700
.spr-background-color-brand-hover	สีพื้นหลังแบรนด์เมื่อ hover	spr-bg-kangkong-800
.spr-background-color-brand-pressed	สีพื้นหลังแบรนด์เมื่อกด	spr-bg-kangkong-900
.spr-background-color-brand-weak	สีพื้นหลังแบรนด์แบบอ่อน	spr-bg-kangkong-100
.spr-background-color-brand-weak-hover	สีพื้นหลังแบรนด์แบบอ่อนเมื่อ hover	spr-bg-kangkong-200
.spr-background-color-brand-weak-pressed	สีพื้นหลังแบรนด์แบบอ่อนเมื่อกด	spr-bg-kangkong-300

สีสำเร็จ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-success-base	สีพื้นหลังสำเร็จ	spr-bg-kangkong-600
.spr-background-color-success-hover	สีพื้นหลังสำเร็จเมื่อ hover	spr-bg-kangkong-700
.spr-background-color-success-pressed	สีพื้นหลังสำเร็จเมื่อกด	spr-bg-kangkong-800
.spr-background-color-success-weak	สีพื้นหลังสำเร็จแบบอ่อน	spr-bg-kangkong-100
.spr-background-color-success-weak-hover	สีพื้นหลังสำเร็จแบบอ่อนเมื่อ hover	spr-bg-kangkong-200
.spr-background-color-success-weak-pressed	สีพื้นหลังสำเร็จแบบอ่อนเมื่อกด	spr-bg-kangkong-300

สีข้อมูล

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-information-base	สีพื้นหลังข้อมูล	spr-bg-blueberry-600
.spr-background-color-information-hover	สีพื้นหลังข้อมูลเมื่อ hover	spr-bg-blueberry-700
.spr-background-color-information-pressed	สีพื้นหลังข้อมูลเมื่อกด	spr-bg-blueberry-800
.spr-background-color-information-weak	สีพื้นหลังข้อมูลแบบอ่อน	spr-bg-blueberry-100
.spr-background-color-information-weak-hover	สีพื้นหลังข้อมูลแบบอ่อนเมื่อ hover	spr-bg-blueberry-200
.spr-background-color-information-weak-pressed	สีพื้นหลังข้อมูลแบบอ่อนเมื่อกด	spr-bg-blueberry-300

สีอันตราย

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-danger-base	สีพื้นหลังอันตราย	spr-bg-tomato-600
.spr-background-color-danger-hover	สีพื้นหลังอันตรายเมื่อ hover	spr-bg-tomato-700
.spr-background-color-danger-pressed	สีพื้นหลังอันตรายเมื่อกด	spr-bg-tomato-800
.spr-background-color-danger-weak	สีพื้นหลังอันตรายแบบอ่อน	spr-bg-tomato-100
.spr-background-color-danger-weak-hover	สีพื้นหลังอันตรายแบบอ่อนเมื่อ hover	spr-bg-tomato-200
.spr-background-color-danger-weak-pressed	สีพื้นหลังอันตรายแบบอ่อนเมื่อกด	spr-bg-tomato-300

สีรอดำเนินการ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-pending-base	สีพื้นหลังรอดำเนินการ	spr-bg-mango-500
.spr-background-color-pending-hover	สีพื้นหลังรอดำเนินการเมื่อ hover	spr-bg-mango-600
.spr-background-color-pending-pressed	สีพื้นหลังรอดำเนินการเมื่อกด	spr-bg-mango-700
.spr-background-color-pending-weak	สีพื้นหลังรอดำเนินการแบบอ่อน	spr-bg-mango-100
.spr-background-color-pending-weak-hover	สีพื้นหลังรอดำเนินการแบบอ่อนเมื่อ hover	spr-bg-mango-200
.spr-background-color-pending-weak-pressed	สีพื้นหลังรอดำเนินการแบบอ่อนเมื่อกด	spr-bg-mango-300

สีระวัง

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-caution-base	สีพื้นหลังระวัง	spr-bg-carrot-500
.spr-background-color-caution-hover	สีพื้นหลังระวังเมื่อ hover	spr-bg-carrot-600
.spr-background-color-caution-pressed	สีพื้นหลังระวังเมื่อกด	spr-bg-carrot-700
.spr-background-color-caution-weak	สีพื้นหลังระวังแบบอ่อน	spr-bg-carrot-100
.spr-background-color-caution-weak-hover	สีพื้นหลังระวังแบบอ่อนเมื่อ hover	spr-bg-carrot-200
.spr-background-color-caution-weak-pressed	สีพื้นหลังระวังแบบอ่อนเมื่อกด	spr-bg-carrot-300

สีเน้น

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-background-color-accent-base	สีพื้นหลังเน้น	spr-bg-wintermelon-600
.spr-background-color-accent-hover	สีพื้นหลังเน้นเมื่อ hover	spr-bg-wintermelon-700
.spr-background-color-accent-pressed	สีพื้นหลังเน้นเมื่อกด	spr-bg-wintermelon-800
.spr-background-color-accent-weak	สีพื้นหลังเน้นแบบอ่อน	spr-bg-wintermelon-100
.spr-background-color-accent-weak-hover	สีพื้นหลังเน้นแบบอ่อนเมื่อ hover	spr-bg-wintermelon-200
.spr-background-color-accent-weak-pressed	สีพื้นหลังเน้นแบบอ่อนเมื่อกด	spr-bg-wintermelon-300

สีสวิตช์

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-switch-background-default	สีพื้นหลังสวิตช์เริ่มต้น	spr-bg-mushroom-200
.spr-switch-background-hover	สีพื้นหลังสวิตช์เมื่อ hover	spr-bg-mushroom-300
.spr-switch-background-pressed	สีพื้นหลังสวิตช์เมื่อกด	spr-bg-mushroom-400

ตัวอย่าง

<!-- การใช้งานพื้นฐาน -->
<div class="spr-background-color">พื้นหลังหลัก</div>
<div class="spr-background-color-surface">พื้นหลังผิว</div>

<!-- สถานะการโต้ตอบ -->
<button class="spr-background-color-brand-base hover:spr-background-color-brand-hover">ปุ่มแบรนด์</button>

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