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

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>

gradle/changelog/focus_line_contrast.yml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Improve visibility of focused line in source view ([#2031](https://github.com/scm-manager/scm-manager/pull/2031))

scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx

@@ -34,10 +34,10 @@ const RowContainer = styled.div`
   .linenumber {
     display: inline-block;
     min-width: 3em;
-    padding-right: 1em;
+    padding-right: 0.75em;
     text-align: right;
     user-select: none;
-    color: rgb(154, 154, 154);
+    color: var(--scm-secondary-text);
   }
   span.linenumber:hover {
     cursor: pointer;
@@ -45,9 +45,12 @@ const RowContainer = styled.div`
   span.linenumber + span > span.linenumber {
     display: none !important;
   }
+  &.focused > span.linenumber {
+    box-shadow: inset -3px 0 0 var(--scm-sh-focus-line-contrast);
+  }
   &.focused,
   &.focused > span:last-child {
-    background-color: rgb(229, 245, 252);
+    background: var(--scm-sh-focus-line-background);
   }
   i {
     visibility: hidden;
@@ -62,6 +65,9 @@ const RowContainer = styled.div`
   .section {
     padding: 0;
   }
+  & > span:last-child {
+    margin-left: 0.75em;
+  }
 `;
 
 type CreateLinePermaLinkFn = (lineNumber: number) => string;

scm-ui/ui-styles/src/dark.scss

@@ -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;

scm-ui/ui-styles/src/highcontrast.scss

@@ -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;

scm-ui/ui-styles/src/light.scss

@@ -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;