Fix button icons

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Bulma Changelog
 
+## 0.3.0
+
+# Use `rem` and `em`
+# Move variables to their own file
+# Remove small tag
+# Fix Font Awesome icons in buttons
+
 ## 0.2.2
 
 * Fix: remove multiple imports

docs/.gitignore

@@ -11,5 +11,6 @@ npm-debug.log
 .sass-cache
 /_sass
 /bulma
+/fontawesome
 /styles/node_modules
 _site

docs/_config.yml

@@ -8,6 +8,7 @@ description:   "Bulma is an open source CSS framework based on Flexbox and built
 markdown:      kramdown
 permalink:     pretty
 url:           http://bulma.io
+fontawesome:   https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
 
 # Variables
 

docs/_includes/head.html

@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
+  <link rel="stylesheet" href="{{ site.fontawesome }}">
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/bulma-docs.sass

@@ -20,7 +20,7 @@ body.page-grid .column > .notification
 
 +tablet
   .header-item .button + .button
-    margin-left: 10px
+    margin-left: 0.75rem
 
 // Additional
 svg
@@ -221,13 +221,13 @@ html.route-index #carbon
   background: $white
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 20px
+  padding: 1.5rem
 
 #mc_embed_signup
   .control
     margin-bottom: 0
   .notification
-    margin-top: 10px
+    margin-top: 0.75rem
 
 #social
   align-items: center
@@ -261,12 +261,12 @@ html.route-index #carbon
   border: 1px solid $warning
   border-top-right-radius: $radius
   color: $warning-invert
-  padding: 15px 20px
+  padding: 1.25rem 1.5rem
   position: relative
   &:not(:first-child)
-    margin-top: 30px
+    margin-top: 2rem
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
   &:before
     background: $warning
     border-radius: $radius $radius 0 0
@@ -292,11 +292,11 @@ html.route-index #carbon
     border: 1px solid $warning
     border-radius: 0 0 $radius $radius
     border-top: none
-    margin-top: -20px
+    margin-top: -1.5rem
     pre
       max-height: 600px
     &:not(:last-child)
-      margin-bottom: 40px
+      margin-bottom: 3rem
 
 $structure: $danger
 $structure-invert: $danger-invert
@@ -304,7 +304,7 @@ $structure-invert: $danger-invert
 .structure
   border-color: $structure
   border-radius: $radius
-  padding: 20px
+  padding: 1.5rem
   &:before
     background: $structure
     color: $structure-invert
@@ -331,11 +331,11 @@ $structure-invert: $danger-invert
     padding: 3px 5px
     z-index: 2
   &.is-structure-container
-    padding: 20px 10px 10px
+    padding: 1.5rem 0.75rem 0.75rem
     &:after
       align-items: flex-start
       justify-content: flex-start
-      padding: 5px 10px
+      padding: 0.5rem 0.75rem
 
 .highlight
   position: relative
@@ -360,11 +360,11 @@ $structure-invert: $danger-invert
 
 +tablet
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
-    margin-left: 20px
-    margin-right: 20px
+    margin-left: 1.5rem
+    margin-right: 1.5rem
     & + .highlight
-      margin-left: 20px
-      margin-right: 20px
+      margin-left: 1.5rem
+      margin-right: 1.5rem
 
 .section.is-fullwidth
   padding: 0 !important

docs/documentation/elements/button.html

@@ -256,6 +256,23 @@ doc-subtab: button
 
     <div class="columns">
       <div class="column">
+        <p class="control">
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-bold"></i>
+            </span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-italic"></i>
+            </span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-underline"></i>
+            </span>
+          </a>
+        </p>
         <p class="control">
           <a class="button">
             <span class="icon">
