//
// Copyright IBM Corp. 2018, 2023
//
// 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:map';
@use 'sass:meta';
@use './config';
@use './themes';
@use './theme';
// Inline themes depend on layer styles to property reset the layer level
@use './layer/layer-tokens';
@use './utilities/component-tokens';
@use './utilities/custom-property';
@use './components/button/tokens' as button;
@use './components/notification/tokens' as notification;
@use './components/tag/tokens' as tag;
@use './components/icon-indicator/tokens' as icon-indicator;
@use './components/content-switcher/tokens' as content-switcher;

/// Specify a Map of zones where the key will be used as part of the selector
/// and the value will be a map used to emit CSS Custom Properties for all color
/// values
$zones: (
  white: themes.$white,
  g10: themes.$g10,
  g90: themes.$g90,
  g100: themes.$g100,
) !default;

$-components: (
  button.$button-tokens,
  notification.$notification-tokens,
  tag.$tag-tokens,
  icon-indicator.$status-tokens,
  content-switcher.$content-switcher-tokens
);

@each $name, $theme in $zones {
  .#{config.$prefix}--#{'' + $name} {
    background-color: custom-property.get-var('background');
    color: custom-property.get-var('text-primary');

    @each $key, $value in $theme {
      @if $key == 'color-scheme' {
        @include custom-property.declaration($key, $value);

        color-scheme: custom-property.get-var($key, $value);
      } @else if meta.type-of($value) == color {
        @include custom-property.declaration($key, $value);
      }
    }

    // Note: we need to re-emit the contextual layer tokens as part of the theme
    // mixin. Otherwise, the layer tokens are defined at the :root level and will
    // not pick up the theme-specific, or zone-specific, value from the first
    // layer.
    //
    // For example, in this situation:
    //
    // ```
    // :root {
    //   --layer-one: #000000;
    //   --layer: var(--layer-one);
    // }
    // ```
    //
    // This will always evaluate to the value of `--layer-one` at the `:root`
    // selector, even if `--layer-one` is redefined layer on in the cascade.
    //
    // ```
    // .zone {
    //   --layer-one: #ffffff;
    // }
    // ```
    //
    // Even though you would expect `--layer` to be redefined, it will keep the
    // value defined at the `:root` level.
    //
    // @see https://github.com/carbon-design-system/carbon/issues/11138
    @include layer-tokens.emit-layer-tokens(1);

    @each $group in $-components {
      @each $key, $value in $group {
        @if meta.type-of($value) == map {
          $fallback: map.get($value, fallback);
          $theme-values: map.get($value, values);

          @each $theme-value in $theme-values {
            $value: map.get($theme-value, value);

            @if theme.matches(map.get($theme-value, theme), $theme) and
              meta.type-of($value) ==
              color
            {
              @include custom-property.declaration($key, $value);
            }
          }
        } @else if meta.type-of($value) == color {
          @include custom-property.declaration($key, $value);
        }
      }
    }
  }
}