Move CSS variables to message scope

css/bulma.css

@@ -1,5 +1,13 @@
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
+@-webkit-keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -122,7 +130,8 @@
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  animation: spinAround 500ms infinite linear;
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -313,7 +322,10 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+          text-size-adjust: 100%;
 }
 
 article,
@@ -2564,10 +2576,14 @@ fieldset[disabled] .button {
 }
 
 .progress:indeterminate {
-  animation-duration: 1.5s;
+  -webkit-animation-duration: 1.5s;
-  animation-iteration-count: infinite;
+          animation-duration: 1.5s;
-  animation-name: moveIndeterminate;
+  -webkit-animation-iteration-count: infinite;
-  animation-timing-function: linear;
+          animation-iteration-count: infinite;
+  -webkit-animation-name: moveIndeterminate;
+          animation-name: moveIndeterminate;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
   background-color: var(--grey-lightest, #ededed);
   background-image: linear-gradient(to right, var(--grey-dark, #4a4a4a) 30%, var(--grey-lightest, #ededed) 30%);
   background-position: top left;
@@ -2595,6 +2611,15 @@ fieldset[disabled] .button {
   height: 1.5rem;
 }
 
+@-webkit-keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -4977,9 +5002,12 @@ button.dropdown-item.is-active {
 }
 
 .message {
-  background-color: var(--white-ter, whitesmoke);
+  --message-font-size: var(--size-normal, 1rem);
-  border-radius: 4px;
+  --message-radius: var(--radius, 4px);
-  font-size: 1rem;
+  --message-background-color: var(--background, var(--white-ter, whitesmoke));
+  background-color: var(--message-background-color);
+  border-radius: var(--message-radius);
+  font-size: var(--message-font-size);
 }
 
 .message strong {
@@ -4992,15 +5020,15 @@ button.dropdown-item.is-active {
 }
 
 .message.is-small {
-  font-size: 0.75rem;
+  --message-font-size: var(--size-small, 0.75rem);
 }
 
 .message.is-medium {
-  font-size: 1.25rem;
+  --message-font-size: var(--size-medium, 1.25rem);
 }
 
 .message.is-large {
-  font-size: 1.5rem;
+  --message-font-size: var(--size-large, 1.5rem);
 }
 
 .message.is-white {
@@ -5144,15 +5172,19 @@ button.dropdown-item.is-active {
 }
 
 .message-header {
+  --message-header-background-color: var(--text, var(--grey-dark, #4a4a4a));
+  --message-header-color: var(--text-invert, var(--grey-dark, #4a4a4a));
+  --message-header-weight: var(--weight-bold, 700);
+  --message-header-padding: 0.75em 1em;
   align-items: center;
-  background-color: var(--grey-dark, #4a4a4a);
+  background-color: var(--message-header-background-color);
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--radius, 4px) var(--radius, 4px) 0 0;
-  color: var(--grey-dark, #4a4a4a);
+  color: var(--message-header-color);
   display: flex;
-  font-weight: 700;
+  font-weight: var(--message-header-weight);
   justify-content: space-between;
   line-height: 1.25;
-  padding: 0.75em 1em;
+  padding: var(--message-header-padding);
   position: relative;
 }
 
@@ -5163,27 +5195,35 @@ button.dropdown-item.is-active {
 }
 
 .message-header + .message-body {
-  border-width: 0;
+  border-width: var(--message-header-body-border-width);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 .message-body {
-  border-color: var(--grey-lighter, #dbdbdb);
+  --message-body-border-color: var(--border, var(--grey-lighter, #dbdbdb));
-  border-radius: 4px;
+  --message-body-radius: var(--radius, 4px);
+  --message-body-border-width: 0 0 0 4px;
+  --message-body-color: var(--text, var(--grey-dark, #4a4a4a));
+  --message-body-padding: 1.25em 1.5em;
+  --message-body-pre-background-color: var(--scheme-main, var(--white, white));
+  --message-body-pre-code-background-color: transparent;
+  --message-header-body-border-width: 0;
+  border-color: var(--message-body-border-color);
+  border-radius: var(--message-body-radius);
   border-style: solid;
-  border-width: 0 0 0 4px;
+  border-width: var(--message-body-border-width);
-  color: var(--grey-dark, #4a4a4a);
+  color: var(--message-body-color);
-  padding: 1.25em 1.5em;
+  padding: var(--message-body-padding);
 }
 
 .message-body code,
 .message-body pre {
-  background-color: var(--white, white);
+  background-color: var(--message-body-pre-background-color);
 }
 
 .message-body pre code {
-  background-color: transparent;
+  background-color: var(--message-body-pre-code-background-color);
 }
 
 .modal {
@@ -8729,6 +8769,8 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
+  min-height: -webkit-min-content;
+  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -11365,5 +11407,4 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   --link-active: var(--grey-darker, #363636);
   --link-active-border: var(--grey-dark, #4a4a4a);
 }
-
 /*# sourceMappingURL=bulma.css.map */

package.json

@@ -43,7 +43,7 @@
     "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
     "rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
     "rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
-    "deploy": "npm run clean && npm run build && npm run rtl",
+    "deploy": "npm run clean && npm run build",
     "start": "npm run build-sass -- --watch"
   },
   "files": [

sass/components/message.sass

@@ -1,29 +1,46 @@
-$message-background-color: $background !default
+$message-background-color: var(--background, #{$background}) !default
-$message-radius: $radius !default
+$message-font-size: var(--size-normal, #{$size-normal}) !default
+$message-radius: var(--radius, #{$radius}) !default
 
-$message-header-background-color: $text !default
+$message-header-background-color: var(--text, #{$text}) !default
-$message-header-color: $text-invert !default
+$message-header-color: var(--text-invert, #{$text-invert}) !default
-$message-header-weight: $weight-bold !default
+$message-header-weight: var(--weight-bold, #{$weight-bold}) !default
 $message-header-padding: 0.75em 1em !default
-$message-header-radius: $radius !default
+$message-header-radius: var(--radius, #{$radius}) !default
 
-$message-body-border-color: $border !default
+$message-body-border-color: var(--border, #{$border}) !default
 $message-body-border-width: 0 0 0 4px !default
-$message-body-color: $text !default
+$message-body-color: var(--text, #{$text}) !default
 $message-body-padding: 1.25em 1.5em !default
-$message-body-radius: $radius !default
+$message-body-radius: var(--radius, #{$radius}) !default
 
-$message-body-pre-background-color: $scheme-main !default
+$message-body-pre-background-color: var(--scheme-main, #{$scheme-main}) !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default
 $message-colors: $colors !default
 
 .message
+  --message-background-color: #{$message-background-color}
+  --message-font-size: #{$message-font-size}
+  --message-radius: #{$message-radius}
+  --message-header-background-color: #{$message-header-background-color}
+  --message-header-color: #{$message-header-color}
+  --message-header-weight: #{$message-header-weight}
+  --message-header-padding: #{$message-header-padding}
+  --message-body-border-color: #{$message-body-border-color}
+  --message-body-radius: #{$message-body-radius}
+  --message-body-border-width: #{$message-body-border-width}
+  --message-body-color: #{$message-body-color}
+  --message-body-padding: #{$message-body-padding}
+  --message-body-pre-background-color: #{$message-body-pre-background-color}
+  --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
+  --message-header-body-border-width: #{$message-header-body-border-width}
+
   @extend %block
-  background-color: $message-background-color
+  background-color: var(--message-background-color)
-  border-radius: $message-radius
+  border-radius: var(--message-radius)
-  font-size: $size-normal
+  font-size: var(--message-font-size)
   strong
     color: currentColor
   a:not(.button):not(.tag):not(.dropdown-item)
@@ -31,11 +48,11 @@ $message-colors: $colors !default
     text-decoration: underline
   // Sizes
   &.is-small
-    font-size: $size-small
+    --message-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --message-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --message-font-size: var(--size-large, #{$size-large})
   // Colors
   @each $name, $components in $message-colors
     $color: nth($components, 1)
@@ -60,43 +77,41 @@ $message-colors: $colors !default
         $color-light: $color
 
     &.is-#{$name}
-      background-color: var(--#{$name}-light, #{$color-light})
+      --message-background-color: var(--#{$name}-light, #{$color-light})
-      .message-header
+      --message-header-background-color: var(--#{$name}, #{$color})
-        background-color: var(--#{$name}, #{$color})
+      --message-header-color: var(--#{$name}-invert, #{$color-invert})
-        color: var(--#{$name}-invert, #{$color-invert})
+      --message-body-border-color: var(--#{$name}, #{$color})
-      .message-body
+      --message-body-color: var(--#{$name}-dark, #{$color-dark})
-        border-color: var(--#{$name}, #{$color})
-        color: var(--#{$name}-dark, #{$color-dark})
 
 .message-header
   align-items: center
-  background-color: $message-header-background-color
+  background-color: var(--message-header-background-color)
   border-radius: $message-header-radius $message-header-radius 0 0
-  color: $message-header-color
+  color: var(--message-header-color)
   display: flex
-  font-weight: $message-header-weight
+  font-weight: var(--message-header-weight)
   justify-content: space-between
   line-height: 1.25
-  padding: $message-header-padding
+  padding: var(--message-header-padding)
   position: relative
   .delete
     flex-grow: 0
     flex-shrink: 0
     +ltr-property("margin", 0.75em, false)
   & + .message-body
-    border-width: $message-header-body-border-width
+    border-width: var(--message-header-body-border-width)
     border-top-left-radius: 0
     border-top-right-radius: 0
 
 .message-body
-  border-color: $message-body-border-color
+  border-color: var(--message-body-border-color)
-  border-radius: $message-body-radius
+  border-radius: var(--message-body-radius)
   border-style: solid
-  border-width: $message-body-border-width
+  border-width: var(--message-body-border-width)
-  color: $message-body-color
+  color: var(--message-body-color)
-  padding: $message-body-padding
+  padding: var(--message-body-padding)
   code,
   pre
-    background-color: $message-body-pre-background-color
+    background-color: var(--message-body-pre-background-color)
   pre code
-    background-color: $message-body-pre-code-background-color
+    background-color: var(--message-body-pre-code-background-color)

sass/utilities/functions.sass

@@ -118,7 +118,6 @@
 
 @function bulmaRgba($color, $alpha)
   @if type-of($color) != 'color'
-    @debug $color
     @return $color
   @return rgba($color, $alpha)