extendTheme

Function used to customize theme components styles.

The extendTheme takes in the current theme you pass and returns an updated theme with added styles and configurations.

With extendTheme you can add more variants and sizes to these components.

Adding new variant

You can only add a new variant to the theme, and you should not override variant in the current theme.

const theme = extendTheme(someStyles, currentTheme);

Usage

Import

To import the funtion you just have to use this code below.

import { extendTheme } from '@marigold/system';

Examples

Customzing the base styles of a component

Here in this example we will customize the background of Button component using extendTheme function

Some content

Customzing component with multiple slots

In this example we will style component with slots like Tabs component wich contains slots such as container, tab, tabpanel and tabList .

Adding new variants and sizes to a component

In this example we are adding a new size medium and variant tertiary to a component