Add dark colour, Fix button alignment

bulma/config/generated-variables.sass

@@ -1,5 +1,8 @@
 // Colors
 
+$dark: $grey-darker
+$dark-invert: findColorInvert($dark)
+
 $primary-invert: findColorInvert($primary)
 $info: $blue
 $info-invert: findColorInvert($info)
@@ -10,7 +13,7 @@ $warning-invert: findColorInvert($warning)
 $danger: $red
 $danger-invert: findColorInvert($danger)
 
-$colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
+$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
 
 $body-background: $grey-lighter
 

bulma/elements/buttons.sass

@@ -16,6 +16,7 @@
 .button
   +control
   padding: 3px 10px
+  text-align: center
   white-space: nowrap
   strong
     color: inherit

css/bulma.css

@@ -1088,6 +1088,7 @@ table th {
   position: relative;
   vertical-align: top;
   padding: 3px 10px;
+  text-align: center;
   white-space: nowrap;
 }
 
@@ -1146,6 +1147,56 @@ table th {
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
+.button.is-dark {
+  background: #222324;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-dark:hover, .button.is-dark:focus {
+  background: #090a0a;
+  border-color: transparent;
+  color: white;
+}
+
+.button.is-dark:active {
+  border-color: transparent;
+}
+
+.button.is-dark.is-outlined {
+  background: transparent;
+  border-color: #222324;
+  color: #222324;
+}
+
+.button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus {
+  border-color: #090a0a;
+  color: #090a0a;
+}
+
+.button.is-dark.is-inverted {
+  background: white;
+  color: #222324;
+}
+
+.button.is-dark.is-inverted:hover {
+  background: #f2f2f2;
+}
+
+.button.is-dark.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: white;
+  color: white;
+}
+
+.button.is-dark.is-inverted.is-outlined:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.button.is-dark.is-loading:after {
+  border-color: transparent transparent white white !important;
+}
+
 .button.is-primary {
   background: #1fc8db;
   border-color: transparent;
@@ -1663,6 +1714,20 @@ table th {
   margin-bottom: 20px;
 }
 
+.message.is-dark {
+  background: whitesmoke;
+}
+
+.message.is-dark .message-header {
+  background: #222324;
+  color: white;
+}
+
+.message.is-dark .message-body {
+  border-color: #222324;
+  color: gray;
+}
+
 .message.is-primary {
   background: #edfbfc;
 }
@@ -1754,6 +1819,11 @@ table th {
   color: inherit;
 }
 
+.notification.is-dark {
+  background: #222324;
+  color: white;
+}
+
 .notification.is-primary {
   background: #1fc8db;
   color: white;
@@ -2025,6 +2095,11 @@ table th {
   margin-right: -8px;
 }
 
+.tag.is-dark {
+  background: #222324;
+  color: white;
+}
+
 .tag.is-primary {
   background: #1fc8db;
   color: white;
@@ -2980,6 +3055,92 @@ table th {
   color: #aeb1b5;
 }
 
+.hero.is-dark {
+  background: #222324;
+  color: white;
+}
+
+.hero.is-dark .title {
+  color: white;
+}
+
+.hero.is-dark .title a,
+.hero.is-dark .title strong {
+  color: inherit;
+}
+
+.hero.is-dark .subtitle {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.hero.is-dark .subtitle strong {
+  color: white;
+}
+
+.hero.is-dark .header .container {
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.hero.is-dark .header-icon,
+.hero.is-dark .header-item > a:not(.button) {
+  color: white;
+  opacity: 0.5;
+}
+
+.hero.is-dark .header-icon:hover, .hero.is-dark .header-icon.is-active,
+.hero.is-dark .header-item > a:not(.button):hover,
+.hero.is-dark .header-item > a:not(.button).is-active {
+  opacity: 1;
+}
+
+.hero.is-dark .tabs a {
+  color: white;
+  opacity: 0.5;
+}
+
+.hero.is-dark .tabs a:hover {
+  opacity: 1;
+}
+
+.hero.is-dark .tabs li.is-active a {
+  opacity: 1;
+}
+
+.hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a {
+  color: white;
+}
+
+.hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover {
+  background: white;
+  color: #222324;
+}
+
+.hero.is-dark.is-bold {
+  background-image: linear-gradient(141deg, #080a0b 0%, #222324 71%, #2c2e34 100%);
+}
+
+@media screen and (max-width: 768px) {
+  .hero.is-dark .header-toggle span {
+    background: white;
+  }
+  .hero.is-dark .header-toggle:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  .hero.is-dark .header-toggle.is-active span {
+    background: white;
+  }
+  .hero.is-dark .header-menu {
+    background: #222324;
+  }
+  .hero.is-dark .header-menu .header-item {
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
 .hero.is-primary {
   background: #1fc8db;
   color: white;