feat: update Button component to remove primary tone and enhance colo…

…r semantics
DaleStudy · Jan 29, 2025 · 37cd145 · 37cd145
1 parent 2a5b378
commit 37cd145
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 34 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -2,9 +2,9 @@ import React, { type HTMLAttributes } from "react";
 import { css, cva } from "../../../styled-system/css";
 import type { SystemStyleObject } from "@pandacss/types";
 
-type ButtonVariant = "solid" | "outline" | "transparent";
+type ButtonVariant = "solid" | "outline";
 
-type ButtonTone = "primary" | "neutral" | "accent" | "danger" | "warning";
+type ButtonTone = "neutral" | "accent" | "danger" | "warning";
 
 export interface ButtonProps
   extends Omit<HTMLAttributes<HTMLElement>, "style"> {
@@ -29,7 +29,7 @@ export const Button = ({
   type = "button",
   onClick,
   variant = "solid",
-  tone = "primary",
+  tone = "neutral",
   style, // destructure the style prop
   ...rest
 }: ButtonProps) => {
@@ -66,79 +66,144 @@ const baseStyles = {
   transition: "0.2s",
   lineHeight: "1",
   outline: "0",
-  "&:focus": {
-    outlineColor: { base: "{colors.violet.10}", _dark: "{colors.violet.7}" },
-    outline: "3px solid",
-    outlineOffset: "2px",
-  },
   "&:disabled": { opacity: 0.5 },
 };
 
 const styles = cva({
   compoundVariants: [
     {
       variant: "solid",
-      tone: "primary",
+      tone: "neutral",
       css: {
-        background: "primary",
-        color: "{colors.violet.1}",
+        background: "bg",
+        color: "text",
         "&:active, &:hover": {
-          background: "{colors.violetDark.10}",
+          background: "bg.hover",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },
     {
       variant: "solid",
-      tone: "neutral",
+      tone: "accent",
       css: {
-        background: "bg",
-        color: "text",
+        background: "bg.accent",
+        color: "text.accent",
         "&:active, &:hover": {
-          background: "bg.hover",
+          background: "bg.hover.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      css: {
+        background: "bg.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },
     {
       variant: "solid",
+      tone: "warning",
+      css: {
+        background: "bg.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
       tone: "neutral",
       css: {
-        background: "bg",
-        color: "text",
+        border: "3px solid",
+        borderColor: "border",
+        color: "text.DEFAULT.base",
         "&:active, &:hover": {
           background: "bg.hover",
+          color: "text.muted",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },
     {
-      variant: "solid",
+      variant: "outline",
       tone: "accent",
       css: {
-        background: "bg.accent",
-        color: "text.accent",
+        border: "3px solid",
+        borderColor: "border.accent",
+        color: "text.accent.base",
         "&:active, &:hover": {
           background: "bg.hover.accent",
+          color: "text.muted.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },
     {
-      variant: "solid",
+      variant: "outline",
       tone: "danger",
       css: {
-        background: "bg.danger",
-        color: "text.danger",
+        border: "3px solid",
+        borderColor: "border.danger",
+        color: "text.danger.base",
         "&:active, &:hover": {
           background: "bg.hover.danger",
+          color: "text.muted.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },
     {
-      variant: "solid",
+      variant: "outline",
       tone: "warning",
       css: {
-        background: "bg.warning",
-        color: "text.warning",
+        border: "3px solid",
+        borderColor: "border.warning",
+        color: "text.warning.base",
         "&:active, &:hover": {
           background: "bg.hover.warning",
+          color: "text.muted.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
         },
       },
     },

diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
@@ -8,15 +8,13 @@ export const semanticColors: SemanticTokens["colors"] = {
   base: {
     value: { base: "{colors.gray.1}", _dark: "{colors.grayDark.1}" },
   },
-  primary: { value: "{colors.violet.9}" },
-  secondary: { value: "{colors.teal.9}" },
   bg: {
     DEFAULT: {
       DEFAULT: {
-        value: { base: "{colors.grayDark.3}", _dark: "{colors.gray.3}" },
+        value: { base: "{colors.gray.3}", _dark: "{colors.grayDark.3}" },
       },
       accent: {
-        value: { base: "{colors.teal.5}", _dark: "{colors.tealDark.8}" },
+        value: { base: "{colors.teal.3}", _dark: "{colors.violetDark.3}" },
       },
       danger: {
         value: { base: "{colors.red.3}", _dark: "{colors.redDark.3}" },
@@ -27,7 +25,7 @@ export const semanticColors: SemanticTokens["colors"] = {
     },
     hover: {
       DEFAULT: {
-        value: { base: "{colors.grayDark.8}", _dark: "{colors.gray.6}" },
+        value: { base: "{colors.gray.4}", _dark: "{colors.grayDark.4}" },
       },
       accent: {
         value: { base: "{colors.teal.4}", _dark: "{colors.violetDark.4}" },
@@ -120,7 +118,7 @@ export const semanticColors: SemanticTokens["colors"] = {
         value: { base: "{colors.gray.11}", _dark: "{colors.grayDark.11}" },
       },
       accent: {
-        value: { base: "{colors.teal.11}", _dark: "{colors.tealDark.11}" },
+        value: { base: "{colors.teal.11}", _dark: "{colors.violetDark.11}" },
       },
       danger: {
         value: { base: "{colors.red.11}", _dark: "{colors.redDark.11}" },
@@ -131,7 +129,7 @@ export const semanticColors: SemanticTokens["colors"] = {
     },
     DEFAULT: {
       DEFAULT: {
-        value: { base: "{colors.grayDark.12}", _dark: "{colors.gray.12}" },
+        value: { base: "{colors.gray.12}", _dark: "{colors.grayDark.12}" },
       },
       accent: {
         value: { base: "{colors.teal.12}", _dark: "{colors.violetDark.12}" },