High contrast mode findings (#1892)

Fixes most of the flaws in high contrast mode.

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,57 +334,57 @@ 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;
+    }
+
+    &:hover::before,
+    &:hover::after {
+      background-color: $white-bis;
+    }
+  }
+
+  //dark tags have light borders to separate from background
+  &.is-dark,
+  &.is-black {
+    border: 1px solid $white-bis;
+  }
+
+  //blue text in light tags
+  &.is-light .has-text-link {
+    color: scale-color($link, $lightness: -50%) !important;
+  }
+
+  //outline-tags
+  &.is-outlined {
     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 {
-  background-color: $white-bis;
-}
-
-//dark tags have light borders to separate from background
-.tag:not(body).is-dark, .tag:not(body).is-black {
-  border: 1px solid $white-bis;
-}
-
-//blue text in light tags
-.tag.is-light .has-text-link {
-  color: scale-color($link, $lightness: -50%) !important;
-}
-//outline-tags
-.tag:not(body).is-outlined {
-  background-color: $scheme-main;
-}
-
 //cards receive white border
 .box-link-shadow {
   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%);