Processor for background and text colors

[SantosGuillamot]

Description

Sometimes, we'd want to be able to specify the color of some elements instead of using the default one.

We'll have a color palette both in WP and in the Frontity project with the common colors used in the design, but we should accept custom colors too. Both the WP palette and the frontity.settings should have the same common colors defined.

We have to process both the background colors and the text colors, and it can be used inside any tag.

How it works

• If we select a new background color in Gutenberg, it will add the class has-background-color.

• If we select a new text color in Gutenberg, it will add the class has-text-color.

• If the color selected for the background is inside the WP palette, it will add a new class with the format has-$slug-background-color, that should be process and matched with the frontity.settings.

• If the color selected for the text is inside the WP palette, it will add a new class with the format has-$slug-color, that should be process and matched with the frontity.settings.

• In order to access the $slug color inside frontity.settings, we can find it at state.theme.colors.$slug. The slug inside the class and in frontity.settings must match.

• If we use a custom color code, for both the background and the text, it will be added inside the style attribute.

HTML

Normal paragraph

<p>Some paragraph</p>

Paragraph with palette colors in both background and text

<p class="has-text-color has-background has-frontity-color has-orange-background-color">Some paragraph</p>

Paragraph with custom colors in both background and text

<p class="has-text-color has-background" style="color: rgb(163, 39, 0); background-color: rgb(186, 173, 214);">Some paragraph</p>

Where to check

Inside /common-styles/ page:

• Body with palette colors
• Body with custom colors