MID-9298 - Color contrast fixes of nav and bootstrap colors (cyan ref…

…used)
Evolveum · Dec 13, 2023 · cf9ed47 · cf9ed47
1 parent 467017c
commit cf9ed47
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss b/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss
@@ -60,3 +60,28 @@
   background-color: #e9ecef;
   color: #2b2b2b;
 }
+
+/* Accessibility classes and overrides */
+/* Contrast ratio overrides */
+.navbar-dark .navbar-nav .nav-link {
+  color:hsla(0,0%,100%,.85)
+}
+
+/* Override for info button based on new bootstrap color*/
+/*.btn-info {
+  color: $button-default-color;
+
+  &:hover, &:focus, &:focus-visible, &:active {
+    color: $button-default-color;
+    background-color: lighten($info, 10%);
+    border-color: lighten($info, 10%);
+  }
+}*/
+
+.navbar .navbar-nav .nav-item .breadcrumb a > i {
+  color: $white;
+}
+
+.main-footer {
+  color: #737373;
+}
diff --git a/gui/admin-gui/src/frontend/scss/_bootstrap-variables.scss b/gui/admin-gui/src/frontend/scss/_bootstrap-variables.scss
@@ -7,12 +7,21 @@
 
 // taken from adminlte and bootstrap, also based on figma
 $gray-700: #495057 !default;
-$lightblue: #206F9D !default; //#3c8dbc - primary color //#357DA7 //#307197 - acceptable //#1070A8 - cool saturated lightblue
+$lightblue: #206F9D !default; //#3c8dbc - primary color //#307197 - acceptable //#1070A8 - cool saturated lightblue
+$green: #198754 !default;
+//$cyan: #0dcaf0 !default;
+$yellow: #ffc107 !default;
+$red: #dc3545 !default;
+$purple: #605CA8 !default;
 
 $midpoint-secondary: #818D98 !default;
 
 // override bootstrap defaults where necessary
 $primary: $lightblue;
 $secondary: $midpoint-secondary;
+$success: $green;
+//$info: $cyan;
+$warning: $yellow;
+$danger: $red;
 
 $body-color: $gray-700;
diff --git a/gui/admin-gui/src/frontend/scss/_midpoint-variables.scss b/gui/admin-gui/src/frontend/scss/_midpoint-variables.scss
@@ -39,21 +39,21 @@ $theme-colors: map-merge(
                 $theme-colors
 );
 
-$text-label-color: #3c8dbc;
-$text-dimmed-color: #808080;
+$text-label-color: #357DA7; //#3c8dbc
+$text-dimmed-color: #757575; //#808080
 $text-dark-dimmed-color: #595959;
 $table-divider-color:  #ddd;
 $table-stripe-bg-color: #f9f9f9;
 
-$object-user-color: #dd4b39;
-$object-role-color: #00a65a;
-$object-org-color: #F39C12;
-$object-service-color: #00C0EF;
-$object-resource-color: #605CA8;
+$object-user-color: $red;//#dd4b39;
+$object-role-color: $green;//#00a65a;
+$object-org-color: $yellow;//#F39C12;
+$object-service-color: #00C0EF;//$cyan <- this is new but not yet acceptable in new form;
+$object-resource-color: $purple;//#605CA8;
 $object-task-color: #001f3f;
 $object-shadow-color: #001F3F;
 $object-disabled-color: #BEBEBE;
-$object-access-color: #00a65a;
-$object-failed-color: #dd4b39;
+$object-access-color: $green;//#00a65a;
+$object-failed-color: $red;//#dd4b39;
 
 $legend-border-color: $gray-500;