Refactor Button component styles for improved color semantics and acc…

…essibility
DaleStudy · Jan 20, 2025 · 5aca818 · 5aca818
1 parent 87e77f6
commit 5aca818
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 54 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -66,10 +66,9 @@ const baseStyles = {
   lineHeight: "1",
   outline: "0",
   "&:focus": {
-    outlineColor: "focus",
+    outlineColor: { base: "{colors.violet.10}", _dark: "{colors.violet.7}" },
     outline: "3px solid",
     outlineOffset: "2px",
-    borderRadius: "10px",
   },
   "&:disabled": { opacity: 0.5 },
 };
@@ -82,64 +81,76 @@ const styles = cva({
         color: "text",
         "&:active, &:hover": {
           background: "bg.hover",
-          outline: "0",
         },
       },
       accent: {
         background: "bg.accent",
         color: "text.accent",
         "&:active, &:hover": {
           background: "bg.hover.accent",
-          outline: "0",
         },
       },
       danger: {
         background: "bg.danger",
         color: "text.danger",
         "&:active, &:hover": {
           background: "bg.hover.danger",
-          outline: "0",
         },
       },
       warning: {
         background: "bg.warning",
         color: "text.warning",
         "&:active, &:hover": {
           background: "bg.hover.warning",
-          outline: "0",
         },
       },
       solid: {
-        background: "bg.solid",
-        color: "text.solid",
+        background: { base: "{colors.violet.9}", _dark: "{colors.violet.9}" },
+        color: { base: "{colors.violet.1}", _dark: "{colors.violet.1}" },
         "&:active, &:hover": {
-          background: "bg.hover.solid",
-          outline: "0",
+          background: {
+            base: "{colors.violet.8}",
+            _dark: "{colors.violetDark.10}",
+          },
         },
       },
       outline: {
-        background: "bg.outline",
-        color: "text.outline",
+        background: {
+          base: "{colors.violet.2}",
+          _dark: "{colors.violetDark.8}",
+        },
+        color: {
+          base: "{colors.violetDark.1}",
+          _dark: "{colors.violet.1}",
+        },
         border: "4px solid",
-        borderColor: "border.outline",
+        borderColor: {
+          base: "{colors.violetDark.10}",
+          _dark: "{colors.violet.7}",
+        },
         "&:active, &:hover": {
-          background: "bg.hover.outline",
-          outline: "0",
+          background: {
+            base: "{colors.violet.4}",
+            _dark: "{colors.violetDark.10}",
+          },
         },
       },
       "outline-gradient": {
-        "--gradient-color": "linear-gradient(135deg, #24eaca, #846de9)",
+        "--gradient-color":
+          "linear-gradient(90deg,{colors.teal.9},{colors.violet.10})",
         background: "transparent",
-        color: "text.outline",
+        color: {
+          base: "{colors.violetDark.1}",
+          _dark: "{colors.violet.1}",
+        },
         border: "4px solid transparent",
+        borderRadius: "10px",
         backgroundClip: "padding-box, border-box",
         backgroundOrigin: "padding-box, border-box",
         borderImage: "var(--gradient-color)",
         borderImageSlice: "1",
         borderImageOutset: "0",
-        "&:active, &:hover": {
-          outline: "0",
-        },
+        "&:active, &:hover": {},
       },
     },
   },

diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
@@ -20,15 +20,6 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.3}", _dark: "{colors.yellowDark.3}" },
       },
-      solid: {
-        value: { base: "{colors.violet.10}", _dark: "{colors.violet.1}" },
-      },
-      outline: {
-        value: { base: "{colors.violet.2}", _dark: "{colors.violetDark.8}" },
-      },
-      "outline-gradient": {
-        value: { base: "{colors.violet.2}", _dark: "{colors.violetDark.8}" },
-      },
     },
     hover: {
       DEFAULT: {
@@ -43,12 +34,6 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.4}", _dark: "{colors.yellowDark.4}" },
       },
-      solid: {
-        value: { base: "{colors.violet.8}", _dark: "{colors.violet.3}" },
-      },
-      outline: {
-        value: { base: "{colors.violet.4}", _dark: "{colors.violetDark.10}" },
-      },
     },
     active: {
       DEFAULT: {
@@ -79,9 +64,6 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.7}", _dark: "{colors.yellowDark.7}" },
       },
-      outline: {
-        value: { base: "{colors.violetDark.10}", _dark: "{colors.violet.7}" },
-      },
     },
     hover: {
       DEFAULT: {
@@ -156,22 +138,6 @@ export const semanticColors: SemanticTokens["colors"] = {
       warning: {
         value: { base: "{colors.yellow.12}", _dark: "{colors.yellowDark.12}" },
       },
-      solid: {
-        value: { base: "{colors.violet.1}", _dark: "{colors.violet.10}" },
-      },
-      outline: {
-        value: {
-          base: "{colors.violetDark.1}",
-          _dark: "{colors.violet.1}",
-        },
-      },
-    },
-  },
-  focus: {
-    DEFAULT: {
-      DEFAULT: {
-        value: { base: "{colors.violet.10}", _dark: "{colors.violet.10}" },
-      },
     },
   },
 };