//
// Copyright IBM Corp. 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use 'sass:color';
@use '../../colors';
@use '../../theme' as *;
@use '../../themes';
@use '../../utilities/component-tokens';
@use '../../utilities/custom-property';

// prettier-ignore
$-tokens: (
  // red
  'tag-background-red': (
    fallback: colors.$red-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$red-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$red-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$red-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$red-80,
      ),
    ),
  ),
  'tag-color-red': (
    fallback: colors.$red-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$red-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$red-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$red-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$red-30,
      ),
    ),
  ),
  'tag-hover-red': (
    fallback: colors.$red-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$red-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$red-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$red-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$red-70,
      ),
    ),
  ),

  // magenta
  'tag-background-magenta': (
    fallback: colors.$magenta-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$magenta-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$magenta-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$magenta-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$magenta-80,
      ),
    ),
  ),
  'tag-color-magenta': (
    fallback: colors.$magenta-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$magenta-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$magenta-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$magenta-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$magenta-30,
      ),
    ),
  ),
  'tag-hover-magenta': (
    fallback: colors.$magenta-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$magenta-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$magenta-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$magenta-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$magenta-70,
      ),
    ),
  ),

  // purple
  'tag-background-purple': (
    fallback: colors.$purple-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$purple-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$purple-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$purple-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$purple-80,
      ),
    ),
  ),
  'tag-color-purple': (
    fallback: colors.$purple-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$purple-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$purple-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$purple-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$purple-30,
      ),
    ),
  ),
  'tag-hover-purple': (
    fallback: colors.$purple-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$purple-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$purple-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$purple-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$purple-70,
      ),
    ),
  ),

  // blue
  'tag-background-blue': (
    fallback: colors.$blue-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$blue-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$blue-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$blue-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$blue-80,
      ),
    ),
  ),
  'tag-color-blue': (
    fallback: colors.$blue-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$blue-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$blue-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$blue-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$blue-30,
      ),
    ),
  ),
  'tag-hover-blue': (
    fallback: colors.$blue-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$blue-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$blue-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$blue-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$blue-70,
      ),
    ),
  ),

  // cyan
  'tag-background-cyan': (
    fallback: colors.$cyan-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$cyan-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$cyan-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$cyan-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$cyan-80,
      ),
    ),
  ),
  'tag-color-cyan': (
    fallback: colors.$cyan-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$cyan-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$cyan-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$cyan-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$cyan-30,
      ),
    ),
  ),
  'tag-hover-cyan': (
    fallback: colors.$cyan-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$cyan-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$cyan-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$cyan-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$cyan-70,
      ),
    ),
  ),

  // teal
  'tag-background-teal': (
    fallback: colors.$teal-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$teal-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$teal-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$teal-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$teal-80,
      ),
    ),
  ),
  'tag-color-teal': (
    fallback: colors.$teal-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$teal-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$teal-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$teal-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$teal-30,
      ),
    ),
  ),
  'tag-hover-teal': (
    fallback: colors.$teal-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$teal-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$teal-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$teal-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$teal-70,
      ),
    ),
  ),

  // green
  'tag-background-green': (
    fallback: colors.$green-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$green-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$green-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$green-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$green-80,
      ),
    ),
  ),
  'tag-color-green': (
    fallback: colors.$green-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$green-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$green-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$green-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$green-30,
      ),
    ),
  ),
  'tag-hover-green': (
    fallback: colors.$green-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$green-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$green-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$green-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$green-70,
      ),
    ),
  ),

  // gray
  'tag-background-gray': (
    fallback: colors.$gray-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$gray-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$gray-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$gray-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$gray-80,
      ),
    ),
  ),
  'tag-color-gray': (
    fallback: colors.$gray-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$gray-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$gray-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$gray-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$gray-30,
      ),
    ),
  ),
  'tag-hover-gray': (
    fallback: colors.$gray-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$gray-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$gray-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$gray-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$gray-70,
      ),
    ),
  ),

  // cool-gray
  'tag-background-cool-gray': (
    fallback: colors.$cool-gray-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$cool-gray-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$cool-gray-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$cool-gray-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$cool-gray-80,
      ),
    ),
  ),
  'tag-color-cool-gray': (
    fallback: colors.$cool-gray-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$cool-gray-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$cool-gray-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$cool-gray-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$cool-gray-30,
      ),
    ),
  ),
  'tag-hover-cool-gray': (
    fallback: colors.$cool-gray-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$cool-gray-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$cool-gray-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$cool-gray-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$cool-gray-70,
      ),
    ),
  ),

  // warm-gray
  'tag-background-warm-gray': (
    fallback: colors.$warm-gray-20,
    values: (
      (
        theme: themes.$white,
        value: colors.$warm-gray-20,
      ),
      (
        theme: themes.$g10,
        value: colors.$warm-gray-20,
      ),
      (
        theme: themes.$g90,
        value: colors.$warm-gray-80,
      ),
      (
        theme: themes.$g100,
        value: colors.$warm-gray-80,
      ),
    ),
  ),
  'tag-color-warm-gray': (
    fallback: colors.$warm-gray-80,
    values: (
      (
        theme: themes.$white,
        value: colors.$warm-gray-80,
      ),
      (
        theme: themes.$g10,
        value: colors.$warm-gray-80,
      ),
      (
        theme: themes.$g90,
        value: colors.$warm-gray-30,
      ),
      (
        theme: themes.$g100,
        value: colors.$warm-gray-30,
      ),
    ),
  ),
  'tag-hover-warm-gray': (
    fallback: colors.$warm-gray-30,
    values: (
      (
        theme: themes.$white,
        value: colors.$warm-gray-30,
      ),
      (
        theme: themes.$g10,
        value: colors.$warm-gray-30,
      ),
      (
        theme: themes.$g90,
        value: colors.$warm-gray-70,
      ),
      (
        theme: themes.$g100,
        value: colors.$warm-gray-70,
      ),
    ),
  ),
);

