From fbed6dcc9961e9a7855883d308eb65f0eac8cf99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Garc=C3=ADa?=
 <emiliogarcia@MacBook-Pro-de-Emilio.local>
Date: Fri, 15 Jan 2016 13:36:27 +0100
Subject: [PATCH 1/3] add typography

---
 src/scss/components/colors.scss     |  2 +-
 src/scss/components/typography.scss | 51 +++++++++++++++++++++++++++++
 src/scss/variables/_sizes.scss      | 26 ++++++---------
 3 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 src/scss/components/typography.scss

diff --git a/src/scss/components/colors.scss b/src/scss/components/colors.scss
index e0db196..53cdbda 100644
--- a/src/scss/components/colors.scss
+++ b/src/scss/components/colors.scss
@@ -1,4 +1,4 @@
-// Shapes styles
+// Colors styles
 // ----------------------------------------------
 
 /* SG
diff --git a/src/scss/components/typography.scss b/src/scss/components/typography.scss
new file mode 100644
index 0000000..3befe67
--- /dev/null
+++ b/src/scss/components/typography.scss
@@ -0,0 +1,51 @@
+// Shapes styles
+// ----------------------------------------------
+
+/* SG
+# Typography/
+
+```
+<p class="Text Size-huge">Open Sans<br/>
+26/34 Regular</p>
+<p class="Text Size-large">Open Sans<br/>
+16/22 Regular</p>
+<p class="Text is-semibold Size-medium">Open Sans<br/>
+12/16 Semibold</p>
+<p class="Text Size-medium">Open Sans<br/>
+12/16 Semibold</p>
+<p class="Text is-semibold Size-small">Open Sans<br/>
+10/14 Semibold</p>
+<p class="Text Size-small">Open Sans
+10/14 Regular</p>
+``` 
+*/
+
+@import '../variables/sizes';
+
+.Text {
+  font-family: 'Open Sans';
+  $sFontWeight-normal:   400;
+  &.is-semibold {
+    font-weight: $sFontWeight-semibold;
+  }
+  &.is-light {
+    font-weight: $sFontWeight-lighter;
+  }
+}
+.Size-huge {
+  font-size: $sFontSize-huge;
+  line-height: $sLineHeight-huge;
+}
+.Size-large {
+  font-size: $sFontSize-large;
+  line-height: $sLineHeight-large;
+}
+.Size-medium {
+  font-size: $sFontSize-medium;
+  line-height: $sLineHeight-medium;
+}
+.Size-small {
+  font-size: $sFontSize-small;
+  line-height: $sLineHeight-small;
+}
+
diff --git a/src/scss/variables/_sizes.scss b/src/scss/variables/_sizes.scss
index 31de97a..70c38e5 100644
--- a/src/scss/variables/_sizes.scss
+++ b/src/scss/variables/_sizes.scss
@@ -13,24 +13,18 @@ $sMargin-section: 24px; // To separate main section
 $sMargin-element: 14px; // To separate elements inside a group
 
 // Font sizes
-$sFontSize-smaller: 10px;
-$sFontSize-small:   12px;
-$sFontSize-normal:  14px;
-$sFontSize-larger:  16px;
-$sFontSize-huge:    26px;
+$sFontSize-small: 10px;
+$sFontSize-medium: 14px;
+$sFontSize-large: 16px;
+$sFontSize-huge: 26px;
 
 // Font weights
-$sFontWeight-lighter:  300;
-$sFontWeight-normal:   400;
+$sFontWeight-lighter: 300;
+$sFontWeight-normal: 400;
 $sFontWeight-semibold: 600;
-$sFontWeight-bold:     700;
 
 // Line heights
-$sLineHeight-smaller: 15px;
-$sLineHeight-small:   16px;
-$sLineHeight-normal:  20px;
-$sLineHeight-large:   22px;
-$sLineHeight-larger:  24px;
-$sLineHeight-largest: 27px;
-$sLineHeight-huge:    34px;
-$sLineHeight-button:  15px;
+$sLineHeight-small: 14px;
+$sLineHeight-medium: 16px;
+$sLineHeight-large: 22px;
+$sLineHeight-huge: 34px;

From cebe2b2063c7742589d165b4ba4645e88214c6e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Garc=C3=ADa?=
 <emiliogarcia@MacBook-Pro-de-Emilio.local>
Date: Fri, 15 Jan 2016 13:38:30 +0100
Subject: [PATCH 2/3] change markup

---
 src/scss/components/typography.scss | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/scss/components/typography.scss b/src/scss/components/typography.scss
index 3befe67..a85ce0a 100644
--- a/src/scss/components/typography.scss
+++ b/src/scss/components/typography.scss
@@ -5,18 +5,12 @@
 # Typography/
 
 ```
-<p class="Text Size-huge">Open Sans<br/>
-26/34 Regular</p>
-<p class="Text Size-large">Open Sans<br/>
-16/22 Regular</p>
-<p class="Text is-semibold Size-medium">Open Sans<br/>
-12/16 Semibold</p>
-<p class="Text Size-medium">Open Sans<br/>
-12/16 Semibold</p>
-<p class="Text is-semibold Size-small">Open Sans<br/>
-10/14 Semibold</p>
-<p class="Text Size-small">Open Sans
-10/14 Regular</p>
+<p class="Text Size-huge">Open Sans 26/34 Regular</p>
+<p class="Text Size-large">Open Sans 16/22 Regular</p>
+<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
+<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
+<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
+<p class="Text Size-small">Open Sans 10/14 Regular</p>
 ``` 
 */
 

From 6201059991919143208cb4436f8a5f20c76b3079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Garc=C3=ADa?=
 <emiliogarcia@MacBook-Pro-de-Emilio.local>
Date: Fri, 15 Jan 2016 13:44:35 +0100
Subject: [PATCH 3/3] clear template

---
 src/scss/components/typography.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/scss/components/typography.scss b/src/scss/components/typography.scss
index a85ce0a..719a5c7 100644
--- a/src/scss/components/typography.scss
+++ b/src/scss/components/typography.scss
@@ -1,4 +1,4 @@
-// Shapes styles
+// Typography styles
 // ----------------------------------------------
 
 /* SG
@@ -18,7 +18,8 @@
 
 .Text {
   font-family: 'Open Sans';
-  $sFontWeight-normal:   400;
+  $sFontWeight-normal: 400;
+
   &.is-semibold {
     font-weight: $sFontWeight-semibold;
   }
@@ -26,18 +27,22 @@
     font-weight: $sFontWeight-lighter;
   }
 }
+
 .Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
 }
+
 .Size-large {
   font-size: $sFontSize-large;
   line-height: $sLineHeight-large;
 }
+
 .Size-medium {
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
 }
+
 .Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;