High contrast mode findings (#1892)

Fixes most of the flaws in high contrast mode.

gradle/changelog/high_contrast.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: High contrast mode flaws ([#1892](https://github.com/scm-manager/scm-manager/pull/1892))

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

@@ -47,7 +47,7 @@ class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available",
+    noOptionsMessage: "No suggestion available"
   };
 
   handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
@@ -64,7 +64,7 @@ class Autocomplete extends React.Component<Props, State> {
     selectValue: ValueType<SelectValue>,
     selectOptions: readonly SelectValue[]
   ): boolean => {
-    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
     const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
@@ -79,7 +79,7 @@ class Autocomplete extends React.Component<Props, State> {
       noOptionsMessage,
       loadSuggestions,
       creatable,
-      className,
+      className
     } = this.props;
 
     return (
@@ -88,6 +88,7 @@ class Autocomplete extends React.Component<Props, State> {
         <div className="control">
           {creatable ? (
             <AsyncCreatable
+              className="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}
@@ -96,13 +97,13 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={(value) => {
+              onCreateOption={value => {
                 this.selectValue({
                   label: value,
                   value: {
                     id: value,
-                    displayName: value,
-                  },
+                    displayName: value
+                  }
                 });
               }}
               aria-label={helpText || label}

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

@@ -110,6 +110,7 @@ const ActionBar = styled.div`
   }
 `;
 
+// TODO ersetzen?
 const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
 `;

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

@@ -41,13 +41,13 @@ class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: false
     };
   }
 
   toggleCollapse = () => {
-    this.setState((prevState) => ({
-      collapsed: !prevState.collapsed,
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
     }));
   };
 
@@ -89,7 +89,7 @@ class CardColumnGroup extends React.Component<Props, State> {
             {icon}
           </span>{" "}
           {url ? (
-            <Link to={url} className="has-text-dark">
+            <Link to={url} className="has-text-secondary-more">
               {name}
             </Link>
           ) : (

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

@@ -40,6 +40,7 @@ export const DangerZone = styled.div`
     }
   }
 
+  // TODO ersetzen?
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;

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

@@ -40,7 +40,7 @@ type Props = {
 
 const Icon: FC<Props> = ({
   iconStyle = "fas",
-  color = "grey-light",
+  color = "secondary",
   title,
   name,
   className,

scm-ui/ui-components/src/Logo.stories.tsx

@@ -26,6 +26,7 @@ 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;

scm-ui/ui-components/src/forms/FileInput.tsx

@@ -102,7 +102,7 @@ const FileInput: FC<Props> = ({
           {file?.name ? (
             <span className="file-name">{file?.name}</span>
           ) : (
-            <span className="file-name has-text-weight-light has-text-grey-light">
+            <span className="file-name has-text-weight-light has-text-secondary">
               {filenamePlaceholder || t("fileInput.noFileChosen")}
             </span>
           )}

scm-ui/ui-components/src/forms/FileUpload.tsx

@@ -60,7 +60,7 @@ const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled
         {file?.name ? (
           <span className="file-name">{file?.name}</span>
         ) : (
-          <span className="file-name has-text-weight-light has-text-grey-light	">{filenamePlaceholder}</span>
+          <span className="file-name has-text-weight-light has-text-secondary">{filenamePlaceholder}</span>
         )}
       </label>
     </div>

scm-ui/ui-components/src/forms/TriStateCheckbox.tsx

@@ -51,11 +51,11 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label,
 
   let color;
   if (disabled) {
-    color = "grey-light";
+    color = "secondary";
   } else if (checked || indeterminate) {
     color = "link";
   } else {
-    color = "black";
+    color = "secondary-most";
   }
 
   // We need a tabIndex to make the checkbox accessible from keyboard.

scm-ui/ui-components/src/modals/FullscreenModal.tsx

@@ -45,7 +45,7 @@ const FullSizedModal = styled(Modal)`
 
 const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, closeButtonLabel }) => {
   const [t] = useTranslation("repos");
-  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />;
 
   return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
 };

scm-ui/ui-components/src/modals/Modal.tsx

@@ -45,7 +45,7 @@ type Props = {
 };
 
 const SizedModal = styled.div<{ size?: ModalSize }>`
-  width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "640px")};
+  width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
 `;
 
 export const Modal: FC<Props> = ({
@@ -55,9 +55,9 @@ export const Modal: FC<Props> = ({
   footer,
   active,
   className,
-  headColor = "light",
-  headTextColor = "black",
-  size,
+  headColor = "secondary-less",
+  headTextColor = "secondary-most",
+  size
 }) => {
   const portalRootElement = usePortalRootElement("modalsRoot");
   const initialFocusRef = useRef(null);
@@ -65,7 +65,7 @@ export const Modal: FC<Props> = ({
     includeContainer: true,
     initialFocus: initialFocusRef.current,
     returnFocus: true,
-    updateNodes: false,
+    updateNodes: false
   });
 
   if (!portalRootElement) {

scm-ui/ui-components/src/popover/Popover.tsx

@@ -41,29 +41,10 @@ type ContainerProps = {
 };
 
 const PopoverContainer = styled.div<ContainerProps>`
-  position: absolute;
-  z-index: 100;
-  width: ${(props) => props.width}px;
-  display: block;
+  width: ${props => props.width}px;
 
   &:before {
-    position: absolute;
-    content: "";
-    border-style: solid;
-    pointer-events: none;
-    height: 0;
-    width: 0;
-    top: 100%;
-    left: ${(props) => props.width / 2}px;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
-    margin-left: -0.4rem;
-    margin-top: -0.4rem;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    transform: rotate(-45deg);
+    left: ${props => props.width / 2}px;
   }
 `;
 
@@ -71,7 +52,7 @@ const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = (props) => {
+const Popover: FC<Props> = props => {
   if (!props.show) {
     return null;
   }
@@ -89,13 +70,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover",
+      type: "enter-popover"
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover",
+      type: "leave-popover"
     });
   };
 
@@ -105,7 +86,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
     <PopoverContainer
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className="box"
+      className="box popover"
       style={{ top: `${top}px`, left: `${left}px` }}
       width={width!}
       ref={ref}
@@ -118,7 +99,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 };
 
 Popover.defaultProps = {
-  width: 120,
+  width: 120
 };
 
 export default Popover;

scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx

@@ -38,7 +38,7 @@ type Props = {
 const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }) => {
   const [t] = useTranslation("repos");
 
-  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="secondary" />;
 
   return (
     <Modal
@@ -52,7 +52,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
       active={active}
       footer={footer}
       headColor={"danger"}
-      headTextColor={"white"}
+      headTextColor="secondary-least"
     />
   );
 };

scm-ui/ui-components/src/repos/RepositoryEntry.tsx

@@ -49,9 +49,6 @@ const ContentRightContainer = styled.div`
 
 const QuickAction = styled(Icon)`
   margin-top: 0.2rem;
-  :hover {
-    color: #363636 !important;
-  }
 `;
 
 const ContactAvatar = styled.img`
@@ -79,9 +76,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
 
   const renderContactIcon = () => {
     if (avatarFactory) {
-      return <ContactAvatar className="has-rounded-border" src={avatarFactory({ mail: repository.contact })} alt={repository.contact} />;
+      return (
+        <ContactAvatar
+          className="has-rounded-border"
+          src={avatarFactory({ mail: repository.contact })}
+          alt={repository.contact}
+        />
+      );
     }
-    return <QuickAction className={classNames("is-clickable")} name="envelope" color="info" />;
+    return <QuickAction className={classNames("is-clickable", "has-hover-visible")} name="envelope" color="info" />;
   };
 
   const createContentRight = () => (
@@ -124,7 +127,7 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
           </ContactActionWrapper>
         ) : null}
         <QuickAction
-          className={classNames("is-clickable", "is-size-5")}
+          className={classNames("is-clickable", "is-size-5", "has-hover-visible")}
           name="download"
           color="info"
           onClick={() => setOpenCloneModal(true)}

scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx

@@ -58,6 +58,7 @@ const LineNumber = styled(LineElement)`
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  // TODO: ERSETZEN?
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
 

scm-ui/ui-components/src/repos/annotate/Popover.tsx

@@ -34,32 +34,7 @@ import { Action } from "./actions";
 import { useTranslation } from "react-i18next";
 
 const PopoverContainer = styled.div`
-  position: absolute;
   left: 2.25em;
-  z-index: 100;
-  width: 30em;
-  display: block;
-
-  &:before {
-    position: absolute;
-    content: "";
-    border-style: solid;
-    pointer-events: none;
-    height: 0;
-    width: 0;
-    top: 100%;
-    left: 5.5em;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
-    margin-left: -0.4rem;
-    margin-top: -0.4rem;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
-    transform: rotate(-45deg);
-  }
 `;
 
 const PopoverHeading = styled.div`
@@ -97,13 +72,13 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover",
+      type: "enter-popover"
     });
   };
 
   const OnMouseLeave = () => {
     dispatch({
-      type: "leave-popover",
+      type: "leave-popover"
     });
   };
 
@@ -113,7 +88,7 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
       ref={ref}
       onMouseEnter={onMouseEnter}
       onMouseLeave={OnMouseLeave}
-      className="box"
+      className="box popover"
       style={{ top: `${top}px` }}
     >
       <PopoverHeading className="is-clearfix">

scm-ui/ui-components/src/styleConstants.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+// TODO erweitern
 export const colors = [
   "black",
   "dark",
@@ -32,7 +33,7 @@ export const colors = [
   "info",
   "success",
   "warning",
-  "danger",
+  "danger"
 ] as const;
 export type Color = typeof colors[number];
 

scm-ui/ui-styles/src/components/_main.scss

@@ -174,33 +174,6 @@ footer.footer {
   background-color: $danger-25;
 }
 
-// TODO
-/*.has-background-danger-high-contrast {
-  background-color: $high-contrast-danger;
-}
-.has-background-danger-high-contrast-75 {
-  background-color: $high-contrast-danger-75;
-}
-.has-background-danger-high-contrast-50 {
-  background-color: $high-contrast-danger-50;
-}
-.has-background-danger-high-contrast-25 {
-  background-color: $high-contrast-danger-25;
-}
-
-.has-background-high-contrast-light-gray {
-  background-color: $high-contrast-light-gray;
-}
-.has-background-high-contrast-light-gray-75 {
-  background-color: $light-75;
-}
-.has-background-high-contrast-light-gray-50 {
-  background-color: $light-50;
-}
-.has-background-high-contrast-light-gray-25 {
-  background-color: $light-25;
-}*/
-
 // tags
 .tag:not(body) {
   border: 1px solid transparent;
@@ -370,6 +343,35 @@ footer.footer {
   }
 }
 
+.popover {
+  position: absolute;
+  z-index: 100;
+  width: 30em;
+  display: block;
+
+  &:before {
+    position: absolute;
+    content: "";
+    border-style: solid;
+    pointer-events: none;
+    height: 0;
+    width: 0;
+    top: 100%;
+    left: 5.5em;
+    border-color: transparent;
+    border-width: 0.4rem;
+    margin-left: -0.4rem;
+    margin-top: -0.4rem;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    transform: rotate(-45deg);
+  }
+}
+
+.notifications .dropdown-menu:before {
+  border: 0.4rem solid transparent;
+}
+
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid";
@@ -551,7 +553,7 @@ ul.is-separated {
 
 // panels
 .panel {
-  border: 1px solid #dbdbdb;
+  border: 1px solid $border;
   border-radius: 0.25rem;
 
   .panel-heading {
@@ -833,6 +835,11 @@ form .field:not(.is-grouped) {
   color: $text !important;
 }
 
-.has-background-accent {
-  background: $background-accent;
+.autocomplete-entry > div {
+  border-color: $blue-light;
+
+  &:hover,
+  &.is-hovered {
+    border-color: #4a4a4a;
+  }
 }

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

@@ -30,8 +30,6 @@ $background: $grey-dark;
 $text: $white-ter;
 $text-strong: $white-bis;
 
-$background-accent: $grey-darker;
-
 $red: #e63453;
 // TODO check if we could replace red in commons,
 // without breaking the light mode
@@ -53,7 +51,7 @@ $footer-color: $white-ter;
 $box-background-color: scale-color($scheme-main, $lightness: 15%);
 $box-background-color: $grey-darker;
 
-$modal-card-head-background-color: $grey-dark;
+$modal-card-head-background-color: $black-ter;
 $modal-card-body-background-color: $scheme-main;
 
 $input-placeholder-color: $white;
@@ -66,17 +64,13 @@ $tooltip-background-color: $white-bis;
 $tooltip-background-opacity: 0.9 !default;
 $tooltip-color: $scheme-main;
 
-// WTF
-$high-contrast-background-color: #050514;
-$high-contrast-light-gray: #f2f2f2;
-
 @import "utils/_post.scss";
 
-
+// SyntaxHighlighter
 :root {
   --sh-base-color: #fff;
-  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --sh-block-background: #000;
+  --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --sh-block-background: $scheme-main;
   --sh-inline-code-color: #ff3860;
   --sh-inline-code-background: #fbe7eb;
   --sh-comment-color: #9a9a9a;
@@ -85,8 +79,8 @@ $high-contrast-light-gray: #f2f2f2;
   --sh-selector-color: #009dff;
   --sh-operator-color: #999999;
   --sh-operator-bg: inherit;
-  --sh-variable-color: #C386CA;
-  --sh-function-color: #FF6181;
+  --sh-variable-color: #c386ca;
+  --sh-function-color: #ff6181;
   --sh-keyword-color: #00a984;
   --sh-selected-color: #7fe3cd;
   --sh-highlight-background: #f5f5f5;
@@ -96,10 +90,10 @@ $high-contrast-light-gray: #f2f2f2;
   --diff-text-color: $white-bis;
   --diff-font-family: Consolas, Courier, monospace;
   --diff-selection-background-color: #b3d7ff;
-  --diff-gutter-insert-background-color: #05C71D;
-  --diff-gutter-delete-background-color: #EB7A85;
+  --diff-gutter-insert-background-color: #05c71d;
+  --diff-gutter-delete-background-color: #eb7a85;
   --diff-gutter-selected-background-color: #fffce0;
-  --diff-code-insert-background-color: #05240B;
+  --diff-code-insert-background-color: #05240b;
   --diff-code-delete-background-color: #230608;
   --diff-code-insert-edit-background-color: #c0dc91;
   --diff-code-delete-edit-background-color: #000;
@@ -107,19 +101,7 @@ $high-contrast-light-gray: #f2f2f2;
   --diff-omit-gutter-line-color: #cb2a1d;
 }
 
-
 .button {
-
-  &.is-danger:hover,
-  &.is-danger.is-hovered {
-    background-color: scale-color($danger, $lightness: -2.5%);
-  }
-
-  &.is-danger:active,
-  &.is-danger.is-active {
-    background-color: scale-color($danger, $lightness: -4%);
-  }
-
   &.is-primary,
   &.is-info,
   &.is-link,
@@ -130,6 +112,91 @@ $high-contrast-light-gray: #f2f2f2;
       background-color: inherit;
     }
   }
+
+  &.is-primary:hover,
+  &.is-primary.is-hovered {
+    background-color: scale-color($primary, $lightness: -5%);
+  }
+
+  &.is-primary:active,
+  &.is-primary.is-active {
+    background-color: scale-color($primary, $lightness: -10%);
+  }
+
+  &.is-primary[disabled] {
+    background-color: scale-color($primary, $lightness: -50%);
+  }
+
+  &.is-info:hover,
+  &.is-info.is-hovered {
+    background-color: scale-color($info, $lightness: -5%);
+  }
+
+  &.is-info:active,
+  &.is-info.is-active {
+    background-color: scale-color($info, $lightness: -10%);
+  }
+
+  &.is-info[disabled] {
+    background-color: scale-color($info, $lightness: -50%);
+  }
+
+  &.is-link:hover,
+  &.is-link.is-hovered {
+    background-color: scale-color($link, $lightness: -5%);
+  }
+
+  &.is-link:active,
+  &.is-link.is-active {
+    background-color: scale-color($link, $lightness: -10%);
+  }
+
+  &.is-link[disabled] {
+    background-color: scale-color($link, $lightness: -50%);
+  }
+
+  &.is-success:hover,
+  &.is-success.is-hovered {
+    background-color: scale-color($success, $lightness: -5%);
+  }
+
+  &.is-success:active,
+  &.is-success.is-active {
+    background-color: scale-color($success, $lightness: -10%);
+  }
+
+  &.is-success[disabled] {
+    background-color: scale-color($success, $lightness: -50%);
+  }
+
+  &.is-warning:hover,
+  &.is-warning.is-hovered {
+    background-color: scale-color($warning, $lightness: -5%);
+  }
+
+  &.is-warning:active,
+  &.is-warning.is-active {
+    background-color: scale-color($warning, $lightness: -10%);
+  }
+
+  &.is-warning[disabled] {
+    background-color: scale-color($warning, $lightness: -50%);
+    color: #e1d4c2;
+  }
+
+  &.is-danger:hover,
+  &.is-danger.is-hovered {
+    background-color: scale-color($danger, $lightness: -5%);
+  }
+
+  &.is-danger:active,
+  &.is-danger.is-active {
+    background-color: scale-color($danger, $lightness: -10%);
+  }
+
+  &.is-danger[disabled] {
+    background-color: scale-color($danger, $lightness: -50%);
+  }
 }
 
 .menu-label {
@@ -141,23 +208,31 @@ $high-contrast-light-gray: #f2f2f2;
     color: $white-ter;
 
     &.is-active {
-      background-color: $high-contrast-background-color;
+      background-color: $scheme-main;
     }
   }
 }
+
 //footer is overwritten in _main.scss
 footer.footer {
-  background-color: $grey-dark;
-  a{
-    color: scale-color($link, $lightness:25%);
+  background-color: $black-ter;
+  a {
+    color: scale-color($link, $lightness: 25%);
   }
 }
-//card
 
+.card {
+  border: 1px solid $white-ter;
+  box-shadow: none;
+}
+
+//card
 .modal-card {
   border: 1px solid $white-ter;
- .modal-close::before, .delete::before, .modal-close::after, .delete::after {
-  background-color: $white-bis;
+
+  & .modal-close,
+  & .delete {
+    background-color: $white-ter;
   }
 }
 
@@ -187,6 +262,9 @@ footer.footer {
     &.is-darker {
       background-color: $grey-dark;
     }
+    &:first-child {
+      border-left-width: 9px;
+    }
   }
 
   &.is-hoverable tbody tr:not(.is-selected):hover {
@@ -196,26 +274,15 @@ footer.footer {
 
 // panels
 .panel {
-  border: 1px solid $white-bis;
-  border-radius: 0.25rem;
+  border-color: $white-bis;
 
   .panel-heading {
-    border: none;
-    border-bottom: 1px solid $border;
-    border-radius: 0.25rem 0.25rem 0 0;
-    background-color: $grey-darker;
+    background-color: $black-ter;
   }
 
   .panel-footer {
-    background-color: $grey-darker;
+    background-color: $black-ter;
     color: $white-bis;
-    font-size: 1.25em;
-    font-weight: 300;
-    line-height: 1.25;
-    padding: 0.5em 0.75em;
-    border: none;
-    border-top: 1px solid $border;
-    border-radius: 0 0 0.25rem 0.25rem;
   }
 }
 
@@ -225,10 +292,12 @@ footer.footer {
 }
 
 .diff-gutter-conflict {
-  background-color: #FFD11A;
+  background-color: #ffd11a;
 }
 
-.diff-gutter-delete,.diff-gutter-insert, .diff-gutter-conflict {
+.diff-gutter-delete,
+.diff-gutter-insert,
+.diff-gutter-conflict {
   color: $scheme-main;
 }
 
@@ -265,30 +334,34 @@ td:first-child.diff-gutter-conflict:before {
 .tag:not(body) {
   border: 1px solid transparent;
   background-color: $white;
-  .is-delete::before, .is-delete::after {
+
+  &.is-delete {
+    &::before,
+    &::after {
       background-color: $scheme-main;
     }
-}
 
-.tag:not(body).is-delete::before, .tag:not(body).is-delete::after {
-  background-color: $scheme-main;
-}
-.tag:not(body).is-delete:hover::before, .tag:not(body).is-delete:hover::after {
+    &:hover::before,
+    &:hover::after {
       background-color: $white-bis;
-}
+    }
+  }
 
-//dark tags have light borders to separate from background
-.tag:not(body).is-dark, .tag:not(body).is-black {
+  //dark tags have light borders to separate from background
+  &.is-dark,
+  &.is-black {
     border: 1px solid $white-bis;
-}
+  }
 
-//blue text in light tags
-.tag.is-light .has-text-link {
+  //blue text in light tags
+  &.is-light .has-text-link {
     color: scale-color($link, $lightness: -50%) !important;
-}
-//outline-tags
-.tag:not(body).is-outlined {
+  }
+
+  //outline-tags
+  &.is-outlined {
     background-color: $scheme-main;
+  }
 }
 
 //cards receive white border
@@ -296,26 +369,22 @@ td:first-child.diff-gutter-conflict:before {
   box-shadow: 0 0 0 1px $white-bis;
 }
 
-//some modals have lighter backgrounds in head
-//TODO: fix with meta-class (contains light color in light-mode, dark color in dark mode
-.has-background-light {
-  background-color: $grey-dark !important;
-}
-
-//they also often have black text, this is a stop-gap
-//TODO: fix with meta-class (contains dark color in light-mode, light color in dark mode
-.modal-card-title.has-text-black {
-  color: $white-bis !important;
-}
-
-//fix triangle for pop-overs
 .popover {
-  color: #00a984;
+  border: 1px solid $white-ter;
+
+  &:before {
+    border-bottom-color: $grey-dark;
+    border-left-color: $grey-dark;
+  }
 }
-.popover .popover-content::before
-{
-  border-bottom-color: $grey-dark !important;
-  border-left-color: $grey-dark !important;
+
+.notifications .dropdown-menu {
+  border: 1px solid $white-ter;
+
+  &:before {
+    border-bottom-color: $white-ter;
+    border-left-color: $white-ter;
+  }
 }
 
 //make horizontal lines pop more
@@ -323,14 +392,112 @@ hr {
   background-color: $white-bis;
 }
 
-//Login and logout overwrite white-ter background
-.hero-body .has-background-white-ter {
-  background-color: $grey-dark !important;
-}
-
 //Display darker version of background image
 .has-scm-background {
   background-image: url(images/scmManagerHeroDark.jpg) !important;
-  background-size: cover;
-  background-position: top center;
+}
+
+.has-text-secondary-least {
+  color: $scheme-main !important;
+}
+a.has-text-secondary-least:hover,
+a.has-text-secondary-least:focus {
+  color: lighten($scheme-main, 10%) !important;
+}
+.has-background-secondary-least {
+  background-color: $scheme-main !important;
+}
+
+.has-text-secondary-less {
+  color: $black-ter !important;
+}
+a.has-text-secondary-less:hover,
+a.has-text-secondary-less:focus {
+  color: lighten($black-ter, 10%) !important;
+}
+.has-background-secondary-less {
+  background-color: $black-ter !important;
+}
+
+.has-text-secondary {
+  color: $white-bis !important;
+}
+a.has-text-secondary:hover,
+a.has-text-secondary:focus {
+  color: lighten($white-bis, 10%) !important;
+}
+.has-background-secondary {
+  background-color: $white-bis !important;
+}
+
+.has-text-secondary-more {
+  color: $white-ter !important;
+}
+a.has-text-secondary-more:hover,
+a.has-text-secondary-more:focus {
+  color: lighten($white-ter, 10%) !important;
+}
+.has-background-secondary-more {
+  background-color: $white-ter !important;
+}
+
+.has-text-secondary-most {
+  color: $white !important;
+}
+a.has-text-secondary-most:hover,
+a.has-text-secondary-most:focus {
+  color: lighten($white, 10%) !important;
+}
+.has-background-secondary-most {
+  background-color: $white !important;
+}
+
+.has-hover-visible:hover {
+  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,
+fieldset[disabled] .input::placeholder {
+  color: $white-bis;
+}
+
+.repository-export-info-box {
+  background-color: $high-contrast-info-25;
+  border: 0.2rem solid;
+}
+
+.search-syntax-accordion {
+  border: 1px solid $info;
+  box-shadow: none;
+}
+
+.autocomplete-entry > div {
+  background-color: $scheme-main;
+  color: $white-bis;
+
+  /* Text input */
+  &:nth-child(2) * {
+    color: $white-bis;
+  }
+
+  /* Suggestions */
+  &:nth-child(3) {
+    border: 1px solid $info;
+
+    > div div:hover {
+      background-color: #4672fe !important;
+    }
+  }
 }

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

@@ -25,16 +25,14 @@
 @import "utils/_pre.scss";
 // colors defined in variables/commons.scss
 $subtitle-color: #666;
-$warning-invert: #88550D;
-$button-disabled-opacity: .25;
-
-$background-accent: $white-ter;
+$warning-invert: #88550d;
+$button-disabled-opacity: 0.25;
 
 @import "utils/_post.scss";
 
 :root {
   --sh-base-color: #363636;
-  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   --sh-block-background: #ffffff;
   --sh-inline-code-color: #ff3860;
   --sh-inline-code-background: #fbe7eb;
@@ -52,3 +50,72 @@ $background-accent: $white-ter;
   --sh-highlight-accent: #99d8f3;
 }
 
+.popover:before {
+  border-bottom-color: white;
+  border-left-color: white;
+  box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
+}
+
+.notifications .dropdown-menu:before {
+  border-bottom-color: white;
+  border-left-color: white;
+}
+
+.has-text-secondary-least {
+  color: $white !important;
+}
+a.has-text-secondary-least:hover,
+a.has-text-secondary-least:focus {
+  color: lighten($white, 10%) !important;
+}
+.has-background-secondary-least {
+  background-color: $white !important;
+}
+
+.has-text-secondary-less {
+  color: $white-ter !important;
+}
+a.has-text-secondary-less:hover,
+a.has-text-secondary-less:focus {
+  color: lighten($white-ter, 10%) !important;
+}
+.has-background-secondary-less {
+  background-color: $white-ter !important;
+}
+
+.has-text-secondary {
+  color: $grey-light !important;
+}
+a.has-text-secondary:hover,
+a.has-text-secondary:focus {
+  color: lighten($grey-light, 10%) !important;
+}
+.has-background-secondary {
+  background-color: $grey-light !important;
+}
+
+.has-text-secondary-more {
+  color: $grey-darker !important;
+}
+a.has-text-secondary-more:hover,
+a.has-text-secondary-more:focus {
+  color: lighten($grey-darker, 10%) !important;
+}
+.has-background-secondary-more {
+  background-color: $grey-darker !important;
+}
+
+.has-text-secondary-most {
+  color: $black !important;
+}
+a.has-text-secondary-most:hover,
+a.has-text-secondary-most:focus {
+  color: lighten($black, 10%) !important;
+}
+.has-background-secondary-most {
+  background-color: $black !important;
+}
+
+.has-hover-visible:hover {
+  color: $grey-darker !important;
+}

scm-ui/ui-styles/src/variables/_derived.scss

@@ -43,13 +43,24 @@ $danger-75: scale-color($danger, $lightness: 25%);
 $danger-50: scale-color($danger, $lightness: 50%);
 $danger-25: scale-color($danger, $lightness: 75%);
 
-// TODO
-// $high-contrast-danger-75: scale-color($high-contrast-danger, $lightness: 25%);
-// $high-contrast-danger-50: scale-color($high-contrast-danger, $lightness: 50%);
-// $high-contrast-danger-25: scale-color($high-contrast-danger, $lightness: 75%);
-
-// TODO
-// high-contrast light gray
-// $light-75: darken($high-contrast-light-gray, 15%);
-// $light-50: darken($high-contrast-light-gray, 30%);
-// $light-25: darken($high-contrast-light-gray, 45%);
+$high-contrast-dark-75: scale-color($dark, $lightness: -25%);
+$high-contrast-dark-50: scale-color($dark, $lightness: -50%);
+$high-contrast-dark-25: scale-color($dark, $lightness: -75%);
+$high-contrast-info-75: scale-color($info, $lightness: -25%);
+$high-contrast-info-50: scale-color($info, $lightness: -50%);
+$high-contrast-info-25: scale-color($info, $lightness: -75%);
+$high-contrast-link-75: scale-color($link, $lightness: -25%);
+$high-contrast-link-50: scale-color($link, $lightness: -50%);
+$high-contrast-link-25: scale-color($link, $lightness: -75%);
+$high-contrast-primary-75: scale-color($primary, $lightness: -25%);
+$high-contrast-primary-25: scale-color($primary, $lightness: -75%);
+$high-contrast-primary-50: scale-color($primary, $lightness: -50%);
+$high-contrast-success-75: scale-color($success, $lightness: -25%);
+$high-contrast-success-50: scale-color($success, $lightness: -50%);
+$high-contrast-success-25: scale-color($success, $lightness: -75%);
+$high-contrast-warning-75: scale-color($warning, $lightness: -25%);
+$high-contrast-warning-50: scale-color($warning, $lightness: -50%);
+$high-contrast-warning-25: scale-color($warning, $lightness: -75%);
+$high-contrast-danger-75: scale-color($danger, $lightness: -25%);
+$high-contrast-danger-50: scale-color($danger, $lightness: -50%);
+$high-contrast-danger-25: scale-color($danger, $lightness: -75%);

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -43,6 +43,7 @@ const ActionbarWrapper = styled.div`
   }
 `;
 
+// TODO: ersetzen?
 const IconWrapperStyle = styled.span.attrs(props => ({
   className: "level-item mb-0 p-2 is-clickable"
 }))`

scm-ui/ui-webapp/src/components/HeaderButton.tsx

@@ -26,6 +26,7 @@ import styled from "styled-components";
 import { devices } from "@scm-manager/ui-components";
 
 const HeaderButton = styled.div`
+  // TODO: ersetzen?
   @media screen and (max-width: ${devices.desktop.width - 1}px) {
     border-top: 1px solid white;
     margin-top: 1rem;

scm-ui/ui-webapp/src/components/InfoBox.tsx

@@ -68,7 +68,7 @@ class InfoBox extends React.Component<Props> {
                 "image",
                 "box",
                 "has-text-weight-bold",
-                "has-text-white",
+                "has-text-secondary-least",
                 "has-background-info",
                 "is-flex",
                 "is-flex-direction-column",

scm-ui/ui-webapp/src/components/LoginForm.tsx

@@ -46,6 +46,7 @@ const AvatarWrapper = styled.figure`
   padding-bottom: 20px;
 `;
 
+//TODO Ersetzen?
 const AvatarImage = styled(Image)`
   width: 128px;
   height: 128px;
@@ -99,7 +100,7 @@ class LoginForm extends React.Component<Props, State> {
   render() {
     const { loading, t } = this.props;
     return (
-      <div className="column is-4 box has-text-centered has-background-white-ter">
+      <div className="column is-4 box has-text-centered has-background-secondary-less">
         <h3 className="title">{t("login.title")}</h3>
         <p className="subtitle">{t("login.subtitle")}</p>
         <TopMarginBox className="box">

scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx

@@ -120,7 +120,7 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
   }
 
   const component = (
-    <div className="column is-8 box  has-background-white-ter">
+    <div className="column is-8 box  has-background-secondary-less">
       <form onSubmit={handleSubmit(onSubmit)}>
         <h3 className="title">{t("title")}</h3>
         <h4 className="subtitle">{t("adminStep.title")}</h4>

scm-ui/ui-webapp/src/containers/NavigationBar.tsx

@@ -85,6 +85,7 @@ const StyledNavBar = styled.nav`
     padding: 0;
   }
 
+  //TODO Ersetzen?
   .navbar-brand {
     @media screen and (max-width: ${devices.desktop.width - 1}px) {
       border-bottom: 1px solid white;

scm-ui/ui-webapp/src/containers/Notifications.tsx

@@ -65,15 +65,10 @@ const DropDownMenu = styled.div`
   &:before {
     position: absolute;
     content: "";
-    border-style: solid;
     pointer-events: none;
     height: 0;
     width: 0;
-    top: 0;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
+    top: -7px; // top padding of dropdown-menu + border-spacing
     transform-origin: center;
     transform: rotate(135deg);
 
@@ -132,7 +127,7 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
         ) : (
           <Icon
             name="trash"
-            color="black"
+            color="secondary-most"
             className="is-clickable"
             title={t("notifications.dismiss")}
             onClick={remove}
@@ -143,12 +138,6 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
   );
 };
 
-const DismissAllButton = styled(Button)`
-  &:hover > * {
-    color: white !important;
-  }
-`;
-
 type ClearEntryProps = {
   notifications: NotificationCollection;
   clearToasts: () => void;
@@ -164,9 +153,9 @@ const ClearEntry: FC<ClearEntryProps> = ({ notifications, clearToasts }) => {
   return (
     <div className={classNames("dropdown-item", "has-text-centered")}>
       <ErrorNotification error={error} />
-      <DismissAllButton className="is-outlined" color="link" loading={isLoading} action={clear}>
-        <Icon color="link" name="trash" className="mr-1" alt="" /> {t("notifications.dismissAll")}
-      </DismissAllButton>
+      <Button className="is-outlined" color="link" loading={isLoading} action={clear}>
+        <Icon color="inherit" name="trash" className="mr-1" alt="" /> {t("notifications.dismissAll")}
+      </Button>
     </div>
   );
 };
@@ -188,7 +177,7 @@ const NotificationList: FC<Props> = ({ data, clear, remove }) => {
         </tbody>
       </table>
       {all.length > 6 ? (
-        <p className={classNames("has-text-centered", "has-text-grey")}>
+        <p className={classNames("has-text-centered", "has-text-secondary")}>
           {t("notifications.xMore", { count: all.length - 6 })}
         </p>
       ) : null}
@@ -348,6 +337,7 @@ const Notifications: FC<NotificationProps> = ({ className }) => {
       <NotificationSubscription notifications={notifications} remove={remove} />
       <div
         className={classNames(
+          "notifications",
           "dropdown",
           "is-hoverable",
           {

scm-ui/ui-webapp/src/containers/OmniSearch.tsx

@@ -71,6 +71,7 @@ const EmptyHits: FC = () => {
   );
 };
 
+// TODO ersetzen
 const ResultHeading = styled.h3`
   border-bottom: 1px solid lightgray;
 `;
@@ -79,6 +80,7 @@ const DropdownMenu = styled.div`
   max-width: 20rem;
 `;
 
+// TODO ersetzen
 const ResultFooter = styled.div`
   border-top: 1px solid lightgray;
 `;

scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx

@@ -96,7 +96,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
         <Behind className="column is-half is-flex is-flex-direction-column is-align-items-flex-end p-0">
           <Count className="is-size-7 pr-1">{behindText}</Count>
           <Bar
-            className="has-rounded-border-left has-background-grey"
+            className="has-rounded-border-left has-background-secondary"
             width={calculateBarLength(details.changesetsBehind)}
             direction="left"
           />
@@ -104,7 +104,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
         <Ahead className="column is-half is-flex is-flex-direction-column is-align-items-flex-start p-0">
           <Count className="is-size-7 pl-1">{aheadText}</Count>
           <Bar
-            className="has-rounded-border-right has-background-grey"
+            className="has-rounded-border-right has-background-secondary"
             width={calculateBarLength(details.changesetsAhead)}
             direction="right"
           />

scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx

@@ -31,7 +31,7 @@ import { useTranslation } from "react-i18next";
 const BranchCommitDateCommitter: FC<{ branch: Branch }> = ({ branch }) => {
   const [t] = useTranslation("repos");
 
-  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={branch.lastCommitDate} />;
+  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />;
   if (branch.lastCommitter?.name) {
     return (
       <>

scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx

@@ -76,7 +76,7 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
           {branch.name}
         </ReactLink>
         {branch.lastCommitDate && (
-          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
+          <span className={classNames("has-text-secondary", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
             <BranchCommitDateCommitter branch={branch} />
           </span>
         )}

scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx

@@ -58,7 +58,7 @@ const CodeActionBar: FC<Props> = ({ selectedBranch, branches, onSelectBranch, sw
   const location = useLocation();
 
   return (
-    <ActionBar className={"has-background-accent"}>
+    <ActionBar className="has-background-secondary-less">
       <FlexShrinkLevel
         left={
           branches &&

scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx

@@ -44,6 +44,7 @@ type Params = {
   revision: string;
 };
 
+// TODO ersetzen?
 const HomeLink = styled(Link)`
   border-right: 1px solid lightgray;
 `;

scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx

@@ -57,7 +57,7 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
       color={isSelected ? "link is-selected" : undefined}
       link={!isSelected ? href : undefined}
     >
-      <Icon className="pr-2" name={icon} color={isSelected ? "white" : "default"} alt="" />
+      <Icon className="pr-2" name={icon} color={isSelected ? "secondary-least" : "inherit"} alt="" />
       <p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
     </Button>
   );

scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx

@@ -41,7 +41,6 @@ import classNames from "classnames";
 
 const InfoBox = styled.div`
   white-space: pre-line;
-  background-color: #ccecf9;
   border-radius: 2px;
   border-left: 0.2rem solid;
   border-color: #33b2e8;
@@ -59,7 +58,7 @@ const ExportInterruptedNotification = () => {
 const ExportInfoBox: FC<{ exportInfo: ExportInfo }> = ({ exportInfo }) => {
   const [t] = useTranslation("repos");
   return (
-    <InfoBox className={classNames("my-4", "p-4")}>
+    <InfoBox className={classNames("my-4", "p-4", "has-background-info-25", "repository-export-info-box")}>
       <strong>{t("export.exportInfo.infoBoxTitle")}</strong>
       <p>{t("export.exportInfo.exporter", { username: exportInfo.exporterName })}</p>
       <p>

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -170,8 +170,8 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
     if (!collapsed) {
       return (
         <>
-          <div className="panel-block has-background-white-bis">
-            <table className="table has-background-white-bis">
+          <div className="panel-block has-background-secondary-less">
+            <table className="table has-background-secondary-less">
               <tbody>
                 <tr>
                   <td>{t("sources.content.path")}</td>

scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx

@@ -52,7 +52,7 @@ const TagDetail: FC<Props> = ({ repository, tag }) => {
         <SignatureIcon signatures={tag.signatures} className="ml-2 mb-5" />
         <div className={classNames("is-ellipsis-overflow", "is-size-7", "ml-2")}>
           {t("tags.overview.created")}{" "}
-          <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={tag.date} />
+          <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={tag.date} />
         </div>
       </div>
       <div className="media-right">

scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx

@@ -58,7 +58,7 @@ const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
       <td>
         <RouterLink to={to} title={tag.name}>
           {tag.name}
-          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
+          <span className={classNames("has-text-secondary", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
             {t("tags.overview.created")} <DateFromNow date={tag.date} />
           </span>
         </RouterLink>

scm-ui/ui-webapp/src/search/Syntax.tsx

@@ -53,7 +53,7 @@ const Expandable: FC<ExpandableProps> = ({ header, children, className }) => {
   const [t] = useTranslation("commons");
   const [expanded, setExpanded] = useState(false);
   return (
-    <div className={classNames("card", className)}>
+    <div className={classNames("card search-syntax-accordion", className)}>
       <header onClick={() => setExpanded(!expanded)} className="card-header is-clickable">
         <span className="card-header-title">{header}</span>
         <span className="card-header-icon">