Color tooling and core colors library.

Usage

Run npm i @klickste/ink in your project directory.

Use and (optionally) configure the Sass module:

@use '@klickste/ink' with (
  $namespace: 'acme',
  $useDarkMode: false,
  $useDisplayP3: false
);

Use the predefined modules:

@use '@klickste/ink/core';
@use '@klickste/ink/gray';

:root {
  @include core.palette;
  @include gray.palette;
}

Use the built-in mixins

Declare multiple colors:

$myPalette: (
  'brand': rgb(242 59 34),
  'accent': rgb(52 195 117),
);

:root {
  @include ink.colors($myPalette);
}

Declare a single color:

:root {
  // RGB color
  @include ink.color('brand', rgb(242 59 34));

  // Display P3 color
  @include ink.color('brand', rgb(242 59 34), true);
}