feat(fonts): default to non-licensed font-family (#611)

* docs: remove font family

* fix: system font

* docs: add font-family variables

* docs: fix typo

* fix(kalert): fix icon color

* feat(font-weight): add font-weight variable

docs/style-guide/type.md

@@ -35,8 +35,30 @@ mono:
 
 # Type
 
-Kong uses the [Maison Neue](https://www.milieugrotesque.com/typefaces/maison-neue/) font face.
+## Font family
 
+Kongponents defaults to the system font for `sans-serif` and `monospace`. You can customize the `font-family` by setting the CSS variables as shown here:
+
+```scss
+:root {
+  --font-family-sans: 'Roboto'; // custom font-family
+  --font-family-mono: 'Roboto Mono'; // custom font-family
+}
+```
+
+## Font weight
+
+The default font-weight (for `body`) is set to `400`. You may customize the `font-weight` by setting the CSS variable as shown here:
+
+```scss
+:root {
+  --font-weight-normal: 200; // custom font-weight
+}
+```
+
+:::tip
+This only applies to the `body` element and inherited font weights. Individual style rules still have varying `font-weight` attributes.
+:::
 ## Font size
 
 There are utility classes for `font-size`.

src/components/KAlert/KAlert.vue

@@ -484,19 +484,19 @@ div.k-alert.banner {
 
 .k-alert {
   button.close > .kong-icon {
-    svg.info {
+    &.info svg {
       stroke: var(--KAlertInfoColor, var(--blue-500, color(blue-500)));
     }
 
-    svg.success {
+    &.success svg {
       stroke: var(--KAlertSuccessColor, var(--green-600, color(green-600)));
     }
 
-    svg.danger {
+    &.danger svg {
       stroke: var(--KAlertDangerColor, var(--red-700, color(red-700)));
     }
 
-    svg.warning {
+    &.warning svg {
       stroke: var(--KAlertWarningColor, var(--yellow-500, color(yellow-500)));
     }
   }

src/styles/_utils.scss

@@ -335,7 +335,7 @@ $sides: (top, right, bottom, left);
   min-height: 100vh !important;
 }
 
-//remove button default styles for elements that act like buttons, but don't look like them
+// remove button default styles for elements that act like buttons, but don't look like them
 .non-visual-button,
 .non-visual-button:focus,
 .non-visual-button:hover {

src/styles/_variables.scss

@@ -83,8 +83,8 @@ $type-sizes: (
   xxs: 10px,
 );
 $fonts: (
-  sans: "Maison Neue",
-  mono: "Maison Neue Mono",
+  sans: sans-serif,
+  mono: monospace,
 );
 
 // Retrieve color from $colors map ie. `color(blue-500)`

src/styles/styles.scss

@@ -2,7 +2,6 @@
 // Do not remove the comment above - allows other apps to identify the style block
 
 @import "variables";
-@import "fonts";
 @import "typography";
 @import "utils";
 @import "forms/forms";
@@ -28,6 +27,6 @@
   }
   // Font weight
   body {
-    font-weight: 200;
+    font-weight: var(--font-weight-normal, 400);
   }
 }