Clay: @clayui/css Mixins update `clay-select-variant` to use `clay-css` pattern, also deprecated keys should win over new keys

[pat270]

Piecing out parts of https://github.com/liferay/clay/issues/3987 into separate issues to make it easier to track. Since Clay CSS provides so many variables, it would be better if our variables could follow a pattern that mimics the scss. Here's an example:

Old way:

$input-select: (
  color: white,
  hover-color: black,
  disabled-option: (
    color: gray,
  ),
);

New way:

$input-select: (
  color: white,
  hover: (
    color: black,
  ),
  disabled: (
    option: (
      color: gray,
    ),
  ),
);

The old way will still be compatible, until we decide to remove it in the next major version.

[wincent]

Naïve question: are these restructurings technically breaking changes, since variable names form part of the public "API" that we offer? I know we've already merged a number of PRs that go in this direction, but the potential breaking-ness of this just occurred to me now.

[pat270]

@wincent Yes if I forget to provide an alias for the old variable name, it won't apply. I want to say I've been diligent in providing aliases from old to new, but I might have missed some. I've been testing intermittently with a variable theme I put together a while ago (v2.1.12 theme). The only issue I ran into was with a hack I used to reset variables $alert-notifications-box-shadow: !default;. libSass fixed that "bug".

[brunofernandezg]

@pat270 I added this issue to the next milestone as there's a PR ready, is it ok?

[pat270]

@brunofernandezg yeah, it might get pushed to the next next milestone. I'm trying to hold off until #4009 is good to go. Will make it easier for me to keep track of updates.

[brunofernandezg]

Ok, thanks @pat270 I'll wait next time :)

[github-actions[bot]]

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