@madgex/design-system 6.3.3 → 6.3.5

package/src/components/popover/popover.scss

@@ -1,4 +1,5 @@
 $arrow-size: 10px;
+$border-color: var(--mds-color-border, #{$constant-color-neutral-lighter});
 
 .js .mds-popover {
   display: none;
@@ -9,11 +10,11 @@ $arrow-size: 10px;
 }
 
 .js .mds-popover {
-  background: var(--mds-color-background-surface);
-  border: var(--mds-size-border-width-base) solid var(--mds-color-border);
-  border-radius: var(--mds-size-border-radius-base);
-  padding: ($scss-var-size-baseline * 2);
-  box-shadow: var(--mds-shadow-base);
+  background: $surface-background;
+  border: $regular-border;
+  border-radius: $border-radius;
+  padding: ($constant-size-baseline * 2);
+  box-shadow: 0 2px 5px 0 $constant-color-neutral-lighter;
   text-align: left;
   max-width: 250px;
   @include z-index(popup);
@@ -48,11 +49,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='top-start'] &,
   .mds-popover[data-popper-placement='top-end'] & {
     bottom: $arrow-size * -1;
-    border-top-color: var(--mds-color-border);
+    border-top-color: $border-color;
     border-bottom-width: 0;
 
     &:after {
-      border-top-color: var(--mds-color-background-surface);
+      border-top-color: $surface-background;
       border-bottom-width: 0;
       left: $arrow-size * -1;
       bottom: 1px;
@@ -62,11 +63,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='right-start'] &,
   .mds-popover[data-popper-placement='right-end'] & {
     left: $arrow-size * -1;
-    border-right-color: var(--mds-color-border);
+    border-right-color: $border-color;
     border-left-width: 0;
 
     &:after {
-      border-right-color: var(--mds-color-background-surface);
+      border-right-color: $surface-background;
       border-left-width: 0;
       top: $arrow-size * -1;
       left: 1px;
@@ -76,11 +77,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='bottom-start'] &,
   .mds-popover[data-popper-placement='bottom-end'] & {
     top: $arrow-size * -1;
-    border-bottom-color: var(--mds-color-border);
+    border-bottom-color: $border-color;
     border-top-width: 0;
 
     &:after {
-      border-bottom-color: var(--mds-color-background-surface);
+      border-bottom-color: $surface-background;
       border-top-width: 0;
       left: $arrow-size * -1;
       top: 1px;
@@ -90,11 +91,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='left-start'] &,
   .mds-popover[data-popper-placement='left-end'] & {
     right: $arrow-size * -1;
-    border-left-color: var(--mds-color-border);
+    border-left-color: $border-color;
     border-right-width: 0;
 
     &:after {
-      border-left-color: var(--mds-color-background-surface);
+      border-left-color: $surface-background;
       border-right-width: 0;
       top: $arrow-size * -1;
       right: 1px;

package/src/components/section-title/section-title.scss

@@ -1,3 +1,3 @@
 .mds-section-title {
-  border-bottom: var(--mds-size-border-width-base) solid var(--mds-color-border);
+  border-bottom: $regular-border;
 }

package/src/components/skip-link/skip-link.scss

@@ -1,13 +1,13 @@
 .mds-skip-to-content__link {
-  background-color: $scss-var-color-neutral-lightest;
-  border: 5px solid var(--mds-color-border);
+  background-color: $constant-color-neutral-lightest;
+  border: 5px solid $constant-color-neutral-lighter;
   @extend .mds-font-double-pica;
   font-weight: bold;
   left: -10000px;
-  padding: $scss-var-size-baseline * 6;
+  padding: $constant-size-baseline * 6;
   position: absolute;
   text-align: center;
-  border-radius: var(--mds-size-border-radius-base);
+  border-radius: 4px;
 
   &:focus {
     left: 0;

package/src/components/tabs/tabs.scss

@@ -1,13 +1,13 @@
 .mds-tabs__list {
   margin-bottom: 0;
-  padding-top: $scss-var-size-baseline * 3;
-  padding-bottom: $scss-var-size-baseline * 3;
-  @extend .mds-border-bottom;
+  padding-top: $constant-size-baseline * 3;
+  padding-bottom: $constant-size-baseline * 3;
+  border-bottom: $regular-border;
 }
 
 .mds-tabs__panel {
   &:not(:last-child) {
-    @extend .mds-border-bottom;
+    border-bottom: $regular-border;
   }
   &__content {
     @extend .mds-surface__inner;
@@ -17,11 +17,11 @@
 .mds-tabs__panel-header {
   @extend .mds-font-great-primer;
   @extend .mds-surface__inner;
-  @extend .mds-border-bottom;
-  padding-top: $scss-var-size-baseline * 3;
-  padding-bottom: $scss-var-size-baseline * 3;
+  border-bottom: $regular-border;
+  padding-top: $constant-size-baseline * 3;
+  padding-bottom: $constant-size-baseline * 3;
   margin-bottom: 0;
-  background: $scss-var-color-neutral-lightest;
+  background: $constant-color-neutral-lightest;
 }
 
 .mds-tabs__list-item {
@@ -31,8 +31,8 @@
 .mds-tabs__tab {
   display: inline-block;
   @extend .mds-surface__inner;
-  padding-top: $scss-var-size-baseline * 2;
-  padding-bottom: $scss-var-size-baseline * 2;
+  padding-top: $constant-size-baseline * 2;
+  padding-bottom: $constant-size-baseline * 2;
 }
 
 // MIXIN to share between the 2 variations
@@ -40,7 +40,7 @@
   .mds-tabs__list {
     padding: 0;
     display: flex;
-    gap: $scss-var-size-baseline * 2;
+    gap: $constant-size-baseline * 2;
   }
 
   .mds-tabs__list-item {
@@ -55,7 +55,7 @@
   .mds-tabs__panel-header--visible {
     background: transparent;
     border-bottom: 0;
-    padding-top: $scss-var-size-baseline * 8;
+    padding-top: $constant-size-baseline * 8;
     padding-bottom: 0;
   }
 
@@ -67,24 +67,24 @@
     width: 100%;
     text-decoration: none;
     text-align: left;
-    margin-right: $scss-var-size-baseline;
-    padding-top: $scss-var-size-baseline * 6;
-    padding-bottom: $scss-var-size-baseline * 5;
+    margin-right: $constant-size-baseline;
+    padding-top: $constant-size-baseline * 6;
+    padding-bottom: $constant-size-baseline * 5;
   }
 
   .mds-tabs__tab:hover {
-    border-bottom: 6px solid $scss-var-color-neutral-light;
+    border-bottom: 6px solid $constant-color-neutral-light;
   }
 
   .mds-tabs__tab.mds-tabs__tab--selected {
-    border-bottom: 6px solid var(--mds-color-link-base);
+    border-bottom: 6px solid $link-color;
     color: var(--mds-color-text-headers-base);
   }
 }
 
 .js {
   // DEFAULT (desktop-tabbed)
-  @include mq($from: $scss-var-size-breakpoint-lg) {
+  @include mq($from: $constant-size-breakpoint-lg) {
     @include tabbed-items;
   }
   // FULL-TABBED
@@ -92,13 +92,13 @@
     @include tabbed-items;
     .mds-tabs__list-item {
       width: 50%;
-      @include mq($from: $scss-var-size-breakpoint-md) {
+      @include mq($from: $constant-size-breakpoint-md) {
         width: auto;
       }
     }
     .mds-tabs__tab {
       text-align: center;
-      @include mq($from: $scss-var-size-breakpoint-md) {
+      @include mq($from: $constant-size-breakpoint-md) {
         text-align: left;
       }
     }

package/src/components/toggle-button-links/toggle-button-links.scss

@@ -1,22 +1,19 @@
-.mds-toggle-button-links {
-}
-
 .mds-toggle-button-links__label {
   display: inline;
   margin-bottom: 0;
   /* @include mds-visually-hidden;
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     position: relative;
     clip: inherit;
     clip-path: none;
     width: auto;
     height: auto;
     white-space: inherit;
-    margin-right: $scss-var-size-baseline * 4;
+    margin-right: $constant-size-baseline * 4;
   } */
 
-  margin-right: $scss-var-size-baseline * 4;
-  @include mq($until: $scss-var-size-breakpoint-md - 1px) {
+  margin-right: $constant-size-baseline * 4;
+  @include mq($until: $constant-size-breakpoint-md - 1px) {
     @include mds-visually-hidden;
   }
 }
@@ -24,16 +21,16 @@
 .mds-toggle-button-links__list {
   display: flex;
   margin-bottom: 0;
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     display: inline;
   }
 }
 .mds-toggle-button-links__list-item {
   display: flex;
   flex: 1;
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     display: inline;
-    margin-right: $scss-var-size-baseline * 4;
+    margin-right: $constant-size-baseline * 4;
   }
 }
 
@@ -45,26 +42,23 @@
   text-align: center;
   justify-content: center;
 
-  border: 1px solid $scss-var-color-neutral-lighter;
+  border: $regular-border;
   border-right-width: 0;
-  padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 5);
+  padding: ($constant-size-baseline * 3) ($constant-size-baseline * 5);
   @extend .mds-font-body-copy;
   text-decoration: underline;
 
-  font-weight: var(--mds-font-weight-link-base);
-  color: var(--mds-color-link-base);
-
   .mds-toggle-button-links__list-item:first-child & {
-    border-top-left-radius: var(--mds-size-border-radius-button);
-    border-bottom-left-radius: var(--mds-size-border-radius-button);
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
   }
   .mds-toggle-button-links__list-item:last-child & {
-    border-top-right-radius: var(--mds-size-border-radius-button);
-    border-bottom-right-radius: var(--mds-size-border-radius-button);
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     border-right-width: 1px;
   }
 
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     display: inline;
     padding: 0;
     border: 0;
@@ -74,9 +68,9 @@
   color: var(--mds-color-text-base);
   text-decoration: none;
   font-weight: bolder;
-  background: $scss-var-color-neutral-lightest;
+  background: $constant-color-neutral-lightest;
 
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     background: none;
   }
 }

package/src/helpers/spacing/README.md

@@ -1,10 +1,10 @@
 ## Space scale
 
-We are using a spacing scale based on a single tolen: `$scss-var-size-baseline = 0.25 rem | 4px`.
+We are using a spacing scale based on a single tolen: `$constant-size-baseline = 0.25 rem | 4px`.
 
 We multiply this token to create any spacing on the design system.
 
-Ex: `margin-bottom: $scss-var-size-baseline * 5`
+Ex: `margin-bottom: $constant-size-baseline * 5`
 
 ## Helpers
 

package/src/layout/grid/README.md

@@ -11,10 +11,10 @@ The default will start at 0 and then we add breakpoints to target the wider view
 
 We are using the following breakpoints:
 
-- `$scss-var-size-breakpoint-sm` : `400px`
-- `$scss-var-size-breakpoint-md` : `600px`
-- `$scss-var-size-breakpoint-lg` : `1008px`
-- `$scss-var-size-breakpoint-xl` : `1280px`
+- `$constant-size-breakpoint-sm` : `400px`
+- `$constant-size-breakpoint-md` : `600px`
+- `$constant-size-breakpoint-lg` : `1008px`
+- `$constant-size-breakpoint-xl` : `1280px`
 
 They can be overridden as necessary.
 

package/src/scss/constants/_sd-tokens.scss

@@ -1,81 +1,77 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 15 Apr 2024 11:20:57 GMT
+ * Generated on Mon, 13 May 2024 09:52:30 GMT
  */
 
-$scss-var-color-neutral-white: #FFFFFF;
-$scss-var-color-neutral-black: #000000;
-$scss-var-color-neutral-base: #707070;
-$scss-var-color-neutral-light: #949494;
-$scss-var-color-neutral-lighter: #DDDDDD;
-$scss-var-color-neutral-lightest: #F8F8F8;
-$scss-var-color-neutral-darker: #333333;
-$scss-var-color-status-error-light: #fd0826;
-$scss-var-color-status-error-lightest: #ffe3e6;
-$scss-var-color-status-error-dark: #d0021b;
-$scss-var-color-status-error-darkest: #ae0216;
-$scss-var-color-status-error-base: #e1021d;
-$scss-var-color-status-success-light: #6ac52d;
-$scss-var-color-status-success-lightest: #f0faea;
-$scss-var-color-status-success-dark: #549b24;
-$scss-var-color-status-success-darkest: #40791B;
-$scss-var-color-status-success-base: #5ba927;
-$scss-var-color-status-info-light: #ffc442;
-$scss-var-color-status-info-lightest: #fff7e5;
-$scss-var-color-status-info-dark: #f4aa08;
-$scss-var-color-status-info-darkest: #946500;
-$scss-var-color-status-info-base: #ffb411;
-$scss-var-size-baseline: 4px;
-$scss-var-size-breakpoint-sm: 400px;
-$scss-var-size-breakpoint-md: 600px;
-$scss-var-size-breakpoint-lg: 1008px;
-$scss-var-size-breakpoint-xl: 1280px;
-$scss-var-size-gutter-width: 20px;
+$constant-color-neutral-base: #707070;
+$constant-color-neutral-light: #949494;
+$constant-color-neutral-lighter: #DDDDDD;
+$constant-color-neutral-lightest: #F8F8F8;
+$constant-color-neutral-darker: #333333;
+$constant-color-status-error-light: #fd0826;
+$constant-color-status-error-lightest: #ffe3e6;
+$constant-color-status-error-dark: #d0021b;
+$constant-color-status-error-darkest: #ae0216;
+$constant-color-status-error-base: #e1021d;
+$constant-color-status-success-light: #6ac52d;
+$constant-color-status-success-lightest: #f0faea;
+$constant-color-status-success-dark: #549b24;
+$constant-color-status-success-darkest: #40791B;
+$constant-color-status-success-base: #5ba927;
+$constant-color-status-info-light: #ffc442;
+$constant-color-status-info-lightest: #fff7e5;
+$constant-color-status-info-dark: #f4aa08;
+$constant-color-status-info-darkest: #946500;
+$constant-color-status-info-base: #ffb411;
+$constant-size-baseline: 4px;
+$constant-size-breakpoint-sm: 400px;
+$constant-size-breakpoint-md: 600px;
+$constant-size-breakpoint-lg: 1008px;
+$constant-size-breakpoint-xl: 1280px;
+$constant-size-gutter-width: 20px;
 
 $tokens: (
   'color': (
     'neutral': (
-      'white': $scss-var-color-neutral-white,
-      'black': $scss-var-color-neutral-black,
-      'base': $scss-var-color-neutral-base,
-      'light': $scss-var-color-neutral-light,
-      'lighter': $scss-var-color-neutral-lighter,
-      'lightest': $scss-var-color-neutral-lightest,
-      'darker': $scss-var-color-neutral-darker
+      'base': $constant-color-neutral-base,
+      'light': $constant-color-neutral-light,
+      'lighter': $constant-color-neutral-lighter,
+      'lightest': $constant-color-neutral-lightest,
+      'darker': $constant-color-neutral-darker
     ),
     'status': (
       'error': (
-        'light': $scss-var-color-status-error-light,
-        'lightest': $scss-var-color-status-error-lightest,
-        'dark': $scss-var-color-status-error-dark,
-        'darkest': $scss-var-color-status-error-darkest,
-        'base': $scss-var-color-status-error-base
+        'light': $constant-color-status-error-light,
+        'lightest': $constant-color-status-error-lightest,
+        'dark': $constant-color-status-error-dark,
+        'darkest': $constant-color-status-error-darkest,
+        'base': $constant-color-status-error-base
       ),
       'success': (
-        'light': $scss-var-color-status-success-light,
-        'lightest': $scss-var-color-status-success-lightest,
-        'dark': $scss-var-color-status-success-dark,
-        'darkest': $scss-var-color-status-success-darkest,
-        'base': $scss-var-color-status-success-base
+        'light': $constant-color-status-success-light,
+        'lightest': $constant-color-status-success-lightest,
+        'dark': $constant-color-status-success-dark,
+        'darkest': $constant-color-status-success-darkest,
+        'base': $constant-color-status-success-base
       ),
       'info': (
-        'light': $scss-var-color-status-info-light,
-        'lightest': $scss-var-color-status-info-lightest,
-        'dark': $scss-var-color-status-info-dark,
-        'darkest': $scss-var-color-status-info-darkest,
-        'base': $scss-var-color-status-info-base
+        'light': $constant-color-status-info-light,
+        'lightest': $constant-color-status-info-lightest,
+        'dark': $constant-color-status-info-dark,
+        'darkest': $constant-color-status-info-darkest,
+        'base': $constant-color-status-info-base
       )
     )
   ),
   'size': (
-    'baseline': $scss-var-size-baseline,
+    'baseline': $constant-size-baseline,
     'breakpoint': (
-      'sm': $scss-var-size-breakpoint-sm,
-      'md': $scss-var-size-breakpoint-md,
-      'lg': $scss-var-size-breakpoint-lg,
-      'xl': $scss-var-size-breakpoint-xl
+      'sm': $constant-size-breakpoint-sm,
+      'md': $constant-size-breakpoint-md,
+      'lg': $constant-size-breakpoint-lg,
+      'xl': $constant-size-breakpoint-xl
     ),
-    'gutter-width': $scss-var-size-gutter-width
+    'gutter-width': $constant-size-gutter-width
   )
 );

package/src/scss/constants/_vars.scss

@@ -1,4 +1,14 @@
 $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 
-$scss-var-size-half-gutter-width: $scss-var-size-gutter-width * 0.5;
-$scss-var-size-quarter-gutter-width: $scss-var-size-gutter-width * 0.25;
+$constant-size-half-gutter-width: $constant-size-gutter-width * 0.5;
+$constant-size-quarter-gutter-width: $constant-size-gutter-width * 0.25;
+
+
+$regular-border: var(--mds-size-border-width-base, 1px) solid var(--mds-color-border, #{$constant-color-neutral-lighter});
+$input-border: var(--mds-size-border-width-base, 1px) solid var(--mds-color-input-border, #{$constant-color-neutral-base});
+$border-radius: var(--mds-size-border-radius-base, 4px);
+$surface-background: var(--mds-color-background-surface, #fff);
+$link-color: var(--mds-color-link-base, #1B75BB);
+$link-hover-color: var(--mds-color-link-hover, #15598e);
+$focus-color: var(--mds-color-input-focus, #5092fd);
+$disabled-input-color: var(--mds-color-input-disabled-field, rgba(176, 176, 176, 0.5));

package/src/scss/core/_containers.scss

@@ -1,3 +1,5 @@
+$wrapper-width: var(--mds-size-wrapper-width, 97%);
+
 html,
 body {
   background: var(--mds-color-background-body);
@@ -22,15 +24,15 @@ body {
   z-index: 1;
 }
 .mds-wrapper {
-  width: calc(var(--mds-size-wrapper-width) - #{$scss-var-size-gutter-width});
-  max-width: var(--mds-size-wrapper-max-width);
+  width: calc(#{$wrapper-width} - #{$constant-size-gutter-width});
+  max-width: var(--mds-size-wrapper-max-width, 1240px);
   margin: 0 auto;
 }
 
 .mds-surface {
-  background: var(--mds-color-background-surface);
-  @extend .mds-border;
-  @extend .mds-border-radius;
+  background: $surface-background;
+  border: $regular-border;
+  border-radius: $border-radius;
 }
 
 /*
@@ -38,6 +40,8 @@ body {
  * unless it is contained within a grid column less than half the width of its container
  */
 
+$surface-padding: var(--mds-size-surface-padding, 16px);
+
 @mixin calcSurfacePadding($bpname: null) {
   $classWithBp: null;
   @if ($bpname) {
@@ -47,19 +51,19 @@ body {
   @for $i from 1 through 12 {
     .mds-grid-col-#{$classWithBp}#{$i} & {
       @if ($i < 6) {
-        padding: var(--mds-size-surface-padding);
+        padding: $surface-padding;
       } @else {
-        padding: calc(var(--mds-size-surface-padding) * 2);
+        padding: calc($surface-padding * 2);
       }
     }
   }
 }
 
 .mds-surface__inner {
-  padding: var(--mds-size-surface-padding);
+  padding: $surface-padding;
 
-  @include mq($from: $scss-var-size-breakpoint-md) {
-    padding: calc(var(--mds-size-surface-padding) * 2);
+  @include mq($from: $constant-size-breakpoint-md) {
+    padding: calc($surface-padding * 2);
     @include calcSurfacePadding();
   }
 
@@ -74,7 +78,7 @@ body {
 
 .mds-fixed-container {
   width: 100%;
-  background: $scss-var-color-neutral-lightest;
+  background: $constant-color-neutral-lightest;
   position: fixed;
   left: 0;
   bottom: 0;
@@ -90,16 +94,16 @@ body {
   // Calculate space left between the wrapper and the edge of the screen on each side
   // so we can stretch the sticky container to make it appear full screen
   // I added 0.01% to stretch the container slightly more to avoid a tiny gap between the edge of the screen and the container
-  --space-between-wrapper-and-edge: (((100% - var(--mds-size-wrapper-width)) / 2) + 0.01%);
+  --space-between-wrapper-and-edge: (((100% - #{$wrapper-width}) / 2) + 0.01%);
 
   position: sticky;
 
   .mds-wrapper & {
-    width: calc(100% + (var(--space-between-wrapper-and-edge) * 2) + #{$scss-var-size-gutter-width});
-    margin-left: calc((var(--space-between-wrapper-and-edge) + #{$scss-var-size-half-gutter-width}) * -1);
-    margin-right: calc((var(--space-between-wrapper-and-edge) + #{$scss-var-size-half-gutter-width}) * -1);
+    width: calc(100% + (var(--space-between-wrapper-and-edge) * 2) + #{$constant-size-gutter-width});
+    margin-left: calc((var(--space-between-wrapper-and-edge) + #{$constant-size-half-gutter-width}) * -1);
+    margin-right: calc((var(--space-between-wrapper-and-edge) + #{$constant-size-half-gutter-width}) * -1);
 
-    @include mq($from: $scss-var-size-breakpoint-md) {
+    @include mq($from: $constant-size-breakpoint-md) {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
@@ -108,7 +112,7 @@ body {
 }
 
 .mds-branded-container {
-  @extend .mds-border-radius;
+  border-radius: $border-radius;
 
   & h1,
   & h2,
@@ -124,8 +128,8 @@ body {
   }
 
   &--1 {
-    background: var(--mds-color-branded-container-1-background);
-    color: var(--mds-color-branded-container-1-text);
+    background: var(--mds-color-branded-container-1-background, #000);
+    color: var(--mds-color-branded-container-1-text, #fff);
 
     & button {
       background: var(--mds-color-branded-container-1-button-bg-base);
@@ -154,6 +158,6 @@ body {
 }
 
 .mds-highlighted-container {
-  @extend .mds-border-radius;
-  background: $scss-var-color-neutral-lightest;
+  border-radius: $border-radius;
+  background: $constant-color-neutral-lightest;
 }

package/src/scss/core/_defaults.scss

@@ -1,5 +1,5 @@
 h1 {
-  margin-bottom: $scss-var-size-baseline * 6;
+  margin-bottom: $constant-size-baseline * 6;
 }
 
 h2,
@@ -13,11 +13,11 @@ ol,
 dl,
 blockquote,
 pre {
-  margin-bottom: $scss-var-size-baseline * 3;
+  margin-bottom: $constant-size-baseline * 3;
 }
 
 a {
-  --link-color: var(--mds-color-link-base);
+  --link-color: #{$link-color};
   --link-font-weight: var(--mds-font-weight-link-base);
   --link-text-decoration: none;
 
@@ -27,7 +27,7 @@ a {
 
   &:hover,
   &:focus {
-    --link-color: var(--mds-color-link-hover);
+    --link-color: #{$link-hover-color};
     --link-text-decoration: underline;
   }
 }