From 9cf1e2b49b12ee9a05c79a348561b43f41ff38b1 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Wed, 13 Dec 2023 22:49:16 +0100
Subject: [PATCH] [DURACOM-195] [DURACOM-210] Reorder SCSS and CSS theme
 variables

---
 src/styles/_bootstrap_variables.scss          | 128 +++++++++++-------
 src/styles/_bootstrap_variables_mapping.scss  |  12 +-
 src/styles/_custom_variables.scss             |  61 ++++-----
 .../styles/_theme_css_variable_overrides.scss |   5 -
 .../_theme_sass_variable_overrides.scss       | 100 ++++++++++----
 5 files changed, 187 insertions(+), 119 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 64cc126044c..e3b8fcd6dd1 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -1,13 +1,19 @@
-/** Help Variables **/
-$fa-fixed-width: 1.25rem !default;
-$icon-padding: 1rem !default;
+// DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass
+// variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap
+// still uses Sass variables internally. So if you want to override Bootstrap (or other sass
+// variables) you can do so here. Their CSS counterparts will include the changes you make here.
 
-/* Fonts */
-// Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
-// See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
-$fa-font-path: "^assets/fonts" !default;
-/* Images */
-$image-path: "../assets/images" !default;
+// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet,
+// therefore if you want to use any Bootstrap variable you also need to declare it here.
+
+// If you want to change the 'dspace' or the 'custom' theme you should not edit this file, and you should edit
+// _theme_sass_variable_overrides.scss in the theme folder.
+
+// All SASS variables that are declared must have the '!default' flag, otherwise it won't be possible
+// to override them in custom themes.
+
+
+/*** FONT FAMILIES AND FONT SIZES ***/
 
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $h1-font-size: $font-size-base * 2.125 !default;
@@ -17,49 +23,79 @@ $h4-font-size: $font-size-base * 1.25 !default;
 $h5-font-size: $font-size-base * 1.125 !default;
 $h6-font-size: $font-size-base !default;
 
+
+/*** BOOTSTRAP OPTIONS ***/
+
 // enable-responsive-font-sizes allows text to scale more naturally across device and viewport sizes
-$enable-responsive-font-sizes: true;
-
-/** Bootstrap Variables **/
-/* Colors */
-$gray-700: #495057 !default;  // Bootstrap $gray-700
-$gray-100: #f8f9fa !default;  //           $gray-100
-
-/* Reassign color vars to semantic color scheme */
-$blue:   #2B4E72 !default;
-$green:  #94BA65 !default;
-$cyan:   #006666 !default;
-$yellow: #ec9433 !default;
-$red:    #CF4444 !default;
-$dark:   darken($blue, 17%) !default;
-
-
-
-$theme-colors: (
-        primary: $blue,
-        secondary: $gray-700,
-        success: $green,
-        info: $cyan,
-        warning: $yellow,
-        danger: $red,
-        light: $gray-100,
-        dark: $dark
-) !default;
-/* Fonts */
-$link-color: map-get($theme-colors, info) !default;
+$enable-responsive-font-sizes: true !default;
+$enable-shadows: true !default;
+
+
+/*** SEMANTIC COLOR SCHEME ***/
+
+// Override semantic colors
+$primary:   #2b4e72 !default;               // Blue gray
+$secondary: #495057 !default;               // As Bootstrap $gray-700
+$success:   #94ba65 !default;               // Lime
+$info:      #006666 !default;               // Blue green
+$warning:   #ec9433 !default;               // Orange
+$danger:    #cf4444 !default;               // Red
+$light:     #f8f9fa !default;               // As Bootstrap $gray-100
+$dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
+
+
+/*** OTHER BOOTSTRAP VARIABLES ***/
+
+$link-color: #006666 !default;
+$link-hover-color: darken($link-color, 15%) !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 165 !default;
 
 $navbar-dark-color: rgba(white, .5) !default;
 $navbar-light-color: rgba(black, .5) !default;
 $navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-dark-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-light-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 
-$enable-shadows: true !default;
 
