@clayui/css: Decouple btn variables from other components

[pat270]

We are reusing $btn-* variables in other components. This make it difficult to include only the component variable files you need. We can limit the use of $btn-* variables only to buttons and create global variables that can be used everywhere (if needed).

[matuzalemsteles]

@pat270 Hmm, this is interesting what are the use cases?

[pat270]

@matuzalemsteles The main use case is modularization, only include the Sass from the components you want. If someone only wants badge, they can:

@import 'variables/_globals.scss';
@import 'variables/_badges.scss`;

@import 'components/_badges.scss';

Currently if someone wants to only import a component that is using a $btn-* variable they need to:

@import 'variables/_globals.scss';
@import 'variables/_buttons.scss';
@import 'variables/_badges.scss`;

@import 'components/_badges.scss';

[matuzalemsteles]

I see. it makes sense. I've been thinking more about which button variables were being used in the other components, are they more text-related?

[pat270]

Not a comprehensive list, but here are some examples:

$btn-focus-box-shadow
$btn-disabled-opacity
$btn-transition
$btn-monospaced-size-sm
$btn-primary
$btn-secondary

We have the global variable $component-focus-box-shadow. We can swap $btn-focus-box-shadow for that one. We could create one for transition, disabled opacity. I'm not sure about the sizes and colors, we should just define them in the component or use $primary and $secondary variables.

Edit: Technically it could be a breaking change if someone depends on the mapping.

[matuzalemsteles]

I see, yeah I think that in case we replace it with variables with the same values we could consider it compatible but if one expects that changing the button values should affect other places that would be a problem but in my view, it seems more related to a "kind of bug" that we should be using global variables. It seems good to go with using $primary and $secondary for colors and the same for other cases.

For typography I would like to be able to use the global variables of the scale, I'm not sure if the scale was respected in all our components, so it can happen in some cases that we can't use it.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-164412