fix(@clayui/css): Sass maps passed into clay-form-control-variant m…

…ixin should use new keys. This allows variable theme overwrites using deprecated keys to still win.

issue #3987

packages/clay-css/src/scss/atlas/variables/_forms.scss

@@ -72,19 +72,23 @@ $input-readonly-bg: $white !default;
 $input-readonly: () !default;
 $input-readonly: map-deep-merge(
 	(
-		bg: $input-readonly-bg,
+		background-color: $input-readonly-bg,
 		border-color: $input-border-color,
-		focus-border-color: $input-focus-border-color,
-		focus-box-shadow: none,
+		focus: (
+			border-color: $input-focus-border-color,
+			box-shadow: none,
+		),
 	),
 	$input-readonly
 );
 
 $input-plaintext-readonly: () !default;
 $input-plaintext-readonly: map-deep-merge(
 	(
-		focus-border-color: $input-focus-border-color,
-		focus-box-shadow: none,
+		focus: (
+			border-color: $input-focus-border-color,
+			box-shadow: none,
+		),
 	),
 	$input-plaintext-readonly
 );

packages/clay-css/src/scss/variables/_forms.scss

@@ -156,14 +156,16 @@ $input-readonly-focus-color: null !default;
 $input-readonly: () !default;
 $input-readonly: map-deep-merge(
 	(
-		bg: $input-readonly-bg,
+		background-color: $input-readonly-bg,
 		border-color: $input-readonly-border-color,
 		color: $input-readonly-color,
 		cursor: $input-readonly-cursor,
 		opacity: 1,
-		focus-bg: $input-readonly-focus-bg,
-		focus-border-color: $input-readonly-focus-border-color,
-		focus-color: $input-readonly-focus-color,
+		focus: (
+			background-color: $input-readonly-focus-bg,
+			border-color: $input-readonly-focus-border-color,
+			color: $input-readonly-focus-color,
+		),
 	),
 	$input-readonly
 );
@@ -174,7 +176,9 @@ $input-plaintext-readonly: map-deep-merge(
 		border-radius: $input-border-radius,
 		outline: 0,
 		transition: $input-transition,
-		focus-box-shadow: $input-focus-box-shadow,
+		focus: (
+			box-shadow: $input-focus-box-shadow,
+		),
 	),
 	$input-plaintext-readonly
 );

packages/clay-css/src/scss/variables/_time.scss

@@ -34,8 +34,12 @@ $clay-time-form-control-inset: map-deep-merge(
 		margin-top: 0,
 		text-align: center,
 		width: 1.25rem,
-		selection-bg: transparent,
-		focus-bg: #b3d8fd,
+		selection: (
+			background-color: transparent,
+		),
+		focus: (
+			background-color: #b3d8fd,
+		),
 	),
 	$clay-time-form-control-inset
 );