From c7cebafff26305fc0b657f7ed1848058d27ef1e7 Mon Sep 17 00:00:00 2001 From: Wenfeng Xing Date: Tue, 1 Nov 2022 09:17:45 -0400 Subject: [PATCH 1/3] chore: change the focus to active --- .../ui-kit-theme/src/overrides/MuiButton.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/ui-kit-theme/src/overrides/MuiButton.ts b/packages/ui-kit-theme/src/overrides/MuiButton.ts index 1ab73c4b..51d2bcea 100644 --- a/packages/ui-kit-theme/src/overrides/MuiButton.ts +++ b/packages/ui-kit-theme/src/overrides/MuiButton.ts @@ -16,7 +16,7 @@ const LIGHT_BUTTON = { border: '1px solid #A9ABD1', backgroundColor: '#DBDDFF', }, - '&:focus': { + '&:focus-visible': { border: '2px solid #FFFFFF', outline: '3px solid #FF8D00', backgroundColor: '#DBDDFF', @@ -43,7 +43,7 @@ const LIGHT_BUTTON = { backgroundColor: '#FFFFFF', color: '#5F618D', }, - '&:focus': { + '&:focus-visible': { border: '1px solid #5F618D', outlineOffset: '2px', outline: '2px solid #FF8D00', @@ -62,6 +62,7 @@ const LIGHT_BUTTON = { style: { padding: '0px 4px', color: '#5F618D', + borderRadius: '100px', '&:hover': { backgroundColor: '#FFFFFF', textDecoration: 'underline', @@ -70,18 +71,15 @@ const LIGHT_BUTTON = { border: `1px solid #5F618D`, backgroundColor: '#FFFFFF', color: '#5F618D', - borderRadius: '100px', }, - '&:focus': { + '&:focus-visible': { border: '1px solid #5F618D', - borderRadius: '100px', outlineOffset: '2px', outline: '2px solid #FF8D00', backgroundColor: '#FFFFFF', textDecoration: 'none', }, '&:disabled': { - borderRadius: '100px', border: 'none', backgroundColor: '#E4E4E4', color: '#7F7F7F', @@ -107,7 +105,7 @@ const DARK_BUTTON = { border: '1px solid #A9ABD1', backgroundColor: '#DBDDFF', }, - '&:focus': { + '&:focus-visible': { outlineOffset: '2px', outline: '2px solid #FF8D00', border: '0px', @@ -134,7 +132,7 @@ const DARK_BUTTON = { border: `1px solid #5F618D`, color: '#DBDDFF', }, - '&:focus': { + '&:focus-visible': { padding: '2px 5px', border: '2px solid #FFBE45', outlineOffset: '-6px', @@ -162,16 +160,14 @@ const DARK_BUTTON = { borderRadius: '100px', textDecoration: 'underline', }, - '&:focus': { + '&:focus-visible': { padding: '2px 5px', - borderRadius: '100px', border: '2px solid #FFBE45', outlineOffset: '-6px', outline: '2px solid #DBDDFF', color: '#DBDDFF', }, '&:active': { - borderRadius: '100px', textDecoration: 'none', border: `1px solid #5F618D`, color: '#DBDDFF', @@ -180,7 +176,6 @@ const DARK_BUTTON = { textDecoration: 'none', }, '&:disabled': { - borderRadius: '100px', border: 'none', backgroundColor: '#E4E4E4', color: '#7F7F7F', From 30e0cbf3805f667e68de6b667120563a34e3ab81 Mon Sep 17 00:00:00 2001 From: Wenfeng Xing Date: Fri, 4 Nov 2022 07:40:28 -0400 Subject: [PATCH 2/3] chore: change the css style --- .../ui-kit-theme/src/overrides/MuiButton.ts | 60 +++++++++++-------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/packages/ui-kit-theme/src/overrides/MuiButton.ts b/packages/ui-kit-theme/src/overrides/MuiButton.ts index 51d2bcea..474a009c 100644 --- a/packages/ui-kit-theme/src/overrides/MuiButton.ts +++ b/packages/ui-kit-theme/src/overrides/MuiButton.ts @@ -16,10 +16,12 @@ const LIGHT_BUTTON = { border: '1px solid #A9ABD1', backgroundColor: '#DBDDFF', }, + '&:focus': { + outline: 'none', + }, '&:focus-visible': { - border: '2px solid #FFFFFF', + border: '2px solid inherit', outline: '3px solid #FF8D00', - backgroundColor: '#DBDDFF', }, '&:disabled': { backgroundColor: '#E4E4E4', @@ -43,11 +45,13 @@ const LIGHT_BUTTON = { backgroundColor: '#FFFFFF', color: '#5F618D', }, + '&:focus': { + outline: 'none', + }, '&:focus-visible': { border: '1px solid #5F618D', outlineOffset: '2px', - outline: '2px solid #FF8D00', - backgroundColor: '#FFFFFF', + outline: '3px solid #FF8D00', color: '#5F618D', }, '&:disabled': { @@ -63,20 +67,23 @@ const LIGHT_BUTTON = { padding: '0px 4px', color: '#5F618D', borderRadius: '100px', + backgroundColor: 'inherit', '&:hover': { - backgroundColor: '#FFFFFF', textDecoration: 'underline', + backgroundColor: 'inherit', }, '&:active': { border: `1px solid #5F618D`, - backgroundColor: '#FFFFFF', color: '#5F618D', + textDecoration: 'none', + }, + '&:focus': { + outline: 'none', }, '&:focus-visible': { border: '1px solid #5F618D', outlineOffset: '2px', - outline: '2px solid #FF8D00', - backgroundColor: '#FFFFFF', + outline: '3px solid #FF8D00', textDecoration: 'none', }, '&:disabled': { @@ -105,11 +112,12 @@ const DARK_BUTTON = { border: '1px solid #A9ABD1', backgroundColor: '#DBDDFF', }, + '&:focus': { + outline: 'none', + }, '&:focus-visible': { - outlineOffset: '2px', - outline: '2px solid #FF8D00', - border: '0px', - backgroundColor: '#DBDDFF', + border: '2px solid inherit', + outline: '3px solid #FF8D00', }, '&:disabled': { backgroundColor: '#E4E4E4', @@ -132,11 +140,14 @@ const DARK_BUTTON = { border: `1px solid #5F618D`, color: '#DBDDFF', }, + '&:focus': { + outline: 'none', + color: '#DBDDFF', + }, '&:focus-visible': { - padding: '2px 5px', - border: '2px solid #FFBE45', - outlineOffset: '-6px', - outline: '2px solid #DBDDFF', + border: '1px solid #DBDDFF', + outlineOffset: '2px', + outline: '3px solid #FFBE45', color: '#DBDDFF', }, '&:hover:focus': { @@ -160,20 +171,19 @@ const DARK_BUTTON = { borderRadius: '100px', textDecoration: 'underline', }, - '&:focus-visible': { - padding: '2px 5px', - border: '2px solid #FFBE45', - outlineOffset: '-6px', - outline: '2px solid #DBDDFF', - color: '#DBDDFF', - }, '&:active': { textDecoration: 'none', border: `1px solid #5F618D`, color: '#DBDDFF', }, - '&:hover:focus': { - textDecoration: 'none', + '&:focus': { + outline: 'none', + }, + '&:focus-visible': { + border: '1px solid #DBDDFF', + outlineOffset: '2px', + outline: '3px solid #FFBE45', + color: '#DBDDFF', }, '&:disabled': { border: 'none', From ccee6538bed2d9b3cb884ac4169fb8dc12e4bbbb Mon Sep 17 00:00:00 2001 From: Wenfeng Xing Date: Fri, 4 Nov 2022 10:54:04 -0400 Subject: [PATCH 3/3] chore: modify the style --- packages/ui-kit-theme/src/overrides/MuiButton.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/ui-kit-theme/src/overrides/MuiButton.ts b/packages/ui-kit-theme/src/overrides/MuiButton.ts index 474a009c..abfa4d74 100644 --- a/packages/ui-kit-theme/src/overrides/MuiButton.ts +++ b/packages/ui-kit-theme/src/overrides/MuiButton.ts @@ -54,6 +54,10 @@ const LIGHT_BUTTON = { outline: '3px solid #FF8D00', color: '#5F618D', }, + '&:focus-visible:hover': { + backgroundColor: '#5F618D', + color: '#FFFFFF', + }, '&:disabled': { border: 'none', backgroundColor: '#E4E4E4', @@ -86,6 +90,9 @@ const LIGHT_BUTTON = { outline: '3px solid #FF8D00', textDecoration: 'none', }, + '&:focus-visible:hover': { + textDecoration: 'underline', + }, '&:disabled': { border: 'none', backgroundColor: '#E4E4E4', @@ -119,6 +126,9 @@ const DARK_BUTTON = { border: '2px solid inherit', outline: '3px solid #FF8D00', }, + '&:focus-visible:hover': { + backgroundColor: '#A9ABD1', + }, '&:disabled': { backgroundColor: '#E4E4E4', color: '#7F7F7F', @@ -153,6 +163,10 @@ const DARK_BUTTON = { '&:hover:focus': { backgroundColor: 'inherit', }, + '&:focus-visible:hover': { + backgroundColor: '#DBDDFF', + color: '#4D4D4D', + }, '&:disabled': { border: 'none', backgroundColor: '#E4E4E4',