@mtvh/mtvh-design-system 0.0.5 → 0.0.6

package/assets/scss/base/_mixins.scss

@@ -1,55 +1,3 @@
-@mixin animate-default() {
-  -webkit-transition: transform 0.3s ease-out;
-  -moz-transition: transform 0.3s ease-out;
-  -ms-transition: transform 0.3s ease-out;
-  -o-transition: transform 0.3s ease-out;
-  transition: transform 0.3s ease-in;
-}
-
-@mixin hover-animate( $position : 'left', $rotate : '') {
-
-   @if $position == 'right' {
-    &:hover:not(.disabled) {
-      &:after {
-        -webkit-transform: translateX(4px);
-        -moz-transform: translateX(4px);
-        -ms-transform: translateX(4px);
-        -o-transform: translateX(4px);
-        transform: translateX(4px);
-      }
-    }
-  } @else {
-    &:hover:not(.disabled) {
-      &:before{
-        -webkit-transform: translateX(-4px);
-        -moz-transform: translateX(-4px);
-        -ms-transform: translateX(-4px);
-        -o-transform: translateX(-4px);
-        transform: translateX(-4px);
-      }
-    }
-  }
-
-}
-
-@mixin icon-transform($direction) {
-  //default is a right
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  content:' ';
-  opacity: 1;
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  margin-top: -.125rem;
-  @if $direction == 'right' {
-    margin-left: $button-icon-spacing;
-  }
-  @else {
-    margin-right: $button-icon-spacing;
-  }
-}
-
 // arrow direction: left, right, up, down, Default: right
 // arrow position: left, right
 @mixin mtvh-icon($icon : '', $color :'',  $hover-color :'', $active-color :'', $border-color :'', $position : 'left', $direction :  'right', $width : 20px, $height: 20px, $svg-path : null) {
@@ -147,25 +95,3 @@
     background-size: 100%;
   }
 }
-
-
-@mixin form-invalid-text() {
-  color: var(--mtvh-red-04);
-  font-size: $font-size-sm;
-  font-weight: bold;
-  padding-left: $mtvh-spacing-6;
-  position: relative;
-  display: flex;
-  gap: $mtvh-spacing-3;
-  &:before {
-    content: '';
-    -webkit-mask: get-icon('error',$danger);
-    mask: get-icon('error',$danger);
-    background-color: currentColor;
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    margin-left: -$mtvh-spacing-6;
-    padding-right: $icon-size-scale-sm;
-    margin-top: $mtvh-spacing-2;
-  }
-}

package/assets/scss/components/_all.scss

@@ -1,5 +1,9 @@
-@import 'button';
-@import 'content-block';
-@import 'form';
-@import 'link';
-@import 'breadcrumb';
+@import '_button';
+@import "_close";
+@import '_content-block';
+@import '_form';
+@import '_link';
+@import '_breadcrumb';
+@import '_list-group';
+@import '_stepper';
+@import '_banner';

package/assets/scss/components/_banner.scss

