feat(button): add disabled styles for danger variant (#518)

Co-authored-by: Huyen Nguyen <[email protected]>

Author: Sembauke

src/button/button.test.tsx

@@ -160,11 +160,6 @@ describe("<Button />", () => {
 // Type tests
 // ------------------------------
 
-// @ts-expect-error - Button with `danger` variant cannot be disabled
-<Button variant="danger" disabled>
-	Button text
-</Button>;
-
 // @ts-expect-error - Button with `info` variant cannot be disabled
 <Button variant="info" disabled>
 	Button text

src/button/button.tsx

@@ -44,17 +44,25 @@ const computeClassNames = ({
 	switch (variant) {
 		case "danger":
 			classNames.push(
-				"border-foreground-danger",
-				"bg-background-danger",
-				"text-foreground-danger",
-				"hover:bg-foreground-danger",
-				"hover:text-background-danger",
-				// This hover rule is redundant for the component library,
-				// but is needed to override the border color set in client's `global.css`.
-				// We can remove it once we have completely removed the CSS overrides in client.
-				"hover:border-foreground-danger",
-				"dark:hover:bg-background-danger",
-				"dark:hover:text-foreground-danger",
+				...(disabled
+					? [
+							"border-gray-450",
+							"bg-background-danger-disabled",
+							"text-foreground-danger-disabled",
+						]
+					: [
+							"border-foreground-danger",
+							"bg-background-danger",
+							"text-foreground-danger",
+							"hover:bg-foreground-danger",
+							"hover:text-background-danger",
+							// This hover rule is redundant for the component library,
+							// but is needed to override the border color set in client's `global.css`.
+							// We can remove it once we have completely removed the CSS overrides in client.
+							"hover:border-foreground-danger",
+							"dark:hover:bg-background-danger",
+							"dark:hover:text-foreground-danger",
+						]),
 			);
 			break;
 		case "info":
@@ -78,12 +86,7 @@ const computeClassNames = ({
 				"bg-background-quaternary",
 				"text-foreground-secondary",
 				...(disabled
-					? [
-							"active:before:hidden",
-							"border-gray-450",
-							"aria-disabled:cursor-not-allowed",
-							"aria-disabled:opacity-80",
-						]
+					? ["border-gray-450"]
 					: [
 							"border-foreground-secondary",
 							"hover:bg-foreground-primary",
@@ -98,6 +101,14 @@ const computeClassNames = ({
 			);
 	}
 
+	if (disabled) {
+		classNames.push(
+			"active:before:hidden",
+			"aria-disabled:cursor-not-allowed",
+			"aria-disabled:opacity-80",
+		);
+	}
+
 	switch (size) {
 		case "large":
 			classNames.push("px-4 py-2.5 text-lg");

src/button/types.ts

@@ -28,7 +28,7 @@ interface InfoButtonProps extends BaseButtonProps {
 
 interface DangerButtonProps extends BaseButtonProps {
 	variant: "danger";
-	disabled?: false;
+	disabled?: boolean;
 }
 
 export type ButtonProps =

src/colors.css

@@ -49,6 +49,7 @@
 	--red70: #a94442;
 	--red80: #f82153;
 	--red90: #850000;
+	--red100: #5a3535;
 
 	--orange30: #eda971;
 }
@@ -99,6 +100,7 @@
 	--red70: var(--red70);
 	--red80: var(--red80);
 	--red90: var(--red90);
+	--red100: var(--red100);
 
 	--orange30: var(--orange30);
 }
@@ -109,6 +111,7 @@
 	--foreground-tertiary: var(--gray80);
 	--foreground-quaternary: var(--gray75);
 	--foreground-danger: var(--red15);
+	--foreground-danger-disabled: var(--red100);
 	--foreground-success: var(--green40);
 	--foreground-info: var(--blue30);
 	--foreground-warning: var(--yellow45);
@@ -118,6 +121,7 @@
 	--background-tertiary: var(--gray10);
 	--background-quaternary: var(--gray15);
 	--background-danger: var(--red90);
+	--background-danger-disabled: var(--red05);
 	--background-success: var(--green90);
 	--background-info: var(--blue90);
 	--background-selection: var(--blue90-translucent);
@@ -131,6 +135,7 @@
 	--foreground-tertiary: var(--gray10);
 	--foreground-quaternary: var(--gray15);
 	--foreground-danger: var(--red90);
+	--foreground-danger-disabled: var(--red05);
 	--foreground-success: var(--green90);
 	--foreground-info: var(--blue90);
 	--foreground-warning: var(--yellow40);
@@ -140,6 +145,7 @@
 	--background-tertiary: var(--gray80);
 	--background-quaternary: var(--gray75);
 	--background-danger: var(--red15);
+	--background-danger-disabled: var(--red100);
 	--background-success: var(--green40);
 	--background-info: var(--blue30);
 	--background-selection: var(--blue30-translucent);

tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
 				"foreground-tertiary": "var(--foreground-tertiary)",
 				"foreground-quaternary": "var(--foreground-quaternary)",
 				"foreground-danger": "var(--foreground-danger)",
+				"foreground-danger-disabled": "var(--foreground-danger-disabled)",
 				"foreground-success": "var(--foreground-success)",
 				"foreground-info": "var(--foreground-info)",
 				// Background
@@ -30,6 +31,7 @@ module.exports = {
 				"background-tertiary": "var(--background-tertiary)",
 				"background-quaternary": "var(--background-quaternary)",
 				"background-danger": "var(--background-danger)",
+				"background-danger-disabled": "var(--background-danger-disabled)",
 				"background-success": "var(--background-success)",
 				"background-info": "var(--background-info)",
 				// Focus outline
@@ -79,6 +81,7 @@ module.exports = {
 					700: "var(--red70)",
 					800: "var(--red80)",
 					900: "var(--red90)",
+					1000: "var(--red100)",
 				},
 				orange: {
 					300: "var(--orange30)",