-$yiq-contrasted-threshold:  165 !default;
+/*** CUSTOM DSPACE VARIABLES ***/
+
+$ds-home-news-link-color: $link-color !default;
+$ds-home-news-link-hover-color: darken($ds-home-news-link-color, 15%) !default;
+$ds-breadcrumb-link-color: $link-color !default;
+
+$ds-header-navbar-border-top-color: #fff !default;
+$ds-header-navbar-border-bottom-color: #ced4da !default;
+
+$ds-header-bg: #fff !default;
+$ds-header-icon-color: $link-color !default;
+$ds-header-icon-color-hover: $link-hover-color !default;
+
+$ds-navbar-bg: #fff !default;
+$ds-navbar-dropdown-bg: #fff !default;
+$ds-expandable-navbar-bg: #fff !default;
+$ds-navbar-link-color: $link-color !default;
+$ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
+
+$ds-slider-color: $success !default;
 
-$primary-bg: #{lighten(map-get($theme-colors, primary), 30%)} !default;
-$secondary-bg: #{lighten(map-get($theme-colors, secondary), 30%)} !default;
-$success-bg: #{lighten(map-get($theme-colors, success), 30%)} !default;
-$info-bg: #{lighten(map-get($theme-colors, info), 30%)} !default;
-$warning-bg: #{lighten(map-get($theme-colors, warning), 30%)} !default;
-$danger-bg: #{lighten(map-get($theme-colors, danger), 30%)} !default;
+$ds-admin-sidebar-bg: darken(#2b4e72, 17%) !default;
+$ds-admin-sidebar-active-bg: darken($ds-admin-sidebar-bg, 3%) !default;
+$ds-admin-sidebar-fg: #47495d !default;
+$ds-admin-sidebar-fixed-element-width: 55px !default;
+$ds-admin-sidebar-collapsible-element-width: 250px !default;
+$ds-admin-sidebar-total-width: $ds-admin-sidebar-fixed-element-width + $ds-admin-sidebar-collapsible-element-width; // do not change/override
+
+$ds-primary-bg: #{lighten($primary, 30%)} !default;
+$ds-secondary-bg: #{lighten($secondary, 30%)} !default;
+$ds-success-bg: #{lighten($success, 30%)} !default;
+$ds-info-bg: #{lighten($info, 30%)} !default;
+$ds-warning-bg: #{lighten($warning, 30%)} !default;
+$ds-danger-bg: #{lighten($danger, 30%)} !default;
+
+
+/*** MISC ***/
+
+// Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
+// See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
+$fa-font-path: "^assets/fonts" !default;
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 16719f99194..04ed5a7850f 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -29,17 +29,17 @@
   --bs-teal: #{$teal};
   --bs-cyan: #{$cyan};
   --bs-primary: #{$primary};
-  --bs-primary-bg: #{$primary-bg};
+  --bs-primary-bg: #{$ds-primary-bg};
   --bs-secondary: #{$secondary};
-  --bs-secondary-bg: #{$secondary-bg};
+  --bs-secondary-bg: #{$ds-secondary-bg};
   --bs-success: #{$success};
-  --bs-success-bg: #{$success-bg};
+  --bs-success-bg: #{$ds-success-bg};
   --bs-info: #{$info};
-  --bs-info-bg: #{$info-bg};
+  --bs-info-bg: #{$ds-info-bg};
   --bs-warning: #{$warning};
-  --bs-warning-bg: #{$warning-bg};
+  --bs-warning-bg: #{$ds-warning-bg};
   --bs-danger: #{$danger};
-  --bs-danger-bg: #{$danger-bg};
+  --bs-danger-bg: #{$ds-danger-bg};
   --bs-light: #{$light};
   --bs-dark: #{$dark};
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 99bf3346510..596e582cfe9 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -19,17 +19,18 @@
   --ds-footer-z-index: 0;
   --ds-sidebar-z-index: 20;
 
-  --ds-header-bg: #{$white};
-  --ds-header-icon-color: #{$link-color};
-  --ds-header-icon-color-hover: #{$link-hover-color};
-  --ds-navbar-bg: var(--ds-header-bg);
-  --ds-header-navbar-border-top-color: #{$white};
-  --ds-header-navbar-border-bottom-color: #{$gray-400};
-  --ds-navbar-link-color: #{$cyan};
-  --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
-  --ds-expandable-navbar-bg: var(--ds-navbar-bg);
-  --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
-  --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
+  --ds-header-bg: #{$ds-header-bg};
+  --ds-header-icon-color: #{$ds-header-icon-color};
+  --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
+  --ds-navbar-bg: #{$ds-navbar-bg};
+  --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
+  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
+  --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
@@ -38,25 +39,19 @@
     --ds-header-logo-height: 50px;
   }
 
