/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

// THEMING

.hds-code-block--theme-dark {
  // COLORS

  // Descriptive color names:

  --hds-code-block-color-blue: #2d8eff;
  --hds-code-block-color-cyan: #32fff7;
  --hds-code-block-color-green: #86ff13;
  --hds-code-block-color-orange: #ffa800;
  --hds-code-block-color-purple: #c76cff;
  --hds-code-block-color-red: #ff3b20;

  // Semantic color names:

  // Base UI colors:
  --hds-code-block-color-foreground-primary: #d5d7db;
  --hds-code-block-color-foreground-faint: #b2b6bd;
  --hds-code-block-color-surface-primary: #0d0e12;
  --hds-code-block-color-surface-faint: #15181e;
  // status ----
  --hds-code-block-color-foreground-success: #009241;
  --hds-code-block-color-foreground-critical: #ef3016;
  // interactive ---
  --hds-code-block-color-foreground-interactive: #dedfe3;
  --hds-code-block-color-foreground-interactive-hover: #fff;
  --hds-code-block-color-foreground-interactive-active: #f1f2f3;
  --hds-code-block-color-surface-interactive-active: #2b303c;
  // actions ---
  --hds-code-block-color-foreground-action: #2b89ff;
  --hds-code-block-color-foreground-action-hover: #389aff;
  --hds-code-block-color-foreground-action-active: #4ca1ff;
  // borders
  --hds-code-block-color-border-strong: rgba(178, 182, 189, 40%); // #b2b6bd66
  --hds-code-block-color-border-primary: rgba(178, 182, 189, 20%); // #b2b6bd33
  // selection
  --hds-code-block-color-foreground-selection: #0d0e12;
  --hds-code-block-color-surface-selection: #86ff13;

  // CodeBlock UI:
  // lines of code - highlighted ----
  --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%);
  --hds-code-block-color-line-highlight-border: #1555d4;
  // Copy Button
  // TODO: Remove focus tokens once global tokens for dark themes are implemented
  --hds-code-block-color-focus-action-internal: #9bc7fd;
  --hds-code-block-color-focus-action-external: #0d69f2;

  // Syntax highlighting tokens:
  // general ----
  --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
  // specific ----
  --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
  --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);
  --hds-code-block-color-attr-value: var(--hds-code-block-color-blue);
  --hds-code-block-color-boolean: var(--hds-code-block-color-purple);
  --hds-code-block-color-builtin: var(--hds-code-block-color-orange);
  --hds-code-block-color-char: var(--hds-code-block-color-orange);
  --hds-code-block-color-class-name: var(--hds-code-block-color-blue);
  --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint);
  --hds-code-block-color-control: var(--hds-code-block-color-cyan);
  --hds-code-block-color-constant: var(--hds-code-block-color-purple);
  --hds-code-block-color-deleted: var(--hds-code-block-color-red);
  --hds-code-block-color-entity: var(--hds-code-block-color-green);
  --hds-code-block-color-function: var(--hds-code-block-color-blue);
  --hds-code-block-color-important: var(--hds-code-block-color-red);
  --hds-code-block-color-keyword: var(--hds-code-block-color-green);
  --hds-code-block-color-namespace: var(--hds-code-block-color-red);
  --hds-code-block-color-number: var(--hds-code-block-color-purple);
  --hds-code-block-color-operator: var(--hds-code-block-color-cyan);
  --hds-code-block-color-prolog: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-property: var(--hds-code-block-color-blue);
  --hds-code-block-color-punctuation: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-regex: var(--hds-code-block-color-orange);
  --hds-code-block-color-script: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-selector: var(--hds-code-block-color-green);
  --hds-code-block-color-string: var(--hds-code-block-color-orange);
  --hds-code-block-color-symbol: var(--hds-code-block-color-orange);
  --hds-code-block-color-tag: var(--hds-code-block-color-green);
  --hds-code-block-color-url: var(--hds-code-block-color-cyan);
  // language-scoped:
  // css ----
  --hds-code-block-color-lang-css: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-css-token: var(--hds-code-block-color-green);
  --hds-code-block-color-lang-css-atrule: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-css-entity: var(--hds-code-block-color-blue);
  --hds-code-block-color-lang-css-function: var(--hds-code-block-color-cyan);
  --hds-code-block-color-lang-css-property: var(--hds-code-block-color-cyan);
  --hds-code-block-color-lang-css-punctuation: var(--hds-code-block-color-orange);
  --hds-code-block-color-lang-css-not-atrule: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-lang-css-selector: var(--hds-code-block-color-blue);
  --hds-code-block-color-lang-css-url: var(--hds-code-block-color-orange);
  // javascript ----
  --hds-code-block-color-lang-js-constant: var(--hds-code-block-color-orange);
  // markup/html ----
  --hds-code-block-color-lang-markup-attr-value: var(--hds-code-block-color-yellow);
  --hds-code-block-color-lang-markup-entity-named: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-markup-entity-not-named: var(--hds-code-block-color-green);
}

