Expose colors and forms to plugins
Change-Id: I777e8fdf9f66860670b3af954ee2f5d072e0e20d
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;
}
}