discourse/app/assets/stylesheets/wcag.scss

// Overrides for WCAG color schemes only

// Global

::placeholder {
  color: var(--primary-medium);
  opacity: 1;
}

html.discourse-no-touch {
  .btn-default:not(.btn-flat, .btn-danger, .btn-primary),
  .btn-icon:not(.btn-flat, .btn-danger, .btn-primary) {
    &.btn-default {
      .d-icon {
        color: var(--primary-medium);
      }
    }
    &:hover,
    &.btn-hover,
    &:focus {
      .d-icon {
        color: var(--secondary);
      }
    }
  }
  .btn-primary .d-icon {
    color: var(--secondary);
  }
  .btn-icon.ok,
  .btn-icon.cancel,
  .btn-danger:not(.btn-flat) {
    .d-icon {
      color: var(--secondary);
    }
  }
  .btn-flat.delete.d-hover {
    background: var(--danger);
  }
  .menu-links-header {
    .btn-icon:hover {
      .d-icon {
        color: var(--primary);
      }
    }
  }

  .select-kit.single-select .select-kit-header:focus {
    border-color: var(--primary-medium);
  }
}

html {
  // html parent adds some additional specificity to override core styles
  .nav-pills > li > a:not(.active):hover {
    background: var(--tertiary-low);
    color: var(--primary);
  }

  // Composer

  #reply-control .reply-to .reply-details .d-icon {
    opacity: 1;
    color: var(--primary-low-mid);
  }

  .d-editor-button-bar {
    .btn-icon.btn-default .d-icon {
      color: var(--primary-low-mid);
      .discourse-no-touch & {
        &:hover {
          color: var(--secondary);
        }
      }
    }
  }

  // Site header

  .menu-panel li a.widget-link:hover,
  .menu-panel li a.widget-link:focus,
  .menu-panel li.heading a.widget-link:hover,
  .menu-panel li.heading a.widget-link:focus {
    color: var(--primary);
    background-color: var(--highlight-medium);
    .d-icon {
      color: var(--primary);
    }
  }

  div.menu-links-header button:hover,
  div.menu-links-header button:focus {
    background: var(--tertiary-high);
  }

  .menu-panel .panel-body-bottom .btn:hover {
    .d-icon {
      color: var(--primary);
    }
  }

  .d-header-icons .d-icon {
    color: var(--primary-low-mid);
  }

  .d-header-icons .icon:hover .d-icon,
  .d-header-icons .icon:focus .d-icon {
    color: var(--primary-high);
  }

  .d-header-icons .unread-notifications {
    background: var(--tertiary);
  }

  .extra-info-wrapper {
    --header_primary-high: var(--header_primary);
  }

  // Topic list

  table th {
    color: var(--primary-high);
  }

  .heatmap-high,
  .heatmap-high a,
  .heatmap-med,
  .heatmap-med a,
  .heatmap-low,
  .heatmap-low a {
    color: var(--primary-medium) !important;
  }

  .badge-notification {
    background: var(--primary-medium);
  }

  .badge-notification.unread-posts {
    background: var(--tertiary);
  }
  .select-kit.dropdown-select-box.period-chooser
    .period-chooser-header
    h2.selected-name
    .top-date-string,
  .select-kit.dropdown-select-box.period-chooser
    .period-chooser-row
    .top-date-string {
    color: var(--primary-high);
  }

  .topic-list .posters a:first-child .avatar.latest:not(.single) {
    box-shadow: 0 0 0 2px var(--tertiary);
  }

  // Posts

  .discourse-no-touch .topic-body .actions .fade-out {
    opacity: 1;
  }

  .topic-body .reply-to-tab {
    color: var(--primary-medium);
    .d-icon {
      color: var(--primary-low-mid);
    }
  }

  .timeline-container .topic-timeline {
    .timeline-scrollarea {
      border-color: var(--primary-low-mid);
    }
    .timeline-handle {
      background: var(--primary-low-mid);
    }
  }

  .topic-map h4 {
    color: var(--primary);
  }

  .quote-controls,
  .quote-controls .d-icon {
    color: var(--primary-medium);
  }

  blockquote {
    a,
    a:visited {
      color: var(--tertiary);
    }
  }
  .meta .d-icon + .filename,
  .meta .informations {
    color: var(--secondary);
  }

  #topic-footer-buttons .bookmark.bookmarked:hover .d-icon-bookmark {
    color: var(--secondary);
  }

  .gap {
    color: var(--primary-medium);
  }

  .badge-notification.clicks {
    color: var(--primary-high);
  }

  .topic-map {
    background: transparent;
  }

  // Post controls

  .topic-admin-menu-button-container,
  .timeline-controls {
    .btn .d-icon {
      // admin wrenches
      color: var(--primary-medium);
    }
  }

  nav.post-controls {
    .actions {
      button.create,
      button.create .d-icon {
        color: var(--primary-high-or-secondary-low);
      }
      button {
        &.d-hover,
        &:focus,
        &:active {
          background: var(--primary-medium);
          color: var(--secondary);
          .d-icon {
            color: var(--secondary);
          }
        }

        &.delete.d-hover,
        &.delete:hover,
        &.delete:focus {
          background: var(--danger);
          color: var(--secondary);
          .d-icon {
            color: var(--secondary);
          }
        }
        &.bookmark {
          &.bookmarked {
            .d-icon {
              color: var(--tertiary);
            }
            &.d-hover {
              .d-icon {
                color: var(--tertiary-medium);
              }
            }
          }
        }
      }
      .double-button .button-count {
        color: var(--primary-medium);
      }
      .double-button:hover {
        button,
        .d-icon,
        button.has-like .d-icon {
          color: var(--love);
        }
      }
    }

    .show-replies {
      color: var(--primary-medium);
      &:hover,
      &:focus {
        color: var(--secondary);
        background: var(--primary-medium);
        .d-icon {
          color: var(--secondary);
        }
      }
    }
  }

  // Categories

  .list-cell,
  .table-heading,
  .category-list td,
  .category-list th {
    color: var(--primary-medium);
  }

  // Admin

  .admin-controls {
    .nav-pills > li > a:not(.active):hover {
      background: var(--primary-medium);
      color: var(--secondary);
    }
  }

  .cooked mark,
  .d-editor-preview mark {
    background-color: yellow; // resets to browser default
  }
}

// chat

.no-touch
  .chat-messages-container
  .chat-message:hover
  .chat-message-react-btn:hover {
  .d-icon {
    color: var(--primary) !important;
  }
}

// sidebar

.sidebar-wrapper
  .sidebar-sections
  .sidebar-section-link-suffix.icon.unread
  svg {
  color: var(--tertiary);
}