@@ -345,6 +362,140 @@ doc-subtab: button
       </div>
     </div>
 
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            <span class="tag is-success">New!</span>
+          </p>
+          <p>
+            If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
+          </p>
+        </div>
+
+        <p class="control">
+          <a class="button is-small">
+            <span class="icon is-small">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button">
+            <span class="icon">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-medium">
+            <span class="icon is-small">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button is-medium">
+            <span class="icon">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button is-medium">
+            <span class="icon is-medium">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-large">
+            <span class="icon is-small">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button is-large">
+            <span class="icon">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button is-large">
+            <span class="icon is-medium">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+          <a class="button is-large">
+            <span class="icon is-large">
+              <i class="fa fa-header"></i>
+            </span>
+          </a>
+        </p>
+      </div>
+      <div class="column">
+{% highlight html %}
+<p class="control">
+  <a class="button is-small">
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+</p>
+<p class="control">
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button">
+    <span class="icon">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+</p>
+<p class="control">
+  <a class="button is-medium">
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button is-medium">
+    <span class="icon">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button is-medium">
+    <span class="icon is-medium">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+</p>
+<p class="control">
+  <a class="button is-large">
+    <span class="icon is-small">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button is-large">
+    <span class="icon">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button is-large">
+    <span class="icon is-medium">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+  <a class="button is-large">
+    <span class="icon is-large">
+      <i class="fa fa-header"></i>
+    </span>
+  </a>
+</p>
+{% endhighlight %}
+      </div>
+    </div>
+
     <hr>
 
     <h3 class="title">Button group</h3>
@@ -439,6 +590,79 @@ doc-subtab: button
     <span>Right</span>
   </a>
 </p>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Button group with addons</h3>
+    <div class="content">
+      <p>You can group together addons as well:</p>
+    </div>
+    <div class="example">
+      <div class="control is-grouped">
+        <p class="control has-addons">
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-bold"></i>
+            </span>
+            <span>Bold</span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-italic"></i>
+            </span>
+            <span>Italic</span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-underline"></i>
+            </span>
+            <span>Underline</span>
+          </a>
+        </p>
+        <p class="control has-addons">
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-align-left"></i>
+            </span>
+            <span>Left</span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-align-center"></i>
+            </span>
+            <span>Center</span>
+          </a>
+          <a class="button">
+            <span class="icon is-small">
+              <i class="fa fa-align-right"></i>
+            </span>
+            <span>Right</span>
+          </a>
+        </p>
+      </div>
+    </div>
+{% highlight html %}
+<p class="control has-addons">
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-left"></i>
+    </span>
+    <span>Left</span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-center"></i>
+    </span>
+    <span>Center</span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-align-right"></i>
+    </span>
+    <span>Right</span>
+  </a>
+</p>
 {% endhighlight %}
 
   </div>

docs/documentation/elements/form.html

@@ -77,10 +77,14 @@ doc-subtab: form
             No
           </label>
         </p>
-        <p class="control">
-          <button class="button is-primary">Submit</button>
-          <button class="button is-link">Cancel</button>
-        </p>
+        <div class="control is-grouped">
+          <p class="control">
+            <button class="button is-primary">Submit</button>
+          </p>
+          <p class="control">
+            <button class="button is-link">Cancel</button>
+          </p>
+        </div>
       </div>
       <div class="column is-half">
 {% highlight html %}
@@ -129,10 +133,14 @@ doc-subtab: form
     No
   </label>
 </p>
-<p class="control">
-  <button class="button is-primary">Submit</button>
-  <button class="button is-link">Cancel</button>
-</p>
+<div class="control is-grouped">
+  <p class="control">
+    <button class="button is-primary">Submit</button>
+  </p>
+  <p class="control">
+    <button class="button is-link">Cancel</button>
+  </p>
+</div>
 {% endhighlight %}
       </div>
     </div>
@@ -363,10 +371,14 @@ doc-subtab: form
             No
           </label>
         </p>
-        <p class="control">
-          <button class="button is-primary" disabled>Submit</button>
-          <button class="button" disabled>Cancel</button>
-        </p>
+        <div class="control is-grouped">
+          <p class="control">
+            <button class="button is-primary" disabled>Submit</button>
+          </p>
+          <p class="control">
+            <button class="button" disabled>Cancel</button>
+          </p>
+        </div>
       </div>
       <div class="column is-half">
 {% highlight html %}
@@ -392,10 +404,14 @@ doc-subtab: form
     No
   </label>
 </p>
