@madgex/design-system 6.3.3 → 6.3.4

package/src/scss/core/_grid.scss

@@ -6,13 +6,13 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: $scss-var-size-half-gutter-width * -1;
-  margin-left: $scss-var-size-half-gutter-width * -1;
+  margin-right: $constant-size-half-gutter-width * -1;
+  margin-left: $constant-size-half-gutter-width * -1;
 }
 
 .mds-grid-row.mds-grid-small {
-  margin-right: $scss-var-size-quarter-gutter-width * -1;
-  margin-left: $scss-var-size-quarter-gutter-width * -1;
+  margin-right: $constant-size-quarter-gutter-width * -1;
+  margin-left: $constant-size-quarter-gutter-width * -1;
 }
 
 .mds-grid-row.mds-grid-reverse {
@@ -51,12 +51,12 @@
 .mds-grid-col-offset-12 {
   box-sizing: border-box;
   flex: 0 0 auto;
-  padding-right: $scss-var-size-half-gutter-width;
-  padding-left: $scss-var-size-half-gutter-width;
+  padding-right: $constant-size-half-gutter-width;
+  padding-left: $constant-size-half-gutter-width;
 
   .mds-grid-small & {
-    padding-right: $scss-var-size-quarter-gutter-width;
-    padding-left: $scss-var-size-quarter-gutter-width;
+    padding-right: $constant-size-quarter-gutter-width;
+    padding-left: $constant-size-quarter-gutter-width;
   }
 }
 
@@ -222,7 +222,7 @@
   flex-basis: auto;
 }
 
-@media only screen and (min-width: $scss-var-size-breakpoint-sm) {
+@media only screen and (min-width: $constant-size-breakpoint-sm) {
   .mds-grid-col-sm,
   .mds-grid-col-sm-1,
   .mds-grid-col-sm-2,
@@ -251,8 +251,8 @@
   .mds-grid-col-sm-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $scss-var-size-half-gutter-width;
-    padding-left: $scss-var-size-half-gutter-width;
+    padding-right: $constant-size-half-gutter-width;
+    padding-left: $constant-size-half-gutter-width;
   }
 
   .mds-grid-col-sm {
@@ -417,7 +417,7 @@
   }
 }
 
-@media only screen and (min-width: $scss-var-size-breakpoint-md) {
+@media only screen and (min-width: $constant-size-breakpoint-md) {
   .mds-grid-col-md,
   .mds-grid-col-md-1,
   .mds-grid-col-md-2,
@@ -446,8 +446,8 @@
   .mds-grid-col-md-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $scss-var-size-half-gutter-width;
-    padding-left: $scss-var-size-half-gutter-width;
+    padding-right: $constant-size-half-gutter-width;
+    padding-left: $constant-size-half-gutter-width;
   }
 
   .mds-grid-col-md {
@@ -613,7 +613,7 @@
   }
 }
 
-@media only screen and (min-width: $scss-var-size-breakpoint-lg) {
+@media only screen and (min-width: $constant-size-breakpoint-lg) {
   .mds-grid-col-lg,
   .mds-grid-col-lg-1,
   .mds-grid-col-lg-2,
@@ -642,8 +642,8 @@
   .mds-grid-col-lg-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $scss-var-size-half-gutter-width;
-    padding-left: $scss-var-size-half-gutter-width;
+    padding-right: $constant-size-half-gutter-width;
+    padding-left: $constant-size-half-gutter-width;
   }
 
   .mds-grid-col-lg {
@@ -809,7 +809,7 @@
   }
 }
 
