Colors

Version: 1.x
NPMGithub
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.