_colors.scss

// Configuration for generating css variables and stuff
//   no-theme: Disables theme specific color generation
//   theme-override: For setting custom color rather than default generated theme color
//   static: For disabling interactive colors
// @property [name: string]: { value: string, no-theme?: bool, theme-override?: { [theme]: string }, static?: bool }
$_colors: (
  'lime': (
    value: #86cd74,
    no-theme: true,
  ),
  'cactus': (
    value: #3f573d,
    no-theme: true,
  ),
  'red': (
    value: #ff5552,
    no-theme: true,
  ),
  'yellow': (
    value: #ffbe42,
    no-theme: true,
  ),
  'disabled': (
    value: #cacaca,
    no-action: true,
    no-theme: true,
  ),
  'white': (
    value: #ffffff,
  ),
  'gray': (
    value: #65676b,
  ),
  'darkviolet': (
    value: #272532,
  ),
  'charcoal': (
    value: #191820,
  ),
);

// For looping to generate stuff
$colors: map-keys($_colors);

$_modifiers: (
  hover: h,
  active: a,
);
// For generating the tag itself
@function css-var($color, $modifier: null) {
  $var: --c_#{$color};
  @if $modifier and map-has-key($_modifiers, $modifier) {
    $var: $var + '-' + map-get($_modifiers, $modifier);
  }
  @return $var;
}

// Convert hex to raw
@function _hex-to-raw($color) {
  @return #{red($color)}, #{green($color)}, #{blue($color)};
}

// Getting css variable based on params
@function css-color($color, $modifier: null, $opacity: 1, $raw: false) {
  @if $raw {
    @return rgba(var(#{$color}), $opacity);
  } @else {
    @return rgba(var(#{css-var($color, $modifier)}), $opacity);
  }
}

// For creating core css color variables
@mixin init {
  :root {
    @each $color, $config in $_colors {
      $value: map-get($config, value);
      #{css-var($color)}: _hex-to-raw($value);
    }
  }
}

// For creating deferred css
@mixin deferInit {
  :root {
    @each $color, $config in $_colors {
      @if not map-get($config, no-action) {
        $value: map-get($config, value);
        #{css-var($color, hover)}: _hex-to-raw(darken($value, 6%));
        #{css-var($color, active)}: _hex-to-raw(darken($value, 10%));
      }
    }
  }
}