Some more CSS variables

app/assets/stylesheets/content/_forms.sass

@@ -372,7 +372,8 @@ fieldset.form--fieldset
 
 .form--label-required
   @include default-transition
-  color:   $primary-color-dark
+  color:        $primary-color-dark
+  color:   var(--primary-color-dark)
   padding: 0 0.325rem
 
   .form--label.-error &
@@ -659,10 +660,12 @@ input[readonly].-clickable
       &::after
         @include default-transition
         content:  '*'
-        color:    $primary-color-dark
+        color:      $primary-color-dark
+        color: var(--primary-color-dark)
         padding:  0 0.325rem
       &:hover::after
-        color:    $primary-color
+        color:      $primary-color
+        color: var(--primary-color)
 
     > a
       display: block

app/assets/stylesheets/content/_links.sass

@@ -27,13 +27,19 @@
 //++
 
 a, a:link
-  color: $content-link-color
+  color:      $content-link-color
+  color: var(--content-link-color)
   text-decoration: none
 
 a:hover, a:active
-  color: $content-link-hover-active-color
+  color:      $content-link-hover-active-color
+  color: var(--content-link-hover-active-color)
   text-decoration: underline
 
+a:focus
+  color:      $content-link-hover-active-color
+  color: var(--content-link-hover-active-color)
+
 a
   img
     border: 0
@@ -69,7 +75,8 @@ a.icon, a.icon-context
   color: $content-icon-link-color
   font-weight: normal
   &.external
-    color: $content-link-color
+    color:      $content-link-color
+    color: var(--content-link-color)
 
 a.icon:hover, a.icon-context:hover
   text-decoration: none

app/assets/stylesheets/layout/_work_package_mobile.sass

@@ -78,7 +78,8 @@
           margin: 0.75rem 0 2.5rem 0
 
           a
-            color: $content-link-color
+            color:      $content-link-color
+            color: var(--content-link-color)
 
           li
             border-top: 2px solid $gray
@@ -88,7 +89,8 @@
             width: 33.33%
 
             &.selected
-              border-bottom: 2px solid $content-link-color
+              border-bottom: 2px solid      $content-link-color
+              border-bottom: 2px solid var(--content-link-color)
 
       .work-packages--left-panel,
       .work-packages--right-panel

app/assets/stylesheets/timelines.css.sass

@@ -146,7 +146,8 @@ a.tl-discreet-link, input.tl-discreet-link
   font-weight: normal
 
 a.tl-discreet-link:hover, input.icon:hover
-  color: $primary-color-dark
+  color:      $primary-color-dark
+  color: var(--primary-color-dark)
   text-decoration: underline
 
 #content .timeline

app/views/custom_styles/_inline_css.erb

@@ -50,6 +50,7 @@ See doc/COPYRIGHT.rdoc for more details.
       --footer-bg-color:                    <%= design_color.hexcode %>;
       --drop-down-selected-bg-color:        <%= design_color.hexcode %>;
       --button--highlight-background-color: <%= design_color.hexcode %>;
+      --slider-thumb-color:                 <%= design_color.hexcode %>;
     <% end %>
 
     <% if design_color.variable == "primary-color-dark" %>
@@ -60,6 +61,7 @@ See doc/COPYRIGHT.rdoc for more details.
       --main-menu-bg-hover-selected-background: url() no-repeat <%= design_color.hexcode %>;
       --content-link-color:                       <%= design_color.hexcode %>;
       --content-icon-color:                       <%= design_color.hexcode %>;
+      --content-link-hover-active-color:          <%= design_color.hexcode %>;
     <% end %>
 
     <% if design_color.variable == "alternative-color" %>