change link colors to css variables

canonical · Feb 13, 2024 · bf2c10f · bf2c10f
1 parent 8f275d5
commit bf2c10f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/scss/_patterns_notifications.scss b/scss/_patterns_notifications.scss
@@ -198,10 +198,10 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 
     .p-notification__action {
       @extend %default-text;
-      color: $color-link;
+      color: $colors--theme--link-default;
 
       &:visited {
-        color: $color-link-visited;
+        color: $colors--theme--link-visited;
       }
     }
 

diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss
@@ -254,6 +254,9 @@ $colors--theme--background-information-default: var(--vf-color-background-inform
 $colors--theme--background-information-hover: var(--vf-color-background-information-hover);
 $colors--theme--background-information-active: var(--vf-color-background-information-active);
 
+$colors--theme--link-default: var(--vf-color-link-default);
+$colors--theme--link-visited: var(--vf-color-link-visited);
+
 // Theme colors exposed as CSS custom properties
 @mixin vf-theme-light {
   // SCSS variables need to be interpolated to work in CSS custom properties
@@ -294,6 +297,9 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
   --vf-color-background-information-default: #{map-get($colors-light-theme--tinted-backgrounds, information, default)};
   --vf-color-background-information-hover: #{map-get($colors-light-theme--tinted-backgrounds, information, 'hover')};
   --vf-color-background-information-active: #{map-get($colors-light-theme--tinted-backgrounds, information, active)};
+
+  --vf-color-link-default: #{$color-link};
+  --vf-color-link-visited: #{$color-link-visited};
 }
 
 @mixin vf-theme-dark {
@@ -334,6 +340,9 @@ $colors--theme--background-information-active: var(--vf-color-background-informa
   --vf-color-background-information-default: #{map-get($colors-dark-theme--tinted-backgrounds, information, default)};
   --vf-color-background-information-hover: #{map-get($colors-dark-theme--tinted-backgrounds, information, hover)};
   --vf-color-background-information-active: #{map-get($colors-dark-theme--tinted-backgrounds, information, active)};
+
+  --vf-color-link-default: #{$color-link-dark};
+  --vf-color-link-visited: #{$color-link-visited-dark};
 }
 
 @mixin vf-theme-paper {