Global styles

[github-learning-lab[bot]]

Global Styles

:sparkles: Branch: styles

Introduction

In addition to css, which we looked at previously, Store Framework offers another type of design customization, based on style.json.

Semantic styling

Every Store Framework block benefit from the same semantic styles definitions, based on Tachyons. In practice, it means that instead of having to change all button backgrounds to use color that you want, you just need to redefine the color of an action-primary background. Customizations using style.json tend a very big impact through css, since the store's visual identity across every page is usually maintained that way, without requiring a lot of changes. Therefore, use this tool whenever possible, thus avoiding unnecessary css overhead.

Investigating style.json

Colors

styles/configs/style.json can be confusing at first, because it contains all the style definitions that every Store Framework visual block uses. However, inspecting browser elements is usually a good way to identify which styles to change. For example, right mouse click on any store button and select inspect.

Looking at the side bar that opened in Chrome, we notice a couple of definitions, one of them being the button background color (#0f3e99):

In addition, if you inspect while hovering, you'll notice the hover color (#072c75):

If we search the occurrences of both colors in style.json, we uncover that the colors we inspected are actually used as action-primary for the hover-background and background, for example. This gives us a better idea of where this definition may appear again.

Typography

The process to discovering text semantics with editable fields is the same as the above, we can search for attributes such as font size, weight and family. When inspecting a level 1 heading for example, we notice that its size is 3 rem.

Activity

1. In style.json, replace every color occurrence that you find, substituting:

   • #072c75 with #45a6a3
   • #0F3E99 with #52BAB7

2. Change the font size for a level 1 heading so that its height is now 2.5 rem.

The expected result is as it follows:

---

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the correct color changes :x: You didn't change the heading 1 size to 2.5rem

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the correct color changes :x: You didn't change the heading 1 size to 2.5rem

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the correct color changes :x: You didn't change the heading 1 size to 2.5rem

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Code compilation :white_check_mark: Make the correct color changes :white_check_mark: Change the heading 1 size to 2.5rem

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!