</v-main>

When you don't wish to use responsive margins, you can add class="wide" to the v-container tag. Your main-content will now always stretch to the defined value in Product Kit Core. This could come in handy for layouts like dashboards where the content-width should not be limited on large screens.

<v-app>
  <v-container class="wide"> ... </v-container>
</v-app>

Typography

In order to use the proprietary Mercedes-Benz font, you have to download the web font and include it in your project.

1. In your src directory, create a new folder. You could name it fonts for example.
2. Copy the woff2 version of both the MB Corpo S Text Web and MB Corpo A Title Cond Web font into the newly created fonts directory.
3. Now you have to register both fonts as a css font-face in a root stylesheet, for example in the <style> tag of App.vue like this

<style>
@font-face {
    font-family: "MB Corpo S Text Web";
    src: local("MB Corpo S Text Web"),
        url("./fonts/<NAME_OF_THE_FILE>.woff2") format("woff2");
}

@font-face {
    font-family: "MB Corpo A Title Cond Web";
    src: local("MB Corpo A Title Cond Web"),
        url("./fonts/<NAME_OF_THE_FILE>.woff2") format("woff2");
}
</style>

Be sure to not change the values for font-family and src: local(). Replace <NAME_OF_THE_FILE> with the filename.

You can now use typography as you are used to from Vuetify. Custom Mercedes-Benz Tech Innovation font and responsive tokens are applied automatically. For accessibility reasons it is recommended to always use the referring html tag to display a typography-class:

<h1 class="text-h1">I'm a h1</h1>

<h5 class="text-h1">
  I also look like h1 although I'm a h5 so this should be avoided
</h5>

<span class="text-overline">I'm an overline</span>

Information on the custom Mercedes-Benz Tech Innovation typography can be found in Product Kit Core

Darkmode

In Vuetify, you can toggle dark mode globally by accessing the $vuetify object like following:

toggleDarkMode() {
  this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
},

This will change the theme from light to dark and vice versa on every call. For example, one could change the theme with a v-switch like this:

<v-switch
  v-model="darkSwitch"
  label="Darkmode"
  color="primary"
  @change="toggleDarkMode"
  hide-details
></v-switch>

The Mercedes-Benz Tech Innovation application colors like primary are also automatically changed when switching to dark mode (see examples).

Elevation

In darkmode, you can use the elevation attribute in supported elements like v-card to also change the surface color of the element automatically: Higher elevation, lighter surface, as described in the Material Design documentation.

Contributing

We welcome any contributions. If you want to contribute to this project, please read the contributing guide.

Code of Conduct

Please read our Code of Conduct as it is our base for interaction.

License

This project is licensed under the MIT LICENSE.

Provider Information

Please visit https://www.mercedes-benz-techinnovation.com/en/imprint/ for information on the provider.

Notice: Before you use the program in productive use, please take all necessary precautions, e.g. testing and verifying the program with regard to your specific use. The program was tested solely for our own use cases, which might differ from yours.