Colors
Table of Contents
Add a collection of prebuild colors to any project with ease, using Fylgja Colors.
Installation
npm install @fylgja/colors@1
Then include the component in to your code via;
@use "@fylgja/colors";
// Or via PostCSS and other options as native 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 native 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.