import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { css, unsafeCSS } from "lit";
import { property } from "lit/decorators.js";
import { GdsElement } from "../../gds-element.js";
import { gdsCustomElement, html } from "../../scoping.js";
import { colorsDark, colorsLight, tokens } from "../../tokens.style.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { watch } from "../../utils/decorators/index.js";
let GdsTheme = class extends GdsElement {
  constructor() {
    super(...arguments);
    this.colorScheme = "light";
    this.designVersion = "2023";
  }
  connectedCallback() {
    super.connectedCallback();
    TransitionalStyles.instance.apply(this, "gds-theme");
    this._dynamicStylesController.inject(
      "dark",
      unsafeCSS(`:host {${colorsDark}}`)
    );
  }
  render() {
    return html`<slot></slot>`;
  }
  _onColorSchemeChange() {
    switch (this.colorScheme) {
      case "dark":
        this._dynamicStylesController.inject(
          "color-scheme",
          unsafeCSS(`:host { ${colorsDark}}`)
        );
        break;
      case "light":
      default:
        this._dynamicStylesController.inject(
          "color-scheme",
          unsafeCSS(`:host { ${colorsLight}}`)
        );
        break;
      case "auto":
        this._dynamicStylesController.inject(
          "color-scheme",
          unsafeCSS(
            `:host { ${colorsLight}} @media (prefers-color-scheme: dark) { :host { ${colorsDark} } }`
          )
        );
        break;
    }
    this.dispatchCustomEvent("gds-color-scheme-changed", {
      detail: { colorScheme: this.colorScheme }
    });
  }
  _onDesignVersionChange() {
    this.dispatchCustomEvent("gds-design-version-changed", {
      detail: { designVersion: this.designVersion }
    });
  }
};
GdsTheme.styles = [
  tokens,
  css`
      :host {
        display: contents;
        color: var(--gds-sys-color-content-neutral-01);
        font-family: var(--gds-sys-text-family);
      }
    `
];
__decorateClass([
  property({ reflect: true, attribute: "color-scheme" })
], GdsTheme.prototype, "colorScheme", 2);
__decorateClass([
  property({ reflect: true, attribute: "design-version" })
], GdsTheme.prototype, "designVersion", 2);
__decorateClass([
  watch("colorScheme")
], GdsTheme.prototype, "_onColorSchemeChange", 1);
__decorateClass([
  watch("designVersion")
], GdsTheme.prototype, "_onDesignVersionChange", 1);
GdsTheme = __decorateClass([
  gdsCustomElement("gds-theme")
], GdsTheme);
export {
  GdsTheme
};
