Merge pull request #11 from teamleadercrm/semi-bold

Add heading-5 and change heading-1 to semi bold
teamleadercrm · Nov 21, 2019 · b272d38 · b272d38
2 parents acc829a + 3ab956f
commit b272d38
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,12 @@
 
 ### Fixed
 
+## [0.2.2] - 2019-11-21
+
+### Added
+
+- `.heading-5`: added `heading-5` which is semi bold, has a `font-size 14px` and a `line-height 18px`. ([@driesd](https://github.com/driesd) in [#11](https://github.com/teamleadercrm/ui-typography/pull/11))
+
 ## [0.2.1] - 2019-09-19
 
 ### Added

diff --git a/index.css b/index.css
@@ -3,6 +3,7 @@
 
   --font-family-regular: 'Inter-Regular', trebuchet ms, Verdana, 'Arial', sans-serif;
   --font-family-medium: 'Inter-Medium', trebuchet ms, Verdana, 'Arial', sans-serif;
+  --font-family-semi-bold: 'Inter-SemiBold', trebuchet ms, Verdana, 'Arial', sans-serif;
   --font-family-bold: 'Inter-Bold', trebuchet ms, Verdana, 'Arial', sans-serif;
   --font-family-black: 'Inter-Black', trebuchet ms, Verdana, 'Arial', sans-serif;
 }
@@ -21,6 +22,13 @@
        url('https://static.teamleader.eu/fonts/Inter-Medium.woff') format('woff');
 }
 
+@font-face {
+  font-display: swap;
+  font-family: 'Inter-SemiBold';
+  src: url('https://static.teamleader.eu/fonts/Inter-SemiBold.woff2') format('woff2'),
+       url('https://static.teamleader.eu/fonts/Inter-SemiBold.woff') format('woff');
+}
+
 @font-face {
   font-display: swap;
   font-family: 'Inter-Bold';
@@ -45,13 +53,13 @@
 
 .text {
   strong {
-    font-family: var(--font-family-bold);
+    font-family: var(--font-family-semi-bold);
     font-weight: normal;
   }
 }
 
 .heading-1 {
-  font-family: var(--font-family-bold);
+  font-family: var(--font-family-semi-bold);
   font-size: calc(2.4 * var(--unit));
   font-weight: normal;
   line-height: calc(3.0 * var(--unit));
@@ -80,6 +88,13 @@
   text-transform: uppercase;
 }
 
+.heading-5 {
+    font-family: var(--font-family-semi-bold);
+    font-size: calc(1.4 * var(--unit));
+    font-weight: normal;
+    line-height: calc(1.8 * var(--unit));
+}
+
 .heading a {
   text-decoration: none;
 }

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@ <h1 class="heading heading-1">I'm a Heading H1</h1>
     <h2 class="heading heading-2">I'm a Heading H2</h2>
     <h3 class="heading heading-3">I'm a Heading H3</h3>
     <h4 class="heading heading-4">I'm a Heading H4</h4>
+    <h5 class="heading heading-5">I'm a Heading H5</h5>
 
     <p class="text text-display">I'm display text containing a <strong>strong</strong> word</p>
     <p class="text text-body">I'm body text containing a <strong>strong</strong> word</p>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui-typography",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Teamleader UI typography",
   "main": "index.css",
   "repository": {