the answer for all question about Oxygen Builder plugin and WordPress

How can I add in Global Colors a variable (calculated) color declared in Stylesh

How can I add in Global Colors a variable (calculated) color declared in Stylesheet (with “root:”)?
I tried to paste “var(–secondary)” in the HEX field in Global Colors, but it doesn’t work… It works only if added in the element color field as CSS, but not from Global Colors picker.

In my comment below you will find my code for declaring the variable colors.
There is any other code which i could add to be able to insert my Stylesheet colors as Global Colors in picker?
Or is this impossible in the current version?

Thanks!



Source

1 Comment
  1. Calin Maweb says

    :root {

    /*** COLOR SYSTEM ***/

    /*
    GLOBAL COLOR SETUP (HSL)
    Set the global colors below using HSL variables.
    */

    –primary-h: 44;
    –primary-s: 98%;
    –primary-l: 50%;

    –secondary-h: calc(var(–primary-h) + 120);
    –secondary-s: 100%;
    –secondary-l: 63.3%;

    –accent-h: 54.5;
    –accent-s: 15.5%;
    –accent-l: 86.1%;

    –base-h: 357.2;
    –base-s: 70.5%;
    –base-l: 47.8%;

    /*
    SHADING VARIABLES
    If you want to adjust the generated shade variants, you can adjust the percentages here.
    Higher percentages are lighter and lower are darker.
    */

    –ultra-light: 95%;
    –light: 85%;
    –dark: 25%;
    –ultra-dark: 10%;

    /*
    GLOBAL COLOR VARIABLES
    These are the variables you can use in styling. They don’t need to be edited.
    Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
    */

    –primary: hsl(var(–primary-h), var(–primary-s), var(–primary-l));
    –primary-ultra-light: hsl(var(–primary-h), var(–primary-s), var(–ultra-light));
    –primary-light: hsl(var(–primary-h), var(–primary-s), var(–light));
    –primary-dark: hsl(var(–primary-h), var(–primary-s), var(–dark));
    –primary-ultra-dark: hsl(var(–primary-h), var(–primary-s), var(–ultra-dark));
    –primary-trans-80: hsla(var(–primary-h), var(–primary-s), var(–primary-l), .8);
    –primary-trans-60: hsla(var(–primary-h), var(–primary-s), var(–primary-l), .6);
    –primary-trans-40: hsla(var(–primary-h), var(–primary-s), var(–primary-l), .4);
    –primary-trans-20: hsla(var(–primary-h), var(–primary-s), var(–primary-l), .2);
    –primary-comp: hsl(calc(var(–primary-h) + 180), var(–primary-s), var(–primary-l));
    –secondary: hsl(var(–secondary-h), var(–secondary-s), var(–secondary-l));
    –secondary-ultra-light: hsl(var(–secondary-h), var(–secondary-s), var(–ultra-light));
    –secondary-light: hsl(var(–secondary-h), var(–secondary-s), var(–light));
    –secondary-dark: hsl(var(–secondary-h), var(–secondary-s), var(–dark));
    –secondary-ultra-dark: hsl(var(–secondary-h), var(–secondary-s), var(–ultra-dark));
    –secondary-trans-80: hsla(var(–secondary-h), var(–secondary-s), var(–secondary-l), .8);
    –secondary-trans-60: hsla(var(–secondary-h), var(–secondary-s), var(–secondary-l), .6);
    –secondary-trans-40: hsla(var(–secondary-h), var(–secondary-s), var(–secondary-l), .4);
    –secondary-trans-20: hsla(var(–secondary-h), var(–secondary-s), var(–secondary-l), .2);
    –secondary-comp: hsl(calc(var(–secondary-h) + 180), var(–secondary-s), var(–secondary-l));
    –accent: hsl(var(–accent-h), var(–accent-s), var(–accent-l));
    –accent-ultra-light: hsl(var(–accent-h), var(–accent-s), var(–ultra-light));
    –accent-light: hsl(var(–accent-h), var(–accent-s), var(–light));
    –accent-dark: hsl(var(–accent-h), var(–accent-s), var(–dark));
    –accent-ultra-dark: hsl(var(–accent-h), var(–accent-s), var(–ultra-dark));
    –accent-trans-80: hsla(var(–accent-h), var(–accent-s), var(–accent-l), .8);
    –accent-trans-60: hsla(var(–accent-h), var(–accent-s), var(–accent-l), .6);
    –accent-trans-40: hsla(var(–accent-h), var(–accent-s), var(–accent-l), .4);
    –accent-trans-20: hsla(var(–accent-h), var(–accent-s), var(–accent-l), .2);
    –accent-comp: hsl(calc(var(–accent-h) + 180), var(–accent-s), var(–accent-l));
    –base: hsl(var(–base-h), var(–base-s), var(–base-l));
    –base-ultra-light: hsl(var(–base-h), var(–base-s), var(–ultra-light));
    –base-light: hsl(var(–base-h), var(–base-s), var(–light));
    –base-dark: hsl(var(–base-h), var(–secondary-s), var(–dark));
    –base-ultra-dark: hsl(var(–base-h), var(–base-s), var(–ultra-dark));
    –base-trans-80: hsla(var(–base-h), var(–base-s), var(–base-l), .8);
    –base-trans-60: hsla(var(–base-h), var(–base-s), var(–base-l), .6);
    –base-trans-40: hsla(var(–base-h), var(–base-s), var(–base-l), .4);
    –base-trans-20: hsla(var(–base-h), var(–base-s), var(–base-l), .2);
    –base-comp: hsl(calc(var(–base-h) + 180), var(–base-s), var(–base-l));

    /*** END COLOR SYSTEM ***/
    }

Leave A Reply

Your email address will not be published.

Oxyrealm Docs