mp-design-system 0.9.17 → 0.9.24

package/src/assets/scss/tools/cutoff.scss

@@ -1,42 +1,28 @@
 // Cutoff corner effect
+@mixin cutoff($corner:"bottom-right", $size:var(--gutter)) {
+    
+    $offset : calc(100% - $size);
 
-$g : var(--gutter);
-$og : calc(100% - var(--gutter));
+    // Co-ordinates for the polygon
+    $co1: "0 0";
+    $co2: "100% 0";
+    $co3: "100% 100%";
+    $co4: "0 100%";
 
-@mixin cutoff($corner:"bottom-right") {
+    // Override the basic co-ordinates
     @if $corner == "top-left" {
-        clip-path: polygon( 
-            $g 0,
-            100% 0,
-            100% 100%,
-            0 100%,
-            0 $g 
-        );
+        $co1: "0 #{$size}, #{$size} 0";
     } @else if $corner == "top-right" {
-        clip-path: polygon( 
-            0 0,
-            $og 0,
-            100% $g,
-            100% 100%,
-            0 100% 
-        );
+        $co2: "#{$offset} 0, 100% #{$size}";
     } @else if $corner == "bottom-left" {
-        clip-path: polygon( 
-            0 0,
-            100% 0,
-            100% 100%,
-            $g 100%,
-            0 $og 
-        );
+        $co4: "#{$size} 100%, 0 #{$offset}";
     } @else {
-        clip-path: polygon( 
-            0 0,
-            100% 0,
-            100% $og,
-            $og 100%,
-            0 100% 
-        );
+        $co3: "100% #{$offset}, #{$offset} 100%";
     }
+
+    clip-path: polygon(
+        #{$co1}, #{$co2}, #{$co3}, #{$co4}
+    );
 }
 
 .u-cutoff {
@@ -53,4 +39,8 @@ $og : calc(100% - var(--gutter));
 
 .u-cutoff--bottom-left {
     @include cutoff("bottom-left")
+}
+
+.u-cutoff--xl {
+    @include cutoff($size: var(--space-xl))
 }

package/src/assets/scss/utilities/flow.scss

@@ -63,6 +63,7 @@
       @include padding-top('m-xl');
       @include margin-top('m-xl');
       border-top: 1px solid color('petrol', 'step-2');
+      clear: both;
     }
   }
 }