.hds-code-block {
  // Syntax highlighting ----

  // General tokens
  .token {
    color: var(--hds-code-block-color-token);
  }

  .token.atrule {
    color: var(--hds-code-block-color-atrule);
  }

  .token.attr-name {
    color: var(--hds-code-block-color-attr-name);
  }

  .token.attr-value {
    color: var(--hds-code-block-color-attr-value);
  }

  .token.boolean {
    color: var(--hds-code-block-color-boolean);
  }

  .token.builtin {
    color: var(--hds-code-block-color-builtin);
  }

  .token.char {
    color: var(--hds-code-block-color-char);
  }

  .token.class-name {
    color: var(--hds-code-block-color-class-name);
  }

  .token.comment {
    color: var(--hds-code-block-color-comment);
  }

  .token.constant {
    color: var(--hds-code-block-color-constant);
  }

  .token.deleted {
    color: var(--hds-code-block-color-deleted);
  }

  .token.entity {
    color: var(--hds-code-block-color-entity);
  }

  .token.function {
    color: var(--hds-code-block-color-function);
  }

  .token.important {
    color: var(--hds-code-block-color-important);
  }

  .token.keyword {
    color: var(--hds-code-block-color-keyword);
  }

  .token.namespace {
    color: var(--hds-code-block-color-namespace);
  }

  .token.number {
    color: var(--hds-code-block-color-number);
  }

  .token.operator {
    color: var(--hds-code-block-color-operator);
  }

  .token.punctuation {
    color: var(--hds-code-block-color-punctuation);
  }

  .token.prolog {
    color: var(--hds-code-block-color-prolog);
  }

  .token.property {
    color: var(--hds-code-block-color-property);
  }

  .token.regex {
    color: var(--hds-code-block-color-regex);
  }

  .token.script {
    color: var(--hds-code-block-color-script);
  }

  .token.selector {
    color: var(--hds-code-block-color-selector);
  }

  .token.string {
    color: var(--hds-code-block-color-string);
  }

  .token.symbol {
    color: var(--hds-code-block-color-symbol);
  }

  .token.tag {
    color: var(--hds-code-block-color-tag);
  }

  .token.url {
    color: var(--hds-code-block-color-url);
  }

  .token.variable {
    color: var(--hds-code-block-color-comment);
  }

  // Language-specific
  .language-css {
    color: var(--hds-code-block-color-lang-css);

    .token {
      color: var(--hds-code-block-color-lang-css-token);
    }

    .token.atrule {
      color: var(--hds-code-block-color-lang-css-atrule);
    }

    .token.rule:not(.atrule) {
      color: var(--hds-code-block-color-lang-css-not-atrule);
    }

    .token.entity {
      color: var(--hds-code-block-color-lang-css-entity);
    }

    .token.function {
      color: var(--hds-code-block-color-lang-css-function);
    }

    .token.property {
      color: var(--hds-code-block-color-lang-css-property);
    }

    .token.punctuation {
      color: var(--hds-code-block-color-lang-css-punctuatione);
    }

    .token.selector {
      color: var(--hds-code-block-color-lang-css-selector);
    }

    .token.url {
      color: var(--hds-code-block-color-lang-css-url);
    }
  }

  .language-javascript {
    .token.constant {
      color: var(--hds-code-block-color-lang-js-constant);
    }
  }

  .language-markup,
  .language-html {
    .token.attr-value {
      color: var(--hds-code-block-color-lang-markup-attr-value);
    }

    .token.entity.named-entity {
      color: var(--hds-code-block-color-lang-markup-entity-named);
    }

    .token.entity:not(.named-entity) {
      color: var(--hds-code-block-color-lang-markup-entity-not-named);
    }
  }
}