Merge pull request #136 from picturepan2/hotfix/fixes v0.1.32

Hotfix/fixes

22 files changed, 200 insertions, 205 deletions

diff --git a/src/asian.less b/src/asian.less
new file mode 100644
index 0000000..79af4fe
--- /dev/null
+++ b/src/asian.less
@@ -0,0 +1,23 @@
+// Optimized for East Asian CJK
+:lang(zh),
+:lang(ja),
+:lang(ko),
+.cjk {
+  font-family: @cjk-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.cjk {
+  // Credit: https://github.com/ethantw/Han
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: .125em;
+  }
+}
diff --git a/src/autocomplete.less b/src/autocomplete.less
index d1cc42b..a9adc07 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -3,62 +3,25 @@
   position: relative;
 
   .form-autocomplete-input {
+    align-content: flex-start;
     background: #fff;
     border: .1rem solid @control-color;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     color: @body-font-color;
-    display: block;
-    font-size: 1.4rem;
-    line-height: 1.6rem;
-    max-width: 100%;
-    min-height: 3.2rem;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 3.6rem;
     outline: 0;
-    padding: .3rem .3rem 0 .3rem;
+    padding: .1rem 0 .1rem .2rem;
     width: 100%;
 
-    .chip-sm {
-      margin-bottom: .3rem;
-    }
-
     .form-input {
-      background: #fff;
       border-color: transparent;
+      box-shadow: none;
       display: inline-block;
-      height: 2.4rem;
-      margin-bottom: .3rem;
+      flex: 1 0 auto;
       padding: .3rem;
-      vertical-align: top;
       width: auto;
     }
   }
-
-  .form-autocomplete-list {
-    background: #fff;
-    border: .1rem solid lighten(@control-color, 5%);
-    border-radius: .3rem;
-    display: block;
-    height: auto;
-    left: 0;
-    .light-shadow;
-    margin: .3rem 0 0 0;
-    padding: .5rem;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 1988;
-  }
-  .form-autocomplete-item {
-    border-radius: .3rem;
-    display: block;
-    margin-top: .1rem;
-    padding: .2rem 1rem;
-
-    &:hover,
-    &:focus {
-      background: lighten(@core-secondary-color, 5%);
-    }
-    &.active {
-      background: @core-secondary-color;
-    }
-  }
 }
