For each project, there are defined colors and each of the colors has a specific role and is used for specific elements and their states (primary, secondary, etc).

Where this element can be seen?

Colors are the common elements of the e-commerce site. It can be found everywhere.

How should this element be designed?

The only required colors to provide a developer are:

• Primary - the color of most interactive elements
• Secondary - the color of some interactive elements
• Text - the color of most typography elements
• Error - the color of error messages, notifications, etc.
• Success - the color of success messages, notifications, etc.
• Info - the color of informational messages, notifications, etc.

Please provide these colors inside of your design page with proper labels.default-secondary-base-color

<aside> ℹ️ Usually, styling this element takes from-to: 2-5h

</aside>

How the design may look like?

Design Example 1

Design Example 2

How to develop styles for this element?

The first step in developing the main application look is to define the theme colors. This will immediately bring the app closer to the intended look and feel.

The base colors should be provided by designers in the following format. Mainly there are primary, secondary, text, error, success, and info colors but for specific projects, there can be additional colors that should be added and displayed on the style guide or base-template page.

Here are steps for configuration of colors:

1. Override the src/style/main.scss file, if not already. Copy the file from the parent (likely, ScandiPWA) theme.

2. Create _abstract.override.scss under src/style/abstract/ directory, if not already.

3. Create _variables.override.scss under src/style/abstract/ directory.

4. Add @import './variables.override'; to _abstract.scss, if not already.

5. Put needed content inside _variables.override.sccs. The example should look like this, but it depends on color schema for certain project:

   
   $default-primary-base-color: <PRIMARY COLOR>;
   $default-primary-dark-color: ...;
   $default-primary-light-color: ...;
   $default-secondary-base-
   
   color: <SECONDARY COLOR>;
   $default-secondary-dark-color: ...;
   $default-secondary-light-color: ...;
   

   • <PRIMARY COLOR> - Primary color from designs
   • <SECONDARY COLOR> - Secondary colors from designs
   • The rest of the colors has to be adjusted as per designs

6. Create _root.override.scss under src/style/base/ directory, if not already. Put needed content inside, the following content can be an example (can be adjusted with additional colors as per design):

   
   $error-color: <ERROR COLOR>;
   $success-color: <SUCCESS COLOR>;
   $info-color: <INFO COLOR>;
   $text-color: <TEXT COLOR>;
   
   :root {
   	--primary-error-color: #{$error-color};
   	--primary-success-color: #{$success-color};
   	--primary-info-color: #{$info-color};
   	--body-content-color: #{$text-color};
   }
   

   • <TEXT COLOR> - Text colors from designs
   • <ERROR COLOR> - Error color from designs
   • <SUCCESS COLOR> - Success colors from designs
   • <INFO COLOR> - Info colors from designs

7. Update StyleGuidePage.component.js to display colors, the implementation can be done as examples below:

   • StyleGuidePage.component.js
   • StyleGuidePage.override.style.scss

How the implementation may look like?

Implementation Example #1

Implementation Example #2

Implementation Example #3

t

t