Add possibility to customize Vuetify SASS variables and correctly define default font family

app-starter/styles/vuetify-settings.scss

@@ -0,0 +1,6 @@
+$custom-font-family: Avenir, Helvetica, Arial, sans-serif;
+
+@use 'vuetify/settings' with (
+  $body-font-family: $custom-font-family,
+  $heading-font-family: $custom-font-family
+);

docs/_sidebar.md

@@ -10,6 +10,7 @@
     - [Reusable Components](reusable-components.md)
     - [Language Packs](language-packs.md)
     - [Custom Icons](custom-icons.md)
+    - [Vuetify SASS Variables](vuetify-sass-variables.md)
 - [QGIS2Wegue](qgis_plugin.md)
 
 

docs/vuetify-sass-variables.md

@@ -0,0 +1,50 @@
+# Vuetify SASS variables
+
+For more advanced use-cases, Wegue allows to completely customize its look and feel by overriding the `SASS` variables used by Vuetify. These overrides must be done via the `app/styles/vuetify-settings.scss` file.
+
+An extensive list of Vuetify configurable global `SASS` variables can be found [here](https://vuetifyjs.com/en/api/globals/).  
+To this list, you can also add the variables defined specifically for each component. These are listed in the `API` section of the official Vuetify documentation, at the bottom of each page dedicated to components. If you have a clear idea of the parameter you want to override, you can search the complete list of variables from the combobox located [here](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
+
+## Examples
+
+Below are two examples of customisation, one very simple and the other requiring a few additional steps.
+
+For example, it is possible to modify the border radius of component windows by changing the variable `$card-border-radius`. This can be done very easily by modifying your `app/styles/vuetify-settings.scss` file as follows:
+
+```css
+$custom-font-family: Avenir, Helvetica, Arial, sans-serif;
+
+@use 'vuetify/settings' with (
+  $body-font-family: $custom-font-family,
+  $heading-font-family: $custom-font-family,
+  $card-border-radius: 16px
+);
+```
+
+As a more complicated example, it is possible to change the font used in Wegue. To do this, you will need to install a package containing this font and include it somewhere in your code.  
+To find open-source fonts packaged in the expected format and easy to use, you can visit [fontsource.org](https://fontsource.org/). This site contains a [generic guide](https://fontsource.org/docs/getting-started/install) explaining how to include a font bundled by them, and these explanations are clearly adapted on each font-specific page.
+
+If you wanted to use the [Space Grotesk](https://fontsource.org/fonts/space-grotesk) font, you can follow [their dedicated install page](https://fontsource.org/fonts/space-grotesk/install).
+
+First, you must install the font by installing its NPM package:
+
+```sh
+npm i --save @fontsource-variable/space-grotesk
+```
+
+You must then import this font somewhere in your code, for example in the `app/WguAppTemplate.vue` file by adding this line:
+
+```js
+import '@fontsource-variable/space-grotesk';
+```
+
+And finally, you must modify the Vuetify `SASS` variables by modifying your `app/styles/vuetify-settings.scss` file as follows:
+
+```css
+$custom-font-family: 'Space Grotesk Variable', sans-serif;
+
+@use 'vuetify/settings' with (
+  $body-font-family: $custom-font-family,
+  $heading-font-family: $custom-font-family
+);
+```

docs/wegue-configuration.md

@@ -147,6 +147,10 @@ In some cases, the primary/secondary color may collide with the semantic colors
 
 The idea is the override the collided colors with a different tone that will deliver the same semantic feeling. As an example, the default color theme of Wegue is built based on a red tone, which collides with the semantic color for errors. To avoid collision, Wegue adapts the same strategy as in the [Crane material study](https://material.io/design/material-studies/crane.html#color) and sets an orange tone for errors.
 
+#### Advanced theme customization
+
+If changing the colour theme is not enough, Wegue allows you to customize the entire look and feel of Vuetify by redefining its internally used SASS variables. Details about this functionality and some examples can be found on [this dedicated page](vuetify-sass-variables?id=vuetify-sass-variables).
+
 ### projectionDefs
 
 The property `projectionDefs` is a nested array holding several [proj4js](https://proj4js.org) compatible projection definitions. For each array element the first item is the projection code and the second item is the [proj4](https://proj4.org) definition string. For example:

package.json

@@ -22,7 +22,6 @@
     "init:app": "node util/init-app.js"
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.2.8",
     "@material-design-icons/font": "0.14.15",
     "@mdi/font": "7.4.47",
     "@vue/compat": "^3.5.22",

src/main.js

@@ -4,18 +4,6 @@ import { md } from 'vuetify/iconsets/md';
 import { aliases as defaultAliases, mdi } from 'vuetify/iconsets/mdi';
 import 'vuetify/styles';
 import { createI18nInstance } from './locales/wgu-i18n';
-import '@fontsource/roboto/100.css';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import '@fontsource/roboto/900.css';
-import '@fontsource/roboto/100-italic.css';
-import '@fontsource/roboto/300-italic.css';
-import '@fontsource/roboto/400-italic.css';
-import '@fontsource/roboto/500-italic.css';
-import '@fontsource/roboto/700-italic.css';
-import '@fontsource/roboto/900-italic.css';
 import '@mdi/font/css/materialdesignicons.css';
 import '@material-design-icons/font';
 import 'ol/ol.css';

src/styles/wegue.css

@@ -5,7 +5,6 @@ html {
 }
 
 .wgu-app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   position: relative;
   width: 100%;
 }

upgrade-notes.md

@@ -10,10 +10,12 @@ This means components are still written using the `Options API` for example.
 To be compatible with all the required dependencies, minimal `node` version was raised to `v20.19.0` while minimal `npm` version was also raised to `v10.8.2`.
 
 Changes that were applied on the files present in the [app-starter](https://github.com/wegue-oss/wegue/commits/master/app-starter) directory should also be applied to your custom files present in the `app` directory.  
-Pay particular attention to these two points:
+Pay particular attention to these three points:
 
   - The `app/static` directory should be renamed `app/public/static` 
   - The `app/static/css` directory should be renamed `app/styles`
+  - A file named `app/styles/vuetify-settings.scss` must be present. The default minimal file can be found in the [`app-starter/styles` directory](https://github.com/wegue-oss/wegue/tree/master/app-starter/styles).  
+  For more details about its usage, please refer to the [Wegue documentation](https://wegue-oss.github.io/wegue/#/vuetify-sass-variables?id=vuetify-sass-variables).
 
 ### Vite
 

vite.config.js

@@ -36,7 +36,11 @@ export default defineConfig(({ mode }) => {
       }),
       // Remove Vue DevTools plugin when building for unit tests.
       ...(process.env.NODE_ENV === 'test' ? [] : [vueDevTools()]),
-      Vuetify(),
+      Vuetify({
+        styles: {
+          configFile: 'app/styles/vuetify-settings.scss'
+        }
+      }),
       eslintPlugin({
         // Lint src and app directories.
         shouldLint: (path) => path.match(/\/(src|app)\/[^?]*\.(vue|svelte|m?[jt]sx?)$/)