chore: updates to button styles

jaaydenh · jaaydenh · commit 331ed79811c6 · 2024-11-05T14:52:55.000Z
diff --git a/site/src/components/ui/button.tsx b/site/src/components/ui/button.tsx
@@ -5,18 +5,18 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-0 font-semibold",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-semibold border-solid",
 	{
 		variants: {
 			variant: {
 				default:
 					"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary",
 				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+					"border border-border-default text-content-primary bg-transparent hover:bg-surface-secondary",
 				subtle:
-					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+					"border-none bg-transparent text-content-secondary hover:text-content-primary",
 				warning:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+					"border border-border-error text-content-primary bg-surface-error hover:bg-transparent",
 			},
 			size: {
 				default: "h-10 px-3 py-2",
diff --git a/site/src/index.css b/site/src/index.css
@@ -13,6 +13,9 @@
 		--surface-tertiary: #e4e4e7;
 		--surface-invert-primary: #27272a;
 		--surface-invert-secondary: #3f3f46;
+		--surface-error: #450A0A;
+		--border-default :#E4E4E7;
+		--border-error: #F87171;
 		--radius: 0.5rem;
 	}
 	.dark {
@@ -25,5 +28,8 @@
 		--surface-tertiary: #27272a;
 		--surface-invert-primary: #e4e4e7;
 		--surface-invert-secondary: #a1a1aa;
+		--surface-error: #450A0A;
+		--border-default: #27272A;
+		--border-error: #F87171;
 	}
 }
diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx
@@ -21,7 +21,7 @@ const EnterpriseVersion: FC = () => {
 						Premium for enhanced multi-tenant control and flexibility:
 					</p>
 				</div>
-				<Button asChild>
+				<Button asChild variant="warning">
 					<a href="https://coder.com/contact/sales" className="no-underline">
 						Upgrade
 					</a>
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -37,6 +37,11 @@ module.exports = {
 						primary: "var(--surface-invert-primary)",
 						secondary: "var(--surface-invert-secondary)",
 					},
+					error: "var(--surface-error)",
+				},
+				border: {
+					default: "var(--border-default)",
+					error: "var(--border-error)",
 				},
 			},
 		},

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@`
`13`	`13`	`--surface-tertiary: #e4e4e7;`
`14`	`14`	`--surface-invert-primary: #27272a;`
`15`	`15`	`--surface-invert-secondary: #3f3f46;`
	`16`	`+ --surface-error: #450A0A;`
	`17`	`+ --border-default :#E4E4E7;`
	`18`	`+ --border-error: #F87171;`
`16`	`19`	`--radius: 0.5rem;`
`17`	`20`	`}`
`18`	`21`	`.dark {`
`@@ -25,5 +28,8 @@`
`25`	`28`	`--surface-tertiary: #27272a;`
`26`	`29`	`--surface-invert-primary: #e4e4e7;`
`27`	`30`	`--surface-invert-secondary: #a1a1aa;`
	`31`	`+ --surface-error: #450A0A;`
	`32`	`+ --border-default: #27272A;`
	`33`	`+ --border-error: #F87171;`
`28`	`34`	`}`
`29`	`35`	`}`