Defining new theme variables

[danielgoodwin97]

Defining new theme variables

Topic Link

https://devdocs.magento.com/guides/v2.3/coding-standards/code-standard-less.html#location

Description

When defining new variables for a theme that are used globally, it says in the devdocs that they must be defined in the _theme.less file.

But in Magento blank's _theme.less file, it says:

Theme file should contain declarations (overrides) ONLY OF EXISTING variables

This seems to contradict the devdocs, which says that new variables (not existing) should be created there?

Possible solutions

Find out if either the devdocs, or the _theme.less file need changing?

Additional Information

I'd like to note that Luma has created variables inside of the _theme.less even with the message about using the file to override existing variables.

@copyright__background-color is only used in Luma as far as I can tell.

[hitesh-wagento]

Hi @danielgoodwin97

If you are using parent theme blank instead of luma you should add new global variables in _theme.less

[chiranjeevi-cj]

@magento i am working on this

[mrtuvn]

I think nothing wrong with that but we should following best practices here https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/theme-best-practice.html

[mrtuvn]

The note meaning when you add variables in blank _theme.less it will possible overwrite variables magento defined in https://github.com/magento/magento2/tree/2.4-develop/lib/web/css/source/lib/variables

[BarnyShergold]

@danielgoodwin97 - There has been quite a few changes on this page since you raised this issue, plus it doesn't mention new variables in _theme.less but that if variables are COMMON.

Please respond in the next few days so the issues can be closed if not needed.

[schizek]

I believe this still needs clarification. As of today the codebase _theme.less file in the blank theme still says...

//  Theme file should contain declarations (overrides) ONLY OF EXISTING variables
//  Otherwise this theme won't be available for parent nesting
//  All new variables should be placed in local theme lib or local theme files

While the Magento Theme Best Practice doc now says...

Variables

Location

Local variables

If variables are local and used only in a module scope, they should be located in the module file, in the beginning of the general comment.

Example: _module.less:

...

//
//  Variables
//  _____________________________________________

    //  Colors
@btn__color: @color-brownie;
@btn-primary__color: @color-white;
@btn-secondary__color: @color-white;
...

Theme variables

If variables are common for several modules they should be specified in the _theme.less file.

Over in the Include CSS doc it says this about the _theme.less file...

/source/_theme.less: Overrides the default UI library variables values.

This is still inconsistent. Additionally, none of the documentation I can find make mention of the _variables.less file which in the blank theme contains variables such as @tab-content__border-top-status: true; which is initially defined in the lib/web/css/source/lib/variables/_sections.less and I assume would therefore be considered an "existing variable".

Further clarification is needed here on when you actually need to use _theme.less vs _variables.less and what the definition of an "existing variable" is. Additionally, an example of why would be helpful in understanding the difference as it relates to...

Otherwise this theme won't be available for parent nesting

[mrtuvn]

_variables for define variable from beginning, reused later in many places _theme.less intend for override existing variable from parent if theme have inheritance. But i think better put new variables in _variables file for consistency