@madgex/design-system 6.3.11 → 7.0.0

package/src/components/inputs/text-editor/text-editor.scss

@@ -2,7 +2,7 @@
   width: 100%;
   border: $input-border;
   border-radius: $border-radius;
-  @extend .mds-font-body-copy;
+  @extend .mds-font-s0;
 
   .mds-form-element--error & {
     border-color: $constant-color-status-error-dark;

package/src/components/pagination/pagination.config.js

@@ -33,7 +33,7 @@ module.exports = {
       name: 'Next link',
       context: {
         fractalTitle: 'Next link',
-        classes: 'mds-font-long-primer',
+        classes: 'mds-font-s-1',
         nextUrl: '/next-page',
         nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
         backToUrl: '/results/',
@@ -48,7 +48,7 @@ module.exports = {
       name: 'Previous link',
       context: {
         fractalTitle: 'Previous link',
-        classes: 'mds-font-long-primer',
+        classes: 'mds-font-s-1',
         prevUrl: '/prev-page',
         prevExtraLabel: 'Part Time Sales Assistant',
         backToUrl: '/results/',
@@ -63,7 +63,7 @@ module.exports = {
       name: 'Translated',
       context: {
         fractalTitle: 'Translated',
-        classes: 'mds-font-long-primer',
+        classes: 'mds-font-s-1',
         prevUrl: '/prev-page',
         prevExtraLabel: "Agent / Agente d'entretien de nettoyage industriel",
         nextUrl: '/next-page',

package/src/components/skip-link/skip-link.scss

@@ -1,7 +1,7 @@
 .mds-skip-to-content__link {
   background-color: $constant-color-neutral-lightest;
   border: 5px solid $constant-color-neutral-lighter;
-  @extend .mds-font-double-pica;
+  @extend .mds-font-s4;
   font-weight: bold;
   left: -10000px;
   padding: $constant-size-baseline * 6;

package/src/components/tabs/tabs.scss

@@ -15,7 +15,7 @@
 }
 
 .mds-tabs__panel-header {
-  @extend .mds-font-great-primer;
+  @extend .mds-font-s2;
   @extend .mds-surface__inner;
   border-bottom: $regular-border;
   padding-top: $constant-size-baseline * 3;
@@ -25,7 +25,7 @@
 }
 
 .mds-tabs__list-item {
-  @extend .mds-font-great-primer;
+  @extend .mds-font-s2;
 }
 
 .mds-tabs__tab {

package/src/components/toggle-button-links/toggle-button-links.scss

@@ -45,7 +45,7 @@
   border: $regular-border;
   border-right-width: 0;
   padding: ($constant-size-baseline * 3) ($constant-size-baseline * 5);
-  @extend .mds-font-body-copy;
+  @extend .mds-font-s0;
   text-decoration: underline;
 
   .mds-toggle-button-links__list-item:first-child & {

package/src/helpers/edited-text/edited-text.njk

@@ -29,7 +29,7 @@
 </div>
 
 <h4>Paragraph (combined with font-body-copy-bulk):</h4>
-<div class="mds-edited-text mds-font-body-copy-bulk">
+<div class="mds-edited-text mds-font-s0--bulk">
   <h3>Paragraph 1</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
   <h3>Paragraph 2</h3>

package/src/scss/constants/_sd-tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jul 2024 06:59:55 GMT
+ * Generated on Wed, 10 Jul 2024 10:09:43 GMT
  */
 
 $constant-color-neutral-base: #707070;

package/src/scss/core/_lists.scss

@@ -36,7 +36,7 @@
   margin: 0;
 }
 .mds-list__key {
-  @extend .mds-font-brevier;
+  @extend .mds-font-s-1;
   font-weight: bold;
   margin-bottom: $constant-size-baseline;
 }

package/src/scss/core/_typography.scss

@@ -1,5 +1,5 @@
 body {
-  @extend .mds-font-body-copy;
+  @extend .mds-font-s0;
   font-family: var(--mds-font-family-base);
   font-weight: var(--mds-font-weight-base);
   color: var(--mds-color-text-base);
@@ -17,7 +17,7 @@ dl dt {
 }
 
 h1 {
-  @extend .mds-font-trafalgar;
+  @extend .mds-font-s6;
   font-family: var(--mds-font-family-heading-1);
   font-weight: var(--mds-font-weight-heading-1);
   color: var(--mds-color-text-headers-1);
@@ -26,7 +26,7 @@ h1 {
 }
 
 h2 {
-  @extend .mds-font-double-pica;
+  @extend .mds-font-s4;
   font-family: var(--mds-font-family-heading-2);
   font-weight: var(--mds-font-weight-heading-2);
   color: var(--mds-color-text-headers-2);
@@ -35,7 +35,7 @@ h2 {
 }
 
 h3 {
-  @extend .mds-font-great-primer;
+  @extend .mds-font-s2;
   font-family: var(--mds-font-family-heading-3);
   font-weight: var(--mds-font-weight-heading-3);
   color: var(--mds-color-text-headers-3);
@@ -44,5 +44,5 @@ h3 {
 }
 
 h4 {
-  @extend .mds-font-body-copy;
+  @extend .mds-font-s0;
 }

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

@@ -20,9 +20,9 @@
     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 {
+.mds-edited-text.mds-font-s0--bulk,
+.mds-font-s0--bulk .mds-edited-text,
+.mds-edited-text .mds-font-s0--bulk {
   & p {
     margin-bottom: $constant-size-baseline * 4;
   }

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

@@ -1,37 +1,23 @@
-$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'));
+$font-type-scales: 's-2', 's-1', 's0', 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9';
 
-// 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
-// results will be something similar to:
-// .mds-font-canon{
-//   font-size: 28px;
-//   line-height: 1.15;
-//   @media (min-width: $constant-size-breakpoint-sm){
-//     font-size: 32px;
-//     line-height: 1.13;
-//   }
-//   @media (min-width: $constant-size-breakpoint-md){
-//     font-size: 52px;
-//     line-height: 1.08;
-//   }
-//   @media (min-width: $constant-size-breakpoint-lg){
-//     font-size: 44px;
-//     line-height: 1.1;
-//   }
+// loop will create all the classes for the font type scales in the tokens array
+// .mds-font-s0 {
+//    font-size: var(--mds-font-type-base-size);
+//    line-height: var(--mds-font-type-base-line-height);
+// }
+// .mds-font-s-1 {
+//    font-size: var(--mds-font-type-sm-size);
+//    line-height: var(--mds-font-type-sm-line-height);
 // }
-@each $typename in $font-types {
-  .mds-font-#{$typename} {
-    @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);
-      }
-    }
+@each $scale in $font-type-scales {
+  .mds-font-#{$scale} {
+    font-size: var(--mds-font-type-#{$scale}-size);
+    line-height: var(--mds-font-type-#{$scale}-line-height);
   }
 }
+
+.mds-font-s0--bulk {
+  line-height: 1.75;
+}

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/block-of-text.config.json

@@ -0,0 +1,3 @@
+{
+    "notes": "Use font `s0` font modifier, `mds-font-s0--bulk` for long text for better legibility as it has an increased line-height"
+  }

package/src/typography/block-of-text.njk

@@ -0,0 +1,4 @@
+<div class="mds-font-s0--bulk">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante ante, volutpat non venenatis ut, blandit vel tellus. Suspendisse sagittis convallis tincidunt. Proin ut neque quis enim maximus congue. Integer ullamcorper a urna gravida efficitur. Aliquam elementum non sem eu mattis. Proin erat nulla, tincidunt quis volutpat vel, suscipit sit amet sapien. Integer auctor aliquet ligula, vel mollis lorem semper id.</p>
+    <p>Praesent pharetra, ligula sed laoreet scelerisque, libero elit commodo sem, et varius arcu risus non turpis. Nulla scelerisque urna non felis vulputate luctus. Nullam ut metus at elit consequat ultrices. Nulla bibendum feugiat nibh, ut pellentesque orci pellentesque et. Nunc sagittis lacus quis elementum ornare. Nulla non commodo diam. Proin est ante, vestibulum et nisi nec, viverra pretium magna. Suspendisse sit amet mauris velit. Fusce placerat, lectus ut facilisis mattis, neque sapien hendrerit ex, ut dapibus dui sapien id orci. Nulla accumsan lacus commodo, euismod eros ac, malesuada eros. Phasellus ultricies porta eros a dictum. Integer dapibus ultrices elit, ut lacinia diam volutpat ac. Curabitur eu sollicitudin lectus. Donec fringilla lacus turpis, eu posuere orci lobortis vel. Morbi non diam id sapien commodo interdum id viverra tortor. Suspendisse iaculis odio justo, at maximus tellus facilisis ut.</p>
+</div>

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