Expose colors and forms to plugins
Change-Id: I777e8fdf9f66860670b3af954ee2f5d072e0e20d
diff --git a/Changes b/Changes
index c3eea20..c8bce41 100644
--- a/Changes
+++ b/Changes
@@ -1,3 +1,5 @@
+ - Expose colors and forms to plugins (diewald)
+
0.64 2026-02-14
- Improve 'Plugins' mounting (diewald)
- Don't track errors in Piwik/Matomo (diewald)
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;
}
}
diff --git a/dev/scss/plugin.scss b/dev/scss/plugin.scss
index 2352729..a89dc7e 100644
--- a/dev/scss/plugin.scss
+++ b/dev/scss/plugin.scss
@@ -1,19 +1,26 @@
@use "base/base";
@use "base/colors";
@use "base/lengths";
+@use "base/form";
body {
margin: 0;
padding: 0;
+ color: colors.$dark-grey;
h1 {
font-size: 110%;
background-color: colors.$ids-orange-1;
- color: white;
+ color: colors.$nearly-white;
margin-top: 0;
padding: lengths.$base-padding;
}
+ h2 {
+ font-size: 100%;
+ font-weight: bold;
+ }
section {
padding-left: lengths.$base-padding;
+ padding-right: lengths.$base-padding;
padding-bottom: lengths.$base-padding;
&::before{
content:'';