Replace hard-coded colors with bootstrap variants

* Replace custom variables with Bootstrap variants * Replace custom button colors with Bootstrap variants * Remove custom colors and replace them with bootstrap variants * Fix checkbox offset styles --------- Co-authored-by: Maciej Kleban <[email protected]>
DSpace · Jan 12, 2024 · b77a2b2 · b77a2b2
1 parent 480f959
commit b77a2b2
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 132 deletions.
diff --git a/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/...o-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -14,19 +14,3 @@
 .cdk-drag-placeholder {
   opacity: 0;
 }
-
-.btn.btn-outline-warning:not(:disabled):hover {
-  background-color: #7f480c;
-}
-.btn.btn-success:not(:disabled):focus, .btn.btn-outline-success:not(:disabled):focus{
-  outline: 2px solid rgba(43, 99, 47, 1)
-}
-.btn.btn-danger:not(:disabled):focus, .btn.btn-outline-danger:not(:disabled):focus{
-  outline: 2px solid rgba(190, 114, 114, 1);
-}
-.btn.btn-warning:not(:disabled):focus, .btn.btn-outline-warning:not(:disabled):focus {
-  outline: 2px solid rgba(88, 87, 65, 1);
-}
-.btn.btn-primary:not(:disabled):focus, .btn.btn-outline-primary:not(:disabled):focus {
-  outline: 2px solid rgba(130, 135, 139, 1);
-}
diff --git a/src/app/shared/alert/alert.component.scss b/src/app/shared/alert/alert.component.scss
@@ -1,5 +1,8 @@
-.close:focus {
-  outline: none !important;
+.close {
+  opacity: 0.75;
+  &:focus {
+    outline: none !important;
+  }
 }
 button.close {
   opacity: 0.6;

diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
@@ -5,7 +5,8 @@
 }
 
 .close {
-  outline: none !important
+  outline: none !important;
+  opacity: 0.8;
 }
 
 .notification-icon {
@@ -30,9 +31,3 @@
 .alert-warning .notification-progress-loader span {
   background: var(--ds-notification-bg-warning);
 }
-.alert-success{
-	color: var(--ds-notification-success-color);
-}
-.alert-danger {
-  color: var(--ds-notification-danger-color);
-}
diff --git a/...earch/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/...earch/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -26,7 +26,7 @@
     }
 
   .noUi-connect {
-      background: var(--ds-range-filter-connect-color);
+      background: var(--ds-slider-color);
   }
 
   .noUi-target {
@@ -38,9 +38,9 @@
     width: calc(100% + var(--ds-slider-handle-width));
   }
   .noUi-handle {
-      border-color: var(--ds-range-filter-border-color);
+      border-color: var(--bs-dark);
       &::before, &::after {
-          background-color: var(--ds-range-filter-border-color);
+          background-color: var(--bs-dark);
       }
   }
 }
diff --git a/src/app/submission/form/footer/submission-form-footer.component.scss b/src/app/submission/form/footer/submission-form-footer.component.scss
@@ -1,15 +0,0 @@
-:host{
-	.btn:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus, .custom-control-input:focus ~ .custom-control-label::before{
-		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.6);
-	}
-
-	.btn.btn-success:focus{
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(0, 100, 0, 0.7)
-	}
-	.btn.btn-danger:focus{
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(200, 0, 0, 0.7)
-	}
-	.btn.btn-warning:focus{
-		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(89, 81, 0, 0.7)
-	}
-}

diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
@@ -61,19 +61,6 @@
   --ds-notification-bg-danger: #{darken(adjust-hue($danger, -10), 10%)};
   --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
   --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
-	--ds-notification-success-color: #307B23;
-  --ds-notification-danger-color: #9a6e6e;
-  --ds-text-warning-color: #cf822c;
-  --ds-text-success-color: #74a030;
-  --ds-range-filter-border-color: #949494;
-  --ds-range-filter-connect-color: #63852e;
-
-	--ds-badge-archived-background-color: #2a701e;
-	--ds-badge-archived-color: #000;
-	--ds-button-success-background-color: #358726;
-	--ds-button-success-background-hover-color: #{darken(#358726, 10%)};
-	--ds-button-warning-background-color: #{darken($yellow, 20%)};
-	--ds-button-warning-background-hover-color: #{darken($yellow, 30%)};
 
   --ds-fa-fixed-width: #{$fa-fixed-width};
   --ds-icon-padding: #{$icon-padding};
@@ -98,7 +85,7 @@
   --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
   --ds-breadcrumb-max-length: 200px;
 
-  --ds-slider-color: #{$green};
+  --ds-slider-color: #{darken($green, 20%)};
   --ds-slider-handle-width: 18px;
 
   --ds-search-form-scope-max-width: 150px;

diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
@@ -234,8 +234,7 @@ ds-dynamic-form-control-container.d-none {
 }
 
 .badge-archived {
-  background-color: var(--ds-badge-archived-background-color);
-	color: var(--ds-badge-archived-color)
+  background-color: darken($green, 25);
 }
 
 .badge-workflow {
@@ -295,85 +294,100 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
     padding-bottom: 0.125rem !important;
 }
 
