fix(styles): introduce site colors as CSS variables (#1503)

isomerpages · Sep 19, 2023 · 0d951b0 · 0d951b0
1 parent 2aeeeb1
commit 0d951b0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "sass": "^1.51.0",
     "sgds-govtech": "^1.3.16",
     "slugify": "^1.6.5",
+    "tinycolor2": "^1.6.0",
     "toml": "^3.0.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",

diff --git a/src/utils/siteColorUtils.js b/src/utils/siteColorUtils.js
@@ -1,4 +1,5 @@
 import axios from "axios"
+import tinycolor from "tinycolor2"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -31,6 +32,7 @@ const createPageStyleSheet = (repoName, primaryColor, secondaryColor) => {
   styleElement.setAttribute("title", styleTitle)
   document.head.appendChild(styleElement)
 
+  const secondaryColorHover = tinycolor(secondaryColor).lighten(10).toString()
   const customStyleSheet = getStyleSheet(styleTitle)
 
   // breadcrumb - primary color
@@ -130,6 +132,11 @@ const createPageStyleSheet = (repoName, primaryColor, secondaryColor) => {
     `.sgds-icon.bx-chevron-down:before { color: ${secondaryColor} !important;}`,
     0
   )
+
+  customStyleSheet.insertRule(
+    `:root { --site-primary-color: ${primaryColor} !important; --site-secondary-color: ${secondaryColor} !important; --site-secondary-color-hover: ${secondaryColorHover} !important;}`,
+    0
+  )
 }
 
 const getSiteColors = async (siteName) => {