mp-design-system 1.2.64 → 1.2.65

package/src/assets/scss/utilities/space.scss

@@ -1,370 +0,0 @@
-/* Padding */
-.u-pad-top-0 {
-  padding-top: 0;
-}
-.u-pad-top-s {
-  @include padding-top('s');
-}
-.u-pad-top-m {
-  @include padding-top('m');
-}
-.u-pad-top-l {
-  @include padding-top('l');
-}
-.u-pad-top-xl {
-  @include padding-top('xl');
-}
-.u-pad-top-s-m {
-  @include padding-top('s-m');
-}
-.u-pad-top-m-l {
-  @include padding-top('m-l');
-}
-.u-pad-top-l-xl {
-  @include padding-top('l-xl');
-}
-
-.u-pad-bottom-0 {
-  padding-bottom: 0;
-}
-.u-pad-bottom-s {
-  @include padding-bottom('s');
-}
-.u-pad-bottom-m {
-  @include padding-bottom('m');
-}
-.u-pad-bottom-l {
-  @include padding-bottom('l');
-}
-.u-pad-bottom-xl {
-  @include padding-bottom('xl');
-}
-.u-pad-bottom-s-m {
-  @include padding-bottom('s-m');
-}
-.u-pad-bottom-m-l {
-  @include padding-bottom('m-l');
-}
-.u-pad-bottom-l-xl {
-  @include padding-bottom('l-xl');
-}
-
-.u-pad-left-0 {
-  padding-left: 0;
-}
-.u-pad-left-s {
-  @include padding-left('s');
-}
-.u-pad-left-m {
-  @include padding-left('m');
-}
-.u-pad-left-l {
-  @include padding-left('l');
-}
-.u-pad-left-xl {
-  @include padding-left('xl');
-}
-
-.u-pad-right-0 {
-  padding-right: 0;
-}
-.u-pad-right-s {
-  @include padding-right('s');
-}
-.u-pad-right-m {
-  @include padding-right('m');
-}
-.u-pad-right-l {
-  @include padding-right('l');
-}
-.u-pad-right-xl {
-  @include padding-right('xl');
-}
-
-.u-pad-0 {
-  padding: 0;
-}
-.u-pad-3xs {
-  @include padding('3xs');
-}
-.u-pad-2xs {
-  @include padding('2xs');
-}
-.u-pad-s {
-  @include padding('s');
-}
-.u-pad-s-m {
-  @include padding('s-m');
-}
-.u-pad-s-l {
-  @include padding('s-l');
-}
-.u-pad-m {
-  @include padding('m');
-}
-.u-pad-l {
-  @include padding('l');
-}
-.u-pad-xl {
-  @include padding('xl');
-}
-
-.u-pad-y-xs {
-  @include padding-top('xs');
-  @include padding-bottom('xs');
-}
-.u-pad-y-s {
-  @include padding-top('s');
-  @include padding-bottom('s');
-}
-.u-pad-y-m {
-  @include padding-top('m');
-  @include padding-bottom('m');
-}
-.u-pad-y-m-l {
-  @include padding-top('m-l');
-  @include padding-bottom('m-l');
-}
-.u-pad-y-l {
-  @include padding-top('l');
-  @include padding-bottom('l');
-}
-.u-pad-y-xl {
-  @include padding-top('xl');
-  @include padding-bottom('xl');
-}
-.u-pad-y-2xl {
-  @include padding-top('2xl');
-  @include padding-bottom('2xl');
-}
-.u-pad-y-l-xl {
-  @include padding-top('l-xl');
-  @include padding-bottom('l-xl');
-}
-.u-pad-y-l-2xl {
-  @include padding-top('l-2xl');
-  @include padding-bottom('l-2xl');
-}
-
-.u-pad-x-s {
-  @include padding-left('s');
-  @include padding-right('s');
-}
-.u-pad-x-m {
-  @include padding-left('m');
-  @include padding-right('m');
-}
-.u-pad-x-l {
-  @include padding-left('l');
-  @include padding-right('l');
-}
-.u-pad-x-xl {
-  @include padding-left('xl');
-  @include padding-right('xl');
-}
-.u-pad-x-s-xl {
-  @include padding-left('s-xl');
-  @include padding-right('s-xl');
-}
-
-/* Margin */
-
-.u-margin-top-0 {
-  margin-top: 0;
-}
-.u-margin-top-auto {
-  margin-top: auto;
-}
-.u-margin-top-negative-2xl {
-  margin-top: calc(-1 * #{var(--space-2xl)});
-}
-.u-margin-top-2xs {
-  @include margin-top('2xs');
-}
-.u-margin-top-xs {
-  @include margin-top('xs');
-}
-.u-margin-top-s {
-  @include margin-top('s');
-}
-.u-margin-top-m {
-  @include margin-top('m');
-}
-.u-margin-top-l {
-  @include margin-top('l');
-}
-.u-margin-top-xl {
-  @include margin-top('xl');
-}
-.u-margin-top-s-m {
-  @include margin-top('s-m');
-}
-.u-margin-top-m-l {
-  @include margin-top('m-l');
-}
-.u-margin-top-l-xl {
-  @include margin-top('l-xl');
-}
-.u-margin-top-l-2xl {
-  @include margin-top('l-2xl');
-}
-.u-margin-top-xl-2xl {
-  @include margin-top('xl-2xl');
-}
-
-.u-margin-bottom-0 {
-  margin-bottom: 0;
-}
-.u-margin-bottom-s {
-  @include margin-bottom('s');
-}
-.u-margin-bottom-m {
-  @include margin-bottom('m');
-}
-.u-margin-bottom-l {
-  @include margin-bottom('l');
-}
-.u-margin-bottom-xl {
-  @include margin-bottom('xl');
-}
-.u-margin-bottom-s-m {
-  @include margin-bottom('s-m');
-}
-.u-margin-bottom-s-l {
-  @include margin-bottom('s-l');
-}
-.u-margin-bottom-m-l {
-  @include margin-bottom('m-l');
-}
-.u-margin-bottom-m-xl {
-  @include margin-bottom('m-xl');
-}
-.u-margin-bottom-l-xl {
-  @include margin-bottom('l-xl');
-}
-
-.u-margin-left-0 {
-  margin-left: 0;
-}
-.u-margin-left-2xs {
-  @include margin-left('2xs');
-}
-.u-margin-left-xs {
-  @include margin-left('xs');
-}
-.u-margin-left-s {
-  @include margin-left('s');
-}
-.u-margin-left-m {
-  @include margin-left('m');
-}
-.u-margin-left-l {
-  @include margin-left('l');
-}
-.u-margin-left-xl {
-  @include margin-left('xl');
-}
-
-.u-margin-right-0 {
-  margin-right: 0;
-}
-.u-margin-right-xs {
-  @include margin-right('xs');
-}
-.u-margin-right-s {
-  @include margin-right('s');
-}
-.u-margin-right-m {
-  @include margin-right('m');
-}
-.u-margin-right-l {
-  @include margin-right('l');
-}
-.u-margin-right-xl {
-  @include margin-right('xl');
-}
-
-.u-margin-0 {
-  margin: 0;
-}
-.u-margin-s {
-  @include margin('s');
-}
-.u-margin-m {
-  @include margin('m');
-}
-.u-margin-l {
-  @include margin('l');
-}
-.u-margin-xl {
-  @include margin('xl');
-}
-
-.u-margin-y-xs {
-  @include margin-top('xs');
-  @include margin-bottom('xs');
-}
-.u-margin-y-s {
-  @include margin-top('s');
-  @include margin-bottom('s');
-}
-.u-margin-y-s-m {
-  @include margin-top('s-m');
-  @include margin-bottom('s-m');
-}
-.u-margin-y-m {
-  @include margin-top('m');
-  @include margin-bottom('m');
-}
-.u-margin-y-l {
-  @include margin-top('l');
-  @include margin-bottom('l');
-}
-.u-margin-y-xl {
-  @include margin-top('xl');
-  @include margin-bottom('xl');
-}
-
-.u-margin-x-3xs {
-  @include margin-left('3xs');
-  @include margin-right('3xs');
-}
-.u-margin-x-2xs {
-  @include margin-left('2xs');
-  @include margin-right('2xs');
-}
-.u-margin-x-xs {
-  @include margin-left('xs');
-  @include margin-right('xs');
-}
-.u-margin-x-s {
-  @include margin-left('s');
-  @include margin-right('s');
-}
-.u-margin-x-m {
-  @include margin-left('m');
-  @include margin-right('m');
-}
-.u-margin-x-l {
-  @include margin-left('l');
-  @include margin-right('l');
-}
-.u-margin-x-xl {
-  @include margin-left('xl');
-  @include margin-right('xl');
-}
-
-.u-margin-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Width */
-
-.u-width-auto {
-  width: auto;
-}
-
-.u-width-100 {
-  width: 100%;
-}

package/src/assets/scss/utilities/typography.scss

@@ -1,35 +0,0 @@
-@each $name, $step in $steps {
-  .u-step-#{$name} {
-    @include step($name);
-  }
-}
-
-.u-lede {
-  @include step(1);
-  color: color('blue');
-  
-  .mp &,
-  & {
-    line-height: lh('prose');
-  }
-}
-
-.u-strong {
-  font-weight: weight('bold');
-}
-
-.u-normal {
-  font-weight: weight();
-}
-
-.u-ls {
-  letter-spacing: ls();
-}
-
-.u-text-center {
-  text-align: center;
-}
-
-.u-remove-bullets {
-  list-style-type: none;
-}