-  $admin-sidebar-bg: darken(#2B4E72, 17%);
-  $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
-  $admin-sidebar-fixed-element-width: 55px !default;
-  $admin-sidebar-collapsible-element-width: 250px !default;
-  $admin-sidebar-total-width: $admin-sidebar-fixed-element-width + $admin-sidebar-collapsible-element-width !default;
-
-  --ds-admin-sidebar-bg: #{$admin-sidebar-bg};
-  --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg};
-  --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)};
-  --ds-admin-sidebar-fixed-element-width: #{$admin-sidebar-fixed-element-width};
+  --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
+  --ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
+  --ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
+  --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
   --ds-admin-sidebar-fixed-element-z-index: 10;
-  --ds-admin-sidebar-collapsible-element-width: #{$admin-sidebar-collapsible-element-width};
-  --ds-admin-sidebar-total-width: #{$admin-sidebar-total-width};
+  --ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
+  --ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
   --ds-admin-sidebar-link-color: #{$navbar-dark-color};
   --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
 
-  --ds-dark-scrollbar-bg: #{$admin-sidebar-active-bg};
-  --ds-dark-scrollbar-alt-bg: #{lighten($admin-sidebar-active-bg, 2%)};
-  --ds-dark-scrollbar-fg: #47495d;
+  --ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
+  --ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};
+  --ds-dark-scrollbar-fg: #{$ds-admin-sidebar-fg};
   --ds-dark-scrollbar-width: 8px;
 
   --ds-submission-sections-margin-bottom: .5rem;
@@ -78,9 +73,6 @@
   --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
   --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
 
-  --ds-fa-fixed-width: #{$fa-fixed-width};
-  --ds-icon-padding: #{$icon-padding};
-
   --ds-top-footer-bg: #{$gray-200};
   --ds-footer-bg: #{theme-color('primary')};
   --ds-footer-border: 1px solid var(--bs-gray-400);
@@ -88,17 +80,16 @@
   --ds-footer-padding-bottom: 0;
   --ds-footer-logo-height: 50px;
 
-  $home-news-link-color: $cyan;
-  --ds-home-news-link-color: #{$home-news-link-color};
-  --ds-home-news-link-hover-color: #{darken($home-news-link-color, 15%)};
+  --ds-home-news-link-color: #{$ds-home-news-link-color};
+  --ds-home-news-link-hover-color: #{darken($ds-home-news-link-color, 15%)};
   --ds-home-news-background-color: #{$gray-200};
 
   --ds-breadcrumb-bg: #{$gray-200} !important;
-  --ds-breadcrumb-link-color: #{$cyan};
-  --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
+  --ds-breadcrumb-link-color: #{$ds-breadcrumb-link-color};
+  --ds-breadcrumb-link-active-color: #{darken($ds-breadcrumb-link-color, 30%)};
   --ds-breadcrumb-max-length: 200px;
 
-  --ds-slider-color: #{$green};
+  --ds-slider-color: #{$ds-slider-color};
   --ds-slider-handle-width: 18px;
 
   --ds-search-form-scope-max-width: 150px;
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 6315acc3fa7..b8e0b3e2e94 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -14,10 +14,6 @@
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
 
