Deque Analysis Color Contrast fixes

DSpace · Oct 31, 2023 · cdd500b · cdd500b
1 parent ab17164
commit cdd500b
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 26 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,3 +14,19 @@
 .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,3 +1,6 @@
 .close: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
@@ -30,3 +30,9 @@
 .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-slider-color);
+      background: var(--ds-range-filter-connect-color);
   }
 
   .noUi-target {
@@ -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-range-filter-border-color);
+      &::before, &::after {
+          background-color: var(--ds-range-filter-border-color);
+      }
+  }
 }
diff --git a/src/app/submission/form/footer/submission-form-footer.component.scss b/src/app/submission/form/footer/submission-form-footer.component.scss
@@ -0,0 +1,15 @@
+: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/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
@@ -26,9 +26,9 @@ $green:  #94BA65 !default;
 $cyan:   #006666 !default;
 $yellow: #ec9433 !default;
 $red:    #CF4444 !default;
-$dark:   darken($blue, 17%) !default;
-
+$teal:   #1F7293 !default;
 
+$dark:   darken($blue, 17%) !default;
 
 $theme-colors: (
         primary: $blue,
@@ -41,7 +41,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;

diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
@@ -32,7 +32,7 @@
   --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);
-
+  
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
   --ds-admin-sidebar-bg: #{$admin-sidebar-bg};
@@ -61,7 +61,20 @@
   --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};
   --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width};
@@ -81,7 +94,7 @@
   --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;
 

diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
@@ -234,7 +234,8 @@ ds-dynamic-form-control-container.d-none {
 }
 
 .badge-archived {
-  background-color: #{map-get($theme-colors, success)};
+  background-color: var(--ds-badge-archived-background-color);
+	color: var(--ds-badge-archived-color)
 }
 
 .badge-workflow {
@@ -269,27 +270,101 @@ 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;
-}
-
-.pl-0\.5 {
-  padding-left: 0.125rem !important;
-}
-
-.px-0\.5 {
-  padding-left: 0.125rem !important;
-  padding-right: 0.125rem !important;
-}
-
-.py-0\.5 {
-  padding-top: 0.125rem !important;
-  padding-bottom: 0.125rem !important;
+    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;
+	}
+}
+dynamic-ng-bootstrap-checkbox .custom-control-label::before {
+    border-color: #858c91;
+}
+.text-warning {
+    color: var(--ds-text-warning-color) !important;
+}
+.text-success {
+    color: var(--ds-text-success-color) !important;
+}
+ngb-accordion {
+    a.close {
+        opacity: 0.75;
+    }
+    a.close:not(:disabled):not(.disabled):hover {
+        opacity: 0.9;
+    }
 }