Fix colors in autocomplete component (#1905)

Further fixes for the high contrast mode, modly regarded to the autocomplete component.

This is a fixup for #1892

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>

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

@@ -89,6 +89,7 @@ class Autocomplete extends React.Component<Props, State> {
           {creatable ? (
             <AsyncCreatable
               className="autocomplete-entry"
+              classNamePrefix="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}
@@ -110,6 +111,8 @@ class Autocomplete extends React.Component<Props, State> {
             />
           ) : (
             <Async
+              className="autocomplete-entry"
+              classNamePrefix="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}

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

@@ -568,7 +568,6 @@ form .field:not(.is-grouped) {
 .select select,
 .textarea,
 .file-name {
-  border-color: $blue-light;
   box-shadow: none;
 }
 
@@ -811,11 +810,48 @@ form .field:not(.is-grouped) {
   color: $text !important;
 }
 
-.autocomplete-entry > div {
-  border-color: $blue-light;
-
-  &:hover,
-  &.is-hovered {
-    border-color: #4a4a4a;
-  }
+.autocomplete-entry__option--is-focused {
+  background-color: $link !important;
+  color: $link-invert !important;
+}
+
+.autocomplete-entry__option--is-selected {
+  // TODO better use link-light or something
+  background-color: $blue-light !important;
+  color: $link-invert !important;
+}
+
+.autocomplete-entry__single-value {
+  color: $text !important;
+}
+
+.autocomplete-entry > div {
+  color: $text-strong !important;
+}
+
+.autocomplete-entry__menu {
+  background-color: $background !important;
+}
+
+.autocomplete-entry__control {
+  background-color: $scheme-main !important;
+  border-color: $input-border-color !important;
+}
+
+.autocomplete-entry__control:hover {
+  border-color: $input-hover-border-color !important;
+}
+
+.autocomplete-entry__control--is-focused {
+  border-color: $input-focus-border-color !important;
+  box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color !important;
+}
+
+.autocomplete-entry__control--is-focused:hover {
+  border-color: $input-focus-border-color !important;
+  box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color !important;
+}
+
+.autocomplete-entry__input {
+  color: $text-strong !important;
 }

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

@@ -452,6 +452,10 @@ a.has-text-secondary-most:focus {
   background-color: $white !important;
 }
 
+.has-background-light {
+  color: $grey-dark;
+}
+
 .has-hover-visible:hover {
   color: $white-bis !important;
 }
@@ -482,22 +486,3 @@ fieldset[disabled] .input::placeholder {
   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/variables/_commons.scss

@@ -32,3 +32,5 @@ $blue-light: #98d8f3;
 $danger: #ff3860;
 
 $family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
+
+$input-border-color: $blue-light;