-  --ds-home-news-link-color: #{$green};
-  --ds-home-news-link-hover-color: #{darken($green, 15%)};
-
-  --ds-header-navbar-border-bottom-color: #{$green};
   --ds-header-navbar-border-bottom-height: 5px;
 
   /* set the next two properties as `--ds-header-navbar-border-bottom-*`
@@ -26,4 +22,3 @@
   --ds-mobile-navbar-border-top-height: 0;
   --ds-mobile-navbar-padding-top: 0;
 }
-
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index b5799c97496..bf714ccdced 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -1,41 +1,87 @@
 // DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass
 // variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap
-// still uses Sass variables internally. So if you want to override bootstrap (or other sass
-// variables) you can do so here. Their CSS counterparts will include the changes you make here
+// still uses Sass variables internally. So if you want to override Bootstrap (or other sass
+// variables) you can do so here. Their CSS counterparts will include the changes you make here.
+
+// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet,
+// therefore if you want to use any Bootstrap variable you also need to declare it here.
+
+// All SASS variables from the base theme are also included here. Do not use the '!default' flag
+// here if you want to override them.
+
+
+/*** FONT FAMILIES ***/
 
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');
 
 $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-$navbar-dark-color: #FFFFFF;
 
-/* Reassign color vars to semantic color scheme */
-$blue: #2b4e72 !default;
-$green: #92C642 !default;
-$cyan: #207698 !default;
-$yellow: #ec9433 !default;
-$red: #CF4444 !default;
-$dark: #43515f !default;
+/*** SEMANTIC COLOR SCHEME ***/
 
-$gray-800: #343a40 !default;
-$gray-700: #495057 !default;
-$gray-400: #ced4da !default;
-$gray-100: #f8f9fa !default;
+// Gray scale (uncomment the variables that you want to override or that you need to use in this file)
+//$white:    #fff;
+//$gray-100: #f8f9fa;
+//$gray-200: #e9ecef;
+//$gray-300: #dee2e6;
+//$gray-400: #ced4da;
+//$gray-500: #adb5bd;
+//$gray-600: #6c757d;
+//$gray-700: #495057;
+//$gray-800: #343a40;
+//$gray-900: #212529;
+//$black:    #000;
 
-$body-color: $gray-800 !default;                    // Bootstrap $gray-800
+// Other colors (uncomment the variables that you want to override or that you need to use in this file)
+//$blue:    #007bff !default;
+//$indigo:  #6610f2 !default;
+//$purple:  #6f42c1 !default;
+//$pink:    #e83e8c !default;
+//$red:     #dc3545 !default;
+//$orange:  #fd7e14 !default;
+//$yellow:  #ffc107 !default;
+//$green:   #28a745 !default;
+//$teal:    #20c997 !default;
+//$cyan:    #17a2b8 !default;
 
-$table-accent-bg: $gray-100 !default;   // Bootstrap $gray-100
-$table-hover-bg: $gray-400 !default;   // Bootstrap $gray-400
+// Override semantic colors here
+$primary:   #43515f;  // Gray
+$secondary: #495057;  // As Bootstrap $gray-700
+$success:   #92c642;  // Lime
+$info:      #207698;  // Light blue
+$warning:   #ec9433;  // Orange
+$danger:    #cf4444;  // Red
+$light:     #f8f9fa;  // As Bootstrap $gray-100
+$dark:      #43515f;  // Dark blue
 
-$yiq-contrasted-threshold:  170 !default;
+// Define or override other colors here
+// ...
 
+// Add new semantic colors here (you don't need to add existing semantic colors)
 $theme-colors: (
-        primary: $dark,
-        secondary: $gray-700,
-        success: $green,
-        info: $cyan,
-        warning: $yellow,
-        danger: $red,
-        light: $gray-100,
-        dark: $dark
-) !default;
+  // ...
+);
+
+
+/*** OTHER BOOTSTRAP VARIABLES ***/
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 170;
+
+$body-color: #343a40;       // As Bootstrap $gray-800
+
+$link-color: #207698;       // Blue green, as DSpace $info
+$link-decoration: none;
+$link-hover-color: darken($link-color, 15%);
+$link-hover-decoration: underline;
+
+$table-accent-bg: #f8f9fa;  // As Bootstrap $gray-100
+$table-hover-bg: #ced4da;   // As Bootstrap $gray-400
+
+$navbar-dark-color: #fff;
+
+
+/*** CUSTOM DSPACE VARIABLES ***/
+
+$ds-home-news-link-color: #92c642;
+$ds-header-navbar-border-bottom-color: #92c642;