diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 6d5acd0..6617170 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -22,6 +22,21 @@
 $black:        #333;
 $darker-black: rgb(20,20,20); // official footer
 
+:root {
+  --ids-orange-1: #{$ids-orange-1};
+  --ids-orange-2: #{$ids-orange-2};
+  --ids-grey-1: #{$ids-grey-1};
+  --ids-grey-2: #{$ids-grey-2};
+  --ids-blue-1: #{$ids-blue-1};
+  --ids-blue-2: #{$ids-blue-2};
+  --ids-green-1: #{$ids-green-1};
+  --ids-green-2: #{$ids-green-2};
+  --ids-pink-1: #{$ids-pink-1};
+  --ids-pink-2: #{$ids-pink-2};
+  --black-color: #{$black};
+  --darker-black-color: #{$darker-black};
+}
+
 
 /**
  * Orange Colors
@@ -32,6 +47,14 @@
 $darker-orange:  #ff8000;
 $darkest-orange: #e55d00;
 
+:root {
+  --light-orange-color: #{$light-orange};
+  --middle-orange-color: #{$middle-orange};
+  --dark-orange-color: #{$dark-orange};
+  --darker-orange-color: #{$darker-orange};
+  --darkest-orange-color: #{$darkest-orange};
+}
+
 
 /**
  * Green Colors
@@ -42,6 +65,14 @@
 $lightest-green: color.adjust($light-green, $lightness: 35%, $saturation: -20%, $space: hsl); // #d8e38c;
 $grey-green:     color.adjust($lightest-green, $saturation: -25%, $lightness: -12%, $space: hsl); // #bcc387;
 
+:root {
+  --light-green-color: #{$light-green};
+  --middle-green-color: #{$middle-green};
+  --dark-green-color: #{$dark-green};
+  --lightest-green-color: #{$lightest-green};
+  --grey-green-color: #{$grey-green};
+}
+ 
 
 /**
  * Blue Colors
@@ -50,6 +81,12 @@
 $dark-blue:      $ids-blue-1;
 $darkest-blue:   color.adjust($dark-blue, $lightness: -40%, $space: hsl);
 
+:root {
+  --light-blue-color: #{$light-blue};
+  --dark-blue-color: #{$dark-blue};
+  --darkest-blue-color: #{$darkest-blue};
+}
+
 
 /**
  * Grey Colors
@@ -59,6 +96,12 @@
 $dark-grey:    color.adjust($middle-grey, $lightness: -15%, $space: hsl);
 $nearly-white: #fefefe;
 
+:root {
+  --middle-grey-color: #{$middle-grey};
+  --dark-grey-color: #{$dark-grey};
+  --light-grey-color: #{$light-grey};
+  --nearly-white-color: #{$nearly-white};
+}
 
 /**
  * Red Colors (no IDS relation)
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index a150e3b..76bf7b5 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -258,7 +258,7 @@
   + label {
     cursor: pointer;
 
-    span {
+    span:first-of-type {
       display:        inline-block;
       border-radius:  4px;
       width:          1em;
@@ -275,7 +275,7 @@
     }
   }
 
-  &:checked + label span::after {
+  &:checked + label span:first-of-type::after {
     content: icons.$fa-checked;
   }
 }