From d1be0391a8e6e4f12d10900eef7a2b1b376a2111 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <sgomes@google.com>
Date: Mon, 10 Aug 2015 15:24:48 +0100
Subject: [PATCH] Add variables for font sizes in components.

Fixes #1347 and all the others I could find.
Also removes some dead code.
---
 src/_variables.scss             | 56 +++++++++------------------------
 src/badge/_badge.scss           |  2 +-
 src/card/_card.scss             |  2 +-
 src/checkbox/_checkbox.scss     |  2 +-
 src/data-table/_data-table.scss |  4 +--
 src/layout/_layout.scss         |  4 +--
 src/radio/_radio.scss           |  2 +-
 src/switch/_switch.scss         |  2 +-
 src/tabs/_tabs.scss             |  2 +-
 src/textfield/_textfield.scss   |  7 ++---
 src/tooltip/_tooltip.scss       |  4 +--
 11 files changed, 30 insertions(+), 57 deletions(-)

diff --git a/src/_variables.scss b/src/_variables.scss
index 2f9be157..0307ac22 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -306,6 +306,7 @@ $input-text-expandable-icon-top: 16px;
 
 /* SWITCH */
 
+$switch-label-font-size: 16px;
 $switch-label-height: 24px;
 $switch-track-height: 14px;
 $switch-track-length: 36px;
