Use --reactist-inputs-alert instead of --reactist-alert-tone-critical…

…-border

src/base-field/base-field.module.css

@@ -32,7 +32,7 @@
 }
 
 .container.bordered.error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .container.bordered .primaryLabel {

src/password-field/password-field.stories.mdx

@@ -97,6 +97,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/select-field/select-field.module.css

@@ -50,7 +50,7 @@
 }
 
 .selectWrapper:not(.bordered).error select {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .selectWrapper:not(.bordered) option {

src/select-field/select-field.stories.mdx

@@ -106,6 +106,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/styles/design-tokens.css

@@ -56,6 +56,7 @@
     /* input border colors */
     --reactist-inputs-focus: var(--reactist-divider-primary);
     --reactist-inputs-idle: var(--reactist-divider-secondary);
+    --reactist-inputs-alert: rgb(209, 69, 59);
 
     /* border-radius */
     --reactist-border-radius-small: 5px;

src/text-area/text-area.module.css

@@ -54,7 +54,7 @@ See https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 .textAreaContainer.error:not(.bordered) .innerContainer::after,
 .textAreaContainer.error:not(.bordered) textarea,
 .textAreaContainer.bordered.error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .innerContainer {

src/text-area/text-area.stories.mdx

@@ -99,6 +99,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/text-field/text-field.module.css

@@ -25,7 +25,7 @@
 }
 
 .inputWrapper:not(.bordered).error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .inputWrapper input {

src/text-field/text-field.stories.mdx

@@ -116,6 +116,7 @@ Note that these variables are shared with other components such as `PasswordFiel
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>