-<p class="control">
-  <button class="button is-primary" disabled>Submit</button>
-  <button class="button" disabled>Cancel</button>
-</p>
+<div class="control is-grouped">
+  <p class="control">
+    <button class="button is-primary" disabled>Submit</button>
+  </p>
+  <p class="control">
+    <button class="button" disabled>Cancel</button>
+  </p>
+</div>
 {% endhighlight %}
       </div>
     </div>

docs/documentation/elements/tag.html

@@ -17,7 +17,7 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        By default, a <strong>tag</strong> is a 24px high label.
+        By default, a <strong>tag</strong> is a 1.5rem high label.
       </div>
       <div class="column is-2">
         <span class="tag">
@@ -35,14 +35,29 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        There are <strong>6 different colors</strong> available.
+        Like with buttons, there are <strong>9 different colors</strong> available.
       </div>
       <div class="column is-2">
+        <p class="control">
+          <span class="tag is-black">
+            Black
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-dark">
             Dark
           </span>
         </p>
+        <p class="control">
+          <span class="tag is-light">
+            Light
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-white">
+            White
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-primary">
             Primary
@@ -69,7 +84,10 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
+<span class="tag is-black">Black</span>
 <span class="tag is-dark">Dark</span>
+<span class="tag is-light">Light</span>
+<span class="tag is-white">White</span>
 <span class="tag is-primary">Primary</span>
 <span class="tag is-info">Info</span>
 <span class="tag is-success">Success</span>
@@ -81,14 +99,9 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        And <strong>3 additional</strong> sizes.
+        And <strong>2 additional</strong> sizes.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-dark is-small">
-            Small
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-primary is-medium">
             Medium
@@ -102,7 +115,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-dark is-small">Small</span>
 <span class="tag is-primary is-medium">Medium</span>
 <span class="tag is-info is-large">Large</span>
 {% endhighlight %}
@@ -114,12 +126,6 @@ doc-subtab: tag
         You can also append a <strong>delete button</strong>.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-info is-small">
-            Foo
-            <button class="delete is-small"></button>
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-success">
             Bar
@@ -141,10 +147,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-info is-small">
-  Foo
-  <button class="delete is-small"></button>
-</span>
 <span class="tag is-success">
   Bar
   <button class="delete is-small"></button>

sass/base/generic.sass

@@ -85,12 +85,12 @@ strong
 pre
   background-color: $pre-background
   color: $pre
-  font-size: 0.8em
+  font-size: 0.75em
   white-space: pre
   word-wrap: normal
   code
-    background-color: $pre-background
-    color: $pre
+    background: none
+    color: inherit
     display: block
     font-size: 1em
     overflow-x: auto

sass/elements/_all.sass

@@ -8,6 +8,7 @@
 @import "notification.sass"
 @import "progress.sass"
 @import "table.sass"
+@import "tag.sass"
 @import "title.sass"
 
 @import "other.sass"

sass/elements/button.sass

@@ -1,3 +1,7 @@
+$button:                     $grey-darker !default
+$button-background:          $white !default
+$button-border:              $grey-lighter !default
+
 $button-hover: $link-hover !default
 $button-hover-border: $link-hover-border !default
 
@@ -9,17 +13,60 @@ $button-active-border: $link-active-border !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
+@function buttonIconSpacing($button-size, $icon-width)
+  // The rem height of the button
+  $button-height: 2.5 * $button-size
+  // For the button to be square, the horizontal padding + the icon width must equal the button height.
+  // We know that $horizontal-padding = 2em
+  $horizontal-padding: 2 * $button-size
+  // We want to solve:
+  // $button-height = $horizontal-padding + $icon-width + $x
+  $x: $button-height - $horizontal-padding - $icon-width
+  // We divide by 2 to apply this margin on both the left and right sides
+  $negative-margin: abs($x) / 2
+  // We need to remove 1px for the border as well
+  @return calc(-1px - #{$negative-margin})
+
+=button-icon($button-size)
+  .icon
+    &:first-child
+      margin-left: buttonIconSpacing($button-size, 1.5rem)
+    &:last-child
+        margin-right: buttonIconSpacing($button-size, 1.5rem)
+    &.is-small
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 1rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 1rem)
+    &.is-medium
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 2rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 2rem)
+    &.is-large
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 3rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 3rem)
+
+// The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
   font-size: $size-small
