สีขอบ
คลาสยูทิลิตี้เหล่านี้กำหนดสีขอบโดยใช้ชื่อเชิงความหมายสำหรับสถานะและบริบทต่างๆ ใช้เพื่อให้มั่นใจถึงการใช้สีขอบที่สอดคล้องกันใน UI ของคุณ
การใช้งาน
| ชื่อคลาส | คำอธิบาย | โทเคนสีตัวอย่าง |
|---|---|---|
.spr-border-color-strong | สีขอบเข้มสำหรับการเน้นสูง | spr-border-mushroom-500 |
.spr-border-color-supporting | สีขอบรอง | spr-border-mushroom-400 |
.spr-border-color-base | สีขอบฐานสำหรับสถานะเริ่มต้น | spr-border-mushroom-300 |
.spr-border-color-hover | สีขอบเมื่อโฮเวอร์ | spr-border-mushroom-400 |
.spr-border-color-pressed | สีขอบเมื่อกด | spr-border-mushroom-500 |
.spr-border-color-weak | สีขอบอ่อนสำหรับการแยกที่ละเอียด | spr-border-mushroom-200 |
.spr-border-color-disabled | สีขอบสำหรับองค์ประกอบที่ปิดใช้งาน | spr-border-white-100 |
.spr-border-color-on-fill-disabled | สีขอบบนพื้นหลังที่เติมแล้วที่ปิดใช้งาน | spr-border-white-200 |
.spr-border-color-brand-base | สีขอบแบรนด์ (สถานะฐาน) | spr-border-kangkong-700 |
.spr-border-color-brand-hover | สีขอบแบรนด์ (สถานะโฮเวอร์) | spr-border-kangkong-800 |
.spr-border-color-brand-pressed | สีขอบแบรนด์ (สถานะกด) | spr-border-kangkong-900 |
.spr-border-color-success-base | สีขอบความสำเร็จ (สถานะฐาน) | spr-border-kangkong-700 |
.spr-border-color-success-hover | สีขอบความสำเร็จ (สถานะโฮเวอร์) | spr-border-kangkong-800 |
.spr-border-color-success-pressed | สีขอบความสำเร็จ (สถานะกด) | spr-border-kangkong-900 |
.spr-border-color-information-base | สีขอบข้อมูล (สถานะฐาน) | spr-border-blueberry-700 |
.spr-border-color-information-hover | สีขอบข้อมูล (สถานะโฮเวอร์) | spr-border-blueberry-800 |
.spr-border-color-information-pressed | สีขอบข้อมูล (สถานะกด) | spr-border-blueberry-900 |
.spr-border-color-danger-base | สีขอบอันตราย (สถานะฐาน) | spr-border-tomato-600 |
.spr-border-color-danger-hover | สีขอบอันตราย (สถานะโฮเวอร์) | spr-border-tomato-700 |
.spr-border-color-danger-pressed | สีขอบอันตราย (สถานะกด) | spr-border-tomato-800 |
.spr-border-color-pending-base | สีขอบรอดำเนินการ (สถานะฐาน) | spr-border-mango-700 |
.spr-border-color-pending-hover | สีขอบรอดำเนินการ (สถานะโฮเวอร์) | spr-border-mango-800 |
.spr-border-color-pending-pressed | สีขอบรอดำเนินการ (สถานะกด) | spr-border-mango-900 |
.spr-border-color-caution-base | สีขอบคำเตือน (สถานะฐาน) | spr-border-carrot-700 |
.spr-border-color-caution-hover | สีขอบคำเตือน (สถานะโฮเวอร์) | spr-border-carrot-800 |
.spr-border-color-caution-pressed | สีขอบคำเตือน (สถานะกด) | spr-border-carrot-900 |
.spr-border-color-accent-base | สีขอบเสริม (สถานะฐาน) | spr-border-wintermelon-700 |
.spr-border-color-accent-hover | สีขอบเสริม (สถานะโฮเวอร์) | spr-border-wintermelon-800 |
.spr-border-color-accent-pressed | สีขอบเสริม (สถานะกด) | spr-border-wintermelon-900 |
ระหว่างองค์ประกอบลูก
ให้คลาสยูทิลิตี้สำหรับกำหนดสีตัวแบ่ง (ขอบ) ใช้คลาสที่ต้องการกับองค์ประกอบเพื่อกำหนดสีตัวแบ่ง
| ชื่อคลาส | คำอธิบาย | โทเคนสีตัวอย่าง |
|---|---|---|
.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 | สีตัวแบ่งเมื่อโฮเวอร์ | 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 | สีตัวแบ่งแบรนด์ (สถานะโฮเวอร์) | 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 | สีตัวแบ่งความสำเร็จ (สถานะโฮเวอร์) | 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 | สีตัวแบ่งข้อมูล (สถานะโฮเวอร์) | 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 | สีตัวแบ่งอันตราย (สถานะโฮเวอร์) | 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 | สีตัวแบ่งรอดำเนินการ (สถานะโฮเวอร์) | 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 | สีตัวแบ่งคำเตือน (สถานะโฮเวอร์) | 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 | สีตัวแบ่งเสริม (สถานะโฮเวอร์) | spr-divide-wintermelon-800 |
.spr-divide-color-accent-pressed | สีตัวแบ่งเสริม (สถานะกด) | spr-divide-wintermelon-900 |