Colors
Design tokens for colors
Colors
Vibrant UI provides a comprehensive color system with semantic colors and neutral palettes.
Color Palettes
Primary Colors
blueUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.blue['500']indigoUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.indigo['500']violetUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.violet['500']purpleUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.purple['500']fuchsiaUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.fuchsia['500']pinkUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.pink['500']redUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.red['500']orangeUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.orange['500']amberUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.amber['500']yellowUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.yellow['500']limeUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.lime['500']greenUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.green['500']tealUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.teal['500']cyanUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.colors.cyan['500']Neutral Palettes
slateUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.neutrals.slate['500']grayUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.neutrals.gray['500']stoneUsage:
50
100
200
300
400
500
600
700
800
900
950
tokens.neutrals.stone['500']Semantic Colors
The theme system provides semantic color mappings:
- Primary: Default brand color (blue)
- Accent: Secondary brand color (green)
- Info: Informational messages (blue)
- Positive: Success states (green)
- Notice: Warning states (orange)
- Negative: Error states (red)
Usage
In JavaScript/TypeScript
import { tokens } from '@vibrant-ui/tokens';
// Access color values
const primaryBlue = tokens.colors.blue[500]; // "22 125 253"
const neutralGray = tokens.neutrals.gray[100]; // "231 238 244"
// Use in CSS-in-JS
const styles = {
backgroundColor: `rgb(${tokens.colors.blue[500]})`,
color: `rgb(${tokens.neutrals.gray[50]})`,
};In CSS
.my-element {
background-color: rgb(var(--token-colors-blue-500));
color: rgb(var(--token-neutrals-gray-50));
}With Vibrant UI Components
import { Button } from '@vibrant-ui/components';
<Button color="blue" variant="solid">
Primary Action
</Button>;Color Values
All colors are provided in RGB format without the rgb() wrapper, making them compatible with modern CSS features like opacity modifiers:
/* Using opacity modifier */
background-color: rgb(var(--token-colors-blue-500) / 0.5);
/* Traditional approach */
background-color: rgba(22, 125, 253, 0.5);Edit on GitHub
Last updated on