feat: add regular and monospace font (#102)

<!-- Is your PR related to an issue? Then please link it via the "closes
#" below. Else, remove it. -->

## Description

Add CSS variables `--onyx-font-family` and `--onyx-font-family-mono`.
Also update docs on how to install the font families since we should not
directly bundle them with Onyx because the project should be able to use
different fonts.

.changeset/tame-adults-cheat.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: add CSS variables `--onyx-font-family` and `--onyx-font-family-mono`

apps/docs/src/.vitepress/config.ts

@@ -36,6 +36,7 @@ export default defineConfig({
         items: [
           { text: "Getting Started", link: "/getting-started" },
           { text: "i18n", link: "/i18n/" },
+          { text: "Typography", link: "/typography" },
           { text: "The Team", link: "/team" },
         ],
       },

apps/docs/src/typography.md

@@ -0,0 +1,37 @@
+# Typography
+
+The Onyx design system relies on a default (sans-serif) and a monospace font family.
+
+Onyx is intended to be used with the following font families which are open-source
+and free to use under the [SIL Open Font License](https://en.wikipedia.org/wiki/SIL_Open_Font_License):
+
+- Default: [Source Sans 3](https://fontsource.org/fonts/source-sans-3)
+- Monospace: [Source Code Pro](https://fontsource.org/fonts/source-code-pro)
+
+## Using custom font families
+
+::: info Default font families
+The above default font families are already bundled into the component library
+so you don't need to install them manually.
+:::
+
+If you want to use custom font families, you need to install them and override the following CSS variables manually.
+
+We recommend installing font families as npm package using [Fontsource](https://fontsource.org).
+
+::: code-group
+
+```css [custom.css]
+/* import your custom fonts here... */
+:root {
+  --onyx-font-family: "My custom font family", sans-serif;
+  --onyx-font-family-mono: "My custom mono font family", monospace;
+}
+```
+
+```ts [main.ts]
+// make sure to import your custom styles AFTER "sit-onyx/style.css"
+import "custom.css";
+```
+
+:::

packages/sit-onyx/package.json

@@ -40,6 +40,8 @@
     "vue": ">= 3"
   },
   "devDependencies": {
+    "@fontsource-variable/source-code-pro": "^5.0.17",
+    "@fontsource-variable/source-sans-3": "^5.0.19",
     "@playwright/experimental-ct-vue": "^1.40.1",
     "@playwright/test": "^1.40.1",
     "@sit-onyx/storybook-utils": "workspace:^",

packages/sit-onyx/src/components/TestInput/TestInput.vue

@@ -158,6 +158,7 @@ watch(
 .input {
   width: max-content;
   display: inline-block;
+  font-family: var(--onyx-font-family);
 
   &__label {
     margin-right: 8px;

packages/sit-onyx/src/styles/index.scss

@@ -1 +1,9 @@
-// global styles
+// global component styles
+// DO NOT ADD ANY STYLES HERE THAT HAVE SIDE EFFECTS ON THE GLOBAL APPLICATION (e.g. body, <a> etc.)
+@use "@fontsource-variable/source-code-pro";
+@use "@fontsource-variable/source-sans-3";
+
+:root {
+  --onyx-font-family: "Source Sans 3 Variable", sans-serif;
+  --onyx-font-family-mono: "Source Code Pro Variable", monospace;
+}