@import './variables';

@mixin dsr-design-prism-light {
  --color-prism-grey: #93a1a1;
  --color-prism-blue: #7c91bd;
  --color-prism-cyan: #8b81c3;
  --color-prism-entity: #657b83;
  --color-prism-green: #51a2a0;
  --color-prism-yellow: #ee7800;
  --color-prism-orange: #e45435;
}

@mixin dsr-design-prism-dark {
  --color-prism-grey: #93a1a1;
  --color-prism-blue: #95abd7;
  --color-prism-cyan: #bab1df;
  --color-prism-entity: #657b83;
  --color-prism-green: #8ec298;
  --color-prism-yellow: #e3c26a;
  --color-prism-orange: #ee869a;
}

:root {
  @include dsr-design-prism-light;
  @media (prefers-color-scheme: dark) {
    @include dsr-design-prism-dark;
  }
}
body[data-theme='dark'] {
  @include dsr-design-prism-dark;
}

.token {
  &.important,
  &.bold {
    font-weight: $bold-weight;
  }
  &.italic {
    font-style: italic;
  }

  &.comment,
  &.block-comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--color-prism-grey);
  }

  &.property,
  &.tag,
  &.boolean,
  &.number,
  &.constant,
  &.symbol,
  &.deleted {
    color: var(--color-prism-blue);
  }

  &.selector,
  &.attr-name,
  &.string,
  &.char,
  &.builtin,
  &.url,
  &.inserted {
    color: var(--color-prism-cyan);
  }

  &.entity {
    color: var(--color-prism-entity);
  }

  &.atrule,
  &.attr-value,
  &.keyword {
    color: var(--color-prism-green);
  }

  &.function,
  &.class-name {
    color: var(--color-prism-yellow);
  }

  &.regex,
  &.important,
  &.variable,
  &.operator {
    color: var(--color-prism-orange);
  }
}