@use '../compiled/tokens/scss/color';
@use '../compiled/tokens/scss/opacity';
@use '../mixins/theme';

/**
 * These are the default, global theme properties. These should not be specific
 * to any particular component or element, which can define their own theme
 * properties wherever their styles are defined.
 */

/**
 * Light theme (default)
 */

@include theme.props {
  --theme-color-background-base: #{color.$text-light-emphasis};
  --theme-color-background-kbd: transparent;
  --theme-color-background-secondary: #{color.$base-gray-lighter};
  --theme-color-border-base: #{color.$base-gray-light};
  --theme-color-border-kbd: var(--theme-color-border-base);
  --theme-color-border-text-group: var(--theme-color-border-base);
  --theme-color-text-action: #{color.$text-action};
  --theme-color-text-base: #{color.$text-dark};
  --theme-color-text-code: #{color.$text-code};
  --theme-color-text-emphasis: var(--theme-color-text-base);
  --theme-color-text-label: inherit;
  --theme-color-text-muted: #{color.$text-dark-muted};
  --theme-opacity-del: #{opacity.$muted};
}

/**
 * Dark theme
 */

@include theme.props(dark) {
  --theme-color-background-base: #{color.$brand-primary};
  --theme-color-background-kbd: #{color.$brand-primary-dark};
  --theme-color-background-secondary: #{color.$brand-primary-dark};
  --theme-color-border-base: #{color.$brand-primary-darker};
  --theme-color-border-kbd: var(--theme-color-border-base);
  --theme-color-border-text-group: var(--theme-color-border-base);
  --theme-color-text-action: var(--theme-color-text-emphasis);
  --theme-color-text-base: #{color.$text-light};
  --theme-color-text-code: var(--theme-color-text-emphasis);
  --theme-color-text-emphasis: #{color.$text-light-emphasis};
  --theme-color-text-label: var(--theme-color-text-emphasis);
  --theme-color-text-muted: #{color.$text-light};
  --theme-opacity-del: 1;
}

/**
 * Alternate theme
 *
 * An alternate, or secondary, theme that can offset a section of content visually
 * from its surroundings. This may be helpful for distinguishing rows of content
 * from one another in a subtle way.
 */

@include theme.props(alternate) {
  --theme-color-background-base: var(--theme-color-background-secondary);
}

/**
 * Container styles
 */

.t-light,
.t-dark,
.t-alternate {
  @include theme.rules;
}