As described at the beginning of this chapter, any additional CSS should be included in the files contained in the theme/ folder.
theme/ has the same structure of core/, and it’s the place where you can override the core style or extend it by adding custom CSS.
Let’s suppose you want to replace the default color of the <h2> tag only preserving the color of the other headings. Open the theme/base/_typography.scss file and type 👇
h2, .h2 {
color: get-color(primary, 1);
}Now, let’s suppose you want to add some shadow to the buttons. Open the theme/elements/_buttons.scss file and type 👇
.button {
box-shadow: 0 8px 20px rgba(get-color(dark, 1), .1);
}For the cascading priorities of CSS, all changes made in the theme/ folder will override the core/ style 🙌