@madgex/design-system 5.11.2 → 6.0.0

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;
   }
 }

package/src/scss/helpers/_floats.scss

@@ -1,4 +1,3 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $positions: left, right, none;
 
 @each $position in $positions {

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

@@ -1,5 +1,7 @@
-// getting the font-types from the tokens
-$font-types: map-get(map-get($tokens, 'font'), 'type');
+$font-types: 'canon', 'trafalgar', 'paragon', 'double-pica', 'great-primer', 'body-copy', 'body-copy-bulk', 'pica',
+  'long-primer', 'brevier', 'minion';
+
+$breakpoint-names: map-keys(map-remove($breakpoints, 'xl'));
 
 // loop will create all the classes for the font types in the tokens array
 // it will also generate the media queries related to each font type, using the mq helper
@@ -7,30 +9,28 @@ $font-types: map-get(map-get($tokens, 'font'), 'type');
 // .mds-font-canon{
 //   font-size: 28px;
 //   line-height: 1.15;
-//   @media (min-width: $mds-size-breakpoint-sm){
+//   @media (min-width: $scss-var-size-breakpoint-sm){
 //     font-size: 32px;
 //     line-height: 1.13;
 //   }
-//   @media (min-width: $mds-size-breakpoint-md){
+//   @media (min-width: $scss-var-size-breakpoint-md){
 //     font-size: 52px;
 //     line-height: 1.08;
 //   }
-//   @media (min-width: $mds-size-breakpoint-lg){
+//   @media (min-width: $scss-var-size-breakpoint-lg){
 //     font-size: 44px;
 //     line-height: 1.1;
 //   }
 // }
-@each $typename, $typevalue in $font-types {
+@each $typename in $font-types {
   .mds-font-#{$typename} {
-    @each $bpname, $props in $typevalue {
-      @if $bpname == 'default' {
-        font-size: px2rem(map-get($props, 'size'));
-        line-height: map-get($props, 'line-height');
-      } @else {
-        @include mq($from: $bpname) {
-          font-size: px2rem(map-get($props, 'size'));
-          line-height: map-get($props, 'line-height');
-        }
+    @each $bpname in $breakpoint-names {
+      font-size: var(--mds-font-type-#{$typename}-default-size);
+      line-height: var(--mds-font-type-#{$typename}-default-line-height);
+
+      @include mq($from: $bpname) {
+        font-size: var(--mds-font-type-#{$typename}-#{$bpname}-size);
+        line-height: var(--mds-font-type-#{$typename}-#{$bpname}-line-height);
       }
     }
   }

package/src/scss/helpers/_spacing.scss

@@ -1,4 +1,3 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $positions: top, right, bottom, left;
 
 // There are 2 loops as the more specific classes with positions have to be declared before the shorthand ones
@@ -6,10 +5,10 @@ $positions: top, right, bottom, left;
 
 @for $i from 0 through 10 {
   .mds-padding-b#{$i} {
-    padding: $mds-size-baseline * $i;
+    padding: $scss-var-size-baseline * $i;
   }
   .mds-margin-b#{$i} {
-    margin: $mds-size-baseline * $i;
+    margin: $scss-var-size-baseline * $i;
   }
 }
 
@@ -17,10 +16,10 @@ $positions: top, right, bottom, left;
   @each $bpname, $value in $breakpoints {
     @include mq($from: $bpname) {
       .mds-padding-#{$bpname}-b#{$i} {
-        padding: $mds-size-baseline * $i;
+        padding: $scss-var-size-baseline * $i;
       }
       .mds-margin-#{$bpname}-b#{$i} {
-        margin: $mds-size-baseline * $i;
+        margin: $scss-var-size-baseline * $i;
       }
     }
   }
@@ -29,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}: $mds-size-baseline * $i;
+      padding-#{$position}: $scss-var-size-baseline * $i;
     }
     .mds-margin-#{$position}-b#{$i} {
-      margin-#{$position}: $mds-size-baseline * $i;
+      margin-#{$position}: $scss-var-size-baseline * $i;
     }
   }
   .mds-padding-x-b#{$i} {
-    padding-left: $mds-size-baseline * $i;
-    padding-right: $mds-size-baseline * $i;
+    padding-left: $scss-var-size-baseline * $i;
+    padding-right: $scss-var-size-baseline * $i;
   }
   .mds-padding-y-b#{$i} {
