From 139a93e4e4709065c1d92366855808ff3f59dae3 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 7 Oct 2026 17:07:36 +0200 Subject: [PATCH 1/2] update inputStyleByState --- .../lib/src/styles/forms/inputStylesByState.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/styles/forms/inputStylesByState.tsx b/packages/lib/src/styles/forms/inputStylesByState.tsx index 5804cc20e2..39467c3dd7 100644 --- a/packages/lib/src/styles/forms/inputStylesByState.tsx +++ b/packages/lib/src/styles/forms/inputStylesByState.tsx @@ -5,27 +5,28 @@ const inputStylesByState = (disabled: boolean, error: boolean, readOnly: boolean border-radius: var(--border-radius-s); border: ${!disabled && error ? "var(--border-width-m)" : "var(--border-width-s)"} var(--border-style-default) ${(() => { - if (disabled) return "var(--border-color-neutral-strong)"; + if (disabled || readOnly) return "var(--border-color-neutral-lighter)"; else if (error) return "var(--border-color-error-medium)"; - else if (readOnly) return "var(--border-color-neutral-strong)"; - else return "var(--border-color-neutral-dark)"; + else return "var(--border-color-neutral-strong)"; })()}; - ${!disabled - ? `&:hover { + ${ + !disabled + ? `&:hover { border-color: ${ error ? "var(--border-color-error-strong)" : readOnly - ? "var(--border-color-neutral-stronger)" + ? "var(--border-color-neutral-medium)" : "var(--border-color-primary-strong)" }; } &:focus, &:focus-within { border-color: transparent; outline-offset: -2px; - outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); }` - : "cursor: not-allowed;"}; + : "cursor: not-allowed;" + }; `; export default inputStylesByState; From 2a55e6d67f1994664e951fac27f45d28c105f78f Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 9 Oct 2026 12:21:40 +0200 Subject: [PATCH 2/2] fix readOnly border color --- packages/lib/src/styles/forms/inputStylesByState.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/styles/forms/inputStylesByState.tsx b/packages/lib/src/styles/forms/inputStylesByState.tsx index 39467c3dd7..a6e5f05a32 100644 --- a/packages/lib/src/styles/forms/inputStylesByState.tsx +++ b/packages/lib/src/styles/forms/inputStylesByState.tsx @@ -5,8 +5,9 @@ const inputStylesByState = (disabled: boolean, error: boolean, readOnly: boolean border-radius: var(--border-radius-s); border: ${!disabled && error ? "var(--border-width-m)" : "var(--border-width-s)"} var(--border-style-default) ${(() => { - if (disabled || readOnly) return "var(--border-color-neutral-lighter)"; + if (disabled) return "var(--border-color-neutral-lighter)"; else if (error) return "var(--border-color-error-medium)"; + else if (readOnly) return "var(--border-color-neutral-light)"; else return "var(--border-color-neutral-strong)"; })()}; ${