fix(sbb-block-link): always show underline except for footer links (#…

…2705)
sbb-design-systems · Jun 4, 2024 · 5fbedd2 · 5fbedd2
1 parent 94c25b1
commit 5fbedd2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/elements/breadcrumb/breadcrumb/breadcrumb.scss b/src/elements/breadcrumb/breadcrumb/breadcrumb.scss
@@ -20,6 +20,8 @@
 }
 
 .sbb-breadcrumb {
+  --sbb-link-text-decoration: none;
+
   @include sbb.text-xs--regular;
   @include sbb.link-base;
 

diff --git a/src/elements/core/styles/mixins/link.scss b/src/elements/core/styles/mixins/link.scss
@@ -6,11 +6,6 @@
   --sbb-link-color-normal: var(--sbb-color-granite);
   --sbb-link-color-hover: var(--sbb-color-red125);
   --sbb-link-color-active: var(--sbb-color-red150);
-  --sbb-link-text-decoration: none;
-
-  @include a11y.if-forced-colors {
-    --sbb-link-text-decoration: underline;
-  }
 }
 
 @mixin block-link-variables--negative {
@@ -24,7 +19,6 @@
   --sbb-link-color-normal: inherit;
   --sbb-link-color-hover: var(--sbb-color-red125);
   --sbb-link-color-active: var(--sbb-color-red150);
-  --sbb-link-text-decoration: underline;
 }
 
 @mixin link-variables--negative {
@@ -43,8 +37,12 @@
 
 @mixin link-base {
   color: var(--sbb-link-color-normal);
-  text-decoration: var(--sbb-link-text-decoration);
+  text-decoration: var(--sbb-link-text-decoration, underline);
   user-select: none;
+
+  @include a11y.if-forced-colors {
+    text-decoration: underline;
+  }
 }
 
 @mixin link-focus-visible {

diff --git a/src/elements/footer/footer.scss b/src/elements/footer/footer.scss
@@ -9,6 +9,7 @@
   --sbb-footer-background-color: var(--sbb-color-milk);
   --sbb-footer-clock-width: #{sbb.px-to-rem-build(76)};
   --sbb-footer-color: var(--sbb-color-granite);
+  --sbb-link-text-decoration: none;
 
   @include sbb.mq($from: small) {
     --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};