Restructure elements and components

sass/components/components.sass

@@ -1,15 +1,15 @@
 @charset "utf-8"
 
-@import "grid"
-@import "navbar"
 @import "card"
-@import "table"
-@import "tabs"
+@import "grid"
 @import "media"
 @import "menu"
+@import "message"
+@import "modal"
+@import "navbar"
 @import "pagination"
 @import "panel"
-@import "modal"
+@import "tabs"
 
 .box
   @extend .block

sass/components/message.sass

@@ -0,0 +1,39 @@
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  padding: 12px 15px
+  strong
+    color: inherit
+
+.message-header
+  background: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  padding: 7px 10px
+  strong
+    color: inherit
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message
+  @extend .block
+  background: $background
+  border-radius: $radius
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    $lightning: (100% - lightness($color)) - 4%
+    $darkness: max(lightness($color) - 10%, lightness($color))
+    &.is-#{$name}
+      background: lighten($color, $lightning)
+      .message-header
+        background: $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%)

sass/components/table.sass

@@ -1,89 +0,0 @@
-.table
-  background: white
-  color: $text-strong
-  margin-bottom: 20px
-  width: 100%
-  td,
-  th
-    border: 1px solid $border
-    border-width: 0 0 1px
-    padding: 8px 10px
-    vertical-align: top
-    // Modifiers
-    &.table-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.table-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.table-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background: $link
-          color: $link-invert
-    &.table-narrow
-      white-space: nowrap
-      width: 1%
-  th
-    color: $text-strong
-    text-align: left
-  tr
-    &:hover
-      background: $background
-      color: $text-strong
-  thead
-    td,
-    th
-      border-width: 0 0 2px
-      color: $text-light
-  tbody
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 0
-  tfoot
-    td,
-    th
-      border-width: 2px 0 0
-      color: $text-light
-  // Modifiers
-  &.is-bordered
-    td,
-    th
-      border-width: 1px
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 1px
-  &.is-narrow
-    td,
-    th
-      padding: 5px 10px
-      // Modifiers
-      &.table-icon
-        padding: 2px
-        &.table-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.table-link
-        padding: 0
-        & > a
-          padding: 5px 10px
-  &.is-striped
-    tbody
-      tr
-        &:nth-child(2n)
-          background: $background
-          &:hover
-            background: $border