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

@use "../commons/variables";

@function color-map($base) {
  @return (
    darkest: color.mix(white, $base, 80%),
    darker: color.mix(white, $base, 60%),
    dark: color.mix(white, $base, 40%),
    default: color.mix(black, $base, 20%),
    light: color.mix(black, $base, 55%),
    lighter: color.mix(black, $base, 70%),
    lightest: color.mix(black, $base, 80%)
  );
}

$vars: (
  theme: (
    "gray": color-map(map.get(variables.$colors, gray)),
    blue-gray: color-map(map.get(variables.$colors, slate)),
    primary: color-map(map.get(variables.$colors, blue)),
    secondary: color-map(map.get(variables.$colors, blue)),
    info: color-map(map.get(variables.$colors, cyan)),
    success: color-map(map.get(variables.$colors, lime)),
    warning: color-map(map.get(variables.$colors, orange)),
    danger: color-map(map.get(variables.$colors, red)),
  ),
  trans: (
    darkest: rgba(255, 255, 255, 0.5),
    darker: rgba(255, 255, 255, 0.4),
    dark: rgba(255, 255, 255, 0.3),
    default: rgba(255, 255, 255, 0.2),
    light: rgba(255, 255, 255, 0.1),
    lighter: rgba(255, 255, 255, 0.03),
    rev-default: rgba(0, 0, 0, 0.1),
    rev-light: rgba(0, 0, 0, 0.2),
    rev-lighter: rgba(0, 0, 0, 0.3),
    rev-lightest: rgba(0, 0, 0, 0.4),
  ),
  text-trans: (
    dark: white,
    default: rgba(255, 255, 255, 0.87),
    light: rgba(255, 255, 255, 0.6),
    lighter: rgba(255, 255, 255, 0.38),
    lightest: rgba(255, 255, 255, 0.2),
    rev-default: black,
    rev-dark: rgba(0, 0, 0, 0.7),
    rev-darker: rgba(0, 0, 0, 0.5),
  ),
  border-color: (
    lighter: var(--theme-gray-lightest),
    light: var(--theme-gray-lighter),
    default: var(--theme-gray-light),
    dark: var(--theme-gray-default),
    darker: var(--theme-gray-dark),
  ),
  background-color: #000,
  background-rev-color: #fff,
  control-color: #000,
  sheet: (
    bg: var(--theme-gray-lightest),
  ),
);