Add Typography mixins and font variables

Author: briangesteban

styles/_typography.scss

@@ -0,0 +1,50 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+@mixin typography-header-page {
+  font-family: $font-family-primary;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-lg;
+}
+
+@mixin typography-header-sub {
+  font-family: $font-family-primary;
+  font-size: $font-size-md;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-md;
+}
+
+@mixin typography-copy {
+  font-family: $font-family-secondary;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-sm;
+}
+
+@mixin typography-label {
+  @include typography-copy;
+}
+
+@mixin typography-input {
+  @include typography-copy;
+}
+
+@mixin typography-placeholder {
+  @include typography-copy;
+}
+
+@mixin typography-link {
+  font-family: $font-family-secondary;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-regular;
+  line-height: $line-height-sm;
+
+  @include desktop {
+    font-size: $font-size-sm;
+  }
+}
+
+@mixin typography-button {
+  @include typography-copy;
+}

styles/_variables.scss

@@ -10,6 +10,22 @@ $medium-desktop-breakpoint: 1250px;
 $large-desktop-breakpoint: 1440px;
 $extra-large-breakpoint: 2560px;
 
-//Fonts
+// Font Tokens
+// Font Family
 $font-family-primary: 'Assistant', sans-serif;
-$font-family-secondary: 'Open Sans', sans-serif;
+$font-family-secondary: 'Opens Sans', sans-serif;
+
+// Font Size
+$font-size-xs: 1.25rem; // 20px
+$font-size-sm: 1.5rem; // 24px
+$font-size-md: 2.25rem; // 36px
+$font-size-lg: 4.5rem; // 72px
+
+// Font Weight
+$font-weight-regular: 400;
+$font-weight-bold: 700;
+
+// Line Height
+$line-height-sm: 1.9375rem; // 31px
+$line-height-md: 2.875rem; // 46px
+$line-height-lg: 5rem; // 80px