Fix message colors

sass/base/generic.sass

@@ -1,8 +1,9 @@
 $body-background: $white-ter !default
+$body-size: $size-6 !default
 
 html
   background-color: $body-background
-  font-size: $size-normal
+  font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px

sass/components/menu.sass

@@ -1,14 +1,13 @@
-.menu-nav
-  a
-    display: block
-    padding: 5px 10px
+.menu
+  font-size: $size-normal
 
 .menu-list
+  line-height: 1.25
   a
     border-radius: $radius-small
     color: $text
     display: block
-    padding: 5px 10px
+    padding: 0.5em 0.75em
     &:hover
       background-color: $background
       color: $link
@@ -19,14 +18,15 @@
   li
     ul
       border-left: 1px solid $border
-      margin: 10px
-      padding-left: 10px
+      margin: 0.75em
+      padding-left: 0.75em
 
 .menu-label
   color: $text-light
-  font-size: $size-small
+  font-size: 0.75em
   letter-spacing: 1px
-  margin-bottom: 5px
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 20px
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em

sass/components/message.sass

@@ -1,39 +1,49 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 0.8rem 1rem
-  strong
-    color: inherit
-
-.message-header
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 0.4rem 0.8rem
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
 .message
   +block
   background-color: $background
   border-radius: $radius
+  font-size: $size-normal
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: max((100% - lightness($color)) - 4%, 0%)
-    $darkness: max(lightness($color) - 10%, lightness($color))
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
     &.is-#{$name}
-      background-color: lighten($color, $lightning)
+      background-color: lighten($color, $color-lightning)
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        @if (colorLuminance($color) > 0.8)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
-        @else
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+  align-items: center
+  background-color: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: 0.5em 0.75em
+  position: relative
+  strong
+    color: inherit
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  color: $text
+  padding: 1em 1.25em
+  strong
+    color: inherit