@use "sass:color";
@use "sass:map";
@use "sass:string";

$base-colors: (
  "black": rgb(0, 0, 0),
  "white": rgb(255, 255, 255),
  "off-white": rgb(244, 243, 240),
  "orange": rgb(255, 95, 44),
  "fog": rgb(221, 219, 211),
);

$extended-colors: (
  "gray-400": #adadad,
  "gray-500": #979797,
  "gray-800": #3d3d3d,
  "gray-900": #272727,
  "red": red,
  "lime": lime,
  "blue": blue,
  "cyan": cyan,
  "magenta": magenta,
  "yellow": yellow,
  "maroon": maroon,
  "green": green,
  "olive": olive,
  "navy": navy,
  "purple": purple,
);

$colors: map.merge($base-colors, $extended-colors) !global;

$themes: (
  "common": (
    "background-dark": map.get($colors, "black"),
    "background-light": map.get($colors, "off-white"),
    "text-dark": map.get($colors, "white"),
    "text-light": map.get($colors, "black"),
    "text-faint-light": map.get($colors, "gray-500"),
    "text-secondary": map.get($colors, "gray-400"),
    "container": map.get($colors, "gray-900"),
  ),
  "light": (
    "background": map.get($colors, "off-white"),
    "text": map.get($colors, "black"),
    "tag": map.get($colors, "fog"),
  ),
  "dark": (
    "background": map.get($colors, "black"),
    "text": map.get($colors, "white"),
    "tag": map.get($colors, "gray-800"),
  ),
);

$dim-variants: (
  "step": 0.1,
  "count": 3,
);

@function create-dim-variants($color) {
  $variants: ();
  $step: map.get($dim-variants, "step");
  $count: map.get($dim-variants, "count");

  @for $i from 1 through $count {
    $alpha: $step * $i;
    $variants: map.merge(
      $variants,
      (
        "dim-#{$i}": rgba($color, $alpha),
      )
    );
  }

  @return $variants;
}

@mixin set-color-css-variables(
  $color-name,
  $color-value,
  $set-dim-variants: false
) {
  --color-#{unquote($color-name)}: #{$color-value};

  $should-generate-dim: map.has-key($base-colors, $color-name) or
    $set-dim-variants;
  @if $should-generate-dim {
    $dim-variants-map: create-dim-variants($color-value);

    @each $dim-name, $dim-value in $dim-variants-map {
      --color-#{unquote($color-name)}-#{$dim-name}: #{$dim-value};
    }
  }
}