@clayui/css: Custom Control group deprecated variables together

[pat270]

We have a lot of deprecated variables that we keep around for backward support. It's pretty hard to keep track of variables that are current under Clay. We should try and group them together as much as possible, ideally at the top of the file, but we have some variables that inherit un-deprecated variables which makes it hard. Here are some examples or deprecated variables:

clay/packages/clay-css/src/scss/variables/_custom-forms.scss

Lines 62 to 80 in 70003b9

	/// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-bg` instead
	$custom-control-indicator-active-checked-bg: null !default;
	$custom-control-indicator-checked-active-bg: $custom-control-indicator-active-checked-bg !default;
	/// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-border-color` instead
	$custom-control-indicator-active-checked-border-color: null !default;
	$custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default;
	/// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-bg` instead
	$custom-control-indicator-disabled-checked-bg: rgba($primary, 0.5) !default;
	$custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disabled-checked-bg !default;
	/// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-border-color` instead
	$custom-control-indicator-disabled-checked-border-color: null !default;
	$custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;

[ethib137]

Yeah, this would be nice to have this cleaner. Would it be possible to have all the deprecated variables and even the compatibility-layer use of those deprecated variables in a separate _deprecated_variables.scss file? Something like:

_deprecated_variables.scss contains:

/// @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-border-color` instead 
  
 $custom-control-indicator-active-checked-border-color: null !default; 
 $custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default; 

Then _custom-forms.scss could just contain the current variables:

 $custom-control-indicator-checked-active-border-color: null !default; 

It would be slightly more code, but would make it simpler to see the current variables that should be used. What do you think? Would there be a way to have this in separate files?

[matuzalemsteles]

I like Evan's idea even to have visibility of the amount of things we keep for compatibility, I also think that we should already start planning Clay v4 to remove these compatibilities and clean up the CSS and also the components that we have many conditions for backwards compatibility.

[liferay-platform-experience]

LPS ticket: https://liferay.atlassian.net/browse/LPS-190186