Merge pull request #170 from picturepan2/feature/0.2.10v0.2.10

Feature/0.2.10

35 files changed, 388 insertions, 423 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 88933b6..a159573 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -2,9 +2,9 @@
 .avatar {
   background: @primary-color;
   border-radius: 50%;
-  color: fade(@light-color, 75%);
+  color: fade(@light-color, 85%);
   display: inline-block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   font-weight: 300;
   height: 3.2rem;
   line-height: 1;
@@ -14,7 +14,7 @@
   width: 3.2rem;
 
   &.avatar-xs {
-    font-size: 1.4rem;
+    font-size: .8rem;
     height: 1.6rem;
     width: 1.6rem;
   }
@@ -39,11 +39,11 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: 99;
+    z-index: @zindex-1;
   }
 
   .avatar-icon {
-    background: @light-bg-color;
+    background: @bg-color-light;
     bottom: -.2em;
     height: 50%;
     padding: 5%;
@@ -59,13 +59,6 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    vertical-align: middle;
-    z-index: 1;
-  }
-
-  &.avatar-xs {
-    &[data-initial]::before {
-      transform: translate(-50%, -50%) scale(.5);
-    }
+    z-index: @zindex-0;
   }
 }
diff --git a/src/badges.less b/src/badges.less
index 993bab6..63ac6d7 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -1,24 +1,24 @@
 // Badges
 .badge {
-  display: inline-block;
   position: relative;
+  white-space: nowrap;
 
   &[data-badge],
   &:not([data-badge]) {
     &::after {
       background: @primary-color;
       background-clip: padding-box;
-      border: .1rem solid @light-bg-color;
+      border: @border-width solid @bg-color-light;
       border-radius: 1rem;
       color: @light-color;
       content: attr(data-badge);
       display: inline-block;
-      transform: translate(-.4rem, -1rem);
+      transform: translate(-.2rem, -1rem);
     }
   }
   &[data-badge] {
     &::after {
-      font-size: 1.2rem;
+      font-size: @font-size-sm;
       height: 2rem;
       line-height: 1.4rem;
       min-width: 2rem;
diff --git a/src/bars.less b/src/bars.less
index 2569bce..193f9e4 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -1,6 +1,6 @@
 // Bars
 .bar {
-  background: @border-color;
+  background: @bg-color-dark;
   border-radius: @border-radius;
   display: flex;
   flex-wrap: nowrap;
@@ -16,19 +16,20 @@
     background: @primary-color;
     color: @light-color;
     display: block;
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
     flex-shrink: 0;
     line-height: 1;
     height: 100%;
     padding: .2rem 0;
+    position: relative;
     text-align: center;
     width: 0;
 
-    &:first-of-type {
+    &:first-child {
       border-bottom-left-radius: @border-radius;
       border-top-left-radius: @border-radius;
     }
-    &:last-of-type {
+    &:last-child {
       border-bottom-right-radius: @border-radius;
       border-top-right-radius: @border-radius;
       flex-shrink: 1;
diff --git a/src/base.less b/src/base.less
index 3c80b1c..f30300b 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,7 +16,7 @@ body {
   background: @body-bg;
   color: @body-font-color;
   font-family: @body-font-family;
-  font-size: @body-font-size;
+  font-size: @font-size;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
@@ -29,7 +29,7 @@ a {
   &:hover,
   &:active,
   &.active {
-    color: @dark-link-color;
+    color: @link-color-dark;
     text-decoration: underline;
   }
 }
@@ -37,7 +37,7 @@ a {
 // Focus state
 :focus {
   .control-shadow();
-  outline: 0;
+  outline: none;
 }
 
 // Icons
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index a1d2c1a..acde7b3 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -11,7 +11,7 @@
     }
     &:not(:first-child) {
       &::before {
-        color: @light-gray-color;
+        color: @gray-color-light;
         content: "/";
         padding: 0 .4rem;
       }
diff --git a/src/buttons.less b/src/buttons.less
index 56f52d1..a6a42c7 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,36 +1,36 @@
 // Buttons
 .btn {
-  -webkit-appearance: none;
-  background: @light-bg-color;
-  border: .1rem solid @primary-color;
+  appearance: none;
+  background: @bg-color-light;
+  border: @border-width solid @primary-color;
   border-radius: @border-radius;
   color: @link-color;
   .control-transition();
   cursor: pointer;
   display: inline-block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
-  padding: .5rem 1.2rem;
+  padding: .5rem .8rem;
   text-align: center;
   text-decoration: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: @light-secondary-color;
+    background: @secondary-color-light;
     text-decoration: none;
   }
   &:hover {
     background: @primary-color;
-    border-color: @dark-primary-color;
+    border-color: @primary-color-dark;
     color: @light-color;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: @dark-primary-color;
-    border-color: darken(@dark-primary-color, 5%);
+    background: @primary-color-dark;
+    border-color: darken(@primary-color-dark, 5%);
     color: @light-color;
   }
   &[disabled],
@@ -44,29 +44,24 @@
   // Button Primary
   &.btn-primary {
     background: @primary-color;
-    border-color: @dark-primary-color;
+    border-color: @primary-color-dark;
     color: @light-color;
-    &:focus {
-      background: @dark-primary-color;
-      border-color: darken(@dark-primary-color, 2%);
-      color: @light-color;
-    }
+    &:focus,
     &:hover {
-      background: darken(@dark-primary-color, 2%);
-      border-color: darken(@dark-primary-color, 7%);
+      background: darken(@primary-color-dark, 2%);
+      border-color: darken(@primary-color-dark, 5%);
       color: @light-color;
     }
     &:active,
     &.active {
-      background: darken(@dark-primary-color, 4%);
-      border-color: darken(@dark-primary-color, 9%);
+      background: darken(@primary-color-dark, 4%);
+      border-color: darken(@primary-color-dark, 7%);
       color: @light-color;
     }
     &.loading {
       &::after {
-        border-color: @light-color;
-        border-right-color: transparent;
-        border-top-color: transparent;
+        border-bottom-color: @light-color;
+        border-left-color: @light-color;
       }
     }
   }
@@ -80,21 +75,21 @@
     &:hover,
     &:active,
     &.active {
-      color: @dark-link-color;
+      color: @link-color-dark;
     }
   }
 
   // Button Sizes
   &.btn-sm {
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
     height: 2.4rem;
     padding: .1rem .8rem;
   }
 
   &.btn-lg {
-    font-size: 1.8rem;
+    font-size: @font-size-lg;
     height: 4rem;
-    padding: .9rem 1.5rem;
+    padding: .9rem .8rem;
   }
 
   // Button Block
@@ -123,23 +118,20 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: 2rem;
-    margin-left: .2rem;
-    margin-right: -.4rem;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    margin: .2rem -.2rem .2rem .4rem;
     opacity: .45;
-    padding: 0 .4rem;
+    padding: 0 .2rem;
     text-decoration: none;
-    width: 2rem;
+    width: 1.6rem;
 
     &:hover {
       opacity: .85;
     }
 
     &::before {
-      content: '\00d7';
-      display: inline-block;
-      font-family: sans-serif;
-      font-size: 2rem;
+      content: "\2715";
     }
   }
 }
@@ -164,11 +156,11 @@
       border-top-left-radius: 0;
       margin-left: -.1rem;
     }
-    &:hover,
     &:focus,
+    &:hover,
     &:active,
     &.active {
-      z-index: 9;
+      z-index: @zindex-0;
     }
   }
 
diff --git a/src/calendars.less b/src/calendars.less
index 9494558..32711a4 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -1,18 +1,18 @@
 // Calendars
 .calendar {
-  border: .1rem solid @border-color;
+  border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: block;
+  min-width: 28rem;
   text-align: center;
 
   .calendar-nav {
-    align-content: space-between;
     align-items: center;
     background: @bg-color;
     border-top-left-radius: @border-radius;
     border-top-right-radius: @border-radius;
     display: flex;
-    font-size: 2rem;
+    font-size: @font-size-lg;
     padding: 1rem;
   }
 
@@ -24,70 +24,60 @@
     padding: 1rem 0;
 
     .calendar-date {
-      flex: 0 0 14.28%;
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      width: 14.28%;
     }
   }
 
   .calendar-header {
     background: @bg-color;
-    border-bottom: .1rem solid @border-color;
+    border-bottom: @border-width solid @border-color;
     color: @gray-color;
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
   }
 
   .calendar-body {
-    color: @dark-gray-color;
+    color: @gray-color-dark;
+  }
 
-    .calendar-date {
-      border: 0;
-      padding: .6rem;
-
-      .date-item {
-        color: @dark-gray-color;
-      }
-
-      &.prev-month .date-item,
-      &.next-month .date-item,
-      .date-item:disabled {
-        cursor: default;
-        opacity: .25;
-        pointer-events: none;
-      }
-    }
+  .calendar-date {
+    border: 0;
+    padding: .4rem;
 
     .date-item {
       appearance: none;
       background: transparent;
-      border: .1rem solid transparent;
+      border: @border-width solid transparent;
       border-radius: 50%;
+      color: @gray-color-dark;
       .control-transition();
       cursor: pointer;
-      display: inline-block;
-      height: 3.2rem;
+      height: 2.8rem;
       line-height: 2rem;
-      padding: .5rem;
+      padding: .3rem;
+      position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: 3.2rem;
+      width: 2.8rem;
 
       &.date-today {
-        background: @secondary-color;
+        border-color: @secondary-color-dark;
         color: @primary-color;
       }
 
       &:focus,
       &:hover {
-        background: @light-secondary-color;
-        border-color: @dark-secondary-color;
+        background: @secondary-color-light;
+        border-color: @secondary-color-dark;
         color: @primary-color;
         text-decoration: none;
       }
       &:active,
       &.active {
-        background: @dark-primary-color;
-        border-color: darken(@dark-primary-color, 5%);
+        background: @primary-color-dark;
+        border-color: darken(@primary-color-dark, 5%);
         color: @light-color;
       }
 
@@ -95,44 +85,50 @@
       &.badge {
         &::after {
           position: absolute;
-          top: .4rem;
-          right: .4rem;
+          top: .3rem;
+          right: .3rem;
           transform: translate(50%, -50%);
         }
       }
     }
+
+    &.disabled .date-item,
+    &.disabled .calendar-event,
+    .date-item:disabled,
+    .calendar-event:disabled {
+      cursor: default;
+      opacity: .25;
+      pointer-events: none;
+    }
   }
 
   .calendar-range {
     position: relative;
 
-    .date-item {
+    &::before {
+      background: @secondary-color;
+      content: "";
+      height: 2.8rem;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
       &::before {
-        background: @secondary-color;
-        content: "";
-        height: 3.2rem;
-        position: absolute;
-        top: 50%;
         left: 50%;
-        transform: translateY(-50%);
-        width: 50%;
-        z-index: -9;
       }
     }
-
-    & + .calendar-range {
-      .date-item {
-        &::before {
-          left: 0;
-          width: 100%;
-        }
-        &.active {
-          &::before {
-            width: 50%;
-          }
-        }
+    &.range-end {
+      &::before {
+        right: 50%;
       }
     }
+
+    .date-item {
+      color: @primary-color;
+    }
   }
 
   &.calendar-lg {
@@ -140,12 +136,11 @@
       padding: 0;
 
       .calendar-date {
-        border-bottom: .1rem solid @border-color;
-        border-right: .1rem solid @border-color;
+        border-bottom: @border-width solid @border-color;
+        border-right: @border-width solid @border-color;
         display: flex;
         flex-direction: column;
         height: 11rem;
-        overflow: hidden;
         padding: 0;
 
         &:nth-child(7n) {
@@ -155,48 +150,28 @@
           border-bottom: 0;
         }
       }
+    }
 
-      .date-item {
-        align-self: flex-end;
-        flex: 0 0 2.4rem;
-        height: 2.4rem;
-        margin-right: .5rem;
-        margin-top: .5rem;
-        padding: .1rem;
-        width: 2.4rem;
-
-        &.badge {
-          &::after {
-            top: .2rem;
-            right: .2rem;
-          }
-        }
-      }
+    .date-item {
+      align-self: flex-end;
+      height: 2.8rem;
+      margin-right: .5rem;
+      margin-top: .5rem;
+    }
 
-      .calendar-range {
-        .date-item {
-          &::before {
-            height: 2.4rem;
-            left: auto;
-            right: 0;
-            top: 1.7rem;
-            width: 2.2rem;
-          }
+    .calendar-range {
+      &::before {
+        top: 1.9rem;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 1.9rem;
         }
-
-        & + .calendar-range {
-          .date-item {
-            &::before {
-              left: 0;
-              width: 100%;
-            }
-            &.active {
-              &::before {
-                right: 1.7rem;
-                width: auto;
-              }
-            }
-          }
+      }
+      &.range-end {
+        &::before {
+          right: 1.9rem;
         }
       }
     }
@@ -212,7 +187,7 @@
       background: @secondary-color;
       border-radius: @border-radius;
       color: @primary-color;
-      font-size: 1.2rem;
+      font-size: @font-size-sm;
       display: block;
       margin: .2rem auto;
       overflow: hidden;
diff --git a/src/cards.less b/src/cards.less
index 2a655ab..f237eb8 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -1,24 +1,23 @@
 // Cards
 .card {
-  background: @light-bg-color;
-  border: .1rem solid @border-color;
+  background: @bg-color-light;
+  border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: block;
-  margin: 0;
-  padding: 0;
-  text-align: left;
 
   .card-header,
   .card-body,
   .card-footer {
-    padding: 1.5rem 1.5rem 0 1.5rem;
+    padding: @layout-padding-lg;
+    padding-bottom: 0;
 
     &:last-child {
-      padding-bottom: 1.5rem;
+      padding-bottom: @layout-padding-lg;
     }
   }
+
   .card-image {
-    padding-top: 1.5rem;
+    padding-top: @layout-padding-lg;
 
     &:first-child {
       padding-top: 0;
@@ -36,12 +35,13 @@
       }
     }
   }
+
   .card-title {
     font-size: 2rem;
-    line-height: 1.4;
   }
-  .card-meta {
+
+  .card-subtitle {
     color: @gray-color;
-    font-size: 1.3rem;
+    font-size: @font-size-sm;
   }
 }
diff --git a/src/carousels.less b/src/carousels.less
index 99b0a9c..52205ab 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -13,7 +13,7 @@
     position: relative;
 
     .carousel-item {
-      animation: carousel-slideout 1s 1;
+      animation: carousel-slideout 1s ease-in-out 1;
       height: 100%;
       left: 0;
       margin: 0;
@@ -32,15 +32,15 @@
 
     .item-prev,
     .item-next {
-      background: fade(@light-gray-color, 25%);
-      border-color: fade(@light-gray-color, 50%);
-      color: @light-gray-color;
+      background: fade(@gray-color-light, 25%);
+      border-color: fade(@gray-color-light, 50%);
+      color: @gray-color-light;
       opacity: 0;
       position: absolute;
       top: 50%;
       transition: all .4s ease;
       transform: translateY(-50%);
-      z-index: 99;
+      z-index: @zindex-2;
     }
     .item-prev {
       left: 2rem;
@@ -55,15 +55,15 @@
     &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-      animation: carousel-slidein .75s 1;
+      animation: carousel-slidein .75s ease-in 1;
       opacity: 1;
-      z-index: 99;
+      z-index: @zindex-1;
     }
     &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
     &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: @light-gray-color;
+      color: @gray-color-light;
     }
   }
 
@@ -75,10 +75,10 @@
     position: absolute;
     transform: translateX(-50%);
     width: 20rem;
-    z-index: 999;
+    z-index: @zindex-2;
 
     .nav-item {
-      color: fade(@light-gray-color, 50%);
+      color: fade(@gray-color-light, 50%);
       display: block;
       flex: 1 0 auto;
       height: 4rem;
@@ -127,10 +127,10 @@
 @keyframes carousel-slideout {
   0% {
     opacity: 1;
-    transform: translateX(0) scale(1);
+    transform: translateX(0);
   }
   100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(.95);
+    opacity: 1;
+    transform: translateX(-50%);
   }
 }
diff --git a/src/chips.less b/src/chips.less
index fca7437..3d69db1 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,9 +1,9 @@
 // Chips
 .chip {
   align-items: center;
-  background: @border-color;
+  background: @bg-color-dark;
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
diff --git a/src/codes.less b/src/codes.less
index e2b8a48..80e881b 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -7,14 +7,14 @@ code {
 
 .code {
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @body-font-color;
   line-height: 2rem;
   position: relative;
 
   &::before {
     content: attr(data-lang);
-    color: @light-gray-color;
-    font-size: 1.2rem;
+    color: @gray-color;
+    font-size: @font-size-sm;
     position: absolute;
     right: 1rem;
     top: .2rem;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 229bda2..1a44122 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
   position: relative;
 
   .menu {
-    animation: slide-down .2s 1;
+    animation: slide-down .2s ease 1;
     display: none;
     left: 0;
     position: absolute;
diff --git a/src/empty.less b/src/empty.less
index d3c0deb..9471227 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -2,16 +2,16 @@
 .empty {
   background: @bg-color;
   border-radius: @border-radius;
-  color: @dark-gray-color;
+  color: @gray-color-dark;
   text-align: center;
-  padding: 4 * @layout-gutter;
+  padding: 4 * @layout-padding;
 
   .empty-title,
-  .empty-meta {
+  .empty-subtitle {
     margin: 1rem auto;
   }
 
-  .empty-meta {
+  .empty-subtitle {
     color: @gray-color;
   }
 
diff --git a/src/forms.less b/src/forms.less
index fca22d8..d6a2e5c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -1,19 +1,35 @@
 // Forms
-.form-group:not(:last-child) {
-  margin-bottom: 1rem;
+.form-group {
+  &:not(:last-child) {
+    margin-bottom: @layout-padding;
+  }
+}
+
+// Form element: Label
+.form-label {
+  display: block;
+  padding: .6rem 0;
+
+  &.label-sm {
+    padding: .2rem 0;
+  }
+
+  &.label-lg {
+    padding: 1rem 0;
+  }
 }
 
-// Form element: Input boxes
+// Form element: Input
 .form-input {
   appearance: none;
-  background: @light-bg-color;
+  background: @bg-color-light;
   background-image: none;
-  border: .1rem solid @light-gray-color;
+  border: @border-width solid @border-color-dark;
   border-radius: @border-radius;
   color: @body-font-color;
   .control-transition();
   display: block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
   max-width: 100%;
@@ -27,13 +43,13 @@
 
   // Input sizes
   &.input-sm {
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
     height: 2.4rem;
-    padding: .1rem .6rem;
+    padding: .1rem .8rem;
   }
 
   &.input-lg {
-    font-size: 1.6rem;
+    font-size: @font-size-lg;
     height: 4rem;
     padding: .9rem .8rem;
   }
@@ -47,11 +63,10 @@
   // Textarea
   textarea& {
     height: auto;
-    line-height: 2rem;
   }
 
   // Input types
-  &[type=file] {
+  &[type="file"] {
     height: auto;
   }
 }
@@ -72,22 +87,15 @@
   }
 }
 
-// Form element: Label
-.form-label {
-  display: block;
-  line-height: 1.6rem;
-  margin-bottom: .5rem;
-}
-
 // Form element: Select
 .form-select {
   appearance: none;
-  border: .1rem solid @light-gray-color;
+  border: @border-width solid @border-color-dark;
   border-radius: @border-radius;
-  font-size: 1.4rem;
+  color: inherit;
+  font-size: @font-size;
   line-height: 2rem;
   min-width: @control-min-width;
-  outline: 0;
   padding: .5rem .8rem;
   vertical-align: middle;
 
@@ -97,7 +105,7 @@
     }
   }
   &:not([multiple]) {
-    background: @light-bg-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
+    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
     padding-right: 2.4rem;
   }
@@ -110,13 +118,13 @@
 
   // Select sizes
   &.select-sm {
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
     height: 2.4rem;
     padding: .1rem 2rem .1rem .6rem;
   }
 
   &.select-lg {
-    font-size: 1.6rem;
+    font-size: @font-size-lg;
     height: 4rem;
     padding: .9rem 2.4rem .9rem .8rem;
   }
@@ -146,6 +154,10 @@
 .form-checkbox,
 .form-radio,
 .form-switch {
+  display: inline-block;
+  line-height: 2rem;
+  position: relative;
+
   input {
     clip: rect(0, 0, 0, 0);
     height: .1rem;
@@ -157,39 +169,35 @@
       border-color: @primary-color;
       .control-shadow();
     }
+    &:checked + .form-icon {
+      background: @primary-color;
+      border-color: @primary-color;
+    }
   }
-}
-.form-checkbox,
-.form-radio {
-  display: inline-block;
-  line-height: 1.8rem;
-  padding: .3rem 2rem;
-  position: relative;
 
   .form-icon {
-    border: .1rem solid @light-gray-color;
+    border: @border-width solid @border-color-dark;
     .control-transition();
     cursor: pointer;
     display: inline-block;
-    font-size: 1.4rem;
+    position: absolute;
+  }
+}
+
+.form-checkbox,
+.form-radio {
+  padding: .2rem 2rem;
+
+  .form-icon {
     height: 1.4rem;
     left: 0;
-    line-height: 2.4rem;
-    outline: none;
-    padding: 0;
-    position: absolute;
     top: .5rem;
-    vertical-align: top;
     width: 1.4rem;
   }
 
   input {
-    &:checked + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
-    }
     &:active + .form-icon {
-      background: @border-color;
+      background: @bg-color-dark;
     }
   }
 }
@@ -200,7 +208,7 @@
 
   input {
     &:checked + .form-icon {
-      &::after {
+      &::before {
         background-clip: padding-box;
         border: .2rem solid @light-color;
         border-left-width: 0;
@@ -219,16 +227,16 @@
     &:indeterminate + .form-icon {
       background: @primary-color;
       border-color: @primary-color;
-      &::after {
-        background: @light-bg-color;
+      &::before {
+        background: @bg-color-light;
         content: "";
         height: .2rem;
         left: 50%;
-        margin-left: -.4rem;
+        margin-left: -.5rem;
         margin-top: -.1rem;
         position: absolute;
         top: 50%;
-        width: .8rem;
+        width: 1rem;
       }
     }
   }
@@ -238,47 +246,38 @@
     border-radius: .7rem;
   }
 
-  input:checked + .form-icon {
-    &::after {
-      background: @light-bg-color;
-      border-radius: @border-radius;
-      content: "";
-      height: .4rem;
-      left: 50%;
-      margin-left: -.2rem;
-      margin-top: -.2rem;
-      position: absolute;
-      top: 50%;
-      width: .4rem;
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: @bg-color-light;
+        border-radius: @border-radius;
+        content: "";
+        height: .4rem;
+        left: 50%;
+        margin-left: -.2rem;
+        margin-top: -.2rem;
+        position: absolute;
+        top: 50%;
+        width: .4rem;
+      }
     }
   }
 }
 
 // Form element: Switch
 .form-switch {
-  display: inline-block;
-  line-height: 2rem;
   padding: .2rem 2rem .2rem 3.6rem;
-  position: relative;
 
   .form-icon {
-    background: @light-gray-color;
+    background: @gray-color-light;
     background-clip: padding-box;
-    border: .1rem solid @light-gray-color;
     border-radius: .9rem;
-    cursor: pointer;
-    display: inline-block;
     height: 1.8rem;
     left: 0;
-    line-height: 2.6rem;
-    outline: none;
-    padding: 0;
-    position: absolute;
     top: .3rem;
-    vertical-align: top;
     width: 3rem;
-    &::after {
-      background: @light-bg-color;
+    &::before {
+      background: @bg-color-light;
       border-radius: .8rem;
       content: "";
       display: block;
@@ -286,22 +285,20 @@
       left: 0;
       position: absolute;
       top: 0;
-      transition: left .2s ease;
+      .control-transition();
       width: 1.6rem;
     }
   }
 
   input {
     &:checked + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
-      &::after {
+      &::before {
         left: 1.2rem;
       }
     }
     &:active + .form-icon {
-      &::after {
-        background: @border-color;
+      &::before {
+        background: @bg-color;
       }
     }
   }
@@ -313,18 +310,17 @@
 
   .input-group-addon {
     background: @bg-color;
-    border: .1rem solid @light-gray-color;
+    border: @border-width solid @border-color-dark;
     border-radius: @border-radius;
     line-height: 2rem;
     padding: .5rem .8rem;
 
     &.addon-sm {
-      font-size: 1.2rem;
-      padding: .1rem .6rem;
+      font-size: @font-size-sm;
+      padding: .1rem .8rem;
     }
     &.addon-lg {
-      font-size: 1.6rem;
-      line-height: 2rem;
+      font-size: @font-size-lg;
       padding: .9rem .8rem;
     }
   }
@@ -350,7 +346,7 @@
       margin-left: -.1rem;
     }
     &:focus {
-      z-index: 99;
+      z-index: @zindex-0;
     }
   }
 
@@ -364,7 +360,7 @@
 .form-select {
   &:disabled,
   &.disabled {
-    background-color: @dark-bg-color;
+    background-color: @bg-color-dark;
     cursor: not-allowed;
     opacity: .5;
   }
@@ -374,8 +370,7 @@ input {
   &:disabled,
   &.disabled {
     & + .form-icon {
-      background: @dark-bg-color;
-      border-color: @light-gray-color;
+      background: @bg-color-dark;
       cursor: not-allowed;
       opacity: .5;
     }
@@ -386,8 +381,8 @@ input {
   input {
     &:disabled,
     &.disabled {
-      & + .form-icon::after {
-        background: @light-bg-color;
+      & + .form-icon::before {
+        background: @bg-color-light;
       }
     }
   }
@@ -395,17 +390,12 @@ input {
 
 // Form Horizontal
 .form-horizontal {
-  padding: 1rem;
+  padding: @layout-padding;
 
   .form-group {
     display: flex;
   }
 
-  .form-label {
-    padding: .8rem .4rem;
-    margin-bottom: 0;
-  }
-
   .form-checkbox,
   .form-radio,
   .form-switch {
diff --git a/src/labels.less b/src/labels.less
index ae4a1a7..f6dc24d 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,7 +1,7 @@
 // Labels
 .label {
   background: @bg-color;
-  color: @dark-gray-color;
+  color: inherit;
   .label-base();
 
   &.label-primary {
diff --git a/src/layout.less b/src/layout.less
index ac82e8c..a868ca7 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -2,17 +2,17 @@
 .container {
   margin-left: auto;
   margin-right: auto;
-  padding-left: @layout-gutter;
-  padding-right: @layout-gutter;
+  padding-left: @layout-padding;
+  padding-right: @layout-padding;
   width: 100%;
   &:extend(.clearfix all);
 
   &.grid-960 {
-    max-width: 96rem + 2 * @layout-gutter;
+    max-width: 96rem + 2 * @layout-padding;
   }
 
   &.grid-480 {
-    max-width: 48rem + 2 * @layout-gutter;
+    max-width: 48rem + 2 * @layout-padding;
   }
 }
 
@@ -20,8 +20,8 @@
 .columns {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -@layout-gutter;
-  margin-right: -@layout-gutter;
+  margin-left: -@layout-padding;
+  margin-right: -@layout-padding;
 
   &.col-gapless {
     margin-left: 0;
@@ -39,7 +39,7 @@
 }
 .column {
   flex: 1;
-  padding: @layout-gutter;
+  padding: @layout-padding;
 
   &.col-12,
   &.col-11,
diff --git a/src/media.less b/src/media.less
index f9f1c37..02c7be5 100644
--- a/src/media.less
+++ b/src/media.less
@@ -49,10 +49,10 @@
 }
 
 .figure {
-  margin: 0 0 @layout-gutter 0;
+  margin: 0 0 @layout-padding 0;
 
   .figure-caption {
-    color: @dark-gray-color;
-    margin-top: @layout-gutter;
+    color: @gray-color-dark;
+    margin-top: @layout-padding;
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 99e5194..1204c36 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,18 +1,16 @@
 // Menus
 .menu {
-  background: @light-bg-color;
+  background: @bg-color-light;
   border-radius: @border-radius;
   list-style: none;
   margin: 0;
   min-width: @control-min-width;
-  padding: .8rem;
-  .shadow;
-  text-align: left;
+  padding: 1rem;
+  box-shadow: @shadow-1;
   transform: translateY(.5rem);
-  z-index: 999;
+  z-index: @zindex-1;
 
   .menu-item {
-    border-radius: @border-radius;
     margin-top: 0;
     padding: 0 .8rem;
     text-decoration: none;
@@ -22,9 +20,8 @@
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      line-height: 2.4rem;
       margin: 0 -.8rem;
-      padding: .4rem .8rem;
+      padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -32,45 +29,18 @@
       }
       &:active,
       &.active {
-        background: @light-secondary-color;
+        background: @secondary-color-light;
         color: @primary-color;
       }
     }
   }
 
-  .menu-header {
-    color: @light-gray-color;
-    font-size: 1.2rem;
-    line-height: 2rem;
-    margin-top: 0;
-    padding: .2rem 0;
-    position: relative;
-
-    &::after {
-      border-bottom: .1rem solid @border-color;
-      content: "";
-      display: block;
-      height: .1rem;
-      position: absolute;
-      top: 50%;
-      width: 100%;
-    }
-
-    .menu-header-text {
-      background: @light-bg-color;
-      display: inline-block;
-      padding: 0 .8rem;
-      position: relative;
-      z-index: 99;
-    }
-  }
-
   .menu-badge {
     float: right;
-    padding: .4rem 0;
+    padding: .6rem 0;
 
-    .label {
-      margin: .2rem 0;
+    .btn {
+      margin-top: -.2rem;
     }
   }
 }
diff --git a/src/modals.less b/src/modals.less
index ad679cf..30d1133 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -7,7 +7,7 @@
   left: 0;
   opacity: 0;
   overflow: hidden;
-  padding: @layout-gutter;
+  padding: @layout-padding;
   position: fixed;
   right: 0;
   top: 0;
@@ -16,11 +16,12 @@
   &.active {
     display: flex;
     opacity: 1;
-    z-index: 1988;
+    z-index: @zindex-4;
 
     .modal-overlay {
       background: fade(@dark-color, 50%);
       bottom: 0;
+      cursor: default;
       display: block;
       left: 0;
       position: absolute;
@@ -29,8 +30,9 @@
     }
 
     .modal-container {
-      animation: slide-down .2s;
+      animation: slide-down .2s ease 1;
       max-width: 64rem;
+      z-index: @zindex-0;
     }
   }
 
@@ -42,21 +44,19 @@
 }
 
 .modal-container {
-  background: @light-bg-color;
+  background: @bg-color-light;
   border-radius: @border-radius;
   display: block;
   margin: 0 auto;
   padding: 0;
-  .shadow;
+  box-shadow: @shadow-4;
   text-align: left;
 
-  z-index: 1988;
-
   .modal-header {
-    padding: 1.5rem;
+    padding: @layout-padding-lg;
 
     .modal-title {
-      font-size: 1.6rem;
+      font-size: @font-size-lg;
       margin: 0;
     }
   }
@@ -64,12 +64,12 @@
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: 1.5rem;
+    padding: @layout-padding-lg;
     position: relative;
   }
 
   .modal-footer {
-    padding: 1.5rem;
+    padding: @layout-padding-lg;
     text-align: right;
   }
 }
diff --git a/src/navbar.less b/src/navbar.less
index bc12a80..ea565ef 100755
--- a/src/navbar.less
+++ b/src/navbar.less
@@ -3,13 +3,14 @@
   align-items: stretch;
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 
   .navbar-section {
     align-items: center;
     display: flex;
     flex: 1 0 0;
 
-    &:last-of-type {
+    &:last-child {
       justify-content: flex-end;
     }
   }
@@ -21,7 +22,7 @@
   }
 
   .navbar-brand {
-    font-size: 1.6rem;
+    font-size: @font-size-lg;
     font-weight: 500;
     text-decoration: none;
   }
diff --git a/src/navs.less b/src/navs.less
index 160d028..0a37670 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -5,7 +5,7 @@
 
   .nav-item {
     a {
-      color: @dark-gray-color;
+      color: @gray-color-dark;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
@@ -15,7 +15,6 @@
     }
     &.active {
       & > a {
-        color: @dark-gray-color;
         font-weight: bold;
         &:focus,
         &:hover {
diff --git a/src/pagination.less b/src/pagination.less
index 055c528..3d74037 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -12,7 +12,7 @@
 
     a {
       border-radius: @border-radius;
-      color: @dark-gray-color;
+      color: @gray-color-dark;
       display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
@@ -48,7 +48,7 @@
       margin: 0;
     }
 
-    .page-item-meta {
+    .page-item-subtitle {
       margin: 0;
       opacity: .5;
     }
diff --git a/src/panels.less b/src/panels.less
index e368d76..f696170 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -1,6 +1,6 @@
 // Panels
 .panel {
-  border: .1rem solid @border-color;
+  border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@
   .panel-header,
   .panel-footer {
     flex: 0 0 auto;
-    padding: 1.5rem;
+    padding: @layout-padding-lg;
   }
 
   .panel-nav {
@@ -18,14 +18,14 @@
   .panel-body {
     flex: 1 1 auto;
     overflow-y: auto;
-  }
-
-  .panel-body {
-    padding: 0 1.5rem;
+    padding: 0 @layout-padding-lg;
   }
 
   .panel-title {
     font-size: 2rem;
-    line-height: 1.4;
+  }
+
+  .panel-subtitle {
+    color: @gray-color;
   }
 }
diff --git a/src/parallax.less b/src/parallax.less
index c4f5580..a7096fc 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -87,5 +87,5 @@
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: 99;
+  z-index: @zindex-0;
 }
diff --git a/src/progress.less b/src/progress.less
index ff0138b..9fca956 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,7 +2,7 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @border-color;
+  background: @bg-color-dark;
   border: 0;
   border-radius: @border-radius;
   color: @primary-color;
@@ -27,7 +27,7 @@
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @border-color linear-gradient(to right, @primary-color 30%, @border-color 30%) top left / 150% 150% no-repeat;
+    background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/sliders.less
index 19db56b..a2d9a2f 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -50,34 +50,34 @@
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
     &::-moz-range-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
     &::-ms-thumb {
-      background: @light-gray-color;
+      background: @gray-color-light;
       transform: scale(1);
     }
   }
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @border-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @border-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-track {
-    background: @border-color;
+    background: @bg-color-dark;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
diff --git a/src/steps.less b/src/steps.less
index f9d6fc1..800fdc0 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -41,7 +41,7 @@
         top: .4rem;
         transform: translateX(-50%);
         width: 1.2rem;
-        z-index: 99;
+        z-index: @zindex-0;
       }
     }
 
@@ -61,7 +61,7 @@
         a {
 
           &::before {
-            background: @light-gray-color;
+            background: @gray-color-light;
           }
         }
       }
diff --git a/src/tables.less b/src/tables.less
index dfdd03c..8a8818c 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -12,33 +12,35 @@
       }
     }
   }
+
   &.table-hover {
     tbody {
       tr {
         &:hover {
-          background: @dark-bg-color;
+          background: @bg-color-dark;
         }
       }
     }
   }
+
   &,
   &.table-striped {
     tbody {
       tr {
         &.active {
-          background: @dark-bg-color;
+          background: @bg-color-dark;
         }
       }
     }
   }
 
   td {
-    border-bottom: .1rem solid @border-color;
+    border-bottom: @border-width solid @border-color;
     padding: 1.5rem 1rem;
   }
-  
+
   th {
-    border-bottom: .2rem solid @dark-color;
+    border-bottom: .2rem solid @gray-color-dark;
     padding: 1.5rem 1rem;
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index 6fc376b..b342fb0 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,7 +1,7 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: .1rem solid @border-color;
+  border-bottom: @border-width solid @border-color;
   display: flex;
   flex-wrap: wrap;
 
@@ -17,9 +17,8 @@
       border-bottom: .2rem solid transparent;
       color: inherit;
       display: block;
-      margin-bottom: -.1rem;
       margin-top: 0;
-      padding: .6rem 1.2rem;
+      padding: .5rem 1.2rem;
       text-decoration: none;
       &:focus,
       &:hover {
diff --git a/src/tiles.less b/src/tiles.less
index c5db749..2b8db28 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -3,8 +3,6 @@
   align-content: space-between;
   align-items: flex-start;
   display: flex;
-  margin: .5rem 0;
-  padding: .5rem 0;
 
   .tile-icon,
   .tile-action {
@@ -22,7 +20,7 @@
   .tile-title {
     font-weight: 500;
   }
-  .tile-meta {
+  .tile-subtitle {
     color: @gray-color;
     line-height: 2rem;
   }
@@ -35,7 +33,7 @@
     }
 
     .tile-title,
-    .tile-meta {
+    .tile-subtitle {
       .text-ellipsis;
     }
   }
diff --git a/src/toasts.less b/src/toasts.less
index 1936b0e..68c9ffc 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,10 +1,10 @@
 // Toasts
 .toast {
-  border: .1rem solid @dark-color;
+  border: @border-width solid @dark-color;
   border-radius: @border-radius;
   color: @light-color;
   display: block;
-  padding: 1.4rem;
+  padding: @layout-padding;
   .toast-variant(@dark-color);
   width: 100%;
 
@@ -23,10 +23,10 @@
   a {
     color: @light-color;
     text-decoration: underline;
-
-    &:hover,
     &:focus,
-    &:active {
+    &:hover,
+    &:active,
+    &.active {
       opacity: .75;
     }
   }
diff --git a/src/tooltips.less b/src/tooltips.less
index 2881e2a..29801a8 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -8,20 +8,19 @@
     color: @light-color;
     content: attr(data-tooltip);
     display: block;
-    font-size: 1.2rem;
+    font-size: @font-size-sm;
     left: 50%;
-    line-height: 1.6rem;
     max-width: 32rem;
     opacity: 0;
     overflow: hidden;
-    padding: .6rem 1rem;
+    padding: .4rem .8rem;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
     transform: translate(-50%, 0);
     transition: transform .2s ease;
     white-space: nowrap;
-    z-index: 999;
+    z-index: @zindex-2;
   }
   &:focus,
   &:hover {
diff --git a/src/typography.less b/src/typography.less
index 73165d6..70043a7 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -89,6 +89,7 @@ dl {
 }
 mark {
   background: @highlight-color;
+  color: @body-font-color;
   .label-base();
 }
 kbd {
diff --git a/src/utilities.less b/src/utilities.less
index fe98dd6..428a09c 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,8 +1,20 @@
 // Divider
 .divider {
-  border-bottom: .1rem solid @border-color;
+  border-top: @border-width solid @border-color;
   display: block;
-  margin: .8rem 0;
+  height: .1rem;
+  margin: 1rem 0;
+  position: relative;
+
+  &[data-content]::before {
+    background: @light-color;
+    color: @gray-color-light;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: @font-size-sm;
+    padding: 0 .8rem;
+    transform: translateY(-1.1rem);
+  }
 }
 
 // Loading
@@ -26,6 +38,7 @@
     position: absolute;
     top: 50%;
     width: 1.6rem;
+    z-index: @zindex-0;
   }
 }
 
@@ -206,11 +219,20 @@
 }
 
 // Shadow
-.shadow {
-  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
+.shadow-0 {
+  box-shadow: @shadow-0;
+}
+.shadow-1 {
+  box-shadow: @shadow-1;
+}
+.shadow-2 {
+  box-shadow: @shadow-2;
+}
+.shadow-3 {
+  box-shadow: @shadow-3;
 }
-.light-shadow {
-  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15);
+.shadow-4 {
+  box-shadow: @shadow-4;
 }
 
 // Shapes
diff --git a/src/variables.less b/src/variables.less
index 78ec0b6..1227c81 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -3,9 +3,11 @@
 // Global
 @html-font-size: 10px;
 @html-line-height: 1.428571429;
-@body-bg: #fff;
-@body-font-color: #333;
-@body-font-size: 1.4rem;
+@body-bg: @bg-color-light;
+@body-font-color: lighten(@dark-color, 5%);
+@font-size: 1.4rem;
+@font-size-sm: 1.2rem;
+@font-size-lg: 1.6rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -15,35 +17,43 @@
 @body-font-family: @base-font-family, @fallback-font-family;
 
 // Sizes
-@layout-gutter: 1rem;
+@layout-padding: 1rem;
+@layout-padding-lg: 1.5rem;
 @control-min-width: 18rem;
 @border-radius: .2rem;
+@border-width: .1rem;
 
+// Colors
 // Core colors
 @primary-color: #5764c6;
-@dark-primary-color: darken(@primary-color, 5%);
-@light-primary-color: lighten(@primary-color, 2%);
+@primary-color-dark: darken(@primary-color, 3%);
+@primary-color-light: lighten(@primary-color, 3%);
 @secondary-color: lighten(@primary-color, 40%);
-@dark-secondary-color: darken(@secondary-color, 5%);
-@light-secondary-color: lighten(@secondary-color, 2%);
-@dark-color: #333;
-@dark-gray-color: #666;
-@gray-color: #999;
-@light-gray-color: #ccc;
-@light-color: #fff;
+@secondary-color-dark: darken(@secondary-color, 3%);
+@secondary-color-light: lighten(@secondary-color, 3%);
+
 @link-color: @primary-color;
-@dark-link-color: darken(@link-color, 10%);
-@border-color: #efefef;
-@bg-color: #f8f8f8;
-@dark-bg-color: darken(@bg-color, 3%);
-@light-bg-color: #fff;
+@link-color-dark: darken(@link-color, 10%);
+
+// Gray colors
+@dark-color: #454d5d;
+@light-color: #fff;
+@gray-color: lighten(@dark-color, 40%);
+@gray-color-dark: darken(@gray-color, 20%);
+@gray-color-light: lighten(@gray-color, 20%);
+
+@border-color: lighten(@gray-color-light, 3%);
+@border-color-dark: darken(@border-color, 15%);
+@bg-color: lighten(@dark-color, 66%);
+@bg-color-dark: darken(@bg-color, 3%);
+@bg-color-light: @light-color;
 
 // Control colors
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
 
-// Meta colors
+// Other colors
 @code-color: #e06870;
 @highlight-color: #ffe9b3;
 
@@ -54,3 +64,16 @@
 @size-lg: 960px;
 @size-xl: 1280px;
 @size-2x: 1440px;
+
+// Z-index and shadows
+@zindex-0: 1;
+@zindex-1: 100;
+@zindex-2: 200;
+@zindex-3: 300;
+@zindex-4: 400;
+
+@shadow-0: 0 0 .2rem rgba(0, 0, 0, .3);
+@shadow-1: 0 .1rem .4rem rgba(0, 0, 0, .3);
+@shadow-2: 0 .2rem .8rem rgba(0, 0, 0, .3);
+@shadow-3: 0 .3rem 1.2rem rgba(0, 0, 0, .3);
+@shadow-4: 0 .4rem 1.6rem rgba(0, 0, 0, .3);