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

Co-authored-by: Paweł Chyła <[email protected]>
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)",