<main>
            <!-- Your main components -->
        </main>
    </ThemeProvider>
);

}

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 `src/index.css` like this

```css
<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>

4. Lastly - if not already done - import your stylesheet to src/index.js
5. Be sure to not change the values for font-family and src: local(). Replace <NAME_OF_THE_FILE> with the filename.

Product Kit React also provides responsive spacings from Product Kit Core. You can use them by importing the scaledSpacings function in the component and using it inside the sx prop of a component. More on spacings in the "Usage" section.

// in MyComponent.js

import { scaledSpacing } from '@daimler/productkit-react'

export default function MyComponent() {
    return (
        <Grid sx={{ ...scaledSpacing("mt", "xxl") }}>
            <!-- this section now has a responsive top-margin of size XXL -->
        </section>
    );
}

Advanced: By importing tokens and tokensDark, you can also use the core variables directly inside of your React app. This could come in handy for example for opacity-values:

// in App.js

import { tokens, tokensDark } from '@daimler/productkit-react'

export default function App() {
  return (
    <IconButton
      color="inherit"
      sx={{
        opacity: state
          ? 1 - tokens.opacityApplicationIconHigh
          : 1 - tokensDark.opacityApplicationIconContrastHigh,
      }}
    >
      <MenuIcon />
    </IconButton>
  )
}

Your MUI components are now styled accordingly to the styleguide of Mercedes-Benz Tech Innovation!

Usage

Colors

You can use all custom Mercedes-Benz Tech Innovation colors like primary (corporate blue) or secondary (corporate pink) as well as other brand colors with their shade like grayblue-400 and text colors in either of the following ways:

• Using the color prop
• Access colors using the sx prop
• Calling useTheme() to later call the colors in e.g. the style prop

<AppBar color='primary'> ... </AppBar>

<Box sx={{ color: 'secondary.main' }}>Text</Box>

<IconButton sx={{ color: 'red-400.main' }}>
    <MenuIcon />
</IconButton>

const theme = useTheme() <!-- Don't forget to import useTheme -->
<div style={{ color: theme.palette.text.secondary }}>Text</Box>

The correct contrast color is set automatically, but can be called programmatically with for example red.contrastText or red-800.contrastText.

Note that you have to set color="inherit" when using icons on colored background in order to receive the correct contrast color.

All custom colors of Mercedes-Benz Tech Innovation are mentioned in Product Kit Core.

Spacing

The standard way of applying spacing in MUI is adding for example m={2} or sx={{ m: 2 }} for a margin of 16px (2 * 8). With Product Kit React, 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 be responsive regarding the width of the screen according to the spacing scale of Product Kit Core.

// in MyComponent.js

import { scaledSpacing } from '@daimler/productkit-react'

export default function MyComponent() {
    return (
        <Box sx={{ ...scaledSpacing("px", "3xs") }}>
            <!-- this section now has a responsive padding-left and padding-right of size 3xs -->
        </section>
    );
}

For further information on MUI spacings visit the MUI Spacing Documentation. Information on responsive spacings with t-shirt sizes can be found in Product Kit Core

Container

You should use the main-tag alongside CssBaseline and either of the custom Mercedes-Benz Tech Innovation themes to wrap all your main components in order to get responsive margins and max-widths. Please refer to the "Installation & Setup" section for more information and a code example on this.

Typography

You can use typography as you are used to from MUI. Custom Mercedes-Benz Tech Innovation responsive tokens are applied automatically.

<Typography variant="h6"> I'm a headline 6 and I'm responsive! </Typography>

Darkmode

You can initially use one of the two dark themes (themeCompactDark and themeWideDark) or switch the theme during runtime. One example of how to accomplish this using React Hooks:

// in src/App.js
// don't forget to import the necessary packages and fucntions

export default function App() {
    const [state, setState] = React.useState(true);
    const muiThemeLight = createTheme(themeCompactLight)
    const muiThemeDark = createTheme(themeCompactDark)
    const switchDarkMode = () => {
        setState(!state)
    }
    return (
        <ThemeProvider theme={state ? muiThemeLight : muiThemeDark}>
            <CssBaseline enableColorScheme />
            <Navbar>
                <FormGroup>
                    <FormControlLabel control={<Switch color="secondary" onChange={switchDarkMode}/>} label="Darkmode" />
                </FormGroup>
            </Navbar>
            <main>
                <!-- Your main components -->
            </main>
        </ThemeProvider>
    );
}

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

Elevation

You can use the elevation prop to apply elevation to supported MUI components. In dark mode, the elevation will also change the surface (paper) color 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.