Merge pull request #483 from Dataport/feature/make-font-family-selectable

feat: make font family selectable

Author: warm-coolguy

examples/snowbox/index.js

@@ -62,6 +62,13 @@ const dataportTheme = {
 				default: '0 10px 10px 10px',
 			},
 		},
+		typography: {
+			font: {
+				family: {
+					default: 'Consolas',
+				},
+			},
+		},
 	},
 }
 

src/core/index.ts

@@ -9,7 +9,6 @@
  */
 /* eslint-enable tsdoc/syntax */
 
-import '@kern-ux/native/dist/fonts/fira-sans.css'
 import { defineCustomElement } from 'vue'
 
 import PolarContainer from './components/PolarContainer.ce.vue'

src/core/types/theme.ts

@@ -14,10 +14,22 @@ export interface KernThemeTree {
 /**
  * Describes the theming options of KERN.
  * The exhaustive list of parameters is documented in `@kern-ux/native`.
+ *
+ * **About fonts**
+ *
+ * Please mind that setting a value to `kern.typography.font.family.default`
+ * will stop the client from loading the font `Fira Sans` used in the KERN
+ * design system. 'inherit' will not work as a value due to technical
+ * limitations of the ShadowDOM. To inherit whatever would naturally arrive or
+ * is styled on the host node, use `''` (empty string).
+ * You may also set `"Fira Sans", sans-serif` (the default value) to this
+ * variable in case you already have the font loaded to prevent loading it
+ * twice.
  */
 export interface KernTheme {
 	color: KernThemeTree
 	metric: KernThemeTree
+	typography: KernThemeTree
 }
 
 /**

src/core/utils/loadKern.ts

@@ -37,6 +37,11 @@ export function loadKern(host: ShadowRoot, theme: Partial<KernTheme> = {}) {
 	`)
 	host.adoptedStyleSheets.push(kernSheet)
 
+	// @ts-expect-error | It's fine, we're getting `undefined` for an access on string, too.
+	if (typeof theme.typography?.font?.family?.default !== 'undefined') {
+		void import('@kern-ux/native/dist/fonts/fira-sans.css')
+	}
+
 	const kernTheme = buildKernTheme(theme)
 	host.adoptedStyleSheets.push(kernTheme)
 }