Skip to content

Commit

Permalink
Improve checkbox colours on focus and active states (#841)
Browse files Browse the repository at this point in the history
Co-authored-by: Paweł Chyła <[email protected]>
  • Loading branch information
Cloud11PL and poulch authored Aug 21, 2024
1 parent e577c41 commit c89d56e
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 14 deletions.
5 changes: 5 additions & 0 deletions .changeset/five-bats-joke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@saleor/macaw-ui": patch
---

Checkboxes now have a semi-transparent background color on focus state, meaning that it is easier to differentiate states when using keyboard navigation.
22 changes: 9 additions & 13 deletions src/components/Checkbox/Checkbox.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,18 +86,14 @@ export const defaultCheckbox = style({
},
'&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible': {
backgroundColor: vars.colors.background.accent1,
borderColor: vars.colors.border.accent1,
boxShadow: vars.boxShadow.defaultFocused,
},
'&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible::after':
{
backgroundColor: vars.colors.background.accent1,
boxShadow: vars.boxShadow.defaultFocused,
backgroundColor: vars.colors.background.accent1Focused,
},
'&:is([data-state="checked"],[data-state="indeterminate"])[disabled]': {
backgroundColor: vars.colors.background.defaultDisabled,
borderColor: vars.colors.border.defaultDisabled,
cursor: "not-allowed",
color: vars.colors.text.defaultDisabled,
backgroundColor: vars.colors.background.accent1Pressed,
},
},
});
Expand Down Expand Up @@ -142,7 +138,9 @@ export const errorCheckbox = style({
outline: "none",
},
'&[data-state="unchecked"]:focus-visible::after': {
backgroundColor: vars.colors.background.default2,
backgroundColor: vars.colors.background.critical1,
outlineColor: vars.colors.border.critical1,
zIndex: -1,
},
'&[data-state="unchecked"][disabled]': {
borderColor: vars.colors.border.default1,
Expand All @@ -163,21 +161,19 @@ export const errorCheckbox = style({
backgroundColor: vars.colors.background.critical1Hovered,
},
'&:is([data-state="checked"],[data-state="indeterminate"]):active': {
backgroundColor: vars.colors.background.critical1,
backgroundColor: vars.colors.background.critical1Pressed,
borderColor: vars.colors.border.critical1,
boxShadow: vars.boxShadow.defaultFocused,
},
'&:is([data-state="checked"],[data-state="indeterminate"]):active::after': {
backgroundColor: vars.colors.background.critical1Pressed,
},
'&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible': {
backgroundColor: vars.colors.background.critical1,
borderColor: vars.colors.border.critical1,
boxShadow: vars.boxShadow.defaultFocused,
outlineColor: vars.colors.border.critical1,
},
'&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible::after':
{
backgroundColor: vars.colors.background.critical1,
backgroundColor: vars.colors.background.critical1Focused,
},
'&:is([data-state="checked"],[data-state="indeterminate"])[disabled]': {
backgroundColor: vars.colors.background.defaultDisabled,
Expand Down
1 change: 1 addition & 0 deletions src/theme/contract.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export const vars = createGlobalThemeContract(
background: {
accent1: null,
accent1Hovered: null,
accent1Focused: null,
accent1Pressed: null,
buttonCriticalDisabled: null,
buttonCriticalPrimary: null,
Expand Down
1 change: 1 addition & 0 deletions src/theme/themes/defaultDark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const defaultDark = {
accent1: "hsla(215, 100%, 62%, 1)",
accent1Hovered: "hsla(215, 100%, 51%, 0.16)",
accent1Pressed: "hsla(215, 100%, 51%, 0.32)",
accent1Focused: "hsla(215, 100%, 51%, 0.32)",
buttonCriticalDisabled: "hsla(204, 16%, 94%, 1)",
buttonCriticalPrimary: "hsla(11, 100%, 56%, 1)",
buttonCriticalPrimaryFocused: "hsla(11, 100%, 42%, 1)",
Expand Down
3 changes: 2 additions & 1 deletion src/theme/themes/defaultLight.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const defaultLight = {
background: {
accent1: "hsla(215, 100%, 51%, 1)",
accent1Hovered: "hsla(215, 100%, 51%, 0.12)",
accent1Focused: "hsla(215, 100%, 51%, 0.32)",
accent1Pressed: "hsla(215, 100%, 51%, 0.24)",
buttonCriticalDisabled: "hsla(204, 16%, 94%, 1)",
buttonCriticalPrimary: "hsla(11, 100%, 46%, 1)",
Expand All @@ -34,7 +35,7 @@ export const defaultLight = {
buttonDefaultTertiaryHovered: "hsla(180, 4%, 15%, 0.06)",
buttonDefaultTertiaryPressed: "hsla(180, 4%, 15%, 0.12)",
critical1: "hsla(11, 100%, 96%, 1)",
critical1Focused: "hsla(11, 100%, 97%, 1)",
critical1Focused: "hsla(11, 100%, 59%, 0.07)",
critical1Hovered: "hsla(11, 100%, 45%, 0.16)",
critical1Pressed: "hsla(11, 100%, 45%, 0.32)",
critical2: "hsla(11, 100%, 46%, 1)",
Expand Down

0 comments on commit c89d56e

Please sign in to comment.