fix(@clayui/css): Form Validation use clay-form-control-variant to style Danger, Warning, Success readonly inputs instead of clay-button-variant

fix(@clayui/css): Atlas Form Validation readonly inputs should use newer Sass map keys

Author: pat270

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

@@ -196,13 +196,15 @@ $input-danger: map-deep-merge(
 $input-danger-readonly: () !default;
 $input-danger-readonly: map-deep-merge(
 	(
-		bg:
+		background-color:
 			setter(
 				map-get($input-readonly, bg),
 				map-get($input-readonly, background-color)
 			),
 		border-color: map-get($input-readonly, border-color),
-		focus-border-color: $input-focus-border-color,
+		focus: (
+			border-color: $input-focus-border-color,
+		),
 	),
 	$input-danger-readonly
 );
@@ -254,13 +256,15 @@ $input-warning: map-deep-merge(
 $input-warning-readonly: () !default;
 $input-warning-readonly: map-deep-merge(
 	(
-		bg:
+		background-color:
 			setter(
 				map-get($input-readonly, bg),
 				map-get($input-readonly, background-color)
 			),
 		border-color: map-get($input-readonly, border-color),
-		focus-border-color: $input-focus-border-color,
+		focus: (
+			border-color: $input-focus-border-color,
+		),
 	),
 	$input-warning-readonly
 );
@@ -312,13 +316,15 @@ $input-success: map-deep-merge(
 $input-success-readonly: () !default;
 $input-success-readonly: map-deep-merge(
 	(
-		bg:
+		background-color:
 			setter(
 				map-get($input-readonly, bg),
 				map-get($input-readonly, background-color)
 			),
 		border-color: map-get($input-readonly, border-color),
-		focus-border-color: $input-focus-border-color,
+		focus: (
+			border-color: $input-focus-border-color,
+		),
 	),
 	$input-success-readonly
 );

packages/clay-css/src/scss/components/_form-validation.scss

@@ -103,7 +103,7 @@
 	}
 
 	.form-control[readonly] {
-		@include clay-button-variant($input-danger-readonly);
+		@include clay-form-control-variant($input-danger-readonly);
 	}
 
 	.form-feedback-item {
@@ -180,7 +180,7 @@
 	}
 
 	.form-control[readonly] {
-		@include clay-button-variant($input-warning-readonly);
+		@include clay-form-control-variant($input-warning-readonly);
 	}
 
 	.form-feedback-item {
@@ -257,7 +257,7 @@
 	}
 
 	.form-control[readonly] {
-		@include clay-button-variant($input-success-readonly);
+		@include clay-form-control-variant($input-success-readonly);
 	}
 
 	.form-feedback-item {

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

@@ -575,6 +575,8 @@ $input-danger: map-deep-merge(
 	$input-danger
 );
 
+// .has-error .form-control[readonly]
+
 $input-danger-readonly: () !default;
 
 $input-danger-checkbox-label-color: $form-feedback-invalid-color !default;