Merge pull request DSpace#2587 from Dawnkai/main

Deque Analysis Color Contrast fixes

Author: tdonohue

src/app/shared/alert/alert.component.scss

@@ -1,3 +1,9 @@
-.close:focus {
-  outline: none !important;
+.close {
+  opacity: 0.75;
+  &:focus {
+    outline: none !important;
+  }
+}
+button.close {
+  opacity: 0.6;
 }

src/app/shared/notifications/notification/notification.component.scss

@@ -5,7 +5,8 @@
 }
 
 .close {
-  outline: none !important
+  outline: none !important;
+  opacity: 0.8;
 }
 
 .notification-icon {

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss

@@ -37,4 +37,10 @@
     margin: 0 calc(-1 * (var(--ds-slider-handle-width) / 2));
     width: calc(100% + var(--ds-slider-handle-width));
   }
+  .noUi-handle {
+      border-color: var(--ds-slider-handle-color);
+      &::before, &::after {
+          background-color: var(--ds-slider-handle-color);
+      }
+  }
 }

src/styles/_bootstrap_variables.scss

@@ -34,10 +34,9 @@ $green:  #94BA65 !default;
 $cyan:   #006666 !default;
 $yellow: #ec9433 !default;
 $red:    #CF4444 !default;
+$teal:   #1F7293 !default;
 $dark:   darken($blue, 17%) !default;
 
-
-
 $theme-colors: (
         primary: $blue,
         secondary: $gray-700,
@@ -49,7 +48,7 @@ $theme-colors: (
         dark: $dark
 ) !default;
 /* Fonts */
-$link-color: map-get($theme-colors, info) !default;
+$link-color: $teal !default;
 
 $navbar-dark-color: rgba(white, .5) !default;
 $navbar-light-color: rgba(black, .5) !default;

src/styles/_custom_variables.scss

@@ -81,12 +81,13 @@
   --ds-home-news-background-color: #{$gray-200};
 
   --ds-breadcrumb-bg: #{$gray-200} !important;
-  --ds-breadcrumb-link-color: #{$cyan};
+  --ds-breadcrumb-link-color: #{darken($cyan, 10%)};
   --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-slider-handle-color: #{darken($blue, 17%)};
 
   --ds-search-form-scope-max-width: 150px;
 

src/styles/_global-styles.scss

@@ -220,50 +220,50 @@ ds-dynamic-form-control-container.d-none {
 }
 
 .badge-validation {
-  background-color: #{map-get($theme-colors, warning)};
+    background-color: #{map-get($theme-colors, warning)};
 }
 
 .badge-waiting-controller {
-  background-color: #{map-get($theme-colors, info)};
+    background-color: #{map-get($theme-colors, info)};
 }
 
 .badge-workspace {
-  background-color: #{map-get($theme-colors, primary)};
+    background-color: #{map-get($theme-colors, primary)};
 }
 
 .badge-archived {
-  background-color: #{map-get($theme-colors, success)};
+    background-color: darken($green, 25);
 }
 
 .badge-workflow {
-  background-color: #{map-get($theme-colors, info)};
+    background-color: #{map-get($theme-colors, info)};
 }
 
 .badge-item-type {
-  background-color: #{map-get($theme-colors, info)};
+    background-color: #{map-get($theme-colors, info)};
 }
 
 .visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
-  // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
-  padding: 0;
-  display: inline;
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+ul.dso-edit-menu-dropdown>li .nav-item.nav-link {
+    // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
+    padding: 0;
+    display: inline;
 }
 
 .table th,
 .table td {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 /* Flexbox gap */
@@ -291,29 +291,158 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
 
 
 .pt-0\.5 {
-  padding-top: 0.125rem !important;
+    padding-top: 0.125rem !important;
 }
 
 .pr-0\.5 {
-  padding-right: 0.125rem !important;
+    padding-right: 0.125rem !important;
 }
 
 .pb-0\.5 {
-  padding-bottom: 0.125rem !important;
+    padding-bottom: 0.125rem !important;
 }
 
 .pl-0\.5 {
-  padding-left: 0.125rem !important;
+    padding-left: 0.125rem !important;
 }
 
 .px-0\.5 {
-  padding-left: 0.125rem !important;
-  padding-right: 0.125rem !important;
+    padding-left: 0.125rem !important;
+    padding-right: 0.125rem !important;
 }
 
 .py-0\.5 {
-  padding-top: 0.125rem !important;
-  padding-bottom: 0.125rem !important;
+    padding-top: 0.125rem !important;
+    padding-bottom: 0.125rem !important;
+}
+
+.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: $gray-700;
+}
+
+.text-warning {
+    color: darken($warning, 10%) !important;
+}
+
+.text-success {
+    color: darken($success, 11%) !important;
+}
+
+ngb-accordion {
+    a.close {
+        opacity: 0.75;
+    }
+    a.close:not(:disabled):not(.disabled):hover {
+        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%);
 }
 
 // Margin utility classes based on DSpace content spacing

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;