@mtvh/mtvh-design-system 0.0.6 → 0.0.7

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/_close.scss

@@ -45,7 +45,7 @@
 @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;
@@ -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 {
@@ -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/config/_theme.scss

@@ -2,6 +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);
@@ -19,16 +21,6 @@
   --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);
@@ -41,7 +33,5 @@
   --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

@@ -203,16 +203,25 @@ $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)
+  "emergency":  var(--mtvh-red-04),
+  "dark":       var(--mtvh-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),
+  "grey-01": var(--mtvh-grey-01),
   "white": var(--mtvh-white),
-)
+  "purple-01": var(--mtvh-purple-01),
+  "stone-02": var(--mtvh-stone-02)
+);
+
+$content-block-theme-border: (
+  "grey-03": var(--mtvh-grey-03),
+  "grey-04": var(--mtvh-grey-04),
+  "red-04": var(--mtvh-red-04),
+  "green-04": var(--mtvh-green-04),
+  "purple-04": var(--mtvh-purple-04),
+  "yellow-03": var(--mtvh-yellow-03)
+);