Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-13 17:05:43 +01:00
Code Issues Packages Projects Releases Activity

Improve visibility and contrast for focused line in syntax highlighting (#2031)

Browse Source 
The styling for the focused line (e.g. permalink) in the source view with syntax highlighting was hard-coded and did not meet accessibility standards, especially in high-contrast mode. This pull request introduces two new css variables that are fine-tuned to meet contrast requirements for each theme. An additional "bar" with specifically high contrast has been added to the left of the focused line, because it was impossible to find one background color that would provide sufficient contrast with both the page background as well as all highlighting colors.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2022-05-10 11:17:10 +02:00
committed by GitHub
parent 4fdd6f4d0c
commit 264e80f47c
6 changed files with 359 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-styles/src/dark.scss
View File

@@ -195,6 +195,8 @@ $danger-25: scale-color($danger, $lightness: -75%);
--scm-secondary-text: #{$white};
--scm-hover-color: #{$grey};
--scm-column-selection: #{$link-dark};
--scm-sh-focus-line-background: hsl(0, 0%, 18%);
--scm-sh-focus-line-contrast: hsl(0, 0%, 60%);
--sh-base-color: #{$white};
--sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

2
scm-ui/ui-styles/src/highcontrast.scss
View File

@@ -93,6 +93,8 @@ $tooltip-color: $scheme-main;
--scm-secondary-text: #{$white};
--scm-hover-color: #{$grey};
--scm-column-selection: #{$link-dark};
--scm-sh-focus-line-background: hsl(0, 0%, 10%);
--scm-sh-focus-line-contrast: hsl(0, 0%, 60%);
--sh-base-color: #fff;
--sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

2
scm-ui/ui-styles/src/light.scss
View File

@@ -58,6 +58,8 @@ $popover-background-color: $grey-light;
--scm-secondary-text: #{$black};
--scm-hover-color: #{$black-ter};
--scm-column-selection: #{$link-25};
--scm-sh-focus-line-background: hsl(0, 0%, 95%);
--scm-sh-focus-line-contrast: hsl(0, 0%, 70%);
--sh-base-color: #363636;
--sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;