How to map Bricks Theme Colors to CSS for use in your own custom CSS

This video shows how to map CSS variables created by Bricks Themes to variables that make readable sense. This is so you can use them in your own custom CSS.
For example Bricks colors create variables with random strings. So your primary color in Bricks may be "--bricks-color-epldhe", where "--color-primary" would be more readable.
This shows how to find and map the color variables

[@francoisgonin4176]

Hi Alan, instead of mapping you can put your own variabales directly in the palette (under raw)

[@wpeasy]

So much more to Bricks when you look further :) I think that is the opposite direction, setting the palette value from a CSS variable. What I'm doing is mapping the Bricks generated variable names to readable names, so that I can use those names in Custom CSS rules. Am I missing something there?

[@francoisgonin4176]

@@wpeasy yes, it's the opposite way, but IMO much easier. You don't need to check and map the bricks variables and also it doesn't matter if they would change, let's say on another installation. Just export your palette you set up once with your variables and reus it on other installations with the same variables in you css file.

[@wpeasy]

@@francoisgonin4176 Ah ok, so reverse thinking. Create the Palette in CSS then map it to the Bricks palette, instead of using the Bricks UI to create and alter the colors.. An interesting thought. For me, I create a starter site and clone it out. So the Bricks variable names would remain the same, and not need to be re-mapped. So if I map the Bricks variables to readable names, I can use the Bricks UI on each new site to change and manage colors. Thank you though, always good to consider alternatives.

[@francoisgonin4176]

@@wpeasy ooh by trying to understand your approach I now understand the advantage of your approach. ..you can change the colors in the UI, what with my approach I can't. Took a long time to get it 🤓 as you said, really good to have alternatives. Thanks

[@NOALNOM]

Very Clever! But there is a way to onload the style css min color default Bricks palette on every page and load and use only the custom palette? Thanks!

[@wpeasy]

Sorry, I'm not following the comment? The Bricks color palette defined in the UI is included on every page. My code just maps the Bricks generated variables to readable variable names. The enables you to still use the Bricks UI for managing colors, but constant and readable names for use in custom CSS.

[@LeoMerkel]

Wonderful idea and great implementation. Congratulations. Would you be willing to share your code box CSS file?

[@wpeasy]

Sorry, I missed your comment. Happy to share. You need a SASS/SCSS preprocessor for my code. I use "Scripts Organizer" for this. Here is an example CSS. Let me know if you want the SASS code. /* Bricks color map to readable names */ :root { --wpg-color-primary: var(--bricks-color-qmfmke); --wpg-color-primary-variation: var(--bricks-color-eowdyz); --wpg-color-secondary: var(--bricks-color-xctguc); --wpg-color-secondary-variation: var(--bricks-color-xnpgcb); --wpg-color-accent: var(--bricks-color-qrsnwr); --wpg-color-accent-variation: var(--bricks-color-tozmkq); --wpg-color-heading-on-primary: var(--bricks-color-mukdky); --wpg-color-heading-on-secondary: var(--bricks-color-eggynk); --wpg-color-copy-on-primary: var(--bricks-color-qunryu); --wpg-color-copy-on-secondary: var(--bricks-color-lolqgn); --wpg-color-white: var(--bricks-color-liijmc); --wpg-color-black: var(--bricks-color-mhaghz); --wpg-color-grey-drk: var(--bricks-color-giptxa); --wpg-color-grey-md: var(--bricks-color-xqtfao); --wpg-color-grey-lt: var(--bricks-color-oxehqd); --wpg-color-grey-vlt: var(--bricks-color-xmbdpj); --wpg-color-gray-xlt: var(--bricks-color-loafzl); }