$tag-background-red: custom-property.get-var('tag-background-red');
$tag-color-red: custom-property.get-var('tag-color-red');
$tag-hover-red: custom-property.get-var('tag-hover-red');
$tag-background-magenta: custom-property.get-var('tag-background-magenta');
$tag-color-magenta: custom-property.get-var('tag-color-magenta');
$tag-hover-magenta: custom-property.get-var('tag-hover-magenta');
$tag-background-purple: custom-property.get-var('tag-background-purple');
$tag-color-purple: custom-property.get-var('tag-color-purple');
$tag-hover-purple: custom-property.get-var('tag-hover-purple');
$tag-background-blue: custom-property.get-var('tag-background-blue');
$tag-color-blue: custom-property.get-var('tag-color-blue');
$tag-hover-blue: custom-property.get-var('tag-hover-blue');
$tag-background-cyan: custom-property.get-var('tag-background-cyan');
$tag-color-cyan: custom-property.get-var('tag-color-cyan');
$tag-hover-cyan: custom-property.get-var('tag-hover-cyan');
$tag-background-teal: custom-property.get-var('tag-background-teal');
$tag-color-teal: custom-property.get-var('tag-color-teal');
$tag-hover-teal: custom-property.get-var('tag-hover-teal');
$tag-background-green: custom-property.get-var('tag-background-green');
$tag-color-green: custom-property.get-var('tag-color-green');
$tag-hover-green: custom-property.get-var('tag-hover-green');
$tag-background-gray: custom-property.get-var('tag-background-gray');
$tag-color-gray: custom-property.get-var('tag-color-gray');
$tag-hover-gray: custom-property.get-var('tag-hover-gray');
$tag-background-cool-gray: custom-property.get-var('tag-background-cool-gray');
$tag-color-cool-gray: custom-property.get-var('tag-color-cool-gray');
$tag-hover-cool-gray: custom-property.get-var('tag-color-cool-gray');
$tag-background-warm-gray: custom-property.get-var('tag-background-warm-gray');
$tag-color-warm-gray: custom-property.get-var('tag-color-warm-gray');
$tag-hover-warm-gray: custom-property.get-var('tag-hover-warm-gray');

$white: component-tokens.get-tokens($-tokens, themes.$white);
$g10: component-tokens.get-tokens($-tokens, themes.$g10);
$g90: component-tokens.get-tokens($-tokens, themes.$g90);
$g100: component-tokens.get-tokens($-tokens, themes.$g100);