// Color modes

@import "../support/mixins/color-modes.scss";

@import "@primer/primitives/dist/scss/colors/_light.scss";
@import "@primer/primitives/dist/scss/colors/_dark.scss";
@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";

// Outputs the CSS variables
// Use :root (html element) to define a default

@include color-mode-theme(light, true) {
  @include primer-colors-light;
}

@include color-mode-theme(dark) {
  @include primer-colors-dark;
}

@include color-mode-theme(dark_dimmed) {
  @include primer-colors-dark_dimmed;
}

// Color mode boundaries
// Enables nesting of different color modes

[data-color-mode] {
  color: var(--color-text-primary);
  background-color: var(--color-bg-canvas);
}

// color-scheme
// Enables color modes for native elements

@include color-mode(light) { color-scheme: light; }
@include color-mode(dark) { color-scheme: dark; }