IMPORTANT: Change back to rem unit, and default html font size is 20px.

21 files changed, 120 insertions, 141 deletions

diff --git a/src/badges.less b/src/badges.less
index 8dd5a51..c62df9d 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -8,12 +8,12 @@
     &::after {
       background: @primary-color;
       background-clip: padding-box;
-      border-radius: 10px;
-      box-shadow: 0 0 0 2px @bg-color-light;
+      border-radius: .5rem;
+      box-shadow: 0 0 0 .1rem @bg-color-light;
       color: @light-color;
       content: attr(data-badge);
       display: inline-block;
-      transform: translate(-2px, -10px);
+      transform: translate(-.1rem, -.5rem);
     }
   }
   &[data-badge] {
diff --git a/src/bars.less b/src/bars.less
index 96848d2..4c3824a 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -65,7 +65,7 @@
     width: @unit-3;
 
     &:active {
-      box-shadow: 0 0 0 2px @primary-color;
+      box-shadow: 0 0 0 .1rem @primary-color;
     }
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index 3b10f63..3f1e326 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -158,12 +158,12 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -1px;
+      margin-left: -@border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -1px;
+      margin-left: -@border-width;
     }
     &:focus,
     &:hover,
diff --git a/src/calendars.less b/src/calendars.less
index 44f88ae..e5764ea 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -145,7 +145,7 @@
         border-right: @border-width solid @border-color;
         display: flex;
         flex-direction: column;
-        height: 110px;
+        height: 5.5rem;
         padding: 0;
 
         &:nth-child(7n) {
diff --git a/src/carousels.less b/src/carousels.less
index 510560d..276bc1f 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -47,10 +47,10 @@
       z-index: @zindex-2;
     }
     .item-prev {
-      left: 20px;
+      left: 1rem;
     }
     .item-next {
-      right: 20px;
+      right: 1rem;
     }
   }
 
@@ -78,7 +78,7 @@
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
-    width: 200px;
+    width: 10rem;
     z-index: @zindex-2;
 
     .nav-item {
@@ -87,16 +87,16 @@
       flex: 1 0 auto;
       height: @unit-8;
       margin: @unit-1;
-      max-width: 50px;
+      max-width: 2.5rem;
       position: relative;
 
       &::before {
         background: currentColor;
         content: "";
         display: block;
-        height: 2px;
+        height: @border-width-lg;
         position: absolute;
-        top: 10px;
+        top: .5rem;
         width: 100%;
       }
     }
diff --git a/src/codes.less b/src/codes.less
index e08948b..f820978 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -25,7 +25,7 @@ code {
     display: block;
     line-height: inherit;
     overflow-x: auto;
-    padding: 20px;
+    padding: 1rem;
     width: 100%;
   }
 }
diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index caefd5a..169caf4 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -72,7 +72,7 @@
   .comparison-resizer {
     animation: first-run 1.5s 1 ease-in-out;
     cursor: ew-resize;
-    height: 15px;
+    height: @unit-4;
     left: 0;
     max-width: 100%;
     min-width: @unit-4;
diff --git a/src/forms.less b/src/forms.less
index d8adf6d..b0e9a9e 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -121,7 +121,7 @@ legend {
     }
   }
   &:not([multiple]) {
-    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 (@control-icon-size / 2) center / 8px 10px;
+    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 (@control-icon-size / 2) center / .4rem .5rem;
     height: @control-size;
     padding-right: @control-icon-size + @control-padding-h;
   }
@@ -371,12 +371,12 @@ legend {
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -1px;
+      margin-left: -@border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -1px;
+      margin-left: -@border-width;
     }
     &:focus {
       z-index: @zindex-0;
diff --git a/src/menus.less b/src/menus.less
index ba8cff7..109dc92 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -6,7 +6,7 @@
   margin: 0;
   min-width: @control-min-width;
   padding: @unit-2;
-  .shadow-variant(1px);
+  .shadow-variant(.05rem);
   transform: translateY(@layout-spacing-sm);
   z-index: @zindex-1;
 
@@ -47,10 +47,10 @@
 
   .menu-badge {
     float: right;
-    padding: 4px 0;
+    padding: @unit-1 0;
 
     .btn {
-      margin-top: -2px;
+      margin-top: -@unit-h;
     }
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index 9e8c0d7..52cd743 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -17,7 +17,7 @@
 
 // Component focus shadow
 .control-shadow(@color: @primary-color) {
-  box-shadow: 0 0 0 2px fade(@color, 20%);
+  box-shadow: 0 0 0 .1rem fade(@color, 20%);
 }
 
 // Component transition
@@ -47,7 +47,60 @@
 
 // Shadow mixin
 .shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset+1px)*2 fade(@dark-color, 30%);
+  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
+}
+
+// Position utility mixin
+.margin-variant(@size: 1) {
+  .m-@{size} {
+    padding: @size * @unit-1;
+  }
+  .mb-@{size} {
+    padding-bottom: @size * @unit-1;
+  }
+  .ml-@{size} {
+    padding-left: @size * @unit-1;
+  }
+  .mr-@{size} {
+    padding-right: @size * @unit-1;
+  }
+  .mt-@{size} {
+    padding-top: @size * @unit-1;
+  }
+  .mx-@{size} {
+    padding-left: @size * @unit-1;
+    padding-right: @size * @unit-1;
+  }
+  .my-@{size} {
+    padding-bottom: @size * @unit-1;
+    padding-top: @size * @unit-1;
+  }
+}
+
+.padding-variant(@size: 1) {
+  .p-@{size} {
+    padding: @size * @unit-1;
+  }
+  .pb-@{size} {
+    padding-bottom: @size * @unit-1;
+  }
+  .pl-@{size} {
+    padding-left: @size * @unit-1;
+  }
+  .pr-@{size} {
+    padding-right: @size * @unit-1;
+  }
+  .pt-@{size} {
+    padding-top: @size * @unit-1;
+  }
+  .px-@{size} {
+    padding-left: @size * @unit-1;
+    padding-right: @size * @unit-1;
+  }
+  .py-@{size} {
+    padding-bottom: @size * @unit-1;
+    padding-top: @size * @unit-1;
+  }
 }
 
 // Colors mixin
