Usage

Functions

@use '~ioco-sass' as ioco;
@use 'sass:map' as map;

// functions
$test1: ioco.contrast-of-color($color);

// Same algorithm as http://mcg.mbitson.com/
$customPalette: ioco.palette-from-color($color);

// Same as Tailwind CSS palettes
// map.get($twPalette, 'teal'); // returns another map
$twPalette: ioco.tailwind-get-colors();

// Same as Material Color palettes
// map.get($matPalette, 'teal'); // returns another map
$matPalette: ioco.material-get-colors();

Mixins

In Code

@use '~ioco-sass' as ioco;

$matPalette: ioco.material-get-colors();
$tealMap: map.get($matPalette, "teal");
$deepOrangeMap: map.get($matPalette, "deepOrange");

:root {
  @include add-color-css-variables($tealMap, "--th-pink");
  @include add-color-css-variables($deepOrange, "--th-orange", true);
}

Pre selected Palettes

Click on the In Code links to view all available names

Material

In Code from material

@use '~ioco-sass' as ioco;
@use 'sass:map' as map;

$matPalette: ioco.material-get-colors();
// One Color
$tealMap: map.get($matPalette, 'teal');

// All colors
:root {
@each $colorName, $colorMap in $matPalette{
    @each $shade, $color in $colorMap{
      --mat-#{$colorName}-#{$shade}: $color;
}
}
}

Tailwind

In Code from tailwindcss

@use '~ioco-sass' as ioco;
@use 'sass:map' as map;

$twPalette: ioco.tailwind-get-colors();
// One Color
$emeraldMap: map.get($twPalette, 'emerald');

// All colors
:root {
  @each $colorName, $colorMap in $twPalette{
    @each $shade, $color in $colorMap{
      --mat-#{$colorName}-#{$shade}: $color;
    }
  }
}

Dark Modes

In Code from this article

@use '~ioco-sass' as ioco;
@use 'sass:map' as map;

$darkModes: ioco.dark-mode-get-colors();

$dm-material: map.get($darkModes, 'material');

:root {
--dm-bg: map.get($dm-material, "bg");
  --dm-50: map.get($dm-material, 50);
--dm-100: map.get($dm-material, 100);
}

Advanced

Variable overrides

@use '~ioco-sass' with (
  $lightContrast: #efefef,
  $darkContrast: #333333,
);

With as

@use '~ioco-sass' as ioco with (
  $lightContrast: #efefef,
  $darkContrast: #333333,
);

NOTES

Contrast by default uses either white or black.

Dark modes available with preferred bg color