Colors
Overview​
Ravenbright provide color palettes in CSS variables with this property --rbrh-{name}-{value}
. All design colors are the cornerstone of Ravenbright utility classes.
These palettes have broad color scale from 50-900 value.
- 50 means the lightest shade
- 900 is the darkest shade
Basic Usage​
With Utility CSS​
<button class="bg-green-700 white">
dark green background with white text
</button>
<p class="blue">blue text</p>
<article class="border-orange-300 bg-gray-50">
orange border with light gray background
</article>
With CSS variables​
button {
/*Apply the color variables*/
background-color: var(--rbrh-green-700);
}
Customize colors​
To modify the color value, you can edit the variables in design-token:
/* palette - violet */
--rbrh-violet-50: #eee9fd;
--rbrh-violet-100: #cbbbf8;
--rbrh-violet-200: #b29af4;
--rbrh-violet-300: #8f6cf0;
--rbrh-violet-400: #7950ed;
tip
Checkout this complete tutorial on how to customize & add new design token in design-token