Product Kit Vue provides a theme for Mercedes-Benz Tech Innovation web frontends based on the material design framework Vuetify.
Feel free to open an issue or provide a pull request with the desired modifications.
Note that you must have node (with npm) and vue.js installed.
Create a new vue.js project using vue CLI and add Vuetify
vue create my-app
cd my-app
vue add vuetify
Install the npm package from the root directory through:
npm install @daimler/productkit-vue
Include the following line in the src/plugins/vuetify.js
file:
import colors from "@daimler/productkit-vue/src/theme/mbti/colors.js";
Add the imported preset in the existing export
statement as
export default new Vuetify({
preset: colors,
});
Lastly, copy and paste the following block in the module.exports
object in vue.config.js
:
css: {
loaderOptions: {
scss: { // 9.0.0
additionalData: `
@use "@daimler/productkit-core/dist/web/styles/mbti/scss/variables" as tokens;
@use "@daimler/productkit-core/dist/web/styles/mbti/scss/variables-dark" as tokensDark;
@use "sass:meta";
@import "@daimler/productkit-vue/src/theme/variables.scss";
`,
},
sass: { // 9.0.0
additionalData: `
@use "@daimler/productkit-core/dist/web/styles/mbti/scss/variables" as tokens
@use "@daimler/productkit-core/dist/web/styles/mbti/scss/variables-dark" as tokensDark
@use "sass:meta"
@import "@daimler/productkit-vue/src/theme/variables.scss"
`,
},
},
},
Your Vuetify components should now be styled accordingly to the styleguide of Mercedes-Benz Tech Innovation!
Product Kit Vue comes with all custom Mercedes-Benz Tech Innovation colors like primary
(corporate blue) or secondary
(corporate pink) and their shades (lighten-1
to lighten 5
and darken-1
to darken-4
). It furthermore supports the standard Vuetify color palette, including colors like green
or blue-grey
.
You can use the custom Mercedes-Benz Tech Innovation colors in different ways:
- In the
color
attribute of supporting elements likev-btn
orv-sheet
- Adding
class="primary"
to an element will change the background color of it. Adding for exampleclass="primary darken-3"
will apply a darker blue - Font color is set automatically based on the background-color. If you want to use a specific font color you can do so by applying for example the
primary--text
class (for company-blue) orprimary-contrast--text
class (for the specified contrast color for company-blue). Combined with thetext-lighten-1
class the text will appear slightly lighter. - In CSS you can use
var(--v-primary-base)
orvar(--v-primary-lighten1)
<v-btn color="primary" raised large> Button </v-btn>
<v-btn color="secondary lighten-2" tile> Button </v-btn>
<v-sheet
color="secondary"
style="border: 1px solid var(--v-secondary-darken4)"
height="200px"
></v-sheet>
<span class="primary--text">Hello World!</span>
For further information on colors visit the Vuetify Colors Documentation. All custom colors of Mercedes-Benz Tech Innovation are mentioned in Product Kit Core. Note: Contrast colors are used as text colors. If text is displayed on the background color
primary
the text color should becontrast-primary
.
The standard way of applying spacing in Vuetify is adding for example class="pa-4"
for padding or class="ma-4"
for margin. With Product Kit Vue, you are now also able to use custom and responsive spacings for padding
and margin
by applying t-shirt sizes (3xs
, xxs
, xs
, s
, m
, l
, xl
, xxl
, 3xl
) instead of absolute numbers. The spacing will now be responsive regarding the width of the screen:
<v-btn class="ma-xl"> Button </v-btn>
<v-sheet class="pt-m" height="300px"></v-sheet>
For further information on Vuetify spacings visit the Vuetify Spacing Documentation. Information on responsive spacings with t-shirt sizes can be found in Product Kit Core
When building applications with Vuetify and Product Kit Vue, you should use v-container
as a wrapper container after v-app
, as it includes max-widths that limits the content-width on large screens.
<v-app>
<v-container>
<v-main>
<router-view />
<!--for example-->
</v-main>
</v-container>
</v-app>
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>
In order to use the proprietary Mercedes-Benz font, you have to download the web font and include it in your project.
- In your
src
directory, create a new folder. You could name itfonts
for example. - Copy the
woff2
version of both the MB Corpo S Text Web and MB Corpo A Title Cond Web font into the newly createdfonts
directory. - Now you have to register both fonts as a css
font-face
in a root stylesheet, for example in the<style>
tag ofApp.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
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).
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.
We welcome any contributions. If you want to contribute to this project, please read the contributing guide.
Please read our Code of Conduct as it is our base for interaction.
This project is licensed under the MIT LICENSE.
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.