From c39893364bcf6e997df29b6a940f464b83733723 Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 9 Jan 2025 14:18:05 -0500 Subject: [PATCH] DEV: fix and improve sidebar CSS variables (#30673) --- .../common/base/sidebar-footer.scss | 4 +-- .../base/sidebar-more-section-links.scss | 4 +-- .../common/base/sidebar-section-link.scss | 20 ++++++++--- .../common/base/sidebar-section.scss | 7 ++-- .../stylesheets/common/base/sidebar.scss | 33 +++++++++++++++---- .../components/sidebar/sidebar-section.scss | 2 +- 6 files changed, 51 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss index e73d80a8ac4..6e13a33f1f2 100644 --- a/app/assets/stylesheets/common/base/sidebar-footer.scss +++ b/app/assets/stylesheets/common/base/sidebar-footer.scss @@ -24,8 +24,8 @@ pointer-events: none; background: linear-gradient( to bottom, - rgba(var(--secondary-rgb), 0), - rgba(var(--secondary-rgb), 1) + transparent, + var(--d-sidebar-footer-fade) ); } } diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index b8cc212cfb2..4c71fb598f1 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -2,7 +2,7 @@ background-color: var(--d-sidebar-background); transition: background-color 0.25s; box-shadow: var(--shadow-card); - border: 1px solid var(--primary-low); + border: 1px solid var(--d-sidebar-border-color); margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); .sidebar-row { @@ -16,7 +16,7 @@ } .sidebar-more-section-links-details-content-footer { - border-top: 2px solid var(--primary-low); + border-top: 2px solid var(--d-sidebar-border-color); display: flex; width: 100%; diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 31ba7442302..ce058ff691a 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -34,24 +34,33 @@ &:focus, &:hover { background: var(--d-sidebar-highlight-background); + color: var(--d-sidebar-highlight-color); outline: none; .prefix-text { background: var(--d-sidebar-highlight-prefix-background); } + .sidebar-section-link-suffix.icon.unread svg { + color: var(--d-sidebar-highlight-suffix-color); + } } &--active, &.active { - background: var(--d-selected); + background: var(--d-sidebar-active-background); + color: var(--d-sidebar-active-color); font-weight: bold; .sidebar-section-link-prefix { &.icon { - color: var(--d-sidebar-highlight-color); + color: var(--d-sidebar-active-color); } } + .sidebar-section-link-content-badge, + .sidebar-section-link-suffix.icon.unread svg { + color: var(--d-sidebar-active-suffix-color); + } .sidebar-section-link-hover:hover .sidebar-section-hover-button { - background-color: var(--d-selected); + background-color: var(--d-sidebar-active-background); } } @@ -87,7 +96,7 @@ } &.unread svg { - color: var(--tertiary-med-or-tertiary); + color: var(--d-sidebar-suffix-color); } } } @@ -196,6 +205,7 @@ justify-content: center; border-radius: 100%; background: var(--d-sidebar-prefix-background); + color: var(--d-sidebar-prefix-color); width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); font-size: var(--font-down-2); @@ -206,7 +216,7 @@ .sidebar-section-hover-button { display: none; - color: var(--d-sidebar-link-icon-color); + color: var(--d-sidebar-highlight-color); border: none; background: transparent; padding: 0 0 0 0.5em; diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 36377f02f2e..98fbaceed2b 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -66,7 +66,7 @@ min-width: 0; padding: 0; font-size: var(--font-down-2-rem); - color: var(--primary-medium); + color: var(--d-sidebar-header-color); font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; @@ -75,7 +75,10 @@ justify-content: flex-start; &:hover { - color: var(--primary-medium); + color: var(--d-sidebar-header-color); + .d-icon { + color: var(--d-sidebar-header-icon-color); + } } &:focus { diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 855b3b98d32..f0ee3b068f1 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -3,35 +3,54 @@ @include breakpoint(large) { --d-sidebar-width: #{$d-sidebar-narrow-width}; } - --d-sidebar-animation-time: 0.25s; - --d-sidebar-animation-ease: ease-in-out; - // 1.25rem gets text left-aligned with the hamburger icon --d-sidebar-row-horizontal-padding: 1rem; // ems so height is variable along with font size --d-sidebar-row-height: 2.2em; + --d-sidebar-animation-time: 0.25s; + --d-sidebar-animation-ease: ease-in-out; + --d-sidebar-background: var(--secondary); --d-sidebar-admin-background: var(--primary-very-low); - --d-sidebar-prefix-background: var( - --primary-low - ); // example: chat participant count - --d-sidebar-header-color: var(--primary); + // must be rgba for gradient + --d-sidebar-footer-fade: rgba(var(--secondary-rgb), 1); + + --d-sidebar-header-color: var(--primary-medium); --d-sidebar-header-icon-color: var(--primary-medium); + --d-sidebar-border-color: var(--primary-low); + --d-sidebar-link-color: var(--primary-high); --d-sidebar-link-icon-color: var(--primary-500); --d-sidebar-link-badge-color: var(--primary-700); // example: new count + // example: chat participant count + --d-sidebar-prefix-background: var(--primary-low); + --d-sidebar-prefix-color: var(--d-sidebar-link-color); + + // example: unread dot + --d-sidebar-suffix-color: var(--tertiary-med-or-tertiary); + + // highlight applies to both hover and focus states --d-sidebar-highlight-background: var(--primary-low); --d-sidebar-highlight-color: var(--primary-high); --d-sidebar-highlight-prefix-background: var(--primary-300); + --d-sidebar-highlight-prefix-color: var(--d-sidebar-highlight-color); + --d-sidebar-highlight-suffix-color: var(--tertiary-med-or-tertiary); + --d-sidebar-highlight-hover-background: var( --primary-medium ); // example: hovering a button within a highlighted section --d-sidebar-highlight-hover-icon: var( --primary-very-low ); // example: hovering a button within a highlighted section + + --d-sidebar-active-background: var(--d-selected); + --d-sidebar-active-color: var(--d-sidebar-link-color); + --d-sidebar-active-icon-color: var(--d-sidebar-link-color); + --d-sidebar-active-prefix-background: var(--primary-300); + --d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary); } .sidebar-row { diff --git a/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss b/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss index 5d6eafddde7..f7bc82c6122 100644 --- a/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss +++ b/app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss @@ -1,6 +1,6 @@ .sidebar-section-wrapper { padding-block: 0.35rem; - border-bottom: 1px solid var(--secondary-very-high); + border-bottom: 1px solid var(--d-sidebar-border-color); &:first-child { padding-top: 0; }