@mtvh/mtvh-design-system 0.0.6 → 0.0.8

package/assets/scss/base/_all.scss

@@ -1,4 +1,3 @@
 @import 'global';
 @import 'functions';
-@import 'mixins';
 @import 'print';

package/assets/scss/base/_global.scss

@@ -1,6 +1,5 @@
 html {
   font-size: 100%;
-  line-height: var(--mtvh-line-height);
   box-sizing: border-box;
 }
 body {
@@ -10,7 +9,6 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 100%;
-  line-height: var(--mtvh-line-height);
   box-sizing: border-box;
 }
 
@@ -21,5 +19,5 @@ body {
 }
 
 .mtvh-layout {
-  background-color:  var(--mtvh-grey-01);
+  background-color:  var(--#{$prefix}grey-01);
 }

package/assets/scss/components/_banner.scss

@@ -1,7 +1,7 @@
 .mtvh-banner {
 
   background-color: var(--#{$prefix}banner-bg);
-  color: var(--#{$prefix}banner-color);
+  color: var(--#{$prefix}banner-text-color);
   display: none;
 
   &:has(.mtvh-banner-row) {
@@ -9,7 +9,7 @@
   }
 
   a {
-    color: var(--#{$prefix}banner-link-color);
+    color: inherit;
     &:focus-visible {
       outline-color: inherit;
     }
@@ -51,6 +51,7 @@
 
   + .mtvh-banner-row {
     border-top: 1px solid var(--#{$prefix}border-color);
+    padding-top: 0;
   }
 
   &.alert {
@@ -82,18 +83,14 @@
 }
 
 
-@each $state in map-keys($banner-theme-colors) {
+@each $state, $variable in $banner-theme-colors {
   .mtvh-banner-#{$state} {
-    --#{$prefix}banner-color: var(--#{$prefix}black);
+    --#{$prefix}banner-text-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);
+    --#{$prefix}banner-bg: #{$variable};
 
     @if($state == "emergency" or $state == "dark") {
-      --#{$prefix}banner-link-color: var(--#{$prefix}white);
-      --#{$prefix}banner-color: var(--#{$prefix}white);
+      --#{$prefix}banner-text-color: var(--#{$prefix}white);
       --#{$prefix}border-color: var(--#{$prefix}transparent);
     }
     @if($state == "dark") {

package/assets/scss/components/_breadcrumb.scss

@@ -20,16 +20,15 @@
       width: 20%;
       content: ' ';
 
-      background: linear-gradient(to left, var(--mtvh-grey-01), rgba(255,255,255,0));
+      background: linear-gradient(to left, var(--#{$prefix}grey-01), rgba(255,255,255,0));
     }
   }
 
   .active {
     font-weight: bold;
-    --mtvh-breadcrumb-item-active-color: var(--mtvh-black);
   }
   a {
-    color: var(--mtvh-black);
+    color: var(--#{$prefix}black);
     text-decoration: none;
     font-weight: normal;
 

package/assets/scss/components/_close.scss

@@ -35,18 +35,14 @@
 
 @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-focus-outline-color: var(--#{$prefix}primary-outline-color);
       --#{$prefix}btn-close-hover-bg-color:  var(--#{$prefix}btn-close-#{$state}-hover-bg);
-    }
   }
 }

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

@@ -1,49 +1,3 @@
-$mtvh-content-block: (
-
-  grey-01: (
-    background-color: var(--mtvh-grey-01)
-  ),
-  grey-02: (
-    background-color: var(--mtvh-grey-02)
-  ),
-  yellow-01: (
-    background-color: var(--mtvh-yellow-01)
-  ),
-  green-01: (
-    background-color: var(--mtvh-green-01)
-  ),
-  purple-01: (
-    background-color: var(--mtvh-purple-01)
-  ),
-  red-01: (
-    background-color: var(--mtvh-red-01)
-  ),
-  stone-02: (
-    background-color: var(--mtvh-stone-02)
-  ),
-);
-
-$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)
-  ),
-  green-04: (
-    border-color: var(--mtvh-green-04)
-  ),
-  purple-04: (
-    border-color: var(--mtvh-purple-04)
-  ),
-  yellow-03: (
-    border-color: var(--mtvh-yellow-03)
-  ),
-);
-
 .mtvh-content-block {
 
   padding: $mtvh-spacing-6 $mtvh-spacing-5;
@@ -69,10 +23,10 @@ $mtvh-content-block-border: (
 
   &-link-card {
     text-decoration: none;
-    box-shadow: var(--mtvh-box-shadow);
+    box-shadow: var(--#{$prefix}box-shadow);
     padding: $mtvh-spacing-5;
     &:hover {
-      background-color: var(--mtvh-grey-02);
+      background-color: var(--#{$prefix}grey-02);
     }
 
     @include media-breakpoint-up(md) {
@@ -83,19 +37,19 @@ $mtvh-content-block-border: (
     }
 
     &:focus-within {
-      outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
+      outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
       outline-offset: $mtvh-spacing-3;
-      background-color: var(--mtvh-grey-04);
+      background-color: var(--#{$prefix}grey-04);
     }
 
     &:active, &:focus  {
-      background-color: var(--mtvh-grey-04);
+      background-color: var(--#{$prefix}grey-04);
       outline: unset;
     }
 
     a {
       @extend %h3;
-      color: var(--mtvh-black);
+      color: var(--#{$prefix}black);
       text-decoration: none;
       &:after {
         bottom: 0;
@@ -107,7 +61,7 @@ $mtvh-content-block-border: (
         z-index: 100;
       }
       &:active, &:focus  {
-        background-color: var(--mtvh-grey-04);
+        background-color: var(--#{$prefix}grey-04);
         outline: unset;
       }
 
@@ -115,7 +69,7 @@ $mtvh-content-block-border: (
   }
   .mtvh-btn, p {
     &:last-child {
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
   }
 
@@ -141,21 +95,15 @@ $mtvh-content-block-border: (
 
   &-border {
 
+    --#{$prefix}content-block-border: $border-width-sm solid;
     border: $border-width-sm solid;
-    @each $color, $property-map in $mtvh-content-block-border {
-      &--#{"" + $color} {
-        border-color: map-get($property-map, border-color);
-      }
-    }
+    border-color: var(--#{$prefix}content-block-border);
+
   }
 
   &-bg {
-    background-color: var(--mtvh-white);
-    @each $color, $property-map in $mtvh-content-block {
-      &--#{"" + $color} {
-        background-color: map-get($property-map, background-color);
-      }
-    }
+    --#{$prefix}content-block-bg: var(--mtvh-white);
+    background-color: var(--#{$prefix}content-block-bg);
   }
 
   &-icon {
@@ -195,8 +143,8 @@ $mtvh-content-block-border: (
 
     padding-top: $mtvh-spacing-5;
     padding-bottom: $mtvh-spacing-5;
-    border-top: 1px solid var(--mtvh-grey-02);
-    border-bottom: 1px solid var(--mtvh-grey-02);
+    border-top: 1px solid var(--#{$prefix}grey-02);
+    border-bottom: 1px solid var(--#{$prefix}grey-02);
 
     @include media-breakpoint-up(md) {
       padding: 0;
@@ -207,7 +155,7 @@ $mtvh-content-block-border: (
       font-size: $font-size-lg;
       font-weight: $mtvh-font-weight-bold;
       margin-bottom: $mtvh-spacing-3;
-      line-height: $line-height-md;//33.8px;
+      line-height: $line-height-md;
     }
     &-date {
       font-weight: $mtvh-font-weight-bold;
@@ -240,3 +188,15 @@ $mtvh-content-block-border: (
     }
   }
 }
+
+@each $state, $variable in $content-block-theme-border{
+  .mtvh-content-block-border--#{$state} {
+    --#{$prefix}content-block-border: #{$variable};
+  }
+}
+
+@each $state, $variable in $content-block-theme-colors {
+  .mtvh-content-block-bg--#{$state} {
+    --#{$prefix}content-block-bg: #{$variable};
+  }
+}

package/assets/scss/components/_form.scss

@@ -8,9 +8,9 @@
   @import "../forms/form-date-input";
 
 
-  background-color: var(--mtvh-white);
-  margin: 0 calc(var(--mtvh-gutter-x)* -0.5);
-  padding: var(--mtvh-gutter-x);
+  background-color: var(--#{$prefix}white);
+  margin: 0 calc(var(--#{$prefix}gutter-x)* -0.5);
+  padding: var(--#{$prefix}gutter-x);
   overflow: hidden;
 
   @include media-breakpoint-up("md") {

package/assets/scss/components/_link.scss

@@ -1,17 +1,17 @@
 $mtvh-links: (
   primary: (
-    text-color: var(--mtvh-blue-04),
-    text-color-hover: var(--mtvh-blue-05),
-    text-color-active: var(--mtvh-blue-06),
-    text-color-focus: var(--mtvh-blue-05),
-    text-disabled-color: var(--mtvh-grey-06)
+    text-color: var(--#{$prefix}blue-04),
+    text-color-hover: var(--#{$prefix}blue-05),
+    text-color-active: var(--#{$prefix}blue-06),
+    text-color-focus: var(--#{$prefix}blue-05),
+    text-disabled-color: var(--#{$prefix}grey-06)
   ),
   light: (
-    text-color: var(--mtvh-white),
-    text-color-hover: var(--mtvh-grey-04),
-    text-color-active: var(--mtvh-grey-05),
-    text-color-focus: var(--mtvh-grey-04),
-    text-disabled-color: var(--mtvh-grey-06)
+    text-color: var(--#{$prefix}white),
+    text-color-hover: var(--#{$prefix}grey-04),
+    text-color-active: var(--#{$prefix}grey-05),
+    text-color-focus: var(--#{$prefix}grey-04),
+    text-disabled-color: var(--#{$prefix}grey-06)
   ),
 );
 
@@ -23,7 +23,7 @@ $mtvh-links: (
   cursor: pointer;
   display: inline-block;
   &:hover {
-    color: var(--mtvh-blue-05);
+    color: var(--#{$prefix}blue-05);
     text-decoration: none;
   }
 
@@ -37,19 +37,19 @@ $mtvh-links: (
 
   &:focus {
     box-shadow: none;
-    outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
+    outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}btn-outline-color);
     outline-offset: 0.5rem;;
     text-decoration: none;
-    border-radius: var(--mtvh-btn-border-radius);
-    color: var(--mtvh-blue-05);
+    border-radius: var(--#{$prefix}btn-border-radius);
+    color: var(--#{$prefix}blue-05);
   }
 
   &:active {
-    color: var(--mtvh-blue-06);
+    color: var(--#{$prefix}blue-06);
   }
 
   &.disabled, &[aria-disabled="true"] {
-    color: var(--mtvh-grey-06);
+    color: var(--#{$prefix}grey-06);
     pointer-events: none;
     cursor: not-allowed;
   }

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

@@ -16,6 +16,6 @@
   }
 
   &--border-yellow-02 {
-    border-color: var(--mtvh-yellow-02);
+    border-color: var(--#{$prefix}yellow-02);
   }
 }

package/assets/scss/config/_all.scss

@@ -2,4 +2,4 @@
 @import "font";
 @import 'palette';
 @import 'theme';
-@import "map-list";
+@import "icon-list";

package/assets/scss/config/_palette.scss

@@ -1,7 +1,7 @@
 :root {
 
-  --mtvh-white: #fff;
-  --mtvh-black: #000;
+  --mtvh-white: #ffffff;
+  --mtvh-black: #000000;
   --mtvh-transparent: transparent;
   --mtvh-grey-01: #F7F7F7;
   --mtvh-grey-02: #EAE9E9;

package/assets/scss/config/_theme.scss

@@ -2,7 +2,8 @@
 
   --mtvh-font: 'Paralucent', sans-serif;
   --mtvh-link-color:  var(--mtvh-blue-04);
-
+  --mtvh-primary-outline-color: var(--mtvh-blue-03);
+  --mtvh-dark-outline-color: var(--mtvh-black);
   --mtvh-border-color: var(--mtvh-grey-06);
   --mtvh-btn-disabled-bg: var(--mtvh-grey-06);
   --mtvh-btn-disabled-border-color: var(--mtvh-grey-06);
@@ -19,29 +20,16 @@
   --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-grey-02-hover-bg: var(--mtvh-grey-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);
 }
 

package/assets/scss/config/_variables.scss

@@ -31,7 +31,6 @@ $link-hover-color: #005792;
 $body-color: #000;
 $font-family-sans-serif: Arial, sans-serif;
 
-
 // MTVH Font
 $mtvh-base-font-size: $font-size-base;
 $mtvh-font-weight-lighter: lighter !default;
@@ -42,6 +41,29 @@ $mtvh-font-weight-semibold: 600 !default;
 $mtvh-font-weight-bold: 700 !default;
 $mtvh-font-weight-bolder: bolder !default;
 
+$success:       #23870B;
+$info:          #895ED0;
+$warning:       #F8D643;
+$danger:        #DD080D;
+$primary:       #0072BF;
+$dark:          #000000;
+$secondary:     #9A9A9A;
+$light:         #0072BF;
+$stone:         #F9F2EA;
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark,
+  "stone":      $stone
+);
+
+
 //button
 $input-btn-font-family:$font-family-sans-serif;
 $btn-border-radius: 3rem;
@@ -51,15 +73,16 @@ $btn-padding-y: 0.438rem;
 $btn-font-size: 1rem;
 $btn-border-width: 3px;
 
+$border-width-xs: 0.063rem;
+$border-width-sm: 0.15rem;
+$border-width-md: 0.19rem;
+$line-height-md: 1.3;
+
 //spacing
 $button-icon-spacing: 0.75rem;
 $button-icon-small-spacing: 8px;
 $link-icon-spacing: 0.5rem;
 
-$border-width-sm: 0.15rem;
-$border-width-md: 0.19rem;
-$line-height-md: 1.3;
-
 $mtvh-spacing-1: 0.125rem;
 $mtvh-spacing-2: 0.25rem;
 $mtvh-spacing-3: 0.5rem;
@@ -89,8 +112,6 @@ $icon-size-scale-sm     : 20px !default;
 $icon-size-scale-md     : 28px !default;
 $icon-size-scale-lg     : 42px !default;
 $icon-size-scale-xl     : 56px !default;
-$breadcrumb-item-padding-x: $mtvh-spacing-4;
-$breadcrumb-font-size: $font-size-xs;
 
 $mtvh-icon-sizes: (
   "xs"                 : $icon-size-scale-xs,
@@ -100,18 +121,13 @@ $mtvh-icon-sizes: (
   "xl"                 : $icon-size-scale-xl
 ) !default;
 
-
-$success:       #23870B;
-$info:          #895ED0;
-$warning:       #F8D643; //--mtvh-purple-04
-$danger:        #DD080D;
-$primary:       #0072BF;
-$dark:          #000000;
-$btn-color: $primary;
-
 /* breadcrumb */
 $breadcrumb-margin-bottom: $mtvh-spacing-6;
 $breadcrumb-border-radius: none;
+$breadcrumb-item-padding-x: $mtvh-spacing-4;
+$breadcrumb-font-size: $font-size-xs;
+$breadcrumb-active-color: var(--#{$prefix}black);
+
 /* form  */
 $form-group-margin-top: 4rem;
 $form-label-font-size : $font-size-md;
@@ -119,7 +135,7 @@ $form-label-font-weight: 700;
 $form-label-color: #000000;
 $form-text-font-size: $font-size-sm;
 $form-label-margin-bottom: $mtvh-spacing-3;
-$form-select-focus-border-color: var( --mtvh-grey-06);
+$form-select-focus-border-color: var(--#{$prefix}grey-06);
 $form-feedback-font-size: $font-size-sm;
 $form-feedback-invalid-color: $danger;
 $form-feedback-icon-invalid: '';
@@ -128,12 +144,13 @@ $input-line-height: 1.5;
 $input-font-size: $font-size-sm;
 $input-padding-y: $mtvh-spacing-4;
 $input-padding-x: $mtvh-spacing-5;
-$input-focus-color: var(--mtvh-blue-05);
-$input-focus-border-color: var( --mtvh-grey-06);
-$input-border-color: var( --mtvh-grey-06);
+$input-focus-color: var(--#{$prefix}blue-05);
+$input-focus-border-color: var(--#{$prefix}grey-06);
+$input-border-color: var(--#{$prefix}grey-06);
 $input-border-radius: 0.25rem;
 $input-color: $body-color;
-$input-placeholder-color: var( --mtvh-grey-06);
+$input-placeholder-color: var(--#{$prefix}grey-06);
+
 $input-width-size-xxs : 64px;
 $input-width-size-xs : 80px;
 $input-width-size-sm : 96px;
@@ -142,22 +159,22 @@ $input-width-size-lg : 336px;
 $input-width-size-xl : 451px;
 
 /* form check */
-$form-check-bg-color: var(--mtvh-grey-01);
-$form-check-hover-bg-color: var(--mtvh-grey-02);
-$form-check-input-width: 2em;
-$form-check-input-height: 2em;
+$form-check-bg-color: unset;
+$form-check-hover-bg-color: unset;
+$form-check-input-width: 2.75rem;
+$form-check-input-height: 2.75rem;
+$form-check-min-height: 2.75rem;
 $form-check-margin-bottom: $mtvh-spacing-5;
-$form-check-input-checked-color: var(--mtvh-white);
 $form-check-input-checked-color: #fff;
-$form-check-padding-start: $form-check-input-width + 1em;
-$form-check-input-checked-bg-color:       var(--mtvh-purple-04);
-$form-check-input-hover-bg-color:         var(--mtvh-purple-05);
-$form-check-input-checked-border-color:   var(--mtvh-purple-04);
+$form-check-padding-start: $form-check-input-width + 1rem;
+$form-check-input-checked-bg-color:       var(--#{$prefix}purple-05);
+$form-check-input-hover-bg-color:         var(--#{$prefix}purple-04);
+$form-check-input-checked-border-color:   var(--#{$prefix}purple-05);
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z'  fill='#{$form-check-input-checked-color}'/></svg>");
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
 $form-check-input-focus-box-shadow: "";
-$form-check-input-border: 1px solid var(--mtvh-grey-06);
-$form-check-wrapper-radio-invalid-border:  1px solid $danger;
+$form-check-input-border: $border-width-xs solid var(--#{$prefix}grey-06);
+$form-check-wrapper-radio-invalid-border:  1px solid var(--#{$prefix}red-01);
 
 /* list group */
 $list-group-item-padding-x: 0;
@@ -179,40 +196,42 @@ $btn-close-focus-opacity: 1;
 $btn-close-hover-opacity: 1;
 
 /* stepper */
-$stepper-bg-color: var(--mtvh-grey-06);
-$stepper-sm-font-color: var(--mtvh-purple-04);
-$stepper-active-bg-color: var(--mtvh-purple-04);
-$stepper-disabled-bg-color: var(--mtvh-grey-03);
-$stepper-disabled-font-color: var(--mtvh-black);
+$stepper-bg-color: var(--#{$prefix}grey-06);
+$stepper-sm-font-color: var(--#{$prefix}purple-04);
+$stepper-active-bg-color: var(--#{$prefix}purple-04);
+$stepper-disabled-bg-color: var(--#{$prefix}grey-03);
+$stepper-disabled-font-color: var(--#{$prefix}black);
 $stepper-font-size: $font-size-xs;
-$stepper-font-color: var(--mtvh-white);
+$stepper-font-color: var(--#{$prefix}white);
 $stepper-item-padding-x: $mtvh-spacing-3;
 $stepper-item-padding-y: $mtvh-spacing-2;
 $stepper-breakpoint: "lg";
 
 $alert-border-radius: 0;
-
-$success-bg-subtle:       tint-color($success, 80%);
-$info-bg-subtle:          tint-color($info, 80%);
-$warning-bg-subtle:       tint-color($warning, 80%);
-$danger-bg-subtle:        tint-color($danger, 80%);
-$light-bg-subtle:         var(--mtvh-red-02);
-$dark-bg-subtle:         var(--mtvh-red-02);
-
 $banner-theme-colors: (
-  "success":    var(--mtvh-green-02),
-  "warning":    var(--mtvh-yellow-02),
-  "danger":     var(--mtvh-red-02),
-  "emergency":        var(--mtvh-red-02),
-  "dark":             $dark,
-  "white":            var(--mtvh-white),
-  "light":            var(--mtvh-grey-01)
+  "success":    var(--#{$prefix}green-02),
+  "warning":    var(--#{$prefix}yellow-02),
+  "danger":     var(--#{$prefix}red-02),
+  "emergency":  var(--#{$prefix}red-04),
+  "dark":       var(--#{$prefix}black)
 );
 
 $content-block-theme-colors: (
-  "yellow-01": var(--mtvh-yellow-01),
-  "red-01": var(--mtvh-red-01),
-  "green-01": var(--mtvh-green-01),
-  "grey-01": var(--mtvh-green-01),
-  "white": var(--mtvh-white),
-)
+  "yellow-01": var(--#{$prefix}yellow-01),
+  "red-01": var(--#{$prefix}red-01),
+  "green-01": var(--#{$prefix}green-01),
+  "grey-01": var(--#{$prefix}grey-01),
+  "white": var(--#{$prefix}white),
+  "purple-01": var(--#{$prefix}purple-01),
+  "stone-02": var(--#{$prefix}stone-02)
+);
+
+$content-block-theme-border: (
+  "grey-03": var(--#{$prefix}grey-03),
+  "grey-04": var(--#{$prefix}grey-04),
+  "red-04": var(--#{$prefix}red-04),
+  "green-04": var(--#{$prefix}green-04),
+  "purple-04": var(--#{$prefix}purple-04),
+  "yellow-03": var(--#{$prefix}yellow-03)
+);
+