@madgex/design-system 5.11.3 → 6.0.1

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

@@ -1,31 +1,45 @@
 const path = require('path');
 
 const config = {
-  source: [path.resolve(__dirname, '../tokens/*.json')],
+  // This source path needs to be in posix because combineJSON util inside style dictionary only accepts that
+  source: [path.resolve(__dirname, '../tokens/*.json').split(path.sep).join(path.posix.sep)],
   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 +81,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
+    }
+  }
+}

package/src/tokens/color.json

@@ -53,59 +53,6 @@
         }
       }
     },
-    "status": {
-      "error": {
-        "light": {
-          "value" : "#fd0826"
-        },
-        "lightest": {
-          "value" : "#ffe3e6"
-        },
-        "dark": {
-          "value" : "#d0021b"
-        },
-        "darkest": {
-          "value" : "#ae0216"
-        },
-        "base": {
-          "value" : "#e1021d"
-        }
-      },
-      "success": {
-        "light": {
-          "value" : "#6ac52d"
-        },
-        "lightest": {
-          "value" : "#f0faea"
-        },
-        "dark": {
-          "value" : "#549b24"
-        },
-        "darkest": {
-          "value" : "#40791B"
-        },
-        "base": {
-          "value" : "#5ba927"
-        }
-      },
-      "info": {
-        "light": {
-          "value" : "#ffc442"
-        },
-        "lightest": {
-          "value" : "#fff7e5"
-        },
-        "dark": {
-          "value" : "#f4aa08"
-        },
-        "darkest": {
-          "value" : "#946500"
-        },
-        "base": {
-          "value" : "#ffb411"
-        }
-      }
-    },
     "background": {
       "body": {
         "value" : "{color.neutral.white.value}"
@@ -120,29 +67,6 @@
         "value" : "rgba(0,0,0,0)"
       }
     },
-    "neutral": {
-      "white": {
-        "value" : "#FFFFFF"
-      },
-      "black": {
-        "value" : "#000000"
-      },
-      "base": {
-        "value" : "#707070"
-      },
-      "light": {
-        "value" : "#949494"
-      },
-      "lighter": {
-        "value" : "#DDDDDD"
-      },
-      "lightest": {
-        "value" : "#F8F8F8"
-      },
-      "darker": {
-        "value" : "#333333"
-      }
-    },
     "text": {
       "base": {
         "value" : "#343433"
@@ -281,6 +205,14 @@
           "value" : "{color.pill.text.base.value}"
         }
       }
+    },
+    "new-badge": {
+      "background": {
+        "value" : "#40791B"
+      },
+      "text": {
+        "value" : "#fff"
+      }
     }
   }
 }

package/src/tokens/custom.json

@@ -8,14 +8,6 @@
         "color": { 
           "value" : "#fff" 
         }
-      },
-      "2": {
-        "background": { 
-          "value" : "#40791B" 
-        },
-        "color": { 
-          "value" : "#fff" 
-        }
       }
     },
     "card": {

package/src/tokens/size.json

@@ -1,12 +1,5 @@
 {
   "size": {
-    "baseline": { "value": "4px" },
-    "breakpoint": {
-      "sm": { "value": "400px" },
-      "md": { "value": "600px" },
-      "lg": { "value": "1008px" },
-      "xl": { "value": "1280px" }
-    },
     "border": {
       "width": {
         "base": {
@@ -28,7 +21,6 @@
         }
       }
     },
-    "gutter-width": { "value": "20px" },
     "container": {
       "width": {
         "value": "100%"
@@ -64,14 +56,6 @@
         "value": "0 auto"
       }
     },
-    "icon": {
-      "default": { "value": "1em" },
-      "sm": { "value": "16px" },
-      "md": { "value": "24px" },
-      "lg": { "value": "32px" },
-      "xl": { "value": "48px" },
-      "xxl": { "value": "72px" }
-    },
     "height": {
       "ad-container": {
         "leaderboard": {

package/src/tokens/typography.json

@@ -61,7 +61,9 @@
     "type": {
       "canon": {
         "default": {
-          "size": { "value": "28px" },
+          "size": { 
+            "value": "28px"
+          },
           "line-height": { "value": "1.15" }
         },
         "sm": {

package/tasks/registerTransforms.js

@@ -1,4 +1,4 @@
-function registerTransforms(StyleDictionary) {
+function registerTransforms(StyleDictionary, tokenBaseFontSize) {
   return new Promise((resolve) => {
     StyleDictionary.registerTransform({
       name: 'css/rawData',
@@ -10,6 +10,33 @@ function registerTransforms(StyleDictionary) {
         return prop.rawData;
       },
     });
+    StyleDictionary.registerTransform({
+      name: 'custom/pxToRem',
+      type: 'value',
+      matcher(token) {
+        return (
+          token.attributes.category === 'font' && token.attributes.type === 'type' && token.attributes.state === 'size'
+        );
+      },
+      transformer(token) {
+        const baseFontSize = tokenBaseFontSize ? parseFloat(tokenBaseFontSize) : 16; // default to 16px
+        const tokenValue = parseFloat(token.value);
+
+        if (Number.isNaN(tokenBaseFontSize)) {
+          throw new Error(`Invalid number for base font size: ${tokenBaseFontSize}`);
+        }
+
+        if (Number.isNaN(tokenValue)) {
+          throw new Error(`Invalid number: ${token.value}. Could not convert ${token.name} to rem`);
+        }
+
+        if (tokenValue === 0) {
+          return '0';
+        }
+
+        return `${tokenValue / baseFontSize}rem`;
+      },
+    });
     resolve('Transform registered');
   });
 }