@madgex/design-system 5.11.2 → 6.0.0

package/src/helpers/spacing/README.md

@@ -1,10 +1,10 @@
 ## Space scale
 
-We are using a spacing scale based on a single tolen: `$mds-size-baseline = 0.25 rem | 4px`.
+We are using a spacing scale based on a single tolen: `$scss-var-size-baseline = 0.25 rem | 4px`.
 
 We multiply this token to create any spacing on the design system.
 
-Ex: `margin-bottom: $mds-size-baseline * 5`
+Ex: `margin-bottom: $scss-var-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:
 
-- `$mds-size-breakpoint-sm` : `400px`
-- `$mds-size-breakpoint-md` : `600px`
-- `$mds-size-breakpoint-lg` : `1008px`
-- `$mds-size-breakpoint-xl` : `1280px`
+- `$scss-var-size-breakpoint-sm` : `400px`
+- `$scss-var-size-breakpoint-md` : `600px`
+- `$scss-var-size-breakpoint-lg` : `1008px`
+- `$scss-var-size-breakpoint-xl` : `1280px`
 
 They can be overridden as necessary.
 
@@ -40,7 +40,7 @@ You can use `space-around` or `space-between` by adding the classes `mds-grid-ar
 
 For smaller (half width) gutters `mds-grid-small` can be used on the row element.
 
-I you want a column to only be as wide as it's content needs it to be, and allows other columns to grow to fill the remaining space use `.mds-grid-fit-content`.
+If you want a column to only be as wide as it's content needs it to be, and allows other columns to grow to fill the remaining space use `.mds-grid-fit-content` (also has breakpoint versions e.g. `.mds-grid-fit-content-md` )
 
 ### Reordering and Reversing
 

package/src/layout/grid/grid.njk

@@ -61,4 +61,11 @@
         <div class="mds-grid-col"><span>Column</span></div>
         <div class="mds-grid-col mds-grid-fit-content"><span class="mds-whitespace-nowrap">with content fit</span></div>
     </div>
+        <h2>With different breakpoints</h2>
+    <div class="mds-grid-row">
+        <div class="mds-grid-col"><span>Column</span></div>
+        <div class="mds-grid-col mds-grid-fit-content-lg"><span class="mds-whitespace-nowrap">with content fit lg</span></div>
+        <div class="mds-grid-col mds-grid-fit-content-md"><span class="mds-whitespace-nowrap">with content fit md</span></div>
+    </div>
+    <hr>
 </div>

package/src/scss/constants/__index.scss

@@ -0,0 +1,2 @@
+@import 'sd-tokens'; // file created by style dictionary
+@import 'vars';

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

