Use two tone accent

src/components/form/Button.tsx

@@ -16,7 +16,7 @@ export const Button = ({
 }: ButtonProps): JSX.Element => {
   return (
     <button
-      className={`flex w-full rounded-md bg-button px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
+      className={`flex w-full rounded-md bg-accentMuted px-3 text-textPrimary hover:brightness-hover focus:outline-none active:brightness-press ${
         size === "sm"
           ? "h-8 text-sm"
           : size === "md"

src/components/form/IconButton.tsx

@@ -16,7 +16,7 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <button
-      className={`flex rounded-md bg-button text-textPrimary hover:text-accent hover:brightness-hover focus:outline-none active:brightness-press ${
+      className={`flex rounded-md bg-accentMuted text-textPrimary hover:text-accent hover:brightness-hover focus:outline-none active:brightness-press ${
         size === "sm" ? "h-8 w-8" : size === "md" ? "h-10 w-10" : "h-12 w-12"
       } ${
         disabled

src/index.css

@@ -5,22 +5,18 @@
 :root {
   --backgroundPrimary: #f5f5f6;
   --backgroundSecondary: #e6e9ed;
-  --accent: #70afea;
-  --button: #cfd5dd;
   --textPrimary: #111132;
   --textSecondary: #64748b;
   --link: #0b69bf;
 
-  --brighnessHover: "0.95";
-  --brightnessPress: "1.05";
-  --brightnessDisabled: "0.75";
+  --brighnessHover: 0.95;
+  --brightnessPress: 1.05;
+  --brightnessDisabled: 0.75;
 }
 
 [data-theme="dark"] {
   --backgroundPrimary: #2d2d30;
   --backgroundSecondary: #363638;
-  --accent: #2093fe;
-  --button: #595959;
   --textPrimary: #ebebeb;
   --textSecondary: #bdbdbd;
   --link: #8ec9ff;
@@ -32,56 +28,70 @@
 
 [data-accent="red"] {
   --accent: #f28585;
+  --accentMuted: #f4abab;
 }
 
 [data-accent="red"][data-theme="dark"] {
   --accent: #f25555;
+  --accentMuted: #b04749;
 }
 
 [data-accent="orange"] {
   --accent: #edb17a;
+  --accentMuted: #efc7a4;
 }
 
 [data-accent="orange"][data-theme="dark"] {
   --accent: #e1720b;
+  --accentMuted: #a55c17;
 }
 
 [data-accent="yellow"] {
   --accent: #e0cc87;
+  --accentMuted: #e8daad;
 }
 
 [data-accent="yellow"][data-theme="dark"] {
   --accent: #ac8c1a;
+  --accentMuted: #826c22;
 }
 
 [data-accent="green"] {
   --accent: #8bc9c5;
+  --accentMuted: #afd7d5;
 }
 
 [data-accent="green"][data-theme="dark"] {
   --accent: #27a341;
+  --accentMuted: #297b3b;
 }
 
 [data-accent="blue"] {
   --accent: #70afea;
+  --accentMuted: #9cc7ee;
 }
 
 [data-accent="blue"][data-theme="dark"] {
   --accent: #2093fe;
+  --accentMuted: #2471ba;
 }
 
 [data-accent="purple"] {
   --accent: #a09eef;
+  --accentMuted: #bcbcf1;
 }
 
 [data-accent="purple"][data-theme="dark"] {
   --accent: #926bff;
+  --accentMuted: #7057bb;
 }
 
 [data-accent="pink"] {
   --accent: #dba0c7;
+  --accentMuted: #e3bcd7;
 }
 
 [data-accent="pink"][data-theme="dark"] {
   --accent: #e454c4;
+  --accentMuted: #a84892;
 }

tailwind.config.cjs

@@ -21,7 +21,7 @@ module.exports = {
       backgroundPrimary: "var(--backgroundPrimary)",
       backgroundSecondary: "var(--backgroundSecondary)",
       accent: "var(--accent)",
-      button: "var(--button)",
+      accentMuted: "var(--accentMuted)",
       textPrimary: "var(--textPrimary)",
       textSecondary: "var(--textSecondary)",
       link: "var(--link)"