package/src/assets/scss/utilities/wrap.scss

@@ -1,24 +0,0 @@
-.u-wrap {
-  @include padding-right('gutter');
-  @include padding-left('gutter');
-  margin-right: auto;
-  margin-left: auto;
-  max-width: calc(#{$wrapper});
-  max-width: calc(#{$wrapper} + var(--gutter) + var(--gutter));
-  width: 100%;
-
-  .u-wrap {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  &--content {
-    max-width: 51.75rem;
-    width: 100%;
-  }
-
-  &--fields {
-    max-width: 27rem;
-    @include padding-right('l');
-  }
-}

package/src/assets/svg/arc.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 693 671" opacity="0.075"><defs><clipPath id="a"><path fill="#fff" d="M0 0h693v671H0z"/></clipPath></defs><g clip-path="url(#a)"><g stroke="#3D7B87"><path 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 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 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 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 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 d="M710.4 603.24c-92.04-125.65-211.68-216.14-352.29-256"/><path 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 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 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 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 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"/></g><g fill="#3D7B87"><circle cx="545.73" cy="65.7" r="6.7" transform="rotate(12.05 545.73 65.7)"/><circle cx="6.7" cy="6.7" r="6.7" transform="scale(1 -1) rotate(-12.05 -2911.17 -1076.64)"/><ellipse cx="4.94" cy="7.18" rx="4.94" ry="7.18" transform="scale(1 -1) rotate(-20.98 183.75 -1296.01)"/><ellipse cx="4.74" cy="6.4" rx="4.74" ry="6.4" transform="scale(1 -1) rotate(-12.05 187.9 -2125.37)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(31.69 1029.73 -24.26)"/><ellipse cx="2.8" cy="5.82" rx="2.8" ry="5.82" transform="scale(1 -1) rotate(31.69 867.17 203.72)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(16.08 1654.79 57.2)"/><ellipse cx="163.88" cy="128.11" rx="4.48" ry="9.03" transform="rotate(-120.9 163.88 128.11)"/><ellipse cx="274.03" cy="67.48" rx="4.48" ry="9.03" transform="rotate(-113.38 274.03 67.48)"/><ellipse cx="367.21" cy="92.23" rx="3.39" ry="7.31" transform="rotate(-99.19 367.2 92.23)"/><ellipse cx="3.98" cy="6.65" rx="3.98" ry="6.65" transform="scale(1 -1) rotate(3.39 8253.05 -219.92)"/><ellipse cx="3.48" cy="6.68" rx="3.48" ry="6.68" transform="scale(1 -1) rotate(24.86 1254.69 -215.22)"/><ellipse cx="3.76" cy="7.12" rx="3.76" ry="7.12" transform="scale(1 -1) rotate(49.8 674.95 -223)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-24.75 -733 -411.39)"/><ellipse cx="4.06" cy="7.93" rx="4.06" ry="7.93" transform="scale(1 -1) rotate(-38.06 -261.45 -309.48)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(2.61 7685.98 3177.5)"/><ellipse cx="3.46" cy="6.72" rx="3.46" ry="6.72" transform="scale(1 -1) rotate(-.91 -18651.2 -141.87)"/><ellipse cx="19.17" cy="224.95" rx="3.55" ry="6.9" transform="rotate(23.2 19.17 224.95)"/><ellipse cx="9.33" cy="256.03" rx="3.65" ry="7.09" transform="rotate(12.05 9.33 256.03)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(36.8 698.44 97.73)"/><ellipse cx="4.91" cy="9.03" rx="4.91" ry="9.03" transform="scale(1 -1) rotate(35.4 868.22 142.26)"/><ellipse cx="4.91" cy="7.64" rx="4.91" ry="7.64" transform="scale(1 -1) rotate(44.07 803.06 63.23)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-38.32 -292.24 -370.78)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-51.58 -121.02 -356.51)"/><ellipse cx="4.06" cy="9.03" rx="4.06" ry="9.03" transform="scale(1 -1) rotate(-62.45 6.86 -343.71)"/><ellipse cx="5.46" cy="9.03" rx="5.46" ry="9.03" transform="scale(1 -1) rotate(-77.71 94.75 -297.43)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2589.61 -1403.38)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2137.24 -1615.32)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="scale(1 -1) rotate(-12.05 -2683.45 -1973.08)"/><ellipse cx="482.54" cy="126.94" rx="4.79" ry="4.88" transform="rotate(12.05 482.54 126.94)"/><ellipse cx="4.79" cy="4.88" rx="4.79" ry="4.88" transform="matrix(.978 .2088 .2088 -.978 446 631.9)"/><ellipse cx="584.07" cy="149.46" rx="4.79" ry="4.88" transform="rotate(12.05 584.07 149.46)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="scale(1 -1) rotate(-12.05 -2495.49 -1899.88)"/><ellipse cx="452.09" cy="161.39" rx="4.78" ry="5.77" transform="rotate(-44.35 452.09 161.39)"/><ellipse cx="6.52" cy="6.65" rx="6.52" ry="6.65" transform="matrix(.978 .2088 .2088 -.978 335.3 496.36)"/><ellipse cx="416.1" cy="214.01" rx="6.52" ry="6.65" transform="rotate(12.05 416.1 214.01)"/><ellipse cx="5" cy="6.18" rx="5" ry="6.18" transform="scale(1 -1) rotate(-26.41 -907.55 -1119.88)"/><ellipse cx="489.75" cy="225.01" rx="5" ry="6.18" transform="rotate(-2.31 489.75 225.01)"/><ellipse cx="5.32" cy="5.42" rx="5.32" ry="5.42" transform="scale(1 -1) rotate(-12.05 -2090.56 -1998.83)"/><ellipse cx="439.92" cy="243.88" rx="5.32" ry="5.42" transform="rotate(12.05 439.92 243.88)"/><ellipse cx="2.84" cy="5.27" rx="2.84" ry="5.27" transform="scale(1 -1) rotate(-8.31 -2220.86 -1682.37)"/><ellipse cx="232.75" cy="289.48" rx="2.84" ry="5.27" transform="rotate(15.8 232.75 289.48)"/><ellipse cx="7.5" cy="11.35" rx="7.5" ry="11.35" transform="scale(1 -1) rotate(-12.05 -2451.83 -2523.91)"/><ellipse cx="578.22" cy="223.89" rx="5" ry="4.58" transform="rotate(12.05 578.22 223.89)"/><ellipse cx="3.54" cy="6.98" rx="3.54" ry="6.98" transform="scale(1 -1) rotate(-31.41 -745.42 -1273.8)"/><ellipse cx="650.64" cy="251.96" rx="3.54" ry="6.98" transform="rotate(-7.3 650.64 251.96)"/><ellipse cx="5.42" cy="4.43" rx="5.42" ry="4.43" transform="matrix(.978 .2088 .2088 -.978 473.24 473)"/><ellipse cx="532.6" cy="301.26" rx="5.42" ry="4.31" transform="rotate(12.05 532.6 301.26)"/><ellipse cx="6.7" cy="5.11" rx="6.7" ry="5.11" transform="scale(1 -1) rotate(-30.78 -529.84 -1189.83)"/><ellipse cx="565.93" cy="358.88" rx="6.7" ry="5.11" transform="rotate(-6.68 565.93 358.88)"/><ellipse cx="5.16" cy="4.6" rx="5.16" ry="4.6" transform="scale(1 -1) rotate(-47.05 -293.12 -1016.12)"/><ellipse cx="5.44" cy="3.86" rx="5.44" ry="3.86" transform="scale(1 -1) rotate(-43.96 -292.56 -955.94)"/><ellipse cx="622.7" cy="350.92" rx="5.95" ry="4.22" transform="rotate(-15.38 622.7 350.92)"/><ellipse cx="4.89" cy="4.1" rx="4.89" ry="4.1" transform="scale(1 -1) rotate(-88.1 -9.93 -434.95)"/><ellipse cx="445.81" cy="297.26" rx="4.89" ry="4.1" transform="rotate(-64 445.8 297.26)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(78.34 -489.68 -34.66)"/><ellipse cx="487.64" cy="276.67" rx="8.53" ry="6.01" transform="rotate(-77.57 487.64 276.67)"/><ellipse cx="8.53" cy="6.01" rx="8.53" ry="6.01" transform="scale(-1 1) rotate(59.21 -595.82 -237.03)"/><ellipse cx="504.69" cy="362.53" rx="8.53" ry="6.01" transform="rotate(-96.69 504.69 362.53)"/></g></g></svg>

package/src/assets/svg/concentric.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="641" height="1012" fill="none" viewBox="0 0 641 1012"><g stroke="#3D7B87" opacity=".1"><circle cx="641" cy="506" r="80"/><circle cx="641" cy="506" r="20"/><circle cx="641" cy="506" r="160"/><circle cx="641" cy="506" r="240"/><circle cx="641" cy="506" r="320"/><circle cx="641" cy="506" r="400"/><circle cx="641" cy="506" r="480"/><circle cx="641" cy="506" r="560"/><circle cx="641" cy="506" r="640"/></g></svg>

package/src/assets/svg/crystal.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 523 666" opacity="0.075"><defs><style>.a{fill:#3d7b87}</style><clipPath id="a"><path fill="#fff" d="M0 0h523v666H0z"/></clipPath></defs><g clip-path="url(#a)"><g stroke="#3D7B87"><path d="m74 183 62-61 81 14 20 76-62 62-81-15-20-76Zm78 304-20-77"/><path 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 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 d="m521 406 20 77-62 61-82-14"/><path 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><g fill="#3d7b87"><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 205 131)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 263 359)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 268 68)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 327 295)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 306 221)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 364 449)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 324 585)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 181 631)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 60 179)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 121 405)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 125 115)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 183 343)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 39 390)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 161 269)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 19 315)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 223 494)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 80 541)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 347 84)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 407 311)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 410 22)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 470 249)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 449 175)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 508 401)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 465 539)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 493 36)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 225 205)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 284 433)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 241 571)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 98 618)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 81 253)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 141 481)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 369 158)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 428 385)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 385 523)"/><circle cx="10" cy="10" r="10" transform="matrix(1 -.33 .24 .9 511 113)"/></g></g></svg>

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

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="421" height="724" fill="none" viewBox="0 0 421 724"><g stroke="#3D7B87" 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/colors.njk

@@ -1,69 +0,0 @@
----
-title: Brand colors
-layout: system-page
-sidebar: brand
-tags: brand
-version: 1.0.0
-status: 'In production'
----
-
-{% from "components/alert/macro.njk" import alert %}
-{% from "components/prose/macro.njk" import prose, markdown %}
-{% from "includes/color-swatches.njk" import swatches %}
-
-<div class="u-flow--l">
-
-{{ markdown({
-    content: "Our color palette is built around our primary color, MP Petrol. We’ve included just enough tints and shades to provide useful options for designers. 
-    
-Step 0 is the 'default' shade for each color."
-}) }}
-
-<div class="u-wrap--content">
-
-{{ alert({
-    content: "<p>If you're building a website which consumes the Franklin CSS via CDN, see the <a href='/components/colour'>Components ➝ colors</a> page instead.</p>",
-    type: "info"
-})}}
-
-</div>
-
-{{ swatches({ print:true }) }}
-
-{{ markdown({
-    content: "# When to use color
-    
-The color palette works best when it's used in a balanced way; too much of a strong color can make a design feel crowded or busy. Instead, try to keep your designs to mainly white backgrounds, with Charcoal text, and splashes of color to highlight important elements.
-
-**Petrol** is our primary color - it represents Malvern Panalytical's spirit and personality. Petrol, together with **Blue**, are the colors you will use most often in your designs.
-
-**Green** is reserved for _calls to action_ - the single most important action that we want a reader or viewer to take next. On a web page for example, this would be the \"buy now\" button.
-
-**Rubine** is reserved for important notices or warnings. It's such an eye-catching color that it must be used sparingly.
-
-**Charcoal** is mainly used for text, but can also be used for other elements.
-
-**Utility Gold** is intended for notices which are less urgent than Rubine. It can also be used sparingly as an accent color, to contrast against Petrol and Blue.
-
-For interactive designs we also have **Utility Blue**, which is used for hyperlinks. Note: Utility Blue is not generally intended for printed materials.
-
-## Tints and shades
-Each color is provided in _steps_. Step 0 is the \"default\" for each color. If you need a colored background, consider using step 2 or 3, as step 0 or 1 will often be too overpowering.
-
-Using Petrol step 3 as a background color (instead of grey) can be a nice way to introduce a bit of our personality into a design.
-
-## Why so many blues?
-Petrol and Blue are part of our brand, but neither is suitable for hyperlinks in web or software environments: Blue doesn't provide enough contrast for legibility, and we didn't want to overuse Petrol. We added Utility Blue to fill this gap."
-}) }}
-
-{{ alert({
-    type: 'warning',
-    content: '<ul>
-        <li>No other solid color tints and shades are permitted as brand colors.</li>
-        <li>MP Rubine must only be used as a solid fill color - not as a gradient, and not in tints and shades.</li>
-        <li>Gradients from a primary color to white are permitted, as are transparent gradients from primary brand color to background image.</li>
-        <li>An additional white gradient can be used to aid legibility if necessary.</li>
-    </ul>'
-}) }}
-
-</div>

package/src/brand/illustration.md

@@ -1,50 +0,0 @@
----
-title: Illustration
-layout: content-page
-sidebar: brand
-tags: brand
-version: 1.0.0
-status: 'Ready'
----
-Photography covers most of our needs for visual imagery, but there are times when photography isn't a good fit. For example when dealing with more abstract transactional concepts like "log in" or "verify your account". In these cases, we use illustration to add some vibrance to our designs.
-
-## Guidelines
-Our illustration style is still a work-in-progress; currently it follows a few simple guidelines.
-
-- Vector
-- Isometric perspective
-- Simple details
-- Small characters (usually) around a large object
-- Limited color palette
-- 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 them available on this site in future.
-
-## Examples
-
-<div class="c-library__illustration-grid">
-
-![An illustration of several small people sitting and standing around an oversized laptop][login]
-
-![An illustration of several small people carrying an oversized envelope][thankyou]
-
-![An illustration of one person welcoming another through a doorway, with golden light on the other side][confirm]
-
-![An illustration of people helping each other up a staircase][support]
-
-![An illustration of a postal worker delivering a speech bubble to a mother and child][opt-in]
-
-![An illustration of a person stepping through an empty frame of an oversized web browser window][404]
-
-![An illustration of several small people standing around an oversized janitor's warning sign][500]
-
-</div>
-
-[login]: https://p3.aprimocdn.net/malvernpanalytical/192d2a88-af78-4670-a752-b0b90110745b/login3_Original%20file.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
-[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