Improve checkbox colours on focus and active states (#841)

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>
saleor · Aug 21, 2024 · c89d56e · c89d56e
1 parent e577c41
commit c89d56e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 14 deletions.
diff --git a/.changeset/five-bats-joke.md 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
@@ -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,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,

diff --git 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
@@ -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
@@ -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)",