Merge pull request #25 from EyeSeeTea/feat/accessibility-tweaks

Feat: accessible colors
EyeSeeTea · Mar 18, 2024 · 8e7e53a · 8e7e53a
2 parents 1363f7d + c837bfa
commit 8e7e53a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/src/webapp/components/empty-state/EmptyState.tsx b/src/webapp/components/empty-state/EmptyState.tsx
@@ -24,9 +24,9 @@ const Container = styled.section<ContainerProps>`
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${customTheme.color.lighterGrey};
-    color: ${customTheme.color.grey};
-    border-color: ${customTheme.color.grey};
+    background-color: ${customTheme.color.lightGrey};
+    color: ${customTheme.color.dark};
+    border-color: ${customTheme.color.dark};
     border: 1px solid;
     border-radius: 4px;
     height: 28rem;
@@ -35,7 +35,7 @@ const Container = styled.section<ContainerProps>`
     ${({ $variant }) =>
         $variant === "success" &&
         css`
-            background-color: ${customTheme.color.lighterGreen};
+            background-color: ${customTheme.color.lightGreen};
             color: ${customTheme.color.green};
             border-color: ${customTheme.color.green};
         `};

diff --git a/src/webapp/components/progress-status/ProgressStatus.tsx b/src/webapp/components/progress-status/ProgressStatus.tsx
@@ -41,12 +41,12 @@ const Container = styled.li<ContainerProps>`
     ${({ $status }) =>
         $status === "danger" &&
         css`
-            background-color: ${customTheme.color.red};
-            border-color: ${customTheme.color.red};
+            background-color: ${customTheme.color.lightRed};
+            border-color: ${customTheme.color.lightRed};
         `};
 `;
 
 const StyledTypography = styled(Typography)`
     font-size: 0.75rem;
-    color: ${customTheme.color.white};
+    color: ${customTheme.color.dark};
 `;
diff --git a/src/webapp/pages/app/themes/customTheme.ts b/src/webapp/pages/app/themes/customTheme.ts
@@ -1,14 +1,12 @@
 const customTheme = {
     color: {
-        white: "#ffffff",
-        black: "#111111",
-        grey: "#8e8e8e",
-        lightGrey: "#BDBDBD",
-        lighterGrey: "#F2F2F2",
-        green: "#355B37",
-        lightGreen: "#4CAF50",
-        lighterGreen: "#D8EDD9",
-        red: "#D32F2F",
+        light: "#ffffff",
+        dark: "#333333",
+        grey: "#717171",
+        lightGrey: "#D7D7D7",
+        green: "#163318",
+        lightGreen: "#B5DFB7",
+        lightRed: "#FFB8B8",
     },
 };