feat(fonts): default to non-licensed font-family [KHCP-3479]

docs/style-guide/type.md

@@ -35,7 +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
 

packages/styles/_variables.scss

@@ -1,78 +1,76 @@
 $colors: (
-  blue-100: #F2F6FE,
-  blue-200: #BDD3F9,
-  blue-300: #8AB3FA,
-  blue-400: #3972D5,
-  blue-500: #1155CB,
+  blue-100: #f2f6fe,
+  blue-200: #bdd3f9,
+  blue-300: #8ab3fa,
+  blue-400: #3972d5,
+  blue-500: #1155cb,
   blue-600: #003694,
-  blue-700: #0A2B66,
+  blue-700: #0a2b66,
 
-  petrol-100: #EAF4FB,
-  petrol-200: #0364AC,
+  petrol-100: #eaf4fb,
+  petrol-200: #0364ac,
 
-
-  purple-100: #D7D8FE,
-  purple-200: #BEC0FD,
-  purple-300: #9396FC,
-  purple-400: #473CFB,
+  purple-100: #d7d8fe,
+  purple-200: #bec0fd,
+  purple-300: #9396fc,
+  purple-400: #473cfb,
 
   steel-100: #f0f4fa,
   steel-200: #dae3f2,
   steel-300: #a3b6d9,
   steel-400: #7d91b3,
-  steel-500: #727E94,
+  steel-500: #727e94,
   steel-600: #395380,
   steel-700: #273c61,
 
-  red-100: #FFDEDE,
-  red-200: #FFCCCC,
-  red-300: #FF9A99,
-  red-400: #FF7877,
-  red-500: #D44324,
-  red-600: #E50000,
+  red-100: #ffdede,
+  red-200: #ffcccc,
+  red-300: #ff9a99,
+  red-400: #ff7877,
+  red-500: #d44324,
+  red-600: #e50000,
   red-700: #922021,
 
-  green-100: #E8F8F5,
-  green-200: #C0F2D5,
-  green-300: #84E5AE,
-  green-400: #42D782,
-  green-500: #07A88D,
+  green-100: #e8f8f5,
+  green-200: #c0f2d5,
+  green-300: #84e5ae,
+  green-400: #42d782,
+  green-500: #07a88d,
   green-600: #008871,
-  green-700: #13755E,
+  green-700: #13755e,
 
-  teal-100: #CDF1FE,
-  teal-200: #91E1FC,
-  teal-300: #169FCC,
-  teal-400: #0A7FAE,
-  teal-500: #006E9D,
+  teal-100: #cdf1fe,
+  teal-200: #91e1fc,
+  teal-300: #169fcc,
+  teal-400: #0a7fae,
+  teal-500: #006e9d,
 
-  yellow-100: #FFF3D8,
-  yellow-200: #FFE6BA,
-  yellow-300: #FFD68C,
-  yellow-400: #FABE5F,
-  yellow-500: #C67C06,
-  yellow-600: #A05604,
+  yellow-100: #fff3d8,
+  yellow-200: #ffe6ba,
+  yellow-300: #ffd68c,
+  yellow-400: #fabe5f,
+  yellow-500: #c67c06,
+  yellow-600: #a05604,
 
-  grey-100: #F8F8FA,
-  grey-200: #F1F1F5,
-  grey-300: #E7E7EC,
-  grey-400: #B6B6BD,
-  grey-500: #6F7787,
-  grey-600: #3C4557,
+  grey-100: #f8f8fa,
+  grey-200: #f1f1f5,
+  grey-300: #e7e7ec,
+  grey-400: #b6b6bd,
+  grey-500: #6f7787,
+  grey-600: #3c4557,
 
-  black-85: rgba(0, 0, 0, .85),
-  black-70: rgba(0, 0, 0, .70),
-  black-45: rgba(0, 0, 0, .45),
-  black-25: rgba(0, 0, 0, .25),
-  black-10: rgba(0, 0, 0, .10),
+  black-85: rgba(0, 0, 0, 0.85),
+  black-70: rgba(0, 0, 0, 0.7),
+  black-45: rgba(0, 0, 0, 0.45),
+  black-25: rgba(0, 0, 0, 0.25),
+  black-10: rgba(0, 0, 0, 0.1),
+  black-100: #dfdfdf,
+  black-200: #b1b2b1,
+  black-300: #6f7787,
+  black-400: #3c4557,
+  black-500: #0b172d,
 
-  black-100: #DFDFDF,
-  black-200: #B1B2B1,
-  black-300: #6F7787,
-  black-400: #3C4557,
-  black-500: #0B172D,
-
-  white: #ffffff
+  white: #ffffff,
 );
 $spacing: (
   xxs: 4px,
@@ -82,7 +80,7 @@ $spacing: (
   lg: 24px,
   xl: 32px,
   xxl: 48px,
-  xxxl: 64px
+  xxxl: 64px,
 );
 $type-sizes: (
   xxxl: 32px,
@@ -95,8 +93,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)`

packages/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);
   }
 }