Add support to customize the path of the custom fonts (#12)

* Add support to customize the path of the custom fonts

* Remove unnecessary conditional check

* Improve body resets

* Avoid always adding the :root selector

Author: ncamera

packages/unanimo/src/unanimo.scss

@@ -44,6 +44,7 @@
 
   // Font face
   $font-face: true,
+  $font-face-path: "./assets/fonts/",
 
   // Base
   $base-classes: true,
@@ -63,25 +64,25 @@
   $tree-view-navigation: true
 ) {
   // font-face
-  @if $font-face == true {
+  @if $font-face {
     @font-face {
       font-family: SourceSansPro_Regular; // 400
-      src: url("./assets/fonts/SourceSansPro_Regular.woff2");
+      src: url("#{$font-face-path}SourceSansPro_Regular.woff2");
     }
 
     @font-face {
-      font-family: SourceSansPro_SemiBold; // 700
-      src: url("./assets/fonts/SourceSansPro_SemiBold.woff2");
+      font-family: SourceSansPro_SemiBold; // 600
+      src: url("#{$font-face-path}SourceSansPro_SemiBold.woff2");
     }
 
     @font-face {
       font-family: SourceSansPro_Bold; // 700
-      src: url("./assets/fonts/SourceSansPro_Bold.woff2");
+      src: url("#{$font-face-path}SourceSansPro_Bold.woff2");
     }
   }
 
   // Light
-  @if $light-theme == true and $colors == true and $tokens == true {
+  @if $light-theme and $colors and $tokens {
     @media (prefers-color-scheme: light) {
       :root {
         @include foundation-colors--light();
@@ -91,7 +92,7 @@
   }
 
   // Dark
-  @if $dark-theme == true and $colors == true and $tokens == true {
+  @if $dark-theme and $colors and $tokens {
     @media (prefers-color-scheme: dark) {
       :root {
         @include foundation-colors--dark();
@@ -100,42 +101,47 @@
     }
   }
 
-  :root {
-    @if $tokens == true {
+  @if $tokens and
+    ($border-radius or $box-shadow or $colors or $font-size or $spacing)
+  {
+    :root {
       // border-radius
-      @if $border-radius == true {
+      @if $border-radius {
         @include border-radius();
       }
 
       // box-shadow
-      @if $box-shadow == true {
+      @if $box-shadow {
         @include box-shadow();
       }
 
       // General colors
-      @if $colors == true {
+      @if $colors {
         @include semantic-colors--general();
       }
 
       // font-size
-      @if $font-size == true {
+      @if $font-size {
         @include font-size();
       }
 
       // spacing
-      @if $spacing == true {
+      @if $spacing {
         @include spacing();
       }
     }
   }
 
   // Default background-color and color
-  @if $tokens == true and $colors == true {
+  @if $tokens and $colors {
     body {
+      display: grid;
+      min-block-size: 100dvh;
+      margin: 0;
       background-color: var(--surface-un-surface--alternative);
       color: var(--text-un-text__on-surface--positive);
 
-      @if $font-face == true {
+      @if $font-face {
         font-family: SourceSansPro_Regular;
       }
     }
@@ -144,83 +150,83 @@
   // - - - - - - - - - - - - - - - - - - - -
   //                 Resets
   // - - - - - - - - - - - - - - - - - - - -
-  @if $resets == true {
+  @if $resets {
     // box-sizing
-    @if $box-sizing-reset == true {
+    @if $box-sizing-reset {
       @include box-sizing();
     }
 
     // <button> and <a> reset
-    @if $button-reset == true {
+    @if $button-reset {
       @include button-reset();
     }
 
-    @if $input-reset == true {
+    @if $input-reset {
       @include input-reset();
     }
 
     // <hr> reset
-    @if $other-reset == true {
+    @if $other-reset {
       @include other-reset();
     }
 
     // Typography reset
-    @if $typography-reset == true {
+    @if $typography-reset {
       @include typography-reset();
     }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //              Base classes
   // - - - - - - - - - - - - - - - - - - - -
-  @if $base-classes == true {
+  @if $base-classes {
     // Button classes
-    @if $button-classes == true {
+    @if $button-classes {
       @include button-classes();
     }
 
     // Form control classes
-    @if $form-controls-classes == true {
+    @if $form-controls-classes {
       @include form-controls-classes();
     }
 
     // Typography classes
-    @if $typography-classes == true {
+    @if $typography-classes {
       @include typography-classes();
     }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //               Components
   // - - - - - - - - - - - - - - - - - - - -
-  @if $components == true {
+  @if $components {
     // card
-    @if $card == true {
+    @if $card {
       @include card();
     }
 
     // header
-    @if $header == true {
+    @if $header {
       @include header();
     }
 
     // markdown
-    @if $markdown == true {
+    @if $markdown {
       @include markdown();
     }
 
     // tab
-    @if $tab == true {
+    @if $tab {
       @include tab();
     }
 
     // tree-view
-    @if $tree-view == true {
+    @if $tree-view {
       @include tree-view();
     }
 
     // tree-view-navigation
-    @if $tree-view-navigation == true {
+    @if $tree-view-navigation {
       @include tree-view-navigation();
     }
   }