diff --git a/.changeset/mighty-dodos-peel.md b/.changeset/mighty-dodos-peel.md
new file mode 100644
index 000000000..bdb5acc32
--- /dev/null
+++ b/.changeset/mighty-dodos-peel.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix the focused state styles of text inputs.
diff --git a/src/components/fields/TextInput/TextInput.stories.tsx b/src/components/fields/TextInput/TextInput.stories.tsx
index b8d1e9e6d..5c94a78fd 100644
--- a/src/components/fields/TextInput/TextInput.stories.tsx
+++ b/src/components/fields/TextInput/TextInput.stories.tsx
@@ -145,8 +145,38 @@ WithIcon.args = { icon: };
export const Password = Template.bind({});
Password.args = { icon: , type: 'password' };
+export const Valid = Template.bind({});
+Valid.args = { validationState: 'valid', defaultValue: 'Valid input' };
+
export const Invalid = Template.bind({});
-Invalid.args = { validationState: 'invalid' };
+Invalid.args = { validationState: 'invalid', defaultValue: 'Invalid input' };
+
+export const ValidationStates: StoryFn = (args) => (
+
+ Valid State
+
+
+ Invalid State
+
+
+);
+
+ValidationStates.args = {
+ width: '300px',
+};
+
+ValidationStates.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use `validationState` prop to indicate validation status. Set to `valid` for success styling or `invalid` for error styling.',
+ },
+ },
+};
export const Disabled = Template.bind({});
Disabled.args = { isDisabled: true };
diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx
index 4db5146cc..1b776f145 100644
--- a/src/components/fields/TextInput/TextInputBase.tsx
+++ b/src/components/fields/TextInput/TextInputBase.tsx
@@ -63,15 +63,13 @@ export const INPUT_WRAPPER_STYLES: Styles = {
},
border: {
'': true,
- focused: '#purple-text',
valid: '#success-text.50',
invalid: '#danger-text.50',
+ focused: '#purple-text',
+ 'valid & focused': '#success-text',
+ 'invalid & focused': '#danger-text',
disabled: true,
},
- outline: {
- '': '#purple-03.0',
- 'invalid & focused': '#danger.50',
- },
preset: 't3',
radius: true,
cursor: 'text',