Add experimental high contrast mode (#1845)

Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility. The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.
2025-11-13 17:05:43 +01:00 · 2021-11-04 08:33:11 +01:00
parent 07f0b22031
commit 0efdd2a483
53 changed files with 60796 additions and 60183 deletions
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -21,26 +21,7 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-@import "bulma/sass/utilities/initial-variables";
-@import "bulma/sass/utilities/functions";
-//$link: #007EB0;
-$info: #33b2e8;
-$turquoise: #00d1df;
-$blue: #33b2e8;
-$cyan: $blue;
-$green: #00c79b;
-$warning: #ffdd57;
-$blue-light: #98d8f3;
-$danger: #ff3860;
-$high-contrast-danger: #e63453;
-$family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
-$high-contrast-background-color: #050514;
-$high-contrast-light-gray: #f2f2f2;
-
-.table.high-contrast, .table.high-contrast thead td, .table.high-contrast thead th {
-  background-color: $high-contrast-background-color;
-  color: $high-contrast-light-gray;
-}
+// TODO split into multiple files

 .is-ellipsis-overflow {
  overflow: hidden;
@@ -89,6 +70,7 @@ hr.header-with-actions {
      width: 100%;
    }
    .input-button {
+      // TODO color def
      border: 2px solid #e9f7fd;
      padding: 1em 1em;
      margin-top: 0 !important;
@@ -107,84 +89,6 @@ footer.footer {
  }
 }

-// 6. Import the rest of Bulma
-@import "bulma/bulma";
-@import "bulma-tooltip/dist/css/bulma-tooltip.min";
-@import "bulma-popover/css/bulma-popover";
-
-$dark-75: scale-color($dark, $lightness: 25%);
-$dark-50: scale-color($dark, $lightness: 50%);
-$dark-25: scale-color($dark, $lightness: 75%);
-$info-75: scale-color($info, $lightness: 25%);
-$info-50: scale-color($info, $lightness: 50%);
-$info-25: scale-color($info, $lightness: 75%);
-$link-75: scale-color($link, $lightness: 25%);
-$link-50: scale-color($link, $lightness: 50%);
-$link-25: scale-color($link, $lightness: 75%);
-$primary-75: scale-color($primary, $lightness: 25%);
-$primary-50: scale-color($primary, $lightness: 50%);
-$primary-25: scale-color($primary, $lightness: 75%);
-$success-75: scale-color($success, $lightness: 25%);
-$success-50: scale-color($success, $lightness: 50%);
-$success-25: scale-color($success, $lightness: 75%);
-$warning-75: scale-color($warning, $lightness: 25%);
-$warning-50: scale-color($warning, $lightness: 50%);
-$warning-25: scale-color($warning, $lightness: 75%);
-$danger-75: scale-color($danger, $lightness: 25%);
-$danger-50: scale-color($danger, $lightness: 50%);
-$danger-25: scale-color($danger, $lightness: 75%);
-
-$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%);
-
-//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%);
-/*
-// not supported by ie
-// css vars for external reuse
-:root {
-  // asc sorted initial variables
-  --black: #{$black};
-  --white: #{$white};
-
-  // asc sorted derived-variables
-  --primary: #{$primary};
-  --primary-75: #{$primary-75};
-  --primary-50: #{$primary-50};
-  --primary-25: #{$primary-25};
-  --info: #{$info};
-  --info-75: #{$info-75};
-  --info-50: #{$info-50};
-  --info-25: #{$info-25};
-  --success: #{$success};
-  --success-75: #{$success-75};
-  --success-50: #{$success-50};
-  --success-25: #{$success-25};
-  --warning: #{$warning};
-  --warning-75: #{$warning-75};
-  --warning-50: #{$warning-50};
-  --warning-25: #{$warning-25};
-  --danger: #{$danger};
-  --danger-75: #{$danger-75};
-  --danger-50: #{$danger-50};
-  --danger-25: #{$danger-25};
-  --light: #{$light};
-  --dark: #{$dark};
-  --dark-75: #{$dark-75};
-  --dark-50: #{$dark-50};
-  --dark-25: #{$dark-25};
-  --background: #{$background};
-  --border: #{$border};
-  --text: #{$text};
-  --link: #{$link};
-  --link-75: #{$link-75};
-  --link-50: #{$link-50};
-  --link-25: #{$link-25};
-}
-*/

 .has-hover-background-blue:hover {
  background-color: scale-color($blue, $alpha: -90%);
@@ -192,6 +96,7 @@ $light-25: darken($high-contrast-light-gray, 45%);

 // readability issues with original color
 .has-text-warning {
+  // TODO color def
  color: #ffb600 !important;
 }
 .has-text-warning-invert {
@@ -205,6 +110,8 @@ $light-25: darken($high-contrast-light-gray, 45%);
  background-color: $blue-light;
 }

+// TODO
+/*
 .has-text-high-contrast-warning {
  color: $warning;
 }
@@ -213,7 +120,7 @@ $light-25: darken($high-contrast-light-gray, 45%);
 }
 .has-text-high-contrast-light-gray {
  color: $high-contrast-light-gray;
-}
+}*/


 // border and background colors
@@ -281,7 +188,8 @@ $light-25: darken($high-contrast-light-gray, 45%);
  background-color: $danger-25;
 }

-.has-background-danger-high-contrast {
+// TODO
+/*.has-background-danger-high-contrast {
  background-color: $high-contrast-danger;
 }
 .has-background-danger-high-contrast-75 {
@@ -305,7 +213,7 @@ $light-25: darken($high-contrast-light-gray, 45%);
 }
 .has-background-high-contrast-light-gray-25 {
  background-color: $light-25;
-}
+}*/

 // tags
 .tag:not(body) {
@@ -373,10 +281,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
  height: 2.5rem;
  font-weight: $weight-semibold;

-  &[disabled] {
-    opacity: 1;
-  }
-
  &.is-primary,
  &.is-info,
  &.is-link,
@@ -388,10 +292,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    }
  }

-  &.is-warning {
-    color: #88550D;
-  }
-
  &.is-primary:hover,
  &.is-primary.is-hovered {
    background-color: scale-color($primary, $lightness: -10%);
@@ -402,10 +302,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($primary, $lightness: -20%);
  }

-  &.is-primary[disabled] {
-    background-color: scale-color($primary, $lightness: 75%);
-  }
-
  &.is-info:hover,
  &.is-info.is-hovered {
    background-color: scale-color($info, $lightness: -10%);
@@ -416,10 +312,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($info, $lightness: -20%);
  }

-  &.is-info[disabled] {
-    background-color: scale-color($info, $lightness: 75%);
-  }
-
  &.is-link:hover,
  &.is-link.is-hovered {
    background-color: scale-color($link, $lightness: -10%);
@@ -430,10 +322,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($link, $lightness: -20%);
  }

-  &.is-link[disabled] {
-    background-color: scale-color($link, $lightness: 75%);
-  }
-
  &.is-success:hover,
  &.is-success.is-hovered {
    background-color: scale-color($success, $lightness: -10%);
@@ -444,10 +332,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($success, $lightness: -20%);
  }

-  &.is-success[disabled] {
-    background-color: scale-color($success, $lightness: 75%);
-  }
-
  &.is-warning:hover,
  &.is-warning.is-hovered {
    background-color: scale-color($warning, $lightness: -10%);
@@ -458,11 +342,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($warning, $lightness: -20%);
  }

-  &.is-warning[disabled] {
-    background-color: scale-color($warning, $lightness: 75%);
-    color: #e1d4c2;
-  }
-
  &.is-danger:hover,
  &.is-danger.is-hovered {
    background-color: scale-color($danger, $lightness: -10%);
@@ -473,10 +352,6 @@ $light-25: darken($high-contrast-light-gray, 45%);
    background-color: scale-color($danger, $lightness: -20%);
  }

-  &.is-danger[disabled] {
-    background-color: scale-color($danger, $lightness: 75%);
-  }
-
  &.is-reduced-mobile,
  &.reduced-mobile {
    @media screen and (max-width: 1087px) {
@@ -520,9 +395,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 // NEW STYLES

 //typography
-.subtitle {
-  color: #666;
-}
 .has-border-white {
  border-color: $white !important;
 }
@@ -889,7 +761,7 @@ form .field:not(.is-grouped) {
  }

  a:before {
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 5 Free"; /* NOSONAR */
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
@@ -952,3 +824,7 @@ form .field:not(.is-grouped) {
    @include loader;
  }
 }
+
+.sg-sub-section + .sg-sub-section {
+  margin-top: 2.5rem;
+}
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/scm-ui/ui-styles/src/highcontrast.scss
@@ -0,0 +1,334 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@import "utils/_pre.scss";
+
+// $text: $white;
+$scheme-main: #050514;
+$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%);
+$primary-invert: #050514;
+$info-invert: #050514;
+$link-invert: #050514;
+$link-hover: $white-bis;
+$success-invert: #050514;
+$danger-invert: #050514;
+
+$light-gray: #f2f2f2;
+
+$footer-background-color: $grey-dark;
+$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-body-background-color: $scheme-main;
+
+$input-placeholder-color: $white;
+
+$popover-background-color: $grey-dark;
+
+$table-row-hover-background-color: $grey-darker;
+
+$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";
+
+
+:root {
+  --sh-base-color: #fff;
+  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --sh-block-background: #000;
+  --sh-inline-code-color: #ff3860;
+  --sh-inline-code-background: #fbe7eb;
+  --sh-comment-color: #9a9a9a;
+  --sh-punctuation-color: #999999;
+  --sh-property-color: #2c99c7;
+  --sh-selector-color: #009dff;
+  --sh-operator-color: #999999;
+  --sh-operator-bg: inherit;
+  --sh-variable-color: #C386CA;
+  --sh-function-color: #FF6181;
+  --sh-keyword-color: #00a984;
+  --sh-selected-color: #7fe3cd;
+  --sh-highlight-background: #f5f5f5;
+  --sh-highlight-accent: #99d8f3;
+
+  --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;
+  --diff-gutter-delete-background-color: #EB7A85;
+  --diff-gutter-selected-background-color: #fffce0;
+  --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;
+  --diff-code-selected-background-color: #fffce0;
+  --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,
+  &.is-success,
+  &.is-warning,
+  &.is-danger {
+    &.is-outlined {
+      background-color: inherit;
+    }
+  }
+}
+
+.menu-label {
+  color: $scheme-main;
+}
+
+.menu-list {
+  a {
+    color: $white-ter;
+
+    &.is-active {
+      background-color: $high-contrast-background-color;
+    }
+  }
+}
+//footer is overwritten in _main.scss
+footer.footer {
+  background-color: $grey-dark;
+  a{
+    color: scale-color($link, $lightness:25%);
+  }
+}
+//card
+
+.modal-card {
+  border: 1px solid $white-ter;
+ .modal-close::before, .delete::before, .modal-close::after, .delete::after {
+  background-color: $white-bis;
+  }
+}
+
+//card tables
+.card-table {
+  tr {
+    a {
+      color: $white-bis;
+    }
+
+    &:hover {
+      td {
+        background-color: $grey-darker;
+
+        &.is-darker {
+          background-color: $grey-darker;
+        }
+      }
+      a {
+        color: $link;
+      }
+    }
+  }
+  td {
+    background-color: $grey-dark;
+    border-bottom: 1px solid $grey;
+    &.is-darker {
+      background-color: $grey-dark;
+    }
+  }
+
+  &.is-hoverable tbody tr:not(.is-selected):hover {
+    background-color: $grey-darker;
+  }
+}
+
+// panels
+.panel {
+  border: 1px solid $white-bis;
+  border-radius: 0.25rem;
+
+  .panel-heading {
+    border: none;
+    border-bottom: 1px solid $border;
+    border-radius: 0.25rem 0.25rem 0 0;
+    background-color: $grey-darker;
+  }
+
+  .panel-footer {
+    background-color: $grey-darker;
+    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;
+  }
+}
+
+//diffs
+.diff-code-conflict {
+  background-color: #332900;
+}
+
+.diff-gutter-conflict {
+  background-color: #FFD11A;
+}
+
+.diff-gutter-delete,.diff-gutter-insert, .diff-gutter-conflict {
+  color: $scheme-main;
+}
+
+/* transport meaning with more than color */
+td:nth-child(2).diff-gutter-delete:before {
+  content: "-";
+}
+
+td:first-child.diff-gutter-insert:before {
+  content: "+";
+}
+
+td:first-child.diff-gutter-conflict:before {
+  content: "!";
+}
+
+.diff-split td:nth-child(3).diff-gutter-insert:before {
+  content: "+";
+}
+
+.diff-split td:first-child.diff-gutter-delete:before {
+  content: "-";
+}
+
+.diff-split td:nth-child(3).diff-gutter-conflict:before {
+  content: "!";
+}
+
+.diff-decoration-content div {
+  color: $scheme-main;
+}
+
+//inline member tags
+.tag:not(body) {
+  border: 1px solid transparent;
+  background-color: $white;
+  .is-delete::before, .is-delete::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 {
+  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;
+}
+.popover .popover-content::before
+{
+  border-bottom-color: $grey-dark !important;
+  border-left-color: $grey-dark !important;
+}
+
+//make horizontal lines pop more
+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;
+}
--- a/scm-ui/ui-styles/src/images/scmManagerHeroDark.jpg
+++ b/scm-ui/ui-styles/src/images/scmManagerHeroDark.jpg
--- a/scm-ui/ui-styles/src/light.scss
+++ b/scm-ui/ui-styles/src/light.scss
@@ -0,0 +1,52 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@import "utils/_pre.scss";
+// colors defined in variables/commons.scss
+$subtitle-color: #666;
+$warning-invert: #88550D;
+$button-disabled-opacity: .25;
+
+@import "utils/_post.scss";
+
+:root {
+  --sh-base-color: #363636;
+  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --sh-block-background: #ffffff;
+  --sh-inline-code-color: #ff3860;
+  --sh-inline-code-background: #fbe7eb;
+  --sh-comment-color: #9a9a9a;
+  --sh-punctuation-color: #9a9a9a;
+  --sh-property-color: #2c99c7;
+  --sh-selector-color: #005f9a;
+  --sh-operator-color: #686868;
+  --sh-operator-bg: inherit;
+  --sh-variable-color: #a74eb2;
+  --sh-function-color: #ff3860;
+  --sh-keyword-color: #00a984;
+  --sh-selected-color: #7fe3cd;
+  --sh-highlight-background: #f5f5f5;
+  --sh-highlight-accent: #99d8f3;
+}
+
--- a/scm-ui/ui-styles/src/utils/_post.scss
+++ b/scm-ui/ui-styles/src/utils/_post.scss
@@ -0,0 +1,28 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@import "bulma/bulma";
+@import "../variables/_derived.scss";
+@import "bulma-tooltip/dist/css/bulma-tooltip.min";
+@import "bulma-popover/css/bulma-popover";
+@import "../components/_main.scss";
--- a/scm-ui/ui-styles/src/utils/_pre.scss
+++ b/scm-ui/ui-styles/src/utils/_pre.scss
@@ -0,0 +1,26 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@import "bulma/sass/utilities/initial-variables";
+@import "bulma/sass/utilities/functions";
+@import "../variables/_commons.scss";
--- a/scm-ui/ui-styles/src/variables/_commons.scss
+++ b/scm-ui/ui-styles/src/variables/_commons.scss
@@ -0,0 +1,34 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+//$link: #007EB0;
+$info: #33b2e8;
+$turquoise: #00d1df;
+$blue: #33b2e8;
+$cyan: $blue;
+$green: #00c79b;
+$warning: #ffdd57;
+$blue-light: #98d8f3;
+$danger: #ff3860;
+
+$family-monospace: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
--- a/scm-ui/ui-styles/src/variables/_derived.scss
+++ b/scm-ui/ui-styles/src/variables/_derived.scss
@@ -0,0 +1,55 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+$dark-75: scale-color($dark, $lightness: 25%);
+$dark-50: scale-color($dark, $lightness: 50%);
+$dark-25: scale-color($dark, $lightness: 75%);
+$info-75: scale-color($info, $lightness: 25%);
+$info-50: scale-color($info, $lightness: 50%);
+$info-25: scale-color($info, $lightness: 75%);
+$link-75: scale-color($link, $lightness: 25%);
+$link-50: scale-color($link, $lightness: 50%);
+$link-25: scale-color($link, $lightness: 75%);
+$primary-75: scale-color($primary, $lightness: 25%);
+$primary-50: scale-color($primary, $lightness: 50%);
+$primary-25: scale-color($primary, $lightness: 75%);
+$success-75: scale-color($success, $lightness: 25%);
+$success-50: scale-color($success, $lightness: 50%);
+$success-25: scale-color($success, $lightness: 75%);
+$warning-75: scale-color($warning, $lightness: 25%);
+$warning-50: scale-color($warning, $lightness: 50%);
+$warning-25: scale-color($warning, $lightness: 75%);
+$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%);