Add customisation variables

sass/components/message.sass

@@ -1,8 +1,31 @@
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-padding: 0.5em 0.75em !default
+$message-header-radius: $radius !default
+
+$message-body-border: 1px solid $border !default
+$message-body-color: $text !default
+$message-body-padding: 1em 1.25em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $white !default
+$message-body-pre-code-background-color: transparent !default
+
 .message
   +block
-  background-color: $background
-  border-radius: $radius
+  background-color: $message-background-color
+  border-radius: $message-radius
   font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -22,13 +45,13 @@
 
 .message-header
   align-items: center
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
+  background-color: $message-header-background-color
+  border-radius: $message-header-radius $message-header-radius 0 0
+  color: $message-header-color
   display: flex
   justify-content: space-between
   line-height: 1.25
-  padding: 0.5em 0.75em
+  padding: $message-header-padding
   position: relative
   a:not(.button),
   strong
@@ -45,10 +68,10 @@
     border-top: none
 
 .message-body
-  border: 1px solid $border
-  border-radius: $radius
-  color: $text
-  padding: 1em 1.25em
+  border: $message-body-border
+  border-radius: $message-body-radius
+  color: $message-body-color
+  padding: $message-body-padding
   a:not(.button),
   strong
     color: currentColor
@@ -56,6 +79,6 @@
     text-decoration: underline
   code,
   pre
-    background: $white
+    background-color: $message-body-pre-background-color
   pre code
-    background: transparent
+    background-color: $message-body-pre-code-background-color