diff --git a/packages/styles/combobox.css b/packages/styles/combobox.css index f77386443..506108736 100644 --- a/packages/styles/combobox.css +++ b/packages/styles/combobox.css @@ -78,8 +78,11 @@ border: 1px solid var(--combobox-input-border-color); } -.Combobox__input:hover, -.cauldron--theme-dark .Combobox__input:hover { +.cauldron--theme-dark .Combobox__input--error { + border: 1px solid var(--combobox-input-error-border-color); +} + +.Combobox__input:hover { border-color: var(--combobox-input-border-hover-color); } @@ -91,10 +94,11 @@ .Combobox__input:focus-within { border: 1px solid var(--combobox-input-border-focus-color); - box-shadow: 0 0 0 2px var(--combobox-input-border-focus-color), + box-shadow: 0 0 0 1px var(--combobox-input-border-focus-color), 0 0 5px var(--combobox-input-border-focus-glow-color), inset 0 1px 2px rgba(0, 0, 0, 0.05); } + .Combobox__arrow { width: 2rem; display: flex; @@ -232,13 +236,28 @@ .Combobox__input--error { border: 1px solid var(--combobox-input-error-border-color); + box-shadow: 0 0 0 1px var(--combobox-input-error-border-color), + inset 0 1px 2px rgba(0, 0, 0, 0.05); } .Combobox__input--error:focus-within { border: 1px solid var(--combobox-input-error-border-color); - box-shadow: 0 0 0 1px var(--combobox-input-error-focus-border-color), - inset 0 2px 3px 0 rgba(0, 0, 0, 0.05), - 0 0 5px 0 var(--combobox-input-error-focus-border-glow-color); + box-shadow: 0 0 0 1px var(--combobox-input-error-border-color), + 0 0 5px var(--field-border-color-error-focus-glow), + inset 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.Combobox__input--error:focus-within:hover { + border: 1px solid var(--combobox-input-error-border-color); + box-shadow: 0 0 0 1px var(--combobox-input-error-border-color), + 0 0 5px var(--field-border-color-error-focus-glow), + inset 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.Combobox__input--error:hover { + border: 1px solid var(--combobox-input-error-border-color); + box-shadow: 0 0 0 1px var(--combobox-input-error-border-color), + inset 0 1px 2px rgba(0, 0, 0, 0.05); } .ComboboxListbox__empty { diff --git a/packages/styles/forms.css b/packages/styles/forms.css index 4667728e6..6b0d87d9f 100644 --- a/packages/styles/forms.css +++ b/packages/styles/forms.css @@ -36,6 +36,7 @@ .cauldron--theme-dark { --field-background-color: var(--accent-medium); --field-content-color: var(--white); + --field-border-color: #74818b; --field-border-color-hover: var(--accent-info-light); --field-border-color-focus: var(--accent-info); --field-border-color-focus-hover: var(--accent-info-light); @@ -97,7 +98,7 @@ textarea:focus, [role='spinbutton']:focus { outline: 0; border: 1px solid var(--field-border-color-focus); - box-shadow: 0 0 0 2px var(--field-border-color-focus), + box-shadow: 0 0 0 1px var(--field-border-color-focus), 0 0 5px var(--field-border-color-focus-glow), inset 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -122,6 +123,9 @@ textarea:focus:hover, [role='listbox']:focus:hover, [role='spinbutton']:focus:hover { border: 1px solid var(--field-border-color-focus-hover); + box-shadow: 0 0 0 1px var(--field-border-color-focus-hover), + 0 0 5px var(--field-border-color-focus-glow), + inset 0 1px 2px rgba(0, 0, 0, 0.05); } input.Field--has-error, @@ -133,6 +137,8 @@ textarea.Field--has-error, [role='listbox'].Field--has-error, [role='spinbutton'].Field--has-error { border: 1px solid var(--field-border-color-error); + box-shadow: 0 0 0 1px var(--field-border-color-error), + inset 0 1px 2px rgba(0, 0, 0, 0.05); } .Checkbox__overlay.Field--has-error { @@ -165,9 +171,9 @@ textarea.Field--has-error:focus, [role='listbox'].Field--has-error:focus, [role='spinbutton'].Field--has-error:focus { border: 1px solid var(--field-border-color-error); - box-shadow: 0 0 0 1px var(--field-border-color-error-hover), - inset 0 2px 3px 0 rgba(0, 0, 0, 0.05), - 0 0 5px 0 var(--field-border-color-error-focus-glow); + box-shadow: 0 0 0 1px var(--field-border-color-error), + 0 0 5px var(--field-border-color-error-focus-glow), + inset 0 1px 2px rgba(0, 0, 0, 0.05); } input.Field--has-error:focus:hover,