Fix high contrast mode issues (#1910)

Additionally adds css variables to be used by plugins Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
2025-11-10 15:35:49 +01:00 · 2022-01-07 16:54:17 +01:00
parent 61b0cf9843
commit 586a060043
12 changed files with 43 additions and 53 deletions
--- a/gradle/changelog/high_contrast_findings.yaml
+++ 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))
--- 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 + "/";
--- 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;
--- 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"
--- 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">
--- 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";
+  }
+}
--- 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,
--- 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;
 }
--- 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"
 }))`
--- 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;
--- 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;
 `;
--- 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;
 `;