diff --git a/src/base-field/base-field.module.css b/src/base-field/base-field.module.css index 549b050b5..d4a8c34b8 100644 --- a/src/base-field/base-field.module.css +++ b/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 { diff --git a/src/password-field/password-field.stories.mdx b/src/password-field/password-field.stories.mdx index c66ae4029..a6838d6de 100644 --- a/src/password-field/password-field.stories.mdx +++ b/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 ``` diff --git a/src/select-field/select-field.module.css b/src/select-field/select-field.module.css index 8d01091f6..b04e499d0 100644 --- a/src/select-field/select-field.module.css +++ b/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 { diff --git a/src/select-field/select-field.stories.mdx b/src/select-field/select-field.stories.mdx index 7a5b1fbcc..41434fcfa 100644 --- a/src/select-field/select-field.stories.mdx +++ b/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 ``` diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css index 2bab5c1d9..9e8cea39c 100644 --- a/src/styles/design-tokens.css +++ b/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; diff --git a/src/text-area/text-area.module.css b/src/text-area/text-area.module.css index b20ce6531..66c657b6c 100644 --- a/src/text-area/text-area.module.css +++ b/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 { diff --git a/src/text-area/text-area.stories.mdx b/src/text-area/text-area.stories.mdx index a90585390..41b8bbdbb 100644 --- a/src/text-area/text-area.stories.mdx +++ b/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 ``` diff --git a/src/text-field/text-field.module.css b/src/text-field/text-field.module.css index c3e4f1b26..382f732ee 100644 --- a/src/text-field/text-field.module.css +++ b/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 { diff --git a/src/text-field/text-field.stories.mdx b/src/text-field/text-field.stories.mdx index 9af08a9a8..1198a40b2 100644 --- a/src/text-field/text-field.stories.mdx +++ b/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 ```