Use primary color in CSS variable for the message component

This commit is contained in:
Jeremy Thomas
2020-08-15 08:59:45 +01:00
parent 7d2dcba944
commit 0e4eda2d81
4 changed files with 124 additions and 120 deletions

View File

@@ -60,13 +60,13 @@ $message-colors: $colors !default
$color-light: $color
&.is-#{$name}
background-color: $color-light
background-color: var(--#{$name}-light, #{$color-light})
.message-header
background-color: $color
color: $color-invert
background-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert})
.message-body
border-color: $color
color: $color-dark
border-color: var(--#{$name}, #{$color})
color: var(--#{$name}-dark, #{$color-dark})
.message-header
align-items: center

View File

@@ -19,9 +19,9 @@ $blue-invert : findColorInvert($blue) !default;
$purple-invert : findColorInvert($purple) !default;
$red-invert : findColorInvert($red) !default;
$primary-invert : findColorInvert($primary) !default;
$primary-light : findLightColor($primary) !default;
$primary-dark : findDarkColor($primary) !default;
$primary-invert : findColorInvert($primary, $turquoise) !default;
$primary-light : findLightColor($primary, $turquoise) !default;
$primary-dark : findDarkColor($primary, $turquoise) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;