+  +button-icon($size-small)
 =button-medium
   font-size: $size-medium
+  +button-icon($size-medium)
 =button-large
   font-size: $size-large
+  +button-icon($size-large)
 
 .button
   +control
   +unselectable
+  background-color: $button-background
+  border: 1px solid $button-border
+  color: $button
   cursor: pointer
   justify-content: center
   padding-left: 1em
@@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   white-space: nowrap
   strong
     color: inherit
-  .icon,
-  .tag
-    &:first-child
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
+  +button-icon($size-normal)
+  .icon
+    &:first-child:not(:last-child)
+      margin-right: 0.25rem !important
+    &:last-child:not(:first-child)
+      margin-left: 0.25rem !important
   // States
   &:hover,
   &.is-hovered
@@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   // Colors
   &.is-link
     background-color: transparent
-    border-width: 0
+    border-color: transparent
     color: $text
     text-decoration: underline
     &:hover,
@@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-width: 0
+      border-color: transparent
       color: $color-invert
       &:hover,
       &.is-hovered

sass/elements/content.sass

@@ -24,7 +24,7 @@
   h5,
   h6
     color: $text-strong
-    font-weight: $weight-title-normal
+    font-weight: $weight-normal
     line-height: 1.125
   h1
     font-size: 2em

sass/elements/form.sass

@@ -151,7 +151,7 @@ $input-radius:              $radius !default
 
 .help
   display: block
-  font-size: 0.875em
+  font-size: $size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -175,7 +175,7 @@ $input-radius:              $radius !default
   position: relative
   text-align: left
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.has-addons
     display: flex
@@ -278,7 +278,7 @@ $input-radius:              $radius !default
     & > .control
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 10px
+        margin-right: 0.75rem
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1

sass/elements/notification.sass

@@ -3,12 +3,13 @@
   +clearfix
   background-color: $background
   border-radius: $radius
-  padding: 16px 20px
+  padding: 1.25rem 1.5rem
   position: relative
   .delete
     border-radius: 0 $radius
-    float: right
-    margin: -16px -20px 0 20px
+    position: absolute
+    right: 0
+    top: 0
   .title,
   .subtitle,
   .content

sass/elements/other.sass

@@ -11,7 +11,7 @@
       margin: 0 20px
       max-width: none
   +widescreen
-    max-width: 1200px
+    max-width: 1080px
 
 .delete
   +delete
@@ -22,17 +22,17 @@
   vertical-align: top
 
 .icon
-  +fa(21px, 24px)
+  +fa(21px, 1.5rem)
   .fa
     font-size: inherit
     line-height: inherit
   // Sizes
   &.is-small
-    +fa(14px, 16px)
+    +fa(14px, 1rem)
   &.is-medium
-    +fa(28px, 32px)
+    +fa(28px, 2rem)
   &.is-large
-    +fa(42px, 48px)
+    +fa(42px, 3rem)
 
 .heading
   display: block
@@ -60,48 +60,3 @@
   display: inline-block
   font-size: $size-medium
   vertical-align: top
-
-.tag
-  align-items: center
-  background-color: $background
-  border-radius: 290486px
-  color: $text
-  display: inline-flex
-  font-size: 12px
-  height: 24px
-  justify-content: center
-  line-height: 16px
-  padding-left: 10px
-  padding-right: 10px
-  vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding-left: 8px
-    padding-right: 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding-left: 14px
-    padding-right: 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding-left: 18px
-    padding-right: 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px

sass/elements/progress.sass

@@ -5,7 +5,7 @@
   border: none
   border-radius: 290486px
   display: block
-  height: 12px
+  height: $size-normal
   overflow: hidden
   padding: 0
   width: 100%
@@ -25,8 +25,8 @@
         background-color: $color
   // Sizes
   &.is-small
-    height: 8px
+    height: $size-small
   &.is-medium
-    height: 16px
+    height: $size-medium
   &.is-large
-    height: 20px
+    height: $size-large

sass/elements/tag.sass

@@ -0,0 +1,29 @@
+.tag
+  align-items: center
+  background-color: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.875em
+  padding-right: 0.875em
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 0.25em
+    margin-right: -0.5em
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Sizes
+  &.is-medium
+    font-size: $size-normal
+  &.is-large
+    font-size: $size-medium