package/src/assets/svg/arc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><g clip-path="url(#a)"><path stroke="#3D7B87" d="M388.57 203.44c40.74 9.94 66.77 48.93 58.38 88.2-8.38 39.27-48.05 64.23-89.3 56.67"/><path stroke="#3D7B87" d="M402.01 140.47c2.72.35 5.43.82 8.15 1.4 56.13 11.98 91.68 68.3 79.4 125.79-12.27 57.5-67.72 94.39-123.84 82.4a98.78 98.78 0 0 1-8.01-2.04"/><path stroke="#3D7B87" d="M432.3-1.42c3.09.5 6.18 1.08 9.27 1.74 97.39 20.78 159.62 115.91 139.01 212.47-20.6 96.55-116.27 157.98-213.65 137.19a183 183 0 0 1-9.17-2.2"/><path stroke="#3D7B87" d="M359.04 347.92c50.87 14.25 81.93 69.05 69.9 125.41-9.2 43.08-41 75.04-78.8 84.26"/><path stroke="#3D7B87" d="M358.75 349.03a75.38 75.38 0 0 1-15.33 143.5m472.91-210.11c-136.88 72.26-297.27 99.23-458.69 65.9"/><path stroke="#3D7B87" d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path stroke="#3D7B87" d="M730.15 434.78c20.26-94.9-46.81-189.74-149.9-211.75-103.1-22-203.05 37.17-223.31 132.09-20.26 94.9 46.8 189.74 149.9 211.75 103.1 22 203.05-37.17 223.3-132.09Z"/><path stroke="#3D7B87" d="M565.63 393.51c11.4-53.42-25.74-106.7-83.05-118.93-57.32-12.24-112.98 21.23-124.38 74.65-11.41 53.43 25.74 106.7 83.05 118.94 57.31 12.23 112.98-21.23 124.38-74.66Z"/><path stroke="#3D7B87" d="M507.87 381.04c8.07-37.81-18.83-75.68-60.2-84.5-41.36-8.84-81.37 14.74-89.44 52.55-8.08 37.81 18.82 75.68 60.19 84.51 41.36 8.83 81.38-14.75 89.45-52.56Z"/><path stroke="#3D7B87" d="M668.34-16.28c-164.89 90.43-279.7 223.03-314.5 386.05-34.6 162.08 15.29 329 127.5 478.23"/><path stroke="#3D7B87" d="M482.38 560.08c20.96-98.17-37.75-193.87-131.07-213.79-93.33-19.92-186 43.46-206.95 141.63-20.96 98.18 37.75 193.87 131.07 213.8 93.33 19.92 186-43.47 206.95-141.64Z"/><circle cx="545.73" cy="65.7" r="6.7" fill="#3D7B87" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" fill="#3D7B87" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" fill="#3D7B87" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" fill="#3D7B87" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" fill="#3D7B87" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" fill="#3D7B87" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" fill="#3D7B87" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" fill="#3D7B87" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" fill="#3D7B87" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" fill="#3D7B87" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" fill="#3D7B87" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" fill="#3D7B87" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" fill="#3D7B87" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" fill="#3D7B87" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" fill="#3D7B87" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" fill="#3D7B87" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" fill="#3D7B87" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" fill="#3D7B87" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" fill="#3D7B87" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" fill="#3D7B87" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" fill="#3D7B87" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" fill="#3D7B87" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" fill="#3D7B87" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5.02" cy="6.18" fill="#3D7B87" rx="5.02" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" fill="#3D7B87" rx="5.02" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" fill="#3D7B87" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" fill="#3D7B87" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" fill="#3D7B87" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" fill="#3D7B87" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" fill="#3D7B87" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" fill="#3D7B87" rx="5.02" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" fill="#3D7B87" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" fill="#3D7B87" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" fill="#3D7B87" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" fill="#3D7B87" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" fill="#3D7B87" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" fill="#3D7B87" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" fill="#3D7B87" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" fill="#3D7B87" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" fill="#3D7B87" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" fill="#3D7B87" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" fill="#3D7B87" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" fill="#3D7B87" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" fill="#3D7B87" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs></svg>

