dark_mode.scss

// -------- Functional colors ----------
$export: (
  scale: $scale,
  auto: $auto,

  // Pure functional

  text: (
    primary: $gray-1,
    secondary: $gray-3,
    tertiary: $gray-3,
    placeholder: $gray-5,
    disabled: $gray-5,
    inverse: $gray-9,
    link: $blue-3,
    danger: $red-4,
    success: $green-2,
    warning: $yellow-2,
    white: $white,
  ),

  icon: (
    primary:$gray-1,
    secondary: $gray-4,
    tertiary: $gray-5,
    info: $blue-2,
    danger: $red-4,
    success: $green-2,
    warning: $yellow-2,
  ),

  border: (
    primary: $gray-6,
    secondary: $gray-7,
    tertiary: $gray-4,
    overlay: $gray-6,
    inverse: $white,
    info: rgba($blue-4, 0.4),
    danger: rgba($red-4, 0.4),
    success: rgba($green-3, 0.4),
    warning: rgba($yellow-4, 0.4),
  ),

  bg: (
    canvas: $gray-9,
    canvas-mobile: $black,
    canvas-inverse: $gray-0,
    canvas-inset: darken($gray-9, 2%),
    primary: $gray-9,
    secondary: $gray-9,
    tertiary: $gray-8,
    overlay: $gray-7,
    backdrop: rgba($black, 0.8),
    info: rgba($blue-4, 0.1),
    info-inverse: $blue-4,
    danger: rgba($red-4, 0.1),
    danger-inverse: $red-5,
    success: rgba($green-4, 0.1),
    success-inverse: $green-4,
    warning: rgba($yellow-4, 0.1),
    warning-inverse: $yellow-4,
  ),

  shadow: (
    small: 0 0 transparent,
    medium: 0 3px 6px $black,
    large: 0 8px 24px $black,
    extra-large: 0 12px 48px $black,

    highlight: 0 0 transparent, // top highlight
    inset: 0 0 transparent, // top inner shadow
  ),

  state: (
    hover: (
      primary-bg: $blue-5,
      primary-border: $blue-4,
      primary-text: $gray-0,
      primary-icon: $gray-0,
      secondary-bg: $gray-8,
      secondary-border: $gray-8,
    ),

    selected: (
      primary-bg: $blue-5,
      primary-border: $blue-4,
      primary-text: $gray-0,
      primary-icon: $gray-0,
    ),

    focus: (
      border: $blue-4, // blue focus border
      shadow: 0 0 0 3px $blue-8, // blue focus ring
    ),
  ),

  fade: (
    fg-10: $white-fade-10,
    fg-15: $white-fade-15,
    fg-30: $white-fade-30,
    fg-50: $white-fade-50,
    fg-70: $white-fade-70,
    fg-85: $white-fade-85,

    black-10: $black-fade-10,
    black-15: $black-fade-15,
    black-30: $black-fade-30,
    black-50: $black-fade-50,
    black-70: $black-fade-70,
    black-85: $black-fade-85,

    white-10: $white-fade-10,
    white-15: $white-fade-15,
    white-30: $white-fade-30,
    white-50: $white-fade-50,
    white-70: $white-fade-70,
    white-85: $white-fade-85,
  ),

  // Components

  alert: (
    info: (
      text: $blue-2,
      icon: $blue-2,
      bg: rgba($blue-4, 0.1),
      border: rgba($blue-4, 0.4),
    ),

    warn: (
      text: $yellow-2,
      icon: $yellow-2,
      bg: rgba($yellow-4, 0.1),
      border: rgba($yellow-4, 0.4),
    ),

    error: (
      text: $red-3,
      icon: $red-3,
      bg: rgba($red-4, 0.1),
      border: rgba($red-4, 0.4),
    ),

    success: (
      text: $green-2,
      icon: $green-2,
      bg: rgba($green-4, 0.1),
      border: rgba($green-4, 0.4),
    ),
  ),

  autocomplete: (
    shadow: 0 16px 32px $black-fade-85,
    row-border: $gray-6,
  ),

  blankslate: (
    icon: lighten($gray-5, 5%),
  ),

  btn: (
    text: $gray-1,
    bg: $gray-7,
    border: $gray-6,
    shadow: 0 0 transparent,
    inset-shadow: 0 0 transparent,

    hover-bg: $gray-6,
    hover-border: $gray-3,

    selected-bg: $gray-8,

    focus-bg: $gray-7,
    focus-border: $gray-3,
    focus-shadow: 0 0 0 3px rgba($gray-3, 0.3),

    shadow-active: inset 0 0.15em 0.3em $black-fade-15, // TODO: Deprecate? Not used in Primer CSS
    shadow-input-focus: 0 0 0 0.2em rgba($blue, 0.3), // TODO: Deprecate?

    /* states */

    primary: (
      text: #fff,
      bg: $green-5,
      border: $green-4,
      shadow: 0 0 transparent,
      inset-shadow: 0 0 transparent,

      hover-bg: $green-4,
      hover-border: $green-3,

      selected-bg: $green-5,
      selected-shadow: 0 0 transparent,

      disabled-text: rgba($white, 0.5),
      disabled-bg: rgba($green-5, 0.6),
      disabled-border: transparent,

      focus-bg: $green-5,
      focus-border: $green-3,
      focus-shadow: 0 0 0 3px rgba(#2ea44f, 0.4),

      icon: $white,
      counter-bg: rgba($white, 0.2),
    ),

    outline: (
      text: $blue-3,

      hover-text: $blue-3,
      hover-bg: $gray-6,
      hover-border: $blue-3,
      hover-shadow: 0 1px 0 $black-fade-10,
      hover-inset-shadow: inset 0 1px 0 rgba($white, 0.03),
      hover-counter-bg: rgba($white, 0.2),

      selected-text: $white,
      selected-bg: $blue-7,
      selected-border: $white-fade-10,
      selected-shadow: 0 0 transparent,

      disabled-text: rgba($blue-3, 0.5),
      disabled-bg: $gray-9,
      disabled-counter-bg: rgba($blue-5, 0.05),

      focus-border: $blue-3,
      focus-shadow: 0 0 0 3px rgba($blue-6, 0.4),

      counter-bg: rgba($blue-5, 0.1),
    ),

    danger: (
      text: $red-4,

      hover-text: #fff,
      hover-bg: $red-5,
      hover-border: $red-4,
      hover-shadow: 0 0 transparent,
      hover-inset-shadow: 0 0 transparent,
      hover-counter-bg: rgba(#fff, 0.2),

      selected-text: #fff,
      selected-bg: $red-6,
      selected-border: $white-fade-10,
      selected-shadow: 0 0 transparent,

      disabled-text: rgba($red-4, 0.5),
      disabled-bg: $gray-9,
      disabled-counter-bg: rgba($red-5, 0.05),

      focus-border: $red-4,
      focus-shadow: 0 0 0 3px rgba($red-6, 0.4),

      counter-bg: rgba($red-5, 0.1),

      icon: $red-4,
      hover-icon: $white,
    ),

    counter-bg: $gray-6,
  ),

  counter: (
    text: $gray-1,
    bg: $gray-6,

    primary: (
      text: $gray-1,
      bg: $gray-4,
    ),

    secondary: (
      text: $gray-3,
    ),
  ),

  dropdown: (
    shadow: 0 16px 32px $black-fade-85,
  ),

  label: (
    border: $gray-6,

    primary: (
      text: $gray-2,
      border: $gray-4,
    ),

    secondary: (
      text: $gray-3,
      border: $gray-6,
    ),

    info: (
      text: $blue-4,
      border: rgba($blue-4, 0.4),
    ),

    success: (
      text: $green-3,
      border: rgba($green-4, 0.4),
    ),

    warning: (
      text: $yellow-2,
      border: rgba(#F2D35B, 0.4),
    ),

    danger: (
      text: $red-4,
      border: rgba($red-4, 0.4),
    ),

    // Deprecated
    orange: (
      text: $orange-4,
      border: rgba($orange-4, 0.4),
    ),
  ),

  input: (
    bg: $gray-9,
    contrast-bg: rgba($black, 0.5),
    border: $gray-7,
    shadow: 0 0 transparent,

    disabled-bg: $gray-8,
    disabled-border: $gray-6,

    warning-border: $yellow-3,
    error-border: $red-4,

    tooltip: (
      success: (
        text: $green-2,
        bg: mix($green-4, $gray-9, 10%), // rgba($green-4, 0.1)
        border: mix($green-4, $gray-9, 46%), // rgba($green-4, 0.4) + 6% to adjust for the background
      ),

      warning: (
        text: $yellow-2,
        bg: mix($yellow-4, $gray-9, 10%), // rgba($yellow-4, 0.1)
        border: mix($yellow-4, $gray-9, 46%), // rgba($yellow-4, 0.4) + 6% to adjust for the background
      ),

      error: (
        text: $red-3,
        bg: mix($red-4, $gray-9, 10%), // rgba($red-4, 0.1)
        border: mix($red-4, $gray-9, 46%), // rgba($red-4, 0.4) + 6% to adjust for the background
      ),
    ),
  ),

  avatar: (
    bg: $white-fade-10,
    border: $white-fade-10,
    stack-fade: $gray-6,
    stack-fade-more: $gray-7,
    child-shadow: -2px -2px 0 $gray-9,
  ),

  toast: (
    text: $blue-2,
    bg: $black,
    border: #214981,
    shadow: var(--color-shadow-large),
    icon: $blue-2,
    icon-bg: #121D2E,
    icon-border: #214981,

    success: (
      text: $green-2,
      border: #1C532C,
      icon: $green-2,
      icon-bg: #111F1C,
      icon-border: #1C532C,
    ),

    warning: (
      text: $yellow-2,
      border: #5E4411,
      icon: $yellow-2,
      icon-bg: #1F1C16,
      icon-border: #5E4411,
    ),

    danger: (
      text: $red-3,
      border: #792E2E,
      icon: $red-3,
      icon-bg: #25171C,
      icon-border: #792E2E,
    ),

    loading: (
      text: var(--color-text-primary),
      border: var(--color-border-primary),
      icon: $white,
      icon-bg: $gray-6,
      icon-border: var(--color-border-primary),
    ),
  ),

  timeline: (
    text: $gray-2,
    badge-bg: $gray-9,
    target-badge-border: $blue-5,
    target-badge-shadow: $blue-7,
  ),

  select-menu: (
    border-secondary: $gray-6,
    shadow: 0 0 18px rgba($black, 0.4),
    backdrop-bg: $black-fade-50,
    backdrop-border: $gray-5,
    tap-highlight: rgba($gray-6, 0.5),
    tap-focus-bg: $blue-8,
  ),

  box: (
    blue-border: $blue-7,
    row-yellow-bg: rgba(#EBC440, 0.1),
    row-blue-bg: rgba($blue-2, 0.1),
    header-blue-bg: $gray-9,
    header-blue-border: $gray-6,
    border-info: rgba($blue-4, 0.4),
    bg-info: rgba($blue-4, 0.1),
    border-warning: rgba($yellow-4, 0.4),
    bg-warning: rgba($yellow-4, 0.1),
  ),

  branch-name: (
    text: $gray-1,
    icon: $gray-2,
    bg: rgba($blue-3, 0.1),

    link: (
      text: $blue-3,
      icon: $blue-3,
      bg: rgba($blue-3, 0.1),
    ),
  ),

  markdown: (
    code-bg: rgba($gray-0, 0.15),
    frame-border: lighten($gray-6, 5%),
    blockquote-border: lighten($gray-6, 5%),
    table-border: lighten($gray-6, 5%),
    table-tr-border: darken($gray-6, 4%),
  ),

  menu: (
    heading-text: $gray-3,
    border-active: #F78166, // coral
    bg-active: $gray-8,
  ),

  sidenav: (
    selected-bg: $gray-7,
    border-active: #F78166, // coral
  ),

  header: (
    text: $white-fade-70,
    bg: $gray-8,
    logo: $gray-0,
  ),

  filter-item: (
    bar-bg: darken($gray-8, 2%),
  ),

  hidden-text-expander: (
    bg: $gray-7,
    bg-hover: $gray-6,
  ),

  drag-and-drop: (
    border: darken($gray-6, 5%),
  ),

  upload-enabled: (
    border: lighten($gray-6, 5%),
    border-focused: lighten($blue-5, 8%),
  ),

  previewable-comment-form: (
    border: darken($gray-6, 5%),
  ),

  underlinenav: (
    border: rgba($gray-6, 0),
    border-hover: $gray-6,
    border-active: #F78166,
    text: $gray-3,
    text-hover: $gray-1,
    text-active: $gray-1,
    icon: $gray-4,
    icon-hover: $gray-1,
    icon-active: $gray-1,
    counter-text: $gray-3,
  ),

  verified-badge: (
    text: $green-3,
    bg: rgba($green-3, 0.1),
    border: rgba($green-3, 0.4),
  ),

  social-count: (
    bg: $gray-7,
  ),

  tooltip: (
    text: $white,
    bg: $gray-7,
  ),

  header-search: (
    bg: $gray-9,
    border: $gray-7,
  ),

  search-keyword: (
    hl: rgba($yellow-4, 0.4),
  ),

  diffstat: (
    neutral-bg: $gray-6,
    neutral-border: $white-fade-10,
    deletion-bg: $red-5,
    deletion-border: $red-4,
    addition-bg: $green-5,
    addition-border: $green-4,
  ),

    // Marketing

  mktg: (
    success: mix($green-5, $green-4, 50%),
    info: mix($blue-4, $blue-5, 42%),

    bg-shade-gradient: (
      top: rgba($black, 0.065),
      bottom: rgba($black, 0),
    ),

    btn: (
      bg: $blue-5,
      border: $blue-5,
      text: $gray-0,
      icon: $gray-0,

      focus-shadow: 0 0 0 3px rgba($blue-5, 0.3),

      hover: (
        bg: $blue-4,
        border: $blue-4,
      ),

      disabled: (
        bg: rgba($blue-4, 0.5),
        border: transparent,
        text: rgba($gray-0, 0.5),
        icon: rgba($gray-0, 0.5),
      ),

      primary: (
        bg: $green-5,
        border: $green-5,
        text: $gray-0,
        icon: $gray-0,

        focus-shadow: 0 0 0 3px rgba($green-5, 0.3),

        hover: (
          bg: $green-4,
          border: $green-4,
        ),

        disabled: (
          bg: rgba($green-4, 0.5),
          border: transparent,
          text: rgba($white, 0.5),
          icon: rgba($white, 0.5),
        ),
      ),

      outline: (
        bg: transparent,
        border: rgba($blue-4, 0.5),
        text: $blue-4,
        icon: $blue-4,

        focus-shadow: 0 0 0 3px rgba($blue-4, 0.3),

        hover: (
          bg: transparent,
          border: $blue-4,
          text: $blue-3,
          icon: $blue-3,
        ),

        disabled: (
          bg: transparent,
          border: rgba($blue-4, 0.2),
          text: rgba($blue-4, 0.5),
          icon: rgba($blue-4, 0.5),
        ),
      ),

      dark: (
        bg: transparent,
        border: rgba($gray-1, 0.5),
        text: $gray-1,
        icon: $gray-1,

        focus-shadow: 0 0 0 3px rgba($gray-1, 0.3),

        hover: (
          bg: rgba($gray-1, 0.5),
          border: rgba($gray-1, 0.5),
          text: $gray-9,
          icon: $gray-9,
        ),

        disabled: (
          bg: transparent,
          border: rgba($gray-1, 0.2),
          text: rgba($gray-1, 0.5),
          icon: rgba($gray-1, 0.5),
        ),
      ),
    ),
  ),

  // App level

  files-explorer-icon: $gray-4,
  hl-author-bg: $blue-9,
  hl-author-border: $blue-7,
  logo-subdued: $gray-6,
  discussion-border: desaturate($green-6, 40%),
  discussion-bg-success: rgba($green-4, 0.1),
  actions-workflow-table-sticky-bg: rgba($gray-9, 0.95),
  repo-language-color-border: rgba($white, 0.2),
  code-selection-bg: rgba($blue-2, 0.3), // needs to be semi transparent in dark mode

  highlight: (
    text: #ffd467,
    bg: rgba(204, 143, 44, 0.38),
  ),

  blob: (
    line-highlight-bg: rgba($yellow-3, 0.15),
    line-highlight-border: $yellow-2,
  ),

  diff: (
    addition: (
      text: $green-2,
      bg: var(--color-diff-blob-addition-line-bg),
      border: $green-6,
    ),

    deletion: (
      text: $red-4,
      bg: var(--color-diff-blob-deletion-line-bg),
      border: $red-6,
    ),

    change: (
      text: $yellow-2,
      bg: $yellow-9,
      border: $yellow-5,
    ),
  ),

  diff-blob: (
    num-text: $white-fade-30,
    num-hover-text: rgba($white, 0.6),

    addition: (
      num-text: $green-3,
      num-hover-text: $green-1,
      num-bg: rgba($green-4, 0.10),
      line-bg: rgba($green-4, 0.20),
      word-bg: rgba($green-4, 0.55),
    ),

    deletion: (
      num-text: $red-4,
      num-hover-text: $red-2,
      num-bg: rgba($red-5, 0.10),
      line-bg: rgba($red-5, 0.20),
      word-bg: rgba($red-5, 0.50),
    ),

    hunk: (
      text: $gray-3,
      num-bg: rgba($blue-3, 0.15),
      line-bg: rgba($blue-3, 0.10),
    ),

    empty-block-bg: $gray-8, // for split diffs

    selected-line-highlight-bg: rgba($yellow-4, 0.1),
    selected-line-highlight-border: $yellow-4,
    selected-line-highlight-mix-blend-mode: normal,

    expander: (
      icon: $gray-3,
      hover-icon: $gray-0,
      hover-bg: $blue-5,
    ),

    // add line comment button -> blue [+]
    comment-button: (
      icon: $white,
      bg: $blue-5,
      gradient-bg: lighten($blue-5, 5%), // gradient top
    ),
  ),

  global-nav: (
    logo: $gray-0,
    bg: $gray-8,
    text: $gray-1,
    icon: $gray-1,
    input-bg: $gray-9,
    input-border: $gray-7,
    input-icon: $gray-7,
    input-placeholder: $gray-5,
  ),

  calendar-graph: (
    /*bg: $white,
    border: $white,*/
    day-bg: $gray-8,
    day-border: rgba(27, 31, 35, 0.06),
    day-L1-bg: #003820,
    day-L2-bg: #00602D,
    day-L3-bg: #10983D,
    day-L4-bg: #27D545,
    day-L4-border: rgba(255, 255, 255, 0.05),
    day-L3-border: rgba(255, 255, 255, 0.05),
    day-L2-border: rgba(255, 255, 255, 0.05),
    day-L1-border: rgba(255, 255, 255, 0.05),
  ),

  footer-invertocat: (
    octicon: $gray-6,
    octicon-hover: $gray-4,
  ),

  pr-state: (
    draft: (
      text: $gray-3,
      bg: rgba($gray-3, 0.1),
      border: rgba($gray-3, 0.4),
    ),

    open: (
      text: $green-3,
      bg: rgba($green-3, 0.1),
      border: rgba($green-3, 0.4),
    ),

    merged: (
      text: $purple-4,
      bg: rgba($purple-3, 0.1),
      border: rgba($purple-3, 0.4),
    ),

    closed: (
      text: $red-4,
      bg: rgba($red-5, 0.1),
      border: rgba($red-5, 0.4),
    ),
  ),

  topic-tag: (
    text: $blue-3,
    bg: rgba($blue-4, 0.1),
    hover-bg: rgba($blue-4, 0.2),
    active-bg: rgba($blue-4, 0.15),
  ),

  merge-box: (
    success-icon-bg: rgba($green-4, 0.1),
    success-icon-text: $green-3,
    success-icon-border: rgba($green-4, 0.4),
    success-indicator-bg: $green-5,
    success-indicator-border: $green-4,
    merged-icon-bg: rgba($purple-3, 0.1),
    merged-icon-text: $purple-4,
    merged-icon-border: rgba($purple-3, 0.4),
    merged-box-border: rgba($purple-3, 0.4),
    neutral-icon-bg: rgba($gray-1, 0.1),
    neutral-icon-text: $gray-3,
    neutral-icon-border: rgba($gray-1, 0.4),
    neutral-indicator-bg: $gray-5,
    neutral-indicator-border: $gray-4,
    warning-icon-bg: rgba($yellow-4, 0.1),
    warning-icon-text: $yellow-2,
    warning-icon-border: rgba($yellow-4, 0.4),
    warning-box-border: rgba($yellow-4, 0.4),
    warning-merge-highlight: rgba($yellow-4, 0.1),
    error-icon-bg: rgba($red-4, 0.1),
    error-icon-text: $red-4,
    error-icon-border: rgba($red-4, 0.4),
    error-indicator-bg: $red-5,
    error-indicator-border: $red-4,
  ),

  project: (
    card-bg: $gray-8,
    header-bg: $gray-9,
    sidebar-bg: $gray-8,
    gradient-in: $gray-8,
    gradient-out: rgba($gray-8, 0),
  ),

  checks: (
    bg: var(--color-bg-canvas-inset),

    run-border-width: 1px,
    container-border-width: 1px,

    text-primary: var(--color-text-primary),
    text-secondary: var(--color-text-secondary),
    text-link: var(--color-text-link),

    btn-icon: var(--color-icon-secondary),
    btn-hover-icon: var(--color-text-primary),
    btn-hover-bg: var(--color-btn-hover-bg),

    input-text: var(--color-text-secondary),
    input-placeholder-text: var(--color-text-placeholder),
    input-focus-text: var(--color-text-primary),
    input-bg: var(--color-input-bg),
    input-shadow: 0 0 0 1px $gray-7, // var(--color-input-border)

    dropdown-text: var(--color-text-primary),
    dropdown-bg: var(--color-bg-overlay),
    dropdown-border: var(--color-border-overlay),
    dropdown-hover-text: var(--color-state-hover-primary-text),
    dropdown-hover-bg: var(--color-state-hover-primary-bg),
    dropdown-btn-hover-text: var(--color-state-hover-primary-text),
    dropdown-btn-hover-bg: var(--color-state-hover-secondary-bg),

    scrollbar-thumb-bg: $gray-6,

    header-label-text: var(--color-text-secondary),
    header-label-open-text: var(--color-text-primary),
    header-border: var(--color-border-secondary),
    header-icon: var(--color-icon-secondary),

    line-text: var(--color-text-secondary),
    line-num-text: var(--color-text-tertiary),
    line-timestamp-text: var(--color-text-tertiary),
    line-hover-bg: var(--color-state-hover-secondary-bg),
    line-selected-bg: var(--color-bg-info),
    line-selected-num-text: var(--color-text-link),
    line-dt-fm-text: var(--color-text-inverse),
    line-dt-fm-bg: $yellow-3,

    gate-bg: rgba($yellow-6, 0.15),
    gate-text: var(--color-text-secondary),
    gate-waiting-text: var(--color-text-warning),

    step-header-open-bg: var(--color-state-hover-secondary-bg),
    step-error-text: var(--color-text-danger),
    step-warning-text: var(--color-text-warning),

    logline-text: $gray-4,
    logline-num-text: var(--color-text-tertiary),
    logline-debug-text: $purple-3,
    logline-error-text: var(--color-text-secondary),
    logline-error-num-text: var(--color-text-tertiary),
    logline-error-bg: var(--color-bg-danger),
    logline-warning-text: var(--color-text-secondary),
    logline-warning-num-text: var(--color-text-warning),
    logline-warning-bg: var(--color-bg-warning),
    logline-command-text: $blue-3,
    logline-section-text: var(--color-text-success),
  ),

  intro-shelf: (
    gradient-left: rgba($blue-4, 0.1),
    gradient-right: rgba($green-4, 0.1),
    gradient-in: $gray-9,
    gradient-out: rgba($gray-9, 0),
  ),

  marketing-icon: (
    primary: $blue-2,
    secondary: $blue-5,
  ),

  // Syntax highlighting

  // when reading code
  prettylights: (
    syntax: (
      comment: $gray-3,
      constant: $blue-2,
      entity: $purple-2,
      storage-modifier-import: $gray-1,
      entity-tag: $green-1,
      keyword: $red-3,
      string: $blue-1,
      variable: $orange-2,
      brackethighlighter-unmatched: $red-4,
      invalid-illegal-text: $gray-0,
      invalid-illegal-bg: $red-7,
      carriage-return-text: $gray-0,
      carriage-return-bg: $red-6,
      string-regexp: $green-1,
      markup-list: $yellow-1,
      markup-heading: $blue-5,
      markup-italic: $gray-1,
      markup-bold: $gray-1,
      markup-deleted-text: $red-0,
      markup-deleted-bg: $red-8,
      markup-inserted-text: $green-0,
      markup-inserted-bg: $green-8,
      markup-changed-text: $orange-0,
      markup-changed-bg: $orange-8,
      markup-ignored-text: $gray-1,
      markup-ignored-bg: $blue-6,
      meta-diff-range: $purple-2,
      brackethighlighter-angle: $gray-3,
      sublimelinter-gutter-mark: $gray-5,
      constant-other-reference-link: $blue-1,
    ),
  ),

  // when editing code
  codemirror: (
    text: $gray-1,
    bg: var(--color-bg-canvas),

    gutters-bg: var(--color-bg-canvas),
    guttermarker-text: $gray-9,
    guttermarker-subtle-text: $gray-4,
    linenumber-text: $gray-3,
    cursor: $gray-0,
    selection-bg: var(--color-code-selection-bg),
    activeline-bg: $gray-8,
    matchingbracket-text: $gray-1,
    lines-bg: var(--color-bg-canvas),

    syntax: (
      comment: $gray-3,
      constant: $blue-2,
      entity: $purple-2,
      keyword: $red-3,
      storage: $red-3,
      string: $blue-1,
      support: $blue-2,
      variable: $orange-2,
    ),
  ),

  // used in the Actions logs
  ansi: (
    black: $gray-9,
    black-bright: $gray-8,
    white: $gray-2,
    white-bright: $gray-2,
    gray: $gray-4,
    red: $red-3,
    red-bright: $red-2,
    green: $green-3,
    green-bright: $green-2,
    yellow: $yellow-3,
    yellow-bright: $yellow-2,
    blue: $blue-3,
    blue-bright: $blue-2,
    magenta: $purple-3,
    magenta-bright: $purple-2,
    cyan: #76e3ea, // custom
    cyan-bright: #b3f0ff, // custom
  ),
);