From 8b87c20aa5b7eb049b2534e417d99822437d0e98 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:39:54 +0100 Subject: [PATCH] [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 --- .../custom_styles/_primer_color_mapping.erb | 1 + .../components/colors/colors.service.ts | 15 ++++- ...icon-triggered-context-menu.component.sass | 2 +- .../principal/principal-renderer.service.ts | 7 ++- .../styles/sass/components/text-field.sass | 2 +- .../global_styles/content/_autocomplete.sass | 10 ++++ .../src/global_styles/content/_avatar.sass | 5 +- frontend/src/global_styles/content/_grid.sass | 4 +- .../content/_project_status.sass | 57 ++++++++++--------- .../src/global_styles/content/_tables.sass | 2 +- .../work_packages/_table_hierarchy.sass | 3 +- .../work_packages/shared/_file_picker.sass | 5 +- .../work_packages/shared/_file_section.sass | 2 +- .../work_packages/tabs/_files_tab.sass | 4 +- .../src/global_styles/layout/_drop_down.sass | 2 +- 15 files changed, 70 insertions(+), 51 deletions(-) diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb index 74d65480f060..26538892b206 100644 --- 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 index 5071bdc5ab88..065462cdb892 100644 --- 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/frontend/src/app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.sass b/frontend/src/app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.sass index 5cafe6cd1997..49a0a796f99e 100644 --- a/frontend/src/app/shared/components/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.sass +++ b/frontend/src/app/shared/components/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 index 3905b53562e2..6ee5b03ebafc 100644 --- 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 index 1a96fa31667f..f84d412e3384 100644 --- 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 index d0284a5448e0..0b8458e2c179 100644 --- 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 index 47c9154fa939..0c2ea63f2cae 100644 --- 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 index 1bed7da3a02b..8e7bc644e737 100644 --- 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 index 558fd823b56b..7b91f0d27c6c 100644 --- 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 index cc562d7899c5..e3bf8eacc46a 100644 --- 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 index 5ddb8084dc24..78fb54410cbf 100644 --- 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 index 27864c9e62fd..d33cf17a5e05 100644 --- 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 index 56240795bef6..c7b3f68e4127 100644 --- 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 index 7d6fe22564ef..ba59ecf27da4 100644 --- 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 index e17ccce6371a..84303251e2f3 100644 --- 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)