XF 2.3 Custom prefixes

[Old Nick]

Following this resource (not for XF 2.3 but...), why custom prefixes are not styled by variation?
The syntax of the code is however the same as the original ones

P

Creating custom prefix styling

Aug 24, 2019

Less is more

• Paul B
• XenForo tips & guides [2.x]

&.label--yellow { .m-labelVariation(black, #ffff91, #e6e687); }
&.label--orange { .m-labelVariation(black, #ffcb00); }

&.label--error { .m-labelVariation(#c84448, #fde9e9, #c84448); }
    
//* CUSTOM PREFIXES
&.label--campBase { .m-labelVariation(#0099cc, #e6f9ff); }
&.label--permaculture { .m-labelVariation(#ac3939, #f9ecec); }

Thanks.

 

[Old Nick]

Initially, it appears that some labels are styled for the alternative style, while most are not.

The question then becomes: what is the syntax in a LESS template to target specific style variations?
For instance, how does one create a label for the light style and then create a corresponding label for the dark style?

Thank you.

 

[Old Nick]

Any clue on this?

 

[Jeremy P]

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will not override based on system color scheme)
    }
}

At the end of the day they're both just data attributes on the HTML element (data-variation and data-color-scheme) which are present when an explicit choice is made and absent for the system variation (in which case we assume the default variation and delegate to @media (prefers-color-scheme) for overrides).

If you use style properties with variations enabled, it's handled for you automatically:

.some-class
{
    // ... the label mixin ...
    .m-labelVariation(@xf-textColorMuted, @xf-contentAltBg);
    // ... or even just regular old rules ...
    color: @xf-textColorMuted;
}

 

[Old Nick]

Great, I'll try it all tomorrow morning. Thanks !

 

[Old Nick]

If you use style properties with variations enabled, it's handled for you automatically:

Oh i understand, so using m-labelVariation with HEX or hsl code is of no use, since we do not provide it with a color variable which contains the 2 colors (default/alternative), am I right ?

//* CUSTOM PREFIXES
&.label--campBase { .m-labelVariation(#0099cc, #e6f9ff); }
&.label--permaculture { .m-labelVariation(#ac3939, #f9ecec); }

 

[Jeremy P]

Yes exactly, in that case you would want to use the mixin:

// CUSTOM PREFIXES
&.label--campBase
{
    .m-labelVariation(#0099cc, #e6f9ff);

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
         .m-labelVariation(#0099cc, #e6f9ff); // change these
    });
}

&.label--permaculture
{
    .m-labelVariation(#ac3939, #f9ecec);

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
         .m-labelVariation(#ac3939, #f9ecec); // change these
    });
}

 

[Old Nick]

Great.
And is it possible to manually create a color variable with the 2 tones as xf-myDuoColor for example and use it in Less templates?

 

[Jeremy P]

Yeah. If you're using a style from a vendor the usual caveats apply where you'll generally want to make customizations in a child style. You just create a new style property, give it a name, title, and description, select the value type, select the color sub-type, and enable variations for it. Then it can be referenced in LESS via @xf-yourPropertyName.

 

[Old Nick]

I have something to amuse myself for a little while, thank you very much for all this information.

 

[Old Nick]

Works so well, thanks @Jeremy P !
I was a little afraid of not finding the right color combination for the alternative style but ultimately just reversing the 2 colors is enough for a more than correct result!

 

[Old Nick]

light .m-labelVariation(#006080, #e6f9ff);
dark .m-labelVariation(#e6f9ff, #006080);