BREAKING CHANGE(web): Remove error state from Checkbox, Radio, Text…

…Field, and TextArea #DS-677

 ## Migration Guide

Instead of the `--error` modifier or `has-error` class, use `--danger` or `has-danger`
respectively. This applies to Checkbox, Radio, TextField, and TextArea.

- `<div class="TextField--error" …>` → `<div class="TextField--danger" …>`
- `<div class="TextField has-error" …>` → `<div class="TextField has-danger" …>`

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.

packages/web/src/scss/components/Select/README.md

@@ -147,7 +147,7 @@ Usage with helper text:
 Validation states can be presented either by adding a CSS modifier class
 (`Select--success`, `Select--warning`, `Select--danger`), or by adding
 a JS interaction class when controlled by JavaScript (`has-success`,
-`has-warning`, `has-danger`, `has-error`). See Validation state [dictionary][dictionary-validation].
+`has-warning`, `has-danger`). See Validation state [dictionary][dictionary-validation].
 
 ```html
 <div class="Select Select--success">

packages/web/src/scss/components/TextArea/README.md

@@ -110,11 +110,9 @@ Then you need to add data attribute `data-toggle="autoResize"` to the component.
 ## Validation States
 
 Validation states can be presented either by adding a CSS modifier class
-(`TextArea--success`, `TextArea--warning`, `TextArea--danger`, `TextArea--error`), or by adding
+(`TextArea--success`, `TextArea--warning`, `TextArea--danger`), or by adding
 a JS interaction class when controlled by JavaScript (`has-success`,
-`has-warning`, `has-danger`, `has-error`). See Validation state [dictionary][dictionary-validation].
-
-[**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger".
+`has-warning`, `has-danger`). See Validation state [dictionary][dictionary-validation].
 
 ```html
 <div class="TextArea TextArea--danger">
@@ -136,13 +134,11 @@ a JS interaction class when controlled by JavaScript (`has-success`,
 ### JavaScript-Controlled Validation Message
 
 When implementing client-side form validation, use JS interaction state classes
-(`has-success`, `has-warning`, `has-danger`, `has-error`) on the wrapping `<div>` element and
+(`has-success`, `has-warning`, `has-danger`) on the wrapping `<div>` element and
 render validation messages in a `<div>` with `data-element="validator_message"`
 attribute. This way your JS remains disconnected from CSS that may or may not be
 [prefixed].
 
-[**DEPRECATED**][deprecated] The value "has-error" in the dictionary will be replaced by the value "has-danger".
-
 **Remember this approach is only valid for vanilla JS implementation. React
 components mix CSS with JS by design and handle prefixes their own way.**
 
@@ -196,4 +192,3 @@ The preferred one is the `body` element because this way it will affect all Text
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [prefixed]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#prefixing-css-class-names
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#deprecations

packages/web/src/scss/components/TextField/README.md

@@ -150,11 +150,9 @@ forget to change not only the input type but also `aria-pressed` and
 ## Validation States
 
 Validation states can be presented either by adding a CSS modifier class
-(`TextField--success`, `TextField--warning`, `TextField--danger`, `TextField--error`), or by adding
+(`TextField--success`, `TextField--warning`, `TextField--danger`), or by adding
 a JS interaction class when controlled by JavaScript (`has-success`,
-`has-warning`, `has-danger`, `has-error`). See Validation state [dictionary][dictionary-validation].
-
-[**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger".
+`has-warning`, `has-danger`). See Validation state [dictionary][dictionary-validation].
 
 ```html
 <div class="TextField TextField--danger">
@@ -176,13 +174,11 @@ a JS interaction class when controlled by JavaScript (`has-success`,
 ### JavaScript-Controlled Validation Message
 
 When implementing client-side form validation, use JS interaction state classes
-(`has-success`, `has-warning`, `has-danger`, `has-error`) on the wrapping `<div>` element and
+(`has-success`, `has-warning`, `has-danger`) on the wrapping `<div>` element and
 render validation messages in a `<div>` with `data-element="validator_message"`
 attribute. This way your JS remains disconnected from CSS that may or may not be
 [prefixed].
 
-[**DEPRECATED**][deprecated] The value "has-error" in the dictionary will be replaced by the value "has-danger".
-
 **Remember this approach is only valid for vanilla JS implementation. React
 components mix CSS with JS by design and handle prefixes their own way.**
 
@@ -236,4 +232,3 @@ The preferred one is the `body` element because this way it will affect all Text
 
 [prefixed]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web#prefixing-css-class-names
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/README.md#deprecations

packages/web/src/scss/theme/_form-fields.scss

@@ -61,13 +61,6 @@ $validation-states: (
         input-border-color: $input-border-color-danger,
         message-color: $message-color-danger,
     ),
-
-    // @deprecated Will be removed in the next major version.
-    error:
-        (
-            input-border-color: $input-border-color-danger,
-            message-color: $message-color-danger,
-        ),
 );
 
 // Item variant