สีตัวแบ่ง

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

การใช้งาน

สีตัวแบ่งพื้นฐาน

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

สีตัวแบ่งแบรนด์

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

สีตัวแบ่งสำเร็จ

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

สีตัวแบ่งข้อมูล

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

สีตัวแบ่งอันตราย

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

สีตัวแบ่งรอดำเนินการ

ชื่อคลาส	คำอธิบาย	โทเค็นสี
.spr-divide-color-pending-base	สีตัวแบ่งรอดำเนินการ	spr-divide-mango-700
.spr-divide-color-pending-hover	ตัวแบ่งรอดำเนินการเมื่อ hover	spr-divide-mango-800
.spr-divide-color-pending-pressed	ตัวแบ่งรอดำเนินการเมื่อกด	spr-divide-mango-900

สีตัวแบ่งระวัง

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

สีตัวแบ่งเน้น

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

ตัวอย่าง

<!-- ตัวแบ่งแนวตั้งพื้นฐาน -->
<div class="divide-y spr-divide-color-base">
  <div class="py-2">รายการ 1</div>
  <div class="py-2">รายการ 2</div>
  <div class="py-2">รายการ 3</div>
</div>

<!-- ตัวแบ่งแนวนอน -->
<div class="divide-x spr-divide-color-weak">
  <span class="px-2">ลิงก์ 1</span>
  <span class="px-2">ลิงก์ 2</span>
  <span class="px-2">ลิงก์ 3</span>
</div>

<!-- รายการพร้อมตัวแบ่งที่มีความหมาย -->
<ul class="divide-y spr-divide-color-weak">
  <li class="py-3 spr-text-color-base">รายการปกติ</li>
  <li class="py-3 spr-text-color-success-base divide-y spr-divide-color-success-base">
    รายการสำเร็จพร้อมตัวแบ่งสำเร็จ
  </li>
  <li class="py-3 spr-text-color-danger-base">รายการข้อผิดพลาด</li>
</ul>

<!-- การนำทางพร้อมตัวแบ่งแบรนด์ -->
<nav class="flex divide-x spr-divide-color-brand-base">
  <a href="#" class="px-4 py-2">หน้าหลัก</a>
  <a href="#" class="px-4 py-2">ผลิตภัณฑ์</a>
  <a href="#" class="px-4 py-2">ติดต่อ</a>
</nav>

<!-- ตัวแบ่งตามสถานะ -->
<div class="space-y-4">
  <div class="divide-y spr-divide-color-information-base">
    <div class="py-2">ส่วนข้อมูล</div>
    <div class="py-2">ข้อมูลเพิ่มเติม</div>
  </div>

  <div class="divide-y spr-divide-color-pending-base">
    <div class="py-2">รายการรอดำเนินการ 1</div>
    <div class="py-2">รายการรอดำเนินการ 2</div>
  </div>
</div>

หมายเหตุการใช้งาน

• ยูทิลิตี้ Divide ทำงานกับคลาส divide-x และ divide-y ของ Tailwind
• ใช้ชื่อสีที่มีความหมายที่ตรงกับบริบทเนื้อหา (สำเร็จ, อันตราย, ฯลฯ)
• สำหรับการแยกแบบอ่อน ใช้ spr-divide-color-weak
• สำหรับการแยกที่เด่น ใช้ spr-divide-color-strong
• ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างตัวแบ่งและสีพื้นหลัง