Little Miss Robot - Sass colors

This package contains logic and functionality to define reusable color configuration.

This package does not contain or generate any CSS. It simply provides a system with @function and @mixin statement to manage colors. It is part of the @littlemissrobot/sass-system package.

IMPORTANT

Make use of Dart Sass:

This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.
Generate only what you need:

This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!

Install

# As a dependency
$ npm install @littlemissrobot/sass-colors
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-colors

Usage

Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-colors" as _colors;

Pass the configuration to the dependencies and the library:

// Variables
$black: #000000;
$white: #ffffff;

// Library
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-colors" as _colors with (
	$palette: (),
	$contexts: (),
  $overwrites: (),
);

Functionality of the library is now available through the namespace _colors.

Configuration

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: var(--light-base, white),
    contrast: var(--light-contrast, black),
  ),
  $contexts: (
    primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      ),
    ),
    light: (
      selector: ".light",
      palette: (
        base: white,
        contrast: black,
      ),
    ),
  ),
  $overwrites: (
    dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette, (
        base: black,
        contrast: white
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
        light: (
          base: black,
          contrast: white,
        ),
      ),
    ),
  ),
);

Palette

The base color palette, these colors will be used as template for contexts and overwrites. These keys get converted into css variables.

$palette: (
  base: white,
  contrast: black,
);

:root {
  --base: white;
  --contrast: black;
}

Contexts

The contextual colors overwrite the palette colors when a wrapper class is used. If contexts are filled in, then the css variables will be created before the palette. This makes sure that we can assign contextual colors to the palette, as a default for example. Make sure that the keys in the context palette are exactly the same as the keys in the palette to allow for cascading css variables.

$palette: (
  base: white,
  contrast: black,
);

$contexts: (
  primary: (
    selector: ".primary",
    palette: (
      base: blue,
      contrast: white,
    ),
  ),
);

:root {
  --primary-base: blue;
  --primary-contrast: white;
  --base: white;
  --contrast: black;
}

.primary {
  --base: var(--primary-base);
  --contrast: var(--primary-contrast);
}

Overwrites

The overwrites are another wrapper, surrounding both the palette and contexts. These colors will get generated into css-variables, and wrapped within a certain selector or media query. These overwrite both the palette and contexts colors. Make sure that the keys in the overwrite palette and context palettes are exactly the same as the keys in the palette to allow for cascading css variables.

$palette: (
  base: white,
  contrast: black,
);

$contexts: (
  primary: (
    selector: ".primary",
    palette: (
      base: blue,
      contrast: white,
    ),
  ),
);

$overwrites: (
  dark: (
    selector: ":root",
    media: "(prefers-color-scheme: dark)",
    palette: (
      base: black,
      contrast: white,
    ),
    contexts: (
      primary: (
        base: blue,
        contrast: white,
      ),
    ),
  ),
);

:root {
  --primary-base: blue;
  --primary-contrast: white;
  --base: white;
  --contrast: black;
}

.primary {
  --base: var(--primary-base);
  --contrast: var(--primary-contrast);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-base: blue;
    --primary-contrast: white;
    --base: black;
    --contrast: white;
  }
}

Functions

get($path)

Retrieve the color value from the configuration based on the path of keys within the color configuration map. The path is a string where each key is separated by a comma. The output of the value is written as a css variable. It is recommended to first generate those variables with either set-css-vars or set-palette-css-vars mixins.

Parameters:

$path (string): The path of keys that contain the desired color value.

@use "@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: white,
    contrast: black,
  )
);

body {
  background-color: _colors.get(base);
  color: _colors.get(contrast);
}

get-context-palette($key, $path)

Retrieve the color value from the contexts configuration based on the path of keys. The path is a string where each key is separated by a comma. The output of the value is written as a css variable. It is recommended to first generate those variables with either set-css-vars or set-context-css-vars mixins.

Parameters:

$key (string): The key containing the context's palette.
$path (string): The path of keys that contain the desired color value.

@use "@littlemissrobot/sass-colors" as _colors with (
	$contexts: (
		primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      )
    )
  )
);

body {
  background-color: _colors.get-context-palette(primary, base);
  color: _colors.get-context-palette(primary, contrast);
}

get-context-selector($key)

Retrieve the selector from one of the $contexts configurations.

Parameters:

$key (string): The key containing the context selector.

@use "@littlemissrobot/sass-colors" as _colors with (
	$contexts: (
		primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      )
    )
  )
);

#{_colors.get-context-selector(primary)} {
}

get-overwrite-palette($key, $path)

Retrieve the color value from the overwrites configuration based on the path of keys. The path is a string where each key is separated by a comma. The output of the value is written as a css variable. It is recommended to first generate those variables with either set-css-vars or set-overwrite-css-vars mixins.

Parameters:

$key (string): The key containing the overwrite palette.
$path (string): The path of keys that contain the desired color value.

