Color

Sets color value of element

Usage

Add color-*, background-color-*, and/or border-color-* class to an element.

<div class="color-primary color-primary-dark@hover">
    // Your content
</div>

Classes

ClassValue
color-transparenttransparent
color-primaryvar(--color-primary)
color-primary-lightvar(--color-primary-light)
color-primary-darkvar(--color-primary-dark)
color-secondaryvar(--color-secondary)
color-secondary-lightvar(--color-secondary-light)
color-secondary-darkvar(--color-secondary-dark)
color-darkvar(--color-dark)
color-lightvar(--color-light)
color-grayvar(--color-gray)
color-gray-lightvar(--color-gray-light)
color-gray-darkvar(--color-gray-dark)
color-successvar(--color-success)
color-warningvar(--color-warning)
color-errorvar(--color-error)
color-textvar(--color-text)
color-text-lightvar(--color-text-light)
color-linkvar(--color-link)
color-link-lightvar(--color-link-light)
color-link-darkvar(--color-link-dark)
background-color-transparenttransparent
background-color-primaryvar(--color-primary)
background-color-primary-lightvar(--color-primary-light)
background-color-primary-darkvar(--color-primary-dark)
background-color-secondaryvar(--color-secondary)
background-color-secondary-lightvar(--color-secondary-light)
background-color-secondary-darkvar(--color-secondary-dark)
background-color-darkvar(--color-dark)
background-color-lightvar(--color-light)
background-color-grayvar(--color-gray)
background-color-gray-lightvar(--color-gray-light)
background-color-gray-darkvar(--color-gray-dark)
background-color-successvar(--color-success)
background-color-warningvar(--color-warning)
background-color-errorvar(--color-error)
background-color-backgroundvar(--color-background)
background-color-background-lightvar(--color-background-light)
background-color-background-darkvar(--color-background-dark)
border-color-transparenttransparent
border-color-primaryvar(--color-primary)
border-color-primary-lightvar(--color-primary-light)
border-color-primary-darkvar(--color-primary-dark)
border-color-secondaryvar(--color-secondary)
border-color-secondary-lightvar(--color-secondary-light)
border-color-secondary-darkvar(--color-secondary-dark)
border-color-darkvar(--color-dark)
border-color-lightvar(--color-light)
border-color-grayvar(--color-gray)
border-color-gray-lightvar(--color-gray-light)
border-color-gray-darkvar(--color-gray-dark)
border-color-successvar(--color-success)
border-color-warningvar(--color-warning)
border-color-errorvar(--color-error)
border-color-bordervar(--color-border)
border-color-border-lightvar(--color-border-light)
border-color-border-darkvar(--color-border-dark)
 

Add @hover suffix to support :hover state

Table of contents