From 10c34a70728b794970e2549c13ec7e4080ea3e8c Mon Sep 17 00:00:00 2001
From: "@soyjavi" <javi.jimenez.villar@gmail.com>
Date: Tue, 6 Oct 2015 12:42:36 +0700
Subject: [PATCH] Use Heading sizes

---
 components/card/index.jsx  |  2 +-
 components/card/style.scss |  2 +-
 components/commons.scss    | 28 +++++++++++++++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/components/card/index.jsx b/components/card/index.jsx
index 174a0c1b..7ce3f19e 100644
--- a/components/card/index.jsx
+++ b/components/card/index.jsx
@@ -55,7 +55,7 @@ export default React.createClass({
       return (
         <figure className={style.figure} style={styleFigure}>
           { this.props.subtitle ? <small>{this.props.subtitle}</small> : null }
-          { this.props.title ? <h2>{this.props.title}</h2> : null }
+          { this.props.title ? <h5>{this.props.title}</h5> : null }
           { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
         </figure>
       );
diff --git a/components/card/style.scss b/components/card/style.scss
index e40e9b5d..95f77886 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -98,7 +98,7 @@ $card-text-overlay: unquote("rgba(#{$color-black}, 0.2)");
   }
   .figure {
     padding: 0;
-    > h2 {
+    > h5 {
       padding: $offset;
       font-size: $font-size-small;
       font-weight: $font-weight-bold;
diff --git a/components/commons.scss b/components/commons.scss
index 2fb27453..afa6d4a4 100644
--- a/components/commons.scss
+++ b/components/commons.scss
@@ -61,7 +61,7 @@ input:not([type="checkbox"]):not([type="radio"]), button {
 }
 
 //-- App wrapper to allow overlays to block scroll
-[data-toolbox-app] {
+[data-react-toolbox-app] {
   position: absolute;
   top: 0;
   left: 0;
@@ -70,6 +70,32 @@ input:not([type="checkbox"]):not([type="radio"]), button {
   overflow-y: scroll;
 }
 
+// -- Font sizes
+h1 {
+  font-size: 112px;
+  font-weight: 300;
+}
+h2 {
+  font-size: 56px;
+  font-weight: 400;
+}
+h3 {
+  font-size: 45px;
+  font-weight: 400;
+}
+h4 {
+  font-size: 34px;
+  font-weight: 400;
+}
+h5 {
+  font-size: 24px;
+  font-weight: 400;
+}
+h6 {
+  font-size: 20px;
+  font-weight: 500;
+}
+
 //-- Flex
 [data-flex] {
   display: flex;