sparkletown/sparkle

$colors-map: (
  // deprecated color, should probably be replaced with a more appropriate one
  primary--over: #f6e652,
  primary--under: #7c46fb,
  content--under: #000000,
  content--over: #ffffff,
  accent--over: #ffffff,
  accent--under: #7c46fb,
  greyscale: #999999,
  danger--over: #ffffff,
  danger--under: #bc271a
);

$shades-enum: (5, 10, 15, 20, 30, 40, 50, 60);
$alphas-enum: (0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9);

@function rgb-triplet($hex) {
  @return "" + red($hex) + "," + green($hex) + "," + blue($hex);
}

:root {
  // NOTE: Basic palette colors in hex (rgb triplet needed for palette generation)
  @each $name, $color in $colors-map {
    --#{$name}: #{$color};
    --#{$name}-rgb: #{rgb-triplet($color)};
  }

  // NOTE: Palette generation, naming convention is:
  // --(palette name)--(under/over)-(optional description)-(variation value)(unit name)
  @each $name, $color in $colors-map {
    @each $shade in $shades-enum {
      --#{$name}-darker-#{$shade}pp: #{darken($color, $shade * 1%)};
      --#{$name}-lighter-#{$shade}pp: #{lighten($color, $shade * 1%)};
    }

    @each $alpha in $alphas-enum {
      --#{$name}-#{$alpha*100}a: #{rgba(var(--#{$name}-rgb), $alpha)};
    }
  }
}