diff --git a/src/avatars.less b/src/avatars.less
index 6466800..06c065e 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -1,6 +1,7 @@
 // Avatars
 .avatar {
   border-radius: 50%;
+  color: @core-light-color;
   display: inline-block;
   font-size: 1.4rem;
   font-weight: 300;
@@ -51,7 +52,7 @@
   }
 
   &[data-initial]::after {
-    color: @core-light-color;
+    color: currentColor;
     content: attr(data-initial);
     left: 50%;
     position: absolute;
diff --git a/src/base.less b/src/base.less
index 6cba96c..bdac3e0 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,6 +16,7 @@ body {
   font-family: @body-font-family;
   font-size: @body-font-size;
   overflow-x: hidden;
+  text-rendering: optimizeLegibility;
 }
 a {
   color: @core-link-color;
@@ -30,7 +31,7 @@ a {
 &[disabled],
 .disabled {
   cursor: default;
-  opacity: .75;
+  opacity: .5;
   pointer-events: none;
 }
 
diff --git a/src/buttons.less b/src/buttons.less
index 260665a..3f0900a 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -3,8 +3,9 @@
   -webkit-appearance: none;
   background: #fff;
   border: .1rem solid @core-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @core-link-color;
+  .control-transition();
   cursor: pointer;
   display: inline-block;
   font-size: 1.4rem;
@@ -19,6 +20,7 @@
   white-space: nowrap;
   &:focus {
     background: lighten(@core-secondary-color, 1%);
+    .control-shadow();
   }
   &:hover {
     background: @core-color;
@@ -69,19 +71,16 @@
     color: @core-link-color;
     &:focus,
     &:hover {
-      background: lighten(@core-border-color, 2%);
       color: darken(@core-link-color, 15%);
     }
     &:active,
     &.active {
-      background: @core-border-color;
       color: darken(@core-link-color, 25%);
     }
   }
 
   // Button Small
   &.btn-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     line-height: 1.4rem;
@@ -90,7 +89,6 @@
 
   // Button Large
   &.btn-lg {
-    border-radius: .4rem;
     font-size: 1.8rem;
     height: 4.2rem;
     line-height: 2rem;
@@ -107,12 +105,16 @@
   &.btn-clear {
     background: transparent;
     border: 0;
-    color: #666;
+    color: currentColor;
+    font-family: sans-serif;
     height: 2rem;
-    margin-left: .3rem;
+    line-height: 1.8rem;
+    margin-left: .2rem;
+    margin-right: -.4rem;
     opacity: .45;
-    padding: 0;
+    padding: 0 .4rem;
     text-decoration: none;
+    width: 2rem;
 
     &:hover {
       opacity: .85;
@@ -128,13 +130,10 @@
 // Button groups
 .btn-group {
   display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  overflow-x: auto;
+  flex-wrap: wrap;
 
   .btn {
     flex: 1 0 auto;
-
     &:first-of-type:not(:last-of-type) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
@@ -152,7 +151,7 @@
     &:focus,
     &:active,
     &.active {
-      z-index: 99;
+      z-index: 9;
     }
   }
 
diff --git a/src/cards.less b/src/cards.less
index b95b7d4..1123586 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -2,12 +2,11 @@
 .card {
   background: #fff;
   border: .1rem solid @core-border-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0;
   padding: 0;
   text-align: left;
-  z-index: 999;
 
   .card-header,
   .card-body,
@@ -25,15 +24,15 @@
       padding-top: 0;
 
       img {
-        border-top-left-radius: .3rem;
-        border-top-right-radius: .3rem;
+        border-top-left-radius: @border-radius;
+        border-top-right-radius: @border-radius;
       }
     }
 
     &:last-child {
       img {
-        border-bottom-left-radius: .3rem;
-        border-bottom-right-radius: .3rem;
+        border-bottom-left-radius: @border-radius;
+        border-bottom-right-radius: @border-radius;
       }
     }
   }
diff --git a/src/chips.less b/src/chips.less
index f865fe9..6b48df9 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -2,8 +2,7 @@
 .chip {
   align-content: space-around;
   align-items: center;
-  border: .1rem solid transparent;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: flex;
   list-style: none;
   margin: 0;
@@ -14,68 +13,58 @@
   }
   .chip-content {
     flex: 1 1 auto;
-    padding: 0 1rem;
     .text-ellipsis;
+    &:not(:first-child) {
+      padding-left: 1rem;
+    }
+    &:not(:last-child) {
+      padding-right: 1rem;
+    }
   }
   .chip-action {
     flex: 0 0 auto;
   }
   .chip-title {
     font-size: 1.4rem;
+    line-height: 1.6rem;
   }
   .chip-meta {
     color: lighten(@body-font-color, 50%);
     font-size: 1.2rem;
+    line-height: 1.6rem;
   }
 }
 
 // Small chips
 .chip-sm {
   align-items: center;
-  background: @core-secondary-color;
-  border-radius: .3rem;
+  background: @core-border-color;
+  border-radius: @border-radius;
   color: #666;
   display: inline-flex;
-  font-size: 1.2rem;
-  height: 2.4rem;
+  height: 3rem;
+  margin: .1rem .2rem .1rem 0;
   max-width: 100%;
-  padding: .3rem .6rem;
+  padding: .5rem .7rem;
   text-decoration: none;
   vertical-align: middle;
 
-  &:hover,
-  &:focus {
-    background: darken(@core-secondary-color, 2%);
-  }
-
-  .btn-clear {
-    margin-top: -.2rem;
-
-    &::before {
-      color: darken(@core-color, 10%);
-      font-size: 1.6rem;
-    }
-  }
-
   &.selected {
     background: @core-color;
     color: @core-light-color;
-
-    .btn-clear {
-      &::before {
-        color: lighten(@core-color, 40%);
-      }
-    }
   }
 
-  .chip-name {
-    margin-left: .4rem;
-    .text-ellipsis;
+  .avatar {
+    font-size: 1rem;
+    height: 2rem;
+    margin-right: .4rem;
+    width: 2rem;
   }
 
-  .avatar {
-    font-size: .8rem;
-    height: 1.6rem;
-    width: 1.6rem;
+  .btn-clear {
+    &::before {
+      color: currentColor;
+      font-size: 1.6rem;
+    }
   }
 }
diff --git a/src/dropdowns.less b/src/dropdowns.less
index af61541..89d0da2 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -6,10 +6,8 @@
     animation: slide-down .216s;
     display: none;
     left: 0;
-    min-width: @control-min-width;
     position: absolute;
     top: 100%;
-    transform: translateY(.5rem);
   }
 
   &.active .menu,
diff --git a/src/empty.less b/src/empty.less
index 8accae1..1108fa2 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,7 +1,7 @@
 // Empty states (or Blank slates)
 .empty {
   background: @core-empty-bg;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   text-align: center;
   padding: 4 * @layout-gutter;
 
@@ -15,4 +15,4 @@
   .empty-action {
     margin-top: 1.5rem;
   }
-}
\ No newline at end of file
+}
diff --git a/src/forms.less b/src/forms.less
index 131fbc5..7e0db4d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -8,19 +8,21 @@
   background: #fff;
   background-image: none;
   border: .1rem solid @control-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @body-font-color;
+  .control-transition();
   display: block;
   font-size: 1.4rem;
   height: 3.2rem;
-  line-height: 1.6rem;
+  line-height: 1.8rem;
   max-width: 100%;
   outline: 0;
-  padding: .7rem .8rem;
+  padding: .6rem .8rem;
   position: relative;
   width: 100%;
   &:focus {
     border-color: @core-color;
+    .control-shadow();
   }
   &[disabled] {
     background: #eeeff2;
@@ -28,14 +30,12 @@
 
   // Input sizes
   &.input-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     padding: .3rem .6rem;
   }
 
   &.input-lg {
-    border-radius: .4rem;
     font-size: 1.6rem;
     height: 4.2rem;
     line-height: 2rem;
@@ -98,7 +98,7 @@
 .form-select {
   appearance: none;
   border: .1rem solid @control-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   font-size: 1.4rem;
   line-height: 1.6rem;
   min-width: @control-min-width;
@@ -117,6 +117,7 @@
   }
   &:focus {
     border-color: @core-color;
+    .control-shadow();
   }
   &::-ms-expand {
     display: none;
@@ -124,7 +125,6 @@
 
   // Select sizes
   &.select-sm {
-    border-radius: .2rem;
     font-size: 1.2rem;
     height: 2.4rem;
     padding: .4rem 2rem .4rem .6rem;
@@ -159,6 +159,10 @@
     overflow: hidden;
     position: absolute;
     width: .1rem;
+    &:focus + .form-icon {
+      border-color: @core-color;
+      .control-shadow();
+    }
   }
 }
 .form-checkbox,
@@ -171,6 +175,7 @@
 
   .form-icon {
     border: .1rem solid @control-color;
+    .control-transition();
     display: inline-block;
     font-size: 1.4rem;
     height: 1.4rem;
@@ -180,7 +185,6 @@
     padding: 0;
     position: absolute;
     top: .5rem;
-    transition: all .15s ease;
     vertical-align: top;
     width: 1.4rem;
   }
@@ -189,9 +193,6 @@
   }
 
   input {
-    &:focus + .form-icon {
-      border-color: @core-color;
-    }
     &:checked + .form-icon {
       background: @core-color;
       border-color: @core-color;
@@ -203,7 +204,7 @@
 }
 .form-checkbox {
   .form-icon {
-    border-radius: .2rem;
+    border-radius: @border-radius;
   }
 
   input {
@@ -249,7 +250,7 @@
   input:checked + .form-icon {
     &::after {
       background: #fff;
-      border-radius: .2rem;
+      border-radius: @border-radius;
       content: "";
       height: .4rem;
       left: 50%;
@@ -320,7 +321,7 @@
   .input-group-addon {
     background: lighten(@core-border-color, 4%);
     border: .1rem solid @control-color;
-    border-radius: .3rem;
+    border-radius: @border-radius;
     line-height: 1.6rem;
     padding: .7rem .8rem;
 
diff --git a/src/layout.less b/src/layout.less
index 628ebe4..657b59e 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -367,7 +367,7 @@
   }
   .form-checkbox,
   .form-radio {
-    margin: .5rem 0;
+    margin: .4rem 0;
   }
 }
 
diff --git a/src/media.less b/src/media.less
index d4d2f89..1072304 100644
--- a/src/media.less
+++ b/src/media.less
@@ -6,18 +6,26 @@
 }
 
 .video-responsive {
-  height: 0;
+  display: block;
   overflow: hidden;
-  padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
-  padding-top: 3rem;
+  padding: 0;
   position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+  }
 
   iframe,
   object,
   embed {
+    bottom: 0;
     height: 100%;
     left: 0;
     position: absolute;
+    right: 0;
     top: 0;
     width: 100%;
   }
@@ -29,7 +37,15 @@
 }
 
 .video-responsive-4-3 {
-  padding-bottom: 75%; /* 4:3 */
+  &::before {
+    padding-bottom: 75%; /* 4:3 */
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; /* 1:1 */
+  }
 }
 
 .figure {
diff --git a/src/menus.less b/src/menus.less
index 49adc80..434beec 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,30 +1,32 @@
 // Menus
 .menu {
   background: #fff;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0;
+  min-width: @control-min-width;
   padding: .5rem;
   .shadow;
   text-align: left;
+  transform: translateY(.5rem);
   z-index: 999;
 
   .menu-item {
-    border-radius: .3rem;
+    border-radius: @border-radius;
     color: @body-font-color;
     display: block;
     line-height: 2.4rem;
     margin-top: .1rem;
-    padding: .2rem 1rem;
+    padding: .2rem .8rem;
     text-decoration: none;
     user-select: none;
 
     a {
-      border-radius: .3rem;
+      border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.2rem -1rem;
-      padding: .2rem 1rem;
+      margin: -.2rem -.8rem;
+      padding: .2rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -44,7 +46,7 @@
     font-size: 1.2rem;
     line-height: 1.8rem;
     margin-top: 0;
-    padding: .2rem 1rem;
+    padding: .2rem .8rem;
 
     .menu-header-text {
       background: #fff;
diff --git a/src/modals.less b/src/modals.less
index d5e6af0..cc2e73d 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -17,7 +17,7 @@
     z-index: 1988;
 
     .modal-overlay {
-      background: rgba(0, 0, 0, .75);
+      background: fade(@core-dark-color, 50%);
       bottom: 0;
       display: block;
       left: 0;
@@ -33,7 +33,7 @@
 .modal-container {
   animation: slide-up .216s;
   background: #fff;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   display: block;
   margin: 0 auto;
   padding: 0;
diff --git a/src/navigation.less b/src/navigation.less
index 00bf86d..f48937f 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -19,8 +19,7 @@
     &:last-child {
       &,
       a {
-        color: lighten(@body-font-color, 20%);
-        pointer-events: none;
+        color: @body-font-color;
       }
     }
     &:not(:last-child) {
@@ -35,13 +34,11 @@
 
 // Tabs
 .tab {
+  border-bottom: .1rem solid @core-border-color;
   display: flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  overflow-x: auto;
+  flex-wrap: wrap;
 
   .tab-item {
-    border-bottom: .1rem solid @control-color;
     margin-top: 0;
 
     a {
@@ -50,7 +47,7 @@
       display: block;
       margin-bottom: -.1rem;
       margin-top: 0;
-      padding: .8rem 1.4rem;
+      padding: .8rem 1rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -59,17 +56,8 @@
     }
     &.active a,
     a.active {
-      border-bottom-color: darken(@core-color, 10%);
-      color: darken(@core-link-color, 10%);
-    }
-
-    .badge {
-      &[data-badge]::after {
-        position: absolute;
-        right: -1.4rem;
-        top: 1rem;
-        transform: translate(-50%, -1rem);
-      }
+      border-bottom-color: @core-color;
+      color: @core-link-color;
     }
   }
 
@@ -77,32 +65,38 @@
     .tab-item {
       flex: 1 0 auto;
       text-align: center;
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: -1.4rem;
+          top: 1rem;
+          transform: translate(-50%, -1rem);
+        }
+      }
     }
   }
 }
 
 // Pagination
 .pagination {
-  display: inline-block;
-  padding: 1.2rem;
-
   .page-item {
     display: inline-block;
 
     span {
       display: inline-block;
-      padding: .6rem .5rem;
+      padding: .6rem;
     }
 
     a {
-      border-radius: .3rem;
+      border-radius: @border-radius;
+      color: @body-font-color;
       display: inline-block;
-      margin: 0 .1rem;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        background: @core-secondary-color;
+        color: @core-color;
       }
     }
 
diff --git a/src/normalize.less b/src/normalize.less
index 9b77e0e..3dbe1f0 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -1,4 +1,5 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /**
  * 1. Change the default font family in all browsers (opinionated).
@@ -66,13 +67,9 @@ main { /* 1 */
 }
 
 /**
- * Add the correct margin in IE 8.
+ * Add the correct margin in IE 8 (removed).
  */
 
-figure {
-  margin: 1em 40px;
-}
-
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
@@ -119,15 +116,9 @@ a:hover {
 
 /**
  * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
  */
 
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
 /**
  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  */
@@ -167,14 +158,9 @@ dfn {
 }
 
 /**
- * Add the correct background and color in IE 9-.
+ * Add the correct background and color in IE 9-. (Removed)
  */
 
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
 /**
  * Add the correct font size in all browsers.
  */
@@ -254,9 +240,9 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
   margin: 0; /* 2 */
 }
 
@@ -317,13 +303,13 @@ button:-moz-focusring,
 }
 
 /**
- * Change the border, margin, and padding in all browsers (opinionated).
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 
 /**
diff --git a/src/tables.less b/src/tables.less
index b9b9ac9..58a1a9c 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -18,9 +18,13 @@
         &:hover {
           background: lighten(@core-border-color, 2%);
         }
-        &.selected {
-          background: lighten(@core-border-color, 1%);
-        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      &.selected {
+        background: lighten(@core-border-color, 3%);
       }
     }
   }
@@ -30,6 +34,6 @@
     padding: 1.5rem 1rem;
   }
   th {
-    border-color: darken(@core-border-color, 15%);
+    border-color: darken(@core-border-color, 4%);
   }
 }
diff --git a/src/toasts.less b/src/toasts.less
index 8fe2a44..929edaa 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,7 +1,7 @@
 // Toasts
 .toast {
   border: .1rem solid @core-dark-color;
-  border-radius: .3rem;
+  border-radius: @border-radius;
   color: @core-light-color;
   display: block;
   padding: 1.4rem;
@@ -30,8 +30,4 @@
       opacity: .75;
     }
   }
-
-  .btn-clear {
-    color: @core-light-color;
-  }
 }
diff --git a/src/tooltips.less b/src/tooltips.less
index 7eb25c0..80468ac 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -3,7 +3,7 @@
   position: relative;
   &::after {
     background: fade(@core-dark-color, 90%);
-    border-radius: .3rem;
+    border-radius: @border-radius;
     bottom: 100%;
     color: @core-light-color;
     content: attr(data-tooltip);
diff --git a/src/typography.less b/src/typography.less
index 47ef8ab..921d2f6 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -81,19 +81,29 @@ dl {
     margin: .5rem 0 1.5rem 0;
   }
 }
-.lead {
-  font-size: 120%;
-}
-mark,
-.highlight {
+mark {
   background: lighten(@control-color-warning, 32%);
   .label-base();
 }
+kbd {
+  background: @core-dark-color;
+  color: @core-light-color;
+  .label-base();
+}
+abbr[title] {
+  border-bottom: .1rem dotted;
+  cursor: help;
+  text-decoration: none;
+}
+ins,
+u {
+  border-bottom: .1rem solid;
+  text-decoration: none;
+}
 
 // Code
 pre {
   background: lighten(@core-border-color, 4%);
-  border-left: .2rem solid darken(@core-border-color, 5%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
@@ -102,6 +112,7 @@ pre {
 }
 code {
   background: @core-border-color;
+  color: lighten(@body-font-color, 20%);
   .label-base();
   white-space: nowrap;
 
diff --git a/src/utilities.less b/src/utilities.less
index 49d71a4..916ca51 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -171,6 +171,9 @@
 .text-italic {
   font-style: italic;
 }
+.text-large {
+  font-size: 1.2em;
+}
 
 .text-ellipsis {
   overflow: hidden;
@@ -201,7 +204,7 @@
 
 // Shapes
 .rounded {
-  border-radius: .3rem;
+  border-radius: @border-radius;
 }
 .circle {
   border-radius: 50%;
diff --git a/src/variables.less b/src/variables.less
index 2298e32..55b9d21 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,12 +6,16 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
-// https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-@body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif;
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+@fallback-font-family: "Helvetica Neue", sans-serif;
+@cjk-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", @fallback-font-family;
+@body-font-family: @base-font-family, @fallback-font-family;
 
 // Sizes
 @layout-gutter: 1rem;
 @control-min-width: 18rem;
+@border-radius: .2rem;
 
 // Colors
 @core-color: #5764c6;
@@ -43,14 +47,19 @@
     display: table;
   }
 }
+.control-shadow() {
+  box-shadow: 0 0 .4rem fade(@core-color, 25%);
+}
+.control-transition() {
+  transition: all .15s ease;
+}
 .toast-variant(@color) {
   background: fade(@color, 90%);
   border-color: @color;
 }
 .label-base() {
   border-radius: .2rem;
-  display: inline;
-  font-size: 1em;
+  font-size: .95em;
   padding: .1em .3em;
   vertical-align: baseline;
 }