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

gray0123456789
blueGray0123456789
red0123456789
pink0123456789
purple0123456789
violet0123456789
indigo0123456789
blue0123456789
cyan0123456789
teal0123456789
green0123456789
lime0123456789
yellow0123456789
orange0123456789

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.