Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(style): synced text field styles with pattern library #1206

Merged
merged 11 commits into from
Jan 23, 2024
Merged

fix(style): synced text field styles with pattern library #1206

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c70051b
fix: synced some styles with uxpin
orest-s Sep 25, 2023
abda92d
fix: changed the border size for input and combox as well
orest-s Oct 5, 2023
4e77c3e
fix: default state ring shadow
orest-s Oct 11, 2023
89b833c
fix: hover appears to be wrong color and default state ring
orest-s Oct 11, 2023
6d3e39c
fix: changed approach to set different border width
orest-s Oct 17, 2023
1f1d8d6
fix: 0px to just "0"
orest-s Oct 18, 2023
d32cd59
Merge branch 'develop' into fix/sync-text-field-with-uxpin
orest-s Oct 20, 2023
674f3ff
Merge branch 'develop' into fix/sync-text-field-with-uxpin
orest-s Nov 15, 2023
ac0e92e
Merge branch 'develop' into fix/sync-text-field-with-uxpin
scurker Jan 10, 2024
fd186e9
Merge branch 'develop' into fix/sync-text-field-with-uxpin
scurker Jan 11, 2024
b4694e3
fix: border color for error combobox dark theme
orest-s Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions packages/styles/combobox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,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;
Expand Down Expand Up @@ -232,13 +233,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 {
Expand Down
16 changes: 11 additions & 5 deletions packages/styles/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
--field-border-color-error: var(--accent-error);
--field-border-color-error-hover: #c42f41;
--field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
--field-border-color-disabled: rgba(204, 204, 204, 0.25);
--field-border-color-disabled: var(--gray-40);
--field-background-color-disabled: #f7f7f7;
--field-required-text-color: var(--gray-60);
--field-label-text-color: var(--gray-90);
Expand All @@ -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);
Expand Down Expand Up @@ -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);
}
Expand All @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down