Add customisation variables

docs/css/bulma-docs.css

@@ -2109,7 +2109,7 @@ input[type="submit"].button {
 
 .content sup,
 .content sub {
-  font-size: 70%;
+  font-size: 75%;
 }
 
 .content table {
@@ -2226,22 +2226,22 @@ input[type="submit"].button {
 
 .input[disabled]::-moz-placeholder,
 .textarea[disabled]::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .input[disabled]::-webkit-input-placeholder,
 .textarea[disabled]::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .input[disabled]:-moz-placeholder,
 .textarea[disabled]:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .input[disabled]:-ms-input-placeholder,
 .textarea[disabled]:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .input[type="search"],
@@ -2447,19 +2447,19 @@ input[type="submit"].button {
 }
 
 .select select[disabled]::-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .select select[disabled]::-webkit-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .select select[disabled]:-moz-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .select select[disabled]:-ms-input-placeholder {
-  color: rgba(54, 54, 54, 0.3);
+  color: rgba(122, 122, 122, 0.3);
 }
 
 .select select:hover {
@@ -3332,13 +3332,13 @@ input[type="submit"].button {
 .table thead td,
 .table thead th {
   border-width: 0 0 2px;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .table tfoot td,
 .table tfoot th {
   border-width: 2px 0 0;
-  color: #7a7a7a;
+  color: #363636;
 }
 
 .table tbody tr:last-child td,
@@ -3783,9 +3783,9 @@ input[type="submit"].button {
   pointer-events: none;
 }
 
-.breadcrumb li + li:before {
+.breadcrumb li + li::before {
   color: #4a4a4a;
-  content: '\0002f';
+  content: "\0002f";
 }
 
 .breadcrumb ul, .breadcrumb ol {
@@ -3824,20 +3824,20 @@ input[type="submit"].button {
   font-size: 1.5rem;
 }
 
-.breadcrumb.has-arrow-separator li + li:before {
-  content: '\02192';
+.breadcrumb.has-arrow-separator li + li::before {
+  content: "\02192";
 }
 
-.breadcrumb.has-bullet-separator li + li:before {
-  content: '\02022';
+.breadcrumb.has-bullet-separator li + li::before {
+  content: "\02022";
 }
 
-.breadcrumb.has-dot-separator li + li:before {
-  content: '\000b7';
+.breadcrumb.has-dot-separator li + li::before {
+  content: "\000b7";
 }
 
-.breadcrumb.has-succeeds-separator li + li:before {
-  content: '\0227B';
+.breadcrumb.has-succeeds-separator li + li::before {
+  content: "\0227B";
 }
 
 .card {
@@ -3971,6 +3971,54 @@ a.dropdown-item.is-active {
   margin: 0.5rem 0;
 }
 
+.level {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.level:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.level code {
+  border-radius: 3px;
+}
+
+.level img {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.level.is-mobile {
+  display: flex;
+}
+
+.level.is-mobile .level-left,
+.level.is-mobile .level-right {
+  display: flex;
+}
+
+.level.is-mobile .level-left + .level-right {
+  margin-top: 0;
+}
+
+.level.is-mobile .level-item:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.level.is-mobile .level-item:not(.is-narrow) {
+  flex-grow: 1;
+}
+
+@media screen and (min-width: 769px), print {
+  .level {
+    display: flex;
+  }
+  .level > .level-item:not(.is-narrow) {
+    flex-grow: 1;
+  }
+}
+
 .level-item {
   align-items: center;
   display: flex;
@@ -4036,52 +4084,44 @@ a.dropdown-item.is-active {
   }
 }
 
-.level {
-  align-items: center;
-  justify-content: space-between;
-}
-
-.level:not(:last-child) {
-  margin-bottom: 1.5rem;
-}
-
-.level code {
-  border-radius: 3px;
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: left;
 }
 
-.level img {
-  display: inline-block;
-  vertical-align: top;
+.media .content:not(:last-child) {
+  margin-bottom: 0.75rem;
 }
 
-.level.is-mobile {
+.media .media {
+  border-top: 1px solid rgba(219, 219, 219, 0.5);
   display: flex;
+  padding-top: 0.75rem;
 }
 
-.level.is-mobile .level-left,
-.level.is-mobile .level-right {
-  display: flex;
+.media .media .content:not(:last-child),
+.media .media .control:not(:last-child) {
+  margin-bottom: 0.5rem;
 }
 
-.level.is-mobile .level-left + .level-right {
-  margin-top: 0;
+.media .media .media {
+  padding-top: 0.5rem;
 }
 
-.level.is-mobile .level-item:not(:last-child) {
-  margin-bottom: 0;
+.media .media .media + .media {
+  margin-top: 0.5rem;
 }
 
-.level.is-mobile .level-item:not(.is-narrow) {
-  flex-grow: 1;
+.media + .media {
+  border-top: 1px solid rgba(219, 219, 219, 0.5);
+  margin-top: 1rem;
+  padding-top: 1rem;
 }
 
-@media screen and (min-width: 769px), print {
-  .level {
-    display: flex;
-  }
-  .level > .level-item:not(.is-narrow) {
-    flex-grow: 1;
-  }
+.media.is-large + .media {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
 }
 
 .media-left,
@@ -4106,48 +4146,20 @@ a.dropdown-item.is-active {
   text-align: left;
 }
 
-.media {
-  align-items: flex-start;
-  display: flex;
-  text-align: left;
-}
-
-.media .content:not(:last-child) {
-  margin-bottom: 0.75rem;
-}
-
-.media .media {
-  border-top: 1px solid rgba(219, 219, 219, 0.5);
-  display: flex;
-  padding-top: 0.75rem;
-}
-
-.media .media .content:not(:last-child),
-.media .media .control:not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.media .media .media {
-  padding-top: 0.5rem;
-}
-
-.media .media .media + .media {
-  margin-top: 0.5rem;
+.menu {
+  font-size: 1rem;
 }
 
-.media + .media {
-  border-top: 1px solid rgba(219, 219, 219, 0.5);
-  margin-top: 1rem;
-  padding-top: 1rem;
+.menu.is-small {
+  font-size: 0.75rem;
 }
 
-.media.is-large + .media {
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
+.menu.is-medium {
+  font-size: 1.25rem;
 }
 
-.menu {
-  font-size: 1rem;
+.menu.is-large {
+  font-size: 1.5rem;
 }
 
 .menu-list {
@@ -4179,7 +4191,7 @@ a.dropdown-item.is-active {
 
 .menu-label {
   color: #7a7a7a;
-  font-size: 0.8em;
+  font-size: 0.75em;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
@@ -4202,6 +4214,18 @@ a.dropdown-item.is-active {
   margin-bottom: 1.5rem;
 }
 
+.message.is-small {
+  font-size: 0.75rem;
+}
+
+.message.is-medium {
+  font-size: 1.25rem;
+}
+
+.message.is-large {
+  font-size: 1.5rem;
+}
+
 .message.is-white {
   background-color: white;
 }
@@ -4379,11 +4403,29 @@ a.dropdown-item.is-active {
 
 .message-body code,
 .message-body pre {
-  background: white;
+  background-color: white;
 }
 
 .message-body pre code {
-  background: transparent;
+  background-color: transparent;
+}
+
+.modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  z-index: 20;
+}
+
+.modal.is-active {
+  display: flex;
 }
 
 .modal-background {
@@ -4553,24 +4595,6 @@ a.dropdown-item.is-active {
   padding: 20px;
 }
 
-.modal {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  align-items: center;
-  display: none;
-  justify-content: center;
-  overflow: hidden;
-  position: fixed;
-  z-index: 20;
-}
-
-.modal.is-active {
-  display: flex;
-}
-
 .nav-toggle {
   cursor: pointer;
   display: block;
@@ -4920,7 +4944,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
 
 .navbar-item.is-tab.is-active {
   background-color: transparent;
-  border-bottom: 3px solid #00d1b2;
+  border-bottom-color: #00d1b2;
+  border-bottom-style: solid;
+  border-bottom-width: 3px;
   color: #00d1b2;
   padding-bottom: calc(0.5rem - 3px);
 }
@@ -5432,7 +5458,9 @@ label.panel-block:hover {
 
 .tabs a {
   align-items: center;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom-color: #dbdbdb;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
   color: #4a4a4a;
   display: flex;
   justify-content: center;
@@ -5457,7 +5485,9 @@ label.panel-block:hover {
 
 .tabs ul {
   align-items: center;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom-color: #dbdbdb;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
@@ -5518,7 +5548,9 @@ label.panel-block:hover {
 }
 
 .tabs.is-toggle a {
-  border: 1px solid #dbdbdb;
+  border-color: #dbdbdb;
+  border-style: solid;
+  border-width: 1px;
   margin-bottom: 0;
   position: relative;
 }
@@ -6676,72 +6708,8 @@ label.panel-block:hover {
   }
 }
 
-.hero-video {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  overflow: hidden;
-}
-
-.hero-video video {
-  left: 50%;
-  min-height: 100%;
-  min-width: 100%;
-  position: absolute;
-  top: 50%;
-  transform: translate3d(-50%, -50%, 0);
-}
-
-.hero-video.is-transparent {
-  opacity: 0.3;
-}
-
-@media screen and (max-width: 768px) {
-  .hero-video {
-    display: none;
-  }
-}
-
-.hero-buttons {
-  margin-top: 1.5rem;
-}
-
-@media screen and (max-width: 768px) {
-  .hero-buttons .button {
-    display: flex;
-  }
-  .hero-buttons .button:not(:last-child) {
-    margin-bottom: 0.75rem;
-  }
-}
-
-@media screen and (min-width: 769px), print {
-  .hero-buttons {
-    display: flex;
-    justify-content: center;
-  }
-  .hero-buttons .button:not(:last-child) {
-    margin-right: 1.5rem;
-  }
-}
-
-.hero-head,
-.hero-foot {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.hero-body {
-  flex-grow: 1;
-  flex-shrink: 0;
-  padding: 3rem 1.5rem;
-}
-
 .hero {
   align-items: stretch;
-  background-color: white;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -7652,6 +7620,69 @@ label.panel-block:hover {
   min-height: 100vh;
 }
 
+.hero-video {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.hero-video video {
+  left: 50%;
+  min-height: 100%;
+  min-width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.hero-video.is-transparent {
+  opacity: 0.3;
+}
+
+@media screen and (max-width: 768px) {
+  .hero-video {
+    display: none;
+  }
+}
+
+.hero-buttons {
+  margin-top: 1.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .hero-buttons .button {
+    display: flex;
+  }
+  .hero-buttons .button:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+}
+
+@media screen and (min-width: 769px), print {
+  .hero-buttons {
+    display: flex;
+    justify-content: center;
+  }
+  .hero-buttons .button:not(:last-child) {
+    margin-right: 1.5rem;
+  }
+}
+
+.hero-head,
+.hero-foot {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.hero-body {
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: 3rem 1.5rem;
+}
+
 .section {
   padding: 3rem 1.5rem;
 }

sass/base/_all.sass

@@ -145,25 +145,9 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-marginless
   margin: 0 !important
 
-.is-vertically-marginless
-  margin-top: 0 !important
-  margin-bottom: 0 !important
-
-.is-horizontally-marginless
-  margin-left: 0 !important
-  margin-right: 0 !important
-
 .is-paddingless
   padding: 0 !important
 
-.is-vertically-paddingless
-  padding-top: 0 !important
-  padding-bottom: 0 !important
-
-.is-horizontally-paddingless
-  padding-left: 0 !important
-  padding-right: 0 !important
-
 .is-radiusless
   border-radius: 0 !important
 

sass/base/minireset.sass

@@ -1,3 +1,9 @@
+$breadcrumb-item-color: $text-light !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-separator-color: $text !default
+
 .breadcrumb
   +block
   +unselectable
@@ -9,23 +15,23 @@
   white-space: nowrap
   a
     align-items: center
-    color: $text-light
+    color: $breadcrumb-item-color
     display: flex
     justify-content: center
     padding: 0.5em 0.75em
     &:hover
-      color: $link-hover
+      color: $breadcrumb-item-hover-color
   li
     align-items: center
     display: flex
     &.is-active
       a
-        color: $text-strong
+        color: $breadcrumb-item-active-color
         cursor: default
         pointer-events: none
-    & + li:before
-      color: $text
-      content: '\0002f'
+    & + li::before
+      color: $breadcrumb-item-separator-color
+      content: "\0002f"
   ul, ol
     align-items: center
     display: flex
@@ -53,14 +59,14 @@
     font-size: $size-large
   // Styles
   &.has-arrow-separator
-    li + li:before
-      content: '\02192'
+    li + li::before
+      content: "\02192"
   &.has-bullet-separator
-    li + li:before
-      content: '\02022'
+    li + li::before
+      content: "\02022"
   &.has-dot-separator
-    li + li:before
-      content: '\000b7'
+    li + li::before
+      content: "\000b7"
   &.has-succeeds-separator
-    li + li:before
-      content: '\0227B'
+    li + li::before
+      content: "\0227B"

sass/components/card.sass

@@ -1,17 +1,17 @@
-$card: $text !default
-$card-background: $white !default
+$card-color: $text !default
+$card-background-color: $white !default
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
-$card-header: $text-strong !default
+$card-header-color: $text-strong !default
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
 $card-header-weight: $weight-bold !default
 
-$card-footer-border: $border !default
+$card-footer-border-top: 1px solid $border !default
 
 .card
-  background-color: $card-background
+  background-color: $card-background-color
   box-shadow: $card-shadow
-  color: $card
+  color: $card-color
   max-width: 100%
   position: relative
 
@@ -22,7 +22,7 @@ $card-footer-border: $border !default
 
 .card-header-title
   align-items: center
-  color: $card-header
+  color: $card-header-color
   display: flex
   flex-grow: 1
   font-weight: $card-header-weight
@@ -43,7 +43,7 @@ $card-footer-border: $border !default
   padding: 1.5rem
 
 .card-footer
-  border-top: 1px solid $card-footer-border
+  border-top: $card-footer-border-top
   align-items: stretch
   display: flex
 
@@ -56,7 +56,7 @@ $card-footer-border: $border !default
   justify-content: center
   padding: 0.75rem
   &:not(:last-child)
-    border-right: 1px solid $card-footer-border
+    border-right: $card-footer-border-top
 
 // Combinations
 

sass/components/dropdown.sass

@@ -1,17 +1,17 @@
-$dropdown-content-background: $white !default
+$dropdown-content-background-color: $white !default
 $dropdown-content-arrow: $link !default
 $dropdown-content-offset: 4px !default
 $dropdown-content-radius: $radius !default
 $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item: $grey-dark !default
-$dropdown-item-hover: $black !default
-$dropdown-item-hover-background: $background !default
-$dropdown-item-active: $primary-invert !default
-$dropdown-item-active-background: $primary !default
+$dropdown-item-color: $grey-dark !default
+$dropdown-item-hover-color: $black !default
+$dropdown-item-hover-background-color: $background !default
+$dropdown-item-active-color: $primary-invert !default
+$dropdown-item-active-background-color: $primary !default
 
-$dropdown-divider-background: $border !default
+$dropdown-divider-background-color: $border !default
 
 .dropdown
   display: inline-flex
@@ -38,14 +38,14 @@ $dropdown-divider-background: $border !default
   z-index: $dropdown-content-z
 
 .dropdown-content
-  background-color: $dropdown-content-background
+  background-color: $dropdown-content-background-color
   border-radius: $dropdown-content-radius
   box-shadow: $dropdown-content-shadow
   padding-bottom: 0.5rem
   padding-top: 0.5rem
 
 .dropdown-item
-  color: $dropdown-item
+  color: $dropdown-item-color
   display: block
   font-size: 0.875rem
   line-height: 1.5
@@ -56,14 +56,14 @@ a.dropdown-item
   padding-right: 3rem
   white-space: nowrap
   &:hover
-    background-color: $dropdown-item-hover-background
-    color: $dropdown-item-hover
+    background-color: $dropdown-item-hover-background-color
+    color: $dropdown-item-hover-color
   &.is-active
-    background-color: $dropdown-item-active-background
-    color: $dropdown-item-active
+    background-color: $dropdown-item-active-background-color
+    color: $dropdown-item-active-color
 
 .dropdown-divider
-  background-color: $dropdown-divider-background
+  background-color: $dropdown-divider-background-color
   border: none
   display: block
   height: 1px

sass/components/level.sass

@@ -1,3 +1,32 @@
+.level
+  +block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    .level-left,
+    .level-right
+      display: flex
+    .level-left + .level-right
+      margin-top: 0
+    .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex-grow: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex-grow: 1
+
 .level-item
   align-items: center
   display: flex
@@ -41,32 +70,3 @@
   // Responsiveness
   +tablet
     display: flex
-
-.level
-  +block
-  align-items: center
-  justify-content: space-between
-  code
-    border-radius: $radius
-  img
-    display: inline-block
-    vertical-align: top
-  // Modifiers
-  &.is-mobile
-    display: flex
-    .level-left,
-    .level-right
-      display: flex
-    .level-left + .level-right
-      margin-top: 0
-    .level-item
-      &:not(:last-child)
-        margin-bottom: 0
-      &:not(.is-narrow)
-        flex-grow: 1
-  // Responsiveness
-  +tablet
-    display: flex
-    & > .level-item
-      &:not(.is-narrow)
-        flex-grow: 1

sass/components/media.sass

@@ -1,21 +1,3 @@
-.media-left,
-.media-right
-  flex-basis: auto
-  flex-grow: 0
-  flex-shrink: 0
-
-.media-left
-  margin-right: 1rem
-
-.media-right
-  margin-left: 1rem
-
-.media-content
-  flex-basis: auto
-  flex-grow: 1
-  flex-shrink: 1
-  text-align: left
-
 .media
   align-items: flex-start
   display: flex
@@ -42,3 +24,21 @@
     & + .media
       margin-top: 1.5rem
       padding-top: 1.5rem
+
+.media-left,
+.media-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+
+.media-left
+  margin-right: 1rem
+
+.media-right
+  margin-left: 1rem
+
+.media-content
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  text-align: left

sass/components/menu.sass

@@ -1,42 +1,47 @@
-$menu-size: $size-normal !default
-
-$menu-item: $text !default
+$menu-item-color: $text !default
 $menu-item-radius: $radius-small !default
-$menu-item-hover: $text-strong !default
-$menu-item-hover-background: $background !default
-$menu-item-active: $link-invert !default
-$menu-item-active-background: $link !default
+$menu-item-hover-color: $text-strong !default
+$menu-item-hover-background-color: $background !default
+$menu-item-active-color: $link-invert !default
+$menu-item-active-background-color: $link !default
 
-$menu-list-border: $border !default
+$menu-list-border-left: 1px solid $border !default
 
-$menu-label: $text-light !default
+$menu-label-color: $text-light !default
 
 .menu
-  font-size: $menu-size
+  font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
 
 .menu-list
   line-height: 1.25
   a
     border-radius: $menu-item-radius
-    color: $menu-item
+    color: $menu-item-color
     display: block
     padding: 0.5em 0.75em
     &:hover
-      background-color: $menu-item-hover-background
-      color: $menu-item-hover
+      background-color: $menu-item-hover-background-color
+      color: $menu-item-hover-color
     // Modifiers
     &.is-active
-      background-color: $menu-item-active-background
-      color: $menu-item-active
+      background-color: $menu-item-active-background-color
+      color: $menu-item-active-color
   li
     ul
-      border-left: 1px solid $menu-list-border
+      border-left: $menu-list-border-left
       margin: 0.75em
       padding-left: 0.75em
 
 .menu-label
-  color: $menu-label
-  font-size: 0.8em
+  color: $menu-label-color
+  font-size: 0.75em
   letter-spacing: 0.1em
   text-transform: uppercase
   &:not(:first-child)

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

sass/components/modal.sass

@@ -1,81 +1,111 @@
+$modal-z: 20 !default
+
+$modal-background-background-color: rgba($black, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $white !default
+$modal-card-body-padding: 20px !default
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: $modal-z
+  // Modifiers
+  &.is-active
+    display: flex
+
 .modal-background
   +overlay
-  background-color: rgba($black, 0.86)
+  background-color: $modal-background-background-color
 
 .modal-content,
 .modal-card
-  margin: 0 20px
-  max-height: calc(100vh - 160px)
+  margin: 0 $modal-content-margin-mobile
+  max-height: calc(100vh - #{$modal-content-spacing-mobile})
   overflow: auto
   position: relative
   width: 100%
   // Responsiveness
   +tablet
     margin: 0 auto
-    max-height: calc(100vh - 40px)
-    width: 640px
+    max-height: calc(100vh - #{$modal-content-spacing-tablet})
+    width: $modal-content-width
 
 .modal-close
   +delete
   background: none
-  height: 40px
+  height: $modal-close-dimensions
   position: fixed
-  right: 20px
-  top: 20px
-  width: 40px
+  right: $modal-close-right
+  top: $modal-close-top
+  width: $modal-close-dimensions
 
 .modal-card
   display: flex
   flex-direction: column
-  max-height: calc(100vh - 40px)
+  max-height: calc(100vh - #{$modal-card-spacing})
   overflow: hidden
 
 .modal-card-head,
 .modal-card-foot
   align-items: center
-  background-color: $background
+  background-color: $modal-card-head-background-color
   display: flex
   flex-shrink: 0
   justify-content: flex-start
-  padding: 20px
+  padding: $modal-card-head-padding
   position: relative
 
 .modal-card-head
-  border-bottom: 1px solid $border
-  border-top-left-radius: $radius-large
-  border-top-right-radius: $radius-large
+  border-bottom: $modal-card-head-border-bottom
+  border-top-left-radius: $modal-card-head-radius
+  border-top-right-radius: $modal-card-head-radius
 
 .modal-card-title
-  color: $text-strong
+  color: $modal-card-title-color
   flex-grow: 1
   flex-shrink: 0
-  font-size: $size-4
-  line-height: 1
+  font-size: $modal-card-title-size
+  line-height: $modal-card-title-line-height
 
 .modal-card-foot
-  border-bottom-left-radius: $radius-large
-  border-bottom-right-radius: $radius-large
-  border-top: 1px solid $border
+  border-bottom-left-radius: $modal-card-foot-radius
+  border-bottom-right-radius: $modal-card-foot-radius
+  border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
       margin-right: 10px
 
 .modal-card-body
   +overflow-touch
-  background-color: $white
+  background-color: $modal-card-body-background-color
   flex-grow: 1
   flex-shrink: 1
   overflow: auto
-  padding: 20px
-
-.modal
-  +overlay
-  align-items: center
-  display: none
-  justify-content: center
-  overflow: hidden
-  position: fixed
-  z-index: 20
-  // Modifiers
-  &.is-active
-    display: flex
+  padding: $modal-card-body-padding

sass/components/nav.sass

@@ -1,34 +1,39 @@
-$navbar-background: $white !default
+$navbar-background-color: $white !default
 $navbar-height: 3.25rem !default
 
-$navbar-item: $grey-dark !default
-$navbar-item-hover: $black !default
-$navbar-item-hover-background: $background !default
-$navbar-item-active: $black !default
-$navbar-item-active-background: transparent !default
-
-$navbar-tab-hover-background: transparent !default
-$navbar-tab-hover-border: $primary !default
-$navbar-tab-active: $primary !default
-$navbar-tab-active-background: transparent !default
-$navbar-tab-active-border: $primary !default
-
-$navbar-dropdown-background: $white !default
-$navbar-dropdown-border: $border !default
+$navbar-item-color: $grey-dark !default
+$navbar-item-hover-color: $black !default
+$navbar-item-hover-background-color: $background !default
+$navbar-item-active-color: $black !default
+$navbar-item-active-background-color: transparent !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $primary !default
+$navbar-tab-active-color: $primary !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $primary !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-border-top: 1px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
-$navbar-dropdown-item-hover: $black !default
-$navbar-dropdown-item-hover-background: $background !default
-$navbar-dropdown-item-active: $primary !default
-$navbar-dropdown-item-active-background: $background !default
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $primary !default
+$navbar-dropdown-item-active-background-color: $background !default
 
-$navbar-divider-background: $border !default
+$navbar-divider-background-color: $border !default
 
 .navbar
-  background-color: $navbar-background
+  background-color: $navbar-background-color
   min-height: $navbar-height
   position: relative
   & > .container
@@ -56,7 +61,7 @@ $navbar-divider-background: $border !default
 
 .navbar-item,
 .navbar-link
-  color: $navbar-item
+  color: $navbar-item-color
   display: block
   line-height: 1.5
   padding: 0.5rem 1rem
@@ -66,8 +71,8 @@ a.navbar-item,
 .navbar-link
   &:hover,
   &.is-active
-    background-color: $navbar-item-hover-background
-    color: $navbar-item-hover
+    background-color: $navbar-item-hover-background-color
+    color: $navbar-item-hover-color
 
 .navbar-item
   flex-grow: 0
@@ -81,13 +86,15 @@ a.navbar-item,
     min-height: $navbar-height
     padding-bottom: calc(0.5rem - 1px)
     &:hover
-      background-color: $navbar-tab-hover-background
-      border-bottom-color: $navbar-tab-hover-border
+      background-color: $navbar-tab-hover-background-color
+      border-bottom-color: $navbar-tab-hover-border-bottom-color
     &.is-active
-      background-color: $navbar-tab-active-background
-      border-bottom: 3px solid $navbar-tab-active-border
-      color: $navbar-tab-active
-      padding-bottom: calc(0.5rem - 3px)
+      background-color: $navbar-tab-active-background-color
+      border-bottom-color: $navbar-tab-active-border-bottom-color
+      border-bottom-style: $navbar-tab-active-border-bottom-style
+      border-bottom-width: $navbar-tab-active-border-bottom-width
+      color: $navbar-tab-active-color
+      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
 
 .navbar-content
   flex-grow: 1
@@ -105,7 +112,7 @@ a.navbar-item,
     padding-right: 1.5rem
 
 .navbar-divider
-  background-color: $navbar-divider-background
+  background-color: $navbar-divider-background-color
   border: none
   display: none
   height: 1px
@@ -145,11 +152,11 @@ a.navbar-item,
       .navbar-dropdown
         a.navbar-item
           &:hover
-            background-color: $navbar-dropdown-item-hover-background
-            color: $navbar-dropdown-item-hover
+            background-color: $navbar-dropdown-item-hover-background-color
+            color: $navbar-dropdown-item-hover-color
           &.is-active
-            background-color: $navbar-dropdown-item-active-background
-            color: $navbar-dropdown-item-active
+            background-color: $navbar-dropdown-item-active-background-color
+            color: $navbar-dropdown-item-active-color
   .navbar-burger
     display: none
   .navbar-item,
@@ -183,10 +190,10 @@ a.navbar-item,
     justify-content: flex-end
     margin-left: auto
   .navbar-dropdown
-    background-color: $navbar-dropdown-background
+    background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
-    border-top: 1px solid $navbar-dropdown-border
+    border-top: $navbar-dropdown-border-top
     box-shadow: 0 8px 8px rgba($black, 0.1)
     display: none
     font-size: 0.875rem
@@ -201,15 +208,15 @@ a.navbar-item,
     a.navbar-item
       padding-right: 3rem
       &:hover
-        background-color: $navbar-dropdown-item-hover-background
-        color: $navbar-dropdown-item-hover
+        background-color: $navbar-dropdown-item-hover-background-color
+        color: $navbar-dropdown-item-hover-color
       &.is-active
-        background-color: $navbar-dropdown-item-active-background
-        color: $navbar-dropdown-item-active
+        background-color: $navbar-dropdown-item-active-background-color
+        color: $navbar-dropdown-item-active-color
     &.is-boxed
-      border-radius: $navbar-dropdown-radius
+      border-radius: $navbar-dropdown-boxed-radius
       border-top: none
-      box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+      box-shadow: $navbar-dropdown-boxed-shadow
       display: block
       opacity: 0
       pointer-events: none
@@ -217,9 +224,6 @@ a.navbar-item,
       transform: translateY(-5px)
       transition-duration: $speed
       transition-property: opacity, transform
-    &.is-right
-      left: auto
-      right: 0
   .navbar-divider
     display: block
   .container > .navbar
@@ -229,11 +233,11 @@ a.navbar-item,
   a.navbar-item,
   .navbar-link
     &.is-active
-      color: $navbar-item-active
+      color: $navbar-item-active-color
     &.is-active:not(:hover)
-      background-color: $navbar-item-active-background
+      background-color: $navbar-item-active-background-color
   .navbar-item.has-dropdown
     &:hover,
     &.is-active
       .navbar-link
-        background-color: $navbar-item-hover-background
+        background-color: $navbar-item-hover-background-color

sass/components/pagination.sass

@@ -1,31 +1,32 @@
-$pagination: $grey-darker !default
+$pagination-color: $grey-darker !default
 $pagination-background: $white !default
-$pagination-border: $grey-lighter !default
+$pagination-border-color: $grey-lighter !default
+$pagination-margin: -0.25rem !default
 
-$pagination-hover: $link-hover !default
-$pagination-hover-border: $link-hover-border !default
+$pagination-hover-color: $link-hover !default
+$pagination-hover-border-color: $link-hover-border !default
 
-$pagination-focus: $link-focus !default
-$pagination-focus-border: $link-focus-border !default
+$pagination-focus-color: $link-focus !default
+$pagination-focus-border-color: $link-focus-border !default
 
-$pagination-active: $link-active !default
-$pagination-active-border: $link-active-border !default
+$pagination-active-color: $link-active !default
+$pagination-active-border-color: $link-active-border !default
 
-$pagination-disabled: $grey !default
-$pagination-disabled-background: $grey-lighter !default
-$pagination-disabled-border: $grey-lighter !default
+$pagination-disabled-color: $grey !default
+$pagination-disabled-background-color: $grey-lighter !default
+$pagination-disabled-border-color: $grey-lighter !default
 
-$pagination-current: $link-invert !default
-$pagination-current-background: $link !default
-$pagination-current-border: $link !default
+$pagination-current-color: $link-invert !default
+$pagination-current-background-color: $link !default
+$pagination-current-border-color: $link !default
 
-$pagination-ellipsis: $grey-light !default
+$pagination-ellipsis-color: $grey-light !default
 
 $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination
   font-size: $size-normal
-  margin: -0.25rem
+  margin: $pagination-margin
   // Sizes
   &.is-small
     font-size: $size-small
@@ -57,20 +58,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border-color: $pagination-border
+  border-color: $pagination-border-color
   min-width: 2.25em
   &:hover
-    border-color: $pagination-hover-border
-    color: $pagination-hover
+    border-color: $pagination-hover-border-color
+    color: $pagination-hover-color
   &:focus
-    border-color: $pagination-focus-border
+    border-color: $pagination-focus-border-color
   &:active
     box-shadow: $pagination-shadow-inset
   &[disabled]
-    background-color: $pagination-disabled-background
-    border-color: $pagination-disabled-border
+    background-color: $pagination-disabled-background-color
+    border-color: $pagination-disabled-border-color
     box-shadow: none
-    color: $pagination-disabled
+    color: $pagination-disabled-color
     opacity: 0.5
 
 .pagination-previous,
@@ -81,12 +82,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination-link
   &.is-current
-    background-color: $pagination-current-background
-    border-color: $pagination-current-border
-    color: $pagination-current
+    background-color: $pagination-current-background-color
+    border-color: $pagination-current-border-color
+    color: $pagination-current-color
 
 .pagination-ellipsis
-  color: $pagination-ellipsis
+  color: $pagination-ellipsis-color
   pointer-events: none
 
 .pagination-list

sass/components/panel.sass

@@ -1,3 +1,28 @@
+$panel-item-border: 1px solid $border !default
+
+$panel-heading-background-color: $background !default
+$panel-heading-color: $text-strong !default
+$panel-heading-line-height: 1.25 !default
+$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-radius: $radius !default
+$panel-heading-size: 1.25em !default
+$panel-heading-weight: $weight-light !default
+
+$panel-tab-border-bottom: 1px solid $border !default
+$panel-tab-active-border-bottom-color: $link-active-border !default
+$panel-tab-active-color: $link-active !default
+
+$panel-list-item-color: $text !default
+$panel-list-item-hover-color: $link !default
+
+$panel-block-color: $text-strong !default
+$panel-block-hover-background-color: $background !default
+$panel-block-active-border-left-color: $link !default
+$panel-block-active-color: $link-active !default
+$panel-block-active-icon-color: $link !default
+
+$panel-icon-color: $text-light !default
+
 .panel
   font-size: $size-normal
   &:not(:last-child)
@@ -6,20 +31,20 @@
 .panel-heading,
 .panel-tabs,
 .panel-block
-  border-bottom: 1px solid $border
-  border-left: 1px solid $border
-  border-right: 1px solid $border
+  border-bottom: $panel-item-border
+  border-left: $panel-item-border
+  border-right: $panel-item-border
   &:first-child
-    border-top: 1px solid $border
+    border-top: $panel-item-border
 
 .panel-heading
-  background-color: $background
-  border-radius: $radius $radius 0 0
-  color: $text-strong
-  font-size: 1.25em
-  font-weight: $weight-light
-  line-height: 1.25
-  padding: 0.5em 0.75em
+  background-color: $panel-heading-background-color
+  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  color: $panel-heading-color
+  font-size: $panel-heading-size
+  font-weight: $panel-heading-weight
+  line-height: $panel-heading-line-height
+  padding: $panel-heading-padding
 
 .panel-tabs
   align-items: flex-end
@@ -27,23 +52,23 @@
   font-size: 0.875em
   justify-content: center
   a
-    border-bottom: 1px solid $border
+    border-bottom: $panel-tab-border-bottom
     margin-bottom: -1px
     padding: 0.5em
     // Modifiers
     &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
+      border-bottom-color: $panel-tab-active-border-bottom-color
+      color: $panel-tab-active-color
 
 .panel-list
   a
-    color: $text
+    color: $panel-list-item-color
     &:hover
-      color: $link
+      color: $panel-list-item-hover-color
 
 .panel-block
   align-items: center
-  color: $text-strong
+  color: $panel-block-color
   display: flex
   justify-content: flex-start
   padding: 0.5em 0.75em
@@ -56,20 +81,20 @@
   &.is-wrapped
     flex-wrap: wrap
   &.is-active
-    border-left-color: $link
-    color: $link-active
+    border-left-color: $panel-block-active-border-left-color
+    color: $panel-block-active-color
     .panel-icon
-      color: $link
+      color: $panel-block-active-icon-color
 
 a.panel-block,
 label.panel-block
   cursor: pointer
   &:hover
-    background-color: $background
+    background-color: $panel-block-hover-background-color
 
 .panel-icon
   +fa(14px, 1em)
-  color: $text-light
+  color: $panel-icon-color
   margin-right: 0.75em
   .fa
     font-size: inherit

sass/components/tabs.sass

@@ -1,3 +1,31 @@
+$tabs-border-bottom-color: $border !default
+$tabs-border-bottom-style: solid !default
+$tabs-border-bottom-width: 1px !default
+$tabs-link-color: $text !default
+$tabs-link-hover-border-bottom-color: $text-strong !default
+$tabs-link-hover-color: $text-strong !default
+$tabs-link-active-border-bottom-color: $primary !default
+$tabs-link-active-color: $primary !default
+$tabs-link-padding: 0.5em 1em !default
+
+$tabs-boxed-link-radius: $radius !default
+$tabs-boxed-link-hover-background-color: $background !default
+$tabs-boxed-link-hover-border-bottom-color: $border !default
+
+$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-border-bottom-color: transparent !important !default
+
+$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-style: solid !default
+$tabs-toggle-link-border-width: 1px !default
+$tabs-toggle-link-hover-background-color: $background !default
+$tabs-toggle-link-hover-border-color: $border-hover !default
+$tabs-toggle-link-radius: $radius !default
+$tabs-toggle-link-active-background-color: $primary !default
+$tabs-toggle-link-active-border-color: $primary !default
+$tabs-toggle-link-active-color: $primary-invert !default
+
 .tabs
   +block
   +overflow-touch
@@ -11,25 +39,29 @@
   white-space: nowrap
   a
     align-items: center
-    border-bottom: 1px solid $border
-    color: $text
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
+    color: $tabs-link-color
     display: flex
     justify-content: center
-    margin-bottom: -1px
-    padding: 0.5em 1em
+    margin-bottom: -#{$tabs-border-bottom-width}
+    padding: $tabs-link-padding
     vertical-align: top
     &:hover
-      border-bottom-color: $text-strong
-      color: $text-strong
+      border-bottom-color: $tabs-link-hover-border-bottom-color
+      color: $tabs-link-hover-color
   li
     display: block
     &.is-active
       a
-        border-bottom-color: $primary
-        color: $primary
+        border-bottom-color: $tabs-link-active-border-bottom-color
+        color: $tabs-link-active-color
   ul
     align-items: center
-    border-bottom: 1px solid $border
+    border-bottom-color: $tabs-border-bottom-color
+    border-bottom-style: $tabs-border-bottom-style
+    border-bottom-width: $tabs-border-bottom-width
     display: flex
     flex-grow: 1
     flex-shrink: 0
@@ -60,41 +92,43 @@
   &.is-boxed
     a
       border: 1px solid transparent
-      border-radius: $radius $radius 0 0
+      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
       &:hover
-        background-color: $background
-        border-bottom-color: $border
+        background-color: $tabs-boxed-link-hover-background-color
+        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
     li
       &.is-active
         a
-          background-color: $white
-          border-color: $border
-          border-bottom-color: transparent !important
+          background-color: $tabs-boxed-link-active-background-color
+          border-color: $tabs-boxed-link-active-border-color
+          border-bottom-color: $tabs-boxed-link-active-border-bottom-color
   &.is-fullwidth
     li
       flex-grow: 1
       flex-shrink: 0
   &.is-toggle
     a
-      border: 1px solid $border
+      border-color: $tabs-toggle-link-border-color
+      border-style: $tabs-toggle-link-border-style
+      border-width: $tabs-toggle-link-border-width
       margin-bottom: 0
       position: relative
       &:hover
-        background-color: $background
-        border-color: $border-hover
+        background-color: $tabs-toggle-link-hover-background-color
+        border-color: $tabs-toggle-link-hover-border-color
         z-index: 2
     li
       & + li
-        margin-left: -1px
+        margin-left: -#{$tabs-toggle-link-border-width}
       &:first-child a
-        border-radius: $radius 0 0 $radius
+        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
       &:last-child a
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
       &.is-active
         a
-          background-color: $primary
-          border-color: $primary
-          color: $primary-invert
+          background-color: $tabs-toggle-link-active-background-color
+          border-color: $tabs-toggle-link-active-border-color
+          color: $tabs-toggle-link-active-color
           z-index: 1
     ul
       border-bottom: none

sass/elements/_all.sass

@@ -1,5 +1,5 @@
-$box: $text !default
-$box-background: $white !default
+$box-color: $text !default
+$box-background-color: $white !default
 $box-radius: $radius-large !default
 $box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 $box-padding: 1.25rem !default
@@ -9,10 +9,10 @@ $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
 
 .box
   +block
-  background-color: $box-background
+  background-color: $box-background-color
   border-radius: $box-radius
   box-shadow: $box-shadow
-  color: $box
+  color: $box-color
   display: block
   padding: $box-padding
 

sass/elements/button.sass

@@ -1,19 +1,28 @@
-$button: $grey-darker !default
-$button-background: $white !default
-$button-border: $grey-lighter !default
+$button-color: $grey-darker !default
+$button-background-color: $white !default
+$button-border-color: $grey-lighter !default
 
-$button-hover: $link-hover !default
-$button-hover-border: $link-hover-border !default
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
 
-$button-focus: $link-focus !default
-$button-focus-border: $link-focus-border !default
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $link-focus-border !default
 
-$button-active: $link-active !default
-$button-active-border: $link-active-border !default
+$button-active-color: $link-active !default
+$button-active-border-color: $link-active-border !default
 
-$button-static: $grey !default
-$button-static-background: $white-ter !default
-$button-static-border: $grey-lighter !default
+$button-link-color: $text !default
+$button-link-hover-background-color: $background !default
+$button-link-hover-color: $text-strong !default
+
+$button-disabled-background-color: $white !default
+$button-disabled-border-color: $grey-lighter !default
+$button-disabled-shadow: none !default
+$button-disabled-opacity: 0.5 !default
+
+$button-static-color: $grey !default
+$button-static-background-color: $white-ter !default
+$button-static-border-color: $grey-lighter !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 
@@ -29,9 +38,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 .button
   +control
   +unselectable
-  background-color: $button-background
-  border-color: $button-border
-  color: $button
+  background-color: $button-background-color
+  border-color: $button-border-color
+  color: $button-color
   cursor: pointer
   justify-content: center
   padding-left: 0.75em
@@ -59,23 +68,23 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   // States
   &:hover,
   &.is-hovered
-    border-color: $button-hover-border
-    color: $button-hover
+    border-color: $button-hover-border-color
+    color: $button-hover-color
   &:focus,
   &.is-focused
-    border-color: $button-focus-border
-    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
-    color: $button-focus
+    border-color: $button-focus-border-color
+    box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
+    color: $button-focus-color
   &:active,
   &.is-active
-    border-color: $button-active-border
+    border-color: $button-active-border-color
     box-shadow: $button-shadow-inset
-    color: $button-active
+    color: $button-active-color
   // Colors
   &.is-link
     background-color: transparent
     border-color: transparent
-    color: $text
+    color: $button-link-color
     text-decoration: underline
     &:hover,
     &.is-hovered,
@@ -83,8 +92,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &.is-focused,
     &:active,
     &.is-active
-      background-color: $background
-      color: $text-strong
+      background-color: $button-link-hover-background-color
+      color: $button-link-hover-color
     &[disabled]
       background-color: transparent
       border-color: transparent
@@ -168,10 +177,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     +button-large
   // Modifiers
   &[disabled]
-    background-color: $button-background
-    border-color: $button-border
-    box-shadow: none
-    opacity: 0.5
+    background-color: $button-disabled-background-color
+    border-color: $button-disabled-border-color
+    box-shadow: $button-disabled-shadow
+    opacity: $button-disabled-opacity
   &.is-fullwidth
     display: flex
     width: 100%
@@ -183,9 +192,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       +center(1em)
       position: absolute !important
   &.is-static
-    background-color: $button-static-background
-    border-color: $button-static-border
-    color: $button-static
+    background-color: $button-static-background-color
+    border-color: $button-static-border-color
+    color: $button-static-color
     box-shadow: none
     pointer-events: none
 

sass/elements/content.sass

@@ -1,3 +1,23 @@
+$content-heading-color: $text-strong !default
+$content-heading-weight: $weight-normal !default
+$content-heading-line-height: 1.125 !default
+
+$content-blockquote-background-color: $background !default
+$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-padding: 1.25em 1.5em !default
+
+$content-pre-padding: 1.25em 1.5em !default
+
+$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border-width: 0 0 1px !default
+$content-table-cell-padding: 0.5em 0.75em !default
+$content-table-cell-heading-color: $text-strong !default
+$content-table-row-hover-background-color: $background !default
+$content-table-head-cell-border-width: 0 0 2px !default
+$content-table-head-cell-color: $text-strong !default
+$content-table-foot-cell-border-width: 2px 0 0 !default
+$content-table-foot-cell-color: $text-strong !default
+
 .content
   +block
   // Inline
@@ -19,9 +39,9 @@
   h4,
   h5,
   h6
-    color: $text-strong
-    font-weight: $weight-normal
-    line-height: 1.125
+    color: $content-heading-color
+    font-weight: $content-heading-weight
+    line-height: $content-heading-line-height
   h1
     font-size: 2em
     margin-bottom: 0.5em
@@ -47,9 +67,9 @@
     font-size: 1em
     margin-bottom: 1em
   blockquote
-    background-color: $background
-    border-left: 5px solid $border
-    padding: 1.25em 1.5em
+    background-color: $content-blockquote-background-color
+    border-left: $content-blockquote-border-left
+    padding: $content-blockquote-padding
   ol
     list-style: decimal outside
     margin-left: 2em
@@ -74,36 +94,36 @@
   pre
     +overflow-touch
     overflow-x: auto
-    padding: 1.25em 1.5em
+    padding: $content-pre-padding
     white-space: pre
     word-wrap: normal
   sup,
   sub
-    font-size: 70%
+    font-size: 75%
   table
     width: 100%
     td,
     th
-      border: 1px solid $border
-      border-width: 0 0 1px
-      padding: 0.5em 0.75em
+      border: $content-table-cell-border
+      border-width: $content-table-cell-border-width
+      padding: $content-table-cell-padding
       vertical-align: top
     th
-      color: $text-strong
+      color: $content-table-cell-heading-color
       text-align: left
     tr
       &:hover
-        background-color: $background
+        background-color: $content-table-row-hover-background-color
     thead
       td,
       th
-        border-width: 0 0 2px
-        color: $text-strong
+        border-width: $content-table-head-cell-border-width
+        color: $content-table-head-cell-color
     tfoot
       td,
       th
-        border-width: 2px 0 0
-        color: $text-strong
+        border-width: $content-table-foot-cell-border-width
+        color: $content-table-foot-cell-color
     tbody
       tr
         &:last-child

sass/elements/form.sass

@@ -1,45 +1,50 @@
-$input:                     $grey-darker !default
-$input-background:          $white !default
-$input-border:              $grey-lighter !default
-$input-shadow:              inset 0 1px 2px rgba($black, 0.1) !default
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
 
-$input-hover:               $grey-darker !default
-$input-hover-border:        $grey-light !default
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
 
-$input-focus:               $grey-darker !default
-$input-focus-border:        $link !default
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
 
-$input-disabled:            $text-light !default
-$input-disabled-background: $background !default
-$input-disabled-border:     $background !default
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
 
-$input-arrow:               $link !default
+$input-arrow: $link !default
 
-$input-icon:                $grey-lighter !default
-$input-icon-active:         $grey !default
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
 
-$input-radius:              $radius !default
+$input-radius: $radius !default
+
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
 
 =input
   +control
-  background-color: $input-background
-  border-color: $input-border
-  color: $input
+  background-color: $input-background-color
+  border-color: $input-border-color
+  color: $input-color
   &:hover,
   &.is-hovered
-    border-color: $input-hover-border
+    border-color: $input-hover-border-color
   &:focus,
   &.is-focused,
   &:active,
   &.is-active
-    border-color: $input-focus-border
+    border-color: $input-focus-border-color
   &[disabled]
-    background-color: $input-disabled-background
-    border-color: $input-disabled-border
+    background-color: $input-disabled-background-color
+    border-color: $input-disabled-border-color
     box-shadow: none
-    color: $input-disabled
+    color: $input-disabled-color
     +placeholder
-      color: rgba($input, 0.3)
+      color: rgba($input-disabled-color, 0.3)
 
 .input,
 .textarea
@@ -90,9 +95,9 @@ $input-radius:              $radius !default
   input
     cursor: pointer
   &:hover
-    color: $input-hover
+    color: $input-hover-color
   &[disabled]
-    color: $input-disabled
+    color: $input-disabled-color
     cursor: not-allowed
 
 .radio
@@ -120,16 +125,16 @@ $input-radius:              $radius !default
     max-width: 100%
     outline: none
     &:hover
-      border-color: $input-hover-border
+      border-color: $input-hover-border-color
     &:focus,
     &.is-focused,
     &:active,
     &.is-active
-      border-color: $input-focus-border
+      border-color: $input-focus-border-color
     &::-ms-expand
       display: none
     &[disabled]:hover
-      border-color: $input-disabled-border
+      border-color: $input-disabled-border-color
     &:not([multiple])
       padding-right: 2.5em
     &[multiple]
@@ -140,7 +145,7 @@ $input-radius:              $radius !default
   // States
   &:hover
     &::after
-      border-color: $input-hover
+      border-color: $input-hover-color
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -156,7 +161,7 @@ $input-radius:              $radius !default
   // Modifiers
   &.is-disabled
     &::after
-      border-color: $input-disabled
+      border-color: $input-disabled-color
   &.is-fullwidth
     width: 100%
     select
@@ -177,10 +182,10 @@ $input-radius:              $radius !default
       font-size: $size-large
 
 .label
-  color: $input
+  color: $label-color
   display: block
   font-size: $size-normal
-  font-weight: $weight-bold
+  font-weight: $label-weight
   &:not(:last-child)
     margin-bottom: 0.5em
   // Sizes
@@ -193,7 +198,7 @@ $input-radius:              $radius !default
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $help-size
   margin-top: 0.25rem
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -326,7 +331,7 @@ $input-radius:              $radius !default
   // DEPRECATED
   &.has-icon
     .icon
-      color: $input-icon
+      color: $input-icon-color
       height: 2.25em
       pointer-events: none
       position: absolute
@@ -336,7 +341,7 @@ $input-radius:              $radius !default
     .input
       &:focus
         & + .icon
-          color: $input-icon-active
+          color: $input-icon-active-color
       &.is-small
         & + .icon
           font-size: $size-small
@@ -362,7 +367,7 @@ $input-radius:              $radius !default
     .select
       &:focus
         & ~ .icon
-          color: $input-icon-active
+          color: $input-icon-active-color
       &.is-small ~ .icon
         font-size: $size-small
       &.is-medium ~ .icon
@@ -370,7 +375,7 @@ $input-radius:              $radius !default
       &.is-large ~ .icon
         font-size: $size-large
     .icon
-      color: $input-icon
+      color: $input-icon-color
       height: 2.25em
       pointer-events: none
       position: absolute

sass/elements/icon.sass

@@ -1,24 +1,29 @@
+$icon-dimensions: 1.5rem !default
+$icon-dimensions-small: 1rem !default
+$icon-dimensions-medium: 2rem !default
+$icon-dimensions-large: 3rem !default
+
 .icon
   align-items: center
   display: inline-flex
   justify-content: center
-  height: 1.5rem
-  width: 1.5rem
+  height: $icon-dimensions
+  width: $icon-dimensions
   .fa
     font-size: 21px
   // Sizes
   &.is-small
-    height: 1rem
-    width: 1rem
+    height: $icon-dimensions-small
+    width: $icon-dimensions-small
     .fa
       font-size: 14px
   &.is-medium
-    height: 2rem
-    width: 2rem
+    height: $icon-dimensions-medium
+    width: $icon-dimensions-medium
     .fa
       font-size: 28px
   &.is-large
-    height: 3rem
-    width: 3rem
+    height: $icon-dimensions-large
+    width: $icon-dimensions-large
     .fa
       font-size: 42px

sass/elements/image.sass

@@ -1,8 +1,12 @@
+$notification-background-color: $background !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+
 .notification
   +block
-  background-color: $background
-  border-radius: $radius
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem
+  background-color: $notification-background-color
+  border-radius: $notification-radius
+  padding: $notification-padding
   position: relative
   a:not(.button)
     color: currentColor

sass/elements/other.sass

@@ -1,3 +1,6 @@
+$progress-bar-background-color: $border !default
+$progress-value-background-color: $text !default
+
 .progress
   +block
   -moz-appearance: none
@@ -10,11 +13,11 @@
   padding: 0
   width: 100%
   &::-webkit-progress-bar
-    background-color: $border
+    background-color: $progress-bar-background-color
   &::-webkit-progress-value
-    background-color: $text
+    background-color: $progress-value-background-color
   &::-moz-progress-bar
-    background-color: $text
+    background-color: $progress-value-background-color
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)

sass/elements/table.sass

@@ -1,58 +1,66 @@
-$table:                           $grey-darker !default
-$table-background:                $white !default
-$table-border:                    $grey-lighter !default
+$table-color: $grey-darker !default
+$table-background-color: $white !default
 
-$table-head:                      $grey !default
+$table-cell-border: 1px solid $grey-lighter !default
+$table-cell-border-width: 0 0 1px !default
+$table-cell-padding: 0.5em 0.75em !default
+$table-cell-heading-color: $text-strong !default
 
-$table-row-hover-background:      $white-bis !default
+$table-head-color: $grey !default
+$table-head-cell-border-width: 0 0 2px !default
+$table-head-cell-color: $text-strong !default
+$table-foot-cell-border-width: 2px 0 0 !default
+$table-foot-cell-color: $text-strong !default
 
-$table-row-active-background:     $primary !default
-$table-row-active:                $primary-invert !default
+$table-row-hover-background-color: $white-bis !default
 
-$table-row-even-background:       $white-bis !default
-$table-row-even-hover-background: $white-ter !default
+$table-row-active-background-color: $primary !default
+$table-row-active-color: $primary-invert !default
+
+$table-striped-row-even-background-color: $white-bis !default
+$table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
-  background-color: $table-background
-  color: $table
+  background-color: $table-background-color
+  color: $table-color
   margin-bottom: 1.5rem
   width: 100%
   td,
   th
-    border: 1px solid $table-border
-    border-width: 0 0 1px
-    padding: 0.5em 0.75em
+    border: $table-cell-border
+    border-width: $table-cell-border-width
+    padding: $table-cell-padding
     vertical-align: top
     // Modifiers
     &.is-narrow
       white-space: nowrap
       width: 1%
   th
-    color: $text-strong
+    color: $table-cell-heading-color
     text-align: left
   tr
     &:hover
-      background-color: $table-row-hover-background
+      background-color: $table-row-hover-background-color
     &.is-selected
-      background-color: $table-row-active-background
-      color: $table-row-active
+      background-color: $table-row-active-background-color
+      color: $table-row-active-color
       a,
       strong
         color: currentColor
       td,
       th
-        border-color: $table-row-active
+        border-color: $table-row-active-color
         color: currentColor
   thead
     td,
     th
-      border-width: 0 0 2px
-      color: $table-head
+      border-width: $table-head-cell-border-width
+      color: $table-head-cell-color
   tfoot
     td,
     th
-      border-width: 2px 0 0
-      color: $table-head
+      border-width: $table-foot-cell-border-width
+      color: $table-foot-cell-color
   tbody
     tr
       &:last-child
@@ -77,6 +85,6 @@ $table-row-even-hover-background: $white-ter !default
     tbody
       tr:not(.is-selected)
         &:nth-child(even)
-          background-color: $table-row-even-background
+          background-color: $table-striped-row-even-background-color
           &:hover
-            background-color: $table-row-even-hover-background
+            background-color: $table-striped-row-even-hover-background-color

sass/elements/tag.sass

@@ -1,8 +1,11 @@
+$tag-background-color: $background !default
+$tag-color: $text !default
+
 .tag
   align-items: center
-  background-color: $background
+  background-color: $tag-background-color
   border-radius: 290486px
-  color: $text
+  color: $tag-color
   display: inline-flex
   font-size: $size-small
   height: 2em

sass/elements/title.sass

@@ -1,12 +1,12 @@
-$title:             $grey-darker !default
-$title-size:        $size-3 !default
-$title-weight:      $weight-light !default
+$title-color: $grey-darker !default
+$title-size: $size-3 !default
+$title-weight: $weight-light !default
 $title-weight-bold: $weight-semibold !default
 
-$subtitle:          $grey-dark !default
-$subtitle-size:     $size-5 !default
-$subtitle-strong:   $grey-darker !default
-$subtitle-weight:   $weight-light !default
+$subtitle-color: $grey-dark !default
+$subtitle-size: $size-5 !default
+$subtitle-strong: $grey-darker !default
+$subtitle-weight: $weight-light !default
 
 .title,
 .subtitle
@@ -21,7 +21,7 @@ $subtitle-weight:   $weight-light !default
     vertical-align: middle
 
 .title
-  color: $title
+  color: $title-color
   font-size: $title-size
   font-weight: $title-weight
   line-height: 1.125
@@ -38,7 +38,7 @@ $subtitle-weight:   $weight-light !default
       font-size: $size
 
 .subtitle
-  color: $subtitle
+  color: $subtitle-color
   font-size: $subtitle-size
   font-weight: $subtitle-weight
   line-height: 1.25

sass/grid/_all.sass

@@ -1,3 +1,5 @@
+$footer-background-color: $background !default
+
 .footer
-  background-color: $background
+  background-color: $footer-background-color
   padding: 3rem 1.5rem 6rem

sass/layout/hero.sass

@@ -1,53 +1,7 @@
-// Components
-
-.hero-video
-  +overlay
-  overflow: hidden
-  video
-    left: 50%
-    min-height: 100%
-    min-width: 100%
-    position: absolute
-    top: 50%
-    transform: translate3d(-50%, -50%, 0)
-  // Modifiers
-  &.is-transparent
-    opacity: 0.3
-  // Responsiveness
-  +mobile
-    display: none
-
-.hero-buttons
-  margin-top: 1.5rem
-  // Responsiveness
-  +mobile
-    .button
-      display: flex
-      &:not(:last-child)
-        margin-bottom: 0.75rem
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      margin-right: 1.5rem
-
-// Containers
-
-.hero-head,
-.hero-foot
-  flex-grow: 0
-  flex-shrink: 0
-
-.hero-body
-  flex-grow: 1
-  flex-shrink: 0
-  padding: 3rem 1.5rem
-
 // Main container
 
 .hero
   align-items: stretch
-  background-color: $white
   display: flex
   flex-direction: column
   justify-content: space-between
@@ -150,3 +104,48 @@
     min-height: 50vh
   &.is-fullheight
     min-height: 100vh
+
+// Components
+
+.hero-video
+  +overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-buttons
+  margin-top: 1.5rem
+  // Responsiveness
+  +mobile
+    .button
+      display: flex
+      &:not(:last-child)
+        margin-bottom: 0.75rem
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 1.5rem
+
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-grow: 0
+  flex-shrink: 0
+
+.hero-body
+  flex-grow: 1
+  flex-shrink: 0
+  padding: 3rem 1.5rem

sass/layout/section.sass

@@ -1,9 +1,13 @@
+$section-padding: 3rem 1.5rem !default
+$section-padding-medium: 9rem 1.5rem !default
+$section-padding-large: 18rem 1.5rem !default
+
 .section
-  padding: 3rem 1.5rem
+  padding: $section-padding
   // Responsiveness
   +desktop
     // Sizes
     &.is-medium
-      padding: 9rem 1.5rem
+      padding: $section-padding-medium
     &.is-large
-      padding: 18rem 1.5rem
+      padding: $section-padding-large