package/src/assets/svg/crystal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075" ><g clip-path="url(#a)"><path stroke="#3D7B87" d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path stroke="#3D7B87" d="m93 259-62 61 20 77 82 14 62-62-19-76M91 548l62-62 81 15 20 75-62 62-82-15-19-75Zm146-335 82 14 62-62-20-76-82-15-62 62m59 228 62-62 82 14 20 76-62 62-82-15-20-75Zm0 0-82-14"/><path stroke="#3D7B87" d="m296 439-63 62m145-48 20 77-62 61-83-14m127-411 82 14 62-62-19-76-83-15-62 62m79 304 82 14 63-62-20-76-82-14-63 61m43-137 20 76m-144 48-20-77"/><path stroke="#3D7B87" d="m521 406 20 77-62 61-82-14"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 205 131)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 263 359)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 268 68)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 327 295)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 306 221)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 364 449)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 324 585)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 181 631)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 60 179)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 121 405)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 125 115)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 183 343)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 39 390)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 161 269)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 19 315)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 223 494)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 80 541)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 347 84)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 407 311)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 410 22)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 470 249)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 449 175)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 508 401)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 465 539)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 493 36)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 225 205)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 284 433)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 241 571)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 98 618)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 81 253)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 141 481)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 369 158)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 428 385)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 385 523)"/><circle cx="9.9" cy="9.9" r="9.9" fill="#3D7B87" transform="matrix(1 -.33 .24 .91 511 113)"/><path stroke="#3D7B87" d="m41 177 23 4m69-66-6-21m73 572-6-22m82-576-5-21m72 572-5-22m82-576-6-21m73 572-6-22M0 314l23 4m37 222 23 4M510 36l39-37M85 649l18-17M27 420l17-17"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs></svg>

package/src/assets/svg/dots-pattern.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".075"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#004157" opacity=".1"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>

package/src/brand/illustration.md

@@ -19,7 +19,7 @@ Our illustration style is still a work-in-progress; currently it follows a few s
 - White background
 
 ## Resources
-We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make the available on this site in future.
+We have a library of pre-made characters which can be adapted for new designs, and an Adobe Illustrator color palette. Contact Will Wallace for access to both of these; I'll aim to make them available on this site in future.
 
 ## Examples
 
@@ -35,10 +35,16 @@ We have a library of pre-made characters which can be adapted for new designs, a
 
 ![alt text][opt-in]
 
+![alt text][404]
+
+![alt text][500]
+
 </div>
 
 [login]: https://www.malvernpanalytical.com/resource/svg/login3.svg
 [thankyou]: https://p3.aprimocdn.net/malvernpanalytical/0cd71419-bc75-4b43-8c4d-af69010bf927/thankyou_Original%20file.svg
 [support]: https://p3.aprimocdn.net/malvernpanalytical/aef489f7-a3cc-4a0c-ad6c-af3300baaa3b/support3_Original%20file.svg
 [opt-in]: https://p3.aprimocdn.net/malvernpanalytical/383c6156-cefd-4d8e-a913-af6d00cebf8a/opt-in%20success%20v02_Original%20file.svg
-[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
+[confirm]: https://p3.aprimocdn.net/malvernpanalytical/68ccc179-959e-4b2e-b1c1-af7100be26af/get-started_Original%20file.svg
+[404]: https://p3.aprimocdn.net/malvernpanalytical/d88d7c64-76b2-4fa4-8ce0-af7300ce1dd2/error-404_Original%20file.svg
+[500]: https://p3.aprimocdn.net/malvernpanalytical/7d24fb59-5c5f-463a-9bb2-af7300d05c5a/error-500_Original%20file.svg

package/src/brand/patterns.njk

@@ -0,0 +1,43 @@
+---
+title: Patterns
+layout: content-page
+sidebar: brand
+tags: brand
+version: 1.0.0
+status: 'Ready'
+---
+{% from "components/header/macro.njk" import header %}
+
+<p>We can make our digital designs a bit more visually appealing by adding background patterns and decorative gradients.</p>
+
+<div class="o-grid xo-grid--of-two">
+    <div class="c-slat c-slat--concentric vh50 u-bg-blue-step-3">
+        <div class="o-prose u-flow--prose u-pad-x-s">
+            <p>This section has the <strong>concentric rings</strong> background pattern.</p>
+            <p>See the <a href="/components/slat-concentric">Slat</a> component for more details.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--dots vh50 u-bg-green-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>dots</strong> background pattern.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--crystal vh50 u-bg-utility-blue-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>crystal</strong> background pattern.</p>
+        </div>
+    </div>
+    <div class="c-slat c-slat--arc vh50 u-bg-petrol-step-3">
+        <div class="o-prose u-pad-x-s">
+            <p>This section has the <strong>arc</strong> background pattern.</p>
+        </div>
+    </div>
+</div>
+
+<style>
+    .vh50 {
+        height: 20em;
+        height: clamp(10em, 50vh, 30em);
+    }
+</style>
+    

package/src/brand/typography.md

@@ -7,7 +7,7 @@ version: 1.0.2
 status: 'Ready'
 ---
 
-## Font
+## Inter
 
 Our brand font is [Inter](https://rsms.me/inter). This typeface has been selected for its;
 - Excellent clarity and legibility
@@ -19,10 +19,15 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
 
 {% button 'Download Inter font' 'https://github.com/rsms/inter/releases/download/v3.19/Inter-3.19.zip' %}
 
-<br>
+Inter is also available from [Google Fonts](https://fonts.google.com/specimen/Inter).
 
-#### Google Fonts
-[Inter is also available from Google Fonts](https://fonts.google.com/specimen/Inter).
+## Calibri
+
+We use Calibri for office documents (e.g. Powerpoint, Word). Calibri is available on all Windows computers by default.
+
+## Noto
+
+For languages which don't use the Latin alphabet (such as Arabic or Chinese languages), we use the [Noto](https://fonts.google.com/noto) font family, which aims to cover the majority of the world's written scripts. N.B. Inter and Calibri both include Greek and Cyrillic characters.
 
 ---
 
@@ -31,7 +36,9 @@ Find more information about Inter at [https://rsms.me/inter](https://rsms.me/int
 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789  
 abcdefghijklmnopqrstuvwxyz @ $ € £ ¥ & © ® ™ μ ± °
 
-- Inter Light for printed materials, Inter Regular for digital (e.g. Powerpoint)
+- Inter Light for printed materials
+- Inter Regular for web/software
+- Arial for office (e.g. Powerpoint)
 - Color: 100% black for printed materials, [MP21Charcoal](/brand/visual/colors) for digital
 - <span class="c-library__semi">Inter Semi Bold</span> for emphasis
 - Recommended font sizes for body text:

package/src/components/creating-a-component.md

@@ -73,7 +73,7 @@ This `c` component takes two parameters:
 
 This `SCSS` file has access to all the mixins, functions and foundational elements documented in {{ config.name }}. To add it to the main bundle, head to `src/assets/scss/components/index.scss` and add a new line pointing to your file:
 
-```
+```scss
 @import '~comp/filter-bar/filter-bar.scss';
 ```
 

package/src/components/flow.njk

@@ -10,14 +10,15 @@ sidebar: components
 <div class="u-flow--m">
   {% set content %}
   Add the class `u-flow` to any container, to space its contents.
-  ```
+  ```html
   <div class="u-flow">
     <h1>Flow</h1>
-    <img />
-    <div></div>
-    <a class="c-button"></a>
+    <p>Example</p>
+    <img src="example.jpg" />
+    <div>Example</div>
   </div>
   ```
+
   Spacing content effectively is imperative to good component composition. Taking learnings from broader CSS spacing paradigms, rather than dictate spacing at a child-level, we set the rules at a parent-level, overriding at a child-level where appropriate.
 
   With this approach, we can add any number of new children to a parent without breaking this existing variants. This mindset is crucial to extending the design system over time.
@@ -25,7 +26,7 @@ sidebar: components
   To achieve this, we use the **flow** concept. The [lobotomised owl selector](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/) `* + *` does the heavy lifting here. Rather than every element 'pushing down', any children that follow another child 'push up'.
   
   {% set dont %}
-  ```
+  ```scss
   .parent > * {
     margin-bottom: 1rem;
 
@@ -41,7 +42,7 @@ sidebar: components
   }) }}
 
   {% set do %}
-  ```
+  ```scss
   .parent > * + * {
     margin-top: 1rem;
   }
@@ -61,7 +62,7 @@ sidebar: components
   `.u-flow` will produce a 'small' space, and `.u-flow--l` a 'large' one.
 
   {% set dont %}
-  ```
+  ```html
   <div class="c-component">
     <h2 class="c-component__title u-margin-top-m">...</h2>
   </div>
@@ -73,7 +74,7 @@ sidebar: components
   }) }}
 
   {% set do %}
