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
.mc-divide-color-strong	Strong divider color for high emphasis	mc-divide-mushroom-500
.mc-divide-color-supporting	Supporting divider color	mc-divide-mushroom-400
.mc-divide-color-base	Base divider color for default state	mc-divide-mushroom-300
.mc-divide-color-hover	Divider color on hover state	mc-divide-mushroom-400
.mc-divide-color-pressed	Divider color on pressed state	mc-divide-mushroom-500
.mc-divide-color-weak	Weak divider color for subtle separation	mc-divide-mushroom-200
.mc-divide-color-disabled	Divider color for disabled elements	mc-divide-white-100
.mc-divide-color-on-fill-disabled	Divider color on filled disabled elements	mc-divide-white-200

Brand Divide Colors

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

Success Divide Colors

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

Information Divide Colors

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

Danger Divide Colors

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

Pending Divide Colors

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

Caution Divide Colors

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

Accent Divide Colors

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

Examples

<!-- Basic vertical dividers -->
<div class="divide-y mc-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 mc-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 mc-divide-color-weak">
  <li class="py-3 mc-text-color-base">Normal item</li>
  <li class="py-3 mc-text-color-success-base divide-y mc-divide-color-success-base">
    Success item with success divider
  </li>
  <li class="py-3 mc-text-color-danger-base">Error item</li>
</ul>

<!-- Navigation with brand dividers -->
<nav class="flex divide-x mc-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 mc-divide-color-information-base">
    <div class="py-2">Information section</div>
    <div class="py-2">More info</div>
  </div>

  <div class="divide-y mc-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 mc-divide-color-weak
• For prominent separations, use mc-divide-color-strong
• Always ensure sufficient contrast between dividers and background colors