Abweichende Farbwerte durch ColorTheming Variablen

Closes #5755

Merge request studip/studip!4389

7 files changed, 52 insertions, 25 deletions

diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index cf914e3..f2c6db6 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -157,6 +157,7 @@ article.new {
                 @include icon(before, arr_1right, new);
                 &::before {
                     margin-right: 5px;
+                    background-color: var(--color--red-1);
                 }
             }
         }
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index 5aa73f2..014d19c 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -14,9 +14,9 @@
     }
 
     .ui-dialog-titlebar {
-        background: var(--color--info);
+        background: var(--color--brand-primary);
         border: 0;
-        color: var(--color--info-contrast);
+        color: var(--color--brand-primary-contrast);
         font-size:1.3em;
         font-weight: normal;
 
@@ -27,7 +27,7 @@
 
     .ui-dialog-titlebar-close {
         @include square(32px);
-        color: var(--color--info-contrast);
+        color: var(--color--brand-primary-contrast);
         background: inherit;
         border: 0;
         line-height:32px;
diff --git a/resources/assets/stylesheets/scss/helpbar.scss b/resources/assets/stylesheets/scss/helpbar.scss
index 94f8cfd..ac29462 100644
--- a/resources/assets/stylesheets/scss/helpbar.scss
+++ b/resources/assets/stylesheets/scss/helpbar.scss
@@ -49,7 +49,8 @@ $border-width: 4px;
 }
 
 .helpbar {
-    background-color: var(--color--info);
+    background-color: var(--color--brand-primary);
+    color: var(--color--brand-primary-contrast);
     padding: 8px;
     box-sizing: border-box;
     position: absolute;
diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss
index 04655f8..ddd1014 100644
--- a/resources/assets/stylesheets/scss/my_courses.scss
+++ b/resources/assets/stylesheets/scss/my_courses.scss
@@ -26,9 +26,11 @@ $icon-padding: 3px;
     a {
         display: inline-block;
         padding: $icon-padding;
-    }
 
-    @include highlight-anchor;
+        &:hover {
+            color: inherit;
+        }
+    }
 
     &:last-child {
         margin-right: 0;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 5c8be5a..f23cb04 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -70,7 +70,7 @@ $sidebarOut: -330px;
 }
 
 #responsive-navigation-items {
-    background-color: var(--base-color);
+    background-color: var(--color--brand-primary);
     left: 0;
     max-height: calc(100vh - $header-bar-container-height - 5px);
     max-width: $responsive-menu-width;
@@ -129,7 +129,7 @@ $sidebarOut: -330px;
                     background-color: transparent;
 
                     &:hover {
-                        background-color: var(--base-color-80);
+                        background-color: rgba(255,255,255,0.2);
                     }
                 }
             }
@@ -151,14 +151,15 @@ $sidebarOut: -330px;
     }
 
     .navigation-item {
-        background-color: var(--base-color);
+        background-color: var(--color--brand-primary);
+        color: var(--color--brand-primary-contrast);
         display: flex;
         flex-wrap: wrap;
         list-style-type: none;
         margin: 0px;
 
         &:not(:last-child) {
-            border-bottom: 1px solid var(--white);
+            border-bottom: 1px solid var(--color--brand-primary-contrast);
         }
 
         &.navigation-up,
@@ -174,22 +175,22 @@ $sidebarOut: -330px;
             }
 
             &:hover {
-                background-color: var(--base-color-80);
+                background-color: rgba(255,255,255,0.2);
             }
 
         }
 
         &.navigation-item-active {
-            background-color: var(--base-color-80);
+            background-color: rgba(255,255,255,0.2);
         }
 
         a {
-            color: var(--white);
+            color: var(--color--brand-primary-contrast);
             cursor: pointer;
         }
 
         button {
-            color: var(--white);
+            color: var(--color--brand-primary-contrast);
             cursor: pointer;
             display: flex;
             flex: 0;
@@ -202,20 +203,20 @@ $sidebarOut: -330px;
             }
 
             &.navigation-in {
-                border-left: 1px solid var(--base-color-60);
+                border-left: 1px solid rgba(255,255,255,0.4);
             }
         }
 
         &:not(.navigation-current):not(.navigation-up) {
             button:hover {
-                background-color: var(--base-color-80);
+                background-color: rgba(255,255,255,0.2);
             }
         }
 
     }
 
     .navigation-title {
-        color: var(--white);
+        color: var(--color--brand-primary-contrast);
         flex: 1;
 
         > a,
@@ -253,7 +254,7 @@ $sidebarOut: -330px;
         flex: 0;
 
         &:hover {
-            background-color: var(--base-color-80);
+            background-color: rgba(255,255,255,0.2);
         }
 
     }
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 8510665..6743461 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -142,6 +142,10 @@ ul.widget-list {
             a, button {
                 color: var(--color--sidebar-item-hover);
                 text-decoration: none;
+
+                svg {
+                    color: var(--color--sidebar-item);
+                }
             }
         }
 
@@ -274,13 +278,23 @@ div#sidebar-navigation {
 
             &.options-checked {
                 @include icon(before, checkbox-checked, $padding: 6px, $align: middle);
+                &::before {
+                    background-color: var(--color--sidebar-item);
+                }
             }
             &.options-unchecked {
                 @include icon(before, checkbox-unchecked, $padding: 6px, $align: middle);
+                &::before {
+                    background-color: var(--color--sidebar-item);
+                }
             }
             &:hover {
                 color: var(--color--sidebar-item-hover);
                 text-decoration: none;
+
+                svg {
+                    color: var(--color--sidebar-item);
+                }
             }
         }
 
@@ -290,13 +304,23 @@ div#sidebar-navigation {
 
             &.options-checked {
                 @include icon(before, radiobutton-checked, $padding: 6px, $align: middle);
+                &::before {
+                    background-color: var(--color--sidebar-item);
+                }
             }
             &.options-unchecked {
                 @include icon(before, radiobutton-unchecked, $padding: 6px, $align: middle);
+                &::before {
+                    background-color: var(--color--sidebar-item);
+                }
             }
             &:hover {
                 color: var(--color--sidebar-item-hover);
                 text-decoration: none;
+
+                svg {
+                    color: var(--color--sidebar-item);
+                }
             }
         }
     }
diff --git a/resources/assets/stylesheets/scss/tour.scss b/resources/assets/stylesheets/scss/tour.scss
index cfe6fc9..1ba2e6c 100644
--- a/resources/assets/stylesheets/scss/tour.scss
+++ b/resources/assets/stylesheets/scss/tour.scss
@@ -17,8 +17,7 @@
     bottom: 20px;
     right: 20px;
     z-index:20001;
-    border: solid 1px var(--base-color);
-    background-color: var(--white);
+    background-color: var(--color--global-background);
     padding: 10px 10px;
     font-family: $font-family-base;
     overflow-y: auto;
@@ -41,9 +40,8 @@
     font-family: $font-family-base;
     font-size: 16px;
     box-sizing: border-box;
-    background-color: var(--base-color);
-    color: var(--white);
-    border: solid 1px var(--dark-gray-color-80);
+    background-color: var(--color--brand-primary);
+    color: var(--color--brand-primary-contrast);
     box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
 
     a.link-extern {
@@ -53,11 +51,11 @@
         @include icon(before, link-intern, info-alt);
     }
     a, a:link, a:visited {
-        color: var(--white);
+        color: var(--color--brand-primary-contrast);
         text-decoration: none;
     }
     a:hover, a:active, a:hover.index, a:active.index, a:hover.tree {
-        color: var(--white);
+        color: var(--color--brand-primary-contrast);
         text-decoration: underline;
     }
 }