@madgex/design-system 6.3.11 → 7.0.1

package/src/tokens/_config.js

@@ -6,15 +6,7 @@ const config = {
   platforms: {
     'css-variables': {
       // transformGroup: 'css',
-      transforms: [
-        'attribute/cti',
-        'name/cti/kebab',
-        'time/seconds',
-        'content/icon',
-        'color/css',
-        'css/rawData',
-        'custom/pxToRem',
-      ],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css', 'css/rawData'],
       buildPath: `${path.resolve(__dirname, '../../dist/_tokens/css/')}/`,
       prefix: 'mds',
       files: [
@@ -81,7 +73,7 @@ const config = {
     //   ],
     // },
     'js-module': {
-      transforms: ['attribute/cti', 'name/cti/pascal', 'custom/pxToRem'],
+      transforms: ['attribute/cti', 'name/cti/pascal'],
       buildPath: `${path.resolve(__dirname, '../../dist/_tokens/js/')}/`,
       prefix: 'mds',
       files: [

package/src/tokens/typography.json

@@ -75,226 +75,101 @@
         "value": "{font.spacing.base.value}"
       }
     },
-    "size": {
-      "base": {
-        "value": "16px"
-      }
-    },
     "type": {
-      "canon": {
-        "default": {
-          "size": {
-            "value": "28px"
-          },
-          "line-height": { "value": "1.15" }
-        },
-        "sm": {
-          "size": { "value": "32px" },
-          "line-height": { "value": "1.13" }
+      "s-2": {
+        "size": {
+          "value": "0.75rem"
         },
-        "md": {
-          "size": { "value": "52px" },
-          "line-height": { "value": "1.08" }
-        },
-        "lg": {
-          "size": { "value": "44px" },
-          "line-height": { "value": "1.1" }
+        "line-height": { 
+          "value": "1.35" 
         }
       },
-      "trafalgar": {
-        "default": {
-          "size": { "value": "20px" },
-          "line-height": { "value": "1.2" }
-        },
-        "sm": {
-          "size": { "value": "24px" },
-          "line-height": { "value": "1.17" }
-        },
-        "md": {
-          "size": { "value": "36px" },
-          "line-height": { "value": "1.12" }
+      "s-1": {
+        "size": {
+          "value": "0.875rem"
         },
-        "lg": {
-          "size": { "value": "32px" },
-          "line-height": { "value": "1.13" }
+        "line-height": { 
+          "value": "1.35" 
         }
       },
-      "paragon": {
-        "default": {
-          "size": { "value": "20px" },
-          "line-height": { "value": "1.2" }
+      "s0": {
+        "size": {
+          "value": "1rem"
         },
-        "sm": {
-          "size": { "value": "22px" },
-          "line-height": { "value": "1.19" }
-        },
-        "md": {
-          "size": { "value": "28px" },
-          "line-height": { "value": "1.15" }
-        },
-        "lg": {
-          "size": { "value": "28px" },
-          "line-height": { "value": "1.15" }
+        "line-height": { 
+          "value": "1.4" 
         }
       },
-      "double-pica": {
-        "default": {
-          "size": { "value": "20px" },
-          "line-height": { "value": "1.2" }
-        },
-        "sm": {
-          "size": { "value": "20px" },
-          "line-height": { "value": "1.2" }
+      "s1": {
+        "size": {
+          "value": "clamp(1.067rem, 1.0468rem + 0.1009vi, 1.125rem)"
         },
-        "md": {
-          "size": { "value": "26px" },
-          "line-height": { "value": "1.16" }
-        },
-        "lg": {
-          "size": { "value": "24px" },
-          "line-height": { "value": "1.17" }
+        "line-height": { 
+          "value": "1.4" 
         }
       },
-      "great-primer": {
-        "default": {
-          "size": { "value": "18px" },
-          "line-height": { "value": "1.23" }
-        },
-        "sm": {
-          "size": { "value": "18px" },
-          "line-height": { "value": "1.23" }
-        },
-        "md": {
-          "size": { "value": "21px" },
-          "line-height": { "value": "1.15" }
+      "s2": {
+        "size": {
+          "value": "clamp(1.1385rem, 1.0943rem + 0.2211vi, 1.2656rem)"
         },
-        "lg": {
-          "size": { "value": "20px" },
-          "line-height": { "value": "1.2" }
+        "line-height": { 
+          "value": "1.2" 
         }
       },
-      "body-copy": {
-        "default": {
-          "size": { "value": "16px" },
-          "line-height": { "value": "1.38" }
+      "s3": {
+        "size": {
+          "value": "clamp(1.2148rem, 1.1421rem + 0.3636vi, 1.4238rem)"
         },
-        "sm": {
-          "size": { "value": "16px" },
-          "line-height": { "value": "1.38" }
-        },
-        "md": {
-          "size": { "value": "18px" },
-          "line-height": { "value": "1.34" }
-        },
-        "lg": {
-          "size": { "value": "16px" },
-          "line-height": { "value": "1.38" }
+        "line-height": { 
+          "value": "1.2" 
         }
       },
-      "body-copy-bulk": {
-        "default": {
-          "size": {
-            "value": "16px"
-          },
-          "line-height": {
-            "value": "1.75"
-          }
-        },
-        "sm": {
-          "size": {
-            "value": "16px"
-          },
-          "line-height": {
-            "value": "1.75"
-          }
-        },
-        "md": {
-          "size": {
-            "value": "18px"
-          },
-          "line-height": {
-            "value": "1.67"
-          }
+      "s4": {
+        "size": {
+          "value": "clamp(1.2962rem, 1.1898rem + 0.5316vi, 1.6018rem)"
         },
-        "lg": {
-          "size": {
-            "value": "16px"
-          },
-          "line-height": {
-            "value": "1.75"
-          }
+        "line-height": { 
+          "value": "1.2" 
         }
       },
-      "pica": {
-        "default": {
-          "size": { "value": "15px" },
-          "line-height": { "value": "1.34" }
+      "s5": {
+        "size": {
+          "value": "clamp(1.383rem, 1.2372rem + 0.7288vi, 1.802rem)"
         },
-        "sm": {
-          "size": { "value": "16px" },
-          "line-height": { "value": "1.25" }
-        },
-        "md": {
-          "size": { "value": "18px" },
-          "line-height": { "value": "1.23" }
-        },
-        "lg": {
-          "size": { "value": "16px" },
-          "line-height": { "value": "1.25" }
+        "line-height": { 
+          "value": "1.2" 
         }
       },
-      "long-primer": {
-        "default": {
-          "size": { "value": "15px" },
-          "line-height": { "value": "1.2" }
-        },
-        "sm": {
-          "size": { "value": "15px" },
-          "line-height": { "value": "1.2" }
+      "s6": {
+        "size": {
+          "value": "clamp(1.4757rem, 1.2838rem + 0.9593vi, 2.0273rem)"
         },
-        "md": {
-          "size": { "value": "15px" },
-          "line-height": { "value": "1.34" }
-        },
-        "lg": {
-          "size": { "value": "14px" },
-          "line-height": { "value": "1.29" }
+        "line-height": { 
+          "value": "1.15" 
         }
       },
-      "brevier": {
-        "default": {
-          "size": { "value": "14px" },
-          "line-height": { "value": "1.15" }
-        },
-        "sm": {
-          "size": { "value": "14px" },
-          "line-height": { "value": "1.29" }
-        },
-        "md": {
-          "size": { "value": "14px" },
-          "line-height": { "value": "1.29" }
+      "s7": {
+        "size": {
+          "value": "clamp(1.5745rem, 1.3289rem + 1.2281vi, 2.2807rem)"
         },
-        "lg": {
-          "size": { "value": "13px" },
-          "line-height": { "value": "1.24" }
+        "line-height": { 
+          "value": "1.15" 
         }
       },
-      "minion": {
-        "default": {
-          "size": { "value": "12px" },
-          "line-height": { "value": "1.34" }
+      "s8": {
+        "size": {
+          "value": "clamp(1.68rem, 1.3719rem + 1.5405vi, 2.5658rem)"
         },
-        "sm": {
-          "size": { "value": "12px" },
-          "line-height": { "value": "1.34" }
-        },
-        "md": {
-          "size": { "value": "13px" },
-          "line-height": { "value": "1.24" }
+        "line-height": { 
+          "value": "1.15" 
+        }
+      },
+      "s9": {
+        "size": {
+          "value": "clamp(1.7926rem, 1.4121rem + 1.9025vi, 2.8865rem)"
         },
-        "lg": {
-          "size": { "value": "12px" },
-          "line-height": { "value": "1.34" }
+        "line-height": { 
+          "value": "1.15" 
         }
       }
     }

package/src/typography/font-types.config.json

@@ -1,3 +1,3 @@
 {
-  "notes": "## Usage\n\n- Canon: H1\n\n- Trafalgar: H4, section header\n\n- Paragon: Primary headline\n\n- Double Pica: Sub header\n\n- Great Primer: Headline title or subtitle\n\n- Body copy: Body copy\n\n- Body copy bulk: Body copy long text\n\n- Pica: Index links, titles or headlines\n\n- Long Primer: Index body copy and image captions\n\n- Brevier: Time stamps and bylines\n\n- Minion: Small header capitals"
+  "notes": "We're using Utopia fluid type scale: https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12\n\nWe customised font `s-2` and `s-1` so they have a fixed value and don't change depending on the size of the viewport.\nThose 2 fonts being already quite small, we didn't want them getting smaller for accessibility or bigger as they would get too close to the base size and we would lose the visual hierarchy of the text."
 }

package/src/typography/font-types.njk

@@ -1,53 +1,32 @@
-{# get breakpoint names as array #}
-{% set bps = ['default'] %}
-{% for name, item in tokens.size.breakpoint %}
-  {% set bps = bps.concat(name) %}
-{% endfor %}
+{# Comments from https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.125,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 #}
+{% set fontSizesDoc = {
+  's-2': '12px',
+  's-1': '14px',
+  's0': '16px',
+  's1': '17.072px → 18px', 
+  's2': '18.2158px → 20.25px',
+  's3': '19.4363px → 22.7813px',
+  's4': '20.7385px → 25.6289px',
+  's5': '22.128px → 28.8325px',
+  's6': '23.6106px → 32.4366px',
+  's7': '25.1925px → 36.4912px',
+  's8': '26.8804px → 41.0526px',
+  's9': '28.6814px → 46.1841px'
+} %}
 
 <style>
   .breakpoint-indicator { display: flex; width: 100%; position: sticky; top: 0; background: white; }
   .example-copy { background-color: #f8f8f8; }
   .example-copy:hover { background-color: #ececec; }
-
-{% for bpname in bps %}
-  {%- set nextbpname = bps[loop.index0 + 1] -%}
-
-  {%- set lower = tokens.size.breakpoint[bpname] -%}
-  {%- if lower -%}
-    {%- set lower = (tokens.size.breakpoint[bpname].original.value).split('px')[0] -%}
-  {%- endif -%}
-
-  {%- set upper = tokens.size.breakpoint[nextbpname] -%}
-  {%- if upper -%}
-    {%- set upper = (tokens.size.breakpoint[nextbpname].original.value).split('px')[0]-1 -%}
-  {%- endif %}
-
-  @media {% if lower -%}(min-width: {{ lower }}px){%- endif -%}{% if lower and upper %} and {% endif %}{% if upper -%}(max-width: {{ upper }}px){%- endif -%} {
-    .rwd-{{ bpname }} { background: #fffdac; }
-  }
-
-{% endfor -%}
 </style>
 
 {% for fontName, item in tokens.font.type %}
   <div class="mds-margin-bottom-b10">
-    <h2 class="mds-margin-bottom-b5"><strong>{{ fontName | capitalize }}</strong></h2>
-    
-    <p class="mds-margin-bottom-b1" style="font-size: 16px;">Breakpoint sizes:</p>
-    <div class="mds-margin-bottom-b10 breakpoint-indicator">
-      {%- for bpname in bps -%}
-        <div class="mds-padding-b2 rwd-{{ bpname }}" style="flex: 1; border: 1px solid #eee;">
-          <strong>{{ bpname }}</strong>
-          {% set selectedFont = tokens.font.type[fontName][bpname] %}
-          <ul class="mds-margin-b0">
-            {% for cssProperty, subSubItem in selectedFont %}
-              <li>{{ cssProperty }}: {{subSubItem.value}}</li>
-            {% endfor %}
-          </ul>
-        </div>
-      {% endfor %}
-    </div>
-
+    <h2 class="mds-margin-bottom-b5"><strong>{{ fontName }}</strong></h2>
+    <ul>
+      <li>Size (in px): <strong>{{ fontSizesDoc[fontName] }}</strong> <span class="mds-font-s-1">(Viewport width: min 320px → max 1240px)</span></li>
+      <li>Line height: <strong>{{ item['line-height'].value }}</strong></li>
+    </ul>
     <p class="mds-margin-bottom-b1" style="font-size: 16px;">Example:</p>
     <div class="example-copy mds-highlighted-container" style="margin-bottom: 80px;">
       <div class="mds-font-{{ fontName }}">

package/tasks/registerTransforms.js

@@ -1,4 +1,4 @@
-function registerTransforms(StyleDictionary, tokenBaseFontSize) {
+function registerTransforms(StyleDictionary) {
   return new Promise((resolve) => {
     StyleDictionary.registerTransform({
       name: 'css/rawData',
@@ -10,33 +10,6 @@ function registerTransforms(StyleDictionary, tokenBaseFontSize) {
         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).toFixed(3)}rem`;
-      },
-    });
     resolve('Transform registered');
   });
 }

package/src/helpers/edited-text/README.md

@@ -1,5 +0,0 @@
-## Helpers
-
-Use the class `mds-edited-text` to normalise the text coming from a WYSIWYG editor,
-ul, ol tags will have the style that has been removed in css-reset
-this should only be used when content from a WYSIWYG editor is displayed