discourse/app/assets/stylesheets/wcag.scss
Sérgio Saquetim 3019bb577b
DEV: Modernize the post menu from widgets to Glimmer components (#28670)
This commit modernizes the post menu by migrating it from the existing widget-based implementation to Glimmer components. This transition aims to improve the maintainability, performance, and overall developer experience.

It also introduces a new DAG-based transformer API for customizations that aims to be more flexible than the widget base one.

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2024-11-11 15:36:08 -03:00

430 lines
8.4 KiB
SCSS

// Overrides for WCAG color schemes only
// Global
::placeholder {
color: var(--primary-medium);
opacity: 1;
}
:root {
--bronze: #d38f42 !important;
}
html.discourse-no-touch {
.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, .btn-transparent) {
.d-icon {
color: var(--secondary);
}
}
.btn-flat.delete.d-hover,
.btn-flat.delete:hover {
background: var(--danger);
}
.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);
}
}
}
.btn-icon:not(.btn-flat, .btn-danger, .btn-primary):focus {
.d-icon {
color: currentColor;
}
}
}
// 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);
}
}
.menu-panel .panel-body-bottom .btn:hover,
.menu-panel .panel-body-bottom .btn:focus {
.d-icon {
color: var(--primary);
}
}
.d-header-icons .d-icon,
.header-sidebar-toggle button .d-icon {
color: var(--primary-low-mid);
}
.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);
}
.topic-list .topic-list-item-separator .topic-list-data span {
color: var(--danger);
}
.discourse-tag.box {
background: var(--primary-very-low);
}
// 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);
}
}
.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);
}
a[data-clicks]::before,
a[data-clicks]::after {
color: var(--primary-high);
}
// 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,
&: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,
&: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);
}
.alert.alert-success a {
color: var(--primary);
text-decoration: underline;
}
.latest-topic-list .table-heading,
.top-topic-list .table-heading {
color: var(--primary-medium);
}
.latest-topic-list-item .topic-last-activity a,
.category-list .featured-topic a.last-posted-at,
.category-list .featured-topic a.last-posted-at:visited {
color: var(--primary-high-or-secondary-low);
}
.category-boxes .description {
color: var(--primary-med-or-secondary-med);
}
// User Preferences
.user-menu.revamped .quick-access-panel li.unread,
.user-menu.revamped .quick-access-panel li.pending {
background-color: var(--tertiary-very-low);
}
.user-main .deleted-posts {
color: var(--primary);
}
.user-main .flagged-posts {
color: dark-light-choose($primary, $secondary);
}
.uploaded-image-preview
.image-upload-controls
.image-uploader-lightbox-btn
.d-icon {
color: var(--primary);
}
.settings .setting .setting-value .uploaded-image-preview {
background-color: var(--primary-very-low);
}
// Notifications
.user-menu.revamped .tabs-list .btn .badge-notification {
background-color: dark-light-choose($tertiary-high, $tertiary);
}
.user-stream .notification.unread {
background-color: var(--tertiary-very-low);
}
.user-stream .time {
color: var(--primary-very-high);
}
// Admin Settings
.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
}
.settings .setting.overridden h3:before {
background-color: var(--tertiary);
}
.admin-controls .controls {
background: var(--primary-very-low);
}
// Dashboard
.user-metrics .table-cell.user-basic .label,
.user-metrics .table-cell.user-member .label,
.user-metrics .table-cell.user-leader .label {
color: dark-light-choose($primary, $secondary);
}
.admin-contents.admin-plugins td.version .commit-hash {
color: var(--primary-medium);
}
// Search
.search-container
.search-filters
details.search-advanced-additional-options
> summary {
color: var(--highlight-high);
}
.chat-notices__notice,
.chat-notices .chat-retention-reminder {
background-color: var(--tertiary-very-low);
}
// Review
.reviewable-item .reviewable-meta-data .created-at a {
color: var(--primary-medium);
}
.reviewable-item {
background: dark-light-choose($primary-very-low, $secondary-very-high);
}
.reviewable .status span.approved {
color: var(--success-hover);
}
}
// 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);
}