-@media only screen and (min-width: $scss-var-size-breakpoint-xl) {
+@media only screen and (min-width: $constant-size-breakpoint-xl) {
   .mds-grid-col-xl,
   .mds-grid-col-xl-1,
   .mds-grid-col-xl-2,
@@ -838,8 +838,8 @@
   .mds-grid-col-xl-offset-12 {
     box-sizing: border-box;
     flex: 0 0 auto;
-    padding-right: $scss-var-size-half-gutter-width;
-    padding-left: $scss-var-size-half-gutter-width;
+    padding-right: $constant-size-half-gutter-width;
+    padding-left: $constant-size-half-gutter-width;
   }
 
   .mds-grid-col-xl {

package/src/scss/core/_lists.scss

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

package/src/scss/core/_message.scss

@@ -1,24 +1,24 @@
 .mds-message {
-  @extend .mds-padding-b3;
-  @extend .mds-border-radius;
-  @extend .mds-border;
+  padding: $constant-size-baseline * 3;
+  border-radius: $border-radius;
+  border: $regular-border;
 
   &.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;
+    color: $constant-color-status-error-darkest;
+    background-color: $constant-color-status-error-lightest;
+    border-color: $constant-color-status-error-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;
+    color: $constant-color-status-success-darkest;
+    background-color: $constant-color-status-success-lightest;
+    border-color: $constant-color-status-success-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: $constant-color-status-info-darkest;
+    background-color: $constant-color-status-info-lightest;
+    border-color: $constant-color-status-info-base;
   }
 
   & * {
@@ -32,7 +32,7 @@
   & .mds-message__summary {
     margin-bottom: 0;
     & li:not(:last-child) {
-      @extend .mds-margin-bottom-b3;
+      margin-bottom: $constant-size-baseline * 3;
     }
   }
 }

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: $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,
 ) !default;
 
 // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display

package/src/scss/helpers/_borders.scss

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

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

@@ -1,12 +1,12 @@
 .mds-edited-text {
   & ul,
   & ol {
-    margin: 0 0 ($scss-var-size-baseline * 5) ($scss-var-size-baseline * 3);
+    margin: 0 0 ($constant-size-baseline * 5) ($constant-size-baseline * 3);
     padding: 0;
     list-style-position: outside;
     & ul,
     & ol {
-      margin: ($scss-var-size-baseline * 2) 0 0 0;
+      margin: ($constant-size-baseline * 2) 0 0 0;
     }
   }
   & ul {
@@ -16,14 +16,14 @@
     list-style-type: decimal;
   }
   & li {
-    margin-bottom: $scss-var-size-baseline;
-    margin-left: $scss-var-size-baseline * 4;
+    margin-bottom: $constant-size-baseline;
+    margin-left: $constant-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: $scss-var-size-baseline * 4;
+    margin-bottom: $constant-size-baseline * 4;
   }
 }

package/src/scss/helpers/_font-types.scss

@@ -9,15 +9,15 @@ $breakpoint-names: map-keys(map-remove($breakpoints, 'xl'));
 // .mds-font-canon{
 //   font-size: 28px;
 //   line-height: 1.15;
-//   @media (min-width: $scss-var-size-breakpoint-sm){
+//   @media (min-width: $constant-size-breakpoint-sm){
 //     font-size: 32px;
 //     line-height: 1.13;
 //   }
-//   @media (min-width: $scss-var-size-breakpoint-md){
+//   @media (min-width: $constant-size-breakpoint-md){
 //     font-size: 52px;
 //     line-height: 1.08;
 //   }
-//   @media (min-width: $scss-var-size-breakpoint-lg){
+//   @media (min-width: $constant-size-breakpoint-lg){
 //     font-size: 44px;
 //     line-height: 1.1;
 //   }

package/src/scss/helpers/_spacing.scss

@@ -5,10 +5,10 @@ $positions: top, right, bottom, left;
 
 @for $i from 0 through 10 {
   .mds-padding-b#{$i} {
-    padding: $scss-var-size-baseline * $i;
+    padding: $constant-size-baseline * $i;
   }
   .mds-margin-b#{$i} {
-    margin: $scss-var-size-baseline * $i;
+    margin: $constant-size-baseline * $i;
   }
 }
 
@@ -16,10 +16,10 @@ $positions: top, right, bottom, left;
   @each $bpname, $value in $breakpoints {
     @include mq($from: $bpname) {
       .mds-padding-#{$bpname}-b#{$i} {
-        padding: $scss-var-size-baseline * $i;
+        padding: $constant-size-baseline * $i;
       }
       .mds-margin-#{$bpname}-b#{$i} {
-        margin: $scss-var-size-baseline * $i;
+        margin: $constant-size-baseline * $i;
       }
     }
   }
@@ -28,28 +28,28 @@ $positions: top, right, bottom, left;
 @for $i from 0 through 10 {
   @each $position in $positions {
     .mds-padding-#{$position}-b#{$i} {
-      padding-#{$position}: $scss-var-size-baseline * $i;
+      padding-#{$position}: $constant-size-baseline * $i;
     }
     .mds-margin-#{$position}-b#{$i} {
-      margin-#{$position}: $scss-var-size-baseline * $i;
+      margin-#{$position}: $constant-size-baseline * $i;
     }
   }
   .mds-padding-x-b#{$i} {
-    padding-left: $scss-var-size-baseline * $i;
-    padding-right: $scss-var-size-baseline * $i;
+    padding-left: $constant-size-baseline * $i;
+    padding-right: $constant-size-baseline * $i;
   }
   .mds-padding-y-b#{$i} {
-    padding-top: $scss-var-size-baseline * $i;
-    padding-bottom: $scss-var-size-baseline * $i;
+    padding-top: $constant-size-baseline * $i;
+    padding-bottom: $constant-size-baseline * $i;
   }
 
   .mds-margin-x-b#{$i} {
