mp-design-system 1.2.64 → 1.2.65

package/src/assets/scss/elements/reset.scss

@@ -1,139 +0,0 @@
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  min-height: 100vh;
-  margin: 0;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-blockquote,
-pre,
-ol,
-ul,
-figure {
-  padding: 0;
-  margin: 0;
-}
-
-img {
-  max-width: 100%;
-  display: block;
-  height: auto;
-  border: none;
-}
-
-article,
-aside,
-figure,
-footer,
-header,
-aside,
-main,
-nav {
-  display: block;
-}
-
-iframe {
-  border: none;
-}
-
-// Typography
-
-@mixin mp-reset-base {
-  font: weight() #{1.125rem}/lh() $font-stack;
-  @include step();
-  color: color('grey');
-}
-
-body {
-  @include mp-reset-base();
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-ol,
-dl {
-  margin: 0
-}
-
-ul, ol, p {
-  line-height: lh();
-}
-
-a {
-  text-decoration: none;
-}
-
-a,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-}
-
-// Lists
-
-.mp ol,
-.mp ul {
-  list-style: none;
-}
-
-// Font styles
-
-cite,
-address {
-  font-style: normal;
-}
-
-// Form
-
-[type="submit"],
-[type="button"],
-button {
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  appearance: none;
-  padding: 0;
-  cursor: pointer;
-  border: none;
-  color: inherit;
-  font: inherit;
-}
-
-label {
-  cursor: pointer;
-}
-
-fieldset {
-  border: 0;
-  padding: 0.01em 0 0 0;
-}
-
-// Animation
-
-@media (prefers-reduced-motion:reduce) {
-  * {
-    -webkit-animation: none!important;
-    animation: none!important;
-    transition: none!important;
-    scroll-behavior: auto!important;
-  }
-}

package/src/assets/scss/elements/typography.scss

@@ -1,25 +0,0 @@
-body {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-:focus {
-  outline: 2px solid color('petrol');
-}
-
-.body--blog {
-  .c-h--page-title,
-  .c-hero__content,
-  .o-prose--blog,
-  .u-lede,
-  .c-event-card,
-  .c-h--step-4,
-  .c-h--step-3,
-  .c-h--step-2,
-  .c-h--step-1,
-  .c-card__title {
-    -moz-font-feature-settings: "salt";
-    -webkit-font-feature-settings: "salt";
-    font-feature-settings: "salt";
-  }
-}

package/src/assets/scss/foundations/animation.scss

@@ -1,4 +0,0 @@
-@keyframes spin {
-    from { transform: rotate(0deg) }
-    to { transform: rotate(360deg) }
-}

package/src/assets/scss/foundations/colour.scss

@@ -1,85 +0,0 @@
-$f-mp-petrol: #005461;
-$f-mp-blue: #00A2C2;
-$f-mp-green: #13AA13;
-$f-mp-grey: #333333;
-$f-mp-red: #CE0058;
-$f-mp-utility-blue: #006DAF;
-$f-mp-utility-orange: #F2A60D;
-
-@function mp-mix($background, $mixer, $percentage) {
-  $percent: alpha(rgba($mixer, $percentage)) * 100%;
-  @return mix($mixer, $background, $percent);
-}
-
-$colours: (
-  // 'petrol': (
-  //   'step--1': mp-mix($f-mp-petrol, black, 28%),
-  //   'step-0': $f-mp-petrol,
-  //   'step-1': mp-mix($f-mp-petrol, white, 28%),
-  //   'step-2': mp-mix($f-mp-petrol, white, 76%),
-  //   'step-3': mp-mix($f-mp-petrol, white, 92%),
-  // ),
-
-  'petrol': (
-      'step--2': #002126,
-      'step--1': #003039,
-      'step-0': $f-mp-petrol,
-      'step-1': #3D7B87,
-      'step-2': #BFD3D6,
-      'step-3': #EBF1F2,
-  ),
-
-  'blue': (
-    'step--1': mp-mix($f-mp-blue, black, 28%),
-    'step-0': $f-mp-blue,
-    'step-1': mp-mix($f-mp-blue, white, 28%),
-    'step-2': mp-mix($f-mp-blue, white, 76%),
-    'step-3': mp-mix($f-mp-blue, white, 92%)
-  ),
-
-  'green': (
-    'step--1': mp-mix($f-mp-green, black, 28%),
-    'step-0': $f-mp-green,
-    'step-1': mp-mix($f-mp-green, white, 28%),
-    'step-2': mp-mix($f-mp-green, white, 76%),
-    'step-3': mp-mix($f-mp-green, white, 92%),
-  ),
-
-  'red': (
-    'step--1': mix(black, $f-mp-red, 25%),
-    'step-0': $f-mp-red,
-    'step-1': mp-mix($f-mp-red, white, 28%),
-    'step-2': mp-mix($f-mp-red, white, 76%),
-    'step-3': mp-mix($f-mp-red, white, 92%),
-  ),
-
-  'utility-blue': (
-    'step--1': mp-mix($f-mp-utility-blue, black, 28%),
-    'step-0': $f-mp-utility-blue,
-    'step-1': mp-mix($f-mp-utility-blue, white, 28%),
-    'step-2': mp-mix($f-mp-utility-blue, white, 76%),
-    'step-3': mp-mix($f-mp-utility-blue, white, 92%),
-  ),
-
-  'utility-orange': (
-    'step--1': mp-mix($f-mp-utility-orange, black, 28%),
-    'step-0': $f-mp-utility-orange,
-    'step-1': mp-mix($f-mp-utility-orange, white, 28%),
-    'step-2': mp-mix($f-mp-utility-orange, white, 76%),
-    'step-3': mp-mix($f-mp-utility-orange, white, 92%),
-  ),
-
-  'grey': (
-    -50: mix(black, #CCC, 50%),
-    'step--2': mp-mix($f-mp-grey, black, 80%),
-    'step--1': mp-mix($f-mp-grey, black, 45%),
-    'step-0': $f-mp-grey,
-    'step-1': mp-mix($f-mp-grey, white, 48%),
-    'step-2': mp-mix($f-mp-grey, white, 76%),
-    'step-3': mp-mix($f-mp-grey, white, 92%)
-  ),
-
-  'white': (
-    'step-0': #FFF
-  )
-);

package/src/assets/scss/foundations/index.scss

@@ -1,4 +0,0 @@
-@import './typography.scss';
-@import './space.scss';
-@import './colour.scss';
-@import './animation.scss';

package/src/assets/scss/foundations/space.scss

@@ -1,57 +0,0 @@
-@use 'sass:math';
-
-$wrapper: 78.75rem;
-
-$space-base: 18;
-$spaces: (
-  "3xs": 0.25,
-  "2xs": 0.5,
-  "xs": 0.75,
-  "s": 1,
-  "m": 1.5,
-  "l": 2,
-  "xl": 3,
-  "2xl": 4,
-  "3xl": 6,
-  "4xl": 8,
-);
-
-:root {
-  --max-screen: #{ math.div($f-max-width, 16) };
-  --fc-screen: 100vw;
-  --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));
-
-  --fc-base: #{$space-base};
-
-  @each $space, $_ in $spaces {
-    --fc-#{$space}: #{space-size($space)};
-    --space-#{$space}: calc(var(--fc-#{$space}) / 16 * 1rem);
-  }
-
-  $min: "";
-  @each $max, $_ in $spaces {
-    @if ($min) {
-      @include space-between($min, $max);
-    }
-    $min: $max;
-  }
-
-  @include space-between(s, l);
-  @include space-between(s, m);
-  @include space-between(xs, l);
-  @include space-between(m, xl);
-  @include space-between(l, 2xl);
-  @include space-between(s, xl);
-  @include space-between(l, 3xl);
-  @include space-between(xl, 3xl);
-  @include space-between(l, 4xl);
-  @include space-between(3xs, m);
-
-  --gutter: var(--space-s-l);
-}
-
-@media screen and (min-width: 75em) {
-  :root {
-    --fc-screen: calc(var(--max-screen) * 1rem);
-  }
-}

