Merge pull request #463 from sronveaux/remove-roboto-add-vuetify-custom-style-loading

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

Author: sronveaux

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

@@ -109,6 +109,10 @@ To simplify the theming configuration, if the "themes" property isn't configured
 Note that there is a clear asymmetry in the "light" and "dark" theme configuration. In the "light" theme, the primary color is mandatory and all the
 others are derived from that. In the "dark" theme, the predominant color must be a shade of black (to comply with the [material design specification](https://material.io/design/color/dark-theme.html)), so the primary color is locked to `#272727`. Therefore, in this case the colors are derived from the second predominant color.
 
+#### Advanced theme customization
+
+If changing the color 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).
+
 #### Tips on creating a color theme
 
 In this section we offer a couple of tips on choosing colors for Wegue while meeting the [material design principles](https://material.io/design/color/the-color-system.html#color-usage-and-palettes) (hierarchy/legibility/expressiveness).

package-lock.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",

package.json

@@ -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/main.js

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

src/styles/wegue.css

@@ -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
 

upgrade-notes.md

@@ -38,7 +38,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?)$/)