sass/elements/title.sass

@@ -1,22 +1,32 @@
+$title:             $grey-darker !default
+$title-size:        $size-3 !default
+$title-weight:      $weight-light !default
+$title-weight-bold: $weight-semibold !default
+
+$subtitle:          $grey-dark !default
+$subtitle-size:     $size-5 !default
+$subtitle-strong:   $grey-darker !default
+$subtitle-weight:   $weight-light !default
+
 .title,
 .subtitle
   +block
-  font-weight: $weight-title-normal
   word-break: break-word
   em,
   span
-    font-weight: $weight-title-normal
+    font-weight: $title-weight
   a
     &:hover
       border-bottom: 1px solid
   strong
-    font-weight: $weight-title-bold
+    font-weight: $title-weight-bold
   .tag
     vertical-align: bottom
 
 .title
-  color: $text-strong
-  font-size: $size-large
+  color: $title
+  font-size: $title-size
+  font-weight: $title-weight
   line-height: 1.125
   strong
     color: inherit
@@ -29,18 +39,14 @@
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-  // Modifiers
-  &.is-normal
-    font-weight: $weight-normal
-    strong
-      font-weight: $weight-bold
 
 .subtitle
-  color: $text
-  font-size: $size-medium
+  color: $subtitle
+  font-size: $subtitle-size
+  font-weight: $subtitle-weight
   line-height: 1.25
   strong
-    color: $text-strong
+    color: $subtitle-strong
   & + .title
     margin-top: -1.4rem
   // Colors
@@ -48,8 +54,3 @@
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-  // Modifiers
-  &.is-normal
-    font-weight: $weight-normal
-    strong
-      font-weight: $weight-bold

sass/utilities/controls.sass

@@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
-  font-size: 1em
+  font-size: $size-normal
   height: 2.5em
   justify-content: flex-start
   line-height: 1.5
@@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
   &.is-disabled
     pointer-events: none
 
+// The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small
   font-size: $size-small

sass/utilities/functions.sass

@@ -23,6 +23,6 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.55)
-    @return rgba(black, 0.7)
+    @return rgba(#000, 0.7)
   @else
-    @return white
+    @return #fff

sass/utilities/mixins.sass

@@ -36,39 +36,38 @@
   border-radius: 290486px
   cursor: pointer
   display: inline-block
-  height: 24px
+  font-size: $size-normal
+  height: 1.5em
   outline: none
   position: relative
+  transform: rotate(45deg)
+  transform-origin: center center
   vertical-align: top
-  width: 24px
+  width: 1.5em
   &:before,
   &:after
     background-color: $white
     content: ""
     display: block
-    height: 2px
     left: 50%
-    margin-left: -25%
-    margin-top: -1px
     position: absolute
     top: 50%
-    width: 50%
+    transform: translateX(-50%) translateY(-50%)
   &:before
-    transform: rotate(45deg)
+    height: 2px
+    width: 50%
   &:after
-    transform: rotate(-45deg)
+    height: 50%
+    width: 2px
   &:hover
     background-color: rgba($black, 0.2)
   // Sizes
   &.is-small
-    height: 16px
-    width: 16px
+    font-size: $size-small
   &.is-medium
-    height: 32px
-    width: 32px
+    font-size: $size-medium
   &.is-large
-    height: 40px
-    width: 40px
+    font-size: $size-large
 
 =fa($size, $dimensions)
   display: inline-block

sass/utilities/variables.sass

@@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
 $size-1: 3.5rem !default
-$size-2: 2.5rem !default
-$size-3: 1.75rem !default
+$size-2: 2.75rem !default
+$size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
 $size-6: 16px !default
+$size-7: 0.75rem !default
 
-$size-7: 0.875rem !default
-
+$weight-light: 300 !default
 $weight-normal: 400 !default
+$weight-semibold: 500 !default
 $weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
 
 // Miscellaneous
 $easing: ease-out !default
@@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
-$size-normal: $size-6 !default
+$size-normal: 1rem !default
 $size-medium: $size-5 !default
 $size-large: $size-4 !default