-.btn.btn-success{
-	background-color: var(--ds-button-success-background-color);
-	border-color: var(--ds-button-success-background-color);
-	&:hover{
-		background-color: var(--ds-button-success-background-hover-color);
-		border-color: var(--ds-button-success-background-hover-color);
-	}
-}
-.btn.btn-outline-success{
-	border-color: var(--ds-button-success-background-color);
-	color: var(--ds-button-success-background-color);
-	&:hover{
-		background-color: var(--ds-button-success-background-hover-color);
-		color: $white;
-	}
-}
-.btn.btn-outline-warning{
-	border-color:var(--ds-button-warning-background-color);
-	color:var(--ds-button-warning-background-color);
-	&:hover{
-		background-color:var(--ds-button-warning-background-hover-color);
-		color: $white;
-	}
-	&:disabled{
-		background-color: transparent;
-		&:hover{
-			color:var(--ds-button-warning-background-color);
-		}
-	}
-}
-
-
-.btn:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus, .custom-control-input:focus ~ .custom-control-label::before, .form-control:focus, .page-link:focus{
-	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 0 0 0.2rem rgba(27, 41, 55, 0.5);
-}
-
-.btn.btn-success:focus, .btn.btn-outline-success:focus{
-    outline: 2px solid rgba(76, 145, 76, 1);
-    outline-offset: 2px;
-    box-shadow: none;
-}
-.btn.btn-danger:focus, .btn.btn-outline-danger:focus{
-	outline: 2px solid rgba(205, 126, 126, 1);
-    outline-offset: 2px;
-    box-shadow: none;
-}
-.btn.btn-warning:focus, .btn.btn-outline-warning:focus {
-    outline: 2px solid rgba(88, 87, 65, 1);
-    outline-offset: 2px;
-    box-shadow: none;
-}
-.btn.btn-primary:focus, .btn.btn-outline-primary:focus {
-    box-shadow: none;
-    outline: 2px solid rgba(134, 137, 139, 1);
-    outline-offset: 2px;
-}
-.btn.btn-secondary:focus, .btn.btn-outline-secondary:focus {
-    box-shadow: none;
-    outline: 2px solid rgba(141, 148, 155, 1);
-    outline-offset: 2px;
-}
-.btn.btn-warning{
-	background-color:var(--ds-button-warning-background-color);
-	&:hover{
-		background-color:var(--ds-button-warning-background-hover-color);
-	}
-	&:disabled{
-		background-color: transparent;
-	}
+.btn {
+    &:focus {
+        outline-offset: 2px !important;
+        outline-style: solid !important;
+        outline-width: 2px !important;
+        box-shadow: none !important;
+    }
+    &:disabled {
+        opacity: 0.7;
+    }
+    &.btn-success {
+        background-color: darken($success, 20%);
+        border-color: darken($success, 20%);
+        &:hover {
+            background-color: darken($success, 30%);
+            border-color: darken($success, 30%);
+        }
+        &:focus {
+            outline-color: darken($success, 20%);
+        }
+    }
+    &.btn-outline-success {
+        border-color: darken($success, 20%);
+        color: darken($success, 20%);
+        &:hover{
+            background-color: darken($success, 30%);
+            color: $white;
+        }
+        &:focus {
+            outline-color: darken($success, 20%);
+        }
+    }
+    &.btn-warning {
+        background-color: darken($warning, 20%);
+        &:hover{
+            background-color: darken($warning, 30%);
+        }
+        &:disabled{
+            background-color: transparent;
+        }
+        &:focus {
+            outline-color: darken($warning, 22%);
+        }
+    }
+    &.btn-outline-warning {
+        border-color: darken($warning, 20%);
+        color: darken($warning, 20%);
+        &:hover {
+            background-color: darken($warning, 30%);
+            color: $white;
+        }
+        &:disabled {
+            background-color: transparent;
+            &:hover{
+                color: darken($warning, 20%);
+            }
+        }
+        :focus {
+            outline-color: darken($warning, 22%);
+        }
+        &:not(:disabled):hover {
+            background-color: darken($warning, 22%);
+        }
+    }
+    &.btn-secondary {
+        &:focus {
+            outline-color: darken($secondary, 20%);
+        }
+    }
+    &.btn-danger:focus, &.btn-outline-danger:focus {
+        outline-color: darken($danger, 20%);
+    }
+    &.btn-primary:focus, &.btn-outline-primary:focus {
+        outline-color: darken($primary, 5%);
+    }
+}
+
+dynamic-ng-bootstrap-checkbox .custom-control-input:focus ~ .custom-control-label::before {
+    outline: 2px solid $gray-700 !important;
+    box-shadow: none !important;
+    outline-offset: 2px !important;
 }
 dynamic-ng-bootstrap-checkbox .custom-control-label::before {
-    border-color: #858c91;
+    border-color: $gray-700;
 }
+
 .text-warning {
-    color: var(--ds-text-warning-color) !important;
+    color: darken($warning, 10%) !important;
 }
+
 .text-success {
-    color: var(--ds-text-success-color) !important;
+    color: darken($success, 11%) !important;
 }
+
 ngb-accordion {
     a.close {
         opacity: 0.75;
@@ -382,3 +396,23 @@ ngb-accordion {
         opacity: 0.9;
     }
 }
+
+.form-control, .page-link {
+    &:disabled::placeholder {
+        color: lighten($gray-700, 10%);
+    }
+    &:focus {
+        box-shadow: none;
+        outline: 2px solid lighten($gray-700, 10%);
+        outline-offset: 2px !important;
+    }
+}
+
+
+.alert-success{
+	color: darken($success, 22%);
+}
+
+.alert-danger {
+  color: darken($danger, 22%);
+}
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -12,7 +12,7 @@ $navbar-dark-color: #FFFFFF;
 /* Reassign color vars to semantic color scheme */
 $blue: #2b4e72 !default;
 $green: #92C642 !default;
-$cyan: #207698 !default;
+$cyan: #1e6f90 !default;
 $yellow: #ec9433 !default;
 $red: #CF4444 !default;
 $dark: #43515f !default;