@use "@littlemissrobot/sass-colors" as _colors with (
	$overwrites: (
		dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);

body {
  background-color: _colors.get-overwrite-palette(dark, base);
  color: _colors.get-overwrite-palette(dark, contrast);
}

get-overwrite-selector($key)

Retrieve the selector from one of the $overwrites configurations.

Parameters:

$key (string): The key containing the overwrite selector.

@use "@littlemissrobot/sass-colors" as _colors with (
	$overwrites: (
		dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);

#{_colors.get-overwrite-selector(dark)} {
}

get-overwrite-media($key)

Retrieve the media from one of the $overwrites configurations.

Parameters:

$key (string): The key containing the overwrite media.

@use "@littlemissrobot/sass-colors" as _colors with (
	$overwrites: (
		dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);

@media #{_colors.get-overwrite-media(dark)} {
}

get-overwrite-context($key, $context, $path)

Retrieve the color value from one of the overwrites context's configuration based on the path of keys. The path is a string where each key is separated by a comma. The output of the value is written as a css variable. It is recommended to first generate those variables with either set-css-vars or set-overwrite-css-vars mixins.

Parameters:

$key (string): The key containing the overwrite palette.
$context (string): The key of the context containing the contexts palette.
$path (string): The path of keys that contain the desired color value.

@use "@littlemissrobot/sass-colors" as _colors with (
	$overwrites: (
		dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);

body {
  background-color: _colors.get-overwrite-context(dark, primary, base);
  color: _colors.get-overwrite-context(dark, primary, contrast);
}

Mixins

set-palette-css-vars($wrap: true)

Loop over the passed map in the $palette variable and generate css-variables, based on the map structure. If the $contexts variable is filled in, it will generate the initial css variables for each context. Each initial context variable starts with their respective context key.

Parameters:

$wrap: (optional) Boolean to determine to wrap the css variables by default with the :root selector or not. If false, then provide a custom selector.

@use "@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: white,
    contrast: black,
  ),
  $contexts: (
    primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      ),
    ),
  ),
);
@include _colors.set-palette-css-vars();

:root {
  @include _colors.set-palette-css-vars(false);
}

set-context-css-vars($wrap: true)

Loop over one of the the passed map in the $contexts variable and generate css-variables, based on the map structure. Try to maintain the same keys as within $palette to make sure those css variables get overwritten.

Parameters:

$wrap: (optional) Boolean to determine to wrap the css variables by default with the :root selector or not. If false, then provide a custom selector.

@use "@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: white,
    contrast: black,
  ),
  $contexts: (
    primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      ),
    ),
  ),
);
@include _colors.set-context-css-vars(primary);

:root {
  @include _colors.set-context-css-vars(primary, false);
}

set-overwrite-css-vars($key, $wrap: true)

Loop over one of the the passed map in the $overwrites variable and generate css-variables, based on the map structure. Try to maintain the same keys as within $palette and within the $contexts variables to make sure those css variables get overwritten.

Parameters:

$name: The name of the configuration to generate. This should be equal to one of the keys in $overwrites variable.
$wrap: (optional) Boolean to determine to wrap the css with the selector in the selector key.

@use "@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: white,
    contrast: black,
  ),
  $contexts: (
    primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      ),
    ),
  ),
  $overwrites: (
    dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);
@include _colors.set-overwrite-css-vars(dark);

@media (prefers-color-scheme: dark) {
  .t-dark {
    @include _colors.set-overwrite-css-vars(dark, false);
  }
}

set-css-vars()

A mixin to generate both the $palette css variables and each of the $contexts and $overwrites.

@use "@littlemissrobot/sass-colors" as _colors with (
	$palette: (
		base: white,
    contrast: black,
  ),
  $contexts: (
    primary: (
      selector: ".primary",
      palette: (
        base: blue,
        contrast: white,
      ),
    ),
  ),
  $overwrites: (
    dark: (
      selector: ":root",
      media: "(prefers-color-scheme: dark)",
      palette: (
        base: black,
        contrast: white,
      ),
      contexts: (
        primary: (
          base: blue,
          contrast: white,
        ),
      ),
    ),
  )
);
@include _colors.set-css-vars();

@littlemissrobot/sass-colors

Little Miss Robot - Sass colors

IMPORTANT

Install

Usage

Configuration

Palette

Contexts

Overwrites

Functions

get($path)

get-context-palette($key, $path)

get-context-selector($key)

get-overwrite-palette($key, $path)

get-overwrite-selector($key)

get-overwrite-media($key)

get-overwrite-context($key, $context, $path)

Mixins

set-palette-css-vars($wrap: true)

set-context-css-vars($wrap: true)

set-overwrite-css-vars($key, $wrap: true)

set-css-vars()

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@littlemissrobot/sass-colors

Little Miss Robot - Sass colors

IMPORTANT

Install

Usage

Configuration

Palette

Contexts

Overwrites

Functions

get($path)

get-context-palette($key, $path)

get-context-selector($key)

get-overwrite-palette($key, $path)

get-overwrite-selector($key)

get-overwrite-media($key)

get-overwrite-context($key, $context, $path)

Mixins

set-palette-css-vars($wrap: true)

set-context-css-vars($wrap: true)

set-overwrite-css-vars($key, $wrap: true)

set-css-vars()

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads