refactor: footer link colors to use customizable CSS variables

nl-design-system · Dec 3, 2024 · 5c3c1a9 · 5c3c1a9
1 parent fe34796
commit 5c3c1a9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/warm-zoos-vanish.md b/.changeset/warm-zoos-vanish.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/page-footer-css": minor
+---
+
+Refactor page-footer color definitions to use CSS variables with fallbacks
diff --git a/components/page-footer/src/_mixin.scss b/components/page-footer/src/_mixin.scss
@@ -12,13 +12,13 @@
 }
 
 @mixin utrecht-page-footer {
-  --utrecht-document-color: currentColor;
-  --utrecht-heading-color: currentColor;
-  --utrecht-link-color: currentColor;
-  --utrecht-link-focus-color: currentColor;
-  --utrecht-link-hover-color: currentColor;
-  --utrecht-link-active-color: currentColor;
-  --utrecht-link-visited-color: currentColor;
+  --utrecht-document-color: var(--utrecht-footer-document-color, currentColor);
+  --utrecht-heading-color: var(--utrecht-footer-heading-color, currentColor);
+  --utrecht-link-color: var(--utrecht-footer-link-color, currentColor);
+  --utrecht-link-focus-color: var(--utrecht-footer-link-focus-color, currentColor);
+  --utrecht-link-hover-color: var(--utrecht-footer-link-hover-color, currentColor);
+  --utrecht-link-active-color: var(--utrecht-footer-link-active-color, currentColor);
+  --utrecht-link-visited-color: var(--utrecht-footer-link-visited-color, currentColor);
 
   background-color: var(--utrecht-page-footer-background-color);
   background-image: var(--utrecht-page-footer-background-image);