Implement Custom Typography (amundsen-io#98)

Revamp of typography across the entire app * Removed dependency on bootstrap typography * Added 'Open Sans' and 'Roboto' font definitions * Defined new variables for header and body font family/weight * Defined a set of predefined classes such as title-1, title-2, body-1, etc. * Replaced ad hoc font styles with predefined classes whenever possible.
DataChefHQ · Jun 30, 2022 · 93e4e59 · 93e4e59
1 parent a2ba35f
commit 93e4e59
Show file tree

Hide file tree

Showing 44 changed files with 271 additions and 210 deletions.
diff --git a/frontend/amundsen_application/static/css/_bootstrap-custom.scss b/frontend/amundsen_application/static/css/_bootstrap-custom.scss
@@ -12,7 +12,6 @@ $icon-font-path: '/static/fonts/bootstrap/';
 
 // Core CSS
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/type';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/code';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/grid';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/tables';

diff --git a/frontend/amundsen_application/static/css/_buttons-default.scss b/frontend/amundsen_application/static/css/_buttons-default.scss
@@ -3,8 +3,7 @@
 
   &.btn-primary,
   &.btn-default {
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
+    font-weight: $font-weight-body-bold;
     height: 32px;
     padding: 6px 16px;
 

diff --git a/frontend/amundsen_application/static/css/_fonts-default.scss b/frontend/amundsen_application/static/css/_fonts-default.scss
@@ -1 +1,36 @@
-// TODO - Import Open Sans or other default font
+@import 'variables';
+
+// Roboto
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: $font-weight-header-regular;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: $font-weight-header-bold;
+  font-style: normal;
+}
+
+
+// Open Sans
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
+  font-weight: $font-weight-body-regular;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-SemiBold.ttf') format('truetype');
+  font-weight: $font-weight-body-semi-bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
+  font-weight: $font-weight-body-bold;
+  font-style: normal;
+}
diff --git a/frontend/amundsen_application/static/css/_popovers.scss b/frontend/amundsen_application/static/css/_popovers.scss
@@ -45,8 +45,7 @@
   border: none;
   background-color: $gray-base;
   color: $body-bg;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-weight: $font-weight-body-bold;
   outline: none;
 }
 .tooltip-inner button:hover {

diff --git a/frontend/amundsen_application/static/css/_typography-custom.scss b/frontend/amundsen_application/static/css/_typography-custom.scss
@@ -0,0 +1 @@
+// This file is intentionally left blank and should be overwritten by in the build process.
diff --git a/frontend/amundsen_application/static/css/_typography-default.scss b/frontend/amundsen_application/static/css/_typography-default.scss
@@ -0,0 +1,122 @@
+@import 'variables';
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+h1, h2, h3,
+.h1, .h2, .h3 {
+  color: $text-dark;
+  font-family: $font-family-header;
+  margin: 0;
+}
+
+h1,
+.h1 {
+  font-size: 36px;
+  font-weight: $font-weight-header-regular;
+}
+
+h2,
+.h2 {
+  font-size: 26px;
+  font-weight: $font-weight-header-bold;
+}
+
+h3,
+.h3 {
+  font-size: 20px;
+  font-weight: $font-weight-header-bold;
+}
+
+body {
+  color: $text-dark;
+  font-size: 14px;
+  font-family: $font-family-body;
+  font-weight: $font-weight-body-regular;
+}
+
+.title-1, .title-2, .title-3,
+.subtitle-1, .subtitle-2, .subtitle-3,
+.body-1, .body-2, .body-3,
+.body-secondary-3, .body-link, .caption {
+  font-family: $font-family-body;
+}
+
+.title-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-bold;
+  line-height: 24px;
+}
+
+.title-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-bold;
+}
+
+.title-3 {
+  color: $text-medium;
+  font-size: 14px;
+  font-weight: $font-weight-body-bold;
+}
+
+.subtitle-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-semi-bold;
+  line-height: 20px;
+}
+
+.subtitle-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-semi-bold;
+}
+
+.subtitle-3 {
+  font-size: 14px;
+  font-weight: $font-weight-body-semi-bold;
+}
+
+.body-1 {
+  font-size: 20px;
+  font-weight: $font-weight-body-regular;
+  line-height: 24px;
+}
+
+.body-2 {
+  font-size: 16px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-3 {
+  font-size: 14px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-secondary-3 {
+  color: $text-medium;
+  font-size: 14px;
+  font-weight: $font-weight-body-regular;
+}
+
+.body-link {
+  color: $brand-color-4;
+  font-size: 14px;
+}
+
+.caption {
+  color: $text-medium;
+  font-size: 13px;
+  font-weight: $font-weight-body-bold;
+}
+
+.column-type {
+  color: $brand-color-3;
+  font-size: 13px;
+  font-family: $font-family-monospace;
+}
+
+.helper-text {
+  color: $text-light;
+  font-size: 12px;
+  font-family: $font-family-body;
+}
diff --git a/frontend/amundsen_application/static/css/_typography.scss b/frontend/amundsen_application/static/css/_typography.scss
@@ -0,0 +1,4 @@
+// Amundsen Default Typography
+@import 'typography-default';
+// Per-Client Custom Typography
+@import 'typography-custom';
diff --git a/frontend/amundsen_application/static/css/_variables-default.scss b/frontend/amundsen_application/static/css/_variables-default.scss
@@ -4,7 +4,8 @@
 
   $brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5
 
-  $font-family-sans-serif-bold, $font-weight-sans-serif-bold
+  $font-family-header, $font-weight-header-regular, $font-weight-header-bold
+  $font-family-body, $font-weight-body-regular, $font-weight-body-semi-bold, $font-weight-body-bold
 
   $text-dark, $text-medium, $text-light
 
@@ -42,17 +43,19 @@ $text-light: $gray-light !default;
 
 
 // Typography
-$font-family-sans-serif:      "Lucida Sans Unicode", "Lucida Grande", sans-serif !default;
-$font-family-sans-serif-bold: $font-family-sans-serif !default;
-$font-weight-sans-serif-bold: 600 !default;
-$font-family-serif:           Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:       Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-body:           "Open Sans", sans-serif !default;
+$font-weight-body-regular:   400 !default;
+$font-weight-body-semi-bold: 600 !default;
+$font-weight-body-bold:      700 !default;
 
-$font-family-base:            $font-family-sans-serif !default;
-$headings-font-family:        $font-family-sans-serif-bold !default;
+$font-family-header:         "Roboto", sans-serif !default;
+$font-weight-header-regular: 500 !default;
+$font-weight-header-bold:    700 !default;
 
-$font-size-small:    12px !default;
+$font-family-monospace:       'Menlo-Bold', Menlo, monospace !default;
+$font-family-serif:           Georgia, "Times New Roman", Times, serif !default;
 
+$font-size-small:    12px !default;
 $font-size-base:     14px !default;
 $font-size-large:    16px !default;
 $line-height-small:  1.5 !default;

diff --git a/frontend/amundsen_application/static/css/styles.scss b/frontend/amundsen_application/static/css/styles.scss
@@ -5,6 +5,7 @@
 @import 'icons';
 @import 'list-group-item';
 @import 'popovers';
+@import 'typography';
 
 // TODO - Move to separate files
 // Layout

diff --git a/frontend/amundsen_application/static/fonts/OpenSans-Bold.ttf b/frontend/amundsen_application/static/fonts/OpenSans-Bold.ttf
diff --git a/frontend/amundsen_application/static/fonts/OpenSans-Regular.ttf b/frontend/amundsen_application/static/fonts/OpenSans-Regular.ttf
diff --git a/frontend/amundsen_application/static/fonts/OpenSans-SemiBold.ttf b/frontend/amundsen_application/static/fonts/OpenSans-SemiBold.ttf
diff --git a/frontend/amundsen_application/static/fonts/Roboto-Bold.ttf b/frontend/amundsen_application/static/fonts/Roboto-Bold.ttf
diff --git a/frontend/amundsen_application/static/fonts/Roboto-Medium.ttf b/frontend/amundsen_application/static/fonts/Roboto-Medium.ttf
diff --git a/frontend/amundsen_application/static/js/components/AnnouncementPage/index.tsx b/frontend/amundsen_application/static/js/components/AnnouncementPage/index.tsx
@@ -37,8 +37,8 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
     return (
       <div key={`post:${postIndex}`} className='post-container'>
         <div className='post-header'>
-          <div className='post-title'>{post.title}</div>
-          <div className='post-date'>{post.date}</div>
+          <div className='post-title title-2'>{post.title}</div>
+          <div className='body-secondary-3'>{post.date}</div>
         </div>
         <div className='post-content'>
           <SanitizedHTML html={post.html_content} />
@@ -59,9 +59,7 @@ export class AnnouncementPage extends React.Component<AnnouncementPageProps> {
         <div className="container announcement-container">
           <div className="row">
             <div className="col-xs-12">
-              <div id="announcement-header" className="announcement-header">
-                Announcements
-              </div>
+              <h3 id="announcement-header">Announcements</h3>
               <hr />
               <div id="announcement-content" className='announcement-content'>
                 {this.createPosts()}

diff --git a/frontend/amundsen_application/static/js/components/AnnouncementPage/styles.scss b/frontend/amundsen_application/static/js/components/AnnouncementPage/styles.scss
@@ -3,34 +3,22 @@
 .announcement-container hr {
   border: 2px solid $brand-color-4;
 }
-.announcement-header {
-  font-size: 20px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-}
 
 .post-container {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
-}
-.post-header {
-  padding-right: 16px;
-  border-right: 1px solid $gray-lighter
-}
-.post-title {
-  font-size: 16px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  width: 150px;
-}
-.post-date {
-  font-size: 14px;
-  color: $text-medium;
-}
-.post-content {
-  padding-left: 16px;
-}
-.post-content > p:not(:last-child) {
-  margin: 0 0 20px;
+
+  .post-header {
+    padding-right: 16px;
+    border-right: 1px solid $gray-lighter;
+
+    .post-title {
+      width: 150px;
+    }
+  }
+
+  .post-content {
+    padding-left: 16px;
+  }
 }
diff --git a/frontend/amundsen_application/static/js/components/BrowsePage/index.tsx b/frontend/amundsen_application/static/js/components/BrowsePage/index.tsx
@@ -79,7 +79,7 @@ export class BrowsePage extends React.Component<BrowsePageProps, BrowsePageState
         <div className="container">
           <div className="row">
             <div className="col-xs-12">
-              <h3 id="browse-header" className="header">Browse Tags</h3>
+              <h3 id="browse-header">Browse Tags</h3>
               <hr className="header-hr"/>
               <div id="browse-body" className="browse-body">
                 {this.generateTagInfo(this.state.curatedTags)}

diff --git a/frontend/amundsen_application/static/js/components/BrowsePage/styles.scss b/frontend/amundsen_application/static/js/components/BrowsePage/styles.scss
@@ -1,15 +1,5 @@
 @import 'variables';
 
-.container {
-  margin-top: 64px;
-}
-
-h3.header {
-  font-size: 20px;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-}
-
 hr.header-hr {
   border: 2px solid $brand-color-4;
 }

diff --git a/frontend/amundsen_application/static/js/components/Feedback/FeedbackForm/styles.scss b/frontend/amundsen_application/static/js/components/Feedback/FeedbackForm/styles.scss
@@ -28,15 +28,15 @@
 }
 
 .nps-label {
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-family: $font-family-header;
+  font-weight: $font-weight-header-regular;
   margin-bottom: 15px;
-  width: 60px;
+  width: 65px;
 }
 
 .status-message {
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
+  font-family: $font-family-header;
+  font-weight: $font-weight-header-regular;
   text-align: center;
   position: absolute;
   font-size: 20px;

diff --git a/frontend/amundsen_application/static/js/components/Feedback/styles.scss b/frontend/amundsen_application/static/js/components/Feedback/styles.scss
@@ -38,8 +38,8 @@
     color: $text-medium;
     flex-grow: 1;
     font-size: 12px;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
+    font-family: $font-family-header;
+    font-weight: $font-weight-header-regular;
     height: 24px;
     line-height: 32px;
   }

diff --git a/frontend/amundsen_application/static/js/components/NavBar/index.tsx b/frontend/amundsen_application/static/js/components/NavBar/index.tsx
@@ -36,9 +36,11 @@ export class NavBar extends React.Component<NavBarProps> {
   generateNavLinks(navLinks: LinkConfig[]) {
     return navLinks.map((link, index) => {
       if (link.use_router) {
-        return <NavLink key={index} to={link.href} target={link.target} onClick={logClick}>{link.label}</NavLink>
+        return <NavLink className="title-3" key={index} to={link.href} target={link.target}
+                        onClick={logClick}>{link.label}</NavLink>
       }
-      return <a key={index} href={link.href} target={link.target} onClick={logClick}>{link.label}</a>
+      return <a className="title-3" key={index} href={link.href} target={link.target}
+                onClick={logClick}>{link.label}</a>
     });
   }
 
@@ -52,7 +54,7 @@ export class NavBar extends React.Component<NavBarProps> {
                 AppConfig.logoPath &&
                 <img id="logo-icon" className="logo-icon" src={AppConfig.logoPath} />
               }
-              <Link to={`/`}>
+              <Link to={`/`} className="title-3">
                 AMUNDSEN
               </Link>
             </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// This file is intentionally left blank and should be overwritten by in the build process.