Fylgja component - Colors
Table of Contents
Add a collection of prebuild colors to any project with ease, using Fylgja Colors.
Installation
npm install @fylgja/colors
Then include the component in to your code via;
@use "@fylgja/colors";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/colors"; // *
How to use
This component comes in 3 syntaxes.
- SCSS is offered in both the SCSS and CSS variable syntax
- CSS is offered as CSS variables
- Javascript Style Tokens, if you want to use it in a Javascript based environment, like React or Vue.
And comes packing in both HEX and HSL syntax;
Color options
gray | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|---|---|---|---|---|---|---|---|---|---|
blueGray | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
red | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
pink | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
purple | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
violet | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
indigo | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
blue | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
cyan | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
teal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
green | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
lime | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
yellow | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
orange | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
SCSS version
@use "@fylgja/colors" as *;
.style {
color: $blue-5;
}
// CSS Syntax
@use "@fylgja/colors/props";
.style {
color: var(--blue-5);
}
CSS version
@import "@fylgja/colors";
.style {
color: var(--blue-5);
}
Javascript
import props from "@fylgja/colors"
const style = {
color: props.blue[5]
}
Using HSL syntax
Instead of importing the default version you can import the hsl version using;
@use "@fylgja/colors/hsl";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/colors/hsl"; // *
.silver-card {
background-color: hsl(var(--blue-gray-4) / 10%);
}
Using a single colors
Instead of importing all the color options you can import 1 of the many colors, using the following import path;
@import "@fylgja/colors/hex/blue"; /* As HEX */
@import "@fylgja/colors/hsl/blue"; /* As HSL */
This only available for the CSS syntax
Noticed a typo or is something unclear? Help us improve this page on GitHub.