IMPORTANT: Increase control font sizes #271

9 files changed, 27 insertions, 25 deletions

diff --git a/src/_badges.scss b/src/_badges.scss
index 9da6679..554ab1b 100644
--- a/src/_badges.scss
+++ b/src/_badges.scss
@@ -19,10 +19,10 @@
   &[data-badge] {
     &::after {
       font-size: $font-size-sm;
-      height: 18px;
+      height: .9rem;
       line-height: 1;
-      min-width: 18px;
-      padding: 3px 5px;
+      min-width: .9rem;
+      padding: .1rem .2rem;
       text-align: center;
       white-space: nowrap;
     }
diff --git a/src/_carousels.scss b/src/_carousels.scss
index d68c40a..ba87c96 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -94,7 +94,7 @@
         background: currentColor;
         content: "";
         display: block;
-        height: $border-width-lg;
+        height: $unit-h;
         position: absolute;
         top: .5rem;
         width: 100%;
diff --git a/src/_chips.scss b/src/_chips.scss
index 0610470..331ec1f 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -5,6 +5,7 @@
   border-radius: 5rem;
   color: $gray-color-dark;
   display: inline-flex;
+  font-size: 95%;
   height: $unit-6;
   margin: $unit-h;
   max-width: 100%;
diff --git a/src/_codes.scss b/src/_codes.scss
index af7ac90..bd7db5d 100644
--- a/src/_codes.scss
+++ b/src/_codes.scss
@@ -2,7 +2,7 @@
 code {
   @include label-base();
   @include label-variant($code-color, lighten($code-color, 33%));
-  font-size: .65rem;
+  font-size: $font-size-sm;
 }
 
 .code {
diff --git a/src/_forms.scss b/src/_forms.scss
index 3fa2c87..4894015 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,6 +18,7 @@ legend {
 // Form element: Label
 .form-label {
   display: block;
+  line-height: $line-height;
   padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
@@ -278,22 +279,22 @@ textarea.form-input {
 }
 .form-radio {
   .form-icon {
-    border-radius: $control-icon-size / 2;
+    border-radius: 50%;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
         background: $bg-color-light;
-        border-radius: $border-radius;
+        border-radius: 50%;
         content: "";
-        height: 4px;
+        height: 6px;
         left: 50%;
-        margin-left: -2px;
-        margin-top: -2px;
+        margin-left: -3px;
+        margin-top: -3px;
         position: absolute;
         top: 50%;
-        width: 4px;
+        width: 6px;
       }
     }
   }
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 93788d2..2402dc8 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -90,8 +90,8 @@
 // Label base style
 @mixin label-base() {
   border-radius: $border-radius;
-  line-height: 1;
-  padding: .15rem;
+  line-height: 1.2;
+  padding: .1rem .15rem;
 }
 
 @mixin label-variant($color: $light-color, $bg-color: $primary-color) {
diff --git a/src/_typography.scss b/src/_typography.scss
index 17b7f7c..9bfea54 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -9,7 +9,7 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: .25em;
+  margin-bottom: .5em;
   margin-top: 0;
 }
 .h1,
@@ -48,7 +48,7 @@ h6,
 // Paragraphs
 p {
   line-height: 1.2 * $line-height;
-  margin: 0 0 $unit-4;
+  margin: 0 0 $line-height;
 }
 
 // Semantic text elements
@@ -67,7 +67,7 @@ abbr[title] {
 kbd {
   @include label-base();
   @include label-variant($light-color, $dark-color);
-  font-size: .65rem;
+  font-size: $font-size-sm;
 }
 
 mark {
diff --git a/src/_variables.scss b/src/_variables.scss
index eb7fe35..be56711 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -13,7 +13,7 @@ $secondary-color-light: lighten($secondary-color, 3%) !default;
 $dark-color: #454d5d !default;
 $light-color: #fff !default;
 $gray-color: lighten($dark-color, 40%) !default;
-$gray-color-dark: darken($gray-color, 20%) !default;
+$gray-color-dark: darken($gray-color, 25%) !default;
 $gray-color-light: lighten($gray-color, 20%) !default;
 
 $border-color: lighten($dark-color, 60%) !default;
@@ -63,10 +63,10 @@ $unit-16: 3.2rem !default;
 
 // Font sizes
 $html-font-size: 20px !default;
-$html-line-height: 1.428571429 !default;
-$font-size: .7rem !default;
-$font-size-sm: .6rem !default;
-$font-size-lg: .8rem !default;
+$html-line-height: 1.5 !default;
+$font-size: .8rem !default;
+$font-size-sm: .7rem !default;
+$font-size-lg: .9rem !default;
 $line-height: 1rem !default;
 
 // Sizes
@@ -76,8 +76,8 @@ $layout-spacing-lg: $unit-4 !default;
 $border-radius: $unit-h !default;
 $border-width: $unit-o !default;
 $border-width-lg: $unit-h !default;
-$control-size: $unit-8 !default;
-$control-size-sm: $unit-6 !default;
+$control-size: $unit-9 !default;
+$control-size-sm: $unit-7 !default;
 $control-size-lg: $unit-10 !default;
 $control-padding-x: $unit-2 !default;
 $control-padding-x-sm: $unit-2 * .75 !default;
@@ -85,7 +85,7 @@ $control-padding-x-lg: $unit-2 * 1.5 !default;
 $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
 $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
 $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
-$control-icon-size: .7rem !default;
+$control-icon-size: .8rem !default;
 $control-min-width: 180px !default;
 $control-max-width: 320px !default;
 
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
index 1bcc10e..fa09f0e 100644
--- a/src/icons/_icons-core.scss
+++ b/src/icons/_icons-core.scss
@@ -42,6 +42,6 @@ $icon-prefix: "icon";
 .toast,
 .menu {
   .#{$icon-prefix} {
-    vertical-align: -10%;
+    vertical-align: -15%;
   }
 }