-    padding-top: $mds-size-baseline * $i;
-    padding-bottom: $mds-size-baseline * $i;
+    padding-top: $scss-var-size-baseline * $i;
+    padding-bottom: $scss-var-size-baseline * $i;
   }
 
   .mds-margin-x-b#{$i} {
-    margin-left: $mds-size-baseline * $i;
-    margin-right: $mds-size-baseline * $i;
+    margin-left: $scss-var-size-baseline * $i;
+    margin-right: $scss-var-size-baseline * $i;
   }
   .mds-margin-y-b#{$i} {
-    margin-top: $mds-size-baseline * $i;
-    margin-bottom: $mds-size-baseline * $i;
+    margin-top: $scss-var-size-baseline * $i;
+    margin-bottom: $scss-var-size-baseline * $i;
   }
 }
 
@@ -59,35 +58,33 @@ $positions: top, right, bottom, left;
     @each $bpname, $value in $breakpoints {
       @include mq($from: $bpname) {
         .mds-padding-#{$position}-#{$bpname}-b#{$i} {
-          padding-#{$position}: $mds-size-baseline * $i;
+          padding-#{$position}: $scss-var-size-baseline * $i;
         }
         .mds-margin-#{$position}-#{$bpname}-b#{$i} {
-          margin-#{$position}: $mds-size-baseline * $i;
+          margin-#{$position}: $scss-var-size-baseline * $i;
         }
       }
     }
   }
   @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;
+      }
+      .mds-padding-y-#{$bpname}-b#{$i} {
+        padding-top: $scss-var-size-baseline * $i;
+        padding-bottom: $scss-var-size-baseline * $i;
+      }
 
-  .mds-padding-x-#{$bpname}-b#{$i} {
-    padding-left: $mds-size-baseline * $i;
-    padding-right: $mds-size-baseline * $i;
-  }
-  .mds-padding-y-#{$bpname}-b#{$i} {
-    padding-top: $mds-size-baseline * $i;
-    padding-bottom: $mds-size-baseline * $i;
-  }
-
-  .mds-margin-x-#{$bpname}-b#{$i} {
-    margin-left: $mds-size-baseline * $i;
-    margin-right: $mds-size-baseline * $i;
-  }
-  .mds-margin-y-#{$bpname}-b#{$i} {
-    margin-top: $mds-size-baseline * $i;
-    margin-bottom: $mds-size-baseline * $i;
+      .mds-margin-x-#{$bpname}-b#{$i} {
+        margin-left: $scss-var-size-baseline * $i;
+        margin-right: $scss-var-size-baseline * $i;
+      }
+      .mds-margin-y-#{$bpname}-b#{$i} {
+        margin-top: $scss-var-size-baseline * $i;
+        margin-bottom: $scss-var-size-baseline * $i;
+      }
+    }
   }
 }
-}
-
-}

package/src/scss/helpers/_text-align.scss

@@ -1,4 +1,3 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $positions: left, right, center;
 
 @each $position in $positions {

package/src/scss/helpers/_vertical-align.scss

@@ -1,5 +1,3 @@
-
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 $positions: top, middle, bottom;
 
 @each $position in $positions {

package/src/scss/helpers/_width-height.scss

@@ -1,10 +1,8 @@
-$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
-
 .mds-width-full {
-    width: 100%;
+  width: 100%;
 }
 .mds-width-auto {
-    width: auto;
+  width: auto;
 }
 
 @each $bpname, $value in $breakpoints {
@@ -13,11 +11,11 @@ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
       width: 100%;
     }
     .mds-width-#{$bpname}-auto {
-        width: auto;
+      width: auto;
     }
   }
 }
 
 .mds-height-full {
   height: 100%;
-}
+}

package/src/scss/import.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@import 'constants/_index';
 @import 'vendor/normalize';
 @import 'resets/_index';
 @import 'functions/_index';

package/src/scss/index.scss

@@ -1,3 +1 @@
-@import '~../../dist/_tokens/scss/tokens';
-
 @import './import.scss';

package/src/tokens/_config.js

