From 16b1a6e52bec83ed25bca077fe2ea30b5966f3ab Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 25 Mar 2024 20:53:29 -0400 Subject: [PATCH] fix: improve Dark Mode styling for icons barely visible in dark --- .../common/src/styles/_variables-theme-salesforce.scss | 3 +-- packages/common/src/styles/_variables.scss | 8 +++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 4b863fe6a..a47252b75 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -204,6 +204,5 @@ $slick-pagination-page-input-border-radius: 3px !default; --slick-highlight-color: #0389ff; --slick-pagination-icon-color: #1190ff; --slick-row-mouse-hover-box-shadow: 0 0 0 2px #3a3a3a; - --slick-checkbox-selector-opacity: 1; - --slick-checkbox-selector-icon-border: 1px solid #838383; + --slick-checkbox-selector-icon-border: 1px solid #888888; } diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 24843c459..9698e25a5 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -1019,6 +1019,7 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-column-picker-background-color: var(--slick-base-dark-menu-bg-color); --slick-column-picker-box-shadow: 0 0 1px #606060; --slick-column-picker-border: var(--slick-base-dark-menu-border); + --slick-column-picker-close-btn-color: #bbbbbb; --slick-column-picker-checkbox-opacity: 0.25; --slick-column-picker-checkbox-opacity-hover: 0.45; --slick-column-picker-close-btn-bg-color: transparent; @@ -1028,8 +1029,8 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-column-picker-item-hover-color: var(--slick-base-dark-menu-item-hover-color); --slick-column-picker-item-hover-border: var(--slick-base-dark-menu-item-border); --slick-column-picker-title-border-bottom: 1px solid #525252; - --slick-checkbox-selector-opacity: 0.25; - --slick-checkbox-selector-opacity-hover: 0.45; + --slick-checkbox-selector-opacity: 0.7; + --slick-checkbox-selector-opacity-hover: 0.85; --slick-checkbox-selector-checked-color: var(--slick-highlight-color); --slick-checkbox-selector-icon-bg-color: #444444; --slick-checkbox-selector-icon-bg-color: transparent; @@ -1049,7 +1050,8 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-menu-bg-color: var(--slick-base-dark-menu-bg-color); --slick-menu-border: var(--slick-base-dark-menu-border); --slick-menu-box-shadow: 0 0 1px #606060; - --slick-menu-close-btn-bg-color: #1c1c1c; + --slick-menu-close-btn-bg-color: transparent; + --slick-menu-close-btn-color: #bbbbbb; --slick-menu-color: #bbbbbb; --slick-menu-divider-color: #606060; --slick-menu-item-hover-color: var(--slick-base-dark-menu-bg-color);