From f7f7193bf490c8a627d22cb610e39cc0e002579b Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 10 Jun 2026 15:49:46 +0200 Subject: [PATCH 1/8] Fix various color contrast issues Touches upon - The "Details >" links in some dialogs - Sub-Header Tabs (e.g. event assets) - Inactive NavBar items (e.g. "Series" when on event page) - Stats Filter - Footer Text --- src/styles/base/_variables.scss | 4 ++-- src/styles/components/_footer.scss | 2 +- src/styles/components/modals/_modal-components.scss | 4 ++-- src/styles/components/modals/_wizard.scss | 5 ----- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 39c4ec22e6..39586b9c06 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -148,8 +148,8 @@ $modal-nav-bg-color: #eeeff0; $modal-nav-border-color: #d6d6d6; $modal-nav-link-color: #646E75; $modal-nav-link-active-color: $header-link-color; -$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); //#fafafa -$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); //#9cabbc +$subpage-navigation-link-color: $color-silver; //#fafafa +$subpage-navigation-link-hover-color: color.adjust($subpage-navigation-link-color, $lightness: -15%); //#9cabbc // Stats // ---------------------------------------- diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index e6e8850c20..ea945f9471 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -81,7 +81,7 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - } ul li { - color: variables.$light-prim-color; + color: variables.$medium-prim-color; margin-left: 10px; vertical-align: top; font-size: 10px; diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index 7910d21204..cbb304f55b 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -251,7 +251,7 @@ // ---------------------------------------- .details-link { - color: variables.$l-blue; + color: variables.$ref-blue; white-space: nowrap; display: flex; align-items: center; @@ -262,7 +262,7 @@ } &:hover { - color: color.adjust(variables.$l-blue, $lightness: -20%); + color: color.adjust(variables.$ref-blue, $lightness: -20%); } } diff --git a/src/styles/components/modals/_wizard.scss b/src/styles/components/modals/_wizard.scss index 23d47763d3..b0ec1a36ba 100644 --- a/src/styles/components/modals/_wizard.scss +++ b/src/styles/components/modals/_wizard.scss @@ -26,9 +26,4 @@ float: left; margin-left: 3%; } - - .inactive { - opacity: 0.5; - cursor: default; - } } \ No newline at end of file From 65dad8c69d7422f199eeee3900b719e0d91130d1 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 10 Jun 2026 16:01:22 +0200 Subject: [PATCH 2/8] Remove unnecessary extra file And move relevant css to a more appropriate file. --- src/components/shared/modals/Modal.tsx | 2 +- src/styles/components/modals/_footer.scss | 2 ++ .../components/modals/_modals-config.scss | 1 - src/styles/components/modals/_wizard.scss | 29 ------------------- 4 files changed, 3 insertions(+), 31 deletions(-) delete mode 100644 src/styles/components/modals/_wizard.scss diff --git a/src/components/shared/modals/Modal.tsx b/src/components/shared/modals/Modal.tsx index 3f9e471d65..0ada5549b1 100644 --- a/src/components/shared/modals/Modal.tsx +++ b/src/components/shared/modals/Modal.tsx @@ -74,7 +74,7 @@ export const Modal = forwardRef>(
Date: Wed, 10 Jun 2026 16:05:48 +0200 Subject: [PATCH 3/8] Do not always show "Save" in ACL Tab Only show the "Save" and "Cancel" buttons in the ACL tab if there is something to save or cancel. This is in line with the behaviour of other tabs. --- src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx index 451d517e59..88b51804ca 100644 --- a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx +++ b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx @@ -368,7 +368,7 @@ const ResourceDetailsAccessPolicyTab = ({ } {/* Save and cancel buttons */} - {!transactions.readOnly && resetPolicies(formik.resetForm)} submit={() => saveAccess(formik.values, false)} From 8b0b670edf3852007db1dccd223ea5d23724c394 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 15 Jun 2026 09:25:31 +0200 Subject: [PATCH 4/8] Move color calculations to variables.scss In a further attempt to unify and reduce our color complexity, this patch replaces computed colors with variables and move the color calculations to variables.scss. In some cases it also replaces colors that are only used once in that specific place with a more generally used color. --- src/components/Footer.tsx | 6 +- src/styles/base/_variables.scss | 204 ++++++++++++------ src/styles/components/_about.scss | 11 +- src/styles/components/_alerts.scss | 8 - src/styles/components/_breadcrumbs.scss | 2 +- src/styles/components/_datepicker-custom.scss | 4 +- src/styles/components/_dropdowns.scss | 9 +- src/styles/components/_footer.scss | 25 +-- src/styles/components/_header.scss | 10 +- src/styles/components/_inputs.scss | 4 +- src/styles/components/_menu-dropdown.scss | 6 +- src/styles/components/_multi-value.scss | 2 +- src/styles/components/_progress-bar.scss | 15 +- src/styles/components/_statistics-graph.scss | 8 - src/styles/components/_steps.scss | 8 +- .../components/_table-filter-profiles.scss | 2 +- src/styles/components/_tables.scss | 23 +- src/styles/components/modals/_footer.scss | 2 +- src/styles/components/modals/_header.scss | 2 +- src/styles/components/modals/_modal-base.scss | 12 +- .../components/modals/_modal-components.scss | 16 +- src/styles/mixins/_button.scss | 149 +++---------- src/styles/mixins/_triangle-point.scss | 4 +- src/styles/views/_core.scss | 27 +-- src/styles/views/_statistics.scss | 6 +- src/styles/views/modals/_edit-table-view.scss | 13 +- src/styles/views/modals/_publications.scss | 6 +- 27 files changed, 255 insertions(+), 329 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 5526ee6140..230e8eaae3 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -6,6 +6,7 @@ import { import { useAppSelector } from "../store"; import { Link } from "react-router"; import { useTranslation } from "react-i18next"; +import { LuMessagesSquare } from "react-icons/lu"; /** * Component that renders the footer @@ -58,7 +59,10 @@ const Footer: React.FC = () => { {/* Only render if a feedback URL is set*/} {!!orgProperties && !!orgProperties[feedbackUrlPropertyId] && ( )}
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 39586b9c06..e57cb31e44 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -22,11 +22,11 @@ */ -// Logo -// ---------------------------------------- - -$logo-width: 100px; -$logo-height: 20px; +/** + * + * ---------------- COLORS ---------------- + * + */ // Primary Colors // ---------------------------------------- @@ -59,25 +59,24 @@ $yellow: #e4d12e; $black: #000; $white: #fff; +$l-blue-gradient: #2b77b9; +$b-blue-gradient: #55cef2; + +// Gray Scale +// ---------------------------------------- $color-black: #000; +$dark-prim-color: #333; $color-darkgray: #444; +$medium-prim-color: #666; $color-gray: #898989; +$light-prim-color: #a6a6a6; $color-silver: #CCC; $color-lightgray: #F8F8F8; $color-white: #fff; -$l-blue-gradient: #2b77b9; -$b-blue-gradient: #55cef2; - - - -// Primary color with light/medium/darker shades -$prim-color: color.adjust(#fff, $lightness: -50%); -$light-prim-color: color.adjust($prim-color, $lightness: 15%); //#a6a6a6 -$medium-prim-color: color.adjust($prim-color, $lightness: -10%); //#666666 -$dark-prim-color: color.adjust($prim-color, $lightness: -30%); //#333333 - +// Text $global-text-color: $medium-prim-color; +$global-text-color-light: color.adjust($global-text-color, $lightness: 6%); // Element Colors // ---------------------------------------- @@ -87,18 +86,10 @@ $table-title-color: #46647e; $header-link-color: #435263; $color-link: $medium-prim-color; $color-link-hover: $dark-prim-color; - -// Highlights and Lowlights -// ---------------------------------------- -$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%); // #92e0bb -$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e -$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f - -$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 -$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 -$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b - -$table-highlight: color.adjust($light-prim-color, $lightness: 28%); +$footer-background-color-light: color.adjust($body-background, $lightness: -3%); +$footer-background-color: color.adjust($body-background, $lightness: -5%); +$main-menu-background: color.adjust($d-blue, $lightness: -3%); +$main-menu-border-color: color.adjust($d-blue, $lightness: -12%); // Border // ---------------------------------------- @@ -106,41 +97,79 @@ $table-highlight: color.adjust($light-prim-color, $lightness: 28%); $main-border-color: #c9d0d3; $light-border-color: #cfd3d5; $lighter-border-color: #e2e2e2; -$main-border-radius: 4px; -$thin-border: 1px; -$thin-border-stroke: $thin-border solid; -$mid-border-stroke: 2px solid; +$footer-border-color: color.adjust($body-background, $lightness: -13%); $dark-bg-border-color: #0e1b25; -// Form +// Main Table // ---------------------------------------- -$input-height: 40px; -$btn-height: 39px; - +$table-color-off-white-dark-1: color.adjust($off-white, $lightness: -1%); +$table-color-off-white-dark-2: color.adjust($off-white, $lightness: -4%); +$table-off-white-gradient: color.adjust($off-white, $lightness: -5%); +$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -2%); +$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -5%); - -// Progress Bar +// Button Highlights and Lowlights, Gradients // ---------------------------------------- -$progress-bar-color: $l-blue; +$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%); // #92e0bb +$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e +$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f +$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 +$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 +$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b +$primary-color-l-blue-light-1: color.adjust($l-blue, $lightness: 10%); +$l-blue-gradient-dark-1: color.adjust($l-blue-gradient, $lightness: -5%); +$l-blue-gradient-dark-2: color.adjust($l-blue-gradient, $lightness: -10%); + +$bright-blue-dark-1: color.adjust($bright-blue, $lightness: -5%); +$bright-blue-dark-2: color.adjust($bright-blue, $lightness: -10%); +$b-blue-gradient-light-1: color.adjust($b-blue-gradient, $lightness: 5%); +$b-blue-gradient-light-2: color.adjust($b-blue-gradient, $lightness: 10%); + +$alt-red-light-1: color.adjust($alt-red, $lightness: 5%); +$alt-red-light-2: color.adjust($alt-red, $lightness: 10%); +$alt-red-dark-1: color.adjust($alt-red, $lightness: -5%); +$alt-red-dark-2: color.adjust($alt-red, $lightness: -10%); +$alt-red-dark-3: color.adjust($alt-red, $lightness: -20%); +$alt-red-dark-4: color.adjust($alt-red, $lightness: -30%); + +$main-border-color-dark-1: color.adjust($main-border-color, $lightness: -2%); +$white-dark-1: color.adjust($white, $lightness: -4%); +$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -4%); +$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -10%); + +$white-semidark: color.adjust($white, $lightness: -2%); +$color-off-white-dark-1: color.adjust($off-white, $lightness: -3%); +$color-off-white-dark-2: color.adjust($off-white, $lightness: -5%); +$color-off-white-dark-3: color.adjust($off-white, $lightness: -6%); + +$color-button-box-shadow: rgba(0,0,0,.05); +$color-active-box-shadow: rgba(0,0,0,.1); +$color-header-box-shadow: rgba(0,0,0,.3); +$color-dropdown-box-shadow: rgba(0,0,0,.1); +$color-table-cell-shadow: rgba(0,0,0,.05); +$color-modal-box-shadow: rgba(0,0,0,.3); +$color-modal-overlay-box-shadow: rgba(0,0,0,.2); +$color-modal-overlay-gradient-box-shadow: rgba(0,0,0,.4); +$color-pagination-active-box-shadow: rgba(0,0,0,.5); -// Inputs -// ---------------------------------------- -$small-input-width: 130px; +$table-highlight: color.adjust($light-prim-color, $lightness: 28%); +// Progress Bar +// ---------------------------------------- +$progress-bar-color: $l-blue; // Modals // ---------------------------------------- -$modal-width: 800px; -$modal-col-width: 358px; -$modal-full-col-width: 100%; $modal-heading-color: #4d4d4d; +$modal-header-gradient: color.adjust($color-lightgray, $lightness: -7%); +$modal-obj-header-gradient: color.adjust($off-white, $lightness: -3%); // Nav Colors // ---------------------------------------- @@ -151,11 +180,73 @@ $modal-nav-link-active-color: $header-link-color; $subpage-navigation-link-color: $color-silver; //#fafafa $subpage-navigation-link-hover-color: color.adjust($subpage-navigation-link-color, $lightness: -15%); //#9cabbc +// Alerts +// ---------------------------------------- + +// Success (Green) +$state-success-text: #3c763d; +$state-success-bg: #dff0d8; +$state-success-border: rgb(211.8267110656, 233.0538934426, 203.0861065574); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%); + +// Info (Blue) +$state-info-text: color.adjust(#31708f, $lightness: 5%); +$state-info-bg: #d9edf7; +$state-info-border: rgb(194.6022156398, 224.3725947867, 239.2577843602); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%); + +// Warning (Yellow) +$state-warning-text: #8a6d3b; +$state-warning-bg: #fcf8e3; +$state-warning-border: rgb(245.5470578374, 238.7655993294, 203.1629421626); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%); + +// Danger (Red) +$state-danger-text: #a94442; +$state-danger-bg: #f2dede; +$state-danger-border: rgb(234.9211137441, 209.1388862559, 209.1388862559); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%); + // Stats // ---------------------------------------- $stats-color: $subpage-navigation-link-color; $stats-hover-color: $subpage-navigation-link-hover-color; +/** + * + * -------------- DIMENSIONS--------------- + * + */ + +// Logo +// ---------------------------------------- + +$logo-width: 100px; +$logo-height: 20px; + +// Form +// ---------------------------------------- + +$input-height: 40px; +$btn-height: 39px; + + +// Inputs +// ---------------------------------------- +$small-input-width: 130px; + +// Border +// ---------------------------------------- + +$main-border-radius: 4px; +$thin-border: 1px; +$thin-border-stroke: $thin-border solid; +$mid-border-stroke: 2px solid; + + +// Modals +// ---------------------------------------- + +$modal-width: 800px; +$modal-col-width: 358px; +$modal-full-col-width: 100%; + // Layout // ---------------------------------------- @@ -206,28 +297,5 @@ $img-path: "/src/img/"; // Alerts // ---------------------------------------- - -// Colors - -// Success (Green) -$state-success-text: #3c763d; -$state-success-bg: #dff0d8; -$state-success-border: rgb(211.8267110656, 233.0538934426, 203.0861065574); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%); - -// Info (Blue) -$state-info-text: color.adjust(#31708f, $lightness: 5%); -$state-info-bg: #d9edf7; -$state-info-border: rgb(194.6022156398, 224.3725947867, 239.2577843602); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%); - -// Warning (Yellow) -$state-warning-text: #8a6d3b; -$state-warning-bg: #fcf8e3; -$state-warning-border: rgb(245.5470578374, 238.7655993294, 203.1629421626); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%); - -// Danger (Red) -$state-danger-text: #a94442; -$state-danger-bg: #f2dede; -$state-danger-border: rgb(234.9211137441, 209.1388862559, 209.1388862559); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%); - // Transition $alert-transition: color 300ms ease-in; diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss index 641585fd76..51ed7bc1c9 100644 --- a/src/styles/components/_about.scss +++ b/src/styles/components/_about.scss @@ -22,13 +22,6 @@ * */ - -// About Variables -// ---------------------------------------- - -$about-border-color: color.adjust(variables.$body-background, $lightness: -13%); -$about-background-color: color.adjust(variables.$body-background, $lightness: -5%); - // Styles // ---------------------------------------- @@ -36,8 +29,8 @@ $about-background-color: color.adjust(variables.$body-background, $lightness: -5 width: 50%; margin-left: auto; margin-right: auto; - background-color: $about-background-color; - border: 1px solid $about-border-color; + background-color: variables.$footer-background-color; + border: 1px solid variables.$footer-border-color; padding: 10px; margin-top: 20px; diff --git a/src/styles/components/_alerts.scss b/src/styles/components/_alerts.scss index f63bb02707..d45d3c9d52 100644 --- a/src/styles/components/_alerts.scss +++ b/src/styles/components/_alerts.scss @@ -34,14 +34,6 @@ p { color: $text-color; } - - a { - color: color.adjust($text-color, $lightness: 10%); - - &:hover { - color: $text-color; - } - } } // Alerts diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss index a776749f1a..9b1ad62c68 100644 --- a/src/styles/components/_breadcrumbs.scss +++ b/src/styles/components/_breadcrumbs.scss @@ -25,7 +25,7 @@ .breadcrumb { $height: 35px; - background: color.adjust(variables.$modal-nav-bg-color, $lightness: 4%); + background: variables.$off-white; border-bottom: 1px solid variables.$modal-nav-border-color; line-height: $height; diff --git a/src/styles/components/_datepicker-custom.scss b/src/styles/components/_datepicker-custom.scss index d4c4fb59d0..f0edebdde3 100644 --- a/src/styles/components/_datepicker-custom.scss +++ b/src/styles/components/_datepicker-custom.scss @@ -36,7 +36,7 @@ .react-datepicker__navigation--years { &::before { - border-color: variables.$color-silver; + border-color: variables.$color-gray; border-style: solid; border-width: 3px 3px 0 0; content: ''; @@ -58,7 +58,7 @@ } &:hover::before { - border-color: color.adjust(variables.$color-silver, $lightness: -15%); + border-color: variables.$color-darkgray; } } diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index dd9581a1a3..e4ed27b927 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -42,18 +42,17 @@ // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; text-shadow: 0px 1px 0px variables.$white; &:hover { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -1%), color.adjust(variables.$color-lightgray, $lightness: -1%)); - color: variables.$medium-prim-color; + border: variables.$thin-border-stroke variables.$primary-color-light-blue; + box-shadow: 0 0 0 1px variables.$primary-color-light-blue; } &:active { - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow; } // Menu Icon Settings diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index ea945f9471..dd30a6d0ce 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -22,13 +22,6 @@ * */ - -// Footer Variables -// ---------------------------------------- - -$footer-border-color: color.adjust(variables.$body-background, $lightness: -13%); -$footer-background-color: color.adjust(variables.$body-background, $lightness: -5%); - @mixin footer-component-padding() { padding-top: 10px; padding-bottom: 12px; @@ -43,8 +36,8 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - position: fixed; bottom: 0; left: 0; - background: $footer-background-color; - border-top: 1px solid $footer-border-color; + background: variables.$footer-background-color; + border-top: 1px solid variables.$footer-border-color; .feedback-btn { width: 90px; @@ -58,19 +51,15 @@ $footer-background-color: color.adjust(variables.$body-background, $lightness: - a { transition: all .2s; @include footer-component-padding(); - border-left: 1px solid $footer-border-color; - text-align: center; - display: block; + border-left: 1px solid variables.$footer-border-color; + display: flex; padding-left: 5px; padding-right: 5px; + gap: 6px; + justify-content: center; &:hover { - background: rgba(variables.$white, 0.8); - } - - &:before { - content: "\f086"; - margin-right: 6px; + background: variables.$off-white; } } } diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index 0eaf39a509..66fe35fc0e 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -34,10 +34,10 @@ $height: 50px; width: 100%; height: $height; - box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3); + box-shadow: 0 1px 3px 1px variables.$color-header-box-shadow; position: relative; - border-bottom: 1px solid color.adjust(variables.$d-blue, $lightness: -5%); //1d3041; - background: linear-gradient(to bottom, variables.$l-blue, color.adjust(variables.$l-blue, $lightness: -9%)); //2075b1 + border-bottom: 1px solid variables.$d-blue; + background: linear-gradient(to bottom, variables.$l-blue, variables.$l-blue-gradient); .header-branding { float: left; @@ -220,10 +220,10 @@ .menu-top { width: 80px; height: 42px; - background: color.adjust(variables.$d-blue, $lightness: -3%); + background: variables.$main-menu-background; border-top-left-radius: 4px; border-top-right-radius: 4px; - border: variables.$thin-border-stroke color.adjust(variables.$d-blue, $lightness: -12%); + border: variables.$thin-border-stroke variables.$main-menu-border-color; border-bottom: none; margin: 0 variables.$side-margin; position: relative; diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index d99bdbf394..7ba3becddd 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -51,7 +51,7 @@ textarea { } &:hover { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -20%); + border: variables.$thin-border-stroke variables.$dark-prim-color; } &:focus { @@ -99,7 +99,7 @@ select[multiple] { height: 40px; position: relative; - outline: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + outline: variables.$thin-border-stroke variables.$main-border-color; border-radius: variables.$main-border-radius; input.search { diff --git a/src/styles/components/_menu-dropdown.scss b/src/styles/components/_menu-dropdown.scss index 49156e423c..3487159561 100644 --- a/src/styles/components/_menu-dropdown.scss +++ b/src/styles/components/_menu-dropdown.scss @@ -30,11 +30,11 @@ // Base Properties $padding: 8px 0; - $background-color: rgba(variables.$white, 0.98 ); + $background-color: variables.$white; $border-stroke: 1px; - $border-color: rgba(variables.$black, 0.1); + $border-color: variables.$color-dropdown-box-shadow; $border-radius: variables.$main-border-radius; - $box-shadow: 0 1px 3px rgba(variables.$black, 0.1), 0 0 1px $border-stroke rgba(variables.$black, 0.1); + $box-shadow: 0 1px 3px variables.$color-dropdown-box-shadow, 0 0 1px $border-stroke variables.$color-dropdown-box-shadow; $point-width: 7px; $point-height: 7px; $point-position-from-right: 10px; diff --git a/src/styles/components/_multi-value.scss b/src/styles/components/_multi-value.scss index 7eb97f28a2..88f914c177 100644 --- a/src/styles/components/_multi-value.scss +++ b/src/styles/components/_multi-value.scss @@ -19,7 +19,7 @@ } &-green { - background: variables.$primary-color-green-light-1; + background: variables.$primary-color-green; } &-red { diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index c9bfa74524..e91fb05e87 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -30,7 +30,7 @@ margin-bottom: 10px; background-color: variables.$white; border-radius: variables.$main-border-radius; - border: 1px solid color.adjust(variables.$l-blue, $lightness: -10%); + border: 1px solid variables.$l-blue-gradient; &.compact { height: 8px; @@ -44,25 +44,18 @@ font-size: 12px; line-height: 24px; color: variables.$white; - text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); text-align: center; background-color: variables.$progress-bar-color; - background: linear-gradient(to bottom, variables.$l-blue, variables.$l-blue-gradient); - border-right: 1px solid color.adjust(variables.$l-blue, $lightness: -15%); + background: linear-gradient(to bottom, variables.$b-blue-gradient, variables.$bright-blue); + border-right: 1px solid variables.$d-blue; transition: width 600ms ease; + &[aria-valuenow="0"], &[aria-valuenow="1"], &[aria-valuenow="2"] { min-width: 30px; } - &[aria-valuenow="0"] { - min-width: 30px; - background-color: transparent; - background-image: none; - box-shadow: none; - } - &.bad { background: variables.$white; } diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index c0f10612c4..fd605a0228 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -59,14 +59,6 @@ border-left: 0; border-radius: 0 4px 4px 0; } - - > input[type="radio"]:checked + label { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); - color: variables.$medium-prim-color; - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); - } } p { diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index 91f0e02fb3..7abd0c0bf3 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -86,10 +86,10 @@ background: variables.$main-border-color; background: linear-gradient( to left, - rgba(variables.$modal-nav-border-color, 0) 5%, - rgba(variables.$modal-nav-border-color, 1) 25%, - rgba(variables.$modal-nav-border-color, 1) 75%, - rgba(variables.$modal-nav-border-color, 0) 95% + transparent 5%, + variables.$modal-nav-border-color 25%, + variables.$modal-nav-border-color 75%, + transparent 95% ); } diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss index 95b325d6a1..f6f7d7776e 100644 --- a/src/styles/components/_table-filter-profiles.scss +++ b/src/styles/components/_table-filter-profiles.scss @@ -188,7 +188,7 @@ padding: 5px; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; - background: color.adjust(variables.$body-background, $lightness: -3%); + background: variables.$footer-background-color-light; border-top: 1px solid variables.$main-border-color; } diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index 243bd98f8c..b7cbdfdfc8 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -42,13 +42,10 @@ } button { - $highlight-blue: variables.$ref-blue; - - color: $highlight-blue; - text-shadow: 0 1px 0 rgba(variables.$white, 0.75); + color: variables.$ref-blue; &:hover { - color: color.adjust($highlight-blue, $lightness: 10%); + color: variables.$l-blue; } } } @@ -86,10 +83,10 @@ &.sortable { cursor: pointer; &:hover { - background: linear-gradient(to bottom, variables.$off-white, color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$off-white, variables.$table-off-white-gradient); } &:active { - box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); + box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow; } } // Layout @@ -115,7 +112,7 @@ border-left: 1px solid variables.$white; border-bottom: 1px solid $border-color; user-select: none; - background: linear-gradient(to bottom, color.adjust(variables.$off-white, $lightness: -1%), color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$table-color-off-white-dark-1, variables.$table-off-white-gradient); // Typography line-height: 35px; @@ -131,8 +128,8 @@ // Darken tbl when sorted on &.col-sort { - background: color.adjust(variables.$off-white, $lightness: -4%); - box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); + background: variables.$table-color-off-white-dark-2; + box-shadow: inset 0 3px 10px 2px variables.$color-table-cell-shadow; } // Special column @@ -228,7 +225,7 @@ // at the bottom of rows. &.total { > td { - background: color.adjust(variables.$color-lightgray, $lightness: -2%); + background: variables.$color-lightgray-dark-1; color: variables.$medium-prim-color; font-weight: bold; @@ -240,7 +237,7 @@ } &.darker-row { - background: color.adjust(variables.$color-lightgray, $lightness: -5%); + background: variables.$color-lightgray-dark-2; } &.disabled { @@ -375,7 +372,7 @@ } > hr { - background: color.adjust(variables.$main-border-color, $lightness: 10%); + background: variables.$lighter-border-color; height: 1px; border: none; } diff --git a/src/styles/components/modals/_footer.scss b/src/styles/components/modals/_footer.scss index 1c7cf934b1..effbdd3752 100644 --- a/src/styles/components/modals/_footer.scss +++ b/src/styles/components/modals/_footer.scss @@ -29,7 +29,7 @@ height: 60px; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; - background: color.adjust(variables.$body-background, $lightness: -3%); + background: variables.$footer-background-color-light; border-top: 1px solid variables.$main-border-color; div { &.pull-right{ diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss index 9a77e58b63..c0fd43a74c 100644 --- a/src/styles/components/modals/_header.scss +++ b/src/styles/components/modals/_header.scss @@ -30,7 +30,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); + background: linear-gradient(to bottom, variables.$color-lightgray, variables.$modal-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 12ab3e8005..cc4167e7a8 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -66,7 +66,7 @@ margin-left: -(variables.$modal-width * 0.5); background: variables.$body-background; border-radius: variables.$main-border-radius; - box-shadow: 0 0 20px 2px rgba(variables.$black, 0.3); + box-shadow: 0 0 20px 2px variables.$color-modal-box-shadow; input[readonly] { border: none; @@ -171,8 +171,8 @@ width: 100%; height: 100%; z-index: variables.$max-z + 1; - background-color: rgba(variables.$black, 0.2); - background-image: radial-gradient(rgba(variables.$black, 0.2), rgba(variables.$black, 0.4)); + background-color: variables.$color-modal-overlay-box-shadow; + background-image: radial-gradient(variables.$color-modal-overlay-box-shadow, variables.$color-modal-overlay-gradient-box-shadow); } @@ -204,7 +204,7 @@ box-sizing: border-box; height: $height; line-height: $height; - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); + background: linear-gradient(to bottom, variables.$white, variables.$modal-obj-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; @@ -212,7 +212,7 @@ width: 100%; padding-left: 10px; padding-right: 10px; - color: color.adjust(variables.$grey, $lightness: -10%); + color: variables.$global-text-color-light; font-weight: 600; text-shadow: 0 1px 0 variables.$white; font-size: 13px; @@ -397,7 +397,7 @@ > li { line-height: 23px; - border-bottom: 1px solid color.adjust(variables.$main-border-color, $lightness: 10%); + border-bottom: 1px solid variables.$lighter-border-color; padding: 10px 0; &:first-child { diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index cbb304f55b..feb1198f16 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -67,7 +67,7 @@ } > hr { - background: color.adjust(variables.$main-border-color, $lightness: 10%); + background: variables.$lighter-border-color; height: 1px; border: none; margin: 30px 0 20px; @@ -262,7 +262,7 @@ } &:hover { - color: color.adjust(variables.$ref-blue, $lightness: -20%); + color: variables.$color-link-hover; } } @@ -291,7 +291,7 @@ border-radius: 10px; height: 19px; display: inline-block; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 3px variables.$color-button-box-shadow; // Filename label p { @@ -344,14 +344,6 @@ } } - .progress { - border: 1px solid color.adjust(variables.$bright-blue, $lightness: -5%); - } - - .progress-bar { - background: linear-gradient(to bottom, color.adjust(variables.$bright-blue, $lightness: 5%), variables.$bright-blue); - } - button { &:first-child { @@ -449,7 +441,7 @@ padding: 5px; border: 1px solid variables.$main-border-color; border-radius: variables.$main-border-radius; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 3px variables.$color-dropdown-box-shadow; background: variables.$white; min-height: 202px; } diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index f0e4a20252..6cb3090ed1 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -32,20 +32,16 @@ position: relative; @if $color == green-dark-bg { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); border: variables.$thin-border-stroke variables.$dark-bg-border-color; - &:hover { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); + background: linear-gradient(variables.$primary-color-green-light-1, variables.$primary-color-green-dark-3); } &:active { @@ -55,48 +51,17 @@ } } - /** - * Currently goes unused. Kept to illustrate the intention behind this file - * for future readers. - @else if $color == blue-dark-bg { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(#3a5e7e, #2c9966); - - border: variables.$thin-border-stroke variables.$dark-bg-border-color; - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:active { - cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } - */ - @else if $color == green { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); border: variables.$thin-border-stroke variables.$primary-color-green-dark-3; - &:hover { - cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); - } - - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); + background: linear-gradient(variables.$primary-color-green-light-1, variables.$primary-color-green-dark-3); } &:active { @@ -106,103 +71,63 @@ } } - /** - * Currently goes unused. Kept to illustrate the intention behind this file - * for future readers. - @else if $color == blue { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(#3a5e7e, #2c9966); - - border: variables.$thin-border-stroke variables.$dark-bg-border-color; - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } - - &:active { - cursor: pointer; - box-shadow: inset 0 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } - */ - @else if $color == lightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$l-blue, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$primary-color-l-blue-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$l-blue, variables.$l-blue-gradient); - border: variables.$thin-border-stroke color.adjust(variables.$l-blue-gradient, $lightness: -5%); - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$l-blue-gradient-dark-1; - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); + background: linear-gradient(variables.$primary-color-l-blue-light-1, variables.$l-blue-gradient-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$l-blue-gradient, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$l-blue-gradient-dark-1; } } @else if $color == brightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$b-blue-gradient, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$b-blue-gradient-light-2, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$b-blue-gradient, variables.$bright-blue); - border: variables.$thin-border-stroke color.adjust(variables.$bright-blue, $lightness: -10%); - - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$bright-blue-dark-2; - &:focus { + &:hover, + &:focus { cursor: pointer; - background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); + background: linear-gradient(variables.$b-blue-gradient-light-1, variables.$bright-blue-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$bright-blue, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$bright-blue-dark-1; } } @else if $color == red { - box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$alt-red, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 5%), color.adjust(variables.$alt-red, $lightness: -5%)); + box-shadow: inset 0px 1px 0px 0px variables.$alt-red-light-2, 0px 2px 3px 1px variables.$color-button-box-shadow; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -20%); + background: linear-gradient(variables.$alt-red-light-1, variables.$alt-red-dark-1); - &:hover { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); - } + border: variables.$thin-border-stroke variables.$alt-red-dark-3; - &:focus { + &:hover, + &:focus { cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); - background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); + border: variables.$thin-border-stroke variables.$alt-red-dark-4; + background: linear-gradient(variables.$alt-red-light-2, variables.$alt-red-dark-2); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$alt-red, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px variables.$alt-red-dark-1; } } @@ -210,27 +135,21 @@ background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; text-shadow: 0px 1px 0px variables.$white; - &:hover { - cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); - color: variables.$medium-prim-color; - } - - &:focus { + &:hover, + &:focus { cursor: pointer; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); + border: variables.$thin-border-stroke variables.$main-border-color-dark-1; + background: linear-gradient(variables.$white-dark-1, variables.$color-lightgray-dark-2); color: variables.$medium-prim-color; } &:active { cursor: pointer; - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); + box-shadow: inset 0px 1px 6px 2px variables.$color-active-box-shadow; } } diff --git a/src/styles/mixins/_triangle-point.scss b/src/styles/mixins/_triangle-point.scss index 07630d683b..f411395ec1 100644 --- a/src/styles/mixins/_triangle-point.scss +++ b/src/styles/mixins/_triangle-point.scss @@ -22,7 +22,7 @@ * */ -@mixin triangle-point-side($position, $width, $height, $position-from-left: 4.75px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) { +@mixin triangle-point-side($position, $width, $height, $position-from-left: 4.75px, $background-color: variables.$white, $border-stroke: 1px, $border-color: variables.$main-border-color, $position-from-origin: 1) { @if $position == left { &:before, @@ -54,7 +54,7 @@ } -@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) { +@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: variables.$main-border-color, $position-from-origin: 1) { @if $position == top { diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss index f35186e7b9..c8a7ac57f6 100644 --- a/src/styles/views/_core.scss +++ b/src/styles/views/_core.scss @@ -126,30 +126,19 @@ body { padding: 7px 10px; margin-right: 4px; border-radius: variables.$main-border-radius - 1; - box-shadow: inset 0 1px 0 rgba(variables.$white, 0.8); - font-size: 12px; font-weight: 600; - text-decoration: none; - color: variables.$color-gray; - text-shadow: 0 1px 0 rgba(variables.$white, 1); - border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$off-white, variables.$color-lightgray); - - // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; - box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px variables.$color-button-box-shadow; color: variables.$medium-prim-color; - text-shadow: 0px 1px 0px variables.$white; &:hover:not(.active) { - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -1%), color.adjust(variables.$color-lightgray, $lightness: -1%)); + background: linear-gradient(variables.$white-dark-1, variables.$color-lightgray-dark-1); color: variables.$medium-prim-color; } &:active { - box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 6px 2px variables.$color-button-box-shadow; } > i { @@ -158,14 +147,14 @@ body { } .active { - display: inline-block; - padding: 7px 10px; - margin-right: 4px; + // display: inline-block; + // padding: 7px 10px; + // margin-right: 4px; border: none; background: variables.$medium-prim-color; - box-shadow: inset 0 0 8px rgba(variables.$black, 0.5); + box-shadow: inset 0 0 8px variables.$color-pagination-active-box-shadow; color: variables.$off-white; - text-shadow: 0 0 3px rgba(variables.$black, 0.5); + text-shadow: 0 0 3px variables.$color-pagination-active-box-shadow; } } diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index 77fa6304ac..b71a24b3ff 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -6,7 +6,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); + background: linear-gradient(to bottom, variables.$color-lightgray, variables.$modal-header-gradient); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; @@ -70,8 +70,8 @@ This file is generated by `grunt build`, do not edit it by hand. background-color: variables.$white; background: linear-gradient(variables.$white 20%, variables.$color-lightgray 50%); background-clip: padding-box; - -webkit-box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0 0 3px variables.$white inset, 0 1px 1px variables.$color-dropdown-box-shadow; + box-shadow: 0 0 3px variables.$white inset, 0 1px 1px variables.$color-dropdown-box-shadow; color: variables.$color-darkgray; text-decoration: none; white-space: nowrap; diff --git a/src/styles/views/modals/_edit-table-view.scss b/src/styles/views/modals/_edit-table-view.scss index e2d608ecf7..88f00c8a35 100644 --- a/src/styles/views/modals/_edit-table-view.scss +++ b/src/styles/views/modals/_edit-table-view.scss @@ -71,14 +71,14 @@ border-radius: variables.$main-border-radius; cursor: move; border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); - color: color.adjust(variables.$grey, $lightness: -10%); + background: linear-gradient(to bottom, variables.$white, variables.$color-off-white-dark-1); + color: variables.$global-text-color-light; font-weight: 600; text-shadow: 0px 1px 0px variables.$white; font-size: 13px; position: relative; margin: 10px 0; - box-shadow: 0 0 0 rgba(0,0,0,0); + box-shadow: none; transition: box-shadow .3s ease-in-out; // Begin transitioning to flexbox @@ -89,15 +89,14 @@ padding-left: 5px; &:hover { - background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -5%)); + background: linear-gradient(to bottom, variables.$white, variables.$color-off-white-dark-2); } &:active, &.being-dragged { - background: linear-gradient(to bottom, color.adjust(variables.$white, $lightness: -2%), color.adjust(variables.$off-white, $lightness: -6%)); + background: linear-gradient(to bottom, variables.$white-semidark, variables.$color-off-white-dark-3); cursor: move; - border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -5%); - box-shadow: 0 0 4px rgba(0,0,0,0.1); + box-shadow: 0 0 4px variables.$color-active-box-shadow; } // Item Move Buttons diff --git a/src/styles/views/modals/_publications.scss b/src/styles/views/modals/_publications.scss index a0236216a0..c16dc0460b 100644 --- a/src/styles/views/modals/_publications.scss +++ b/src/styles/views/modals/_publications.scss @@ -89,7 +89,7 @@ } .video-icon { - color: variables.$primary-color-green-light-2; + color: variables.$primary-color-green; font-size: 24px; } @@ -100,12 +100,12 @@ .play { float: right; margin-left: auto; - color: variables.$primary-color-green-light-2; + color: variables.$primary-color-green; font-size: 24px; &:active:before, &:hover:before { - color: variables.$primary-color-green; + color: variables.$primary-color-green-dark-1; } } From b4f9f37944bf589809b88aa9e66890100764485f Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 15 Jun 2026 14:12:22 +0200 Subject: [PATCH 5/8] Move to a more uniform greyscale Replaces a bunch of grey or near-grey colors with suitable alternatives. This constitutes a style change insofar as that some of our grey text or grey borders are now not slightly tinted blue anymore. In my opinion this is not a big loss and even ends up making text easier to read. --- src/styles/base/_variables.scss | 94 +++++++++---------- src/styles/components/_about.scss | 2 +- src/styles/components/_footer.scss | 4 +- src/styles/components/modals/_modal-base.scss | 2 +- 4 files changed, 50 insertions(+), 52 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index e57cb31e44..8de403335f 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -67,48 +67,46 @@ $b-blue-gradient: #55cef2; $color-black: #000; $dark-prim-color: #333; $color-darkgray: #444; +$color-neutral-darkgray: #4d4d4d; $medium-prim-color: #666; $color-gray: #898989; $light-prim-color: #a6a6a6; $color-silver: #CCC; +$color-highgray: #ededed; $color-lightgray: #F8F8F8; $color-white: #fff; // Text $global-text-color: $medium-prim-color; -$global-text-color-light: color.adjust($global-text-color, $lightness: 6%); +$global-text-color-light: color.adjust($global-text-color, $lightness: 6%); //#757575 + +// Border +// ---------------------------------------- + +$main-border-color: $color-silver; +$lighter-border-color: $color-highgray; +$dark-bg-border-color: #0e1b25; // Element Colors // ---------------------------------------- $body-background: $off-white; -$table-title-color: #46647e; -$header-link-color: #435263; +$table-title-color: $d-blue; $color-link: $medium-prim-color; $color-link-hover: $dark-prim-color; -$footer-background-color-light: color.adjust($body-background, $lightness: -3%); -$footer-background-color: color.adjust($body-background, $lightness: -5%); -$main-menu-background: color.adjust($d-blue, $lightness: -3%); -$main-menu-border-color: color.adjust($d-blue, $lightness: -12%); - -// Border -// ---------------------------------------- - -$main-border-color: #c9d0d3; -$light-border-color: #cfd3d5; -$lighter-border-color: #e2e2e2; -$footer-border-color: color.adjust($body-background, $lightness: -13%); - -$dark-bg-border-color: #0e1b25; +$footer-background-color-light: color.adjust($body-background, $lightness: -3%); //#f2f2f2 +$footer-background-color: $color-highgray; +$main-menu-background: color.adjust($d-blue, $lightness: -3%); //#203a51 +$main-menu-border-color: $dark-bg-border-color; // Main Table // ---------------------------------------- -$table-color-off-white-dark-1: color.adjust($off-white, $lightness: -1%); -$table-color-off-white-dark-2: color.adjust($off-white, $lightness: -4%); -$table-off-white-gradient: color.adjust($off-white, $lightness: -5%); -$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -2%); -$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -5%); +$table-color-off-white-dark-1: color.adjust($off-white, $lightness: -1%); //#f7f7f7 +$table-color-off-white-dark-2: color.adjust($off-white, $lightness: -4%); //#f0f0f0 +$table-off-white-gradient: $color-highgray; +$color-lightgray-dark-1: color.adjust($color-lightgray, $lightness: -2%); //#f3f3f3 +$color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -5%); //#ebebeb // Button Highlights and Lowlights, Gradients // ---------------------------------------- @@ -117,9 +115,9 @@ $primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24% $primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e $primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f -$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 -$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 -$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b +$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 +$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 +$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b $primary-color-l-blue-light-1: color.adjust($l-blue, $lightness: 10%); $l-blue-gradient-dark-1: color.adjust($l-blue-gradient, $lightness: -5%); @@ -147,17 +145,17 @@ $color-off-white-dark-1: color.adjust($off-white, $lightness: -3%); $color-off-white-dark-2: color.adjust($off-white, $lightness: -5%); $color-off-white-dark-3: color.adjust($off-white, $lightness: -6%); -$color-button-box-shadow: rgba(0,0,0,.05); -$color-active-box-shadow: rgba(0,0,0,.1); -$color-header-box-shadow: rgba(0,0,0,.3); -$color-dropdown-box-shadow: rgba(0,0,0,.1); -$color-table-cell-shadow: rgba(0,0,0,.05); -$color-modal-box-shadow: rgba(0,0,0,.3); -$color-modal-overlay-box-shadow: rgba(0,0,0,.2); +$color-button-box-shadow: rgba(0,0,0,.05); +$color-active-box-shadow: rgba(0,0,0,.1); +$color-header-box-shadow: rgba(0,0,0,.3); +$color-dropdown-box-shadow: rgba(0,0,0,.1); +$color-table-cell-shadow: rgba(0,0,0,.05); +$color-modal-box-shadow: rgba(0,0,0,.3); +$color-modal-overlay-box-shadow: rgba(0,0,0,.2); $color-modal-overlay-gradient-box-shadow: rgba(0,0,0,.4); -$color-pagination-active-box-shadow: rgba(0,0,0,.5); +$color-pagination-active-box-shadow: rgba(0,0,0,.5); -$table-highlight: color.adjust($light-prim-color, $lightness: 28%); +$table-highlight: $color-highgray; // Progress Bar // ---------------------------------------- @@ -167,18 +165,18 @@ $progress-bar-color: $l-blue; // Modals // ---------------------------------------- -$modal-heading-color: #4d4d4d; -$modal-header-gradient: color.adjust($color-lightgray, $lightness: -7%); -$modal-obj-header-gradient: color.adjust($off-white, $lightness: -3%); +$modal-heading-color: $color-neutral-darkgray; +$modal-header-gradient: color.adjust($color-lightgray, $lightness: -7%); //#e6e6e6 +$modal-obj-header-gradient: color.adjust($off-white, $lightness: -3%); //#f2f2f2 // Nav Colors // ---------------------------------------- -$modal-nav-bg-color: #eeeff0; -$modal-nav-border-color: #d6d6d6; -$modal-nav-link-color: #646E75; -$modal-nav-link-active-color: $header-link-color; -$subpage-navigation-link-color: $color-silver; //#fafafa -$subpage-navigation-link-hover-color: color.adjust($subpage-navigation-link-color, $lightness: -15%); //#9cabbc +$modal-nav-bg-color: $color-highgray; +$modal-nav-border-color: $main-border-color; +$modal-nav-link-color: $medium-prim-color; +$modal-nav-link-active-color: $modal-heading-color; +$subpage-navigation-link-color: $color-silver; +$subpage-navigation-link-hover-color: $light-prim-color; // Alerts // ---------------------------------------- @@ -186,22 +184,22 @@ $subpage-navigation-link-hover-color: color.adjust($subpage-navigation-link-colo // Success (Green) $state-success-text: #3c763d; $state-success-bg: #dff0d8; -$state-success-border: rgb(211.8267110656, 233.0538934426, 203.0861065574); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%); +$state-success-border: #d4e9cb; // Info (Blue) -$state-info-text: color.adjust(#31708f, $lightness: 5%); +$state-info-text: #3d88ad; $state-info-bg: #d9edf7; -$state-info-border: rgb(194.6022156398, 224.3725947867, 239.2577843602); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%); +$state-info-border: #c2e0ef; // Warning (Yellow) $state-warning-text: #8a6d3b; $state-warning-bg: #fcf8e3; -$state-warning-border: rgb(245.5470578374, 238.7655993294, 203.1629421626); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%); +$state-warning-border: #f5efcb; // Danger (Red) $state-danger-text: #a94442; $state-danger-bg: #f2dede; -$state-danger-border: rgb(234.9211137441, 209.1388862559, 209.1388862559); //Old bourbon code that calculated these values: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%); +$state-danger-border: #ebd1d1; // Stats // ---------------------------------------- diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss index 51ed7bc1c9..70d0e6b62a 100644 --- a/src/styles/components/_about.scss +++ b/src/styles/components/_about.scss @@ -30,7 +30,7 @@ margin-left: auto; margin-right: auto; background-color: variables.$footer-background-color; - border: 1px solid variables.$footer-border-color; + border: 1px solid variables.$main-border-color; padding: 10px; margin-top: 20px; diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index dd30a6d0ce..0b28a0e731 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -37,7 +37,7 @@ bottom: 0; left: 0; background: variables.$footer-background-color; - border-top: 1px solid variables.$footer-border-color; + border-top: 1px solid variables.$main-border-color; .feedback-btn { width: 90px; @@ -51,7 +51,7 @@ a { transition: all .2s; @include footer-component-padding(); - border-left: 1px solid variables.$footer-border-color; + border-left: 1px solid variables.$main-border-color; display: flex; padding-left: 5px; padding-right: 5px; diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index cc4167e7a8..0e27ff8b29 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -436,7 +436,7 @@ .active { padding: 14px 5px; min-width: 100px; - color: variables.$header-link-color; + color: variables.$modal-nav-link-active-color; font-weight: 600; } From 4c30ea8d85ceb741ab8b3235ab768a8070aed865 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 15 Jun 2026 14:19:53 +0200 Subject: [PATCH 6/8] Remove unused sass imports --- src/styles/base/_fonts.scss | 1 - src/styles/components/_about.scss | 1 - src/styles/components/_alerts.scss | 1 - src/styles/components/_breadcrumbs.scss | 1 - src/styles/components/_datepicker-custom.scss | 1 - src/styles/components/_dropdowns.scss | 1 - src/styles/components/_footer.scss | 1 - src/styles/components/_header.scss | 1 - src/styles/components/_inputs.scss | 1 - src/styles/components/_progress-bar.scss | 1 - src/styles/components/_statistics-graph.scss | 1 - src/styles/components/_stats.scss | 1 - src/styles/components/_table-filter-profiles.scss | 1 - src/styles/components/_tables.scss | 1 - src/styles/components/modals/_footer.scss | 1 - src/styles/components/modals/_header.scss | 1 - src/styles/components/modals/_modal-base.scss | 1 - src/styles/components/modals/_modal-components.scss | 1 - src/styles/main.scss | 1 - src/styles/mixins/_button.scss | 1 - src/styles/mixins/_mixins-config.scss | 1 - src/styles/mixins/_triangle-point.scss | 1 - src/styles/views/_core.scss | 1 - src/styles/views/_statistics.scss | 1 - src/styles/views/modals/_edit-table-view.scss | 1 - 25 files changed, 25 deletions(-) diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss index 7969dc5ac9..8088e1925e 100644 --- a/src/styles/base/_fonts.scss +++ b/src/styles/base/_fonts.scss @@ -1,4 +1,3 @@ -@use "sass:meta"; @use "variables"; /** diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss index 70d0e6b62a..cf8fd4637f 100644 --- a/src/styles/components/_about.scss +++ b/src/styles/components/_about.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_alerts.scss b/src/styles/components/_alerts.scss index d45d3c9d52..07a1723a36 100644 --- a/src/styles/components/_alerts.scss +++ b/src/styles/components/_alerts.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss index 9b1ad62c68..6365fe7c5d 100644 --- a/src/styles/components/_breadcrumbs.scss +++ b/src/styles/components/_breadcrumbs.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_datepicker-custom.scss b/src/styles/components/_datepicker-custom.scss index f0edebdde3..27cdf7832f 100644 --- a/src/styles/components/_datepicker-custom.scss +++ b/src/styles/components/_datepicker-custom.scss @@ -18,7 +18,6 @@ * the License. * */ - @use "sass:color"; @use "../base/variables"; .datepicker-custom { diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index e4ed27b927..7e6c7aebe9 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index 0b28a0e731..b5d503e24c 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index 66fe35fc0e..a6e1bb22c4 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; @use "../mixins/mixins-config"; diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index 7ba3becddd..5fc72d817a 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index e91fb05e87..72de987697 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index fd605a0228..3b9b070dc2 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss index 89e34f58f1..6ef412c1f6 100644 --- a/src/styles/components/_stats.scss +++ b/src/styles/components/_stats.scss @@ -20,7 +20,6 @@ * the License. * */ -@use "sass:math"; .stats-container { align-self: center; diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss index f6f7d7776e..9992172147 100644 --- a/src/styles/components/_table-filter-profiles.scss +++ b/src/styles/components/_table-filter-profiles.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/button"; diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index b7cbdfdfc8..ea967b14bf 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; @use "../mixins/mixins-config"; @use "../mixins/button"; diff --git a/src/styles/components/modals/_footer.scss b/src/styles/components/modals/_footer.scss index effbdd3752..b06180a25a 100644 --- a/src/styles/components/modals/_footer.scss +++ b/src/styles/components/modals/_footer.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss index c0fd43a74c..3488ded1c2 100644 --- a/src/styles/components/modals/_header.scss +++ b/src/styles/components/modals/_header.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; /** diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 0e27ff8b29..80a1945802 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; @use "../../mixins/mixins-config"; diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index feb1198f16..2b699047a9 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; @use "../../mixins/button"; diff --git a/src/styles/main.scss b/src/styles/main.scss index 5a6bcb3eb6..5d6d10eb6a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -23,7 +23,6 @@ // ---------------------------------------- // Imports -@use "sass:meta"; // Foundation // ---------------------------------------- diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index 6cb3090ed1..7e873ef538 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss index e3467f21c9..86877e8280 100644 --- a/src/styles/mixins/_mixins-config.scss +++ b/src/styles/mixins/_mixins-config.scss @@ -20,7 +20,6 @@ */ -@use "sass:color"; @use "button"; @use "triangle-point"; @use "../base/variables"; diff --git a/src/styles/mixins/_triangle-point.scss b/src/styles/mixins/_triangle-point.scss index f411395ec1..d0d7cac0f4 100644 --- a/src/styles/mixins/_triangle-point.scss +++ b/src/styles/mixins/_triangle-point.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss index c8a7ac57f6..9f45b682e7 100644 --- a/src/styles/views/_core.scss +++ b/src/styles/views/_core.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; /** diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index b71a24b3ff..8be60c90f4 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../base/variables"; .statistics header { diff --git a/src/styles/views/modals/_edit-table-view.scss b/src/styles/views/modals/_edit-table-view.scss index 88f00c8a35..bcdca95ce5 100644 --- a/src/styles/views/modals/_edit-table-view.scss +++ b/src/styles/views/modals/_edit-table-view.scss @@ -1,4 +1,3 @@ -@use "sass:color"; @use "../../base/variables"; /** From 65cc7490ff674b0b170323761a2b13ce6975b5e3 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 15 Jun 2026 14:22:49 +0200 Subject: [PATCH 7/8] Make lighter border slightly more visible again --- src/styles/base/_variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 8de403335f..986f4b6e09 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -72,6 +72,7 @@ $medium-prim-color: #666; $color-gray: #898989; $light-prim-color: #a6a6a6; $color-silver: #CCC; +$color-midgray: #e2e2e2; $color-highgray: #ededed; $color-lightgray: #F8F8F8; $color-white: #fff; @@ -84,7 +85,7 @@ $global-text-color-light: color.adjust($global-text-color, $lightness: 6%); // ---------------------------------------- $main-border-color: $color-silver; -$lighter-border-color: $color-highgray; +$lighter-border-color: $color-midgray; $dark-bg-border-color: #0e1b25; // Element Colors From ef1e697a0a46ad66476e4da527f45ddd9739df67 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 15 Jun 2026 15:17:08 +0200 Subject: [PATCH 8/8] Sort colors in variables.scss Rearranges colors values in the scss file. Gets rid of the "primary-color" naming scheme, as it is unnecessarily wordy for no benefit. --- src/styles/base/_variables.scss | 55 +++++++------------ src/styles/components/_datepicker-custom.scss | 2 +- src/styles/components/_dropdowns.scss | 4 +- src/styles/components/_header.scss | 2 +- src/styles/components/_inputs.scss | 4 +- src/styles/components/_multi-value.scss | 2 +- src/styles/components/_popover.scss | 2 +- src/styles/components/_progress-bar.scss | 2 +- src/styles/components/_steps.scss | 4 +- src/styles/components/_tables.scss | 4 +- src/styles/mixins/_button.scss | 26 ++++----- src/styles/views/modals/_embedded-code.scss | 2 +- .../views/modals/_hotkey-cheat-sheet.scss | 2 +- src/styles/views/modals/_publications.scss | 6 +- src/styles/views/modals/_registration.scss | 2 +- src/styles/views/modals/_workflows.scss | 2 +- 16 files changed, 54 insertions(+), 67 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 986f4b6e09..b99352a0da 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -28,54 +28,41 @@ * */ -// Primary Colors +// Blues // ---------------------------------------- +$d-blue: #24425c; // "primary color" +$l-blue: #378dd4; // "primary color" +$bright-blue: #4da1f7; -$primary-color-green: #37c180; -$green: $primary-color-green; - -$primary-color-light-blue: #378dd4; -$l-blue: $primary-color-light-blue; - -$primary-color-blue: #24425c; -$d-blue: $primary-color-blue; - -$primary-color-grey: #8c939b; -$grey: $primary-color-grey; - -$primary-color-white: #fafafa; -$off-white: $primary-color-white; +$l-blue-gradient: #2b77b9; +$b-blue-gradient: #55cef2; -// Secondary Colors -// ---------------------------------------- - -$bright-blue: #4da1f7; $ref-blue: #1d5888; $ref-blue-button: #069; + +// Other Colors +// ---------------------------------------- +$green: #37c180; // "primary color" $red: #fa1919; $alt-red: #e45253; $orange: #ff8c00; $yellow: #e4d12e; -$black: #000; -$white: #fff; - -$l-blue-gradient: #2b77b9; -$b-blue-gradient: #55cef2; // Gray Scale // ---------------------------------------- -$color-black: #000; +$black: #000; $dark-prim-color: #333; $color-darkgray: #444; $color-neutral-darkgray: #4d4d4d; $medium-prim-color: #666; -$color-gray: #898989; +$color-gray: #898989; // "primary color (was #8c939b)" $light-prim-color: #a6a6a6; $color-silver: #CCC; $color-midgray: #e2e2e2; $color-highgray: #ededed; $color-lightgray: #F8F8F8; -$color-white: #fff; +$off-white: #fafafa; // "primary color" +$white: #fff; // Text $global-text-color: $medium-prim-color; @@ -112,15 +99,15 @@ $color-lightgray-dark-2: color.adjust($color-lightgray, $lightness: -5%); //#ebe // Button Highlights and Lowlights, Gradients // ---------------------------------------- -$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%); // #92e0bb -$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e -$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f +$green-light-3: color.adjust($green, $lightness: 24%); // #92e0bb +$green-light-2: color.adjust($green, $lightness: 12%); // #63d29e +$green-light-1: color.adjust($green, $lightness: 6%); // #4bcc8f -$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 -$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 -$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b +$green-dark-1: color.adjust($green, $lightness: -9%); // #2d9d68 +$green-dark-2: color.adjust($green, $lightness: -15%); // #268558 +$green-dark-3: color.adjust($green, $lightness: -20%); // #20724b -$primary-color-l-blue-light-1: color.adjust($l-blue, $lightness: 10%); +$l-blue-light-1: color.adjust($l-blue, $lightness: 10%); $l-blue-gradient-dark-1: color.adjust($l-blue-gradient, $lightness: -5%); $l-blue-gradient-dark-2: color.adjust($l-blue-gradient, $lightness: -10%); diff --git a/src/styles/components/_datepicker-custom.scss b/src/styles/components/_datepicker-custom.scss index 27cdf7832f..ea793a18d1 100644 --- a/src/styles/components/_datepicker-custom.scss +++ b/src/styles/components/_datepicker-custom.scss @@ -63,7 +63,7 @@ .react-datepicker__month-read-view, .react-datepicker__year-read-view { - color: variables.$color-white; + color: variables.$white; background: variables.$color-gray; &:hover { background: variables.$color-darkgray; diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index 7e6c7aebe9..1afbad781f 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -46,8 +46,8 @@ text-shadow: 0px 1px 0px variables.$white; &:hover { - border: variables.$thin-border-stroke variables.$primary-color-light-blue; - box-shadow: 0 0 0 1px variables.$primary-color-light-blue; + border: variables.$thin-border-stroke variables.$l-blue; + box-shadow: 0 0 0 1px variables.$l-blue; } &:active { diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index a6e1bb22c4..8a5276b315 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -143,7 +143,7 @@ .lang-dd .dropdown-ul { .selected-icon { - color: variables.$primary-color-green; + color: variables.$green; font-size: 15px; margin: 0 7px 0 0; vertical-align: middle; diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index 5fc72d817a..ab22cb3e08 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -198,14 +198,14 @@ select[multiple] { border: 1px solid variables.$main-border-color; border-radius: 4px; padding: 0px 8px; - color: variables.$color-black; + color: variables.$black; margin-right: 8px; white-space: nowrap; } /* Right text */ .file-text { - color: variables.$color-white; + color: variables.$white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/styles/components/_multi-value.scss b/src/styles/components/_multi-value.scss index 88f914c177..24c9d0a161 100644 --- a/src/styles/components/_multi-value.scss +++ b/src/styles/components/_multi-value.scss @@ -19,7 +19,7 @@ } &-green { - background: variables.$primary-color-green; + background: variables.$green; } &-red { diff --git a/src/styles/components/_popover.scss b/src/styles/components/_popover.scss index 08ee3571bc..2a184a6bc6 100644 --- a/src/styles/components/_popover.scss +++ b/src/styles/components/_popover.scss @@ -32,7 +32,7 @@ } .play-circle-icon { - color: variables.$primary-color-green; + color: variables.$green; font-size: 20px; } } diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index 72de987697..1226c60c56 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -71,7 +71,7 @@ background: variables.$l-blue; } &.verystrong { - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + background: linear-gradient(variables.$green, variables.$green-dark-1); } } diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index 7abd0c0bf3..8dfa1a5ca2 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -37,12 +37,12 @@ } .MuiStepLabel-labelContainer .Mui-active { - border-bottom: 1px solid variables.$primary-color-blue; + border-bottom: 1px solid variables.$d-blue; font-weight: 800; } .Mui-active svg { - color: variables.$primary-color-blue !important; + color: variables.$d-blue !important; transform: none !important; } diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index ea967b14bf..b4e43ab170 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -183,12 +183,12 @@ .chevron-up { position: relative; top: 3px; - color: variables.$grey; + color: variables.$color-gray; } .chevron-down { position: relative; top: -3px; - color: variables.$grey; + color: variables.$color-gray; } .active { color: variables.$color-darkgray; diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index 7e873ef538..8b00ca42d4 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -31,48 +31,48 @@ position: relative; @if $color == green-dark-bg { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; + box-shadow: inset 0px 1px 0px 0px variables.$green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + background: linear-gradient(variables.$green, variables.$green-dark-1); border: variables.$thin-border-stroke variables.$dark-bg-border-color; &:hover, &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, variables.$primary-color-green-dark-3); + background: linear-gradient(variables.$green-light-1, variables.$green-dark-3); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; - background-color: variables.$primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$green-dark-2; + background-color: variables.$green-dark-1 !important; } } @else if $color == green { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; + box-shadow: inset 0px 1px 0px 0px variables.$green-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; - background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); + background: linear-gradient(variables.$green, variables.$green-dark-1); - border: variables.$thin-border-stroke variables.$primary-color-green-dark-3; + border: variables.$thin-border-stroke variables.$green-dark-3; &:hover, &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-green-light-1, variables.$primary-color-green-dark-3); + background: linear-gradient(variables.$green-light-1, variables.$green-dark-3); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; - background-color: variables.$primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$green-dark-2; + background-color: variables.$green-dark-1 !important; } } @else if $color == lightblue { - box-shadow: inset 0px 1px 0px 0px variables.$primary-color-l-blue-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; + box-shadow: inset 0px 1px 0px 0px variables.$l-blue-light-1, 0px 2px 3px 1px variables.$color-button-box-shadow; background: linear-gradient(variables.$l-blue, variables.$l-blue-gradient); @@ -81,7 +81,7 @@ &:hover, &:focus { cursor: pointer; - background: linear-gradient(variables.$primary-color-l-blue-light-1, variables.$l-blue-gradient-dark-2); + background: linear-gradient(variables.$l-blue-light-1, variables.$l-blue-gradient-dark-2); } &:active { diff --git a/src/styles/views/modals/_embedded-code.scss b/src/styles/views/modals/_embedded-code.scss index bbde152315..28f4900412 100644 --- a/src/styles/views/modals/_embedded-code.scss +++ b/src/styles/views/modals/_embedded-code.scss @@ -102,7 +102,7 @@ width:95%; overflow:auto; margin-top:5px; - color: variables.$color-black; + color: variables.$black; display: block; padding: 16px; border-radius: 10px; diff --git a/src/styles/views/modals/_hotkey-cheat-sheet.scss b/src/styles/views/modals/_hotkey-cheat-sheet.scss index d1456e74ba..2420d7400c 100644 --- a/src/styles/views/modals/_hotkey-cheat-sheet.scss +++ b/src/styles/views/modals/_hotkey-cheat-sheet.scss @@ -7,7 +7,7 @@ border: 1px solid variables.$modal-heading-color; border-radius: 5px; padding: 2px 9px; - color: variables.$color-white; + color: variables.$white; text-shadow: 1px 1px 0 variables.$color-darkgray; min-width: 32px; } diff --git a/src/styles/views/modals/_publications.scss b/src/styles/views/modals/_publications.scss index c16dc0460b..2c13389ad1 100644 --- a/src/styles/views/modals/_publications.scss +++ b/src/styles/views/modals/_publications.scss @@ -89,7 +89,7 @@ } .video-icon { - color: variables.$primary-color-green; + color: variables.$green; font-size: 24px; } @@ -100,12 +100,12 @@ .play { float: right; margin-left: auto; - color: variables.$primary-color-green; + color: variables.$green; font-size: 24px; &:active:before, &:hover:before { - color: variables.$primary-color-green-dark-1; + color: variables.$green-dark-1; } } diff --git a/src/styles/views/modals/_registration.scss b/src/styles/views/modals/_registration.scss index 7180ffc1fa..6e1c72cf74 100644 --- a/src/styles/views/modals/_registration.scss +++ b/src/styles/views/modals/_registration.scss @@ -29,7 +29,7 @@ } .modal-content { - background-color: variables.$primary-color-white; + background-color: variables.$off-white; //background-color: $white; .row { margin: 6px 0; diff --git a/src/styles/views/modals/_workflows.scss b/src/styles/views/modals/_workflows.scss index e4c56d00c1..ee6cf4c369 100644 --- a/src/styles/views/modals/_workflows.scss +++ b/src/styles/views/modals/_workflows.scss @@ -27,7 +27,7 @@ vertical-align: middle; &.grey { - color: variables.$grey; + color: variables.$color-gray; } &.darkgray {