-    margin-left: $scss-var-size-baseline * $i;
-    margin-right: $scss-var-size-baseline * $i;
+    margin-left: $constant-size-baseline * $i;
+    margin-right: $constant-size-baseline * $i;
   }
   .mds-margin-y-b#{$i} {
-    margin-top: $scss-var-size-baseline * $i;
-    margin-bottom: $scss-var-size-baseline * $i;
+    margin-top: $constant-size-baseline * $i;
+    margin-bottom: $constant-size-baseline * $i;
   }
 }
 
@@ -58,10 +58,10 @@ $positions: top, right, bottom, left;
     @each $bpname, $value in $breakpoints {
       @include mq($from: $bpname) {
         .mds-padding-#{$position}-#{$bpname}-b#{$i} {
-          padding-#{$position}: $scss-var-size-baseline * $i;
+          padding-#{$position}: $constant-size-baseline * $i;
         }
         .mds-margin-#{$position}-#{$bpname}-b#{$i} {
-          margin-#{$position}: $scss-var-size-baseline * $i;
+          margin-#{$position}: $constant-size-baseline * $i;
         }
       }
     }
@@ -69,21 +69,21 @@ $positions: top, right, bottom, left;
   @each $bpname, $value in $breakpoints {
     @include mq($from: $bpname) {
       .mds-padding-x-#{$bpname}-b#{$i} {
-        padding-left: $scss-var-size-baseline * $i;
-        padding-right: $scss-var-size-baseline * $i;
+        padding-left: $constant-size-baseline * $i;
+        padding-right: $constant-size-baseline * $i;
       }
       .mds-padding-y-#{$bpname}-b#{$i} {
-        padding-top: $scss-var-size-baseline * $i;
-        padding-bottom: $scss-var-size-baseline * $i;
+        padding-top: $constant-size-baseline * $i;
+        padding-bottom: $constant-size-baseline * $i;
       }
 
       .mds-margin-x-#{$bpname}-b#{$i} {
-        margin-left: $scss-var-size-baseline * $i;
-        margin-right: $scss-var-size-baseline * $i;
+        margin-left: $constant-size-baseline * $i;
+        margin-right: $constant-size-baseline * $i;
       }
       .mds-margin-y-#{$bpname}-b#{$i} {
-        margin-top: $scss-var-size-baseline * $i;
-        margin-bottom: $scss-var-size-baseline * $i;
+        margin-top: $constant-size-baseline * $i;
+        margin-bottom: $constant-size-baseline * $i;
       }
     }
   }

package/src/tokens/_config.js

@@ -28,7 +28,7 @@ const config = {
     'scss-variables': {
       transforms: ['attribute/cti', 'name/cti/kebab'],
       buildPath: `${path.resolve(__dirname, '../scss/constants/')}/`,
-      prefix: 'scss-var',
+      prefix: 'constant',
       files: [
         {
           destination: '_sd-tokens.scss',

package/src/tokens/_constants.json

@@ -1,14 +1,6 @@
 {
   "color": {
     "neutral": {
-      "white": {
-        "value" : "#FFFFFF",
-        "private": true
-      },
-      "black": {
-        "value" : "#000000",
-        "private": true
-      },
       "base": {
         "value" : "#707070",
         "private": true

package/src/tokens/color.json

@@ -55,13 +55,13 @@
     },
     "background": {
       "body": {
-        "value" : "{color.neutral.white.value}"
+        "value" : "#fff"
       },
       "site-container": {
         "value" : "{color.neutral.lightest.value}"
       },
       "surface": {
-        "value" : "{color.neutral.white.value}"
+        "value" : "#fff"
       },
       "main": {
         "value" : "rgba(0,0,0,0)"
@@ -72,7 +72,7 @@
         "value" : "#343433"
       },
       "invert": {
-        "value" : "{color.neutral.white.value}"
+        "value" : "#fff"
       },
       "headers": {
         "1": {
@@ -189,7 +189,7 @@
     },
     "input": {
       "checked": {
-        "value" : "{color.neutral.black.value}"
+        "value" : "#000"
       },
       "border": {
         "value" : "{color.neutral.base.value}"

package/src/tokens/custom.json

@@ -3,7 +3,7 @@
     "badge": {
       "1": {
         "background": { 
-          "value" : "{color.neutral.black.value}" 
+          "value" : "#000" 
         },
         "color": { 
           "value" : "#fff" 

package/src/tokens/effects.json

@@ -1,8 +1,5 @@
 {
   "shadow": {
-    "base": {
-      "value" : "0 2px 5px 0 {color.neutral.lighter.value}"
-    },
     "site-container": {
       "value": "none"
     },