Customization

When using Gumdrops with the GumGum Design System npm package, you can customize the colors and styles to use any colors and styles you want, instead of or in addition to the default themes.

Overriding Sass variables

Create an override Sass file and import before the main theme and main files in main.scss

@import './theme-overrides'; // import theme
import '~gumgum-design/styles/scss/index';
Copy

In the override file, new values can be set for different levels of overrides

// PALETTE LEVEL
$blueColor: #0033a6;

// SLOT LEVEL
$secondaryColor: #ff0000;

// COMPONENT LEVEL
$pageHeaderPrimaryBackgroundColor: orange;
Copy

Custom classes

To create a new class that extends current classes, create the custom Sass file and import it after the theme and main files in App.scss:

@import './theme-overrides';
import '~gumgum-design/styles/scss/index';
@import './custom-text'; // import custom class file
Copy

In the custom Sass file:

.gds-text--header-custom {
    @extend .gds-text--header-xl;
    @extend .gds-text--bold;
    @extend .-text-tr-cap;
    @extend .-color-tx-ter;
    @extend .-m-v-3;
}
Copy