Adjust fonts to include import, add weight utilities, and allow overr…

…ides per font

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/rolemodel-design-system",
-  "version": "0.0.6-alpha",
+  "version": "0.0.7-alpha",
   "description": "The design system RoleModel uses to kickstart projects with a consistent starting point",
   "main": "scss/rolemodel-design-system.scss",
   "scripts": {

scss/core/utilities.scss

@@ -155,6 +155,12 @@
 .font-xxxxl { font-size: var(--rms-font-4x-large); }
 .font-xxxxxl { font-size: var(--rms-font-5x-large); }
 
+// Font Weight
+.font-light { font-weight: var(--rms-font-weight-light); }
+.font-normal { font-weight: var(--rms-font-weight-normal); }
+.font-semi-bold { font-weight: var(--rms-font-weight-semi-bold); }
+.font-bold { font-weight: var(--rms-font-weight-bold); }
+
 // Box Margin
 
 .margin-xl {

scss/theme/base_theme.scss

@@ -29,10 +29,6 @@
   --rms-colors-neutral-variant-l: 38%;
 }
 
-@mixin fonts {
-  --rms-font-family: 'Roboto', sans-serif;
-}
-
 @mixin border-radius {
   --rms-radius-small:   2px;
   --rms-radius-medium:  4px;
@@ -81,6 +77,12 @@
   --rms-line-height-loose:  1.6;
 }
 
+@mixin fonts {
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+  --rms-font-family: 'Roboto', sans-serif;
+  --rms-font-weight-semi-bold: 500; // Roboto does not have a semi bold variant so we adjust down to medium
+}
+
 @mixin spacing-scales {
   // This is using the Golden Ratio to get these numbers
   // Visit https://codyhouse.co/ds/globals/spacing to play around with different ratios
@@ -106,18 +108,15 @@
   // Color HSLs
   @include color-varieties;
 
-  // Font Families
-  @include fonts;
-
   // Border
   @include border-strokes;
   @include border-radius;
   @include border-width;
 
-  // Font Ratios
+  // Font
   @include font-scales;
-
   @include font-weights;
+  @include fonts;
 
   // Line heights
   @include line-heights;