diff --git a/src/modals.less b/src/modals.less
index 8ff16f5..fb5cdf9 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -48,14 +48,13 @@
   border-radius: @border-radius;
   display: block;
   padding: 0;
-  .shadow-variant(4px);
+  .shadow-variant(.2rem);
   text-align: left;
 
   .modal-header {
     padding: @layout-spacing-lg;
 
     .modal-title {
-      font-size: @font-size-lg;
       margin: 0;
     }
   }
diff --git a/src/normalize.less b/src/normalize.less
index e8ffb28..d32cd77 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -163,6 +163,7 @@ dfn {
 
 small {
   font-size: 80%;
+  font-weight: 400; /* (added) */
 }
 
 /**
diff --git a/src/pagination.less b/src/pagination.less
index a51032d..0523bad 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -4,18 +4,18 @@
   padding: @unit-1 0;
 
   .page-item {
-    margin: @unit-1 1px;
+    margin: @unit-1 @unit-0;
 
     span {
       display: inline-block;
-      padding: 6px 4px;
+      padding: @unit-1 @unit-1;
     }
 
     a {
       border-radius: @border-radius;
       color: @gray-color-dark;
       display: inline-block;
-      padding: 6px 8px;
+      padding: @unit-1 @unit-2;
       text-decoration: none;
       &:focus,
       &:hover {
diff --git a/src/parallax.less b/src/parallax.less
index 69dfe1f..e353fd4 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -13,7 +13,7 @@
 
   .parallax-content {
     height: auto;
-    .shadow-variant(20px);
+    .shadow-variant(1rem);
     transform: perspective(@parallax-perspective);
     transform-style: preserve-3d;
     transition: all .4s ease;
diff --git a/src/popovers.less b/src/popovers.less
index 4683a67..0ba28a0 100644
--- a/src/popovers.less
+++ b/src/popovers.less
@@ -65,6 +65,6 @@
 
   .card {
     border: 0;
-    .shadow-variant(4px);
+    .shadow-variant(.2rem);
   }
 }
diff --git a/src/sliders.less b/src/sliders.less
index c90c334..bf5ce96 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -19,7 +19,7 @@
     border: 0;
     border-radius: 50%;
     height: @unit-3;
-    margin-top: -5px;
+    margin-top: -(@unit-3 - @unit-h) / 2 ;
     transition: transform .2s ease;
     width: @unit-3;
   }
diff --git a/src/typography.less b/src/typography.less
index 35c904f..3cae94b 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -22,27 +22,27 @@ h6 {
 }
 h1,
 .h1 {
-  font-size: 40px;
+  font-size: 2rem;
 }
 h2,
 .h2 {
-  font-size: 32px;
+  font-size: 1.6rem;
 }
 h3,
 .h3 {
-  font-size: 28px;
+  font-size: 1.4rem;
 }
 h4,
 .h4 {
-  font-size: 24px;
+  font-size: 1.2rem;
 }
 h5,
 .h5 {
-  font-size: 20px;
+  font-size: 1rem;
 }
 h6,
 .h6 {
-  font-size: 16px;
+  font-size: .8rem;
 }
 
 // Paragraphs
diff --git a/src/utilities.less b/src/utilities.less
index 03faaff..676beb0 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -3,6 +3,5 @@
 @import 'utilities/divider.less';
 @import 'utilities/loading.less';
 @import 'utilities/position.less';
-@import 'utilities/shadow.less';
 @import 'utilities/shapes.less';
 @import 'utilities/text.less';
\ No newline at end of file
diff --git a/src/utilities/position.less b/src/utilities/position.less
index ba00712..1bf33b5 100644
--- a/src/utilities/position.less
+++ b/src/utilities/position.less
@@ -26,65 +26,8 @@
 }
 
 // Spacing
-.mt-10 {
-  margin-top: 10px;
-}
-.mr-10 {
-  margin-right: 10px;
-}
-.mb-10 {
-  margin-bottom: 10px;
-}
-.ml-10 {
-  margin-left: 10px;
-}
-.m-10 {
-  margin: 10px;
-}
-.mt-5 {
-  margin-top: 5px;
-}
-.mr-5 {
-  margin-right: 5px;
-}
-.mb-5 {
-  margin-bottom: 5px;
-}
-.ml-5 {
-  margin-left: 5px;
-}
-.m-5 {
-  margin: 5px;
-}
-
-.pt-10 {
-  padding-top: 10px;
-}
-.pr-10 {
-  padding-right: 10px;
-}
-.pb-10 {
-  padding-bottom: 10px;
-}
-.pl-10 {
-  padding-left: 10px;
-}
-.p-10 {
-  padding: 10px;
-}
-.pt-5 {
-  padding-top: 5px;
-}
-.pr-5 {
-  padding-right: 5px;
-}
-.pb-5 {
-  padding-bottom: 5px;
-}
-.pl-5 {
-  padding-left: 5px;
-}
-.p-5 {
-  padding: 5px;
-}
+.margin-variant(1);
+.margin-variant(2);
 
+.padding-variant(1);
+.padding-variant(2);
\ No newline at end of file
diff --git a/src/utilities/shadow.less b/src/utilities/shadow.less
deleted file mode 100644
index 33086ad..0000000
--- a/src/utilities/shadow.less
+++ /dev/null
@@ -1,16 +0,0 @@
-// Shadow
-.shadow-0 {
-  .shadow-variant(0);
-}
-.shadow-1 {
-  .shadow-variant(1px);
-}
-.shadow-2 {
-  .shadow-variant(2px);
-}
-.shadow-3 {
-  .shadow-variant(3px);
-}
-.shadow-4 {
-  .shadow-variant(4px);
-}
diff --git a/src/variables.less b/src/variables.less
index 843dbc5..fb2bcc8 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -1,14 +1,14 @@
 // Core variables
 
 // Global
-@html-font-size: 10px;
+@html-font-size: 20px;
 @html-line-height: 1.428571429;
 @body-bg: @bg-color-light;
 @body-font-color: @dark-color;
-@font-size: 14px;
-@font-size-sm: 12px;
-@font-size-lg: 16px;
-@line-height: 20px;
+@font-size: .7rem;
+@font-size-sm: .6rem;
+@font-size-lg: .8rem;
+@line-height: 1rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -20,25 +20,25 @@
 @body-font-family: @base-font-family, @fallback-font-family;
 
 // Unit sizes
-@unit-0: 1px;
-@unit-h: 2px;
-@unit-1: 4px;
-@unit-2: 8px;
-@unit-3: 12px;
-@unit-4: 16px;
-@unit-5: 20px;
-@unit-6: 24px;
-@unit-7: 28px;
-@unit-8: 32px;
-@unit-9: 36px;
-@unit-10: 40px;
-@unit-12: 48px;
-@unit-16: 64px;
+@unit-0: .05rem;
+@unit-h: .1rem;
+@unit-1: .2rem;
+@unit-2: .4rem;
+@unit-3: .6rem;
+@unit-4: .8rem;
+@unit-5: 1rem;
+@unit-6: 1.2rem;
+@unit-7: 1.4rem;
+@unit-8: 1.6rem;
+@unit-9: 1.8rem;
+@unit-10: 2rem;
+@unit-12: 2.4rem;
+@unit-16: 3.2rem;
 
 // Sizes
-@layout-spacing: 10px;
-@layout-spacing-sm: 5px;
-@layout-spacing-lg: 15px;
+@layout-spacing: @unit-2;
+@layout-spacing-sm: @unit-1;
+@layout-spacing-lg: @unit-4;
 @control-size: @unit-8;
 @control-size-sm: @unit-6;
 @control-size-lg: @unit-10;
@@ -46,12 +46,12 @@
 @control-padding-v: (@control-size - @line-height) / 2 - @border-width;
 @control-padding-v-sm: (@control-size-sm - @line-height) / 2 - @border-width;
 @control-padding-v-lg: (@control-size-lg - @line-height) / 2 - @border-width;
-@control-icon-size: 14px; 
+@control-icon-size: .7rem; 
 @control-min-width: 180px;
 @control-max-width: 320px;
-@border-radius: 2px;
-@border-width: 1px;
-@border-width-lg: 2px;
+@border-radius: @unit-h;
+@border-width: @unit-0;
+@border-width-lg: @unit-h;
 
 // Colors
 // Core colors