From ead2671890cfd9b7931c6dc8ea29373c359add4c Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Wed, 13 Dec 2023 22:57:36 +0100
Subject: [PATCH] [DURACOM-195] [DURACOM-210] Add 'ds-' prefix to custom SASS
 variables

---
 src/styles/_bootstrap_variables.scss          | 58 ++++++++++---------
 src/styles/_bootstrap_variables_mapping.scss  | 12 ++--
 src/styles/_custom_variables.scss             | 50 ++++++++--------
 .../_theme_sass_variable_overrides.scss       |  4 +-
 4 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index ea58638bbc7..86cb35eb915 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -60,34 +60,36 @@ $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox
 
 /*** CUSTOM DSPACE VARIABLES ***/
 
-$home-news-link-color: $link-color !default;
-$home-news-link-hover-color: darken($home-news-link-color, 15%) !default;
-$breadcrumb-link-color: $link-color !default;
-$navbar-link-color: $link-color !default;
-$navbar-link-color-hover: #{darken($navbar-link-color, 15%)} !default;
-$header-navbar-border-top-color: #fff !default;
-$header-navbar-border-bottom-color: #ced4da !default;
-$header-icon-color: $link-color !default;
-$header-icon-color-hover: $link-hover-color !default;
-
-$header-bg: #fff !default;
-$navbar-bg: #fff !default;
-
-$slider-color: $success !default;
-
-$admin-sidebar-bg: darken(#2b4e72, 17%) !default;
-$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%) !default;
-$admin-sidebar-fg: #47495d !default;
-$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; // do not change/override
-
-$primary-bg: #{lighten($primary, 30%)} !default;
-$secondary-bg: #{lighten($secondary, 30%)} !default;
-$success-bg: #{lighten($success, 30%)} !default;
-$info-bg: #{lighten($info, 30%)} !default;
-$warning-bg: #{lighten($warning, 30%)} !default;
-$danger-bg: #{lighten($danger, 30%)} !default;
+$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-link-color: $link-color !default;
+$ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
+
+$ds-slider-color: $success !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 ***/
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 f565c6e18d3..dcff75bdcbf 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -19,17 +19,17 @@
   --ds-footer-z-index: 0;
   --ds-sidebar-z-index: 20;
 
-  --ds-header-bg: #{$header-bg};
-  --ds-header-icon-color: #{$header-icon-color};
-  --ds-header-icon-color-hover: #{$header-icon-color-hover};
-  --ds-navbar-bg: #{$navbar-bg};
-  --ds-header-navbar-border-top-color: #{$header-navbar-border-bottom-color};
-  --ds-header-navbar-border-bottom-color: #{$header-navbar-border-bottom-color};
-  --ds-navbar-link-color: #{$navbar-link-color};
-  --ds-navbar-link-color-hover: #{$navbar-link-color-hover};
-  --ds-expandable-navbar-bg: #{$navbar-bg};
-  --ds-expandable-navbar-link-color: #{$navbar-link-color};
-  --ds-expandable-navbar-link-color-hover: #{$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-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-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,19 +38,19 @@
     --ds-header-logo-height: 50px;
   }
 
-  --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: #{$admin-sidebar-fg};
+  --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;
@@ -79,16 +79,16 @@
   --ds-footer-padding-bottom: 0;
   --ds-footer-logo-height: 50px;
 
-  --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: #{$breadcrumb-link-color};
-  --ds-breadcrumb-link-active-color: #{darken($breadcrumb-link-color, 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: #{$slider-color};
+  --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_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index 4c29547e923..bf714ccdced 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -83,5 +83,5 @@ $navbar-dark-color: #fff;
 
 /*** CUSTOM DSPACE VARIABLES ***/
 
-$home-news-link-color: #92c642;
-$header-navbar-border-bottom-color: #92c642;
+$ds-home-news-link-color: #92c642;
+$ds-header-navbar-border-bottom-color: #92c642;