fix focus styling

simularium · Feb 3, 2025 · 8da822e · 8da822e
1 parent 2db65f8
commit 8da822e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/src/components/CustomButton/index.tsx b/src/components/CustomButton/index.tsx
@@ -35,15 +35,12 @@ const baseStyles = css`
     align-items: center;
     gap: 8px;
     cursor: pointer;
+    border: none;
+    outline-offset: 1px;
 
     &:disabled {
         cursor: not-allowed;
     }
-
-    &:focus-visible {
-        outline: 1px solid ${({ theme }) => theme.colors.lightPurpleBg};
-        outline-offset: 1px;
-    }
 `;
 
 const generateButtonStyles = (
@@ -56,24 +53,23 @@ const generateButtonStyles = (
         },
     }) => {
         const buttonTheme = button[variant][theme];
-        const { background, text, border, hover, active, disabled } =
+        const { background, text, hover, focus, active, disabled } =
             buttonTheme;
 
         return css`
             background-color: ${background};
-            border: 1px solid ${variant === "primary" ? background : border};
             color: ${text};
 
-            &&& {
+            &&&& {
                 &:hover:not(:disabled) {
                     background-color: ${hover.background};
                     border-color: ${hover.background};
                     color: ${hover.text};
                 }
 
-                &:active:not(:disabled) {
-                    background-color: ${hover.background};
-                    border-color: ${active.background};
+                &:focus-visible:not(:disabled) {
+                    background-color: ${focus.background};
+                    outline: 1px solid ${focus.outline};
                     color: ${active.text};
                 }
 
@@ -101,14 +97,14 @@ const actionStyles = css`
         padding: 6px 8px;
         min-width: auto;
 
-        &&& {
+        &&&& {
             &:hover:not(:disabled) {
                 color: ${action.hover.background};
             }
 
-            &:active:not(:disabled) {
-                border: ${action.active.text};
-                color: ${action.active.text};
+            &:focus-visible:not(:disabled) {
+                outline: 1px solid ${action.focus.outline};
+                color: ${action.focus.text};
             }
 
             &:disabled {

diff --git a/src/styles/theme/colors.ts b/src/styles/theme/colors.ts
@@ -58,6 +58,7 @@ export const semanticColors = {
     mediumBg: baseColors.dark.six,
     grayBg: baseColors.gray.four,
     darkBg: baseColors.dark.four,
+    darkActiveBg: baseColors.dark.one,
     lightPurpleBg: baseColors.purple.one,
     // text colors
     lightBgText: baseColors.dark.one,
@@ -92,15 +93,17 @@ export const componentColors = {
                 background: baseColors.dark.five,
                 text: baseColors.gray.six,
                 hover: {
-                    background: baseColors.dark.one,
+                    background: semanticColors.darkActiveBg,
                     text: semanticColors.primaryPurple,
                 },
                 active: {
-                    background: baseColors.dark.one,
+                    background: semanticColors.darkActiveBg,
                     text: semanticColors.primaryPurple,
                 },
                 focus: {
-                    outline: semanticColors.primaryPurple,
+                    background: semanticColors.darkActiveBg,
+                    outline: semanticColors.darkActiveBg,
+                    text: semanticColors.primaryPurple,
                 },
                 disabled: {
                     background: baseColors.purple.three,
@@ -119,7 +122,9 @@ export const componentColors = {
                     text: semanticColors.lightBgActiveText,
                 },
                 focus: {
-                    outline: semanticColors.primaryPurple,
+                    background: semanticColors.activePurple,
+                    outline: semanticColors.activePurple,
+                    text: semanticColors.lightBgActiveText,
                 },
                 disabled: {
                     background: baseColors.gray.ten,
@@ -144,7 +149,9 @@ export const componentColors = {
                     // add border?
                 },
                 focus: {
-                    outline: semanticColors.primaryPurple,
+                    background: semanticColors.darkActiveBg,
+                    outline: semanticColors.darkActiveBg,
+                    text: semanticColors.primaryPurple,
                 },
                 disabled: {
                     background: baseColors.gray.three,
@@ -165,7 +172,9 @@ export const componentColors = {
                     text: semanticColors.lightBgActiveText,
                 },
                 focus: {
-                    outline: semanticColors.primaryPurple,
+                    background: semanticColors.activePurple,
+                    outline: semanticColors.activePurple,
+                    text: semanticColors.darkActiveBg,
                 },
                 disabled: {
                     background: semanticColors.transparentBg,
@@ -185,6 +194,7 @@ export const componentColors = {
             },
             focus: {
                 outline: semanticColors.activePurple,
+                text: semanticColors.activePurple,
             },
             disabled: {
                 text: baseColors.gray.eight,