added plotly fonts, added header style mixin, applied heading styles sparsely

Author: aulneau

src/styles/_mixins.scss

@@ -59,29 +59,28 @@
 
 @mixin button($variant: default) {
   background-color: var(--color-button-#{$variant}-base-fill);
-  border-color:var(--color-button-#{$variant}-base-border);
+  border-color: var(--color-button-#{$variant}-base-border);
   color: var(--color-button-#{$variant}-base-text);
 
-  @if($variant == primary or $variant == upgrade){
+  @if ($variant == primary or $variant == upgrade) {
     text-shadow: $text-shadow--dark-ui;
-    svg{
+    svg {
       @include drop-shadow--dark-ui;
     }
   }
 
   &:hover {
     background-color: var(--color-button-#{$variant}-hover-fill);
-    border:1px solid var(--color-button-#{$variant}-hover-border);
+    border: 1px solid var(--color-button-#{$variant}-hover-border);
     color: var(--color-button-#{$variant}-hover-text);
   }
   &:active {
     background-color: var(--color-button-#{$variant}-active-fill);
-    border:1px solid var(--color-button-#{$variant}-active-border);
+    border: 1px solid var(--color-button-#{$variant}-active-border);
     color: var(--color-button-#{$variant}-active-text);
   }
 }
 
-
 @mixin generateVars() {
   // Base Color Variables
   @each $var, $val in $colors {
@@ -165,3 +164,28 @@
     #{--sidebar}-#{$var}: $val;
   }
 }
+
+@mixin heading($type: 'base') {
+  @if ($type == 'small') {
+    color: var(--color-text-header);
+    font-size: var(--font-size-heading-small);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--font-leading-head);
+    font-family: var(--font-family-headings);
+    letter-spacing: 0.5px;
+  } @else if ($type == 'medium') {
+    color: var(--color-text-header);
+    font-size: var(--font-size-heading-medium);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--font-leading-head);
+    font-family: var(--font-family-headings);
+    letter-spacing: 0.5px;
+  } @else {
+    color: var(--color-text-header);
+    font-size: var(--font-size-heading-base);
+    font-weight: var(--font-weight-normal);
+    line-height: var(--font-leading-head);
+    font-family: var(--font-family-headings);
+    letter-spacing: 0.5px;
+  }
+}

src/styles/components/containers/_info.scss

@@ -1,9 +1,6 @@
 .info {
   &__title {
-    color: var(--color-text-header);
-    font-size: var(--font-size-medium);
-    font-weight: var(--font-weight-semibold);
-    line-height: var(--font-leading-head);
+    @include heading('small');
     padding: var(--spacing-half-unit) var(--spacing-half-unit)
       var(--spacing-quarter-unit) var(--spacing-half-unit);
   }

src/styles/components/containers/_menupanel.scss

@@ -3,8 +3,10 @@
   display: flex;
   justify-content: flex-end;
   flex-grow: 1;
+
   &--ownline {
     padding-top: var(--spacing-quarter-unit);
+    width: 100%;
   }
   &__label {
     font-weight: var(--font-weight-semibold);

src/styles/components/containers/_panel.scss

@@ -47,9 +47,7 @@
         }
       }
       &__heading {
-        color: var(--color-text-header);
-        font-size: var(--font-size-large);
-        font-weight: var(--font-weight-semibold);
+        @include heading();
       }
       &__content {
         font-size: var(--font-size-base);

src/styles/components/fields/_field.scss

@@ -10,6 +10,7 @@
   min-height: 32px;
   padding: var(--spacing-quarter-unit) 0;
   width: 100%;
+  position: relative;
   &__no-title {
     width: 100%;
     padding: 0 var(--spacing-half-unit);

src/styles/variables/_typography.scss

@@ -1,11 +1,4 @@
-$default-font-weight-light: 400;
-$default-font-weight-normal: 400;
-$default-font-weight-semibold: 600;
-$default-font-weight-bold: 700;
-$default-font-size: 13px;
-$default-font-size-small: 12px;
-$default-font-size-medium: 14px;
-$default-h5-size: 16px;
+@import url('https://fonts.googleapis.com/css?family=Dosis:500,700|Open+Sans:400,400i,600,700');
 
 $font-weight-light: 400;
 $font-weight-normal: 400;
@@ -17,7 +10,17 @@ $font-size-medium: 14px;
 $h5-size: 16px;
 
 $font: (
-  size: (base: 13px, small: 11px, medium:14px, large:16px, h5: 16px),
+  size:
+    (
+      base: 13px,
+      small: 11px,
+      medium:14px,
+      large:16px,
+      heading-base: 24px,
+      heading-small: 18px,
+      heading-large: 28px,
+      h5: 16px
+    ),
   weight:
     (
       light: $font-weight-light,
@@ -26,5 +29,9 @@ $font: (
       bold: $font-weight-bold
     ),
   leading: (body: 1.6, head: 1.2),
-  family: (body: ('Open Sans', --apple-default, sans-serif))
+  family:
+    (
+      body: ('Open Sans', --apple-default, sans-serif),
+      headings: ('Dosis', sans-serif)
+    )
 );