Some more CSS variables

app/assets/stylesheets/content/_forms.sass

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

app/assets/stylesheets/content/_links.sass

@@ -28,12 +28,18 @@
 
 a, a:link
   color:      $content-link-color
+  color: var(--content-link-color)
   text-decoration: none
 
 a:hover, a:active
   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
@@ -70,6 +76,7 @@ a.icon, a.icon-context
   font-weight: normal
   &.external
     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

@@ -79,6 +79,7 @@
 
           a
             color:      $content-link-color
+            color: var(--content-link-color)
 
           li
             border-top: 2px solid $gray
@@ -89,6 +90,7 @@
 
             &.selected
               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

@@ -147,6 +147,7 @@ a.tl-discreet-link, input.tl-discreet-link
 
 a.tl-discreet-link:hover, input.icon:hover
   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" %>