provide color variables as css variables as well and use them, fixes #4651

Closes #4651

Merge request studip/studip!3460

.stylelintrc.json

@@ -75,7 +75,11 @@
         "string-quotes": null,
         "value-keyword-case": null,
         "value-list-max-empty-lines": null,
-        "value-no-vendor-prefix": null
+        "value-no-vendor-prefix": null,
+        "custom-property-pattern": [
+            "^([a-z][a-z0-9]*-+)*[a-z0-9]+$",
+            {"message": "Expected custom property name to be kebab-case-ish (multiple dashes are allowed"}
+        ]
     },
     "overrides": [
         {

resources/assets/stylesheets/scss/header.scss

@@ -68,14 +68,12 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-content: stretch;
     align-items: stretch;
-    background-color: $color--main-navigation-background;
-    border-bottom: 1px solid $color--main-navigation-border;
+    background-color: var(--color--main-navigation-background);
+    border-bottom: 1px solid var(--color--main-navigation-border);
     box-sizing: border-box;
-    display: flex;
-    justify-content: flex-start;
     min-width: $site-width;
     width: 100%;
     height: $header-height;
@@ -113,7 +111,7 @@
     align-items: stretch;
     justify-content: flex-start;
     flex-grow: 1;
-    
+
     &.oversized {
         overflow: visible;
     }
@@ -133,13 +131,13 @@
 
     #context-title {
         font-size: 24px;
-        color: $color--font-primary;
+        color: var(--color--font-primary);
         height: 30px;
         padding: 10px 15px 5px 15px;
         max-height: 30px;
         overflow: hidden;
-        background-color: $color--main-navigation-background;
-    
+        background-color: var(--color--main-navigation-background);
+
         > .context-avatar {
             margin: 0 5px 0 -6px;
             vertical-align: top;
@@ -163,16 +161,16 @@
         flex-direction: row;
         align-items: stretch;
         justify-content: space-between;
-        background-color: $color--main-navigation-background;
+        background-color: var(--color--main-navigation-background);
         font-size: 0.9em;
-        color: $color--font-primary;
+        color: var(--color--font-primary);
         min-height: 2.3em;
-        border-bottom: 1px solid $color--main-navigation-border;
+        border-bottom: 1px solid var(--color--main-navigation-border);
         padding-left: $page-margin;
         padding-top: 10px;
     }
 
-    #tabs { 
+    #tabs {
         transition: margin-left;
         transition-duration: var(--transition-duration);
         transition-delay: 500ms;
@@ -219,15 +217,15 @@
                 position: relative;
                 width: 28px;
                 z-index: 1;
-        
+
                 img {
                     height: 100%;
                     width: 100%;
                 }
-        
+
                 // Add arrow on the right
                 @include icon(after, arr_1down, info_alt);
-        
+
                 &::after {
                     background-position: center;
                     background-repeat: no-repeat;
@@ -236,16 +234,16 @@
                     left: 100%;
                     top: 0;
                 }
-        
+
                 #notification-container + & {
                     border-left: 0;
                 }
             }
-        
+
             .action-menu-title {
                 margin: 0 0 0.3em;
             }
-        
+
             .action-menu-content {
                 position: absolute;
                 top: 41px;
@@ -254,7 +252,7 @@
                 box-shadow: 1px 1px 1px var(--dark-gray-color-60);
                 text-align: left;
                 white-space: nowrap;
-        
+
                 a:link,
                 a:visited {
                     color: var(--base-color);
@@ -263,7 +261,7 @@
                 a:active {
                     color: var(--active-color);
                 }
-        
+
                 div {
                     color: var(--black);
                 }
@@ -276,4 +274,4 @@
 // $see https://gitlab.studip.de/studip/studip/-/issues/1019
 html {
     scroll-padding-top: calc($bar-bottom-container-height + 1em);
-}
+}
\ No newline at end of file

resources/assets/stylesheets/scss/variables.scss

@@ -180,6 +180,72 @@ $grid-gap: 0;
     #{"--"}transition-duration-slow: $transition-duration-slow;
     #{"--"}transition-duration-superslow: $transition-duration-superslow;
 
+    #{"--"}color--blue-1: $color--blue-1;
+    #{"--"}color--gray-1: $color--gray-1;
+    #{"--"}color--gray-2: $color--gray-2;
+    #{"--"}color--gray-3: $color--gray-3;
+    #{"--"}color--gray-4: $color--gray-4;
+    #{"--"}color--gray-5: $color--gray-5;
+    #{"--"}color--gray-6: $color--gray-6;
+    #{"--"}color--gray-7: $color--gray-7;
+    #{"--"}color--green-1: $color--green-1;
+    #{"--"}color--red-1: $color--red-1;
+    #{"--"}color--white: $color--white;
+    #{"--"}color--yellow-1: $color--yellow-1;
+
+    #{"--"}color--global-background: $color--global-background;
+
+    #{"--"}color--brand-primary: $color--brand-primary;
+    #{"--"}color--brand-secondary: $color--brand-secondary;
+
+    #{"--"}color--font-primary: $color--font-primary;
+    #{"--"}color--font-secondary: $color--font-secondary;
+    #{"--"}color--font-inactive: $color--font-inactive;
+    #{"--"}color--font-inverted: $color--font-inverted;
+
+    #{"--"}color--main-navigation-background: $color--main-navigation-background;
+    #{"--"}color--main-navigation-border: $color--main-navigation-border;
+
+    #{"--"}color--sidebar-marker-focus: $color--sidebar-marker-focus;
+    #{"--"}color--sidebar-marker-hover: $color--sidebar-marker-hover;
+    #{"--"}color--sidebar-focus: $color--sidebar-focus;
+    #{"--"}color--sidebar-hover: $color--sidebar-hover;
+
+    #{"--"}color--dialog-overlay: $color--dialog-overlay;
+
+    #{"--"}color--tile-border-focus: $color--tile-border-focus;
+    #{"--"}color--tile-border-hover: $color--tile-border-hover;
+    #{"--"}color--tile-border: $color--tile-border;
+    #{"--"}color--tile-background: $color--tile-background;
+    #{"--"}color--tile-background-focus: $color--tile-background-focus;
+    #{"--"}color--tile-background-hover: $color--tile-background-hover;
+
+    #{"--"}color--content-box-border: $color--content-box-border;
+    #{"--"}color--content-box-background: $color--content-box-background;
+
+    #{"--"}color--table-header: $color--table-header;
+    #{"--"}color--table-border: $color--table-border;
+    #{"--"}color--table-focus: $color--table-focus;
+    #{"--"}color--table-hover: $color--table-hover;
+
+    #{"--"}color--button-background: $color--button-background;
+    #{"--"}color--button-border: $color--button-border;
+    #{"--"}color--button-focus: $color--button-focus;
+    #{"--"}color--button-hover: $color--button-hover;
+
+    #{"--"}color--input-field-border: $color--input-field-border;
+    #{"--"}color--input-field-background: $color--input-field-background;
+
+    #{"--"}color--divider: $color--divider;
+    #{"--"}color--line: $color--line;
+
+    #{"--"}color--shadow: $color--shadow;
+    #{"--"}color--focus: $color--focus;
+
+    #{"--"}color--warning: $color--warning;
+    #{"--"}color--attention: $color--attention;
+    #{"--"}color--good: $color--good;
+
     @media (prefers-reduced-motion) {
         #{"--"}transition-duration: 0s;
         #{"--"}transition-duration-slow: 0s;