From c89d56e3ec7c36e32630b28d66abb095db8c5da3 Mon Sep 17 00:00:00 2001 From: Wojciech Mista Date: Wed, 21 Aug 2024 11:33:58 +0200 Subject: [PATCH] Improve checkbox colours on focus and active states (#841) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Paweł Chyła --- .changeset/five-bats-joke.md | 5 +++++ src/components/Checkbox/Checkbox.css.ts | 22 +++++++++------------- src/theme/contract.css.ts | 1 + src/theme/themes/defaultDark.ts | 1 + src/theme/themes/defaultLight.ts | 3 ++- 5 files changed, 18 insertions(+), 14 deletions(-) create mode 100644 .changeset/five-bats-joke.md diff --git a/.changeset/five-bats-joke.md b/.changeset/five-bats-joke.md new file mode 100644 index 00000000..738bfe3b --- /dev/null +++ b/.changeset/five-bats-joke.md @@ -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. diff --git a/src/components/Checkbox/Checkbox.css.ts b/src/components/Checkbox/Checkbox.css.ts index 7c2023f1..e1fd351e 100644 --- a/src/components/Checkbox/Checkbox.css.ts +++ b/src/components/Checkbox/Checkbox.css.ts @@ -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, }, }, }); @@ -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, @@ -163,7 +161,7 @@ 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, }, @@ -171,13 +169,11 @@ export const errorCheckbox = style({ 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, diff --git a/src/theme/contract.css.ts b/src/theme/contract.css.ts index c77d7871..82ab93ef 100644 --- a/src/theme/contract.css.ts +++ b/src/theme/contract.css.ts @@ -43,6 +43,7 @@ export const vars = createGlobalThemeContract( background: { accent1: null, accent1Hovered: null, + accent1Focused: null, accent1Pressed: null, buttonCriticalDisabled: null, buttonCriticalPrimary: null, diff --git a/src/theme/themes/defaultDark.ts b/src/theme/themes/defaultDark.ts index a9e3279d..297ac9b3 100644 --- a/src/theme/themes/defaultDark.ts +++ b/src/theme/themes/defaultDark.ts @@ -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)", diff --git a/src/theme/themes/defaultLight.ts b/src/theme/themes/defaultLight.ts index f550b78d..ba4e1a20 100644 --- a/src/theme/themes/defaultLight.ts +++ b/src/theme/themes/defaultLight.ts @@ -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)", @@ -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)",