@@ -5,27 +5,40 @@ const config = {
   platforms: {
     'css-variables': {
       // transformGroup: 'css',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'css/rawData'],
+      transforms: [
+        'attribute/cti',
+        'name/cti/kebab',
+        'time/seconds',
+        'content/icon',
+        'color/css',
+        'css/rawData',
+        'custom/pxToRem',
+      ],
       buildPath: `${path.resolve(__dirname, '../../dist/_tokens/css/')}/`,
       prefix: 'mds',
       files: [
         {
           destination: '_tokens.css',
           format: 'css/variables',
+          filter: 'removePrivate',
         },
       ],
     },
     'scss-variables': {
-      // transformGroup: 'web',
-      // transforms: ['size/px']
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css', 'css/rawData'],
-      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/scss/')}/`,
-      prefix: 'mds',
+      transforms: ['attribute/cti', 'name/cti/kebab'],
+      buildPath: `${path.resolve(__dirname, '../scss/constants/')}/`,
+      prefix: 'scss-var',
       files: [
         {
-          destination: '_tokens.scss',
-          // format: 'scss/variables',
+          destination: '_sd-tokens.scss',
           format: 'scss/map-deep',
+          options: {
+            themeable: false,
+          },
+          filter(token) {
+            // only keep "private" tokens aka constants
+            return !!(token && token.private);
+          },
         },
       ],
     },
@@ -67,7 +80,7 @@ const config = {
     //   ],
     // },
     'js-module': {
-      transformGroup: 'js',
+      transforms: ['attribute/cti', 'name/cti/pascal', 'custom/pxToRem'],
       buildPath: `${path.resolve(__dirname, '../../dist/_tokens/js/')}/`,
       prefix: 'mds',
       files: [

package/src/tokens/_constants.json

@@ -0,0 +1,130 @@
+{
+  "color": {
+    "neutral": {
+      "white": {
+        "value" : "#FFFFFF",
+        "private": true
+      },
+      "black": {
+        "value" : "#000000",
+        "private": true
+      },
+      "base": {
+        "value" : "#707070",
+        "private": true
+      },
+      "light": {
+        "value" : "#949494",
+        "private": true
+      },
+      "lighter": {
+        "value" : "#DDDDDD",
+        "private": true
+      },
+      "lightest": {
+        "value" : "#F8F8F8",
+        "private": true
+      },
+      "darker": {
+        "value" : "#333333",
+        "private": true
+      }
+    },
+    "status": {
+      "error": {
+        "light": {
+          "value" : "#fd0826",
+          "private": true
+        },
+        "lightest": {
+          "value" : "#ffe3e6",
+          "private": true
+        },
+        "dark": {
+          "value" : "#d0021b",
+          "private": true
+        },
+        "darkest": {
+          "value" : "#ae0216",
+          "private": true
+        },
+        "base": {
+          "value" : "#e1021d",
+          "private": true
+        }
+      },
+      "success": {
+        "light": {
+          "value" : "#6ac52d",
+          "private": true
+        },
+        "lightest": {
+          "value" : "#f0faea",
+          "private": true
+        },
+        "dark": {
+          "value" : "#549b24",
+          "private": true
+        },
+        "darkest": {
+          "value" : "#40791B",
+          "private": true
+        },
+        "base": {
+          "value" : "#5ba927",
+          "private": true
+        }
+      },
+      "info": {
+        "light": {
+          "value" : "#ffc442",
+          "private": true
+        },
+        "lightest": {
+          "value" : "#fff7e5",
+          "private": true
+        },
+        "dark": {
+          "value" : "#f4aa08",
+          "private": true
+        },
+        "darkest": {
+          "value" : "#946500",
+          "private": true
+        },
+        "base": {
+          "value" : "#ffb411",
+          "private": true
+        }
+      }
+    }
+  },
+  "size": {
+    "baseline": { 
+      "value": "4px",
+      "private": true
+    },
+    "breakpoint": {
+      "sm": { 
+        "value": "400px",
+        "private": true
+      },
+      "md": { 
+        "value": "600px",
+        "private": true
+      },
+      "lg": { 
+        "value": "1008px",
+        "private": true
+      },
+      "xl": { 
+        "value": "1280px",
+        "private": true
+      }
+    },
+    "gutter-width": { 
+      "value": "20px",
+      "private": true
+    }
+  }
+}