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

1 files changed, 26 insertions, 26 deletions

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