chore(site): make info gray (#14356)

aslilac · web-flow · commit 03f05e25f612 · 2024-08-20T11:59:23.000-06:00
diff --git a/.editorconfig b/.editorconfig
@@ -7,7 +7,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = tab
 
-[*.{md,yaml,yml,tf,tfvars,nix}]
+[*.{yaml,yml,tf,tfvars,nix}]
 indent_style = space
 indent_size = 2
 
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.roles.info.background,
-					border: `1px solid ${theme.roles.info.outline}`,
-					color: theme.roles.info.text,
+					backgroundColor: theme.roles.notice.background,
+					border: `1px solid ${theme.roles.notice.outline}`,
+					color: theme.roles.notice.text,
 				}),
 			]}
 		>
@@ -129,9 +129,9 @@ export const PremiumBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.roles.info.background,
-					border: `1px solid ${theme.roles.info.outline}`,
-					color: theme.roles.info.text,
+					backgroundColor: theme.roles.notice.background,
+					border: `1px solid ${theme.roles.notice.outline}`,
+					color: theme.roles.notice.text,
 				}),
 			]}
 		>
diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx
@@ -17,7 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
 	const theme = useTheme();
 	const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
 	const badgeType = useClassName(
-		(css, theme) => css({ backgroundColor: theme.palette[type].light }),
+		(css, theme) => css({ backgroundColor: theme.roles[type].fill.solid }),
 		[type],
 	);
 
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
@@ -52,11 +52,11 @@ const styles = {
 		},
 
 		"&.debug": {
-			backgroundColor: theme.roles.info.background,
-			color: theme.roles.info.text,
+			backgroundColor: theme.roles.notice.background,
+			color: theme.roles.notice.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.roles.info.outline,
+				backgroundColor: theme.roles.notice.outline,
 			},
 		},
 
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -109,7 +109,7 @@ const styles = {
 		},
 	},
 	suggestion: (theme) => ({
-		color: theme.roles.info.fill.solid,
+		color: theme.roles.notice.fill.solid,
 		marginLeft: "-4px",
 		padding: "4px 6px",
 		lineHeight: "inherit",
diff --git a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
@@ -19,7 +19,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
 				css={{
 					width: 16,
 					height: 16,
-					color: theme.palette[statusType].light,
+					color: theme.roles[statusType].fill.solid,
 				}}
 			/>
 			<div css={{ overflow: "hidden" }}>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -318,7 +318,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 
 const styles = {
 	nameSuggestion: (theme) => ({
-		color: theme.roles.info.fill.solid,
+		color: theme.roles.notice.fill.solid,
 		padding: "4px 8px",
 		lineHeight: "inherit",
 		fontSize: "inherit",
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -201,8 +201,8 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
 
 const styles = {
 	role: (theme) => ({
-		backgroundColor: theme.roles.info.background,
-		borderColor: theme.roles.info.outline,
+		backgroundColor: theme.roles.notice.background,
+		borderColor: theme.roles.notice.outline,
 	}),
 	globalRole: (theme) => ({
 		backgroundColor: theme.roles.inactive.background,
diff --git a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
@@ -170,8 +170,8 @@ const styles = {
 		borderColor: theme.roles.active.outline,
 	}),
 	ownerRoleBadge: (theme) => ({
-		backgroundColor: theme.roles.info.background,
-		borderColor: theme.roles.info.outline,
+		backgroundColor: theme.roles.notice.background,
+		borderColor: theme.roles.notice.outline,
 	}),
 	roleBadge: (theme) => ({
 		backgroundColor: theme.experimental.l2.background,
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -423,7 +423,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 	const totalInSeconds =
 		validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
 	const usageColors = chroma
-		.scale([theme.roles.success.fill.solid, theme.roles.notice.fill.solid])
+		.scale([theme.roles.success.fill.solid, theme.roles.warning.fill.solid])
 		.mode("lch")
 		.colors(validUsage?.length ?? 0);
 	// The API returns a row for each app, even if the user didn't use it.
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -37,25 +37,25 @@ export const getStatus = (
 	switch (version.job.status) {
 		case "running":
 			return {
-				type: "info",
+				type: "active",
 				text: "Running",
 				icon: <PillSpinner />,
 			};
 		case "pending":
 			return {
-				type: "info",
+				type: "active",
 				text: getPendingStatusLabel(version.job),
 				icon: <QueuedIcon />,
 			};
 		case "canceling":
 			return {
-				type: "warning",
+				type: "inactive",
 				text: "Canceling",
 				icon: <PillSpinner />,
 			};
 		case "canceled":
 			return {
-				type: "warning",
+				type: "inactive",
 				text: "Canceled",
 				icon: <ErrorIcon />,
 			};
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -34,12 +34,12 @@ export const useStatusFilterMenu = ({
 		{
 			value: "dormant",
 			label: "Dormant",
-			startIcon: <StatusIndicator color="notice" />,
+			startIcon: <StatusIndicator color="warning" />,
 		},
 		{
 			value: "suspended",
 			label: "Suspended",
-			startIcon: <StatusIndicator color="warning" />,
+			startIcon: <StatusIndicator color="inactive" />,
 		},
 	];
 	return useFilterMenu({
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -202,7 +202,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 										{workspace.latest_build.status === "running" &&
 											!workspace.health.healthy && (
 												<InfoTooltip
-													type="notice"
+													type="warning"
 													title="Workspace is unhealthy"
 													message="Your workspace is running but some agents are unhealthy."
 												/>
diff --git a/site/src/theme/dark/roles.ts b/site/src/theme/dark/roles.ts
@@ -53,16 +53,6 @@ export default {
 		},
 	},
 	notice: {
-		background: colors.yellow[950],
-		outline: colors.yellow[200],
-		text: colors.yellow[50],
-		fill: {
-			solid: colors.yellow[500],
-			outline: colors.yellow[500],
-			text: colors.white,
-		},
-	},
-	info: {
 		background: colors.blue[950],
 		outline: colors.blue[400],
 		text: colors.blue[50],
@@ -72,6 +62,16 @@ export default {
 			text: colors.white,
 		},
 	},
+	info: {
+		background: colors.zinc[950],
+		outline: colors.zinc[400],
+		text: colors.zinc[50],
+		fill: {
+			solid: colors.zinc[500],
+			outline: colors.zinc[600],
+			text: colors.white,
+		},
+	},
 	success: {
 		background: colors.green[950],
 		outline: colors.green[500],
diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts
@@ -4,7 +4,7 @@ import colors from "../tailwindColors";
 export default {
 	danger: {
 		background: colors.orange[950],
-		outline: colors.orange[600],
+		outline: colors.orange[500],
 		text: colors.orange[50],
 		fill: {
 			solid: colors.orange[500],
@@ -34,11 +34,11 @@ export default {
 	},
 	error: {
 		background: colors.red[950],
-		outline: colors.red[500],
+		outline: colors.red[600],
 		text: colors.red[50],
 		fill: {
-			solid: colors.red[600],
-			outline: colors.red[600],
+			solid: colors.red[400],
+			outline: colors.red[400],
 			text: colors.white,
 		},
 	},
@@ -53,16 +53,6 @@ export default {
 		},
 	},
 	notice: {
-		background: colors.yellow[950],
-		outline: colors.yellow[200],
-		text: colors.yellow[50],
-		fill: {
-			solid: colors.yellow[500],
-			outline: colors.yellow[500],
-			text: colors.white,
-		},
-	},
-	info: {
 		background: colors.blue[950],
 		outline: colors.blue[400],
 		text: colors.blue[50],
@@ -72,6 +62,16 @@ export default {
 			text: colors.white,
 		},
 	},
+	info: {
+		background: colors.gray[950],
+		outline: colors.gray[400],
+		text: colors.gray[50],
+		fill: {
+			solid: colors.gray[500],
+			outline: colors.gray[600],
+			text: colors.white,
+		},
+	},
 	success: {
 		background: colors.green[950],
 		outline: colors.green[500],
@@ -108,7 +108,7 @@ export default {
 		text: colors.sky[50],
 		fill: {
 			solid: colors.sky[600],
-			outline: colors.sky[600],
+			outline: colors.sky[400],
 			text: colors.white,
 		},
 		disabled: {
@@ -133,12 +133,12 @@ export default {
 		},
 	},
 	inactive: {
-		background: colors.zinc[950],
-		outline: colors.zinc[500],
-		text: colors.zinc[50],
+		background: colors.gray[950],
+		outline: colors.gray[500],
+		text: colors.gray[50],
 		fill: {
-			solid: colors.zinc[400],
-			outline: colors.zinc[400],
+			solid: colors.gray[400],
+			outline: colors.gray[400],
 			text: colors.white,
 		},
 	},
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
@@ -8,9 +8,18 @@ import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
 import type { Roles } from "./roles";
 
-export interface Theme extends MuiTheme {
-	experimental: NewTheme;
+export interface Theme extends Omit<MuiTheme, "palette"> {
+	/** @deprecated prefer `theme.roles` when possible */
+	palette: MuiTheme["palette"];
+
+	/** Sets of colors that can be used based on the role that a UI element serves
+	 * for the user.
+	 * Does it signify an error? a warning? that something is currently running? etc.
+	 */
 	roles: Roles;
+
+	/** Theme properties that we're testing out but haven't committed to. */
+	experimental: NewTheme;
 	monaco: monaco.editor.IStandaloneThemeData;
 	externalImages: ExternalImageModeStyles;
 }
diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts
@@ -32,7 +32,7 @@ const muiTheme = createTheme({
 		},
 		divider: tw.zinc[200],
 		warning: {
-			light: tw.amber[500],
+			light: tw.amber[400],
 			main: tw.amber[800],
 			dark: tw.amber[950],
 		},
@@ -80,25 +80,25 @@ const muiTheme = createTheme({
 		...components,
 		MuiCssBaseline: {
 			styleOverrides: (theme) => `
-        html, body, #root, #storybook-root {
-          height: 100%;
-        }
+				html, body, #root, #storybook-root {
+					height: 100%;
+				}
 
-        button, input {
-          font-family: ${BODY_FONT_FAMILY};
-        }
+				button, input {
+					font-family: ${BODY_FONT_FAMILY};
+				}
 
-        input:-webkit-autofill,
-        input:-webkit-autofill:hover,
-        input:-webkit-autofill:focus,
-        input:-webkit-autofill:active  {
-          -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important;
-        }
+				input:-webkit-autofill,
+				input:-webkit-autofill:hover,
+				input:-webkit-autofill:focus,
+				input:-webkit-autofill:active  {
+					-webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important;
+				}
 
-        ::placeholder {
-          color: ${theme.palette.text.disabled};
-        }
-      `,
+				::placeholder {
+					color: ${theme.palette.text.disabled};
+				}
+			`,
 		},
 		MuiAvatar: {
 			styleOverrides: {
diff --git a/site/src/theme/light/roles.ts b/site/src/theme/light/roles.ts
@@ -53,16 +53,6 @@ export default {
 		},
 	},
 	notice: {
-		background: colors.yellow[50],
-		outline: colors.yellow[600],
-		text: colors.yellow[950],
-		fill: {
-			solid: colors.yellow[500],
-			outline: colors.yellow[500],
-			text: colors.white,
-		},
-	},
-	info: {
 		background: colors.blue[50],
 		outline: colors.blue[400],
 		text: colors.blue[950],
@@ -72,6 +62,16 @@ export default {
 			text: colors.white,
 		},
 	},
+	info: {
+		background: colors.zinc[50],
+		outline: colors.zinc[400],
+		text: colors.zinc[950],
+		fill: {
+			solid: colors.zinc[700],
+			outline: colors.zinc[600],
+			text: colors.white,
+		},
+	},
 	success: {
 		background: colors.green[50],
 		outline: colors.green[500],
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