@@ -333,6 +334,7 @@ $spinner-duration: 360 * $spinner-arc-time / (
 
 /* RADIO */
 
+$radio-label-font-size: 16px;
 $radio-label-height: 24px;
 $radio-button-size: 16px;
 $radio-inner-margin: $radio-button-size / 4;
@@ -352,10 +354,10 @@ $list-container-height: 500px;
 $list-container-width: 400px;
 $list-container-item-height: 70px;
 
-/* ICONS */
+/* LAYOUT */
 
+$layout-nav-link-font-size: 13px;
 
-// Dimensions
 $layout-drawer-narrow: 240px;
 $layout-drawer-wide: 456px;
 $layout-drawer-width: $layout-drawer-narrow;
@@ -376,6 +378,7 @@ $layout-header-mobile-baseline: 72px;
 $layout-header-mobile-indent: 16px;
 $layout-header-desktop-indent: 40px;
 
+$layout-tab-font-size: 14px;
 $layout-tab-bar-height: 48px;
 $layout-tab-mobile-padding: 12px;
 $layout-tab-desktop-padding: 24px;
@@ -391,11 +394,6 @@ $icon-toggle-ripple-size: 36px !default;
 /* FOOTER */
 
 /*mega-footer*/
-/**************
- *
- * Sizes
- *
- *************/
 $footer-min-padding: 16px !default;
 $footer-padding-sides: 40px !default;
 $footer-heading-font-size: 14px !default;
@@ -403,47 +401,14 @@ $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
 $footer-btn-size: 36px  !default;
 
 /*mini-footer*/
-
-/**************
- *
- * Sizes
- *
- *************/
 $padding: 16px !default;
 $footer-heading-font-size: 24px !default;
 $footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
 $footer-btn-size: 36px !default;
 
-/* COLUMN LAYOUT */
-
-// Cutoff points for devices.
-$columns-tablet-size: 768px;
-$columns-desktop-size: 1024px;
-
-// Web (desktop) layout. Columns are fixed width, and there's a maximum number
-// of 3 columns, after which we just add padding to either side.
-$columns-web-count: 3;
-$columns-web-size: 360px;
-$columns-web-gutter: 40px;
-
-$columns-web-block-size: $columns-web-size + $columns-web-gutter;
-$columns-web-padding-size: $columns-web-count *
-    ($columns-web-size + $columns-web-gutter) / 2;
-
-// Tablet layout. There's a fixed number of columns, which grow to fill the
-// entire container.
-$columns-tablet-count: 2;
-$columns-tablet-gutter: 24px;
-$columns-tablet-percent: 100% / $columns-tablet-count;
-
-// Phone layout. There's a fixed number of columns, which grow to fill the
-// entire container.
-$columns-phone-count: 1;
-$columns-phone-gutter: 16px;
-$columns-phone-percent: 100% / $columns-phone-count;
-
 /* CHECKBOX */
 
+$checkbox-label-font-size: 16px;
 $checkbox-label-height: 24px;
 $checkbox-button-size: 16px;
 $checkbox-inner-margin: 2px;
@@ -459,6 +424,7 @@ $card-width: 330px !default;
 $card-height: 200px !default;
 $card-font-size: 16px !default;
 $card-title-font-size: 24px !default;
+$card-subtitle-font-size: 14px !default;
 $card-horizontal-padding: 16px !default;
 $card-vertical-padding: 16px !default;
 
@@ -516,6 +482,7 @@ $animation-curve-default: $animation-curve-fast-out-slow-in !default;
 $bar-height: 4px !default;
 
 /* BADGE */
+$badge-font-size: 12px;
 $badge-color: unquote("rgb(#{$color-white})") !default;
 $badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
 $badge-background: unquote("rgb(#{$color-accent})") !default;
@@ -551,6 +518,9 @@ $grid-cell-default-columns: $grid-phone-columns !default;
 
 /* DATA TABLE */
 
+$data-table-font-size: 13px;
+$data-table-header-font-size: 12px;
+
 $data-table-header-color: rgba(#000, 0.54);
 $data-table-divider-color: rgba(#000, 0.12);
 
@@ -571,3 +541,7 @@ $data-table-card-title-top: 20px;
 $data-table-card-padding: 24px;
 $data-table-button-padding-right: 16px;
 $data-table-cell-top: $data-table-card-padding / 2;
+
+/* TOOLTIP */
+$tooltip-font-size: 10px !default;
+$tooltip-font-size-large: 14px !default;
diff --git a/src/badge/_badge.scss b/src/badge/_badge.scss
index a8964744..b6f94cec 100644
--- a/src/badge/_badge.scss
+++ b/src/badge/_badge.scss
@@ -46,7 +46,7 @@
 
     font-family: $preferred_font;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $badge-font-size;
     width: $badge-size;
     height: $badge-size;
     border-radius : 50%;
diff --git a/src/card/_card.scss b/src/card/_card.scss
index d395525c..1986fbdf 100644
--- a/src/card/_card.scss
+++ b/src/card/_card.scss
@@ -72,7 +72,7 @@
 }
 
 .mdl-card__subtitle-text {
-  font-size: 14px;
+  font-size: $card-subtitle-font-size;
   color: grey;
   margin: 0;
 }
diff --git a/src/checkbox/_checkbox.scss b/src/checkbox/_checkbox.scss
index cc4b4ccc..d8c717ff 100644
--- a/src/checkbox/_checkbox.scss
+++ b/src/checkbox/_checkbox.scss
@@ -135,7 +135,7 @@
 .mdl-checkbox__label {
   position: relative;
   cursor: pointer;
-  font-size: 16px;
+  font-size: $checkbox-label-font-size;
   line-height: $checkbox-label-height;
   margin: 0;
 
diff --git a/src/data-table/_data-table.scss b/src/data-table/_data-table.scss
index ca619a86..1e36f51d 100644
--- a/src/data-table/_data-table.scss
+++ b/src/data-table/_data-table.scss
@@ -22,7 +22,7 @@
   border: $data-table-dividers;
   border-collapse: collapse;
   white-space: nowrap;
-  font-size: 13px;
+  font-size: $data-table-font-size;
   background-color: unquote("rgb(#{$color-white})");
 
   thead {
@@ -85,7 +85,7 @@
     text-overflow: ellipsis;
     @include typo-body-2();
     height: $data-table-row-height;
-    font-size: 12px;
+    font-size: $data-table-header-font-size;
     color: $data-table-header-color;
     padding-bottom: 8px;
     box-sizing: border-box;
diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss
index d817c534..fe05c619 100644
--- a/src/layout/_layout.scss
+++ b/src/layout/_layout.scss
@@ -29,7 +29,7 @@
   color: $layout-text-color;
   text-decoration: none;
   font-weight: 500;
-  font-size: 13px;
+  font-size: $layout-nav-link-font-size;
   margin: 0;
 }
 
@@ -526,7 +526,7 @@
 
     text-align: center;
     font-weight: 500;
-    font-size: 14px;
+    font-size: $layout-tab-font-size;
     text-transform: uppercase;
 
     color: $layout-header-tab-text-color;
diff --git a/src/radio/_radio.scss b/src/radio/_radio.scss
index a5b02748..2e96c9d5 100644
--- a/src/radio/_radio.scss
+++ b/src/radio/_radio.scss
@@ -20,7 +20,7 @@
 .mdl-radio {
   position: relative;
 
-  font-size: 16px;
+  font-size: $radio-label-font-size;
   line-height: $radio-label-height;
 
   display: inline-block;
diff --git a/src/switch/_switch.scss b/src/switch/_switch.scss
index 6de084de..207ea57a 100644
--- a/src/switch/_switch.scss
+++ b/src/switch/_switch.scss
@@ -148,7 +148,7 @@
 .mdl-switch__label {
   position: relative;
   cursor: pointer;
-  font-size: 16px;
+  font-size: $switch-label-font-size;
   line-height: $switch-label-height;
   margin: 0;
   left: 24px;
diff --git a/src/tabs/_tabs.scss b/src/tabs/_tabs.scss
index eb0426d1..315c0451 100644
--- a/src/tabs/_tabs.scss
+++ b/src/tabs/_tabs.scss
@@ -51,7 +51,7 @@
 
   text-align: center;
   font-weight: 500;
-  font-size: 14px;
+  font-size: $layout-tab-font-size;
   text-transform: uppercase;
 
   color: $tab-text-color;
diff --git a/src/textfield/_textfield.scss b/src/textfield/_textfield.scss
index 3ce0b409..2329237e 100644
--- a/src/textfield/_textfield.scss
+++ b/src/textfield/_textfield.scss
@@ -21,7 +21,7 @@
 .mdl-textfield {
   position: relative;
 
-  font-size: 16px;
+  font-size: $input-text-font-size;
 
   display: inline-block;
 
@@ -64,7 +64,6 @@
   margin: 0;
   padding: $input-text-padding 0;
   width: $input-text-width;
-  background: $input-text-font-size;
   text-align: left;
   color: inherit;
 
@@ -132,7 +131,7 @@
 
   .mdl-textfield--floating-label.is-invalid & {
     color: $input-text-error-color;
-    font-size: 12px;
+    font-size: $input-text-floating-label-fontsize;
   }
 
   // The after label is the colored underline for the TextField.
@@ -163,7 +162,7 @@
 .mdl-textfield__error {
   color: $input-text-error-color;
   position: absolute;
-  font-size: 12px;
+  font-size: $input-text-floating-label-fontsize;
   margin-top: 3px;
   visibility: hidden;
   display: block;
diff --git a/src/tooltip/_tooltip.scss b/src/tooltip/_tooltip.scss
index 3ed82b85..59ade489 100644
--- a/src/tooltip/_tooltip.scss
+++ b/src/tooltip/_tooltip.scss
@@ -25,7 +25,7 @@
   border-radius: 2px;
   color: $tooltip-text-color;
   display: inline-block;
-  font-size: 10px;
+  font-size: $tooltip-font-size;
   font-weight: 500;
   line-height: 14px;
   max-width: 170px;
@@ -41,7 +41,7 @@
 
 .mdl-tooltip--large {
   line-height: 14px;
-  font-size: 14px;
+  font-size: $tooltip-font-size-large;
   padding: 16px;
 }