From 264e80f47c8f95cd4f0c6306630dbba378aae3d8 Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Tue, 10 May 2022 11:17:10 +0200 Subject: [PATCH] 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 --- gradle/changelog/focus_line_contrast.yml | 2 + .../src/SyntaxHighlighterRenderer.tsx | 12 +- .../src/__snapshots__/storyshots.test.ts.snap | 684 +++++++++--------- scm-ui/ui-styles/src/dark.scss | 2 + scm-ui/ui-styles/src/highcontrast.scss | 2 + scm-ui/ui-styles/src/light.scss | 2 + 6 files changed, 359 insertions(+), 345 deletions(-) create mode 100644 gradle/changelog/focus_line_contrast.yml diff --git a/gradle/changelog/focus_line_contrast.yml b/gradle/changelog/focus_line_contrast.yml new file mode 100644 index 0000000000..5968ac4e09 --- /dev/null +++ b/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)) diff --git a/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx b/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx index 66e6b0cb4e..a0795e212f 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx +++ b/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; diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 74e2f04aff..d9953f55d8 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -4641,7 +4641,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
package com.example;
import java.io.IOException;
import java.io.OutputStream;
import java.net.InetSocketAddress;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;
public class Test {
public static void main(String[] args) throws Exception {
HttpServer server = HttpServer.create(new InetSocketAddress(8000), 0);
server.createContext("/test", new MyHandler());
server.setExecutor(null); // creates a default executor
server.start();
}
static class MyHandler implements HttpHandler {
@Override
public void handle(HttpExchange t) throws IOException {
String response = "This is the response";
t.sendResponseHeaders(200, response.length());
OutputStream os = t.getResponseBody();
os.write(response.getBytes());
os.close();
}
}
} diff --git a/scm-ui/ui-styles/src/dark.scss b/scm-ui/ui-styles/src/dark.scss index 1b49ed1a33..1fae461050 100644 --- a/scm-ui/ui-styles/src/dark.scss +++ b/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; diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss index 8917ad3df6..530706d4d0 100644 --- a/scm-ui/ui-styles/src/highcontrast.scss +++ b/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; diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss index bd8216735e..fe662578bb 100644 --- a/scm-ui/ui-styles/src/light.scss +++ b/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;