@@ -0,0 +1,81 @@
+
+/**
+ * Do not edit directly
+ * Generated on Thu, 04 Jan 2024 14:57:02 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;
+
+$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
+    ),
+    '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
+      ),
+      '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
+      ),
+      '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
+      )
+    )
+  ),
+  'size': (
+    'baseline': $scss-var-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
+    ),
+    'gutter-width': $scss-var-size-gutter-width
+  )
+);

package/src/scss/constants/_vars.scss

@@ -0,0 +1,4 @@
+$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;

package/src/scss/core/_containers.scss

@@ -1,34 +1,34 @@
 html,
 body {
-  background: $mds-color-background-body;
+  background: var(--mds-color-background-body);
 }
 
 .mds-site-container {
-  width: $mds-size-container-width;
-  max-width: $mds-size-container-max-width;
-  min-width: $mds-size-container-min-width;
+  width: var(--mds-size-container-width);
+  max-width: var(--mds-size-container-max-width);
+  min-width: var(--mds-size-container-min-width);
   margin: 0 auto;
-  background: $mds-color-background-site-container;
-  box-shadow: $mds-shadow-site-container;
+  background: var(--mds-color-background-site-container);
+  box-shadow: var(--mds-shadow-site-container);
 }
 .mds-main {
-  background: $mds-color-background-main;
-  padding: $mds-size-main-padding;
-  margin: $mds-size-main-margin;
-  max-width: $mds-size-main-max-width;
-  border-radius: $mds-size-border-radius-main;
-  box-shadow: $mds-shadow-main;
+  background: var(--mds-color-background-main);
+  padding: var(--mds-size-main-padding);
+  margin: var(--mds-size-main-margin);
+  max-width: var(--mds-size-main-max-width);
+  border-radius: var(--mds-size-border-radius-main);
+  box-shadow: var(--mds-shadow-main);
   position: relative;
   z-index: 1;
 }
 .mds-wrapper {
-  width: calc(#{$mds-size-wrapper-width} - #{$mds-size-gutter-width});
-  max-width: $mds-size-wrapper-max-width;
+  width: calc(var(--mds-size-wrapper-width) - #{$scss-var-size-gutter-width});
+  max-width: var(--mds-size-wrapper-max-width);
   margin: 0 auto;
 }
 
 .mds-surface {
-  background: $mds-color-background-surface;
+  background: var(--mds-color-background-surface);
   @extend .mds-border;
   @extend .mds-border-radius;
 }
@@ -38,8 +38,6 @@ body {
  * unless it is contained within a grid column less than half the width of its container
  */
 
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
-
 @mixin calcSurfacePadding($bpname: null) {
   $classWithBp: null;
   @if ($bpname) {
@@ -49,19 +47,19 @@ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
   @for $i from 1 through 12 {
     .mds-grid-col-#{$classWithBp}#{$i} & {
       @if ($i < 6) {
-        padding: $mds-size-surface-padding;
+        padding: var(--mds-size-surface-padding);
       } @else {
-        padding: calc(#{$mds-size-surface-padding} * 2);
+        padding: calc(var(--mds-size-surface-padding) * 2);
       }
     }
   }
 }
 
 .mds-surface__inner {
-  padding: $mds-size-surface-padding;
+  padding: var(--mds-size-surface-padding);
 
-  @include mq($from: $mds-size-breakpoint-md) {
-    padding: calc(#{$mds-size-surface-padding} * 2);
+  @include mq($from: $scss-var-size-breakpoint-md) {
+    padding: calc(var(--mds-size-surface-padding) * 2);
     @include calcSurfacePadding();
   }
 
@@ -76,7 +74,7 @@ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 
 .mds-fixed-container {
   width: 100%;
-  background: $mds-color-neutral-lightest;
+  background: $scss-var-color-neutral-lightest;
   position: fixed;
   left: 0;
   bottom: 0;
@@ -88,21 +86,20 @@ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
   }
 }
 
-$mds-half-gutter-width: $mds-size-gutter-width * 0.5;
-// 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: math.div(100% - $mds-size-wrapper-width, 2) + 0.01;
-
 .mds-fixed-container--sticky {
+  // 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%);
+
   position: sticky;
 
   .mds-wrapper & {
-    width: calc(100% + #{$space-between-wrapper-and-edge * 2} + #{$mds-size-gutter-width});
-    margin-left: calc((#{$space-between-wrapper-and-edge} + #{$mds-half-gutter-width}) * -1);
-    margin-right: calc((#{$space-between-wrapper-and-edge} + #{$mds-half-gutter-width}) * -1);
+    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);
 
-    @include mq($from: $mds-size-breakpoint-md) {
+    @include mq($from: $scss-var-size-breakpoint-md) {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
@@ -127,15 +124,15 @@ $space-between-wrapper-and-edge: math.div(100% - $mds-size-wrapper-width, 2) + 0
   }
 
   &--1 {
-    background: $mds-color-branded-container-1-background;
-    color: $mds-color-branded-container-1-text;
+    background: var(--mds-color-branded-container-1-background);
+    color: var(--mds-color-branded-container-1-text);
   }
 }
 
 .mds-ad-container {
   &.mds-ad-container--leaderboard {
-    background: $mds-color-ad-container-leaderboard-background;
-    min-height: $mds-size-height-ad-container-leaderboard-min;
+    background: var(--mds-color-ad-container-leaderboard-background);
+    min-height: var(--mds-size-height-ad-container-leaderboard-min);
   }
   & > * {
     margin: 0 auto;
@@ -147,5 +144,5 @@ $space-between-wrapper-and-edge: math.div(100% - $mds-size-wrapper-width, 2) + 0
 
 .mds-highlighted-container {
   @extend .mds-border-radius;
-  background: $mds-color-neutral-lightest;
+  background: $scss-var-color-neutral-lightest;
 }

package/src/scss/core/_defaults.scss

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

package/src/scss/core/_grid.scss

@@ -1,21 +1,18 @@
 /* Source: https://github.com/kristoferjoseph/flexboxgrid */
 
-$mds-half-gutter-width: $mds-size-gutter-width * 0.5;
-$mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
-
 .mds-grid-row {
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: $mds-half-gutter-width * -1;
-  margin-left: $mds-half-gutter-width * -1;
+  margin-right: $scss-var-size-half-gutter-width * -1;
+  margin-left: $scss-var-size-half-gutter-width * -1;
 }
 
 .mds-grid-row.mds-grid-small {
-  margin-right: $mds-quarter-gutter-width * -1;
-  margin-left: $mds-quarter-gutter-width * -1;
+  margin-right: $scss-var-size-quarter-gutter-width * -1;
+  margin-left: $scss-var-size-quarter-gutter-width * -1;
 }
 
 .mds-grid-row.mds-grid-reverse {
@@ -54,12 +51,12 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
 .mds-grid-col-offset-12 {
   box-sizing: border-box;
   flex: 0 0 auto;
-  padding-right: $mds-half-gutter-width;
-  padding-left: $mds-half-gutter-width;
+  padding-right: $scss-var-size-half-gutter-width;
+  padding-left: $scss-var-size-half-gutter-width;
 
   .mds-grid-small & {
-    padding-right: $mds-quarter-gutter-width;
-    padding-left: $mds-quarter-gutter-width;
+    padding-right: $scss-var-size-quarter-gutter-width;
+    padding-left: $scss-var-size-quarter-gutter-width;
   }
 }
 
@@ -225,7 +222,7 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   flex-basis: auto;
 }
 
-@media only screen and (min-width: $mds-size-breakpoint-sm) {
+@media only screen and (min-width: $scss-var-size-breakpoint-sm) {
   .mds-grid-col-sm,
   .mds-grid-col-sm-1,
   .mds-grid-col-sm-2,
@@ -254,8 +251,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-col-sm-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $mds-half-gutter-width;
-    padding-left: $mds-half-gutter-width;
+    padding-right: $scss-var-size-half-gutter-width;
+    padding-left: $scss-var-size-half-gutter-width;
   }
 
   .mds-grid-col-sm {
@@ -414,9 +411,13 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-sm {
     order: 1;
   }
+  .mds-grid-fit-content-sm {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
-@media only screen and (min-width: $mds-size-breakpoint-md) {
+@media only screen and (min-width: $scss-var-size-breakpoint-md) {
   .mds-grid-col-md,
   .mds-grid-col-md-1,
   .mds-grid-col-md-2,
@@ -445,8 +446,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-col-md-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $mds-half-gutter-width;
-    padding-left: $mds-half-gutter-width;
+    padding-right: $scss-var-size-half-gutter-width;
+    padding-left: $scss-var-size-half-gutter-width;
   }
 
   .mds-grid-col-md {
@@ -605,9 +606,14 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-md {
     order: 1;
   }
+
+  .mds-grid-fit-content-md {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
-@media only screen and (min-width: $mds-size-breakpoint-lg) {
+@media only screen and (min-width: $scss-var-size-breakpoint-lg) {
   .mds-grid-col-lg,
   .mds-grid-col-lg-1,
   .mds-grid-col-lg-2,
@@ -636,8 +642,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-col-lg-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $mds-half-gutter-width;
-    padding-left: $mds-half-gutter-width;
+    padding-right: $scss-var-size-half-gutter-width;
+    padding-left: $scss-var-size-half-gutter-width;
   }
 
   .mds-grid-col-lg {
@@ -796,9 +802,14 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-lg {
     order: 1;
   }
+
+  .mds-grid-fit-content-lg {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
 }
 
-@media only screen and (min-width: $mds-size-breakpoint-xl) {
+@media only screen and (min-width: $scss-var-size-breakpoint-xl) {
   .mds-grid-col-xl,
   .mds-grid-col-xl-1,
   .mds-grid-col-xl-2,
@@ -827,8 +838,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-col-xl-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $mds-half-gutter-width;
-    padding-left: $mds-half-gutter-width;
+    padding-right: $scss-var-size-half-gutter-width;
+    padding-left: $scss-var-size-half-gutter-width;
   }
 
   .mds-grid-col-xl {
@@ -987,4 +998,8 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   .mds-grid-last-xl {
     order: 1;
   }
-}
+  .mds-grid-fit-content-xl {
+    flex-grow: 0;
+    flex-basis: auto;
+  }
+}

package/src/scss/core/_lists.scss

@@ -1,12 +1,12 @@
 .mds-list {
-  margin: 0 0 ($mds-size-baseline * 5) 0;
+  margin: 0 0 ($scss-var-size-baseline * 5) 0;
   padding: 0;
   list-style-type: none;
   list-style-position: inside;
 }
 .mds-list__item {
-  margin-bottom: $mds-size-baseline;
-  margin-left: $mds-size-baseline * 4;
+  margin-bottom: $scss-var-size-baseline;
+  margin-left: $scss-var-size-baseline * 4;
 
   &:last-child {
     margin-bottom: 0;
@@ -14,7 +14,7 @@
 }
 .mds-list--bullet,
 .mds-list--number {
-  margin-left: ($mds-size-baseline * 3);
+  margin-left: ($scss-var-size-baseline * 3);
 }
 
 .mds-list--bullet {
@@ -26,8 +26,8 @@
 }
 
 .mds-list--border {
-  border-left: 5px solid $mds-color-neutral-lightest;
-  padding-left: $mds-size-baseline * 5;
+  border-left: 5px solid $scss-var-color-neutral-lightest;
+  padding-left: $scss-var-size-baseline * 5;
   margin-left: 0;
 }
 
@@ -38,10 +38,10 @@
 .mds-list__key {
   @extend .mds-font-brevier;
   font-weight: bold;
-  margin-bottom: $mds-size-baseline;
+  margin-bottom: $scss-var-size-baseline;
 }
 .mds-list__value {
-  margin-bottom: $mds-size-baseline * 3;
+  margin-bottom: $scss-var-size-baseline * 3;
 
   &:last-child {
     margin-bottom: 0;
@@ -54,15 +54,15 @@
   display: inline-block;
   margin-bottom: 0;
   margin-left: 0;
-  margin-right: $mds-size-baseline * 2;
+  margin-right: $scss-var-size-baseline * 2;
 }
-.mds-list--pipe .mds-list__item:not(:last-child){
-  border-right: 1px solid $mds-color-neutral-light;
-  padding-right: $mds-size-baseline * 3;
+.mds-list--pipe .mds-list__item:not(:last-child) {
+  border-right: 1px solid $scss-var-color-neutral-light;
+  padding-right: $scss-var-size-baseline * 3;
 }
 
 .mds-list--multilevel .mds-list {
-  margin: ($mds-size-baseline * 2) 0 0 0;
+  margin: ($scss-var-size-baseline * 2) 0 0 0;
 }
 
 .mds-list--noindent {

package/src/scss/core/_message.scss

@@ -1,38 +1,38 @@
-.mds-message{
-    @extend .mds-padding-b3;
-    @extend .mds-border-radius;
-    @extend .mds-border;
+.mds-message {
+  @extend .mds-padding-b3;
+  @extend .mds-border-radius;
+  @extend .mds-border;
 
-    &.mds-message--error {
-        color:  $mds-color-status-error-darkest;
-        background-color: $mds-color-status-error-lightest;
-        border-color: $mds-color-status-error-base;
-    }
+  &.mds-message--error {
+    color: $scss-var-color-status-error-darkest;
+    background-color: $scss-var-color-status-error-lightest;
+    border-color: $scss-var-color-status-error-base;
+  }
 
-    &.mds-message--success {
-        color:  $mds-color-status-success-darkest;
-        background-color: $mds-color-status-success-lightest;
-        border-color: $mds-color-status-success-base;
-    }
+  &.mds-message--success {
+    color: $scss-var-color-status-success-darkest;
+    background-color: $scss-var-color-status-success-lightest;
+    border-color: $scss-var-color-status-success-base;
+  }
 
-    &.mds-message--info {
-        color:  $mds-color-status-info-darkest;
-        background-color: $mds-color-status-info-lightest;
-        border-color: $mds-color-status-info-base;
-    }
+  &.mds-message--info {
+    color: $scss-var-color-status-info-darkest;
+    background-color: $scss-var-color-status-info-lightest;
+    border-color: $scss-var-color-status-info-base;
+  }
 
-    & * {
-        color: inherit;
-    }
+  & * {
+    color: inherit;
+  }
 
-    & .mds-message__summary {
-        margin-bottom: 0;
-        & li:not(:last-child) {
-            @extend .mds-margin-bottom-b3;
-        }
-        & a {
-            color: inherit;
-            text-decoration: underline;
-        }
+  & .mds-message__summary {
+    margin-bottom: 0;
+    & li:not(:last-child) {
+      @extend .mds-margin-bottom-b3;
+    }
+    & a {
+      color: inherit;
+      text-decoration: underline;
     }
-}
+  }
+}

package/src/scss/core/_typography.scss

@@ -1,8 +1,8 @@
 body {
   @extend .mds-font-body-copy;
-  font-family: $mds-font-family-base;
-  font-weight: $mds-font-weight-base;
-  color: $mds-color-text-base;
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-base);
+  color: var(--mds-color-text-base);
 }
 
 h1,
@@ -12,28 +12,28 @@ h4,
 h5,
 h6,
 dl dt {
-  color: $mds-color-text-headers-base;
+  color: var(--mds-color-text-headers-base);
 }
 
 h1 {
   @extend .mds-font-trafalgar;
-  font-family: $mds-font-family-heading-1;
-  font-weight: $mds-font-weight-heading-1;
-  color: $mds-color-text-headers-1;
+  font-family: var(--mds-font-family-heading-1);
+  font-weight: var(--mds-font-weight-heading-1);
+  color: var(--mds-color-text-headers-1);
 }
 
 h2 {
   @extend .mds-font-double-pica;
-  font-family: $mds-font-family-heading-2;
-  font-weight: $mds-font-weight-heading-2;
-  color: $mds-color-text-headers-2;
+  font-family: var(--mds-font-family-heading-2);
+  font-weight: var(--mds-font-weight-heading-2);
+  color: var(--mds-color-text-headers-2);
 }
 
 h3 {
   @extend .mds-font-great-primer;
-  font-family: $mds-font-family-heading-3;
-  font-weight: $mds-font-weight-heading-3;
-  color: $mds-color-text-headers-3;
+  font-family: var(--mds-font-family-heading-3);
+  font-weight: var(--mds-font-weight-heading-3);
+  color: var(--mds-color-text-headers-3);
 }
 
 h4 {