Divide Colors

These utility classes set divider colors for elements that use border dividers between child elements. Use them to ensure consistent divider color application across your UI.

Usage

Base Divide Colors

Class Name	Description	Color Token
.spr-divide-color-strong	Strong divider color for high emphasis	spr-divide-mushroom-500
.spr-divide-color-supporting	Supporting divider color	spr-divide-mushroom-400
.spr-divide-color-base	Base divider color for default state	spr-divide-mushroom-300
.spr-divide-color-hover	Divider color on hover state	spr-divide-mushroom-400
.spr-divide-color-pressed	Divider color on pressed state	spr-divide-mushroom-500
.spr-divide-color-weak	Weak divider color for subtle separation	spr-divide-mushroom-200
.spr-divide-color-disabled	Divider color for disabled elements	spr-divide-white-100
.spr-divide-color-on-fill-disabled	Divider color on filled disabled elements	spr-divide-white-200

Brand Divide Colors

Class Name	Description	Color Token
.spr-divide-color-brand-base	Brand divider color	spr-divide-kangkong-700
.spr-divide-color-brand-hover	Brand divider on hover	spr-divide-kangkong-800
.spr-divide-color-brand-pressed	Brand divider on pressed	spr-divide-kangkong-900

Success Divide Colors

Class Name	Description	Color Token
.spr-divide-color-success-base	Success divider color	spr-divide-kangkong-700
.spr-divide-color-success-hover	Success divider on hover	spr-divide-kangkong-800
.spr-divide-color-success-pressed	Success divider on pressed	spr-divide-kangkong-900

Information Divide Colors

Class Name	Description	Color Token
.spr-divide-color-information-base	Information divider color	spr-divide-blueberry-700
.spr-divide-color-information-hover	Information divider on hover	spr-divide-blueberry-800
.spr-divide-color-information-pressed	Information divider on pressed	spr-divide-blueberry-900

Danger Divide Colors

Class Name	Description	Color Token
.spr-divide-color-danger-base	Danger divider color	spr-divide-tomato-600
.spr-divide-color-danger-hover	Danger divider on hover	spr-divide-tomato-700
.spr-divide-color-danger-pressed	Danger divider on pressed	spr-divide-tomato-800

Pending Divide Colors

Class Name	Description	Color Token
.spr-divide-color-pending-base	Pending divider color	spr-divide-mango-700
.spr-divide-color-pending-hover	Pending divider on hover	spr-divide-mango-800
.spr-divide-color-pending-pressed	Pending divider on pressed	spr-divide-mango-900

Caution Divide Colors

Class Name	Description	Color Token
.spr-divide-color-caution-base	Caution divider color	spr-divide-carrot-700
.spr-divide-color-caution-hover	Caution divider on hover	spr-divide-carrot-800
.spr-divide-color-caution-pressed	Caution divider on pressed	spr-divide-carrot-900

Accent Divide Colors

Class Name	Description	Color Token
.spr-divide-color-accent-base	Accent divider color	spr-divide-wintermelon-700
.spr-divide-color-accent-hover	Accent divider on hover	spr-divide-wintermelon-800
.spr-divide-color-accent-pressed	Accent divider on pressed	spr-divide-wintermelon-900

Examples

<!-- Basic vertical dividers -->
<div class="divide-y spr-divide-color-base">
  <div class="py-2">Item 1</div>
  <div class="py-2">Item 2</div>
  <div class="py-2">Item 3</div>
</div>

<!-- Horizontal dividers -->
<div class="divide-x spr-divide-color-weak">
  <span class="px-2">Link 1</span>
  <span class="px-2">Link 2</span>
  <span class="px-2">Link 3</span>
</div>

<!-- List with semantic dividers -->
<ul class="divide-y spr-divide-color-weak">
  <li class="py-3 spr-text-color-base">Normal item</li>
  <li class="py-3 spr-text-color-success-base divide-y spr-divide-color-success-base">
    Success item with success divider
  </li>
  <li class="py-3 spr-text-color-danger-base">Error item</li>
</ul>

<!-- Navigation with brand dividers -->
<nav class="flex divide-x spr-divide-color-brand-base">
  <a href="#" class="px-4 py-2">Home</a>
  <a href="#" class="px-4 py-2">Products</a>
  <a href="#" class="px-4 py-2">Contact</a>
</nav>

<!-- Status-based dividers -->
<div class="space-y-4">
  <div class="divide-y spr-divide-color-information-base">
    <div class="py-2">Information section</div>
    <div class="py-2">More info</div>
  </div>

  <div class="divide-y spr-divide-color-pending-base">
    <div class="py-2">Pending item 1</div>
    <div class="py-2">Pending item 2</div>
  </div>
</div>

Usage Notes

• Divide utilities work with Tailwind's divide-x and divide-y classes
• Use semantic color names that match the content context (success, danger, etc.)
• For subtle separations, use spr-divide-color-weak
• For prominent separations, use spr-divide-color-strong
• Always ensure sufficient contrast between dividers and background colors