diff --git a/app-starter/styles/vuetify-settings.scss b/app-starter/styles/vuetify-settings.scss new file mode 100644 index 00000000..59e170e0 --- /dev/null +++ b/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 +); diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 4b49ac31..989ca484 100644 --- a/docs/_sidebar.md +++ b/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) diff --git a/docs/vuetify-sass-variables.md b/docs/vuetify-sass-variables.md new file mode 100644 index 00000000..02e1d931 --- /dev/null +++ b/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 +); +``` diff --git a/docs/wegue-configuration.md b/docs/wegue-configuration.md index 4313a50c..a5358788 100644 --- a/docs/wegue-configuration.md +++ b/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: diff --git a/package-lock.json b/package-lock.json index 9e163971..09144b8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "name": "wegue", "version": "3.0.0-dev", "dependencies": { - "@fontsource/roboto": "^5.2.8", "@material-design-icons/font": "0.14.15", "@mdi/font": "7.4.47", "@vue/compat": "^3.5.22", @@ -1211,15 +1210,6 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, - "node_modules/@fontsource/roboto": { - "version": "5.2.8", - "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.8.tgz", - "integrity": "sha512-oh9g4Cg3loVMz9MWeKWfDI+ooxxG1aRVetkiKIb2ESS2rrryGecQ/y4pAj4z5A5ebyw450dYRi/c4k/I3UBhHA==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/package.json b/package.json index 6fa65edd..836ca1df 100644 --- a/package.json +++ b/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", diff --git a/src/main.js b/src/main.js index d413d744..e58266e4 100644 --- a/src/main.js +++ b/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'; diff --git a/src/styles/wegue.css b/src/styles/wegue.css index c3488b6d..d2056732 100644 --- a/src/styles/wegue.css +++ b/src/styles/wegue.css @@ -5,7 +5,6 @@ html { } .wgu-app { - font-family: Avenir, Helvetica, Arial, sans-serif; position: relative; width: 100%; } diff --git a/upgrade-notes.md b/upgrade-notes.md index adbbfe9f..c183034f 100644 --- a/upgrade-notes.md +++ b/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 diff --git a/vite.config.js b/vite.config.js index 3877164f..71e2fd88 100644 --- a/vite.config.js +++ b/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?)$/)