From 586a060043141296a5cc7f2f843b19fc65e7a5e8 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Fri, 7 Jan 2022 16:54:17 +0100
Subject: [PATCH] Fix high contrast mode issues (#1910)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Additionally adds css variables to be used by plugins

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
---
 gradle/changelog/high_contrast_findings.yaml  |  4 ++
 scm-ui/ui-components/src/Breadcrumb.tsx       | 14 +------
 scm-ui/ui-components/src/Logo.stories.tsx     |  1 -
 .../src/__snapshots__/storyshots.test.ts.snap | 10 ++---
 .../src/repos/annotate/AnnotatePopover.tsx    |  2 +-
 scm-ui/ui-styles/src/components/_main.scss    | 12 +++++-
 scm-ui/ui-styles/src/highcontrast.scss        | 41 +++++++------------
 scm-ui/ui-styles/src/light.scss               |  7 +++-
 .../admin/plugins/components/PluginEntry.tsx  |  1 -
 scm-ui/ui-webapp/src/components/LoginForm.tsx |  1 -
 .../ui-webapp/src/containers/OmniSearch.tsx   |  2 -
 .../codeSection/containers/FileSearch.tsx     |  1 -
 12 files changed, 43 insertions(+), 53 deletions(-)
 create mode 100644 gradle/changelog/high_contrast_findings.yaml

diff --git a/gradle/changelog/high_contrast_findings.yaml b/gradle/changelog/high_contrast_findings.yaml
new file mode 100644
index 0000000000..61eed7ad88
--- /dev/null
+++ b/gradle/changelog/high_contrast_findings.yaml
@@ -0,0 +1,4 @@
+- type: fixed
+  description: Minor issues in high contrast mode ([#1910](https://github.com/scm-manager/scm-manager/pull/1910))
+- type: added
+  description: CSS variables for plugins ([#1910](https://github.com/scm-manager/scm-manager/pull/1910))
diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx
index 5982971eab..989c0532a5 100644
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -69,22 +69,15 @@ const BreadcrumbNav = styled.nav`
   width: 100%;
 
   /* move slash to end */
-
   li + li::before {
     content: none;
   }
 
-  li:not(:last-child)::after {
-    color: #b5b5b5; //$breadcrumb-item-separator-color
-    content: "\\0002f";
-  }
-
   li:first-child {
     margin-left: 0.75rem;
   }
 
   /* sizing of each item */
-
   li {
     max-width: 375px;
 
@@ -111,11 +104,6 @@ const ActionBar = styled.div`
   }
 `;
 
-// TODO ersetzen?
-const PrefixButton = styled.div`
-  border-right: 1px solid lightgray;
-`;
-
 const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; current?: boolean }> = ({
   clickable,
   text,
@@ -198,7 +186,7 @@ const Breadcrumb: FC<Props> = ({
   const renderBreadcrumbNav = () => {
     let prefixButtons = null;
     if (preButtons) {
-      prefixButtons = <PrefixButton className="mr-2">{preButtons}</PrefixButton>;
+      prefixButtons = <div className="mr-2 prefix-button">{preButtons}</div>;
     }
 
     let homeUrl = baseUrl + "/";
diff --git a/scm-ui/ui-components/src/Logo.stories.tsx b/scm-ui/ui-components/src/Logo.stories.tsx
index 01608379e3..7502bbc8f2 100644
--- a/scm-ui/ui-components/src/Logo.stories.tsx
+++ b/scm-ui/ui-components/src/Logo.stories.tsx
@@ -26,7 +26,6 @@ import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Logo from "./Logo";
 
-// TODO Ersetzen?
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;
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 307c345315..8f04dae547 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -67,7 +67,7 @@ exports[`Storyshots BreadCrumb Default 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -176,7 +176,7 @@ exports[`Storyshots BreadCrumb Long path 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -335,7 +335,7 @@ exports[`Storyshots BreadCrumb Not clickable 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <ul>
         <li>
@@ -425,10 +425,10 @@ exports[`Storyshots BreadCrumb With prefix button 1`] = `
   >
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 eupowG breadcrumb sources-breadcrumb mx-2 my-4"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 iPDJBY breadcrumb sources-breadcrumb mx-2 my-4"
     >
       <div
-        className="Breadcrumb__PrefixButton-zvtb4t-4 fsMznZ mr-2"
+        className="mr-2 prefix-button"
       >
         <a
           href="#link"
diff --git a/scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx b/scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx
index 665b424e1e..e072b32fc8 100644
--- a/scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/AnnotatePopover.tsx
@@ -113,7 +113,7 @@ const AnnotatePopover: FC<PopoverProps> = ({ annotation, offsetTop, repository,
       ref={ref}
       onMouseEnter={onMouseEnter}
       onMouseLeave={OnMouseLeave}
-      className="box"
+      className="popover box"
       style={{ top: `${top}px` }}
     >
       <PopoverHeading className="is-clearfix">
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 741733dbc0..4f3a832ab1 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -343,7 +343,6 @@ footer.footer {
   }
 }
 
-
 .notifications .dropdown-menu:before {
   border: 0.4rem solid transparent;
 }
@@ -855,3 +854,14 @@ form .field:not(.is-grouped) {
 .autocomplete-entry__input {
   color: $text-strong !important;
 }
+
+.breadcrumb {
+  & .prefix-button {
+    border-right: 1px solid lightgray;
+  }
+
+  & li:not(:last-child)::after {
+    color: $breadcrumb-item-separator-color;
+    content: "\0002f";
+  }
+}
diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss
index dada213c6d..bb5b2c53e1 100644
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/scm-ui/ui-styles/src/highcontrast.scss
@@ -30,12 +30,8 @@ $background: $grey-dark;
 $text: $white-ter;
 $text-strong: $white-bis;
 
-$red: #e63453;
-// TODO check if we could replace red in commons,
-// without breaking the light mode
-$danger: $red;
-
-$code: lighten($red, 25%);
+$danger: #e63453;
+$code: lighten($danger, 25%);
 $primary-invert: #050514;
 $info-invert: #050514;
 $link-invert: #050514;
@@ -48,6 +44,9 @@ $light-gray: #f2f2f2;
 $footer-background-color: $grey-dark;
 $footer-color: $white-ter;
 
+//make horizontal lines pop more
+$hr-background-color: $white-bis;
+
 $box-background-color: scale-color($scheme-main, $lightness: 15%);
 $box-background-color: $grey-darker;
 
@@ -55,6 +54,7 @@ $modal-card-head-background-color: $black-ter;
 $modal-card-body-background-color: $scheme-main;
 
 $input-placeholder-color: $white;
+$input-disabled-color: $white-bis;
 
 $popover-background-color: $grey-dark;
 
@@ -66,11 +66,15 @@ $tooltip-color: $scheme-main;
 
 @import "utils/_post.scss";
 
-// SyntaxHighlighter
 :root {
+  --scm-secondary-background: #{$scheme-main};
+  --scm-secondary-text: #{$white};
+  --scm-border: 2px solid #{$white-ter};
+  --scm-column-selection: #{$link-dark};
+
   --sh-base-color: #fff;
   --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  --sh-block-background: $scheme-main;
+  --sh-block-background: #{$scheme-main};
   --sh-inline-code-color: #ff3860;
   --sh-inline-code-background: #fbe7eb;
   --sh-comment-color: #9a9a9a;
@@ -82,12 +86,12 @@ $tooltip-color: $scheme-main;
   --sh-variable-color: #c386ca;
   --sh-function-color: #ff6181;
   --sh-keyword-color: #00a984;
-  --sh-selected-color: #7fe3cd;
+  --sh-selected-color: #{$warning-dark};
   --sh-highlight-background: #f5f5f5;
   --sh-highlight-accent: #99d8f3;
 
-  --diff-background-color: $scheme-main;
-  --diff-text-color: $white-bis;
+  --diff-background-color: #{$scheme-main};
+  --diff-text-color: #{$white-bis};
   --diff-font-family: Consolas, Courier, monospace;
   --diff-selection-background-color: #b3d7ff;
   --diff-gutter-insert-background-color: #05c71d;
@@ -387,11 +391,6 @@ td:first-child.diff-gutter-conflict:before {
   }
 }
 
-//make horizontal lines pop more
-hr {
-  background-color: $white-bis;
-}
-
 //Display darker version of background image
 .has-scm-background {
   background-image: url(images/scmManagerHeroDark.jpg) !important;
@@ -460,16 +459,6 @@ a.has-text-secondary-most:focus {
   color: $white-bis !important;
 }
 
-.select select[disabled],
-[disabled].textarea,
-[disabled].input,
-fieldset[disabled] .select select,
-.select fieldset[disabled] select,
-fieldset[disabled] .textarea,
-fieldset[disabled] .input {
-  color: $white-bis;
-}
-
 [disabled].textarea::placeholder,
 [disabled].input::placeholder,
 fieldset[disabled] .textarea::placeholder,
diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss
index ac2061026f..7ef5bcd5cf 100644
--- a/scm-ui/ui-styles/src/light.scss
+++ b/scm-ui/ui-styles/src/light.scss
@@ -31,6 +31,11 @@ $button-disabled-opacity: 0.25;
 @import "utils/_post.scss";
 
 :root {
+  --scm-secondary-background: #{$white};
+  --scm-secondary-text: #{$black};
+  --scm-border: 1px solid #dbdbdb;
+  --scm-column-selection: #{$link-25};
+
   --sh-base-color: #363636;
   --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   --sh-block-background: #ffffff;
@@ -45,7 +50,7 @@ $button-disabled-opacity: 0.25;
   --sh-variable-color: #a74eb2;
   --sh-function-color: #ff3860;
   --sh-keyword-color: #00a984;
-  --sh-selected-color: #7fe3cd;
+  --sh-selected-color: #{$warning-25};
   --sh-highlight-background: #f5f5f5;
   --sh-highlight-accent: #99d8f3;
 }
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
index 9325b4969c..100fe4622e 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
@@ -43,7 +43,6 @@ const ActionbarWrapper = styled.div`
   }
 `;
 
-// TODO: ersetzen?
 const IconWrapperStyle = styled.span.attrs(props => ({
   className: "level-item mb-0 p-2 is-clickable"
 }))`
diff --git a/scm-ui/ui-webapp/src/components/LoginForm.tsx b/scm-ui/ui-webapp/src/components/LoginForm.tsx
index 0ecdb769d4..0455702bb7 100644
--- a/scm-ui/ui-webapp/src/components/LoginForm.tsx
+++ b/scm-ui/ui-webapp/src/components/LoginForm.tsx
@@ -46,7 +46,6 @@ const AvatarWrapper = styled.figure`
   padding-bottom: 20px;
 `;
 
-//TODO Ersetzen?
 const AvatarImage = styled(Image)`
   width: 128px;
   height: 128px;
diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
index 0ef97b7b28..35b8c8f607 100644
--- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
+++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
@@ -71,7 +71,6 @@ const EmptyHits: FC = () => {
   );
 };
 
-// TODO ersetzen
 const ResultHeading = styled.h3`
   border-bottom: 1px solid lightgray;
 `;
@@ -80,7 +79,6 @@ const DropdownMenu = styled.div`
   max-width: 20rem;
 `;
 
-// TODO ersetzen
 const ResultFooter = styled.div`
   border-top: 1px solid lightgray;
 `;
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
index c56c88953e..e5c187cfe6 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
@@ -44,7 +44,6 @@ type Params = {
   revision: string;
 };
 
-// TODO ersetzen?
 const HomeLink = styled(Link)`
   border-right: 1px solid lightgray;
 `;