package/src/assets/scss/foundations/typography.scss

@@ -1,159 +0,0 @@
-$weights: (
-  base: 400,
-  semi: 600,
-  bold: 700
-);
-
-$line-heights: (
-  base: 1.2,
-  prose: 1.6,
-);
-
-$letter-spacings: (
-  '4%': 0.04em,
-  '2%': 0.02em,
-  base: -0.01em,
-  '-2%': -0.02em,
-  '-3%': -0.03em
-);
-
-$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-
-/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, */
-$steps: (
-  -2: (
-    min: 12.64,
-    max: 12.50,
-    ls: base
-  ),
-
-  -1: (
-    min: 14.22,
-    max: 15.00,
-    ls: base
-  ),
-
-  0: (
-    min: 16.00,
-    max: 18.00,
-    ls: base
-  ),
-
-  1: (
-    min: 18.00,
-    max: 21.60,
-    ls: '-2%'
-  ),
-
-  2: (
-    min: 20.25,
-    max: 25.92,
-    ls: '-2%'
-  ),
-
-  3: (
-    min: 22.78,
-    max: 31.10,
-    ls: '-2%'
-  ),
-
-  4: (
-    min: 25.63,
-    max: 37.32,
-    ls: '-3%'
-  ),
-
-  5: (
-    min: 28.83,
-    max: 44.79,
-    ls: '-3%'
-  ),
-
-  6: (
-    min: 32.44,
-    max: 53.75,
-    ls: '-3%'
-  ),
-
-  7: (
-    min: 36.49,
-    max: 64.50,
-    ls: '-3%'
-  ),
-
-  8: (
-    min: 41.05,
-    max: 77.40,
-    ls: '-3%'
-  ),
-
-  9: (
-    min: 46.18,
-    max: 92.88,
-    ls: '-3%'
-  ),
-
-  10: (
-    min: 51.96,
-    max: 111.45,
-    ls: '-3%'
-  )
-);
-
-$f-min-width: 320;
-$f-max-width: 1332;
-
-:root {
-  --fluid-min-width: #{$f-min-width};
-  --fluid-max-width: #{$f-max-width};
-
-  --fluid-screen: 100vw;
-  --fluid-bp: calc(
-    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
-      (var(--fluid-max-width) - var(--fluid-min-width))
-  );
-}
-
-@media screen and (min-width: #{$f-max-width * 1px}) {
-  :root {
-    --fluid-screen: calc(var(--fluid-max-width) * 1px);
-  }
-}
-
-:root {
-  @each $name, $step in $steps {
-    --f-#{$name}-min: #{map-get($step, min)};
-    --f-#{$name}-max: #{map-get($step, max)};
-    --step-#{$name}: calc(
-      ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) *
-        var(--fluid-bp)
-    );
-  }
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: #{'../fonts/inter-regular.woff2'} format("woff2"),
-       #{'../fonts/inter-regular.woff'} format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: #{'../fonts/inter-semibold.woff2'} format("woff2"),
-       #{'../fonts/inter-semibold.woff'} format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: #{'../fonts/inter-bold.woff2'} format("woff2"),
-       #{'../fonts/inter-bold.woff'} format("woff");
-}