Merge pull request #8797 from owncloud/allow-font-family-in-theming

feat: add font family to theming
owncloud · Apr 12, 2023 · f732bf1 · f732bf1
2 parents 6a49989 + addc422
commit f732bf1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/changelog/unreleased/enhancement-font-family-theming b/changelog/unreleased/enhancement-font-family-theming
@@ -0,0 +1,6 @@
+Enhancement: Font family in theming
+
+We've added support for modifying the font family via theming.
+Please note that the chosen font needs to be made available as `font-face` via additional CSS.
+
+https://github.com/owncloud/web/pull/8797
diff --git a/docs/theming/_index.md b/docs/theming/_index.md
@@ -97,6 +97,7 @@ In general, the theme loader looks for a `designTokens` key inside your theme co
       "designTokens": {
         "breakpoints": {},
         "colorPalette": {},
+        "fontFamily": "",
         "fontSizes": {},
         "sizes": {},
         "spacing": {}
@@ -205,6 +206,18 @@ Font size variables get prepended with `--oc-font-size-`, so e.g. *"default"* cr
 }
 ```
 
+### Font family
+
+You can change the font family according to your needs. The font family gets written into the `--oc-font-family` CSS variable.
+
+```json
+{
+  "fontFamily": ""
+}
+```
+
+Please note that you also need to make the font available as a `font-face` via CSS.
+
 ### Sizes
 
 Use sizing variables to change various UI elements, such as icon and logo appearance, table row or checkbox sizes, according to your needs. 
@@ -330,6 +343,7 @@ An empty template for your custom theme is provided below, and you can use the i
           "large": "",
           "medium": ""
         },
+        "fontFamily": "",
         "sizes": {
           "form-check-default": "",
           "height-small": "",

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
@@ -6,13 +6,17 @@ import * as directives from './directives'
 
 const initializeCustomProps = (tokens = [], prefix) => {
   for (const param in tokens) {
-    ;(document.querySelector(':root') as HTMLElement).style.setProperty(
-      '--oc-' + prefix + param,
-      tokens[param]
-    )
+    initializeCustomProp(prefix + param, tokens[param])
   }
 }
 
+const initializeCustomProp = (key: string, value: string | undefined) => {
+  if (value === undefined) {
+    return
+  }
+  ;(document.querySelector(':root') as HTMLElement).style.setProperty('--oc-' + key, value)
+}
+
 export default {
   install(app, options: any = {}) {
     const themeOptions = options.tokens
@@ -21,6 +25,7 @@ export default {
     initializeCustomProps(themeOptions?.fontSizes, 'font-size-')
     initializeCustomProps(themeOptions?.sizes, 'size-')
     initializeCustomProps(themeOptions?.spacing, 'space-')
+    initializeCustomProp('font-family', themeOptions?.fontFamily)
 
     Object.values(components).forEach((c) => app.component(c.name, c))
     Object.values(directives).forEach((d) => app.directive(d.name, d))