@madgex/design-system 5.11.3 → 6.0.1

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 {
@@ -420,7 +417,7 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   }
 }
 
-@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,
@@ -449,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 {
@@ -616,7 +613,7 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   }
 }
 
-@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,
@@ -645,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 {
@@ -812,7 +809,7 @@ $mds-quarter-gutter-width: $mds-size-gutter-width * 0.25;
   }
 }
 
-@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,
@@ -841,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 {

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 {

package/src/scss/functions/__index.scss

@@ -1,4 +1,2 @@
 @import 'media-queries';
-@import 'color';
-@import 'px2rem';
 @import 'text-contrast';

package/src/scss/functions/_media-queries.scss

@@ -1,9 +1,9 @@
 // Pass our breakpoints and static breakpoint definitions through to sass-mq.
 $mq-breakpoints: (
-  sm: $mds-size-breakpoint-sm,
-  md: $mds-size-breakpoint-md,
-  lg: $mds-size-breakpoint-lg,
-  xl: $mds-size-breakpoint-xl
+  sm: $scss-var-size-breakpoint-sm,
+  md: $scss-var-size-breakpoint-md,
+  lg: $scss-var-size-breakpoint-lg,
+  xl: $scss-var-size-breakpoint-xl,
 ) !default;
 
 // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display

package/src/scss/functions/_text-contrast.scss

@@ -1,17 +1,17 @@
-
 @function text-contrast($bg-color) {
   $color-text-base-brightness: round(
-    (red($mds-color-text-base) * 299) + (green($mds-color-text-base) * 587) + (blue($mds-color-text-base) * 114) / 1000
+    (red(var(--mds-color-text-base)) * 299) + (green(var(--mds-color-text-base)) * 587) +
+      (blue(var(--mds-color-text-base)) * 114) / 1000
   );
   $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
   $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
 
-  $text-color-dark: $mds-color-text-base !default;
-  $text-color-light: $mds-color-text-invert !default;
+  $text-color-dark: var(--mds-color-text-base) !default;
+  $text-color-light: var(--mds-color-text-invert) !default;
 
   @if abs($color-text-base-brightness) >= ($light-color/2) {
-    $text-color-dark: $mds-color-text-invert;
-    $text-color-light: $mds-color-text-base;
+    $text-color-dark: var(--mds-color-text-invert);
+    $text-color-light: var(--mds-color-text-base);
   }
 
   @if abs($color-brightness) < ($light-color/2) {
@@ -20,4 +20,3 @@
     @return $text-color-dark;
   }
 }
-    

package/src/scss/helpers/_borders.scss

@@ -1,9 +1,8 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $positions: top, right, bottom, left;
 $corners: top-left, top-right, bottom-right, bottom-left;
 
 .mds-border {
-  border: $mds-size-border-width-base solid $mds-color-border;
+  border: var(--mds-size-border-width-base) solid var(--mds-color-border);
 }
 
 .mds-border-none {
@@ -13,7 +12,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
 @each $bpname, $value in $breakpoints {
   @include mq($from: $bpname) {
     .mds-border-#{$bpname} {
-      border: $mds-size-border-width-base solid $mds-color-border;
+      border: var(--mds-size-border-width-base) solid var(--mds-color-border);
     }
   }
 }
@@ -28,7 +27,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
 
 @each $position in $positions {
   .mds-border-#{$position} {
-    border-#{$position}: $mds-size-border-width-base solid $mds-color-border;
+    border-#{$position}: var(--mds-size-border-width-base) solid var(--mds-color-border);
   }
 }
 
@@ -42,7 +41,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
   @include mq($from: $bpname) {
     @each $position in $positions {
       .mds-border-#{$bpname}-#{$position} {
-        border-#{$position}: $mds-size-border-width-base solid $mds-color-border;
+        border-#{$position}: var(--mds-size-border-width-base) solid var(--mds-color-border);
       }
     }
   }
@@ -60,41 +59,9 @@ $corners: top-left, top-right, bottom-right, bottom-left;
 
 // border radius
 .mds-border-radius {
-  border-radius: $mds-size-border-radius-base;
+  border-radius: var(--mds-size-border-radius-base);
 }
 
 .mds-border-radius-none {
   border-radius: 0;
 }
-
-// 0/4 corners
-// @each $bpname, $value in $breakpoints {
-//   @include mq($from: $bpname) {
-//     .mds-border-radius-#{$bpname} {
-//       border-radius: $mds-size-border-radius-base ;
-//     }
-//     .mds-border-radius-#{$bpname}-none {
-//       border-radius: 0;
-//     }
-//   }
-// }
-
-// 1 corner
-// @each $corner in $corners {
-//   .mds-border-radius-#{$corner} {
-//     border-#{$corner}-radius: $mds-size-border-radius-base ;
-//   }
-// }
-
-// @each $bpname, $value in $breakpoints {
-//   @include mq($from: $bpname) {
-//     @each $corner in $corners {
-//       .mds-border-radius-#{$bpname}-#{$corner} {
-//         border-#{$corner}-radius: $mds-size-border-radius-base ;
-//       }
-//       .mds-border-radius-#{$bpname}-#{$corner}-none {
-//         border-#{$corner}-radius: 0;
-//       }
-//     }
-//   }
-// }

package/src/scss/helpers/_display.scss

@@ -1,4 +1,3 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $types: block, inline, inline-block, none;
 
 @each $type in $types {

package/src/scss/helpers/_edited-text.scss

@@ -1,12 +1,12 @@
 .mds-edited-text {
   & ul,
   & ol {
-    margin: 0 0 ($mds-size-baseline * 5) ($mds-size-baseline * 3);
+    margin: 0 0 ($scss-var-size-baseline * 5) ($scss-var-size-baseline * 3);
     padding: 0;
     list-style-position: outside;
     & ul,
     & ol {
-      margin: ($mds-size-baseline * 2) 0 0 0;
+      margin: ($scss-var-size-baseline * 2) 0 0 0;
     }
   }
   & ul {
@@ -16,14 +16,14 @@
     list-style-type: decimal;
   }
   & li {
-    margin-bottom: $mds-size-baseline;
-    margin-left: $mds-size-baseline * 4;
+    margin-bottom: $scss-var-size-baseline;
+    margin-left: $scss-var-size-baseline * 4;
   }
 }
 .mds-edited-text.mds-font-body-copy-bulk,
 .mds-font-body-copy-bulk .mds-edited-text,
 .mds-edited-text .mds-font-body-copy-bulk {
   & p {
-    margin-bottom: $mds-size-baseline * 4;
+    margin-bottom: $scss-var-size-baseline * 4;
   }
 }