@madgex/design-system 5.11.2 → 6.0.0

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

package/tasks/svgsprite.js

@@ -63,8 +63,11 @@ async function createSvgStack() {
 
           return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
             icons.push({ name: fileName });
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites);
-            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`, inlineSprites);
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites.toString());
+            fs.writeFileSync(
+              `${path.resolve(__dirname, '../dist/assets', 'icons-inline.svg')}`,
+              inlineSprites.toString()
+            );
             fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
           });
         })