Color & Style
Kelp includes a handful of utility for modifying the color and style of various components.
Color
Components in Kelp have a default color neutral or gray. Semantic color classes can modify the background, border, and text colors.
| Class | Default Color |
|---|---|
.primary |
blue |
.secondary |
indigo |
.success |
green |
.danger |
red |
.warning |
yellow |
For example, here’s the <button> component with all of the color classes.
<button>Neutral</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="warning">Warning</button>Brightness
The .muted and .vivid classes change the brightness of the chosen color.
Normal Callout
Vivid Callout
<button class="primary">Normal Button</button>
<button class="primary muted">Muted Button</button>
<div class="callout primary">Normal Callout</div>
<div class="callout primary vivid">Vivid Callout</div>Outline
The .outline class removes the background color, and uses the same color for the border and text.
<button class="primary">Normal Button</button>
<button class="primary outline">Outline Button</button>