spellbook/css

Create better color management

Closed this issue · 1 comments

I want to set the palette variables, but also have a $colors or $palette map that we can create a palette() function to pull from. I'm thinking this:

@function palette($key, $value: 0) {
  @return map-get(map-get($palette, $key), $value);
}
$sun: #f4bc40;
$slate: #2f2f2f;
$white: #fff;

$palette: (
  action: (
    0: $sun
  ),
  base: (
    0: $slate,
    t1: tint($slate, 50%),
    t2: tint($slate, 70%),
    t3: tint($slate, 90%)
  ),
  light: (
    0: $white
  )
);
body {
  background-color: palette('base', 't1');
}

This does conflict slightly with the tool classes for background-color and color, so we'll need to think about those changing from .sb-bc-slate to .sb-bc-base, .sb-bc-base-t1, etc. I like it, though, because we can use the map to auto-generate the tool classes.