-  ```
+  ```html
   <div class="c-component u-flow--m">
     <h2 class="c-component__title">...</h2>
   </div>
@@ -100,16 +101,28 @@ sidebar: components
     </thead>
     <tbody>
       <tr>
-        <td><pre><code>.c-component {
-  @include flow('l');
-}</code></pre></td>
-        <td><pre><code>.c-component > * + * {
-  margin-top: 36px;
-  margin-top: var(--space-l);
-}</code></pre></td>
-      </tr>
-    </tbody>
-  </table>
+        <td>
+
+  ```scss
+  .c-component {
+    @include flow('l');
+  }
+  ```
+
+</td>
+<td>
+
+  ```scss
+  .c-component > * + * {
+    margin-top: 36px;
+    margin-top: var(--space-l);
+  }
+  ```
+
+</td>
+</tr>
+</tbody>
+</table>
   {% endset %}
   {{ markdown({
     content: content

package/src/components/iconography.njk

@@ -44,7 +44,7 @@ Adding new icons to the SVG sprite is a manual process.
 
 1. Create (or copy-paste) your new icon on a 24px × 24px artboard in Illustrator
 2. Export as an SVG
-3. Copy into https://jakearchibald.github.io/svgomg/
+3. Copy into <a href="https://jakearchibald.github.io/svgomg/" target="_blank" rel="external noopener noreferrer nofollow">https://jakearchibald.github.io/svgomg/</a>
    - Adjust the options to best reduce the file size
    - Export from SVGOMG as code
 5. Paste into Franklin's /src/static/svg/sprite.svg

package/src/components/installation.md

@@ -14,7 +14,9 @@ The simplest way to consume the design system is with a `<link>` & `<script>` ta
 <script src="https://unpkg.com/mp-design-system@latest/dist/build/js/app.js"></script>
 ```
 
-The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. You can access previous versions by replacing "latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.8.2/dist/build/scss/main.css`
+The latest version number is **V.{{ config.dsVersion }}**, and is visible in the top-right of the page throughout the design system. That version may not have been tested thoroughly - on the main website we stay a few versions behind the latest, and we specify a precise version of each asset by replacing "@latest" in the URL, e.g. `https://unpkg.com/mp-design-system@0.9.5/dist/build/scss/main.css`.
+
+N.B. the `<script>` tag needs to be placed near the closing `</body>` tag of your page; it won't run correctly if placed in the head.
 
 ## Consuming the design system via NPM
 

package/src/components/utilities.md

@@ -28,7 +28,7 @@ More typography utility classes are documented on the [typography page](/compone
 
 ---
 
-## Display
+## Visibility & display
 
 ```html
 <div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>
@@ -67,11 +67,11 @@ More typography utility classes are documented on the [typography page](/compone
 ```
 
 ```html
-<p class="u-sticky">This will "stick" to the top of the screen while scrolling</p>
+<div class="u-sticky">This will "stick" to the top of the screen while scrolling</div>
 ```
 
 ```html
-<div class="u-sticky--gutter">Sticky positioning, with a gap above</div>
+<div class="u-sticky--gutter">To create a small gap above a sticky element</div>
 ```
 
 ```html
@@ -91,14 +91,16 @@ The two child items will be aligned in a horizontal row
 ## Padding and margins
 
 #### Syntax: 
-`u`-`(pad or margin)`-`(optional direction)`-`(size)`-`(optional flex size)`
+`u`-`(pad or margin)`-`(size)`
+
+`u`-`(pad or margin)`-`(direction, optional)`-`(size)`-`(flex size, optional)`
 
 ```html
 <div class="u-pad-s">Small padding on all sides</div>
 ```
 
 ```html
-<div class="u-margin-y-xl">Extra large margin on top and bottom</div>
+<div class="u-margin-x-xs">Extra small margin on left and right</div>
 ```
 
 ```html
@@ -106,8 +108,8 @@ The two child items will be aligned in a horizontal row
 ```
 
 ```html
-<div class="u-pad-x-s-xl">Flexible (small to XL) padding on left and right</div>
-Grows from small padding on small screens, to xl padding on large screens
+<div class="u-pad-y-l-xl">Flexible (large to XL) padding on top and bottom</div>
+Grows from large padding on small screens, to xl padding on large screens
 ```
 
 Sizes | Directions
@@ -131,18 +133,42 @@ More padding and margin utility classes are documented on the [space page](/comp
 
 ## Miscellaneous
 
+```html
+<div class="u-link-inside">Links inside will have underline styling</div>
+```
+
+```html
+<div class="u-border">Element will have a subtle border</div>
+```
+
+<br>
+
 #### Cutoff
 
-`u-cutoff`-`(optional direction; can be bottom-left, top-left, or top-right)`
+`u-cutoff`-`(optional direction; can be bottom-left, top-left, or top-right)`-`(size, optional)`
 
-N.B. The diagonal size is based on `var(--gutter)`.
+N.B. The default diagonal size is based on `var(--gutter)`.
 
 ```html
 <div class="u-cutoff">Cutoff effect on the bottom-right corner</div>
-```
 
-```html
 <div class="u-cutoff--top-left">Top left cutoff</div>
+
+<div class="u-cutoff--xl">XL size cutoff</div>
 ```
 
 <div class="u-bg-blue-step-2 u-pad-xl u-cutoff">Cutoff effect on the bottom-right corner</div>
+
+<div class="u-bg-blue-step-2 u-pad-xl u-cutoff--top-left">Top left cutoff</div>
+
+<div class="u-bg-blue-step-2 u-pad-xl u-cutoff--xl">XL size cutoff</div>
+
+<br>
+
+#### Scroll shadows
+
+When a tab row is too wide for the screen, this displays shadows which indicate that scrolling/swiping is available. Horizontal and vertical options are available. [See example](/components/tabs-scroll-shadows).
+
+```html
+<nav class="c-tabs__controls u-scroll-shadows--h">
+```

package/src/index.njk

@@ -100,11 +100,14 @@ A combination of brand guidelines and a library of HTML/CSS/JS components.
 As Malvern Panalytical has grown, our online experiences have become disparate and inconsistent. The goal of this design system is to address this by creating a single source of truth. It will rely on us all using and contributing to it, with the ongoing support of the Design System Team.
 
 ## Latest updates
-##### V.{{ config.dsVersion }} - 04 Aug 2022
+##### V.{{ config.dsVersion }} - Jan 2022
 
-- Update MP Charcoal colours for better contrast and legibility
-- Add cutoff utility
-- Tweak campaign design
+- New Features Table component
+- New Gallery component
+- New illustration documentation
+- Fix IE11 navigation bug
+- Misc. fixes
+- Misc. documentation improvements
 {% endset %}
 
 {{ markdown({

package/src/prototype/product.njk

@@ -13,6 +13,7 @@ tagTitle: Product
 {% from "components/scroll-spy/macro.njk" import scrollSpy %}
 {% from "components/embed/macro.njk" import youtube %}
 {% from "components/card/macro.njk" import card %}
+{% from "components/gallery/macro.njk" import gallery %}
 
 {% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
 
@@ -26,6 +27,34 @@ tagTitle: Product
     </nav>
 
     <div class="o-grid o-grid--of-two-late">
+
+      {{ gallery({
+        images: [
+          {
+            src: '/static/img/slide-4.webp',
+            title: 'Zetasizer slide 1'
+          },
+          {
+            src: '/static/img/slide-5.webp',
+            title: 'Zetasizer slide 2'
+          },
+          {
+            src: '/static/img/slide-6.webp',
+            title: 'Zetasizer slide 3'
+          },
+          {
+            src: '/static/img/slide-7.webp',
+            title: 'Zetasizer slide 4'
+          }
+        ],
+        videos: [
+          {
+            title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
+            id: 'Q4H7EdHFghs'
+          }
+        ]
+      })}}
+
       <div>
         <h1 class="c-h c-h--page-title">Mastersizer 3000</h1>
         <h2 class="c-h c-h--page-subtitle u-margin-top-s-m">Delivering the data you need for outcomes you can trust</h2>
@@ -39,25 +68,6 @@ tagTitle: Product
           <br />
         </div>
       </div>
-
-      <div class="u-flow c-gallery">
-        {{ youtube({
-          title: 'FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3',
-          id: 'Q4H7EdHFghs'
-        }) }}
-
-        <div class="c-gallery__thumbnails">
-          <figure class="c-gallery__slide active">
-            <img src="/static/img/slide-1.jpg" alt="Alt" />
-          </figure>
-          <figure class="c-gallery__slide">
-            <img src="/static/img/slide-2.jpg" alt="Alt" />
-          </figure>
-          <figure class="c-gallery__slide">
-            <img src="/static/img/slide-3.jpg" alt="Alt" />
-          </figure>
-        </div>
-      </div>
     </div>
 
     <div class="o-grid o-grid--of-three u-pad-top-m-l">

package/dist/build/dots-pattern.3c9c2a26.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none"><g stroke="#004157" opacity=".075"><circle cx="36.965" cy="27.974" r="17.5" transform="rotate(-15 36.965 27.974)"/><circle cx="141.285" cy=".021" r="17.5" transform="rotate(-15 141.285 .021)"/><circle cx="3.44" cy="111.496" r="17.5" transform="rotate(-15 3.44 111.496)"/><circle cx="107.76" cy="83.544" r="17.5" transform="rotate(-15 107.76 83.544)"/><circle cx="212.08" cy="55.591" r="17.5" transform="rotate(-15 212.08 55.591)"/><circle cx="74.235" cy="167.067" r="17.5" transform="rotate(-15 74.235 167.067)"/><circle cx="178.555" cy="139.114" r="17.5" transform="rotate(-15 178.555 139.114)"/><circle cx="40.71" cy="250.59" r="17.5" transform="rotate(-15 40.71 250.59)"/><circle cx="145.03" cy="222.637" r="17.5" transform="rotate(-15 145.03 222.637)"/><circle cx="249.35" cy="194.685" r="17.5" transform="rotate(-15 249.35 194.685)"/><circle cx="7.185" cy="334.113" r="17.5" transform="rotate(-15 7.185 334.113)"/><circle cx="111.505" cy="306.16" r="17.5" transform="rotate(-15 111.505 306.16)"/><circle cx="215.825" cy="278.208" r="17.5" transform="rotate(-15 215.825 278.208)"/><circle cx="77.98" cy="389.683" r="17.5" transform="rotate(-15 77.98 389.683)"/><circle cx="182.3" cy="361.73" r="17.5" transform="rotate(-15 182.3 361.73)"/><circle cx="286.62" cy="333.778" r="17.5" transform="rotate(-15 286.62 333.778)"/><circle cx="44.455" cy="473.206" r="17.5" transform="rotate(-15 44.455 473.206)"/><circle cx="148.775" cy="445.254" r="17.5" transform="rotate(-15 148.775 445.254)"/><circle cx="253.095" cy="417.301" r="17.5" transform="rotate(-15 253.095 417.301)"/><circle cx="10.93" cy="556.729" r="17.5" transform="rotate(-15 10.93 556.729)"/><circle cx="115.25" cy="528.776" r="17.5" transform="rotate(-15 115.25 528.776)"/><circle cx="219.57" cy="500.824" r="17.5" transform="rotate(-15 219.57 500.824)"/><circle cx="323.89" cy="472.871" r="17.5" transform="rotate(-15 323.89 472.871)"/><circle cx="81.725" cy="612.299" r="17.5" transform="rotate(-15 81.725 612.299)"/><circle cx="186.045" cy="584.347" r="17.5" transform="rotate(-15 186.045 584.347)"/><circle cx="290.365" cy="556.394" r="17.5" transform="rotate(-15 290.365 556.394)"/><circle cx="48.2" cy="695.822" r="17.5" transform="rotate(-15 48.2 695.822)"/><circle cx="152.52" cy="667.87" r="17.5" transform="rotate(-15 152.52 667.87)"/><circle cx="256.84" cy="639.917" r="17.5" transform="rotate(-15 256.84 639.917)"/><circle cx="361.16" cy="611.965" r="17.5" transform="rotate(-15 361.16 611.965)"/><circle cx="223.315" cy="723.44" r="17.5" transform="rotate(-15 223.315 723.44)"/><circle cx="327.635" cy="695.488" r="17.5" transform="rotate(-15 327.635 695.488)"/></g></svg>

package/src/_includes/components/campaign/campaign.md

@@ -1,2 +0,0 @@
-## Color options
-In the CMS for the main website (Tridion), users can select from four color options for a campaign component. This is implemented with utility classes in HTML, and is therefore not documented here.