fix(buttons): added new colors to improve the accessibility in buttons

Dygmalab · Aug 14, 2023 · 94cb722 · 94cb722
1 parent 400cd6c
commit 94cb722
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/renderer/theme/DarkTheme.js b/src/renderer/theme/DarkTheme.js
@@ -10,21 +10,18 @@ import neuronDefyWirelessImage from "@Assets/base/neuron-defy--black.png";
 import mouseWheelBackgroundDark from "@Assets/dark/mouseWheel.png";
 import oldToNew from "@Assets/dark/oldValueToNewValue.svg";
 
-import { RiGitBranchFill } from "react-icons/ri";
 import Tokens from "./Tokens";
 
 const settingColorOpacity = (color, opacity) => {
   let newColorArray = color;
-  let newColor;
   newColorArray = newColorArray.replace(/[^\d,]/g, "").split(",");
-  newColor = `rgba(${newColorArray[0]}, ${newColorArray[1]}, ${newColorArray[2]},  ${opacity})`;
+  const newColor = `rgba(${newColorArray[0]}, ${newColorArray[1]}, ${newColorArray[2]},  ${opacity})`;
   return newColor;
 };
 const settingColorMatrix = (color, opacity) => {
   let newColorArray = color;
-  let newColor;
   newColorArray = newColorArray.replace(/[^\d,]/g, "").split(",");
-  newColor = `0 0 0 0 ${(newColorArray[0] / 255).toFixed(2)} 0 0 0 0 ${(newColorArray[1] / 255).toFixed(2)} 0 0 0 0 ${(
+  const newColor = `0 0 0 0 ${(newColorArray[0] / 255).toFixed(2)} 0 0 0 0 ${(newColorArray[1] / 255).toFixed(2)} 0 0 0 0 ${(
     newColorArray[2] / 255
   ).toFixed(2)} 0 0 0 ${opacity} 0`;
   return newColor;
@@ -134,6 +131,9 @@ const Dark = {
     color: "#30b1b1",
   },
   font: "Libre Franklin",
+  accessibility: {
+    focusWithinColor: Tokens.colors.gray25,
+  },
   styles: {
     accordion: {
       background: settingColorOpacity(Tokens.colors.gray500, 0.2),

diff --git a/src/renderer/theme/GlobalStyles.js b/src/renderer/theme/GlobalStyles.js
@@ -320,6 +320,12 @@ svg text{
 .button:hover {
   cursor: pointer;
 }
+.button:focus {
+  outline: none;
+}
+.button:focus-within {
+  outline: 2px solid ${({ theme }) => theme.accessibility.focusWithinColor};
+}
 .button[disabled]:hover {
   cursor: not-allowed;
 }

diff --git a/src/renderer/theme/LightTheme.js b/src/renderer/theme/LightTheme.js
@@ -14,16 +14,14 @@ import Tokens from "./Tokens";
 
 const settingColorOpacity = (color, opacity) => {
   let newColorArray = color;
-  let newColor;
   newColorArray = newColorArray.replace(/[^\d,]/g, "").split(",");
-  newColor = `rgba(${newColorArray[0]}, ${newColorArray[1]}, ${newColorArray[2]},  ${opacity})`;
+  const newColor = `rgba(${newColorArray[0]}, ${newColorArray[1]}, ${newColorArray[2]},  ${opacity})`;
   return newColor;
 };
 const settingColorMatrix = (color, opacity) => {
   let newColorArray = color;
-  let newColor;
   newColorArray = newColorArray.replace(/[^\d,]/g, "").split(",");
-  newColor = `0 0 0 0 ${(newColorArray[0] / 255).toFixed(2)} 0 0 0 0 ${(newColorArray[1] / 255).toFixed(2)} 0 0 0 0 ${(
+  const newColor = `0 0 0 0 ${(newColorArray[0] / 255).toFixed(2)} 0 0 0 0 ${(newColorArray[1] / 255).toFixed(2)} 0 0 0 0 ${(
     newColorArray[2] / 255
   ).toFixed(2)} 0 0 0 ${opacity} 0`;
   return newColor;
@@ -133,6 +131,9 @@ const Light = {
     color: "#2AD2C9",
   },
   font: "Libre Franklin",
+  accessibility: {
+    focusWithinColor: Tokens.colors.purple300,
+  },
   styles: {
     accordion: {
       background: settingColorOpacity(Tokens.colors.gray25, 0.8),