From 06c9377192cb93ac17820ca4a155cd94c7c7d685 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 8 Jan 2018 10:32:09 -0500
Subject: [PATCH] fix(standalone): fixes standalone component styling (#13769)

* test(e2e): update standalone tests for snapshot

* fix(standalone): improve component fonts, box-sizing, etc

* refactor(input): separate textarea styles from input and rename classes

* fix(datetime): change position in an item so cover is over item
---
 .../action-sheet/action-sheet.ios.scss        |  2 +
 .../action-sheet/action-sheet.ios.vars.scss   |  3 +
 .../action-sheet/action-sheet.md.scss         |  4 +
 .../action-sheet/action-sheet.md.vars.scss    |  3 +
 .../components/action-sheet/action-sheet.scss |  2 +
 .../core/src/components/alert/alert.ios.scss  |  4 +
 .../src/components/alert/alert.ios.vars.scss  |  3 +
 .../core/src/components/alert/alert.md.scss   |  6 ++
 .../src/components/alert/alert.md.vars.scss   |  3 +
 packages/core/src/components/alert/alert.scss |  2 +
 .../core/src/components/badge/badge.ios.scss  |  2 +
 .../src/components/badge/badge.ios.vars.scss  |  3 +
 .../core/src/components/badge/badge.md.scss   |  2 +
 .../src/components/badge/badge.md.vars.scss   |  3 +
 packages/core/src/components/badge/badge.scss |  3 +
 .../src/components/button/button.ios.scss     |  5 +-
 .../components/button/button.ios.vars.scss    |  7 +-
 .../core/src/components/button/button.md.scss |  5 +-
 .../src/components/button/button.md.vars.scss |  7 +-
 .../core/src/components/button/button.scss    |  3 +
 .../core/src/components/card/card.ios.scss    |  2 +
 .../src/components/card/card.ios.vars.scss    |  3 +
 .../core/src/components/card/card.md.scss     |  2 +
 .../src/components/card/card.md.vars.scss     |  3 +
 .../core/src/components/chip/chip.ios.scss    |  2 +
 .../src/components/chip/chip.ios.vars.scss    |  3 +
 .../core/src/components/chip/chip.md.scss     |  2 +
 .../src/components/chip/chip.md.vars.scss     |  3 +
 .../src/components/content/content.ios.scss   |  2 +
 .../components/content/content.ios.vars.scss  |  3 +
 .../src/components/content/content.md.scss    |  2 +
 .../components/content/content.md.vars.scss   |  3 +
 .../src/components/datetime/datetime.ios.scss |  2 +
 .../datetime/datetime.ios.vars.scss           |  3 +
 .../src/components/datetime/datetime.md.scss  |  2 +
 .../components/datetime/datetime.md.vars.scss |  3 +
 .../src/components/datetime/datetime.scss     | 20 +++++
 .../core/src/components/datetime/datetime.tsx |  2 +-
 .../core/src/components/grid/grid.ios.scss    |  9 ++
 .../src/components/grid/grid.ios.vars.scss    |  7 ++
 .../core/src/components/grid/grid.md.scss     |  9 ++
 .../src/components/grid/grid.md.vars.scss     |  7 ++
 packages/core/src/components/grid/grid.tsx    |  8 +-
 .../core/src/components/input/input.ios.scss  | 16 ++--
 .../src/components/input/input.ios.vars.scss  |  6 ++
 .../core/src/components/input/input.md.scss   | 13 +--
 .../src/components/input/input.md.vars.scss   |  6 ++
 packages/core/src/components/input/input.scss | 34 ++------
 packages/core/src/components/input/input.tsx  |  4 +-
 .../core/src/components/item/item.ios.scss    |  4 +-
 .../src/components/item/item.ios.vars.scss    |  7 +-
 .../core/src/components/item/item.md.scss     |  1 +
 .../src/components/item/item.md.vars.scss     |  9 +-
 .../core/src/components/label/label.ios.scss  |  2 +
 .../src/components/label/label.ios.vars.scss  |  3 +
 .../core/src/components/label/label.md.scss   |  2 +
 .../src/components/label/label.md.vars.scss   |  7 +-
 .../src/components/picker/picker.ios.scss     |  4 +
 .../components/picker/picker.ios.vars.scss    |  3 +
 .../core/src/components/picker/picker.md.scss |  4 +
 .../src/components/picker/picker.md.vars.scss |  3 +
 .../core/src/components/picker/picker.scss    | 10 +++
 packages/core/src/components/radio/radio.scss |  6 ++
 .../core/src/components/range/range.ios.scss  |  3 +
 .../src/components/range/range.ios.vars.scss  |  3 +
 .../core/src/components/range/range.md.scss   |  2 +
 .../src/components/range/range.md.vars.scss   |  3 +
 packages/core/src/components/range/range.scss |  4 +
 .../components/searchbar/searchbar.ios.scss   |  2 +
 .../searchbar/searchbar.ios.vars.scss         |  3 +
 .../components/searchbar/searchbar.md.scss    |  4 +-
 .../searchbar/searchbar.md.vars.scss          |  5 +-
 .../src/components/searchbar/searchbar.scss   |  2 +
 .../src/components/segment/segment.ios.scss   |  4 +
 .../components/segment/segment.ios.vars.scss  |  6 ++
 .../src/components/segment/segment.md.scss    |  4 +
 .../components/segment/segment.md.vars.scss   |  3 +
 .../core/src/components/segment/segment.scss  |  1 +
 .../src/components/select/select.ios.scss     |  4 +-
 .../components/select/select.ios.vars.scss    |  3 +
 .../core/src/components/select/select.md.scss |  2 +
 .../src/components/select/select.md.vars.scss |  3 +
 .../core/src/components/select/select.scss    | 23 +++++-
 .../core/src/components/select/select.tsx     |  6 +-
 .../core/src/components/slides/slides.scss    |  2 +-
 .../src/components/slides/slides.vars.scss    |  6 ++
 .../src/components/textarea/textarea.ios.scss | 42 ++++++++++
 .../textarea/textarea.ios.vars.scss           | 27 ++++++
 .../src/components/textarea/textarea.md.scss  | 26 ++++++
 .../components/textarea/textarea.md.vars.scss | 24 ++++++
 .../src/components/textarea/textarea.scss     | 82 +++++++++++++++++++
 .../core/src/components/textarea/textarea.tsx | 13 ++-
 .../components/textarea/textarea.vars.scss    |  6 ++
 .../src/components/thumbnail/thumbnail.scss   |  5 ++
 .../core/src/components/toast/toast.ios.scss  |  4 +
 .../src/components/toast/toast.ios.vars.scss  |  3 +
 .../core/src/components/toast/toast.md.scss   |  4 +
 .../src/components/toast/toast.md.vars.scss   |  3 +
 .../src/components/toolbar/toolbar.ios.scss   |  2 +
 .../components/toolbar/toolbar.ios.vars.scss  |  3 +
 .../src/components/toolbar/toolbar.md.scss    |  2 +
 .../components/toolbar/toolbar.md.vars.scss   |  3 +
 .../core/src/components/toolbar/toolbar.scss  | 10 ++-
 103 files changed, 598 insertions(+), 77 deletions(-)
 create mode 100644 packages/core/src/components/grid/grid.ios.scss
 create mode 100644 packages/core/src/components/grid/grid.ios.vars.scss
 create mode 100644 packages/core/src/components/grid/grid.md.scss
 create mode 100644 packages/core/src/components/grid/grid.md.vars.scss
 create mode 100644 packages/core/src/components/slides/slides.vars.scss
 create mode 100644 packages/core/src/components/textarea/textarea.ios.scss
 create mode 100644 packages/core/src/components/textarea/textarea.ios.vars.scss
 create mode 100644 packages/core/src/components/textarea/textarea.md.scss
 create mode 100644 packages/core/src/components/textarea/textarea.md.vars.scss
 create mode 100644 packages/core/src/components/textarea/textarea.scss
 create mode 100644 packages/core/src/components/textarea/textarea.vars.scss

diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss
index a7d7421f9a..f299b1b4e3 100644
--- a/packages/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss
@@ -6,6 +6,8 @@
 
 .action-sheet-ios {
   @include text-align($action-sheet-ios-text-align);
+
+  font-family: $action-sheet-ios-font-family;
 }
 
 .action-sheet-ios .action-sheet-wrapper {
diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
index eacf54cbfc..1c9111ac18 100644
--- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Action Sheet
 // --------------------------------------------------
 
+/// @prop - Font family of the action sheet
+$action-sheet-ios-font-family:                          $font-family-ios-base !default;
+
 /// @prop - Text align of the action sheet
 $action-sheet-ios-text-align:                           center !default;
 
diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss
index 0fcd1dcb4a..25c7110011 100644
--- a/packages/core/src/components/action-sheet/action-sheet.md.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.md.scss
@@ -4,6 +4,10 @@
 // Material Design Action Sheet
 // --------------------------------------------------
 
+.action-sheet-md {
+  font-family: $action-sheet-md-font-family;
+}
+
 // Material Design Action Sheet Title
 // -----------------------------------------
 
diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss
index 9ebdb7b449..cdfb8ce7bc 100644
--- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Action Sheet
 // --------------------------------------------------
 
+/// @prop - Font family of the action sheet
+$action-sheet-md-font-family:                           $font-family-md-base !default;
+
 /// @prop - Text align of the action sheet
 $action-sheet-md-text-align:                            start !default;
 
diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss
index 264048221c..ba10a5d9e5 100644
--- a/packages/core/src/components/action-sheet/action-sheet.scss
+++ b/packages/core/src/components/action-sheet/action-sheet.scss
@@ -31,6 +31,8 @@ ion-action-sheet {
 
 .action-sheet-button {
   width: $action-sheet-width;
+
+  border: 0;
 }
 
 .action-sheet-container {
diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss
index 996e11ee74..5b1b504606 100644
--- a/packages/core/src/components/alert/alert.ios.scss
+++ b/packages/core/src/components/alert/alert.ios.scss
@@ -4,6 +4,10 @@
 // iOS Alert
 // --------------------------------------------------
 
+.alert-ios {
+  font-family: $alert-ios-font-family;
+}
+
 .alert-ios .alert-wrapper {
   @include border-radius($alert-ios-border-radius);
 
diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss
index a6c84dfc45..4a3ce0e579 100644
--- a/packages/core/src/components/alert/alert.ios.vars.scss
+++ b/packages/core/src/components/alert/alert.ios.vars.scss
@@ -5,6 +5,9 @@
 // iOS Alert
 // --------------------------------------------------
 
+/// @prop - Font family of the alert
+$alert-ios-font-family:                         $font-family-ios-base !default;
+
 /// @prop - Max width of the alert
 $alert-ios-max-width:                           270px !default;
 
diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss
index 573f2c2e0a..11b38a2668 100644
--- a/packages/core/src/components/alert/alert.md.scss
+++ b/packages/core/src/components/alert/alert.md.scss
@@ -4,6 +4,10 @@
 // Material Design Alert
 // --------------------------------------------------
 
+.alert-md {
+  font-family: $alert-md-font-family;
+}
+
 .alert-md .alert-wrapper {
   @include border-radius($alert-md-border-radius);
 
@@ -230,6 +234,8 @@
 .alert-md .alert-button-group {
   @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
 
+  box-sizing: border-box;
+
   flex-wrap: $alert-md-button-group-flex-wrap;
   justify-content: $alert-md-button-group-justify-content;
 }
diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss
index db7817a164..f004133626 100644
--- a/packages/core/src/components/alert/alert.md.vars.scss
+++ b/packages/core/src/components/alert/alert.md.vars.scss
@@ -5,6 +5,9 @@
 // Material Design Alert
 // --------------------------------------------------
 
+/// @prop - Font family of the alert
+$alert-md-font-family:                        $font-family-md-base !default;
+
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
 
diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss
index b71c57e9ec..10a6ff8eed 100644
--- a/packages/core/src/components/alert/alert.scss
+++ b/packages/core/src/components/alert/alert.scss
@@ -87,6 +87,8 @@ ion-alert input {
   z-index: 0;
   display: block;
 
+  border: 0;
+
   font-size: $alert-button-font-size;
   line-height: $alert-button-line-height;
 }
diff --git a/packages/core/src/components/badge/badge.ios.scss b/packages/core/src/components/badge/badge.ios.scss
index 650bb7c1ef..7251333256 100644
--- a/packages/core/src/components/badge/badge.ios.scss
+++ b/packages/core/src/components/badge/badge.ios.scss
@@ -7,6 +7,8 @@
 .badge-ios {
   @include border-radius($badge-ios-border-radius);
 
+  font-family: $badge-ios-font-family;
+
   color: $badge-ios-text-color;
   background-color: $badge-ios-background-color;
 }
diff --git a/packages/core/src/components/badge/badge.ios.vars.scss b/packages/core/src/components/badge/badge.ios.vars.scss
index 8df2642f3c..9d466436e3 100644
--- a/packages/core/src/components/badge/badge.ios.vars.scss
+++ b/packages/core/src/components/badge/badge.ios.vars.scss
@@ -6,6 +6,9 @@
 /// @prop - Border radius of the badge
 $badge-ios-border-radius:      10px !default;
 
+/// @prop - Font family of the badge
+$badge-ios-font-family:        $font-family-ios-base !default;
+
 /// @prop - Background color of the badge
 $badge-ios-background-color:   color($colors-ios, primary) !default;
 
diff --git a/packages/core/src/components/badge/badge.md.scss b/packages/core/src/components/badge/badge.md.scss
index 6d3ac9335e..c1bf337376 100644
--- a/packages/core/src/components/badge/badge.md.scss
+++ b/packages/core/src/components/badge/badge.md.scss
@@ -7,6 +7,8 @@
 .badge-md {
   @include border-radius($badge-md-border-radius);
 
+  font-family: $badge-md-font-family;
+
   color: $badge-md-text-color;
   background-color: $badge-md-background-color;
 }
diff --git a/packages/core/src/components/badge/badge.md.vars.scss b/packages/core/src/components/badge/badge.md.vars.scss
index 4aa7c99f94..6f1fea6732 100644
--- a/packages/core/src/components/badge/badge.md.vars.scss
+++ b/packages/core/src/components/badge/badge.md.vars.scss
@@ -6,6 +6,9 @@
 /// @prop - Border radius of the badge
 $badge-md-border-radius:            4px !default;
 
+/// @prop - Font family of the badge
+$badge-md-font-family:              $font-family-md-base !default;
+
 /// @prop - Background color of the badge
 $badge-md-background-color:         color($colors-md, primary) !default;
 
diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
index 11cf7a9919..71d2c3590b 100644
--- a/packages/core/src/components/badge/badge.scss
+++ b/packages/core/src/components/badge/badge.scss
@@ -19,6 +19,9 @@ ion-badge {
   white-space: nowrap;
   vertical-align: baseline;
 
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+
   contain: content;
 }
 
diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss
index 9bfda01e69..74333a0f26 100644
--- a/packages/core/src/components/button/button.ios.scss
+++ b/packages/core/src/components/button/button.ios.scss
@@ -14,6 +14,7 @@
 
   height: $button-ios-height;
 
+  font-family: $button-ios-font-family;
   font-size: $button-ios-font-size;
 
   color: $button-ios-text-color;
@@ -131,7 +132,7 @@
 // --------------------------------------------------
 
 @mixin ios-button-outline($color-name, $color-base, $color-contrast) {
-  $bg-color-focused: rgba($color-base, 0.12);
+  $bg-color-focused: rgba($color-base, .12);
 
   .button-outline-ios-#{$color-name} {
     border-color: $color-base;
@@ -184,7 +185,7 @@
 
 @mixin ios-button-clear($color-name, $color-base, $color-contrast) {
   $fg-color: $color-base;
-  $bg-color-focused: rgba($color-base, 0.12);
+  $bg-color-focused: rgba($color-base, .12);
 
   .button-clear-ios-#{$color-name} {
     border-color: $button-ios-clear-border-color;
diff --git a/packages/core/src/components/button/button.ios.vars.scss b/packages/core/src/components/button/button.ios.vars.scss
index 491085810f..a21bef75db 100644
--- a/packages/core/src/components/button/button.ios.vars.scss
+++ b/packages/core/src/components/button/button.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Button
 // --------------------------------------------------
 
+/// @prop - Font family of the button
+$button-ios-font-family:                            $font-family-ios-base !default;
+
 /// @prop - Margin top of the button
 $button-ios-margin-top:                             4px !default;
 
@@ -133,7 +136,7 @@ $button-ios-outline-background-color-activated:     $button-ios-background-color
 $button-ios-outline-opacity-activated:              1 !default;
 
 /// @prop - Background color of the focused outline button
-$button-ios-outline-background-color-focused:       rgba($button-ios-background-color, 0.12) !default;
+$button-ios-outline-background-color-focused:       rgba($button-ios-background-color, .12) !default;
 
 
 // iOS Clear Button
@@ -158,7 +161,7 @@ $button-ios-clear-text-color-hover:                 $button-ios-background-color
 $button-ios-clear-opacity-hover:                    .6 !default;
 
 /// @prop - Background color of the focused clear button
-$button-ios-clear-background-color-focused:         rgba($button-ios-background-color, 0.12) !default;
+$button-ios-clear-background-color-focused:         rgba($button-ios-background-color, .12) !default;
 
 
 // iOS Round Button
diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss
index 96791ae585..df872d0988 100644
--- a/packages/core/src/components/button/button.md.scss
+++ b/packages/core/src/components/button/button.md.scss
@@ -15,6 +15,7 @@
 
   height: $button-md-height;
 
+  font-family: $button-md-font-family;
   font-size: $button-md-font-size;
   font-weight: $button-md-font-weight;
 
@@ -156,7 +157,7 @@
 
 @mixin md-button-outline($color-name, $color-base, $color-contrast) {
   $fg-color: color-shade($color-base, 5%);
-  $bg-color-focused: rgba($color-base, 0.12);
+  $bg-color-focused: rgba($color-base, .12);
 
   .button-outline-md-#{$color-name} {
     border-color: $fg-color;
@@ -216,7 +217,7 @@
 
 @mixin md-button-clear($color-name, $color-base, $color-contrast) {
   $fg-color: $color-base;
-  $bg-color-focused: rgba($color-base, 0.12);
+  $bg-color-focused: rgba($color-base, .12);
 
   .button-clear-md-#{$color-name} {
     border-color: $button-md-clear-border-color;
diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss
index b33eb1a086..223a87df28 100644
--- a/packages/core/src/components/button/button.md.vars.scss
+++ b/packages/core/src/components/button/button.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Button
 // --------------------------------------------------
 
+/// @prop - Font family of the button
+$button-md-font-family:                    $font-family-md-base !default;
+
 /// @prop - Margin top of the button
 $button-md-margin-top:                     4px !default;
 
@@ -160,7 +163,7 @@ $button-md-outline-opacity-activated:           1 !default;
 $button-md-outline-ripple-background-color:     $button-md-background-color !default;
 
 /// @prop - Background color of the focused outline button
-$button-md-outline-background-color-focused:    rgba($button-md-background-color, 0.12) !default;
+$button-md-outline-background-color-focused:    rgba($button-md-background-color, .12) !default;
 
 
 // Material Design Clear Button
@@ -194,7 +197,7 @@ $button-md-clear-background-color-hover:        rgba(158, 158, 158, .1) !default
 $button-md-clear-ripple-background-color:       #999 !default;
 
 /// @props - Background color of the focused clear button
-$button-md-clear-background-color-focused:      rgba($button-md-background-color, 0.12) !default;
+$button-md-clear-background-color-focused:      rgba($button-md-background-color, .12) !default;
 
 
 // Material Design Round Button
diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
index 108dcc05c6..bc7b60c61f 100644
--- a/packages/core/src/components/button/button.scss
+++ b/packages/core/src/components/button/button.scss
@@ -30,6 +30,9 @@
   user-select: none;
 
   contain: content;
+
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
 }
 
 .button:active,
diff --git a/packages/core/src/components/card/card.ios.scss b/packages/core/src/components/card/card.ios.scss
index 82096c24f5..91d25dc222 100755
--- a/packages/core/src/components/card/card.ios.scss
+++ b/packages/core/src/components/card/card.ios.scss
@@ -10,6 +10,8 @@
 
   width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
 
+  font-family: $card-ios-font-family;
+
   font-size: $card-ios-font-size;
 
   background: $card-ios-background-color;
diff --git a/packages/core/src/components/card/card.ios.vars.scss b/packages/core/src/components/card/card.ios.vars.scss
index feece5e704..863f2a6672 100755
--- a/packages/core/src/components/card/card.ios.vars.scss
+++ b/packages/core/src/components/card/card.ios.vars.scss
@@ -27,6 +27,9 @@ $card-ios-box-shadow:                  0 16px 42px $card-ios-box-shadow-color !d
 /// @prop - Border radius of the card
 $card-ios-border-radius:               14px !default;
 
+/// @prop - Font family of the card
+$card-ios-font-family:                 $font-family-ios-base !default;
+
 /// @prop - Font size of the card
 $card-ios-font-size:                   14px !default;
 
diff --git a/packages/core/src/components/card/card.md.scss b/packages/core/src/components/card/card.md.scss
index efa8d11851..935265dc25 100755
--- a/packages/core/src/components/card/card.md.scss
+++ b/packages/core/src/components/card/card.md.scss
@@ -10,6 +10,8 @@
 
   width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
 
+  font-family: $card-md-font-family;
+
   font-size: $card-md-font-size;
 
   background: $card-md-background-color;
diff --git a/packages/core/src/components/card/card.md.vars.scss b/packages/core/src/components/card/card.md.vars.scss
index ec95348dc8..d466556549 100755
--- a/packages/core/src/components/card/card.md.vars.scss
+++ b/packages/core/src/components/card/card.md.vars.scss
@@ -27,6 +27,9 @@ $card-md-border-radius:               2px !default;
 /// @prop - Font size of the card
 $card-md-font-size:                   14px !default;
 
+/// @prop - Font family of the card
+$card-md-font-family:                 $font-family-md-base !default;
+
 /// @prop - Line height of the card
 $card-md-line-height:                 1.5 !default;
 
diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss
index 6f5d6a2a84..f8141c98d2 100644
--- a/packages/core/src/components/chip/chip.ios.scss
+++ b/packages/core/src/components/chip/chip.ios.scss
@@ -11,6 +11,8 @@
 
   height: $chip-ios-height;
 
+  font-family: $chip-ios-font-family;
+
   font-size: $chip-ios-font-size;
   line-height: $chip-ios-height;
   color: $chip-ios-text-color;
diff --git a/packages/core/src/components/chip/chip.ios.vars.scss b/packages/core/src/components/chip/chip.ios.vars.scss
index 77e0ce979d..388c1afba6 100644
--- a/packages/core/src/components/chip/chip.ios.vars.scss
+++ b/packages/core/src/components/chip/chip.ios.vars.scss
@@ -21,6 +21,9 @@ $chip-ios-height:                           32px !default;
 /// @prop - Border radius of the chip
 $chip-ios-border-radius:                    16px !default;
 
+/// @prop - Font family of the chip
+$chip-ios-font-family:                      $font-family-ios-base !default;
+
 /// @prop - Font size of the chip
 $chip-ios-font-size:                        13px !default;
 
diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss
index 91f156017d..f0ed260f81 100644
--- a/packages/core/src/components/chip/chip.md.scss
+++ b/packages/core/src/components/chip/chip.md.scss
@@ -11,6 +11,8 @@
 
   height: $chip-md-height;
 
+  font-family: $chip-md-font-family;
+
   font-size: $chip-md-font-size;
   line-height: $chip-md-height;
   color: $chip-md-text-color;
diff --git a/packages/core/src/components/chip/chip.md.vars.scss b/packages/core/src/components/chip/chip.md.vars.scss
index 9d036b44ae..07199b00ed 100644
--- a/packages/core/src/components/chip/chip.md.vars.scss
+++ b/packages/core/src/components/chip/chip.md.vars.scss
@@ -21,6 +21,9 @@ $chip-md-height:                           32px !default;
 /// @prop - Border radius of the chip
 $chip-md-border-radius:                    16px !default;
 
+/// @prop - Font family of the chip
+$chip-md-font-family:                      $font-family-md-base !default;
+
 /// @prop - Font size of the chip
 $chip-md-font-size:                        13px !default;
 
diff --git a/packages/core/src/components/content/content.ios.scss b/packages/core/src/components/content/content.ios.scss
index 5856acd66e..72235739be 100644
--- a/packages/core/src/components/content/content.ios.scss
+++ b/packages/core/src/components/content/content.ios.scss
@@ -5,6 +5,8 @@
 // --------------------------------------------------
 
 .content-ios {
+  font-family: $content-ios-font-family;
+
   color: $text-ios-color;
   background-color: $background-ios-color;
 }
diff --git a/packages/core/src/components/content/content.ios.vars.scss b/packages/core/src/components/content/content.ios.vars.scss
index c0aa2f9854..38e29c2a94 100644
--- a/packages/core/src/components/content/content.ios.vars.scss
+++ b/packages/core/src/components/content/content.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Content
 // --------------------------------------------------
 
+/// @prop - Font family of the content
+$content-ios-font-family:               $font-family-ios-base !default;
+
 /// @prop - Background color of the outer content
 $content-ios-outer-background:          #efeff4 !default;
 
diff --git a/packages/core/src/components/content/content.md.scss b/packages/core/src/components/content/content.md.scss
index f524b08e0a..1b9b208fef 100644
--- a/packages/core/src/components/content/content.md.scss
+++ b/packages/core/src/components/content/content.md.scss
@@ -5,6 +5,8 @@
 // --------------------------------------------------
 
 .content-md {
+  font-family: $content-md-font-family;
+
   color: $text-md-color;
   background-color: $background-md-color;
 }
diff --git a/packages/core/src/components/content/content.md.vars.scss b/packages/core/src/components/content/content.md.vars.scss
index b928a3583d..2c94d16fc8 100644
--- a/packages/core/src/components/content/content.md.vars.scss
+++ b/packages/core/src/components/content/content.md.vars.scss
@@ -2,3 +2,6 @@
 
 // Material Design Content
 // --------------------------------------------------
+
+/// @prop - Font family of the content
+$content-md-font-family:               $font-family-md-base !default;
diff --git a/packages/core/src/components/datetime/datetime.ios.scss b/packages/core/src/components/datetime/datetime.ios.scss
index fe2728aa73..df08c0e376 100644
--- a/packages/core/src/components/datetime/datetime.ios.scss
+++ b/packages/core/src/components/datetime/datetime.ios.scss
@@ -6,6 +6,8 @@
 
 .datetime-ios {
   @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start);
+
+  font-family: $datetime-ios-font-family;
 }
 
 .datetime-ios .datetime-placeholder {
diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss
index 93f21cec30..3de0449451 100644
--- a/packages/core/src/components/datetime/datetime.ios.vars.scss
+++ b/packages/core/src/components/datetime/datetime.ios.vars.scss
@@ -17,5 +17,8 @@ $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
 /// @prop - Padding start of the datetime
 $datetime-ios-padding-start:       $item-ios-padding-start !default;
 
+/// @prop - Font family of the datetime
+$datetime-ios-font-family:         $font-family-ios-base !default;
+
 /// @prop - Color of the datetime placeholder
 $datetime-ios-placeholder-color:   #999 !default;
diff --git a/packages/core/src/components/datetime/datetime.md.scss b/packages/core/src/components/datetime/datetime.md.scss
index 284aa02a86..8956736b1e 100644
--- a/packages/core/src/components/datetime/datetime.md.scss
+++ b/packages/core/src/components/datetime/datetime.md.scss
@@ -6,6 +6,8 @@
 
 .datetime-md {
   @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start);
+
+  font-family: $datetime-md-font-family;
 }
 
 .datetime-md .datetime-placeholder {
diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss
index 5716392e2d..1e1a5c4421 100644
--- a/packages/core/src/components/datetime/datetime.md.vars.scss
+++ b/packages/core/src/components/datetime/datetime.md.vars.scss
@@ -17,5 +17,8 @@ $datetime-md-padding-bottom:      $item-md-padding-bottom !default;
 /// @prop - Padding start of the datetime
 $datetime-md-padding-start:       $item-md-padding-start !default;
 
+/// @prop - Font family of the datetime
+$datetime-md-font-family:         $font-family-md-base !default;
+
 /// @prop - Color of the datetime placeholder
 $datetime-md-placeholder-color:   #999 !default;
diff --git a/packages/core/src/components/datetime/datetime.scss b/packages/core/src/components/datetime/datetime.scss
index b1e2e9f0ae..49fd3c9571 100644
--- a/packages/core/src/components/datetime/datetime.scss
+++ b/packages/core/src/components/datetime/datetime.scss
@@ -4,10 +4,26 @@
 // --------------------------------------------------
 
 ion-datetime {
+  position: relative;
+
   display: flex;
   overflow: hidden;
 }
 
+.datetime-cover {
+  @include position(0, null, null, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+
+  background: transparent;
+  cursor: pointer;
+}
+
 .datetime-text {
   overflow: hidden;
 
@@ -35,3 +51,7 @@ ion-datetime {
 
   width: 100%;
 }
+
+.item .datetime {
+  position: static;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx
index fcf26b1b05..c7012c4790 100644
--- a/packages/core/src/components/datetime/datetime.tsx
+++ b/packages/core/src/components/datetime/datetime.tsx
@@ -596,7 +596,7 @@ export class Datetime {
         aria-labelledby={this.labelId}
         aria-disabled={this.disabled ? 'true' : false}
         onClick={this.open.bind(this)}
-        class='item-cover'>
+        class='datetime-cover'>
       </button>
     ];
   }
diff --git a/packages/core/src/components/grid/grid.ios.scss b/packages/core/src/components/grid/grid.ios.scss
new file mode 100644
index 0000000000..dbcd5823f4
--- /dev/null
+++ b/packages/core/src/components/grid/grid.ios.scss
@@ -0,0 +1,9 @@
+@import "./grid";
+@import "./grid.ios.vars";
+
+// iOS Grid
+// --------------------------------------------------
+
+.grid-ios {
+  font-family: $grid-ios-font-family;
+}
diff --git a/packages/core/src/components/grid/grid.ios.vars.scss b/packages/core/src/components/grid/grid.ios.vars.scss
new file mode 100644
index 0000000000..d124b9b521
--- /dev/null
+++ b/packages/core/src/components/grid/grid.ios.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Grid
+// --------------------------------------------------
+
+/// @prop - Font family of the grid
+$grid-ios-font-family:        $font-family-ios-base !default;
diff --git a/packages/core/src/components/grid/grid.md.scss b/packages/core/src/components/grid/grid.md.scss
new file mode 100644
index 0000000000..9a88c0d6b2
--- /dev/null
+++ b/packages/core/src/components/grid/grid.md.scss
@@ -0,0 +1,9 @@
+@import "./grid";
+@import "./grid.md.vars";
+
+// Material Design Grid
+// --------------------------------------------------
+
+.grid-md {
+  font-family: $grid-md-font-family;
+}
diff --git a/packages/core/src/components/grid/grid.md.vars.scss b/packages/core/src/components/grid/grid.md.vars.scss
new file mode 100644
index 0000000000..7cb06fc308
--- /dev/null
+++ b/packages/core/src/components/grid/grid.md.vars.scss
@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Grid
+// --------------------------------------------------
+
+/// @prop - Font family of the grid
+$grid-md-font-family:        $font-family-md-base !default;
diff --git a/packages/core/src/components/grid/grid.tsx b/packages/core/src/components/grid/grid.tsx
index 67b0f1155d..cb23e1daaf 100644
--- a/packages/core/src/components/grid/grid.tsx
+++ b/packages/core/src/components/grid/grid.tsx
@@ -3,6 +3,12 @@ import { Component } from '@stencil/core';
 
 @Component({
   tag: 'ion-grid',
-  styleUrl: 'grid.scss'
+  styleUrls: {
+    ios: 'grid.ios.scss',
+    md: 'grid.md.scss'
+  },
+  host: {
+    theme: 'grid'
+  }
 })
 export class Grid {}
diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss
index 64029157b6..5220ded5f5 100644
--- a/packages/core/src/components/input/input.ios.scss
+++ b/packages/core/src/components/input/input.ios.scss
@@ -4,11 +4,14 @@
 // iOS Input
 // --------------------------------------------------
 
-.text-input-ios {
+.native-input-ios {
   @include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start);
   @include padding(0);
 
   width: calc(100% - #{($input-ios-margin-end + $input-ios-margin-start)});
+
+  font-family: $input-ios-font-family;
+  font-size: $input-ios-font-size;
 }
 
 
@@ -85,8 +88,8 @@
 // iOS Stacked & Floating Inputs
 // --------------------------------------------------
 
-.item-ios.item-label-stacked .text-input,
-.item-ios.item-label-floating .text-input {
+.item-ios.item-label-stacked .native-input,
+.item-ios.item-label-floating .native-input {
   @include margin(8px, null, 8px, 0);
 
   width: calc(100% - #{$input-ios-margin-end});
@@ -101,8 +104,7 @@
 // iOS Input After Label
 // --------------------------------------------------
 
-.label-ios + ion-input .text-input,
-.label-ios + ion-textarea .text-input,
+.label-ios + ion-input .native-input,
 .label-ios + .input + .cloned-input {
   @include margin-horizontal($input-ios-by-label-margin-start, null);
 }
@@ -114,11 +116,11 @@
   position: relative;
 }
 
-.input-ios[clear-input] .text-input {
+.input-ios[clear-input] .native-input {
   @include padding-horizontal(null, $input-ios-input-clear-padding-end);
 }
 
-.input-ios .text-input-clear-icon {
+.input-ios .input-clear-icon {
   @include position-horizontal(null, 0);
   @include svg-background-image($input-ios-input-clear-icon-svg);
 
diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss
index e98a26e63b..e3bd289d6e 100644
--- a/packages/core/src/components/input/input.ios.vars.scss
+++ b/packages/core/src/components/input/input.ios.vars.scss
@@ -5,6 +5,12 @@
 // iOS Input
 // --------------------------------------------------
 
+/// @prop - Font family of the input
+$input-ios-font-family:                   $font-family-ios-base !default;
+
+/// @prop - Font size of the input
+$input-ios-font-size:                     inherit !default;
+
 /// @prop - Margin top of the input
 $input-ios-margin-top:                    $item-ios-padding-top !default;
 
diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss
index f4f8e6899c..278086703a 100644
--- a/packages/core/src/components/input/input.md.scss
+++ b/packages/core/src/components/input/input.md.scss
@@ -4,11 +4,14 @@
 // Material Design Input
 // --------------------------------------------------
 
-.text-input-md {
+.native-input-md {
   @include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start);
   @include padding(0);
 
   width: calc(100% - #{$input-md-margin-end} - #{$input-md-margin-start});
+
+  font-family: $input-md-font-family;
+  font-size: $input-md-font-size;
 }
 
 
@@ -86,8 +89,8 @@
 // Material Design Stacked & Floating Inputs
 // --------------------------------------------------
 
-.item-label-stacked .text-input-md,
-.item-label-floating .text-input-md {
+.item-label-stacked .native-input-md,
+.item-label-floating .native-input-md {
   @include margin(8px, null, 8px, 0);
 
   width: calc(100% - #{$input-md-margin-end});
@@ -101,11 +104,11 @@
   position: relative;
 }
 
-.input-md[clear-input] .text-input {
+.input-md[clear-input] .native-input {
   @include padding-horizontal(null, $input-md-input-clear-icon-width);
 }
 
-.input-md .text-input-clear-icon {
+.input-md .native-input-clear-icon {
   @include position-horizontal(null, 0);
   @include svg-background-image($input-md-input-clear-icon-svg);
 
diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss
index 1a85f10255..47841d417e 100644
--- a/packages/core/src/components/input/input.md.vars.scss
+++ b/packages/core/src/components/input/input.md.vars.scss
@@ -5,6 +5,12 @@
 // Material Design Input
 // --------------------------------------------------
 
+/// @prop - Font family of the input
+$input-md-font-family:                    $font-family-md-base !default;
+
+/// @prop - Font size of the input
+$input-md-font-size:                      inherit !default;
+
 /// @prop - Margin top of the input
 $input-md-margin-top:                     $item-md-padding-top !default;
 
diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss
index ec2a186636..6d610dc1c0 100644
--- a/packages/core/src/components/input/input.scss
+++ b/packages/core/src/components/input/input.scss
@@ -3,8 +3,7 @@
 // Input
 // --------------------------------------------------
 
-ion-input,
-ion-textarea {
+ion-input {
   position: relative;
   display: block;
 
@@ -13,24 +12,18 @@ ion-textarea {
   width: 100%;
 }
 
-.item-input ion-input,
-.item-input ion-textarea {
-  position: static;
-}
-
-
-// Textarea Within An Item
+// Input Within An Item
 // --------------------------------------------------
 
-.item.item-textarea {
-  align-items: stretch;
+.item-input ion-input {
+  position: static;
 }
 
 
 // Native Text Input
 // --------------------------------------------------
 
-.text-input {
+.native-input {
   @include placeholder($input-placeholder-color);
   @include appearance(none);
   @include border-radius(0);
@@ -47,22 +40,14 @@ ion-textarea {
   background: transparent;
 }
 
-textarea.text-input {
-  display: block;
-}
-
-.text-input[disabled] {
+.native-input[disabled] {
   opacity: .4;
 }
 
-input.text-input:-webkit-autofill {
+input.native-input:-webkit-autofill {
   background-color: transparent;
 }
 
-.platform-mobile textarea.text-input {
-  resize: none;
-}
-
 
 // Input Cover: Unfocused
 // --------------------------------------------------
@@ -100,7 +85,6 @@ input.text-input:-webkit-autofill {
 }
 
 .item-input-has-focus input,
-.item-input-has-focus textarea,
 .item-input-has-focus a,
 .item-input-has-focus button {
   pointer-events: auto;
@@ -131,7 +115,7 @@ input.text-input:-webkit-autofill {
 // Clear Input Icon
 // --------------------------------------------------
 
-.text-input-clear-icon {
+.input-clear-icon {
   @include margin(0);
   @include padding(0);
   @include background-position(center);
@@ -145,6 +129,6 @@ input.text-input:-webkit-autofill {
   background-repeat: no-repeat;
 }
 
-.item-input-has-focus.item-input-has-value .text-input-clear-icon {
+.item-input-has-focus.item-input-has-value .input-clear-icon {
   display: block;
 }
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index c4cb705d1e..3731daa06e 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -300,7 +300,7 @@ export class Input implements InputComponent {
   }
 
   render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
+    const themedClasses = createThemedClasses(this.mode, this.color, 'native-input');
     // TODO aria-labelledby={this.item.labelId}
 
     return [
@@ -338,7 +338,7 @@ export class Input implements InputComponent {
       />,
       <button
         hidden={this.clearInput !== true}
-        class='text-input-clear-icon'
+        class='input-clear-icon'
         onClick={this.clearTextInput.bind(this)}
         onMouseDown={this.clearTextInput.bind(this)}>
       </button>
diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss
index 275038a948..a1692e94ac 100644
--- a/packages/core/src/components/item/item.ios.scss
+++ b/packages/core/src/components/item/item.ios.scss
@@ -11,7 +11,9 @@
 
   position: relative;
 
-  font-size: $item-ios-body-text-font-size;
+  font-family: $item-ios-font-family;
+
+  font-size: $item-ios-font-size;
   color: $list-ios-text-color;
   background-color: $list-ios-background-color;
   transition: background-color 200ms linear;
diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss
index 92940338a6..2ffd935087 100644
--- a/packages/core/src/components/item/item.ios.vars.scss
+++ b/packages/core/src/components/item/item.ios.vars.scss
@@ -3,8 +3,11 @@
 // iOS Item
 // --------------------------------------------------
 
-/// @prop - Font size of the item text
-$item-ios-body-text-font-size:            17px !default;
+/// @prop - Font family of the item
+$item-ios-font-family:                    $font-family-ios-base !default;
+
+/// @prop - Font size of the item
+$item-ios-font-size:                      17px !default;
 
 /// @prop - Margin top of the item paragraph
 $item-ios-paragraph-margin-top:           0 !default;
diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss
index cdb113bb6a..dd90c543d1 100644
--- a/packages/core/src/components/item/item.md.scss
+++ b/packages/core/src/components/item/item.md.scss
@@ -9,6 +9,7 @@
 
   position: relative;
 
+  font-family: $item-md-font-family;
   font-size: $item-md-font-size;
   font-weight: normal;
   text-transform: none;
diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss
index 7cb4918530..4ef284f05e 100644
--- a/packages/core/src/components/item/item.md.vars.scss
+++ b/packages/core/src/components/item/item.md.vars.scss
@@ -3,15 +3,12 @@
 // Material Design Item
 // --------------------------------------------------
 
-/// @prop - Font size of the item text
-$item-md-body-text-font-size:        14px !default;
-
-/// @prop - line height of the item text
-$item-md-body-text-line-height:      1.5 !default;
-
 /// @prop - Color of the item paragraph
 $item-md-paragraph-text-color:       #666 !default;
 
+/// @prop - Font family of the item
+$item-md-font-family:                $font-family-md-base !default;
+
 /// @prop - Font size of the item
 $item-md-font-size:                  16px !default;
 
diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss
index d7d532f878..6a8999bf47 100644
--- a/packages/core/src/components/label/label.ios.scss
+++ b/packages/core/src/components/label/label.ios.scss
@@ -6,6 +6,8 @@
 
 .label-ios {
   @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
+
+  font-family: $label-ios-font-family;
 }
 
 
diff --git a/packages/core/src/components/label/label.ios.vars.scss b/packages/core/src/components/label/label.ios.vars.scss
index 511a2af314..74fdee0c19 100644
--- a/packages/core/src/components/label/label.ios.vars.scss
+++ b/packages/core/src/components/label/label.ios.vars.scss
@@ -5,6 +5,9 @@
 // iOS Label
 // --------------------------------------------------
 
+/// @prop - Font family of the label
+$label-ios-font-family:                $font-family-ios-base !default;
+
 /// @prop - Text color of the label by an input, select, or datetime
 $label-ios-text-color:                 null !default;
 
diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss
index 6a0d2257d7..b4386f4256 100644
--- a/packages/core/src/components/label/label.md.scss
+++ b/packages/core/src/components/label/label.md.scss
@@ -6,6 +6,8 @@
 
 .label-md {
   @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
+
+  font-family: $label-md-font-family;
 }
 
 [text-wrap] .label-md {
diff --git a/packages/core/src/components/label/label.md.vars.scss b/packages/core/src/components/label/label.md.vars.scss
index 79a84b678d..1f342d3f97 100644
--- a/packages/core/src/components/label/label.md.vars.scss
+++ b/packages/core/src/components/label/label.md.vars.scss
@@ -5,6 +5,9 @@
 // Material Design Label
 // --------------------------------------------------
 
+/// @prop - Font family of the label
+$label-md-font-family:                $font-family-md-base !default;
+
 /// @prop - Text color of the label by an input, select, or datetime
 $label-md-text-color:                 #999 !default;
 
@@ -24,7 +27,7 @@ $label-md-margin-bottom:              $item-md-padding-bottom !default;
 $label-md-margin-start:               0 !default;
 
 /// @prop - Font size of the label when the text wraps
-$label-md-text-wrap-font-size:        $item-md-body-text-font-size !default;
+$label-md-text-wrap-font-size:        14px !default;
 
 /// @prop - Line height of the label when the text wraps
-$label-md-text-wrap-line-height:      $item-md-body-text-line-height !default;
+$label-md-text-wrap-line-height:      1.5 !default;
diff --git a/packages/core/src/components/picker/picker.ios.scss b/packages/core/src/components/picker/picker.ios.scss
index 22533fc8ee..709ff2a719 100644
--- a/packages/core/src/components/picker/picker.ios.scss
+++ b/packages/core/src/components/picker/picker.ios.scss
@@ -4,6 +4,10 @@
 // iOS Picker
 // --------------------------------------------------
 
+.picker-ios {
+  font-family: $picker-ios-font-family;
+}
+
 .picker-ios .picker-wrapper {
   height: $picker-ios-height;
 
diff --git a/packages/core/src/components/picker/picker.ios.vars.scss b/packages/core/src/components/picker/picker.ios.vars.scss
index f2074fff2e..13df274593 100644
--- a/packages/core/src/components/picker/picker.ios.vars.scss
+++ b/packages/core/src/components/picker/picker.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Picker
 // --------------------------------------------------
 
+/// @prop - Font family of the picker
+$picker-ios-font-family:                       $font-family-ios-base !default;
+
 /// @prop - Height of the picker wrapper
 $picker-ios-height:                            260px !default;
 
diff --git a/packages/core/src/components/picker/picker.md.scss b/packages/core/src/components/picker/picker.md.scss
index 80e2082f98..142c0ad285 100644
--- a/packages/core/src/components/picker/picker.md.scss
+++ b/packages/core/src/components/picker/picker.md.scss
@@ -4,6 +4,10 @@
 // Material Design Picker
 // --------------------------------------------------
 
+.picker-md {
+  font-family: $picker-md-font-family;
+}
+
 .picker-md .picker-wrapper {
   height: $picker-md-height;
 
diff --git a/packages/core/src/components/picker/picker.md.vars.scss b/packages/core/src/components/picker/picker.md.vars.scss
index dec1b5ad8c..230db0e057 100644
--- a/packages/core/src/components/picker/picker.md.vars.scss
+++ b/packages/core/src/components/picker/picker.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Picker
 // --------------------------------------------------
 
+/// @prop - Font family of the picker
+$picker-md-font-family:                       $font-family-md-base !default;
+
 /// @prop - Height of the picker wrapper
 $picker-md-height:                            260px !default;
 
diff --git a/packages/core/src/components/picker/picker.scss b/packages/core/src/components/picker/picker.scss
index ef17727ac9..0f4076db57 100644
--- a/packages/core/src/components/picker/picker.scss
+++ b/packages/core/src/components/picker/picker.scss
@@ -14,6 +14,9 @@ ion-picker {
   height: $picker-width;
 
   contain: strict;
+
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
 }
 
 .picker-toolbar {
@@ -121,6 +124,8 @@ ion-picker {
 
   width: 100%;
 
+  border: 0;
+
   text-overflow: ellipsis;
   white-space: nowrap;
 
@@ -162,3 +167,8 @@ ion-picker {
 
   pointer-events: none;
 }
+
+.picker-button {
+  border: 0;
+  font-family: inherit;
+}
diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss
index a3a56c7261..67dba4c0cf 100644
--- a/packages/core/src/components/radio/radio.scss
+++ b/packages/core/src/components/radio/radio.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-radio {
+  box-sizing: border-box;
+
   position: relative;
   display: inline-block;
 }
@@ -23,3 +25,7 @@ ion-radio input {
   -moz-appearance: none;
   appearance: none;
 }
+
+ion-radio .radio-icon {
+  box-sizing: border-box;
+}
diff --git a/packages/core/src/components/range/range.ios.scss b/packages/core/src/components/range/range.ios.scss
index ed62b4eb64..776a11b013 100644
--- a/packages/core/src/components/range/range.ios.scss
+++ b/packages/core/src/components/range/range.ios.scss
@@ -1,3 +1,4 @@
+@import "./range";
 @import "./range.ios.vars";
 
 // iOS Range
@@ -5,6 +6,8 @@
 
 .range-ios {
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
+
+  font-family: $range-ios-font-family;
 }
 
 .range-ios [range-left] {
diff --git a/packages/core/src/components/range/range.ios.vars.scss b/packages/core/src/components/range/range.ios.vars.scss
index 8b0eec86e2..ccd1a6522e 100644
--- a/packages/core/src/components/range/range.ios.vars.scss
+++ b/packages/core/src/components/range/range.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Range
 // --------------------------------------------------
 
+/// @prop - Padding top/bottom of the range
+$range-ios-font-family:                       $font-family-ios-base !default;
+
 /// @prop - Padding top/bottom of the range
 $range-ios-padding-vertical:                  8px !default;
 
diff --git a/packages/core/src/components/range/range.md.scss b/packages/core/src/components/range/range.md.scss
index 124930e606..0fcc27dcb4 100644
--- a/packages/core/src/components/range/range.md.scss
+++ b/packages/core/src/components/range/range.md.scss
@@ -6,6 +6,8 @@
 
 .range-md {
   @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
+
+  font-family: $range-md-font-family;
 }
 
 .range-md [slot="range-start"] {
diff --git a/packages/core/src/components/range/range.md.vars.scss b/packages/core/src/components/range/range.md.vars.scss
index 5b8493458c..643741f3b2 100644
--- a/packages/core/src/components/range/range.md.vars.scss
+++ b/packages/core/src/components/range/range.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Range
 // --------------------------------------------------
 
+/// @prop - Font family of the range
+$range-md-font-family:                       $font-family-md-base !default;
+
 /// @prop - Padding top/bottom of the range
 $range-md-padding-vertical:                  8px !default;
 
diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss
index 98a75a4d28..8b363372ab 100644
--- a/packages/core/src/components/range/range.scss
+++ b/packages/core/src/components/range/range.scss
@@ -51,3 +51,7 @@ ion-range .range-slider {
 
   cursor: pointer;
 }
+
+.range-pin {
+  box-sizing: border-box;
+}
diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss
index 65c3f7266d..f11cc4aad5 100644
--- a/packages/core/src/components/searchbar/searchbar.ios.scss
+++ b/packages/core/src/components/searchbar/searchbar.ios.scss
@@ -8,6 +8,8 @@
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
   min-height: $searchbar-ios-min-height;
+
+  font-family: $searchbar-ios-font-family;
 }
 
 
diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss
index 06cd78ed20..34dbe3f303 100644
--- a/packages/core/src/components/searchbar/searchbar.ios.vars.scss
+++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss
@@ -15,6 +15,9 @@ $searchbar-ios-padding-bottom:            $searchbar-ios-padding-top !default;
 /// @prop - Padding start of the searchbar
 $searchbar-ios-padding-start:             $searchbar-ios-padding-end !default;
 
+/// @prop - Font family of the searchbar
+$searchbar-ios-font-family:               $font-family-ios-base !default;
+
 /// @prop - Minimum height of the searchbar
 $searchbar-ios-min-height:                44px !default;
 
diff --git a/packages/core/src/components/searchbar/searchbar.md.scss b/packages/core/src/components/searchbar/searchbar.md.scss
index 029937e257..50678b224c 100644
--- a/packages/core/src/components/searchbar/searchbar.md.scss
+++ b/packages/core/src/components/searchbar/searchbar.md.scss
@@ -7,7 +7,9 @@
 .searchbar-md {
   @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
 
-  background: $searchbar-md-background-color;
+  font-family: $searchbar-md-font-family;
+
+  background: $searchbar-md-background;
 }
 
 
diff --git a/packages/core/src/components/searchbar/searchbar.md.vars.scss b/packages/core/src/components/searchbar/searchbar.md.vars.scss
index 0e7bfc0a15..3537bdec70 100644
--- a/packages/core/src/components/searchbar/searchbar.md.vars.scss
+++ b/packages/core/src/components/searchbar/searchbar.md.vars.scss
@@ -15,8 +15,11 @@ $searchbar-md-padding-bottom:            $searchbar-md-padding-top !default;
 /// @prop - Padding start of the searchbar
 $searchbar-md-padding-start:             $searchbar-md-padding-end !default;
 
+/// @prop - Font family of the searchbar
+$searchbar-md-font-family:               $font-family-md-base !default;
+
 /// @prop - Background of the searchbar
-$searchbar-md-background-color:          inherit !default;
+$searchbar-md-background:                inherit !default;
 
 /// @prop - Color of the searchbar input search icon
 $searchbar-md-input-search-icon-color:   #5b5b5b !default;
diff --git a/packages/core/src/components/searchbar/searchbar.scss b/packages/core/src/components/searchbar/searchbar.scss
index 315b7d9512..295440245c 100644
--- a/packages/core/src/components/searchbar/searchbar.scss
+++ b/packages/core/src/components/searchbar/searchbar.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-searchbar {
+  box-sizing: border-box;
+
   position: relative;
   display: flex;
 
diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss
index 0f7884af27..84fa833455 100644
--- a/packages/core/src/components/segment/segment.ios.scss
+++ b/packages/core/src/components/segment/segment.ios.scss
@@ -4,6 +4,10 @@
 // iOS Segment
 // --------------------------------------------------
 
+.segment-ios {
+  font-family: $segment-ios-font-family;
+}
+
 .segment-ios ion-segment-button {
   display: flex;
 
diff --git a/packages/core/src/components/segment/segment.ios.vars.scss b/packages/core/src/components/segment/segment.ios.vars.scss
index cf15ed8618..8b52be94ea 100644
--- a/packages/core/src/components/segment/segment.ios.vars.scss
+++ b/packages/core/src/components/segment/segment.ios.vars.scss
@@ -3,6 +3,12 @@
 // iOS Segment
 // --------------------------------------------------
 
+/// @prop - Background of the segment button
+$segment-ios-font-family:                       $font-family-ios-base !default;
+
+// TODO either move to button or rename
+// ---------------------------------------------
+
 /// @prop - Background of the segment button
 $segment-button-ios-background-color:           transparent !default;
 
diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss
index 0dabae0797..90ae565fc4 100644
--- a/packages/core/src/components/segment/segment.md.scss
+++ b/packages/core/src/components/segment/segment.md.scss
@@ -4,6 +4,10 @@
 // Material Design Segment
 // --------------------------------------------------
 
+.segment-md {
+  font-family: $segment-md-font-family;
+}
+
 .segment-md ion-segment-button {
   display: flex;
 
diff --git a/packages/core/src/components/segment/segment.md.vars.scss b/packages/core/src/components/segment/segment.md.vars.scss
index bb8bf702f4..6b1d1a2326 100644
--- a/packages/core/src/components/segment/segment.md.vars.scss
+++ b/packages/core/src/components/segment/segment.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Segment
 // --------------------------------------------------
 
+/// @prop - Background of the segment button
+$segment-md-font-family:                       $font-family-md-base !default;
+
 /// @prop - Text color of the activated segment button
 $segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
 
diff --git a/packages/core/src/components/segment/segment.scss b/packages/core/src/components/segment/segment.scss
index a312f91422..2ef51ad4db 100644
--- a/packages/core/src/components/segment/segment.scss
+++ b/packages/core/src/components/segment/segment.scss
@@ -14,6 +14,7 @@ ion-segment {
 }
 
 .segment-button {
+  @include border-radius(0);
   @include margin-horizontal(0);
   @include text-align(center);
 
diff --git a/packages/core/src/components/select/select.ios.scss b/packages/core/src/components/select/select.ios.scss
index ced6dfccbb..e7501548ca 100644
--- a/packages/core/src/components/select/select.ios.scss
+++ b/packages/core/src/components/select/select.ios.scss
@@ -6,6 +6,8 @@
 
 .select-ios {
   @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
+
+  font-family: $select-ios-font-family;
 }
 
 .select-ios .select-placeholder {
@@ -43,4 +45,4 @@
 .item-label-stacked .select-ios,
 .item-label-floating .select-ios {
   @include padding(8px, null, 8px, 0);
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss
index e7090cee20..7629bfad9f 100644
--- a/packages/core/src/components/select/select.ios.vars.scss
+++ b/packages/core/src/components/select/select.ios.vars.scss
@@ -17,6 +17,9 @@ $select-ios-padding-bottom:      $item-ios-padding-bottom !default;
 /// @prop - Padding start of the select
 $select-ios-padding-start:       $item-ios-padding-start !default;
 
+/// @prop - Font family of the select
+$select-ios-font-family:         $font-family-ios-base !default;
+
 /// @prop - Color of the select icon
 $select-ios-icon-color:          #999 !default;
 
diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss
index d50b8d9611..4ec56d1a21 100644
--- a/packages/core/src/components/select/select.md.scss
+++ b/packages/core/src/components/select/select.md.scss
@@ -6,6 +6,8 @@
 
 .select-md {
   @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
+
+  font-family: $select-md-font-family;
 }
 
 .select-md .select-placeholder {
diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss
index ef11e9a789..e6cc8367b1 100644
--- a/packages/core/src/components/select/select.md.vars.scss
+++ b/packages/core/src/components/select/select.md.vars.scss
@@ -17,6 +17,9 @@ $select-md-padding-bottom:      $item-md-padding-bottom !default;
 /// @prop - Padding start of the select
 $select-md-padding-start:       $item-md-padding-start !default;
 
+/// @prop - Font family of the select
+$select-md-font-family:         $font-family-md-base !default;
+
 /// @prop - Color of the select icon
 $select-md-icon-color:          #999 !default;
 
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index dcb71fff3d..7faa78e3fc 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -9,9 +9,28 @@ ion-select {
   display: flex;
   overflow: hidden;
 
+}
+
+.item .select {
+  position: static;
+
   max-width: 45%;
 }
 
+.select-cover {
+  @include position(0, null, null, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0;
+
+  background: transparent;
+  cursor: pointer;
+}
+
 .select-text {
   overflow: hidden;
 
@@ -48,5 +67,5 @@ ion-select {
 }
 
 .select-key button {
-  border: 2px solid blue;
-}
\ No newline at end of file
+  border: 2px solid #5e9ed6;
+}
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index ced4972b70..cabc1825a1 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -471,8 +471,8 @@ export class Select {
     this.styleTmr = setTimeout(() => {
       this.ionStyle.emit({
         'select': true,
-        'input-has-value': this.hasValue(),
-        'select-disabled': this.disabled
+        'select-disabled': this.disabled,
+        'input-has-value': this.hasValue()
       });
     });
   }
@@ -519,7 +519,7 @@ export class Select {
         onKeyUp={this.onKeyUp.bind(this)}
         onFocus={this.onFocus.bind(this)}
         onBlur={this.onBlur.bind(this)}
-        class='item-cover'>
+        class='select-cover'>
         <slot></slot>
       </button>,
       <input type='hidden' name={this.name} value={this.value}/>
diff --git a/packages/core/src/components/slides/slides.scss b/packages/core/src/components/slides/slides.scss
index 4b1b21d9ed..5dec024517 100644
--- a/packages/core/src/components/slides/slides.scss
+++ b/packages/core/src/components/slides/slides.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "./slides.vars";
 @import "./slides-import";
 
 // Slides
diff --git a/packages/core/src/components/slides/slides.vars.scss b/packages/core/src/components/slides/slides.vars.scss
new file mode 100644
index 0000000000..f0bed98927
--- /dev/null
+++ b/packages/core/src/components/slides/slides.vars.scss
@@ -0,0 +1,6 @@
+@import "../../themes/ionic.globals";
+
+// Slides
+// --------------------------------------------------
+
+
diff --git a/packages/core/src/components/textarea/textarea.ios.scss b/packages/core/src/components/textarea/textarea.ios.scss
new file mode 100644
index 0000000000..da4d6f9e6e
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.ios.scss
@@ -0,0 +1,42 @@
+@import "./textarea";
+@import "./textarea.ios.vars";
+
+// iOS Textarea
+// --------------------------------------------------
+
+.native-textarea-ios {
+  @include margin($textarea-ios-margin-top, $textarea-ios-margin-end, $textarea-ios-margin-bottom, $textarea-ios-margin-start);
+  @include padding(0);
+
+  width: calc(100% - #{($textarea-ios-margin-end + $textarea-ios-margin-start)});
+
+  font-family: $textarea-ios-font-family;
+  font-size: $textarea-ios-font-size;
+}
+
+
+// iOS Stacked & Floating Textarea
+// --------------------------------------------------
+
+.item-ios.item-label-stacked .native-textarea,
+.item-ios.item-label-floating .native-textarea {
+  @include margin(8px, null, 8px, 0);
+
+  width: calc(100% - #{$textarea-ios-margin-end});
+}
+
+.item-ios.item-label-stacked .label-ios + .input + .cloned-input,
+.item-ios.item-label-floating .label-ios + .input + .cloned-input {
+  @include margin-horizontal(0, null);
+}
+
+
+// iOS Textarea After Label
+// --------------------------------------------------
+
+.label-ios + ion-textarea .native-textarea,
+.label-ios + .input + .cloned-input {
+  @include margin-horizontal($textarea-ios-by-label-margin-start, null);
+
+  width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
+}
diff --git a/packages/core/src/components/textarea/textarea.ios.vars.scss b/packages/core/src/components/textarea/textarea.ios.vars.scss
new file mode 100644
index 0000000000..9f2deff9b0
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.ios.vars.scss
@@ -0,0 +1,27 @@
+@import "../../themes/ionic.globals.ios";
+
+@import "../item/item.ios.vars";
+
+// iOS Textarea
+// --------------------------------------------------
+
+/// @prop - Margin top of the textarea
+$textarea-ios-margin-top:                    $item-ios-padding-top !default;
+
+/// @prop - Margin end of the textarea
+$textarea-ios-margin-end:                    ($item-ios-padding-end / 2) !default;
+
+/// @prop - Margin bottom of the textarea
+$textarea-ios-margin-bottom:                 $item-ios-padding-bottom !default;
+
+/// @prop - Margin start of the textarea
+$textarea-ios-margin-start:                  0 !default;
+
+/// @prop - Font family of the textarea
+$textarea-ios-font-family:                   $font-family-ios-base !default;
+
+/// @prop - Font size of the textarea
+$textarea-ios-font-size:                     inherit !default;
+
+/// @prop - Margin start of the textarea when it is after a label
+$textarea-ios-by-label-margin-start:         $item-ios-padding-start !default;
diff --git a/packages/core/src/components/textarea/textarea.md.scss b/packages/core/src/components/textarea/textarea.md.scss
new file mode 100644
index 0000000000..2325eecac2
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.md.scss
@@ -0,0 +1,26 @@
+@import "./textarea";
+@import "./textarea.md.vars";
+
+// Material Design Textarea
+// --------------------------------------------------
+
+.native-textarea-md {
+  @include margin($textarea-md-margin-top, $textarea-md-margin-end, $textarea-md-margin-bottom, $textarea-md-margin-start);
+  @include padding(0);
+
+  width: calc(100% - #{$textarea-md-margin-end} - #{$textarea-md-margin-start});
+
+  font-family: $textarea-md-font-family;
+  font-size: $textarea-md-font-size;
+}
+
+
+// Material Design Stacked & Floating Textarea
+// --------------------------------------------------
+
+.item-label-stacked .native-textarea-md,
+.item-label-floating .native-textarea-md {
+  @include margin(8px, null, 8px, 0);
+
+  width: calc(100% - #{$textarea-md-margin-end});
+}
diff --git a/packages/core/src/components/textarea/textarea.md.vars.scss b/packages/core/src/components/textarea/textarea.md.vars.scss
new file mode 100644
index 0000000000..ceba19df8c
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.md.vars.scss
@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.md";
+
+@import "../item/item.md.vars";
+
+// Material Design Textarea
+// --------------------------------------------------
+
+/// @prop - Font family of the textarea
+$textarea-md-font-family:                    $font-family-md-base !default;
+
+/// @prop - Font size of the textarea
+$textarea-md-font-size:                      inherit !default;
+
+/// @prop - Margin top of the textarea
+$textarea-md-margin-top:                     $item-md-padding-top !default;
+
+/// @prop - Margin end of the textarea
+$textarea-md-margin-end:                     ($item-md-padding-end / 2) !default;
+
+/// @prop - Margin bottom of the textarea
+$textarea-md-margin-bottom:                  $item-md-padding-bottom !default;
+
+/// @prop - Margin start of the textarea
+$textarea-md-margin-start:                   ($item-md-padding-start / 2) !default;
diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss
new file mode 100644
index 0000000000..e5cc8f4523
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.scss
@@ -0,0 +1,82 @@
+@import "./textarea.vars";
+
+// Textarea
+// --------------------------------------------------
+
+ion-textarea {
+  position: relative;
+  display: block;
+
+  flex: 1;
+
+  width: 100%;
+}
+
+.item-input ion-textarea {
+  position: static;
+}
+
+// Textarea Within An Item
+// --------------------------------------------------
+
+.item.item-textarea {
+  align-items: stretch;
+}
+
+// Native Textarea
+// --------------------------------------------------
+
+.native-textarea {
+  @include placeholder($textarea-placeholder-color);
+  @include appearance(none);
+  @include border-radius(0);
+
+  display: block;
+
+  flex: 1;
+
+  width: 92%;
+  width: calc(100% - 10px);
+
+  border: 0;
+
+  font-size: inherit;
+
+  background: transparent;
+}
+
+.native-textarea[disabled] {
+  opacity: .4;
+}
+
+.platform-mobile .native-textarea {
+  resize: none;
+}
+
+.item-input-has-focus a,
+.item-input-has-focus button,
+.item-input-has-focus textarea {
+  pointer-events: auto;
+}
+
+// Input Cover: Unfocused
+// --------------------------------------------------
+// The input cover is the div that actually receives the
+// tap/click event when scroll assist is configured to true.
+// This make it so the native input element is not clickable.
+// This will only show when the scroll assist is configured
+// otherwise the .input-cover will not be rendered at all
+// The input cover is not clickable when the input is disabled
+
+.textarea-cover {
+  @include position(0, null, null, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+}
+
+.textarea[disabled] .textarea-cover {
+  pointer-events: none;
+}
diff --git a/packages/core/src/components/textarea/textarea.tsx b/packages/core/src/components/textarea/textarea.tsx
index 28b49003cf..40a37a84bf 100644
--- a/packages/core/src/components/textarea/textarea.tsx
+++ b/packages/core/src/components/textarea/textarea.tsx
@@ -12,13 +12,12 @@ import { TextareaComponent } from '../input/input-base';
   // right now we're cheating by knowing ion-input
   // css is bundled with ion-textarea
 
-  // styleUrls: {
-  //   ios: 'input.ios.scss',
-  //   md: 'input.md.scss'
-  // },
-
+  styleUrls: {
+    ios: 'textarea.ios.scss',
+    md: 'textarea.md.scss'
+  },
   host: {
-    theme: 'input'
+    theme: 'textarea'
   }
 })
 export class Textarea implements TextareaComponent {
@@ -243,7 +242,7 @@ export class Textarea implements TextareaComponent {
   }
 
   render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
+    const themedClasses = createThemedClasses(this.mode, this.color, 'native-textarea');
     // TODO aria-labelledby={this.item.labelId}
 
     return (
diff --git a/packages/core/src/components/textarea/textarea.vars.scss b/packages/core/src/components/textarea/textarea.vars.scss
new file mode 100644
index 0000000000..bda35e9134
--- /dev/null
+++ b/packages/core/src/components/textarea/textarea.vars.scss
@@ -0,0 +1,6 @@
+@import "../../themes/ionic.globals";
+
+// Textarea
+// --------------------------------------------------
+
+$textarea-placeholder-color:       #999 !default;
diff --git a/packages/core/src/components/thumbnail/thumbnail.scss b/packages/core/src/components/thumbnail/thumbnail.scss
index 1297c3c755..356c8fc6ff 100644
--- a/packages/core/src/components/thumbnail/thumbnail.scss
+++ b/packages/core/src/components/thumbnail/thumbnail.scss
@@ -7,3 +7,8 @@
 ion-thumbnail {
   display: block;
 }
+
+ion-thumbnail img {
+  width: 100%;
+  height: 100%;
+}
diff --git a/packages/core/src/components/toast/toast.ios.scss b/packages/core/src/components/toast/toast.ios.scss
index b5099e3a9c..d10ec7610f 100644
--- a/packages/core/src/components/toast/toast.ios.scss
+++ b/packages/core/src/components/toast/toast.ios.scss
@@ -4,6 +4,10 @@
 // iOS Toast
 // --------------------------------------------------
 
+.toast-ios {
+  font-family: $toast-ios-font-family;
+}
+
 .toast-ios .toast-wrapper {
   @include position-horizontal(10px, 10px);
   @include margin(auto);
diff --git a/packages/core/src/components/toast/toast.ios.vars.scss b/packages/core/src/components/toast/toast.ios.vars.scss
index 9237520990..2fac4136c8 100644
--- a/packages/core/src/components/toast/toast.ios.vars.scss
+++ b/packages/core/src/components/toast/toast.ios.vars.scss
@@ -3,6 +3,9 @@
 // iOS Toast
 // --------------------------------------------------
 
+/// @prop - Font family of the toast
+$toast-ios-font-family:                           $font-family-ios-base !default;
+
 /// @prop - Background of the toast wrapper
 $toast-ios-background:                            rgba(237, 237, 239, 1) !default;
 
diff --git a/packages/core/src/components/toast/toast.md.scss b/packages/core/src/components/toast/toast.md.scss
index f6e92b80e4..3207737345 100644
--- a/packages/core/src/components/toast/toast.md.scss
+++ b/packages/core/src/components/toast/toast.md.scss
@@ -4,6 +4,10 @@
 // Material Design Toast
 // --------------------------------------------------
 
+.toast-md {
+  font-family: $toast-md-font-family;
+}
+
 .toast-md .toast-wrapper {
   @include position-horizontal(0, 0);
   @include margin(auto);
diff --git a/packages/core/src/components/toast/toast.md.vars.scss b/packages/core/src/components/toast/toast.md.vars.scss
index c62ce441e7..aed438b5da 100644
--- a/packages/core/src/components/toast/toast.md.vars.scss
+++ b/packages/core/src/components/toast/toast.md.vars.scss
@@ -3,6 +3,9 @@
 // Material Design Toast
 // --------------------------------------------------
 
+/// @prop - Font family of the toast
+$toast-md-font-family:                           $font-family-md-base !default;
+
 /// @prop - Background of the toast wrapper
 $toast-md-background:                            #333 !default;
 
diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss
index 3a5e2a9bd7..61764d923a 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.scss
@@ -9,6 +9,8 @@
 
   min-height: $toolbar-ios-height;
 
+  font-family: $toolbar-ios-font-family;
+
   @media screen and (orientation: landscape) {
     @include safe-area-padding-horizontal($toolbar-ios-padding);
   }
diff --git a/packages/core/src/components/toolbar/toolbar.ios.vars.scss b/packages/core/src/components/toolbar/toolbar.ios.vars.scss
index 2643ce6cef..79c9b9bd26 100644
--- a/packages/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/packages/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -15,6 +15,9 @@ $toolbar-order-ios: (
   menu-toggle-end: 7,
 );
 
+/// @prop - Font family of the toolbar
+$toolbar-ios-font-family:                   $font-family-ios-base !default;
+
 /// @prop - Font size of the toolbar button
 $toolbar-ios-button-font-size:              17px !default;
 
diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss
index b0b97acfbd..4c58856756 100644
--- a/packages/core/src/components/toolbar/toolbar.md.scss
+++ b/packages/core/src/components/toolbar/toolbar.md.scss
@@ -8,6 +8,8 @@
   @include padding($toolbar-md-padding);
 
   min-height: $toolbar-md-height;
+
+  font-family: $toolbar-md-font-family;
 }
 
 
diff --git a/packages/core/src/components/toolbar/toolbar.md.vars.scss b/packages/core/src/components/toolbar/toolbar.md.vars.scss
index 70bdb17e49..1677da3d54 100644
--- a/packages/core/src/components/toolbar/toolbar.md.vars.scss
+++ b/packages/core/src/components/toolbar/toolbar.md.vars.scss
@@ -15,6 +15,9 @@ $toolbar-order-md: (
   menu-toggle-end: 7,
 );
 
+/// @prop - Font family of the toolbar
+$toolbar-md-font-family:                 $font-family-md-base !default;
+
 /// @prop - Font size of the toolbar button
 $toolbar-md-button-font-size:            14px !default;
 
diff --git a/packages/core/src/components/toolbar/toolbar.scss b/packages/core/src/components/toolbar/toolbar.scss
index 4fc1ab8d0f..a2f5d73498 100644
--- a/packages/core/src/components/toolbar/toolbar.scss
+++ b/packages/core/src/components/toolbar/toolbar.scss
@@ -3,7 +3,8 @@
 // Toolbar
 // --------------------------------------------------
 
-.toolbar {
+ion-toolbar {
+  box-sizing: border-box;
   position: relative;
   z-index: $z-index-toolbar;
 
@@ -16,9 +17,16 @@
 
   width: 100%;
 
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+
   contain: content;
 }
 
+ion-toolbar ion-title {
+  box-sizing: border-box;
+}
+
 .toolbar-background {
   @include position(0, null, null, 0);