chore: update all colors for preview role

Parkreiner · Parkreiner · commit 0ad68afb99fc · 2024-09-13T21:00:40.000Z
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -10,6 +10,7 @@ import {
 	type HTMLAttributes,
 	type ReactNode,
 } from "react";
+import tailwindColors from "theme/tailwindColors";
 import { docs } from "utils/docs";
 
 /**
@@ -37,15 +38,18 @@ const styles = {
 		padding: "4px 8px",
 		lineHeight: 1,
 		whiteSpace: "nowrap",
-		border: `1px solid ${theme.palette.divider}`,
-		color: theme.palette.text.secondary,
-		backgroundColor: theme.palette.background.default,
+		border: `1px solid ${theme.roles.preview.outline}`,
+		color: theme.roles.preview.text,
+		backgroundColor: theme.roles.preview.background,
 		borderRadius: "6px",
+		transition:
+			"color 0.4s ease-in-out, border-color 0.4s ease-in-out, background-color 0.4s ease-in-out",
 	}),
 
 	badgeHover: (theme) => ({
-		color: theme.palette.text.primary,
-		borderColor: theme.palette.text.primary,
+		color: theme.roles.preview.hover.text,
+		borderColor: theme.roles.preview.hover.outline,
+		backgroundColor: theme.roles.preview.hover.background,
 	}),
 
 	badgeLargeText: {
diff --git a/site/src/theme/dark/roles.ts b/site/src/theme/dark/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[950],
-		outline: colors.violet[500],
-		text: colors.violet[50],
+		background: colors.cyan[950],
+		outline: colors.cyan[600],
+		text: colors.cyan[400],
 		fill: {
-			solid: colors.violet[400],
-			outline: colors.violet[400],
+			solid: colors.cyan[400],
+			outline: colors.cyan[400],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
+		disabled: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[950],
-		outline: colors.violet[500],
-		text: colors.violet[50],
+		background: colors.cyan[950],
+		outline: colors.cyan[600],
+		text: colors.cyan[400],
 		fill: {
-			solid: colors.violet[400],
-			outline: colors.violet[400],
+			solid: colors.cyan[400],
+			outline: colors.cyan[400],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
+		disabled: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
@@ -1,4 +1,3 @@
-// biome-ignore lint/nursery/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now.
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";
diff --git a/site/src/theme/light/roles.ts b/site/src/theme/light/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[50],
 		outline: colors.orange[400],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[50],
-		outline: colors.violet[500],
-		text: colors.violet[950],
+		background: colors.cyan[100],
+		outline: colors.cyan[500],
+		text: colors.cyan[950],
 		fill: {
-			solid: colors.violet[600],
-			outline: colors.violet[600],
+			solid: colors.cyan[600],
+			outline: colors.cyan[600],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.cyan[50],
+			outline: colors.cyan[600],
+			text: colors.cyan[950],
+			fill: {
+				outline: colors.cyan[500],
+				solid: colors.cyan[500],
+				text: colors.white,
+			},
+		},
+		disabled: {
+			background: colors.cyan[50],
+			outline: colors.cyan[800],
+			text: colors.cyan[200],
+			fill: {
+				solid: colors.cyan[800],
+				outline: colors.cyan[800],
+				text: colors.white,
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/roles.ts b/site/src/theme/roles.ts
@@ -36,7 +36,7 @@ export interface Roles {
 	/** This isn't quite ready for prime-time, but you're welcome to look around!
 	 * Preview features, experiments, unstable, etc.
 	 */
-	preview: Role;
+	preview: InteractiveRole;
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		-// biome-ignore lint/nursery/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now.
`2`	`1`	`import type { Theme as MuiTheme } from "@mui/material/styles";`
`3`	`2`	`import type * as monaco from "monaco-editor";`
`4`	`3`	`import type { Branding } from "./branding";`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export interface Roles {`
`36`	`36`	`/** This isn't quite ready for prime-time, but you're welcome to look around!`
`37`	`37`	`* Preview features, experiments, unstable, etc.`
`38`	`38`	`*/`
`39`		`- preview: Role;`
	`39`	`+ preview: InteractiveRole;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`/**`