@import '@primer/primitives/dist/scss/colors/_dark.scss';
@import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
@import '@primer/primitives/dist/scss/colors/_light_colorblind.scss';
@import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
@import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
@import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
@import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
@import '@primer/primitives/dist/scss/colors/_light.scss';
@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';

@mixin theme($selector, $themeName) {
  @at-root {
    :root[data-color-mode='light'][data-light-theme='#{$themeName}'],
    :root[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
      #{$selector} {
        @content;
      }
    }

    :root[data-color-mode='auto'] {
      &[data-light-theme='#{$themeName}'] {
        @media (prefers-color-scheme: light) {
          #{$selector} {
            @content;
          }
        }
      }

      &[data-dark-theme='#{$themeName}'] {
        @media (prefers-color-scheme: dark) {
          #{$selector} {
            @content;
          }
        }
      }
    }
  }
}

@mixin enableThemes() {
  // default, e.g. when not login, when use in sites other than GitHub
  @include primer-colors-light();

  // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
  --color-bg-default-transparent: var(--color-canvas-default-transparent);
  --color-bg-default: var(--color-canvas-default);
  --color-bg-inset: var(--color-canvas-inset);
  --color-bg-overlay: var(--color-canvas-overlay);
  --color-bg-subtle: var(--color-canvas-subtle);

  @include theme(&, 'dark') {
    @include primer-colors-dark;
  }
  @include theme(&, 'dark_high_contrast') {
    @include primer-colors-dark_high_contrast;
  }
  @include theme(&, 'light_colorblind') {
    @include primer-colors-light_colorblind;
  }
  @include theme(&, 'dark_colorblind') {
    @include primer-colors-dark_colorblind;
  }
  @include theme(&, 'dark_tritanopia') {
    @include primer-colors-dark_tritanopia;
  }
  @include theme(&, 'light_high_contrast') {
    @include primer-colors-light_high_contrast;
  }
  @include theme(&, 'dark_dimmed') {
    @include primer-colors-dark_dimmed;
  }
  @include theme(&, 'light') {
    @include primer-colors-light;
  }
  @include theme(&, 'light_tritanopia') {
    @include primer-colors-light_tritanopia;
  }
}