@@ -0,0 +1,107 @@
+.mtvh-banner {
+
+  background-color: var(--#{$prefix}banner-bg);
+  color: var(--#{$prefix}banner-color);
+  display: none;
+
+  &:has(.mtvh-banner-row) {
+    display: block;
+  }
+
+  a {
+    color: var(--#{$prefix}banner-link-color);
+    &:focus-visible {
+      outline-color: inherit;
+    }
+  }
+
+  .mtvh-btn {
+    align-self: flex-start;
+    @include media-breakpoint-up(lg) {
+      margin-left: $mtvh-spacing-5;
+    }
+  }
+
+  .mtvh-icon {
+    @include mtvh-banner-icon();
+  }
+
+}
+
+
+.mtvh-banner-row {
+
+  --#{$prefix}banner-padding-y :#{$mtvh-spacing-3};
+  --#{$prefix}banner-padding-x : 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding:  var(--#{$prefix}banner-padding-y) var(--#{$prefix}banner-padding-x);
+
+
+  .btn-close {
+    flex-shrink: 0;
+    top: unset;
+    position: relative;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  + .mtvh-banner-row {
+    border-top: 1px solid var(--#{$prefix}border-color);
+  }
+
+  &.alert {
+    --#{$prefix}alert-margin-bottom: 0;
+  }
+
+  span {
+    align-content: center;
+  }
+
+  &--masquerading {
+    flex-wrap: wrap;
+
+    &:has(.mtvh-btn) {
+      span {
+        @include media-breakpoint-down(lg) {
+          margin-bottom: $mtvh-spacing-5;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: unset;
+      span {
+        margin-bottom: 0
+      }
+    }
+  }
+}
+
+
+@each $state in map-keys($banner-theme-colors) {
+  .mtvh-banner-#{$state} {
+    --#{$prefix}banner-color: var(--#{$prefix}black);
+    --#{$prefix}border-color: var(--#{$prefix}black);
+    --#{$prefix}banner-bg: var(--#{$prefix}banner-#{$state}-bg);
+
+    --#{$prefix}banner-link-color: var(--#{$prefix}black);
+    --#{$prefix}banner-icon: var(--#{$prefix}banner-#{$state}-icon);
+
+    @if($state == "emergency" or $state == "dark") {
+      --#{$prefix}banner-link-color: var(--#{$prefix}white);
+      --#{$prefix}banner-color: var(--#{$prefix}white);
+      --#{$prefix}border-color: var(--#{$prefix}transparent);
+    }
+    @if($state == "dark") {
+      .mtvh-banner-row {
+        --#{$prefix}banner-padding-y: #{$mtvh-spacing-5};
+      }
+    }
+  }
+}
+// scss-docs-end banner-modifiers
+

package/assets/scss/components/_breadcrumb.scss

@@ -11,16 +11,8 @@
     display: none;
   }
 
+  @include media-breakpoint-down('lg') {
 
-  @include media-breakpoint-down('md') {
-
-    &:before {
-      content: " ";
-      height: 32px;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
     &:after {
       position: absolute;
       right: 0;

package/assets/scss/components/_close.scss

@@ -0,0 +1,52 @@
+.btn-close {
+
+  &-circle {
+
+    border-radius: 50%;
+    -moz-border-radius:50%;
+    -webkit-border-radius: 50%;
+    width: $btn-close-circle-width;
+    height: $btn-close-circle-height;
+    padding: $mtvh-spacing-4;
+
+    &:focus-visible {
+      box-shadow: none;
+      outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-close-focus-outline-color);
+      outline-offset: var(--#{$prefix}btn-outline-border);
+      text-decoration: none;
+      -webkit-tap-highlight-color: unset;
+    }
+    &:focus:not(:focus-visible) {
+      outline: 0;
+    }
+    &:hover {
+      background-color: var(--#{$prefix}btn-close-hover-bg-color);
+      cursor: pointer;
+    }
+  }
+
+}
+.alert-dismissible {
+  .btn-close-circle {
+      top: $mtvh-spacing-5;
+      padding: $mtvh-spacing-4;
+  }
+}
+
+@each $state in map-keys($banner-theme-colors) {
+  .mtvh-banner-#{$state} {
+    .btn-close {
+      --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
+      --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
+    }
+  }
+}
+
+@each $state in map-keys($content-block-theme-colors) {
+  .mtvh-content-block-bg--#{$state} {
+    .btn-close {
+      --#{$prefix}btn-close-focus-outline-color: var(--#{$prefix}dark-outline-color);
+      --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
+    }
+  }
+}

package/assets/scss/components/_content-block.scss

@@ -27,6 +27,9 @@ $mtvh-content-block-border: (
   grey-03: (
     border-color: var(--mtvh-grey-03)
   ),
+  grey-04: (
+    border-color: var(--mtvh-grey-04)
+  ),
   red-04: (
     border-color: var(--mtvh-red-04)
   ),
@@ -160,7 +163,7 @@ $mtvh-content-block-border: (
         margin-bottom: $mtvh-spacing-3;
     }
 
-    h3:has(+ p + p ),  h3:has(+ p + p + p){
+    h3:has(+ p + p ),  h3:has(+ p + p + p), h3:has(+ div){
       margin-bottom: $mtvh-spacing-5;
     }
 
@@ -175,7 +178,7 @@ $mtvh-content-block-border: (
       max-width: 380px;
     }
     @include media-breakpoint-up(lg) {
-      max-width: 60%;
+      max-width: 62%;
     }
     @include media-breakpoint-up(xl) {
       max-width: 65%;

package/assets/scss/components/_form.scss

@@ -5,6 +5,35 @@
   @import "../forms/labels";
   @import "../forms/validation";
   @import "../forms/formio";
+  @import "../forms/form-date-input";
+
+
+  background-color: var(--mtvh-white);
+  margin: 0 calc(var(--mtvh-gutter-x)* -0.5);
+  padding: var(--mtvh-gutter-x);
+  overflow: hidden;
+
+  @include media-breakpoint-up("md") {
+    padding: $mtvh-spacing-5 $mtvh-spacing-11 $mtvh-spacing-5 $mtvh-spacing-11;
+  }
 
 }
+.mtvh-form-container {
+
+  @include media-breakpoint-up("md") {
 
+  }
+  @include media-breakpoint-up("lg") {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+  @include media-breakpoint-up("xl") {
+      padding-left: 285px;
+      padding-right: 285px;
+  }
+
+  .form-group {
+    margin-top: $form-group-margin-top;
+  }
+
+}

package/assets/scss/components/_list-group.scss

@@ -0,0 +1,21 @@
+.list-group-item {
+  margin-bottom: 0;
+  border-radius: 0;
+
+  & + .list-group-item {
+    border-top-width: 1px;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  &-border-top {
+    border :0;
+    border-top: 1px solid;
+  }
+
+  &--border-yellow-02 {
+    border-color: var(--mtvh-yellow-02);
+  }
+}

package/assets/scss/components/_stepper.scss

@@ -0,0 +1,88 @@
+.mtvh-stepper {
+
+  --#{$prefix}stepper-font-color: #{$stepper-font-color};
+  --#{$prefix}stepper-sm-font-color: #{$stepper-sm-font-color};
+  --#{$prefix}stepper-font-size: #{$stepper-font-size};
+  --#{$prefix}stepper-bg-color: #{$stepper-bg-color};
+  --#{$prefix}stepper-active-bg-color: #{$stepper-active-bg-color};
+  --#{$prefix}stepper-disabled-bg-color: #{$stepper-disabled-bg-color};
+  --#{$prefix}stepper-disabled-font-color: #{$stepper-disabled-font-color};
+  --#{$prefix}stepper-item-padding-x: #{$stepper-item-padding-x};
+  --#{$prefix}stepper-item-padding-y: #{$stepper-item-padding-y};
+  --#{$prefix}stepper-breakpoint: #{$stepper-breakpoint};
+
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  position: relative;
+  width: 100%;
+  padding: 0 0 $mtvh-spacing-9 0;
+  margin: 0 0 0 0;
+  justify-content: center;
+  color: var(--#{$prefix}stepper-font-color);
+  text-align: center;
+
+  @include media-breakpoint-up($stepper-breakpoint) {
+     padding-bottom: 0;
+  }
+
+  .mtvh-stepper-item {
+
+    counter-increment: count;
+    flex-basis: 100%;
+    margin-right: 1px;
+    color: var(--#{$prefix}stepper-disabled-font-color);
+    font-size: var(--#{$prefix}stepper-font-size);
+    padding: var(--#{$prefix}stepper-item-padding-x) var(--#{$prefix}stepper-item-padding-y);
+    background-color: var(--#{$prefix}stepper-disabled-bg-color);
+
+    &:has( a + span), &:has( span + a ) {
+      background-color: var(--#{$prefix}stepper-bg-color);
+      color: var(--#{$prefix}stepper-font-color);
+    }
+
+    &:first-child {
+      border-radius: 50px 0 0 50px;
+    }
+    &:last-child {
+      border-radius: 0 50px  50px 0;
+    }
+    &.active {
+      background-color: var(--#{$prefix}stepper-active-bg-color);
+    }
+    &:before {
+      counter-increment: count-1;
+      content: counter(count);
+      @include media-breakpoint-up($stepper-breakpoint) {
+        content: counter(count)  ".";
+      }
+
+    }
+    a {
+      text-decoration: none;
+      color: var(--#{$prefix}stepper-font-color);
+      font-size: var(--#{$prefix}stepper-font-size);
+    }
+
+    a, span {
+      @include media-breakpoint-down($stepper-breakpoint) {
+
+        opacity: 0;
+        position: absolute;
+        top: 80%;
+        left: 50%;
+        margin-left: auto;
+        text-align: center;
+        transform: translate(-50%, -50%);
+        color: var(--#{$prefix}stepper-sm-font-color);
+        width:100%;
+      }
+    }
+
+    &.active {
+      span, a {
+        opacity: 1;
+      }
+    }
+  }
+}

package/assets/scss/config/_map-list.scss

@@ -29,7 +29,9 @@ $icons: (
 ,'hamburger' : '<svg width="32" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.811 21.289c-.362 0-.671-.128-.927-.384a1.266 1.266 0 0 1-.384-.929c0-.356.128-.663.384-.918.256-.256.565-.384.927-.384h28.387c.356 0 .662.128.918.384s.384.563.384.92c0 .362-.128.671-.384.927a1.253 1.253 0 0 1-.918.384H1.81Zm0-8.942c-.362 0-.671-.128-.927-.385a1.265 1.265 0 0 1-.384-.928c0-.357.128-.663.384-.919s.565-.384.927-.384h28.387c.356 0 .662.129.918.385s.384.563.384.92c0 .362-.128.671-.384.927a1.253 1.253 0 0 1-.918.384H1.81Zm0-8.943c-.362 0-.671-.128-.927-.384A1.266 1.266 0 0 1 .5 2.092c0-.357.128-.663.384-.92C1.14.918 1.449.79 1.81.79h28.387c.356 0 .662.128.918.384.256.257.384.563.384.92 0 .362-.128.672-.384.928a1.253 1.253 0 0 1-.918.383H1.81Z" fill="#000"/></svg>'
 ,'expand' : '<svg width="29" height="29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.448 6.664c-.288.01-.506-.093-.686-.426-.18-.332-.218-.628.04-.84.259-.212 2.023-.411 2.667-.5.644-.09 1.737-.31 2.304-.467.567-.157 1.021-.285 1.241-.045.22.24.38.507.264 1.235-.115.727-.783 4.466-.814 4.781-.031.315-.587.315-.812.166-.225-.15-.581-.207-.501-.615.08-.408.385-2.935.385-2.935s-.32.42-1.056 1.17c-1.059 1.08-1.406 1.476-2.3 2.301-.895.826-2.363 2.081-2.805 2.386-.443.306-.886.619-1.029.103-.143-.515.243-1.14.84-1.749.597-.608 1.597-1.524 2.7-2.613 1.266-1.248 2.372-2.375 2.372-2.375s-.883.143-1.5.256a8.543 8.543 0 0 1-1.31.159v.008ZM10.067 23.411c.289-.01.507.094.687.426.18.332.218.629-.04.84-.26.212-2.023.412-2.667.5-.644.09-1.738.311-2.305.468-.566.157-1.02.284-1.24.044-.22-.24-.38-.507-.264-1.234.115-.727.783-4.466.814-4.782.031-.315.587-.314.811-.165.225.149.582.206.502.614-.08.408-.385 2.936-.385 2.936s.32-.421 1.055-1.17c1.06-1.08 1.407-1.477 2.301-2.302.894-.826 2.362-2.08 2.805-2.386.443-.305.885-.619 1.028-.103.143.516-.243 1.141-.84 1.75-.596.607-1.596 1.524-2.699 2.613-1.267 1.248-2.372 2.374-2.372 2.374s.882-.143 1.499-.256a8.534 8.534 0 0 1 1.31-.159v-.008Z" fill="#000"/></svg>'
 ,'collapse' : '<svg width="29" height="29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.911 8.78c.288-.011.507.093.686.425.18.333.218.629-.04.84-.258.212-2.022.412-2.666.501-.644.09-1.738.31-2.305.467-.567.157-1.02.284-1.24.044-.22-.24-.38-.507-.265-1.234.116-.727.784-4.466.815-4.782.03-.315.586-.314.811-.165.225.149.582.206.502.614-.08.408-.386 2.936-.386 2.936s.32-.42 1.056-1.17c1.06-1.08 1.406-1.476 2.3-2.302.895-.825 2.363-2.08 2.806-2.386.442-.305.885-.618 1.028-.103.143.516-.243 1.141-.84 1.75-.596.608-1.597 1.524-2.7 2.613-1.266 1.248-2.371 2.374-2.371 2.374s.882-.143 1.499-.256a8.542 8.542 0 0 1 1.31-.158v-.009ZM5.366 21.033c-.288.01-.507-.094-.686-.426-.18-.333-.218-.629.04-.84.259-.212 2.023-.412 2.667-.501.644-.09 1.737-.31 2.304-.467.567-.157 1.021-.284 1.24-.044.22.24.38.507.265 1.234-.115.727-.783 4.466-.814 4.782-.031.315-.587.314-.812.165-.225-.149-.581-.206-.501-.614.08-.408.385-2.936.385-2.936s-.32.42-1.056 1.17c-1.059 1.08-1.406 1.476-2.3 2.302-.895.825-2.363 2.08-2.805 2.386-.443.305-.886.618-1.029.103-.143-.516.243-1.141.84-1.75.597-.608 1.597-1.524 2.7-2.613 1.266-1.248 2.372-2.374 2.372-2.374s-.883.143-1.5.256a8.544 8.544 0 0 1-1.31.158v.009Z" fill="#000"/></svg>'
-
+,'border-tick' : '<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><path d="M22.174 11.832c0-4.67-5.278-9.7-10.91-8.623-13.02 2.156-15.483 22.634-2.11 22.634 13.372 0 13.02-9.34 13.02-14.011Z"/><path fill="#000" d="m16.618 9.722.552-.45.004-.005c.268-.223.602-.338.931-.338.348 0 .695.128.958.402.48.492.49 1.36-.067 1.813l-.462.377c-1.347 1.096-2.7 2.197-3.867 3.47-.126.16-.248.325-.37.488-.254.34-.508.68-.797.988-.16.171-.36.346-.574.453a3.51 3.51 0 0 1-.45.158c-.334.099-.855.009-1.131-.21-.272-.209-.357-.303-.557-.59a2.39 2.39 0 0 1-.143-.221 36.72 36.72 0 0 1-.262-.465c-.156-.28-.312-.559-.481-.831-.294-.479-.615-.94-.944-1.402-.192-.27-.196-.693-.098-.992.102-.317.334-.586.641-.744.312-.163.69-.197 1.033-.094.356.107.57.329.775.615.36.51.713 1.018 1.033 1.548.165-.2.339-.398.512-.59.437-.487.905-.932 1.39-1.373.768-.695 1.571-1.351 2.374-2.007Z"/><path fill="#000" fill-rule="evenodd" d="M11.991 1.139a9.882 9.882 0 0 1 1.661-.27h.005c.209-.017.418-.025.628-.025.347 0 .694.021 1.046.051a8.951 8.951 0 0 1 3.652 1.12c.125.035.25.086.37.15.114.059.23.116.348.174.404.199.812.4 1.175.656.325.23.641.47.953.718.65.509 1.287 1.048 1.875 1.625a8.03 8.03 0 0 1 1.647 2.34c.303.658.566 1.338.726 2.039.17.736.25 1.48.285 2.232a6.09 6.09 0 0 1-.027.787l-.017.235c-.018.3-.054.599-.094.898-.191 1.429-.574 2.831-1.202 4.14-.343.71-.708 1.394-1.114 2.07-.387.64-.864 1.223-1.358 1.787a15.008 15.008 0 0 1-1.62 1.582c-.268.225-.564.427-.857.628l-.057.04c-.325.222-.659.448-1.01.632-.758.39-1.533.71-2.348.97-.33.108-.668.18-1.01.24-.637.112-1.297.193-1.942.167-1.457-.06-2.94-.26-4.298-.791a18.953 18.953 0 0 1-2.173-.983c-.597-.325-1.198-.663-1.733-1.078-.614-.48-1.202-.958-1.75-1.501a11.185 11.185 0 0 1-1.322-1.62c-.37-.54-.749-1.096-1.02-1.686-.32-.71-.601-1.424-.829-2.168C.372 15.614.296 14.9.256 14.19a6.763 6.763 0 0 1 0-.996c.08-.787.205-1.557.379-2.33.142-.642.423-1.258.708-1.848.316-.659.668-1.296 1.122-1.873.481-.612.993-1.232 1.581-1.754a24.366 24.366 0 0 1 1.737-1.394A16.496 16.496 0 0 1 7.76 2.777c.615-.325 1.243-.642 1.902-.886a24.128 24.128 0 0 1 2.33-.752Zm5.081 2.8c-.49-.183-.975-.32-1.482-.431v.004a9.936 9.936 0 0 0-1.817-.09c-.86.12-1.688.351-2.512.612-.628.235-1.247.483-1.835.795a28.1 28.1 0 0 0-1.884 1.095c-.499.36-.975.731-1.434 1.137-.4.351-.761.732-1.118 1.12a13.11 13.11 0 0 0-.628.843c-.184.274-.344.555-.507.84l-.026.045a7.631 7.631 0 0 0-.437 1.035c-.13.424-.24.838-.339 1.27l-.01.06a7.543 7.543 0 0 0-.119 1.014c-.009.415-.004.816.018 1.231.102.77.32 1.493.583 2.22l.034.075c.171.377.341.752.558 1.1.232.377.468.745.717 1.108.237.304.473.608.744.881.32.32.646.625.984.924A19.68 19.68 0 0 0 8.1 21.883c.49.307 1.025.551 1.554.793l.071.032.056.022c.382.151.77.304 1.169.415.4.107.797.205 1.202.29.78.107 1.564.167 2.352.12a10.8 10.8 0 0 0 1.875-.427c.311-.125.623-.249.922-.402.365-.189.717-.385 1.068-.6l-.102.074-.102.072c.476-.33.957-.667 1.38-1.06.387-.364.753-.736 1.104-1.125.352-.432.695-.868.98-1.343.285-.474.552-.953.81-1.44.25-.535.468-1.083.66-1.643.178-.526.307-1.06.414-1.6.12-.88.192-1.752.156-2.638a7.244 7.244 0 0 0-.138-.872c-.094-.41-.205-.804-.339-1.202a9.672 9.672 0 0 0-.863-1.62c-.606-.745-1.368-1.377-2.116-1.989a9.851 9.851 0 0 0-.77-.573 9.041 9.041 0 0 0-.869-.5 1.255 1.255 0 0 1-.552-.193 7.848 7.848 0 0 0-.949-.534Z" clip-rule="evenodd"/></svg>'
+,'border-warning-sign' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 27 27"><path d="M20.137 7.841c-3.409-4.18-5.032-5.916-7.173-5.568-.795 0-2.784 1.74-3.855 4.292-1.07 2.553-3.747 7.773-5.032 11.95-1.285 4.176.214 5.336 1.285 5.336 1.07 0 6.317.464 9.743 0s10.6-1.624 11.135-3.944c.675-2.927-2.034-7.077-6.103-12.066Z"/><path fill="#000" d="M14.045 19.196c-.428-.49-.7-.607-1.128-.706-.811-.185-1.54.275-1.806 1.02a1.946 1.946 0 0 0-.11.576c-.012.623.278 1.269.69 1.686a1.418 1.418 0 0 0 1.776.21c.534-.34 1.06-1.045.836-1.69-.015-.04-.016-.12-.017-.221-.003-.243-.008-.608-.204-.833l-.037-.042ZM11.933 16.77c.4.549 1.083.491 1.477-.024.695-.912.637-2.314.587-3.524-.01-.239-.02-.47-.023-.688-.007-.432-.001-.866.004-1.3.014-1.06.027-2.121-.143-3.165-.185-1.113-1.975-.984-2.205.034-.27 1.191-.265 2.447-.261 3.678 0 .265.002.529 0 .79-.002.234-.01.48-.018.733-.041 1.192-.087 2.547.582 3.459v.006Z"/><path fill="#000" fill-rule="evenodd" d="M17.115 4.206c2.436 3.336 4.647 6.914 6.625 10.562 1.26 2.325 4.732 10.183.702 10.827-5.246.838-10.746.56-16.068.293h-.002c-.471-.024-.941-.048-1.409-.07a35.16 35.16 0 0 0-1.046-.029c-1.558-.027-3.378-.059-4.629-.842-1.83-1.147-1.013-4.151-.455-5.79 1.117-3.273 2.707-6.133 4.404-9.106.269-.47.62-1.009.971-1.55.334-.513.67-1.027.936-1.486l-.009-.038c-.05-.213-.107-.453.05-.703C8.39 4.335 10.128 1.542 12.43.925c1.935-.52 3.449 1.573 4.49 3.013l.194.268Zm2.488 19.162c1.957-.362 4.127-.874 4.403-1.159.252-.26-.157-1.089-.585-1.956-.307-.62-.623-1.26-.713-1.726-.141-.727-1.2-2.446-2.13-3.958-.498-.81-.96-1.562-1.225-2.068-.386-.74-1.222-1.856-2.063-2.98-.81-1.08-1.624-2.168-2.049-2.934-.865-1.562-1.947-2.678-2.488-2.79-.541-.111-2.606 2.537-3.363 3.988-.132.252-.29.547-.47.886-.859 1.61-2.23 4.183-3.75 7.594-.207.454-.443.939-.683 1.432-.82 1.687-1.689 3.476-1.689 4.512 0 .483.098.82.32 1.055.262.037.573.059.933.083l.387.028c4.892.368 10.154.375 15.165-.007Z" clip-rule="evenodd"/></svg>'
+,'border-info' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 27"><path d="M9.724 2.08c-4.73 0-9.822 5.362-8.731 11.082 2.183 13.226 22.919 15.729 22.919 2.145S14.453 2.08 9.724 2.08Z"/><path fill="#000" d="M15.89 7.284c-.304-.575-.542-.75-.936-.945-.747-.365-1.563-.084-1.99.58-.103.166-.19.34-.24.536-.154.604-.02 1.298.285 1.798.35.577 1.052.835 1.682.612.598-.209 1.27-.775 1.2-1.455a.901.901 0 0 1 .034-.22c.053-.237.132-.592-.007-.856l-.027-.05ZM13.431 11.653c.469-.516 1.281-.573 1.758-.024v.007c.796.911.742 2.266.693 3.458-.01.254-.02.5-.021.733-.003.261-.002.525 0 .79.004 1.231.01 2.487-.311 3.679-.274 1.017-2.405 1.146-2.624.034-.203-1.044-.187-2.106-.17-3.166.006-.434.012-.868.004-1.3-.004-.218-.016-.45-.027-.687-.06-1.21-.13-2.612.698-3.524Z"/><path fill="#000" fill-rule="evenodd" d="M12.992 1.139a9.882 9.882 0 0 1 1.66-.27h.005c.21-.017.419-.025.628-.025.348 0 .695.021 1.047.051a8.95 8.95 0 0 1 3.652 1.12c.124.035.249.086.37.15.114.059.23.116.347.174.404.199.813.4 1.175.656.325.23.642.47.953.718.65.509 1.287 1.048 1.875 1.625a8.03 8.03 0 0 1 1.648 2.34c.303.658.566 1.338.726 2.039.17.736.25 1.48.285 2.232.014.26-.007.525-.027.787l-.018.235c-.018.3-.053.599-.093.898-.192 1.429-.575 2.831-1.203 4.14-.342.71-.708 1.394-1.113 2.07-.387.64-.864 1.223-1.358 1.787a15.018 15.018 0 0 1-1.621 1.582c-.268.225-.563.427-.856.628l-.057.04c-.325.222-.66.448-1.011.632-.757.39-1.532.71-2.347.97-.33.108-.668.18-1.011.24-.637.112-1.296.193-1.942.167-1.456-.06-2.939-.26-4.297-.791a18.956 18.956 0 0 1-2.174-.983c-.596-.325-1.197-.663-1.732-1.078-.614-.48-1.202-.958-1.75-1.501a11.185 11.185 0 0 1-1.323-1.62c-.37-.54-.748-1.096-1.02-1.686-.32-.71-.6-1.424-.828-2.168-.21-.684-.285-1.398-.325-2.108a6.764 6.764 0 0 1 0-.996c.08-.787.205-1.557.379-2.33.142-.642.423-1.258.708-1.848.316-.659.668-1.296 1.122-1.873.48-.612.993-1.232 1.58-1.754a24.366 24.366 0 0 1 1.738-1.394A16.496 16.496 0 0 1 8.76 2.777c.615-.325 1.243-.642 1.902-.886a24.133 24.133 0 0 1 2.329-.752Zm5.081 2.8a10.65 10.65 0 0 0-1.483-.431v.004a9.936 9.936 0 0 0-1.817-.09c-.86.12-1.688.351-2.512.612-.628.235-1.247.483-1.834.795-.646.342-1.27.706-1.884 1.095-.499.36-.976.731-1.434 1.137-.401.351-.762.732-1.118 1.12a13.11 13.11 0 0 0-.628.843c-.184.274-.345.555-.508.84l-.026.045a7.631 7.631 0 0 0-.437 1.035c-.129.424-.24.838-.338 1.27l-.01.06a7.543 7.543 0 0 0-.12 1.014c-.008.415-.004.816.018 1.231.103.77.321 1.493.584 2.22l.034.075c.17.377.341.752.558 1.1.232.377.468.745.717 1.108.236.304.472.608.744.881.32.32.646.625.984.924a19.68 19.68 0 0 0 1.536 1.056c.49.307 1.026.551 1.555.793l.07.032.056.022c.383.151.77.304 1.17.415.4.107.797.205 1.202.29.78.107 1.563.167 2.351.12a10.8 10.8 0 0 0 1.875-.427c.312-.125.624-.249.922-.402.365-.189.717-.385 1.069-.6l-.102.074-.103.072c.477-.33.958-.667 1.38-1.06.388-.364.753-.736 1.105-1.125.352-.432.695-.868.98-1.343.285-.474.552-.953.81-1.44.25-.535.468-1.083.66-1.643.178-.526.307-1.06.414-1.6.12-.88.191-1.752.156-2.638a7.264 7.264 0 0 0-.139-.872c-.093-.41-.204-.804-.338-1.202a9.672 9.672 0 0 0-.864-1.62c-.606-.745-1.367-1.377-2.115-1.989a9.848 9.848 0 0 0-.77-.573 9.05 9.05 0 0 0-.87-.5 1.255 1.255 0 0 1-.551-.193 7.854 7.854 0 0 0-.949-.534Z" clip-rule="evenodd"/></svg>'
 );
 
 /**
@@ -63,11 +65,14 @@ $mtvh-icons : (
   'sign-in':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'expand':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'collapse':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-tick':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-warning-sign':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-info':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'hamburger' :( width: 32px, height: 22px ),
-  'border-info' : ( width: $icon-size-scale-md, height: $icon-size-scale-md , svg-path: '#{$asset-icon-path}border-info.svg'  ),
-  'border-tick': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-tick.svg' ),
-  'border-cross': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-cross.svg' ),
-  'border-warning-sign': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-warning-sign.svg' ),
+
+  'border-tick-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-tick-fill.svg'),
+  'border-warning-sign-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-warning-sign-fill.svg'),
+  'border-info-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-info-fill.svg'),
 
   'credit-card': ( width: $icon-size-scale-xl, height: $icon-size-scale-xl,svg-path: '#{$asset-icon-path}credit-card.svg'),
   'bank-notes': ( width: $icon-size-scale-xl, height: $icon-size-scale-xl, svg-path: '#{$asset-icon-path}bank-notes.svg' ),

package/assets/scss/config/_palette.scss

@@ -2,7 +2,7 @@
 
   --mtvh-white: #fff;
   --mtvh-black: #000;
-
+  --mtvh-transparent: transparent;
   --mtvh-grey-01: #F7F7F7;
   --mtvh-grey-02: #EAE9E9;
   --mtvh-grey-03: #DADADA;

package/assets/scss/config/_theme.scss

@@ -1,8 +1,6 @@
 :root {
 
-  /* Borders */
   --mtvh-font: 'Paralucent', sans-serif;
-
   --mtvh-link-color:  var(--mtvh-blue-04);
 
   --mtvh-border-color: var(--mtvh-grey-06);
@@ -10,7 +8,7 @@
   --mtvh-btn-disabled-border-color: var(--mtvh-grey-06);
   --mtvh-btn-disabled-color: var(--mtvh-white);
   --mtvh-btn-border-radius: 3rem;
-
+  --mtvh-link-border-radius: 0.25rem;
   --mtvh-btn-line-height: 1.5;
   --mtvh-btn-font-weight: bold;
   --mtvh-btn-outline-color: var(--mtvh-blue-03);
@@ -20,4 +18,30 @@
   /* Shadows */
   --mtvh-box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, 0.25);
   --mtvh-btn-focus-box-shadow: 0;
+
+  /* Banner */
+  --mtvh-banner-danger-bg: var(--mtvh-red-02);
+  --mtvh-banner-success-bg: var(--mtvh-green-02);
+  --mtvh-banner-success-bg-subtle: var(--mtvh-green-01);
+  --mtvh-banner-warning-bg: var(--mtvh-yellow-02);
+  --mtvh-banner-emergency-bg: var(--mtvh-red-05);
+  --mtvh-banner-dark-bg: var(--mtvh-black);
+  --mtvh-banner-white-bg: var(--mtvh-white);
+  --mtvh-banner-grey-bg: var(--mtvh-grey);
+
+  /* MTVH close button */
+  --mtvh-btn-close-yellow-01-hover-bg: var(--mtvh-yellow-02);
+  --mtvh-btn-close-green-01-hover-bg: var(--mtvh-green-02);
+  --mtvh-btn-close-red-01-hover-bg: var(--mtvh-red-02);
+  --mtvh-btn-close-white-hover-bg: var(--mtvh-grey-02);
+  --mtvh-btn-close-grey-hover-bg: var(--mtvh-grey-02);
+
+  --mtvh-btn-close-danger-hover-bg: var(--mtvh-red-03);
+  --mtvh-btn-close-success-hover-bg: var(--mtvh-green-03);
+  --mtvh-btn-close-success-hover-bg-suble: var(--mtvh-green-02);
+  --mtvh-btn-close-warning-hover-bg: var(--mtvh-yellow-03);
+
+  --mtvh-primary-outline-color: var(--mtvh-blue-03);
+  --mtvh-dark-outline-color: var(--mtvh-black);
 }
+