[50749] Contrast issues (#14185)

* change the font color of ng-placeholde * change sub menu item font color * change the font-color of avatar based on its background color * change color of arrow and clear icons in ng-select * change the color of drag handler and actions context menu on widget * change the color of disabled text on tables * change font-color of text in input and wp disabled action menu item * change color of disabled sub menu item and description for file picker * change the font color of ng-placeholde * change sub menu item font color * change the font-color of avatar based on its background color * change color of arrow and clear icons in ng-select * change the color of drag handler and actions context menu on widget * change the color of disabled text on tables * change font-color of text in input and wp disabled action menu item * change color of disabled sub menu item and description for file picker * change the color of project statuses * set darker colors for background of avatars in high contrast mode * remove unnecessary method for selecting correct font-color * change styles for placeholder user avatar * simplify the function for selecting dark or light color * use const values for high contrast mode check * change variable names used for colors * change the color of the text in file upload box
opf · Nov 30, 2023 · 8b87c20 · 8b87c20
1 parent 75ad40c
commit 8b87c20
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 51 deletions.
diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb
@@ -36,6 +36,7 @@
     --main-menu-resizer-color: var(--color-border-muted);
     --main-menu-bg-selected-border: var(--color-border-muted);
     --main-menu-hover-border-color: var(--color-fg-default) !important;
+    --main-menu-fieldset-header-color: var(--color-fg-subtle) !important;
     --main-menu-border-width: 1px;
     --button--border-color: var(--color-border-default);
     --button--alt-highlight-background-hover-color: var(--color-btn-primary-hover-bg);

diff --git a/frontend/src/app/shared/components/colors/colors.service.ts b/frontend/src/app/shared/components/colors/colors.service.ts
@@ -1,13 +1,18 @@
 import { Injectable } from '@angular/core';
 
+export const colorModes = {
+  lightHighContrast: 'lightHighContrast',
+  light: 'light',
+};
+
 @Injectable({ providedIn: 'root' })
 export class ColorsService {
-  public toHsl(value:string) {
-    return `hsl(${this.valueHash(value)}, 50%, 50%)`;
+  public toHsl(value:string, colorMode?:string):string {
+    return `hsl(${this.valueHash(value)}, 50%, ${colorMode === colorModes.lightHighContrast ? '30%' : '50%'})`;
   }
 
   public toHsla(value:string, opacity:number) {
-    return `hsla(${this.valueHash(value)}, 50%, 50%, ${opacity}%)`;
+    return `hsla(${this.valueHash(value)}, 50%, 30%, ${opacity}%)`;
   }
 
   protected valueHash(value:string) {
@@ -18,4 +23,8 @@ export class ColorsService {
 
     return hash % 360;
   }
+
+  public colorMode():string {
+    return document.body.getAttribute('data-light-theme') === 'light_high_contrast' ? colorModes.lightHighContrast : colorModes.light;
+  }
 }
diff --git a/...ts/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.sass b/...ts/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.sass
@@ -1,3 +1,3 @@
 a, a:hover
-  color: var(--light-gray)
+  color: var(--color-fg-muted)
   text-decoration: none
diff --git a/frontend/src/app/shared/components/principal/principal-renderer.service.ts b/frontend/src/app/shared/components/principal/principal-renderer.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
-import { ColorsService } from 'core-app/shared/components/colors/colors.service';
+import { ColorsService, colorModes } from 'core-app/shared/components/colors/colors.service';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 import { IPrincipal } from 'core-app/core/state/principals/principal.model';
@@ -93,7 +93,8 @@ export class PrincipalRendererService {
     type:PrincipalType,
   ) {
     const userInitials = this.getInitials(principal.name);
-    const colorCode = this.colors.toHsl(principal.name);
+    const colorMode = this.colors.colorMode();
+    const colorCode = this.colors.toHsl(principal.name, colorMode);
 
     const fallback = document.createElement('div');
     fallback.classList.add('op-principal--avatar');
@@ -104,7 +105,7 @@ export class PrincipalRendererService {
     fallback.title = principal.name;
     fallback.textContent = userInitials;
 
-    if (type === 'placeholder_user') {
+    if (type === 'placeholder_user' && colorMode !== colorModes.lightHighContrast) {
       fallback.style.color = colorCode;
       fallback.style.borderColor = colorCode;
     } else {

diff --git a/frontend/src/app/spot/styles/sass/components/text-field.sass b/frontend/src/app/spot/styles/sass/components/text-field.sass
@@ -45,7 +45,7 @@
 
     &:disabled,
     &:disabled:hover
-      color: $spot-color-basic-gray-4
+      color: var(--color-fg-subtle)
       background-color: $spot-color-basic-white
 
     &:focus,

diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass
@@ -87,6 +87,7 @@ div.autocomplete
 
       .ng-placeholder
         top: 1px !important
+        color: var(--color-fg-muted)
         @include text-shortener
 
       input
@@ -99,6 +100,15 @@ div.autocomplete
     @include text-shortener
     line-height: 22px
 
+.ng-select .ng-arrow-wrapper .ng-arrow
+  border-color: var(--color-fg-muted) transparent transparent
+
+.ng-select.ng-select-opened>.ng-select-container .ng-arrow
+  border-color: transparent transparent var(--color-fg-muted)
+
+.ng-select .ng-clear-wrapper
+  color: var(--color-fg-muted)
+
 .ng-select.ng-select-multiple .ng-select-container
   height: initial !important
   min-height: initial !important

diff --git a/frontend/src/global_styles/content/_avatar.sass b/frontend/src/global_styles/content/_avatar.sass
@@ -48,8 +48,9 @@ $user-avatar-mini-height: 20px
 
   // Different border styling for placeholders
   &_placeholder-user
-    border: 1px dashed
-    background: none
+    border: 1px dashed var(--body-font-color)
+    background: none !important
+    color: var(--body-font-color)
 
   // Different border styling for groups
   &_group

diff --git a/frontend/src/global_styles/content/_grid.sass b/frontend/src/global_styles/content/_grid.sass
@@ -93,7 +93,7 @@ body.widget-grid-layout
 .grid--resizer
   position: absolute
   height: 20px
-  color: #888
+  color: var(--color-fg-muted)
   cursor: nwse-resize
   opacity: 0
   right: 0
@@ -116,7 +116,7 @@ body.widget-grid-layout
 
   &:before
     padding: 0
-    color: #888
+    color: var(--color-fg-muted)
 
   .grid--area.-widgeted:hover &
     opacity: 1

diff --git a/frontend/src/global_styles/content/_project_status.sass b/frontend/src/global_styles/content/_project_status.sass
@@ -1,11 +1,12 @@
 
-$project-status-gray: 204, 204, 204
-$project-status-red: #E73E3D
-$project-status-orange: #FFB030
-$project-status-green: #00D12D
-$project-status-deep-blue: #006E8F
-$project-status-light-blue: #84D6E5
-$project-status-deep-green: #007528
+$project-status_not-set: var(--fgColor-subtle, var(--color-subtle-fg))
+$project-status_off-track: var(--fgColor-danger, var(--color-danger-fg))
+$project-status_at-risk: var(--fgColor-severe, var(--color-severe-fg))
+$project-status_on-track: var(--fgColor-success, var(--color-success-fg))
+$project-status_discontinued: var(--fgColor-attention, var(--color-attention-fg))
+$project-status_not-started: var(--fgColor-accent, var(--color-accent-fg))
+$project-status_finished: var(--fgColor-done, var(--color-done-fg))
+$project-status-background-color: RGBA(var(--fgColor-subtle, var(--color-subtle-fg)), 0.3)
 
 // Project status widget
 .ng-select
@@ -38,26 +39,26 @@ $project-status-deep-green: #007528
   &.-not-set
     // Have to use uppercase functions to make sass ignore them :-/
     // https://github.com/sass/node-sass/issues/2251
-    border-color: RGB($project-status-gray)
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_not-set
+    background-color: $project-status-background-color
   &.-off-track
-    border-color: $project-status-red
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_off-track
+    background-color: $project-status-background-color
   &.-at-risk
-    border-color: $project-status-orange
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_at-risk
+    background-color: $project-status-background-color
   &.-on-track
-    border-color: $project-status-green
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_on-track
+    background-color: $project-status-background-color
   &.-not-started
-    border-color: $project-status-light-blue
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_not-started
+    background-color: $project-status-background-color
   &.-finished
-    border-color: $project-status-deep-green
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_finished
+    background-color: $project-status-background-color
   &.-discontinued
-    border-color: $project-status-deep-blue
-    background-color: RGBA($project-status-gray, 0.3)
+    border-color: $project-status_discontinued
+    background-color: $project-status-background-color
 
   &.-inline
     height: 24px
@@ -80,19 +81,19 @@ $project-status-deep-green: #007528
   font-weight: var(--base-text-weight-bold)
 
   &.-not-set
-    color: $project-status-gray
+    color: $project-status_not-set
   &.-off-track
-    color: $project-status-red
+    color: $project-status_off-track
   &.-at-risk
-    color: $project-status-orange
+    color: $project-status_at-risk
   &.-on-track
-    color: $project-status-green
+    color: $project-status_on-track
   &.-not-started
-    color: $project-status-light-blue
+    color: $project-status_not-started
   &.-finished
-    color: $project-status-deep-green
+    color: $project-status_finished
   &.-discontinued
-    color: $project-status-deep-blue
+    color: $project-status_discontinued
 
 .project-status--pulldown-icon
   font-size: 10px

diff --git a/frontend/src/global_styles/content/_tables.sass b/frontend/src/global_styles/content/_tables.sass
@@ -139,7 +139,7 @@ tr
 
   &.user
     &.locked, &.registered, &.locked a, &.registered a
-      color: #aaa
+      color: var(--color-fg-subtle)
 
 td
   &.hours

diff --git a/frontend/src/global_styles/content/work_packages/_table_hierarchy.sass b/frontend/src/global_styles/content/work_packages/_table_hierarchy.sass
@@ -1,4 +1,3 @@
-$table-row-hierarchies-row-font-color: #6C7A89
 
 // Style the hierarchy group indicator arrow
 // default: open arrow down
@@ -66,7 +65,7 @@ $table-row-hierarchies-row-font-color: #6C7A89
 body
   .wp-table--hierarchy-aditional-row,
   .wp-table--hierarchy-aditional-row .wp-table--hierarchy-indicator-icon
-    color: $table-row-hierarchies-row-font-color
+    color: var(--color-fg-subtle)
 
 .hierarchy-header--icon
   cursor: pointer

diff --git a/frontend/src/global_styles/content/work_packages/shared/_file_picker.sass b/frontend/src/global_styles/content/work_packages/shared/_file_picker.sass
@@ -49,13 +49,10 @@
     justify-content: center
     height: 100%
     text-align: center
+    color: var(--color-fg-subtle)
 
     & &-icon
       width: 9.5rem
       height: 9.5rem
       font-size: 5.5rem
       margin-bottom: $spot-spacing-0_25
-      color: $spot-color-basic-gray-4
-
-    &-sub-text
-      color: var(--color-fg-muted)
diff --git a/frontend/src/global_styles/content/work_packages/shared/_file_section.sass b/frontend/src/global_styles/content/work_packages/shared/_file_section.sass
@@ -50,7 +50,7 @@
     margin-top: $spot-spacing-0_25
     padding: 20px
     cursor: pointer
-    color: var(--light-gray)
+    color: var(--color-fg-muted)
     background: rgba($spot-color-basic-white, 0.9)
 
     &::after

diff --git a/frontend/src/global_styles/content/work_packages/tabs/_files_tab.sass b/frontend/src/global_styles/content/work_packages/tabs/_files_tab.sass
@@ -37,7 +37,7 @@
     grid-template: "icon text" "button button" / auto 1fr
 
     .info-icon-box
-      color: #9A9A9A
+      color: var(--color-fg-muted)
       grid-area: icon
       font-size: 3.375rem
       margin-right: $spot-spacing-0_5
@@ -52,7 +52,7 @@
       .text-box-content
         @include spot-body-small()
 
-        color: #9A9A9A
+        color: var(--color-fg-muted)
 
     .button-box
       grid-area: button

diff --git a/frontend/src/global_styles/layout/_drop_down.sass b/frontend/src/global_styles/layout/_drop_down.sass
@@ -99,7 +99,7 @@
       margin-left: 19.09px //for whatever reasons it is the right dimension
 
   LI > .inactive
-    color: #999999
+    color: var(--color-fg-subtle)
 
   LI > .selected
     background: var(--drop-down-selected-bg-color)