From 5a61d3f2280c5a5c5c42115f5117dc59bd0bf323 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 19 Aug 2024 17:56:49 +0000
Subject: [PATCH 01/11] feat: add resource-action pills to custom roles table

---
 .../CustomRolesPage/CustomRolesPageView.tsx   | 128 +++++++++++++++++-
 site/src/theme/dark/index.ts                  |   2 +
 site/src/theme/dark/permission.ts             |   8 ++
 site/src/theme/darkBlue/index.ts              |   2 +
 site/src/theme/darkBlue/permission.ts         |   8 ++
 site/src/theme/index.ts                       |   1 +
 site/src/theme/light/index.ts                 |   2 +
 site/src/theme/light/permission.ts            |   8 ++
 site/src/theme/permission.ts                  |   5 +
 9 files changed, 157 insertions(+), 7 deletions(-)
 create mode 100644 site/src/theme/dark/permission.ts
 create mode 100644 site/src/theme/darkBlue/permission.ts
 create mode 100644 site/src/theme/light/permission.ts
 create mode 100644 site/src/theme/permission.ts

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 15d9c3773b3b5..32d66db9bae46 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -1,14 +1,15 @@
-import type { Interpolation, Theme } from "@emotion/react";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import AddOutlined from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import type { Role } from "api/typesGenerated";
+import type { Permission, Role } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import {
@@ -19,6 +20,12 @@ import {
 	ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { Paywall } from "components/Paywall/Paywall";
+import { Pill } from "components/Pill/Pill";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -42,7 +49,6 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 }) => {
 	const isLoading = roles === undefined;
 	const isEmpty = Boolean(roles && roles.length === 0);
-
 	return (
 		<>
 			<ChooseOne>
@@ -58,8 +64,8 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 						<Table>
 							<TableHead>
 								<TableRow>
-									<TableCell width="50%">Name</TableCell>
-									<TableCell width="49%">Permissions</TableCell>
+									<TableCell width="40%">Name</TableCell>
+									<TableCell width="59%">Permissions</TableCell>
 									<TableCell width="1%" />
 								</TableRow>
 							</TableHead>
@@ -116,6 +122,10 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 	);
 };
 
+function getUniqueResourceTypes(jsonObject: readonly Permission[]) {
+	const resourceTypes = jsonObject.map((item) => item.resource_type);
+	return [...new Set(resourceTypes)];
+}
 interface RoleRowProps {
 	role: Role;
 	onDelete: () => void;
@@ -125,12 +135,28 @@ interface RoleRowProps {
 const RoleRow: FC<RoleRowProps> = ({ role, onDelete, canAssignOrgRole }) => {
 	const navigate = useNavigate();
 
+	const resourceTypes: string[] = getUniqueResourceTypes(
+		role.organization_permissions,
+	);
+
 	return (
 		<TableRow data-testid={`role-${role.name}`}>
 			<TableCell>{role.display_name || role.name}</TableCell>
 
-			<TableCell css={styles.secondary}>
-				{role.organization_permissions.length}
+			<TableCell>
+				<Stack direction="row" spacing={1}>
+					<PermissionsPill
+						resource={resourceTypes[0]}
+						permissions={role.organization_permissions}
+					/>
+
+					{resourceTypes.length > 1 && (
+						<OverflowPermissionPill
+							resources={resourceTypes.slice(1)}
+							permissions={role.organization_permissions.slice(1)}
+						/>
+					)}
+				</Stack>
 			</TableCell>
 
 			<TableCell>
@@ -176,10 +202,98 @@ const TableLoader = () => {
 	);
 };
 
+interface PermissionPillProps {
+	resource: string;
+	permissions: readonly Permission[];
+}
+
+const PermissionsPill: FC<PermissionPillProps> = ({
+	resource,
+	permissions,
+}) => {
+	const actions = permissions.filter((p) => {
+		if (resource === p.resource_type) {
+			return p.action;
+		}
+	});
+
+	return (
+		<Pill css={styles.permissionPill}>
+			<b>{resource}</b>: {actions.map((p) => p.action).join(", ")}
+		</Pill>
+	);
+};
+
+type OverflowPermissionPillProps = {
+	resources: string[];
+	permissions: readonly Permission[];
+};
+
+const OverflowPermissionPill: FC<OverflowPermissionPillProps> = ({
+	resources,
+	permissions,
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Popover mode="hover">
+			<PopoverTrigger>
+				<Pill
+					css={{
+						backgroundColor: theme.palette.background.paper,
+						borderColor: theme.palette.divider,
+					}}
+				>
+					+{resources.length} more
+				</Pill>
+			</PopoverTrigger>
+
+			<PopoverContent
+				disableRestoreFocus
+				disableScrollLock
+				css={{
+					".MuiPaper-root": {
+						display: "flex",
+						flexFlow: "column wrap",
+						columnGap: 8,
+						rowGap: 12,
+						padding: "12px 16px",
+						alignContent: "space-around",
+						minWidth: "auto",
+						backgroundColor: theme.palette.background.default,
+					},
+				}}
+				anchorOrigin={{
+					vertical: -4,
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+			>
+				{resources.map((resource) => (
+					<PermissionsPill
+						key={resource}
+						resource={resource}
+						permissions={permissions}
+					/>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+};
+
 const styles = {
 	secondary: (theme) => ({
 		color: theme.palette.text.secondary,
 	}),
+	permissionPill: (theme) => ({
+		backgroundColor: theme.permission.background,
+		borderColor: theme.permission.outline,
+		color: theme.permission.text,
+		width: "fit-content",
+	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
 export default CustomRolesPageView;
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index d9644e7494a08..1e8e8ec3a68e5 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -2,6 +2,7 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import permission from "./permission";
 import roles from "./roles";
 
 export default {
@@ -10,4 +11,5 @@ export default {
 	experimental,
 	monaco,
 	roles,
+	permission,
 };
diff --git a/site/src/theme/dark/permission.ts b/site/src/theme/dark/permission.ts
new file mode 100644
index 0000000000000..1c454f98757c4
--- /dev/null
+++ b/site/src/theme/dark/permission.ts
@@ -0,0 +1,8 @@
+import type { Permission } from "../permission";
+import colors from "../tailwindColors";
+
+export default {
+	background: colors.zinc[800],
+	outline: colors.zinc[700],
+	text: colors.zinc[200],
+} satisfies Permission;
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index d9644e7494a08..1e8e8ec3a68e5 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -2,6 +2,7 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import permission from "./permission";
 import roles from "./roles";
 
 export default {
@@ -10,4 +11,5 @@ export default {
 	experimental,
 	monaco,
 	roles,
+	permission,
 };
diff --git a/site/src/theme/darkBlue/permission.ts b/site/src/theme/darkBlue/permission.ts
new file mode 100644
index 0000000000000..9434a1f8b9449
--- /dev/null
+++ b/site/src/theme/darkBlue/permission.ts
@@ -0,0 +1,8 @@
+import type { Permission } from "../permission";
+import colors from "../tailwindColors";
+
+export default {
+	background: colors.gray[800],
+	outline: colors.gray[700],
+	text: colors.gray[200],
+} satisfies Permission;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index f161ec88cfb64..dd2f21883ab34 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -6,6 +6,7 @@ import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
+import type { Permission } from "./permission";
 import type { Roles } from "./roles";
 
 export interface Theme extends Omit<MuiTheme, "palette"> {
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index 466ff8d6fb6b9..2d7920270655f 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -2,6 +2,7 @@ import { forLightThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import permission from "./permission";
 import roles from "./roles";
 
 export default {
@@ -10,4 +11,5 @@ export default {
 	experimental,
 	monaco,
 	roles,
+	permission,
 };
diff --git a/site/src/theme/light/permission.ts b/site/src/theme/light/permission.ts
new file mode 100644
index 0000000000000..8796be5821054
--- /dev/null
+++ b/site/src/theme/light/permission.ts
@@ -0,0 +1,8 @@
+import type { Permission } from "../permission";
+import colors from "../tailwindColors";
+
+export default {
+	background: colors.zinc[200],
+	outline: colors.zinc[300],
+	text: colors.zinc[700],
+} satisfies Permission;
diff --git a/site/src/theme/permission.ts b/site/src/theme/permission.ts
new file mode 100644
index 0000000000000..2bcfc60fd0465
--- /dev/null
+++ b/site/src/theme/permission.ts
@@ -0,0 +1,5 @@
+export interface Permission {
+	background: string;
+	outline: string;
+	text: string;
+}

From 83c5b099e88f5c1ddbb2c3386417945a256e248e Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 21 Aug 2024 15:26:44 +0000
Subject: [PATCH 02/11] fix: remove permission from theme and change name to
 colorRoles

---
 .../ActiveUserChart/ActiveUserChart.tsx       |  6 +--
 site/src/components/Badges/Badges.tsx         | 48 +++++++++----------
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     |  6 +--
 site/src/components/Dialogs/Dialog.tsx        | 16 +++----
 .../components/HelpTooltip/HelpTooltip.tsx    |  2 +-
 .../components/InfoTooltip/InfoTooltip.tsx    |  4 +-
 site/src/components/LastSeen/LastSeen.tsx     |  6 +--
 site/src/components/Logs/LogLine.tsx          | 18 +++----
 .../PaginationWidget/PageButtons.tsx          |  8 ++--
 site/src/components/Paywall/Paywall.tsx       |  6 +--
 .../src/components/Paywall/PopoverPaywall.tsx |  6 +--
 site/src/components/Pill/Pill.tsx             |  4 +-
 .../RichParameterInput/RichParameterInput.tsx |  2 +-
 .../StatusIndicator/StatusIndicator.tsx       |  4 +-
 .../DeploymentBanner/DeploymentBannerView.tsx |  2 +-
 .../LicenseBanner/LicenseBannerView.tsx       |  4 +-
 site/src/modules/resources/AgentMetadata.tsx  |  2 +-
 site/src/modules/resources/XRayScanAlert.tsx  |  6 +--
 .../TemplateExampleCard.tsx                   |  4 +-
 .../TemplateFiles/TemplateFileTree.tsx        |  4 +-
 .../templates/TemplateFiles/TemplateFiles.tsx |  6 ++-
 .../WorkspaceOutdatedTooltip.tsx              |  2 +-
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     |  2 +-
 .../CreateTemplatePage/BuildLogsDrawer.tsx    |  2 +-
 .../CreateWorkspacePageView.tsx               |  2 +-
 .../AnnouncementBannerItem.tsx                |  2 +-
 site/src/pages/DeploySettingsPage/Option.tsx  |  4 +-
 site/src/pages/HealthPage/DERPRegionPage.tsx  |  4 +-
 .../CustomRolesPage/CustomRolesPageView.tsx   |  6 +--
 .../OrganizationMembersPageView.tsx           |  8 ++--
 .../OrganizationSettingsPageView.tsx          | 20 ++++----
 .../UserTable/UserRoleCell.tsx                |  8 ++--
 .../TemplateInsightsPage.tsx                  |  5 +-
 .../TemplateVersionEditor.tsx                 |  2 +-
 .../TemplateVersionStatusBadge.tsx            |  2 +-
 .../AppearancePage/AppearanceForm.tsx         |  2 +-
 .../WorkspaceBuildPageView.tsx                |  2 +-
 .../WorkspaceDeleteDialog.tsx                 | 10 ++--
 .../WorkspaceNotifications/Notifications.tsx  | 10 ++--
 .../WorkspaceScheduleControls.tsx             |  2 +-
 .../BatchUpdateConfirmation.tsx               |  2 +-
 site/src/pages/WorkspacesPage/LastUsed.tsx    |  6 +--
 site/src/theme/{roles.ts => colorRoles.ts}    | 37 +++++++-------
 .../theme/dark/{roles.ts => colorRoles.ts}    | 14 +++++-
 site/src/theme/dark/index.ts                  |  6 +--
 site/src/theme/dark/permission.ts             |  8 ----
 .../darkBlue/{roles.ts => colorRoles.ts}      | 14 +++++-
 site/src/theme/darkBlue/index.ts              |  6 +--
 site/src/theme/darkBlue/permission.ts         |  8 ----
 site/src/theme/experimental.ts                |  6 +--
 site/src/theme/index.ts                       |  5 +-
 .../theme/light/{roles.ts => colorRoles.ts}   | 14 +++++-
 site/src/theme/light/index.ts                 |  6 +--
 site/src/theme/light/permission.ts            |  8 ----
 site/src/theme/permission.ts                  |  5 --
 site/src/utils/latency.ts                     |  6 +--
 site/src/utils/workspace.tsx                  | 12 ++---
 57 files changed, 214 insertions(+), 208 deletions(-)
 rename site/src/theme/{roles.ts => colorRoles.ts} (76%)
 rename site/src/theme/dark/{roles.ts => colorRoles.ts} (91%)
 delete mode 100644 site/src/theme/dark/permission.ts
 rename site/src/theme/darkBlue/{roles.ts => colorRoles.ts} (91%)
 delete mode 100644 site/src/theme/darkBlue/permission.ts
 rename site/src/theme/light/{roles.ts => colorRoles.ts} (91%)
 delete mode 100644 site/src/theme/light/permission.ts
 delete mode 100644 site/src/theme/permission.ts

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index f1695b0641cc5..9e42e47bc5f31 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -127,9 +127,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
 					{
 						label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
 						data: chartData,
-						pointBackgroundColor: theme.roles.active.outline,
-						pointBorderColor: theme.roles.active.outline,
-						borderColor: theme.roles.active.outline,
+						pointBackgroundColor: theme.colorRoles.active.outline,
+						pointBorderColor: theme.colorRoles.active.outline,
+						borderColor: theme.colorRoles.active.outline,
 					},
 				],
 			}}
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index 6e04dd3a5a482..d7f59dce35d29 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -24,19 +24,19 @@ const styles = {
 	},
 
 	enabledBadge: (theme) => ({
-		border: `1px solid ${theme.roles.success.outline}`,
-		backgroundColor: theme.roles.success.background,
-		color: theme.roles.success.text,
+		border: `1px solid ${theme.colorRoles.success.outline}`,
+		backgroundColor: theme.colorRoles.success.background,
+		color: theme.colorRoles.success.text,
 	}),
 	errorBadge: (theme) => ({
-		border: `1px solid ${theme.roles.error.outline}`,
-		backgroundColor: theme.roles.error.background,
-		color: theme.roles.error.text,
+		border: `1px solid ${theme.colorRoles.error.outline}`,
+		backgroundColor: theme.colorRoles.error.background,
+		color: theme.colorRoles.error.text,
 	}),
 	warnBadge: (theme) => ({
-		border: `1px solid ${theme.roles.warning.outline}`,
-		backgroundColor: theme.roles.warning.background,
-		color: theme.roles.warning.text,
+		border: `1px solid ${theme.colorRoles.warning.outline}`,
+		backgroundColor: theme.colorRoles.warning.background,
+		color: theme.colorRoles.warning.text,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.roles.notice.background,
-					border: `1px solid ${theme.roles.notice.outline}`,
-					color: theme.roles.notice.text,
+					backgroundColor: theme.colorRoles.notice.background,
+					border: `1px solid ${theme.colorRoles.notice.outline}`,
+					color: theme.colorRoles.notice.text,
 				}),
 			]}
 		>
@@ -129,9 +129,9 @@ export const PremiumBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.roles.notice.background,
-					border: `1px solid ${theme.roles.notice.outline}`,
-					color: theme.roles.notice.text,
+					backgroundColor: theme.colorRoles.notice.background,
+					border: `1px solid ${theme.colorRoles.notice.outline}`,
+					color: theme.colorRoles.notice.text,
 				}),
 			]}
 		>
@@ -146,9 +146,9 @@ export const PreviewBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
+					border: `1px solid ${theme.colorRoles.preview.outline}`,
+					backgroundColor: theme.colorRoles.preview.background,
+					color: theme.colorRoles.preview.text,
 				}),
 			]}
 		>
@@ -163,9 +163,9 @@ export const AlphaBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
+					border: `1px solid ${theme.colorRoles.preview.outline}`,
+					backgroundColor: theme.colorRoles.preview.background,
+					color: theme.colorRoles.preview.text,
 				}),
 			]}
 		>
@@ -180,9 +180,9 @@ export const DeprecatedBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.roles.danger.outline}`,
-					backgroundColor: theme.roles.danger.background,
-					color: theme.roles.danger.text,
+					border: `1px solid ${theme.colorRoles.danger.outline}`,
+					backgroundColor: theme.colorRoles.danger.background,
+					color: theme.colorRoles.danger.text,
 				}),
 			]}
 		>
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index e3d47ccfd0281..45283d9821ab2 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -108,10 +108,10 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
 
 const styles = {
 	callout: (theme) => ({
-		backgroundColor: theme.roles.danger.background,
-		border: `1px solid ${theme.roles.danger.outline}`,
+		backgroundColor: theme.colorRoles.danger.background,
+		border: `1px solid ${theme.colorRoles.danger.outline}`,
 		borderRadius: theme.shape.borderRadius,
-		color: theme.roles.danger.text,
+		color: theme.colorRoles.danger.text,
 		padding: "8px 16px",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index 2c2411df12b88..004b18df4ba4d 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -74,24 +74,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
 const styles = {
 	dangerButton: (theme) => ({
 		"&.MuiButton-contained": {
-			backgroundColor: theme.roles.danger.fill.solid,
-			borderColor: theme.roles.danger.fill.outline,
+			backgroundColor: theme.colorRoles.danger.fill.solid,
+			borderColor: theme.colorRoles.danger.fill.outline,
 
 			"&:not(.MuiLoadingButton-loading)": {
-				color: theme.roles.danger.fill.text,
+				color: theme.colorRoles.danger.fill.text,
 			},
 
 			"&:hover:not(:disabled)": {
-				backgroundColor: theme.roles.danger.hover.fill.solid,
-				borderColor: theme.roles.danger.hover.fill.outline,
+				backgroundColor: theme.colorRoles.danger.hover.fill.solid,
+				borderColor: theme.colorRoles.danger.hover.fill.outline,
 			},
 
 			"&.Mui-disabled": {
-				backgroundColor: theme.roles.danger.disabled.background,
-				borderColor: theme.roles.danger.disabled.outline,
+				backgroundColor: theme.colorRoles.danger.disabled.background,
+				borderColor: theme.colorRoles.danger.disabled.outline,
 
 				"&:not(.MuiLoadingButton-loading)": {
-					color: theme.roles.danger.disabled.fill.text,
+					color: theme.colorRoles.danger.disabled.fill.text,
 				},
 			},
 		},
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index be76241a95167..31d0bb75c9ca2 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -212,7 +212,7 @@ const styles = {
 		display: "flex",
 		alignItems: "center",
 		...(theme.typography.body2 as CSSObject),
-		color: theme.roles.active.fill.outline,
+		color: theme.colorRoles.active.fill.outline,
 	}),
 
 	linkIcon: {
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index dc8fb7c97b96d..1608221e7d3e6 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -8,7 +8,7 @@ import {
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 
 interface InfoTooltipProps {
 	type?: ThemeRole;
@@ -22,7 +22,7 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
 	type = "info",
 }) => {
 	const theme = useTheme();
-	const iconColor = theme.roles[type].outline;
+	const iconColor = theme.colorRoles[type].outline;
 
 	return (
 		<HelpTooltip>
diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx
index 61510319a1208..248303b4688e3 100644
--- a/site/src/components/LastSeen/LastSeen.tsx
+++ b/site/src/components/LastSeen/LastSeen.tsx
@@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
 		// Since the agent reports on a 10m interval,
 		// the last_used_at can be inaccurate when recent.
 		message = "Now";
-		color = theme.roles.success.fill.solid;
+		color = theme.colorRoles.success.fill.solid;
 	} else if (t.isAfter(now.subtract(3, "day"))) {
 		color = theme.experimental.l2.text;
 	} else if (t.isAfter(now.subtract(1, "month"))) {
-		color = theme.roles.warning.fill.solid;
+		color = theme.colorRoles.warning.fill.solid;
 	} else if (t.isAfter(now.subtract(100, "year"))) {
-		color = theme.roles.error.fill.solid;
+		color = theme.colorRoles.error.fill.solid;
 	} else {
 		message = "Never";
 	}
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
index fa12a2ce67d98..a947529ecedb9 100644
--- a/site/src/components/Logs/LogLine.tsx
+++ b/site/src/components/Logs/LogLine.tsx
@@ -43,29 +43,29 @@ const styles = {
 		padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
 
 		"&.error": {
-			backgroundColor: theme.roles.error.background,
-			color: theme.roles.error.text,
+			backgroundColor: theme.colorRoles.error.background,
+			color: theme.colorRoles.error.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.roles.error.outline,
+				backgroundColor: theme.colorRoles.error.outline,
 			},
 		},
 
 		"&.debug": {
-			backgroundColor: theme.roles.notice.background,
-			color: theme.roles.notice.text,
+			backgroundColor: theme.colorRoles.notice.background,
+			color: theme.colorRoles.notice.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.roles.notice.outline,
+				backgroundColor: theme.colorRoles.notice.outline,
 			},
 		},
 
 		"&.warn": {
-			backgroundColor: theme.roles.warning.background,
-			color: theme.roles.warning.text,
+			backgroundColor: theme.colorRoles.warning.background,
+			color: theme.colorRoles.warning.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.roles.warning.outline,
+				backgroundColor: theme.colorRoles.warning.outline,
 			},
 		},
 	}),
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
index 1e5f9ff7df18c..7bfc5b1248f4d 100644
--- a/site/src/components/PaginationWidget/PageButtons.tsx
+++ b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -74,14 +74,14 @@ const BasePageButton: FC<BasePageButtonProps> = ({
 		<Button
 			css={
 				highlighted && {
-					borderColor: theme.roles.active.outline,
-					backgroundColor: theme.roles.active.background,
+					borderColor: theme.colorRoles.active.outline,
+					backgroundColor: theme.colorRoles.active.background,
 
 					// Override the hover state with active colors, but not hover
 					// colors because clicking won't do anything.
 					"&:hover": {
-						borderColor: theme.roles.active.outline,
-						backgroundColor: theme.roles.active.background,
+						borderColor: theme.colorRoles.active.outline,
+						backgroundColor: theme.colorRoles.active.background,
 					},
 				}
 			}
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 82a5285ae5949..1dca1efa4eacc 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -81,8 +81,8 @@ const styles = {
 		maxWidth: 920,
 		margin: "auto",
 		padding: 24,
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
-		border: `1px solid ${theme.roles.active.fill.outline}`,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
+		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
 		borderRadius: 8,
 		gap: 32,
 	}),
@@ -115,7 +115,7 @@ const styles = {
 		fontWeight: 500,
 	},
 	featureIcon: (theme) => ({
-		color: theme.roles.active.fill.outline,
+		color: theme.colorRoles.active.fill.outline,
 	}),
 	feature: {
 		display: "flex",
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index f07d7eebf142d..159286d9dc501 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -85,8 +85,8 @@ const styles = {
 		alignItems: "center",
 		maxWidth: 600,
 		padding: "24px 36px",
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
-		border: `1px solid ${theme.roles.active.fill.outline}`,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
+		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
 		borderRadius: 8,
 		gap: 18,
 	}),
@@ -119,7 +119,7 @@ const styles = {
 		fontWeight: 500,
 	},
 	featureIcon: (theme) => ({
-		color: theme.roles.active.fill.outline,
+		color: theme.colorRoles.active.fill.outline,
 		fontSize: "1.5em",
 	}),
 	feature: {
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 8462b741e4869..0e85f0e0da847 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -9,7 +9,7 @@ import {
 	forwardRef,
 	useMemo,
 } from "react";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 
 export type PillProps = HTMLAttributes<HTMLDivElement> & {
 	icon?: ReactNode;
@@ -17,7 +17,7 @@ export type PillProps = HTMLAttributes<HTMLDivElement> & {
 };
 
 const themeStyles = (type: ThemeRole) => (theme: Theme) => {
-	const palette = theme.roles[type];
+	const palette = theme.colorRoles[type];
 	return {
 		backgroundColor: palette.background,
 		borderColor: palette.outline,
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index 92c7b528936a9..5830346f5676f 100644
--- 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.notice.fill.solid,
+		color: theme.colorRoles.notice.fill.solid,
 		marginLeft: "-4px",
 		padding: "4px 6px",
 		lineHeight: "inherit",
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
index b5b5f396e6797..1e4238e853181 100644
--- a/site/src/components/StatusIndicator/StatusIndicator.tsx
+++ b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import type { FC } from "react";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 
 interface StatusIndicatorProps {
 	color: ThemeRole;
@@ -15,7 +15,7 @@ export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
 				height: 8,
 				width: 8,
 				borderRadius: 4,
-				backgroundColor: theme.roles[color].fill.solid,
+				backgroundColor: theme.colorRoles[color].fill.solid,
 			}}
 		/>
 	);
diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
index bfee3f451f9f8..f295345ff6210 100644
--- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -374,7 +374,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
 		<Stack direction="row" spacing={1} alignItems="center">
 			<ErrorIcon
 				css={{ width: 16, height: 16 }}
-				htmlColor={theme.roles.error.outline}
+				htmlColor={theme.colorRoles.error.outline}
 			/>
 			{children}
 		</Stack>
diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
index 8ebcb216f51cd..cabb09dc19c48 100644
--- a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -47,10 +47,10 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
     display: flex;
     align-items: center;
     padding: 12px;
-    background-color: ${theme.roles[type].background};
+    background-color: ${theme.colorRoles[type].background};
   `;
 
-	const textColor = theme.roles[type].text;
+	const textColor = theme.colorRoles[type].text;
 
 	if (messages.length === 1) {
 		return (
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
index 81b5a14994e81..506f492addce4 100644
--- a/site/src/modules/resources/AgentMetadata.tsx
+++ b/site/src/modules/resources/AgentMetadata.tsx
@@ -238,7 +238,7 @@ const styles = {
 	},
 
 	metadataValueSuccess: (theme) => ({
-		color: theme.roles.success.fill.outline,
+		color: theme.colorRoles.success.fill.outline,
 	}),
 
 	metadataValueError: (theme) => ({
diff --git a/site/src/modules/resources/XRayScanAlert.tsx b/site/src/modules/resources/XRayScanAlert.tsx
index d37a5225f90f8..feb08ecd33346 100644
--- a/site/src/modules/resources/XRayScanAlert.tsx
+++ b/site/src/modules/resources/XRayScanAlert.tsx
@@ -98,13 +98,13 @@ const styles = {
 		},
 	},
 	critical: (theme) => ({
-		color: theme.roles.error.fill.solid,
+		color: theme.colorRoles.error.fill.solid,
 	}),
 	high: (theme) => ({
-		color: theme.roles.warning.fill.solid,
+		color: theme.colorRoles.warning.fill.solid,
 	}),
 	medium: (theme) => ({
-		color: theme.roles.notice.fill.solid,
+		color: theme.colorRoles.notice.fill.solid,
 	}),
 	link: {
 		marginLeft: "auto",
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index f003a886552e1..427d03aae66e1 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -110,8 +110,8 @@ const styles = {
 	}),
 
 	activeTag: (theme) => ({
-		borderColor: theme.roles.active.outline,
-		backgroundColor: theme.roles.active.background,
+		borderColor: theme.colorRoles.active.outline,
+		backgroundColor: theme.colorRoles.active.background,
 	}),
 
 	description: (theme) => ({
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
index cfebbd81eee11..548bd2e58c4be 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -138,8 +138,8 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
             }
 
             &.Mui-selected {
-              color: ${theme.roles.active.text};
-              background: ${theme.roles.active.background};
+              color: ${theme.colorRoles.active.text};
+              background: ${theme.colorRoles.active.background};
             }
 
             &.Mui-focused {
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index 95716e38827aa..00ced846f3192 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -76,7 +76,9 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 							const hasDiff = fileInfo(path).hasDiff;
 							return (
 								<span
-									css={hasDiff && { color: theme.roles.warning.fill.outline }}
+									css={
+										hasDiff && { color: theme.colorRoles.warning.fill.outline }
+									}
 								>
 									{filename}
 								</span>
@@ -100,7 +102,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 												css={{
 													width: 14,
 													height: 14,
-													color: theme.roles.warning.fill.outline,
+													color: theme.colorRoles.warning.fill.outline,
 												}}
 											/>
 										)}
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index 7274ab280169e..823672bebb941 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -118,7 +118,7 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
 
 const styles = {
 	icon: (theme) => ({
-		color: theme.roles.notice.outline,
+		color: theme.colorRoles.notice.outline,
 	}),
 
 	container: {
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index b6dfbd4d334e2..893f55ef66fb3 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -12,7 +12,7 @@ import { TimelineEntry } from "components/Timeline/TimelineEntry";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 import userAgentParser from "ua-parser-js";
 import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription";
 import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff";
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
index 5af38b649c695..c1effee6700a3 100644
--- a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+++ b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -162,7 +162,7 @@ const bannerStyles = {
 	},
 	icon: (theme) => ({
 		fontSize: 32,
-		color: theme.roles.warning.fill.outline,
+		color: theme.colorRoles.warning.fill.outline,
 	}),
 	title: {
 		fontWeight: 500,
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 1c158b8225e2f..135158a6ca24a 100644
--- 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.notice.fill.solid,
+		color: theme.colorRoles.notice.fill.solid,
 		padding: "4px 8px",
 		lineHeight: "inherit",
 		fontSize: "inherit",
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
index 9df726681a555..388c07977bc21 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
@@ -66,7 +66,7 @@ export const AnnouncementBannerItem: FC<AnnouncementBannerItemProps> = ({
 
 const styles = {
 	disabled: (theme) => ({
-		color: theme.roles.inactive.fill.outline,
+		color: theme.colorRoles.inactive.fill.outline,
 	}),
 
 	colorSample: {
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
index a52db293610d7..168639b883b8d 100644
--- a/site/src/pages/DeploySettingsPage/Option.tsx
+++ b/site/src/pages/DeploySettingsPage/Option.tsx
@@ -175,10 +175,10 @@ const styles = {
 	}),
 
 	sourceConfigOption: (theme) => ({
-		border: `1px solid ${theme.roles.active.fill.outline}`,
+		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
 
 		"& .OptionConfigFlag": {
-			background: theme.roles.active.fill.solid,
+			background: theme.colorRoles.active.fill.solid,
 		},
 	}),
 
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 5fb1bb8dabc54..2e8027a429011 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -215,8 +215,8 @@ const reportStyles = {
 		borderTop: `1px solid ${theme.palette.divider}`,
 	}),
 	clientErrors: (theme) => ({
-		background: theme.roles.error.background,
-		color: theme.roles.error.text,
+		background: theme.colorRoles.error.background,
+		color: theme.colorRoles.error.text,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 32d66db9bae46..3213a6be7b36b 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -289,9 +289,9 @@ const styles = {
 		color: theme.palette.text.secondary,
 	}),
 	permissionPill: (theme) => ({
-		backgroundColor: theme.permission.background,
-		borderColor: theme.permission.outline,
-		color: theme.permission.text,
+		backgroundColor: theme.colorRoles.default.background,
+		borderColor: theme.colorRoles.default.outline,
+		color: theme.colorRoles.default.text,
 		width: "fit-content",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
index 58c260a360e89..5030592496278 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -201,12 +201,12 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
 
 const styles = {
 	role: (theme) => ({
-		backgroundColor: theme.roles.notice.background,
-		borderColor: theme.roles.notice.outline,
+		backgroundColor: theme.colorRoles.notice.background,
+		borderColor: theme.colorRoles.notice.outline,
 	}),
 	globalRole: (theme) => ({
-		backgroundColor: theme.roles.inactive.background,
-		borderColor: theme.roles.inactive.outline,
+		backgroundColor: theme.colorRoles.inactive.background,
+		borderColor: theme.colorRoles.inactive.outline,
 	}),
 	autoComplete: {
 		width: 300,
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
index 44c2c891c34bf..3e253933525e8 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -153,10 +153,10 @@ export const OrganizationSettingsPageView: FC<
 const styles = {
 	dangerSettings: (theme) => ({
 		display: "flex",
-		backgroundColor: theme.roles.danger.background,
+		backgroundColor: theme.colorRoles.danger.background,
 		alignItems: "center",
 		justifyContent: "space-between",
-		border: `1px solid ${theme.roles.danger.outline}`,
+		border: `1px solid ${theme.colorRoles.danger.outline}`,
 		borderRadius: 8,
 		padding: 12,
 		paddingLeft: 18,
@@ -165,29 +165,29 @@ const styles = {
 		flexGrow: 1,
 
 		"& .option": {
-			color: theme.roles.danger.fill.solid,
+			color: theme.colorRoles.danger.fill.solid,
 			"&.Mui-checked": {
-				color: theme.roles.danger.fill.solid,
+				color: theme.colorRoles.danger.fill.solid,
 			},
 		},
 
 		"& .info": {
 			fontSize: 14,
 			fontWeight: 600,
-			color: theme.roles.danger.text,
+			color: theme.colorRoles.danger.text,
 		},
 	}),
 	dangerButton: (theme) => ({
-		borderColor: theme.roles.danger.outline,
-		color: theme.roles.danger.text,
+		borderColor: theme.colorRoles.danger.outline,
+		color: theme.colorRoles.danger.text,
 
 		"&.MuiLoadingButton-loading": {
-			color: theme.roles.danger.disabled.text,
+			color: theme.colorRoles.danger.disabled.text,
 		},
 
 		"&:hover:not(:disabled)": {
-			backgroundColor: theme.roles.danger.hover.background,
-			borderColor: theme.roles.danger.hover.fill.outline,
+			backgroundColor: theme.colorRoles.danger.hover.background,
+			borderColor: theme.colorRoles.danger.hover.fill.outline,
 		},
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
index 48764aa1e877d..82ede8001d508 100644
--- a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
+++ b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
@@ -166,12 +166,12 @@ const OverflowRolePill: FC<OverflowRolePillProps> = ({ roles }) => {
 
 const styles = {
 	globalRoleBadge: (theme) => ({
-		backgroundColor: theme.roles.active.background,
-		borderColor: theme.roles.active.outline,
+		backgroundColor: theme.colorRoles.active.background,
+		borderColor: theme.colorRoles.active.outline,
 	}),
 	ownerRoleBadge: (theme) => ({
-		backgroundColor: theme.roles.notice.background,
-		borderColor: theme.roles.notice.outline,
+		backgroundColor: theme.colorRoles.notice.background,
+		borderColor: theme.colorRoles.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
index a7e0351e8ba80..38f051ecea08e 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -423,7 +423,10 @@ 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.warning.fill.solid])
+		.scale([
+			theme.colorRoles.success.fill.solid,
+			theme.colorRoles.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/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 943370f89e2a4..e1c2ec6466186 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -472,7 +472,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 											<WarningOutlined
 												css={{
 													fontSize: 48,
-													color: theme.roles.warning.fill.outline,
+													color: theme.colorRoles.warning.fill.outline,
 												}}
 											/>
 											<p
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
index a0d4856af6407..46089331e2260 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -4,7 +4,7 @@ import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Pill, PillSpinner } from "components/Pill/Pill";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 import { getPendingStatusLabel } from "utils/provisionerJob";
 
 interface TemplateVersionStatusBadgeProps {
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index a4e520c2b7137..1ebd12793400b 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -215,7 +215,7 @@ const styles = {
 		userSelect: "none",
 	}),
 	containerActive: (theme) => ({
-		outline: `2px solid ${theme.roles.active.outline}`,
+		outline: `2px solid ${theme.colorRoles.active.outline}`,
 	}),
 	page: (theme) => ({
 		backgroundColor: theme.palette.background.default,
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
index c89ae6ad8fa59..4cbda12db5c41 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
+++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -168,7 +168,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 							css={{
 								borderRadius: 0,
 								border: 0,
-								background: theme.roles.error.background,
+								background: theme.colorRoles.error.background,
 								borderBottom: `1px solid ${theme.palette.divider}`,
 							}}
 						>
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
index 43d4230768c86..d752683d00212 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -176,25 +176,25 @@ const styles = {
 	orphanContainer: (theme) => ({
 		marginTop: 24,
 		display: "flex",
-		backgroundColor: theme.roles.danger.background,
+		backgroundColor: theme.colorRoles.danger.background,
 		justifyContent: "space-between",
-		border: `1px solid ${theme.roles.danger.outline}`,
+		border: `1px solid ${theme.colorRoles.danger.outline}`,
 		borderRadius: 8,
 		padding: 12,
 		gap: 8,
 		lineHeight: "18px",
 
 		"& .option": {
-			color: theme.roles.danger.fill.solid,
+			color: theme.colorRoles.danger.fill.solid,
 			"&.Mui-checked": {
-				color: theme.roles.danger.fill.solid,
+				color: theme.colorRoles.danger.fill.solid,
 			},
 		},
 
 		"& .info": {
 			fontSize: 14,
 			fontWeight: 600,
-			color: theme.roles.danger.text,
+			color: theme.colorRoles.danger.text,
 		},
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index dbf90dd44970e..4287d26c0d2c7 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -9,7 +9,7 @@ import {
 	usePopover,
 } from "components/Popover/Popover";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/roles";
+import type { ThemeRole } from "theme/colorRoles";
 
 export type NotificationItem = {
 	title: string;
@@ -45,7 +45,7 @@ export const Notifications: FC<NotificationsProps> = ({
 				horizontal="right"
 				css={{
 					"& .MuiPaper-root": {
-						borderColor: theme.roles[severity].outline,
+						borderColor: theme.colorRoles[severity].outline,
 						maxWidth: 400,
 					},
 				}}
@@ -69,8 +69,10 @@ const NotificationPill: FC<NotificationsProps> = ({
 		<Pill
 			icon={icon}
 			css={(theme) => ({
-				"& svg": { color: theme.roles[severity].outline },
-				borderColor: popover.open ? theme.roles[severity].outline : undefined,
+				"& svg": { color: theme.colorRoles[severity].outline },
+				borderColor: popover.open
+					? theme.colorRoles[severity].outline
+					: undefined,
 			})}
 		>
 			{items.length}
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index 196f742104d21..5fc4551f49a4f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -190,7 +190,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 			css={
 				danger &&
 				((theme) => ({
-					color: `${theme.roles.danger.fill.outline} !important`,
+					color: `${theme.colorRoles.danger.fill.outline} !important`,
 				}))
 			}
 		>
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
index bd4fef445bf8e..19943d1654dc9 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -484,7 +484,7 @@ const styles = {
 	newVersion: (theme) => ({
 		fontSize: 13,
 		fontWeight: 500,
-		color: theme.roles.active.fill.solid,
+		color: theme.colorRoles.active.fill.solid,
 	}),
 
 	message: {
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
index 685035ce4b28c..c988f547fd47b 100644
--- a/site/src/pages/WorkspacesPage/LastUsed.tsx
+++ b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -43,16 +43,16 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 		);
 
 		if (t.isAfter(now.subtract(1, "hour"))) {
-			circle = <Circle color={theme.roles.success.fill.solid} />;
+			circle = <Circle color={theme.colorRoles.success.fill.solid} />;
 			// Since the agent reports on a 10m interval,
 			// the last_used_at can be inaccurate when recent.
 			message = "Now";
 		} else if (t.isAfter(now.subtract(3, "day"))) {
 			circle = <Circle color={theme.palette.text.secondary} />;
 		} else if (t.isAfter(now.subtract(1, "month"))) {
-			circle = <Circle color={theme.roles.warning.fill.solid} />;
+			circle = <Circle color={theme.colorRoles.warning.fill.solid} />;
 		} else if (t.isAfter(now.subtract(100, "year"))) {
-			circle = <Circle color={theme.roles.error.fill.solid} />;
+			circle = <Circle color={theme.colorRoles.error.fill.solid} />;
 		} else {
 			message = "Never";
 		}
diff --git a/site/src/theme/roles.ts b/site/src/theme/colorRoles.ts
similarity index 76%
rename from site/src/theme/roles.ts
rename to site/src/theme/colorRoles.ts
index 13d54f8840d20..c7bea65776609 100644
--- a/site/src/theme/roles.ts
+++ b/site/src/theme/colorRoles.ts
@@ -1,49 +1,54 @@
-export type ThemeRole = keyof Roles;
+export type ThemeRole = keyof ColorRoles;
 
 export type InteractiveThemeRole = keyof {
-	[K in keyof Roles as Roles[K] extends InteractiveRole ? K : never]: unknown;
+	[K in keyof ColorRoles as ColorRoles[K] extends InteractiveColorRole
+		? K
+		: never]: unknown;
 };
 
-export interface Roles {
+export interface ColorRoles {
+	/** The default color role for general use */
+	default: ColorRole;
+
 	/** Something is wrong; either unexpectedly, or in a meaningful way. */
-	error: Role;
+	error: ColorRole;
 
 	/** Something isn't quite right, but without serious consequence. */
-	warning: Role;
+	warning: ColorRole;
 
 	/** A prompt for action, to correct or look into something. */
-	notice: Role;
+	notice: ColorRole;
 
 	/** Notable information; just so you know! */
-	info: Role;
+	info: ColorRole;
 
 	/** Confirmation, or affirming that things are as desired. */
-	success: InteractiveRole;
+	success: InteractiveColorRole;
 
 	/** Selected, in progress, of particular relevance right now. */
-	active: InteractiveRole;
+	active: InteractiveColorRole;
 
 	/** For things that can be made "active", but are not currently so.
 	 * Paused, stopped, off, etc.
 	 */
-	inactive: Role;
+	inactive: ColorRole;
 
 	/** Actions that have long lasting or irreversible effects.
 	 * Deletion, immutable parameters, etc.
 	 */
-	danger: InteractiveRole;
+	danger: InteractiveColorRole;
 
 	/** This isn't quite ready for prime-time, but you're welcome to look around!
 	 * Preview features, experiments, unstable, etc.
 	 */
-	preview: Role;
+	preview: ColorRole;
 }
 
 /**
  * A set of colors which work together to fill a desirable "communication role"
  * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
  */
-export interface Role {
+export interface ColorRole {
 	/** A background color that works best with the corresponding `outline` and `text` colors */
 	background: string;
 
@@ -67,10 +72,10 @@ export interface Role {
 }
 
 /** Provides additional colors which can indicate different states for interactive elements */
-export interface InteractiveRole extends Role {
+export interface InteractiveColorRole extends ColorRole {
 	/** A set of colors which can indicate a disabled state */
-	disabled: Role;
+	disabled: ColorRole;
 
 	/** A set of colors which can indicate mouse hover (or keyboard focus)  */
-	hover: Role;
+	hover: ColorRole;
 }
diff --git a/site/src/theme/dark/roles.ts b/site/src/theme/dark/colorRoles.ts
similarity index 91%
rename from site/src/theme/dark/roles.ts
rename to site/src/theme/dark/colorRoles.ts
index 32a9ea4f12992..b8bb6a88361cd 100644
--- a/site/src/theme/dark/roles.ts
+++ b/site/src/theme/dark/colorRoles.ts
@@ -1,7 +1,17 @@
-import type { Roles } from "../roles";
+import type { ColorRoles } from "../colorRoles";
 import colors from "../tailwindColors";
 
 export default {
+	default: {
+		background: colors.zinc[800],
+		outline: colors.zinc[700],
+		text: colors.zinc[200],
+		fill: {
+			solid: colors.zinc[700],
+			outline: colors.zinc[600],
+			text: colors.zinc[50],
+		},
+	},
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -152,4 +162,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies Roles;
+} satisfies ColorRoles;
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index 1e8e8ec3a68e5..aa9d5ecbf3438 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -2,14 +2,12 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import permission from "./permission";
-import roles from "./roles";
+import colorRoles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forDarkThemes,
 	experimental,
 	monaco,
-	roles,
-	permission,
+	colorRoles,
 };
diff --git a/site/src/theme/dark/permission.ts b/site/src/theme/dark/permission.ts
deleted file mode 100644
index 1c454f98757c4..0000000000000
--- a/site/src/theme/dark/permission.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Permission } from "../permission";
-import colors from "../tailwindColors";
-
-export default {
-	background: colors.zinc[800],
-	outline: colors.zinc[700],
-	text: colors.zinc[200],
-} satisfies Permission;
diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/colorRoles.ts
similarity index 91%
rename from site/src/theme/darkBlue/roles.ts
rename to site/src/theme/darkBlue/colorRoles.ts
index 744b7329249b9..f3c726e020eb2 100644
--- a/site/src/theme/darkBlue/roles.ts
+++ b/site/src/theme/darkBlue/colorRoles.ts
@@ -1,7 +1,17 @@
-import type { Roles } from "../roles";
+import type { ColorRoles } from "../colorRoles";
 import colors from "../tailwindColors";
 
 export default {
+	default: {
+		background: colors.gray[800],
+		outline: colors.gray[700],
+		text: colors.gray[200],
+		fill: {
+			solid: colors.gray[700],
+			outline: colors.gray[600],
+			text: colors.gray[50],
+		},
+	},
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -152,4 +162,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies Roles;
+} satisfies ColorRoles;
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index 1e8e8ec3a68e5..aa9d5ecbf3438 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -2,14 +2,12 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import permission from "./permission";
-import roles from "./roles";
+import colorRoles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forDarkThemes,
 	experimental,
 	monaco,
-	roles,
-	permission,
+	colorRoles,
 };
diff --git a/site/src/theme/darkBlue/permission.ts b/site/src/theme/darkBlue/permission.ts
deleted file mode 100644
index 9434a1f8b9449..0000000000000
--- a/site/src/theme/darkBlue/permission.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Permission } from "../permission";
-import colors from "../tailwindColors";
-
-export default {
-	background: colors.gray[800],
-	outline: colors.gray[700],
-	text: colors.gray[200],
-} satisfies Permission;
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 66dce1b19558e..cd4bae3e54bdc 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -1,6 +1,6 @@
-import type { InteractiveRole, Role } from "./roles";
+import type { InteractiveColorRole, ColorRole } from "./colorRoles";
 
 export interface NewTheme {
-	l1: Role; // page background, things which sit at the "root level"
-	l2: InteractiveRole; // sidebars, table headers, navigation
+	l1: ColorRole; // page background, things which sit at the "root level"
+	l2: InteractiveColorRole; // sidebars, table headers, navigation
 }
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index dd2f21883ab34..5f396df9a8e4e 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -6,8 +6,7 @@ import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
-import type { Permission } from "./permission";
-import type { Roles } from "./roles";
+import type { ColorRoles } from "./colorRoles";
 
 export interface Theme extends Omit<MuiTheme, "palette"> {
 	/** @deprecated prefer `theme.roles` when possible */
@@ -17,7 +16,7 @@ export interface Theme extends Omit<MuiTheme, "palette"> {
 	 * for the user.
 	 * Does it signify an error? a warning? that something is currently running? etc.
 	 */
-	roles: Roles;
+	colorRoles: ColorRoles;
 
 	/** Theme properties that we're testing out but haven't committed to. */
 	experimental: NewTheme;
diff --git a/site/src/theme/light/roles.ts b/site/src/theme/light/colorRoles.ts
similarity index 91%
rename from site/src/theme/light/roles.ts
rename to site/src/theme/light/colorRoles.ts
index fe3d1d9687bfa..08a536a3209d6 100644
--- a/site/src/theme/light/roles.ts
+++ b/site/src/theme/light/colorRoles.ts
@@ -1,7 +1,17 @@
-import type { Roles } from "../roles";
+import type { ColorRoles } from "../colorRoles";
 import colors from "../tailwindColors";
 
 export default {
+	default: {
+		background: colors.zinc[200],
+		outline: colors.zinc[300],
+		text: colors.zinc[700],
+		fill: {
+			solid: colors.gray[300],
+			outline: colors.gray[400],
+			text: colors.gray[800],
+		},
+	},
 	danger: {
 		background: colors.orange[50],
 		outline: colors.orange[400],
@@ -152,4 +162,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies Roles;
+} satisfies ColorRoles;
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index 2d7920270655f..37bee0c14d85d 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -2,14 +2,12 @@ import { forLightThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import permission from "./permission";
-import roles from "./roles";
+import colorRoles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forLightThemes,
 	experimental,
 	monaco,
-	roles,
-	permission,
+	colorRoles,
 };
diff --git a/site/src/theme/light/permission.ts b/site/src/theme/light/permission.ts
deleted file mode 100644
index 8796be5821054..0000000000000
--- a/site/src/theme/light/permission.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Permission } from "../permission";
-import colors from "../tailwindColors";
-
-export default {
-	background: colors.zinc[200],
-	outline: colors.zinc[300],
-	text: colors.zinc[700],
-} satisfies Permission;
diff --git a/site/src/theme/permission.ts b/site/src/theme/permission.ts
deleted file mode 100644
index 2bcfc60fd0465..0000000000000
--- a/site/src/theme/permission.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Permission {
-	background: string;
-	outline: string;
-	text: string;
-}
diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts
index f68e13cb0c0c9..7024923a41893 100644
--- a/site/src/utils/latency.ts
+++ b/site/src/utils/latency.ts
@@ -5,12 +5,12 @@ export const getLatencyColor = (theme: Theme, latency?: number) => {
 		return theme.palette.text.secondary;
 	}
 
-	let color = theme.roles.success.fill.solid;
+	let color = theme.colorRoles.success.fill.solid;
 
 	if (latency >= 150 && latency < 300) {
-		color = theme.roles.warning.fill.solid;
+		color = theme.colorRoles.warning.fill.solid;
 	} else if (latency >= 300) {
-		color = theme.roles.error.fill.solid;
+		color = theme.colorRoles.error.fill.solid;
 	}
 	return color;
 };
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index 963adf58a7270..b1e80fd3312ec 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -37,19 +37,19 @@ export const getDisplayWorkspaceBuildStatus = (
 		case "succeeded":
 			return {
 				type: "success",
-				color: theme.roles.success.text,
+				color: theme.colorRoles.success.text,
 				status: DisplayWorkspaceBuildStatusLanguage.succeeded,
 			} as const;
 		case "pending":
 			return {
 				type: "inactive",
-				color: theme.roles.active.text,
+				color: theme.colorRoles.active.text,
 				status: DisplayWorkspaceBuildStatusLanguage.pending,
 			} as const;
 		case "running":
 			return {
 				type: "active",
-				color: theme.roles.active.text,
+				color: theme.colorRoles.active.text,
 				status: DisplayWorkspaceBuildStatusLanguage.running,
 			} as const;
 		// Just handle unknown as failed
@@ -57,19 +57,19 @@ export const getDisplayWorkspaceBuildStatus = (
 		case "failed":
 			return {
 				type: "error",
-				color: theme.roles.error.text,
+				color: theme.colorRoles.error.text,
 				status: DisplayWorkspaceBuildStatusLanguage.failed,
 			} as const;
 		case "canceling":
 			return {
 				type: "warning",
-				color: theme.roles.warning.text,
+				color: theme.colorRoles.warning.text,
 				status: DisplayWorkspaceBuildStatusLanguage.canceling,
 			} as const;
 		case "canceled":
 			return {
 				type: "inactive",
-				color: theme.roles.warning.text,
+				color: theme.colorRoles.warning.text,
 				status: DisplayWorkspaceBuildStatusLanguage.canceled,
 			} as const;
 	}

From d78f9a79c48a5c5808324ac0a8f9d6d1e1946848 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 21 Aug 2024 15:38:33 +0000
Subject: [PATCH 03/11] fix: revert name from colorRoles to roles

---
 .../ActiveUserChart/ActiveUserChart.tsx       |  6 +--
 site/src/components/Badges/Badges.tsx         | 48 +++++++++----------
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     |  6 +--
 site/src/components/Dialogs/Dialog.tsx        | 16 +++----
 .../components/HelpTooltip/HelpTooltip.tsx    |  2 +-
 .../components/InfoTooltip/InfoTooltip.tsx    |  2 +-
 site/src/components/LastSeen/LastSeen.tsx     |  6 +--
 site/src/components/Logs/LogLine.tsx          | 18 +++----
 .../PaginationWidget/PageButtons.tsx          |  8 ++--
 site/src/components/Paywall/Paywall.tsx       |  6 +--
 .../src/components/Paywall/PopoverPaywall.tsx |  6 +--
 site/src/components/Pill/Pill.tsx             |  2 +-
 .../RichParameterInput/RichParameterInput.tsx |  2 +-
 .../StatusIndicator/StatusIndicator.tsx       |  2 +-
 .../DeploymentBanner/DeploymentBannerView.tsx |  2 +-
 .../LicenseBanner/LicenseBannerView.tsx       |  4 +-
 site/src/modules/resources/AgentMetadata.tsx  |  2 +-
 site/src/modules/resources/XRayScanAlert.tsx  |  6 +--
 .../TemplateExampleCard.tsx                   |  4 +-
 .../TemplateFiles/TemplateFileTree.tsx        |  4 +-
 .../templates/TemplateFiles/TemplateFiles.tsx |  6 +--
 .../WorkspaceOutdatedTooltip.tsx              |  2 +-
 .../CreateTemplatePage/BuildLogsDrawer.tsx    |  2 +-
 .../CreateWorkspacePageView.tsx               |  2 +-
 .../AnnouncementBannerItem.tsx                |  2 +-
 site/src/pages/DeploySettingsPage/Option.tsx  |  4 +-
 site/src/pages/HealthPage/DERPRegionPage.tsx  |  4 +-
 .../CustomRolesPage/CustomRolesPageView.tsx   |  6 +--
 .../OrganizationMembersPageView.tsx           |  8 ++--
 .../OrganizationSettingsPageView.tsx          | 20 ++++----
 .../UserTable/UserRoleCell.tsx                |  8 ++--
 .../TemplateInsightsPage.tsx                  |  5 +-
 .../TemplateVersionEditor.tsx                 |  2 +-
 .../AppearancePage/AppearanceForm.tsx         |  2 +-
 .../WorkspaceBuildPageView.tsx                |  2 +-
 .../WorkspaceDeleteDialog.tsx                 | 10 ++--
 .../WorkspaceNotifications/Notifications.tsx  |  8 ++--
 .../WorkspaceScheduleControls.tsx             |  2 +-
 .../BatchUpdateConfirmation.tsx               |  2 +-
 site/src/pages/WorkspacesPage/LastUsed.tsx    |  6 +--
 site/src/theme/dark/index.ts                  |  4 +-
 site/src/theme/darkBlue/index.ts              |  4 +-
 site/src/theme/index.ts                       |  2 +-
 site/src/theme/light/index.ts                 |  4 +-
 site/src/utils/latency.ts                     |  6 +--
 site/src/utils/workspace.tsx                  | 12 ++---
 46 files changed, 140 insertions(+), 147 deletions(-)

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index 9e42e47bc5f31..f1695b0641cc5 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -127,9 +127,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
 					{
 						label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
 						data: chartData,
-						pointBackgroundColor: theme.colorRoles.active.outline,
-						pointBorderColor: theme.colorRoles.active.outline,
-						borderColor: theme.colorRoles.active.outline,
+						pointBackgroundColor: theme.roles.active.outline,
+						pointBorderColor: theme.roles.active.outline,
+						borderColor: theme.roles.active.outline,
 					},
 				],
 			}}
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index d7f59dce35d29..6e04dd3a5a482 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -24,19 +24,19 @@ const styles = {
 	},
 
 	enabledBadge: (theme) => ({
-		border: `1px solid ${theme.colorRoles.success.outline}`,
-		backgroundColor: theme.colorRoles.success.background,
-		color: theme.colorRoles.success.text,
+		border: `1px solid ${theme.roles.success.outline}`,
+		backgroundColor: theme.roles.success.background,
+		color: theme.roles.success.text,
 	}),
 	errorBadge: (theme) => ({
-		border: `1px solid ${theme.colorRoles.error.outline}`,
-		backgroundColor: theme.colorRoles.error.background,
-		color: theme.colorRoles.error.text,
+		border: `1px solid ${theme.roles.error.outline}`,
+		backgroundColor: theme.roles.error.background,
+		color: theme.roles.error.text,
 	}),
 	warnBadge: (theme) => ({
-		border: `1px solid ${theme.colorRoles.warning.outline}`,
-		backgroundColor: theme.colorRoles.warning.background,
-		color: theme.colorRoles.warning.text,
+		border: `1px solid ${theme.roles.warning.outline}`,
+		backgroundColor: theme.roles.warning.background,
+		color: theme.roles.warning.text,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					backgroundColor: theme.colorRoles.notice.background,
-					border: `1px solid ${theme.colorRoles.notice.outline}`,
-					color: theme.colorRoles.notice.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.colorRoles.notice.background,
-					border: `1px solid ${theme.colorRoles.notice.outline}`,
-					color: theme.colorRoles.notice.text,
+					backgroundColor: theme.roles.notice.background,
+					border: `1px solid ${theme.roles.notice.outline}`,
+					color: theme.roles.notice.text,
 				}),
 			]}
 		>
@@ -146,9 +146,9 @@ export const PreviewBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.colorRoles.preview.outline}`,
-					backgroundColor: theme.colorRoles.preview.background,
-					color: theme.colorRoles.preview.text,
+					border: `1px solid ${theme.roles.preview.outline}`,
+					backgroundColor: theme.roles.preview.background,
+					color: theme.roles.preview.text,
 				}),
 			]}
 		>
@@ -163,9 +163,9 @@ export const AlphaBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.colorRoles.preview.outline}`,
-					backgroundColor: theme.colorRoles.preview.background,
-					color: theme.colorRoles.preview.text,
+					border: `1px solid ${theme.roles.preview.outline}`,
+					backgroundColor: theme.roles.preview.background,
+					color: theme.roles.preview.text,
 				}),
 			]}
 		>
@@ -180,9 +180,9 @@ export const DeprecatedBadge: FC = () => {
 			css={[
 				styles.badge,
 				(theme) => ({
-					border: `1px solid ${theme.colorRoles.danger.outline}`,
-					backgroundColor: theme.colorRoles.danger.background,
-					color: theme.colorRoles.danger.text,
+					border: `1px solid ${theme.roles.danger.outline}`,
+					backgroundColor: theme.roles.danger.background,
+					color: theme.roles.danger.text,
 				}),
 			]}
 		>
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index 45283d9821ab2..e3d47ccfd0281 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -108,10 +108,10 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
 
 const styles = {
 	callout: (theme) => ({
-		backgroundColor: theme.colorRoles.danger.background,
-		border: `1px solid ${theme.colorRoles.danger.outline}`,
+		backgroundColor: theme.roles.danger.background,
+		border: `1px solid ${theme.roles.danger.outline}`,
 		borderRadius: theme.shape.borderRadius,
-		color: theme.colorRoles.danger.text,
+		color: theme.roles.danger.text,
 		padding: "8px 16px",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index 004b18df4ba4d..2c2411df12b88 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -74,24 +74,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
 const styles = {
 	dangerButton: (theme) => ({
 		"&.MuiButton-contained": {
-			backgroundColor: theme.colorRoles.danger.fill.solid,
-			borderColor: theme.colorRoles.danger.fill.outline,
+			backgroundColor: theme.roles.danger.fill.solid,
+			borderColor: theme.roles.danger.fill.outline,
 
 			"&:not(.MuiLoadingButton-loading)": {
-				color: theme.colorRoles.danger.fill.text,
+				color: theme.roles.danger.fill.text,
 			},
 
 			"&:hover:not(:disabled)": {
-				backgroundColor: theme.colorRoles.danger.hover.fill.solid,
-				borderColor: theme.colorRoles.danger.hover.fill.outline,
+				backgroundColor: theme.roles.danger.hover.fill.solid,
+				borderColor: theme.roles.danger.hover.fill.outline,
 			},
 
 			"&.Mui-disabled": {
-				backgroundColor: theme.colorRoles.danger.disabled.background,
-				borderColor: theme.colorRoles.danger.disabled.outline,
+				backgroundColor: theme.roles.danger.disabled.background,
+				borderColor: theme.roles.danger.disabled.outline,
 
 				"&:not(.MuiLoadingButton-loading)": {
-					color: theme.colorRoles.danger.disabled.fill.text,
+					color: theme.roles.danger.disabled.fill.text,
 				},
 			},
 		},
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 31d0bb75c9ca2..be76241a95167 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -212,7 +212,7 @@ const styles = {
 		display: "flex",
 		alignItems: "center",
 		...(theme.typography.body2 as CSSObject),
-		color: theme.colorRoles.active.fill.outline,
+		color: theme.roles.active.fill.outline,
 	}),
 
 	linkIcon: {
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 1608221e7d3e6..918bc8c7be746 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -22,7 +22,7 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
 	type = "info",
 }) => {
 	const theme = useTheme();
-	const iconColor = theme.colorRoles[type].outline;
+	const iconColor = theme.roles[type].outline;
 
 	return (
 		<HelpTooltip>
diff --git a/site/src/components/LastSeen/LastSeen.tsx b/site/src/components/LastSeen/LastSeen.tsx
index 248303b4688e3..61510319a1208 100644
--- a/site/src/components/LastSeen/LastSeen.tsx
+++ b/site/src/components/LastSeen/LastSeen.tsx
@@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
 		// Since the agent reports on a 10m interval,
 		// the last_used_at can be inaccurate when recent.
 		message = "Now";
-		color = theme.colorRoles.success.fill.solid;
+		color = theme.roles.success.fill.solid;
 	} else if (t.isAfter(now.subtract(3, "day"))) {
 		color = theme.experimental.l2.text;
 	} else if (t.isAfter(now.subtract(1, "month"))) {
-		color = theme.colorRoles.warning.fill.solid;
+		color = theme.roles.warning.fill.solid;
 	} else if (t.isAfter(now.subtract(100, "year"))) {
-		color = theme.colorRoles.error.fill.solid;
+		color = theme.roles.error.fill.solid;
 	} else {
 		message = "Never";
 	}
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
index a947529ecedb9..fa12a2ce67d98 100644
--- a/site/src/components/Logs/LogLine.tsx
+++ b/site/src/components/Logs/LogLine.tsx
@@ -43,29 +43,29 @@ const styles = {
 		padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
 
 		"&.error": {
-			backgroundColor: theme.colorRoles.error.background,
-			color: theme.colorRoles.error.text,
+			backgroundColor: theme.roles.error.background,
+			color: theme.roles.error.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.colorRoles.error.outline,
+				backgroundColor: theme.roles.error.outline,
 			},
 		},
 
 		"&.debug": {
-			backgroundColor: theme.colorRoles.notice.background,
-			color: theme.colorRoles.notice.text,
+			backgroundColor: theme.roles.notice.background,
+			color: theme.roles.notice.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.colorRoles.notice.outline,
+				backgroundColor: theme.roles.notice.outline,
 			},
 		},
 
 		"&.warn": {
-			backgroundColor: theme.colorRoles.warning.background,
-			color: theme.colorRoles.warning.text,
+			backgroundColor: theme.roles.warning.background,
+			color: theme.roles.warning.text,
 
 			"& .dashed-line": {
-				backgroundColor: theme.colorRoles.warning.outline,
+				backgroundColor: theme.roles.warning.outline,
 			},
 		},
 	}),
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
index 7bfc5b1248f4d..1e5f9ff7df18c 100644
--- a/site/src/components/PaginationWidget/PageButtons.tsx
+++ b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -74,14 +74,14 @@ const BasePageButton: FC<BasePageButtonProps> = ({
 		<Button
 			css={
 				highlighted && {
-					borderColor: theme.colorRoles.active.outline,
-					backgroundColor: theme.colorRoles.active.background,
+					borderColor: theme.roles.active.outline,
+					backgroundColor: theme.roles.active.background,
 
 					// Override the hover state with active colors, but not hover
 					// colors because clicking won't do anything.
 					"&:hover": {
-						borderColor: theme.colorRoles.active.outline,
-						backgroundColor: theme.colorRoles.active.background,
+						borderColor: theme.roles.active.outline,
+						backgroundColor: theme.roles.active.background,
 					},
 				}
 			}
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 1dca1efa4eacc..82a5285ae5949 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -81,8 +81,8 @@ const styles = {
 		maxWidth: 920,
 		margin: "auto",
 		padding: 24,
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
-		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
+		border: `1px solid ${theme.roles.active.fill.outline}`,
 		borderRadius: 8,
 		gap: 32,
 	}),
@@ -115,7 +115,7 @@ const styles = {
 		fontWeight: 500,
 	},
 	featureIcon: (theme) => ({
-		color: theme.colorRoles.active.fill.outline,
+		color: theme.roles.active.fill.outline,
 	}),
 	feature: {
 		display: "flex",
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index 159286d9dc501..f07d7eebf142d 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -85,8 +85,8 @@ const styles = {
 		alignItems: "center",
 		maxWidth: 600,
 		padding: "24px 36px",
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
-		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
+		backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
+		border: `1px solid ${theme.roles.active.fill.outline}`,
 		borderRadius: 8,
 		gap: 18,
 	}),
@@ -119,7 +119,7 @@ const styles = {
 		fontWeight: 500,
 	},
 	featureIcon: (theme) => ({
-		color: theme.colorRoles.active.fill.outline,
+		color: theme.roles.active.fill.outline,
 		fontSize: "1.5em",
 	}),
 	feature: {
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 0e85f0e0da847..d4241c448be5d 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -17,7 +17,7 @@ export type PillProps = HTMLAttributes<HTMLDivElement> & {
 };
 
 const themeStyles = (type: ThemeRole) => (theme: Theme) => {
-	const palette = theme.colorRoles[type];
+	const palette = theme.roles[type];
 	return {
 		backgroundColor: palette.background,
 		borderColor: palette.outline,
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index 5830346f5676f..92c7b528936a9 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -109,7 +109,7 @@ const styles = {
 		},
 	},
 	suggestion: (theme) => ({
-		color: theme.colorRoles.notice.fill.solid,
+		color: theme.roles.notice.fill.solid,
 		marginLeft: "-4px",
 		padding: "4px 6px",
 		lineHeight: "inherit",
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
index 1e4238e853181..bfc2847560f10 100644
--- a/site/src/components/StatusIndicator/StatusIndicator.tsx
+++ b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -15,7 +15,7 @@ export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
 				height: 8,
 				width: 8,
 				borderRadius: 4,
-				backgroundColor: theme.colorRoles[color].fill.solid,
+				backgroundColor: theme.roles[color].fill.solid,
 			}}
 		/>
 	);
diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
index f295345ff6210..bfee3f451f9f8 100644
--- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+++ b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -374,7 +374,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
 		<Stack direction="row" spacing={1} alignItems="center">
 			<ErrorIcon
 				css={{ width: 16, height: 16 }}
-				htmlColor={theme.colorRoles.error.outline}
+				htmlColor={theme.roles.error.outline}
 			/>
 			{children}
 		</Stack>
diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
index cabb09dc19c48..8ebcb216f51cd 100644
--- a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -47,10 +47,10 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
     display: flex;
     align-items: center;
     padding: 12px;
-    background-color: ${theme.colorRoles[type].background};
+    background-color: ${theme.roles[type].background};
   `;
 
-	const textColor = theme.colorRoles[type].text;
+	const textColor = theme.roles[type].text;
 
 	if (messages.length === 1) {
 		return (
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
index 506f492addce4..81b5a14994e81 100644
--- a/site/src/modules/resources/AgentMetadata.tsx
+++ b/site/src/modules/resources/AgentMetadata.tsx
@@ -238,7 +238,7 @@ const styles = {
 	},
 
 	metadataValueSuccess: (theme) => ({
-		color: theme.colorRoles.success.fill.outline,
+		color: theme.roles.success.fill.outline,
 	}),
 
 	metadataValueError: (theme) => ({
diff --git a/site/src/modules/resources/XRayScanAlert.tsx b/site/src/modules/resources/XRayScanAlert.tsx
index feb08ecd33346..d37a5225f90f8 100644
--- a/site/src/modules/resources/XRayScanAlert.tsx
+++ b/site/src/modules/resources/XRayScanAlert.tsx
@@ -98,13 +98,13 @@ const styles = {
 		},
 	},
 	critical: (theme) => ({
-		color: theme.colorRoles.error.fill.solid,
+		color: theme.roles.error.fill.solid,
 	}),
 	high: (theme) => ({
-		color: theme.colorRoles.warning.fill.solid,
+		color: theme.roles.warning.fill.solid,
 	}),
 	medium: (theme) => ({
-		color: theme.colorRoles.notice.fill.solid,
+		color: theme.roles.notice.fill.solid,
 	}),
 	link: {
 		marginLeft: "auto",
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 427d03aae66e1..f003a886552e1 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -110,8 +110,8 @@ const styles = {
 	}),
 
 	activeTag: (theme) => ({
-		borderColor: theme.colorRoles.active.outline,
-		backgroundColor: theme.colorRoles.active.background,
+		borderColor: theme.roles.active.outline,
+		backgroundColor: theme.roles.active.background,
 	}),
 
 	description: (theme) => ({
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
index 548bd2e58c4be..cfebbd81eee11 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -138,8 +138,8 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
             }
 
             &.Mui-selected {
-              color: ${theme.colorRoles.active.text};
-              background: ${theme.colorRoles.active.background};
+              color: ${theme.roles.active.text};
+              background: ${theme.roles.active.background};
             }
 
             &.Mui-focused {
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index 00ced846f3192..95716e38827aa 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -76,9 +76,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 							const hasDiff = fileInfo(path).hasDiff;
 							return (
 								<span
-									css={
-										hasDiff && { color: theme.colorRoles.warning.fill.outline }
-									}
+									css={hasDiff && { color: theme.roles.warning.fill.outline }}
 								>
 									{filename}
 								</span>
@@ -102,7 +100,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 												css={{
 													width: 14,
 													height: 14,
-													color: theme.colorRoles.warning.fill.outline,
+													color: theme.roles.warning.fill.outline,
 												}}
 											/>
 										)}
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index 823672bebb941..7274ab280169e 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -118,7 +118,7 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
 
 const styles = {
 	icon: (theme) => ({
-		color: theme.colorRoles.notice.outline,
+		color: theme.roles.notice.outline,
 	}),
 
 	container: {
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
index c1effee6700a3..5af38b649c695 100644
--- a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+++ b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -162,7 +162,7 @@ const bannerStyles = {
 	},
 	icon: (theme) => ({
 		fontSize: 32,
-		color: theme.colorRoles.warning.fill.outline,
+		color: theme.roles.warning.fill.outline,
 	}),
 	title: {
 		fontWeight: 500,
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 135158a6ca24a..1c158b8225e2f 100644
--- 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.colorRoles.notice.fill.solid,
+		color: theme.roles.notice.fill.solid,
 		padding: "4px 8px",
 		lineHeight: "inherit",
 		fontSize: "inherit",
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
index 388c07977bc21..9df726681a555 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx
@@ -66,7 +66,7 @@ export const AnnouncementBannerItem: FC<AnnouncementBannerItemProps> = ({
 
 const styles = {
 	disabled: (theme) => ({
-		color: theme.colorRoles.inactive.fill.outline,
+		color: theme.roles.inactive.fill.outline,
 	}),
 
 	colorSample: {
diff --git a/site/src/pages/DeploySettingsPage/Option.tsx b/site/src/pages/DeploySettingsPage/Option.tsx
index 168639b883b8d..a52db293610d7 100644
--- a/site/src/pages/DeploySettingsPage/Option.tsx
+++ b/site/src/pages/DeploySettingsPage/Option.tsx
@@ -175,10 +175,10 @@ const styles = {
 	}),
 
 	sourceConfigOption: (theme) => ({
-		border: `1px solid ${theme.colorRoles.active.fill.outline}`,
+		border: `1px solid ${theme.roles.active.fill.outline}`,
 
 		"& .OptionConfigFlag": {
-			background: theme.colorRoles.active.fill.solid,
+			background: theme.roles.active.fill.solid,
 		},
 	}),
 
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 2e8027a429011..5fb1bb8dabc54 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -215,8 +215,8 @@ const reportStyles = {
 		borderTop: `1px solid ${theme.palette.divider}`,
 	}),
 	clientErrors: (theme) => ({
-		background: theme.colorRoles.error.background,
-		color: theme.colorRoles.error.text,
+		background: theme.roles.error.background,
+		color: theme.roles.error.text,
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 3213a6be7b36b..9ed2ec1a301da 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -289,9 +289,9 @@ const styles = {
 		color: theme.palette.text.secondary,
 	}),
 	permissionPill: (theme) => ({
-		backgroundColor: theme.colorRoles.default.background,
-		borderColor: theme.colorRoles.default.outline,
-		color: theme.colorRoles.default.text,
+		backgroundColor: theme.roles.default.background,
+		borderColor: theme.roles.default.outline,
+		color: theme.roles.default.text,
 		width: "fit-content",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
index 5030592496278..58c260a360e89 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -201,12 +201,12 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
 
 const styles = {
 	role: (theme) => ({
-		backgroundColor: theme.colorRoles.notice.background,
-		borderColor: theme.colorRoles.notice.outline,
+		backgroundColor: theme.roles.notice.background,
+		borderColor: theme.roles.notice.outline,
 	}),
 	globalRole: (theme) => ({
-		backgroundColor: theme.colorRoles.inactive.background,
-		borderColor: theme.colorRoles.inactive.outline,
+		backgroundColor: theme.roles.inactive.background,
+		borderColor: theme.roles.inactive.outline,
 	}),
 	autoComplete: {
 		width: 300,
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
index 3e253933525e8..44c2c891c34bf 100644
--- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -153,10 +153,10 @@ export const OrganizationSettingsPageView: FC<
 const styles = {
 	dangerSettings: (theme) => ({
 		display: "flex",
-		backgroundColor: theme.colorRoles.danger.background,
+		backgroundColor: theme.roles.danger.background,
 		alignItems: "center",
 		justifyContent: "space-between",
-		border: `1px solid ${theme.colorRoles.danger.outline}`,
+		border: `1px solid ${theme.roles.danger.outline}`,
 		borderRadius: 8,
 		padding: 12,
 		paddingLeft: 18,
@@ -165,29 +165,29 @@ const styles = {
 		flexGrow: 1,
 
 		"& .option": {
-			color: theme.colorRoles.danger.fill.solid,
+			color: theme.roles.danger.fill.solid,
 			"&.Mui-checked": {
-				color: theme.colorRoles.danger.fill.solid,
+				color: theme.roles.danger.fill.solid,
 			},
 		},
 
 		"& .info": {
 			fontSize: 14,
 			fontWeight: 600,
-			color: theme.colorRoles.danger.text,
+			color: theme.roles.danger.text,
 		},
 	}),
 	dangerButton: (theme) => ({
-		borderColor: theme.colorRoles.danger.outline,
-		color: theme.colorRoles.danger.text,
+		borderColor: theme.roles.danger.outline,
+		color: theme.roles.danger.text,
 
 		"&.MuiLoadingButton-loading": {
-			color: theme.colorRoles.danger.disabled.text,
+			color: theme.roles.danger.disabled.text,
 		},
 
 		"&:hover:not(:disabled)": {
-			backgroundColor: theme.colorRoles.danger.hover.background,
-			borderColor: theme.colorRoles.danger.hover.fill.outline,
+			backgroundColor: theme.roles.danger.hover.background,
+			borderColor: theme.roles.danger.hover.fill.outline,
 		},
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
index 82ede8001d508..48764aa1e877d 100644
--- a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
+++ b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx
@@ -166,12 +166,12 @@ const OverflowRolePill: FC<OverflowRolePillProps> = ({ roles }) => {
 
 const styles = {
 	globalRoleBadge: (theme) => ({
-		backgroundColor: theme.colorRoles.active.background,
-		borderColor: theme.colorRoles.active.outline,
+		backgroundColor: theme.roles.active.background,
+		borderColor: theme.roles.active.outline,
 	}),
 	ownerRoleBadge: (theme) => ({
-		backgroundColor: theme.colorRoles.notice.background,
-		borderColor: theme.colorRoles.notice.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
index 38f051ecea08e..a7e0351e8ba80 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -423,10 +423,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 	const totalInSeconds =
 		validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
 	const usageColors = chroma
-		.scale([
-			theme.colorRoles.success.fill.solid,
-			theme.colorRoles.warning.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/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index e1c2ec6466186..943370f89e2a4 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -472,7 +472,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 											<WarningOutlined
 												css={{
 													fontSize: 48,
-													color: theme.colorRoles.warning.fill.outline,
+													color: theme.roles.warning.fill.outline,
 												}}
 											/>
 											<p
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index 1ebd12793400b..a4e520c2b7137 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -215,7 +215,7 @@ const styles = {
 		userSelect: "none",
 	}),
 	containerActive: (theme) => ({
-		outline: `2px solid ${theme.colorRoles.active.outline}`,
+		outline: `2px solid ${theme.roles.active.outline}`,
 	}),
 	page: (theme) => ({
 		backgroundColor: theme.palette.background.default,
diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
index 4cbda12db5c41..c89ae6ad8fa59 100644
--- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
+++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx
@@ -168,7 +168,7 @@ export const WorkspaceBuildPageView: FC<WorkspaceBuildPageViewProps> = ({
 							css={{
 								borderRadius: 0,
 								border: 0,
-								background: theme.colorRoles.error.background,
+								background: theme.roles.error.background,
 								borderBottom: `1px solid ${theme.palette.divider}`,
 							}}
 						>
diff --git a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
index d752683d00212..43d4230768c86 100644
--- a/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceDeleteDialog/WorkspaceDeleteDialog.tsx
@@ -176,25 +176,25 @@ const styles = {
 	orphanContainer: (theme) => ({
 		marginTop: 24,
 		display: "flex",
-		backgroundColor: theme.colorRoles.danger.background,
+		backgroundColor: theme.roles.danger.background,
 		justifyContent: "space-between",
-		border: `1px solid ${theme.colorRoles.danger.outline}`,
+		border: `1px solid ${theme.roles.danger.outline}`,
 		borderRadius: 8,
 		padding: 12,
 		gap: 8,
 		lineHeight: "18px",
 
 		"& .option": {
-			color: theme.colorRoles.danger.fill.solid,
+			color: theme.roles.danger.fill.solid,
 			"&.Mui-checked": {
-				color: theme.colorRoles.danger.fill.solid,
+				color: theme.roles.danger.fill.solid,
 			},
 		},
 
 		"& .info": {
 			fontSize: 14,
 			fontWeight: 600,
-			color: theme.colorRoles.danger.text,
+			color: theme.roles.danger.text,
 		},
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 4287d26c0d2c7..59121839d41e3 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -45,7 +45,7 @@ export const Notifications: FC<NotificationsProps> = ({
 				horizontal="right"
 				css={{
 					"& .MuiPaper-root": {
-						borderColor: theme.colorRoles[severity].outline,
+						borderColor: theme.roles[severity].outline,
 						maxWidth: 400,
 					},
 				}}
@@ -69,10 +69,8 @@ const NotificationPill: FC<NotificationsProps> = ({
 		<Pill
 			icon={icon}
 			css={(theme) => ({
-				"& svg": { color: theme.colorRoles[severity].outline },
-				borderColor: popover.open
-					? theme.colorRoles[severity].outline
-					: undefined,
+				"& svg": { color: theme.roles[severity].outline },
+				borderColor: popover.open ? theme.roles[severity].outline : undefined,
 			})}
 		>
 			{items.length}
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index 5fc4551f49a4f..196f742104d21 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -190,7 +190,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 			css={
 				danger &&
 				((theme) => ({
-					color: `${theme.colorRoles.danger.fill.outline} !important`,
+					color: `${theme.roles.danger.fill.outline} !important`,
 				}))
 			}
 		>
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
index 19943d1654dc9..bd4fef445bf8e 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -484,7 +484,7 @@ const styles = {
 	newVersion: (theme) => ({
 		fontSize: 13,
 		fontWeight: 500,
-		color: theme.colorRoles.active.fill.solid,
+		color: theme.roles.active.fill.solid,
 	}),
 
 	message: {
diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
index c988f547fd47b..685035ce4b28c 100644
--- a/site/src/pages/WorkspacesPage/LastUsed.tsx
+++ b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -43,16 +43,16 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 		);
 
 		if (t.isAfter(now.subtract(1, "hour"))) {
-			circle = <Circle color={theme.colorRoles.success.fill.solid} />;
+			circle = <Circle color={theme.roles.success.fill.solid} />;
 			// Since the agent reports on a 10m interval,
 			// the last_used_at can be inaccurate when recent.
 			message = "Now";
 		} else if (t.isAfter(now.subtract(3, "day"))) {
 			circle = <Circle color={theme.palette.text.secondary} />;
 		} else if (t.isAfter(now.subtract(1, "month"))) {
-			circle = <Circle color={theme.colorRoles.warning.fill.solid} />;
+			circle = <Circle color={theme.roles.warning.fill.solid} />;
 		} else if (t.isAfter(now.subtract(100, "year"))) {
-			circle = <Circle color={theme.colorRoles.error.fill.solid} />;
+			circle = <Circle color={theme.roles.error.fill.solid} />;
 		} else {
 			message = "Never";
 		}
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index aa9d5ecbf3438..d7e6755b8b990 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -2,12 +2,12 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import colorRoles from "./colorRoles";
+import roles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forDarkThemes,
 	experimental,
 	monaco,
-	colorRoles,
+	roles,
 };
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index aa9d5ecbf3438..d7e6755b8b990 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -2,12 +2,12 @@ import { forDarkThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import colorRoles from "./colorRoles";
+import roles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forDarkThemes,
 	experimental,
 	monaco,
-	colorRoles,
+	roles,
 };
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 5f396df9a8e4e..0642d47231667 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -16,7 +16,7 @@ export interface Theme extends Omit<MuiTheme, "palette"> {
 	 * for the user.
 	 * Does it signify an error? a warning? that something is currently running? etc.
 	 */
-	colorRoles: ColorRoles;
+	roles: ColorRoles;
 
 	/** Theme properties that we're testing out but haven't committed to. */
 	experimental: NewTheme;
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index 37bee0c14d85d..b339e7769ae78 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -2,12 +2,12 @@ import { forLightThemes } from "../externalImages";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import colorRoles from "./colorRoles";
+import roles from "./colorRoles";
 
 export default {
 	...muiTheme,
 	externalImages: forLightThemes,
 	experimental,
 	monaco,
-	colorRoles,
+	roles,
 };
diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts
index 7024923a41893..f68e13cb0c0c9 100644
--- a/site/src/utils/latency.ts
+++ b/site/src/utils/latency.ts
@@ -5,12 +5,12 @@ export const getLatencyColor = (theme: Theme, latency?: number) => {
 		return theme.palette.text.secondary;
 	}
 
-	let color = theme.colorRoles.success.fill.solid;
+	let color = theme.roles.success.fill.solid;
 
 	if (latency >= 150 && latency < 300) {
-		color = theme.colorRoles.warning.fill.solid;
+		color = theme.roles.warning.fill.solid;
 	} else if (latency >= 300) {
-		color = theme.colorRoles.error.fill.solid;
+		color = theme.roles.error.fill.solid;
 	}
 	return color;
 };
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index b1e80fd3312ec..963adf58a7270 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -37,19 +37,19 @@ export const getDisplayWorkspaceBuildStatus = (
 		case "succeeded":
 			return {
 				type: "success",
-				color: theme.colorRoles.success.text,
+				color: theme.roles.success.text,
 				status: DisplayWorkspaceBuildStatusLanguage.succeeded,
 			} as const;
 		case "pending":
 			return {
 				type: "inactive",
-				color: theme.colorRoles.active.text,
+				color: theme.roles.active.text,
 				status: DisplayWorkspaceBuildStatusLanguage.pending,
 			} as const;
 		case "running":
 			return {
 				type: "active",
-				color: theme.colorRoles.active.text,
+				color: theme.roles.active.text,
 				status: DisplayWorkspaceBuildStatusLanguage.running,
 			} as const;
 		// Just handle unknown as failed
@@ -57,19 +57,19 @@ export const getDisplayWorkspaceBuildStatus = (
 		case "failed":
 			return {
 				type: "error",
-				color: theme.colorRoles.error.text,
+				color: theme.roles.error.text,
 				status: DisplayWorkspaceBuildStatusLanguage.failed,
 			} as const;
 		case "canceling":
 			return {
 				type: "warning",
-				color: theme.colorRoles.warning.text,
+				color: theme.roles.warning.text,
 				status: DisplayWorkspaceBuildStatusLanguage.canceling,
 			} as const;
 		case "canceled":
 			return {
 				type: "inactive",
-				color: theme.colorRoles.warning.text,
+				color: theme.roles.warning.text,
 				status: DisplayWorkspaceBuildStatusLanguage.canceled,
 			} as const;
 	}

From a7b63ba672de25a8a0a8045114509ce799526c2c Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Fri, 30 Aug 2024 23:51:34 +0000
Subject: [PATCH 04/11] fix: format

---
 site/src/theme/dark/index.ts     | 2 +-
 site/src/theme/darkBlue/index.ts | 2 +-
 site/src/theme/experimental.ts   | 2 +-
 site/src/theme/index.ts          | 2 +-
 site/src/theme/light/index.ts    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index d7e6755b8b990..2959f25db0afa 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -1,8 +1,8 @@
 import { forDarkThemes } from "../externalImages";
+import roles from "./colorRoles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import roles from "./colorRoles";
 
 export default {
 	...muiTheme,
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index d7e6755b8b990..2959f25db0afa 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -1,8 +1,8 @@
 import { forDarkThemes } from "../externalImages";
+import roles from "./colorRoles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import roles from "./colorRoles";
 
 export default {
 	...muiTheme,
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index cd4bae3e54bdc..88a4717a8035b 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -1,4 +1,4 @@
-import type { InteractiveColorRole, ColorRole } from "./colorRoles";
+import type { ColorRole, InteractiveColorRole } from "./colorRoles";
 
 export interface NewTheme {
 	l1: ColorRole; // page background, things which sit at the "root level"
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 0642d47231667..e270d144f7a77 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,12 +1,12 @@
 // 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 { ColorRoles } from "./colorRoles";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
-import type { ColorRoles } from "./colorRoles";
 
 export interface Theme extends Omit<MuiTheme, "palette"> {
 	/** @deprecated prefer `theme.roles` when possible */
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index b339e7769ae78..ae32ce84e6350 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -1,8 +1,8 @@
 import { forLightThemes } from "../externalImages";
+import roles from "./colorRoles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
-import roles from "./colorRoles";
 
 export default {
 	...muiTheme,

From 437bbd0fc326aed51fce206b96d3bbcdbd8a901b Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Sat, 31 Aug 2024 00:13:57 +0000
Subject: [PATCH 05/11] fix: custom role with no permissions

---
 .../CustomRolesPageView.stories.tsx             | 17 ++++++++++++++---
 .../CustomRolesPage/CustomRolesPageView.tsx     | 12 ++++++++----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
index 4a36523c16a17..2b0c25418bc42 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { MockRoleWithOrgPermissions } from "testHelpers/entities";
+import {
+	MockRoleWithOrgPermissions,
+	MockOrganizationAuditorRole,
+} from "testHelpers/entities";
 import { CustomRolesPageView } from "./CustomRolesPageView";
 
 const meta: Meta<typeof CustomRolesPageView> = {
@@ -26,6 +29,14 @@ export const Enabled: Story = {
 	},
 };
 
+export const RoleWithoutPermissions: Story = {
+	args: {
+		roles: [MockOrganizationAuditorRole],
+		canAssignOrgRole: true,
+		isCustomRolesEnabled: true,
+	},
+};
+
 export const EmptyDisplayName: Story = {
 	args: {
 		roles: [
@@ -40,7 +51,7 @@ export const EmptyDisplayName: Story = {
 	},
 };
 
-export const EmptyRoleWithoutPermission: Story = {
+export const EmptyTableUserWithoutPermission: Story = {
 	args: {
 		roles: [],
 		canAssignOrgRole: false,
@@ -48,7 +59,7 @@ export const EmptyRoleWithoutPermission: Story = {
 	},
 };
 
-export const EmptyRoleWithPermission: Story = {
+export const EmptyTableUserWithPermission: Story = {
 	args: {
 		roles: [],
 		canAssignOrgRole: true,
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 9ed2ec1a301da..39f4e0327825d 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -145,10 +145,14 @@ const RoleRow: FC<RoleRowProps> = ({ role, onDelete, canAssignOrgRole }) => {
 
 			<TableCell>
 				<Stack direction="row" spacing={1}>
-					<PermissionsPill
-						resource={resourceTypes[0]}
-						permissions={role.organization_permissions}
-					/>
+					{role.organization_permissions.length > 0 ? (
+						<PermissionsPill
+							resource={resourceTypes[0]}
+							permissions={role.organization_permissions}
+						/>
+					) : (
+						<p>None</p>
+					)}
 
 					{resourceTypes.length > 1 && (
 						<OverflowPermissionPill

From 9514f3000772b3ed4e21776cdaf9c1466eab5d5c Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Sat, 31 Aug 2024 19:47:03 +0000
Subject: [PATCH 06/11] feat: extract permissions pull list component and add
 tests

---
 .../CustomRolesPageView.stories.tsx           |   2 +-
 .../CustomRolesPage/CustomRolesPageView.tsx   | 126 +---------------
 .../PermissionPillsList.stories.tsx           |  52 +++++++
 .../CustomRolesPage/PermissionPillsList.tsx   | 137 ++++++++++++++++++
 site/src/testHelpers/entities.ts              |  25 ++++
 5 files changed, 219 insertions(+), 123 deletions(-)
 create mode 100644 site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
 create mode 100644 site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
index 2b0c25418bc42..26565985e1ee6 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
-	MockRoleWithOrgPermissions,
 	MockOrganizationAuditorRole,
+	MockRoleWithOrgPermissions,
 } from "testHelpers/entities";
 import { CustomRolesPageView } from "./CustomRolesPageView";
 
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 39f4e0327825d..80208aa4b4261 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -1,15 +1,14 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import type { Interpolation, Theme } from "@emotion/react";
 import AddOutlined from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
-import Stack from "@mui/material/Stack";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import type { Permission, Role } from "api/typesGenerated";
+import type { Role } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import {
@@ -20,12 +19,6 @@ import {
 	ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { Paywall } from "components/Paywall/Paywall";
-import { Pill } from "components/Pill/Pill";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "components/Popover/Popover";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -33,6 +26,7 @@ import {
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
+import { PermissionPillsList } from "./PermissionPillsList";
 
 export type CustomRolesPageViewProps = {
 	roles: Role[] | undefined;
@@ -122,10 +116,6 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 	);
 };
 
-function getUniqueResourceTypes(jsonObject: readonly Permission[]) {
-	const resourceTypes = jsonObject.map((item) => item.resource_type);
-	return [...new Set(resourceTypes)];
-}
 interface RoleRowProps {
 	role: Role;
 	onDelete: () => void;
@@ -135,32 +125,12 @@ interface RoleRowProps {
 const RoleRow: FC<RoleRowProps> = ({ role, onDelete, canAssignOrgRole }) => {
 	const navigate = useNavigate();
 
-	const resourceTypes: string[] = getUniqueResourceTypes(
-		role.organization_permissions,
-	);
-
 	return (
 		<TableRow data-testid={`role-${role.name}`}>
 			<TableCell>{role.display_name || role.name}</TableCell>
 
 			<TableCell>
-				<Stack direction="row" spacing={1}>
-					{role.organization_permissions.length > 0 ? (
-						<PermissionsPill
-							resource={resourceTypes[0]}
-							permissions={role.organization_permissions}
-						/>
-					) : (
-						<p>None</p>
-					)}
-
-					{resourceTypes.length > 1 && (
-						<OverflowPermissionPill
-							resources={resourceTypes.slice(1)}
-							permissions={role.organization_permissions.slice(1)}
-						/>
-					)}
-				</Stack>
+				<PermissionPillsList permissions={role.organization_permissions} />
 			</TableCell>
 
 			<TableCell>
@@ -206,98 +176,10 @@ const TableLoader = () => {
 	);
 };
 
-interface PermissionPillProps {
-	resource: string;
-	permissions: readonly Permission[];
-}
-
-const PermissionsPill: FC<PermissionPillProps> = ({
-	resource,
-	permissions,
-}) => {
-	const actions = permissions.filter((p) => {
-		if (resource === p.resource_type) {
-			return p.action;
-		}
-	});
-
-	return (
-		<Pill css={styles.permissionPill}>
-			<b>{resource}</b>: {actions.map((p) => p.action).join(", ")}
-		</Pill>
-	);
-};
-
-type OverflowPermissionPillProps = {
-	resources: string[];
-	permissions: readonly Permission[];
-};
-
-const OverflowPermissionPill: FC<OverflowPermissionPillProps> = ({
-	resources,
-	permissions,
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Popover mode="hover">
-			<PopoverTrigger>
-				<Pill
-					css={{
-						backgroundColor: theme.palette.background.paper,
-						borderColor: theme.palette.divider,
-					}}
-				>
-					+{resources.length} more
-				</Pill>
-			</PopoverTrigger>
-
-			<PopoverContent
-				disableRestoreFocus
-				disableScrollLock
-				css={{
-					".MuiPaper-root": {
-						display: "flex",
-						flexFlow: "column wrap",
-						columnGap: 8,
-						rowGap: 12,
-						padding: "12px 16px",
-						alignContent: "space-around",
-						minWidth: "auto",
-						backgroundColor: theme.palette.background.default,
-					},
-				}}
-				anchorOrigin={{
-					vertical: -4,
-					horizontal: "center",
-				}}
-				transformOrigin={{
-					vertical: "bottom",
-					horizontal: "center",
-				}}
-			>
-				{resources.map((resource) => (
-					<PermissionsPill
-						key={resource}
-						resource={resource}
-						permissions={permissions}
-					/>
-				))}
-			</PopoverContent>
-		</Popover>
-	);
-};
-
 const styles = {
 	secondary: (theme) => ({
 		color: theme.palette.text.secondary,
 	}),
-	permissionPill: (theme) => ({
-		backgroundColor: theme.roles.default.background,
-		borderColor: theme.roles.default.outline,
-		color: theme.roles.default.text,
-		width: "fit-content",
-	}),
 } satisfies Record<string, Interpolation<Theme>>;
 
 export default CustomRolesPageView;
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
new file mode 100644
index 0000000000000..327d678e4d802
--- /dev/null
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { MockRoleWithOrgPermissions } from "testHelpers/entities";
+import { PermissionPillsList } from "./PermissionPillsList";
+
+const meta: Meta<typeof PermissionPillsList> = {
+	title: "pages/OrganizationCustomRolesPage/PermissionPillsList",
+	component: PermissionPillsList,
+};
+
+export default meta;
+type Story = StoryObj<typeof PermissionPillsList>;
+
+export const Default: Story = {
+	args: {
+		permissions: MockRoleWithOrgPermissions.organization_permissions,
+	},
+};
+
+export const SinglePermission: Story = {
+	args: {
+		permissions: [
+			{
+				negate: false,
+				resource_type: "organization_member",
+				action: "create",
+			},
+		],
+	},
+};
+
+export const NoPermissions: Story = {
+	args: {
+		permissions: [],
+	},
+};
+
+export const HoverOverflowPill: Story = {
+	args: {
+		permissions: MockRoleWithOrgPermissions.organization_permissions,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.hover(canvas.getByTestId("overflow-permissions-pill"));
+	},
+};
+
+export const ShowAllResources: Story = {
+	args: {
+		permissions: MockRoleWithOrgPermissions.organization_permissions,
+	},
+};
diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
new file mode 100644
index 0000000000000..bc07cccf77769
--- /dev/null
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
@@ -0,0 +1,137 @@
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import Stack from "@mui/material/Stack";
+import type { Permission, Role } from "api/typesGenerated";
+import { Pill } from "components/Pill/Pill";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
+import type { FC } from "react";
+
+function getUniqueResourceTypes(jsonObject: readonly Permission[]) {
+	const resourceTypes = jsonObject.map((item) => item.resource_type);
+	return [...new Set(resourceTypes)];
+}
+
+interface PermissionPillsListProps {
+	permissions: readonly Permission[];
+}
+
+export const PermissionPillsList: FC<PermissionPillsListProps> = ({
+	permissions,
+}) => {
+	const resourceTypes: string[] = getUniqueResourceTypes(permissions);
+
+	return (
+		<Stack direction="row" spacing={1}>
+			{permissions.length > 0 ? (
+				<PermissionsPill
+					resource={resourceTypes[0]}
+					permissions={permissions}
+				/>
+			) : (
+				<p>None</p>
+			)}
+
+			{resourceTypes.length > 1 && (
+				<OverflowPermissionPill
+					resources={resourceTypes.slice(1)}
+					permissions={permissions.slice(1)}
+				/>
+			)}
+		</Stack>
+	);
+};
+
+interface PermissionPillProps {
+	resource: string;
+	permissions: readonly Permission[];
+}
+
+const PermissionsPill: FC<PermissionPillProps> = ({
+	resource,
+	permissions,
+}) => {
+	const actions = permissions.filter((p) => {
+		if (resource === p.resource_type) {
+			return p.action;
+		}
+	});
+
+	return (
+		<Pill css={styles.permissionPill}>
+			<b>{resource}</b>: {actions.map((p) => p.action).join(", ")}
+		</Pill>
+	);
+};
+
+type OverflowPermissionPillProps = {
+	resources: string[];
+	permissions: readonly Permission[];
+};
+
+const OverflowPermissionPill: FC<OverflowPermissionPillProps> = ({
+	resources,
+	permissions,
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Popover mode="hover">
+			<PopoverTrigger>
+				<Pill
+					css={{
+						backgroundColor: theme.palette.background.paper,
+						borderColor: theme.palette.divider,
+					}}
+					data-testid="overflow-permissions-pill"
+				>
+					+{resources.length} more
+				</Pill>
+			</PopoverTrigger>
+
+			<PopoverContent
+				disableRestoreFocus
+				disableScrollLock
+				css={{
+					".MuiPaper-root": {
+						display: "flex",
+						flexFlow: "column wrap",
+						columnGap: 8,
+						rowGap: 12,
+						padding: "12px 16px",
+						alignContent: "space-around",
+						minWidth: "auto",
+						backgroundColor: theme.palette.background.default,
+					},
+				}}
+				anchorOrigin={{
+					vertical: -4,
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+			>
+				{resources.map((resource) => (
+					<PermissionsPill
+						key={resource}
+						resource={resource}
+						permissions={permissions}
+					/>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+};
+
+const styles = {
+	permissionPill: (theme) => ({
+		backgroundColor: theme.roles.default.background,
+		borderColor: theme.roles.default.outline,
+		color: theme.roles.default.text,
+		width: "fit-content",
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 08c567187366b..8d09460422251 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -388,6 +388,31 @@ export const MockRoleWithOrgPermissions: TypesGen.Role = {
 			resource_type: "audit_log",
 			action: "read",
 		},
+		{
+			negate: false,
+			resource_type: "group",
+			action: "create",
+		},
+		{
+			negate: false,
+			resource_type: "group",
+			action: "delete",
+		},
+		{
+			negate: false,
+			resource_type: "group",
+			action: "read",
+		},
+		{
+			negate: false,
+			resource_type: "group",
+			action: "update",
+		},
+		{
+			negate: false,
+			resource_type: "provisioner_daemon",
+			action: "create",
+		},
 	],
 	user_permissions: [],
 };

From 94975838d1585f5b9a444ae9ad18f3f5d81008cb Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 3 Sep 2024 19:21:45 +0000
Subject: [PATCH 07/11] chore: undo color roles name change

---
 .../components/InfoTooltip/InfoTooltip.tsx    |  2 +-
 site/src/components/Pill/Pill.tsx             |  2 +-
 .../StatusIndicator/StatusIndicator.tsx       |  2 +-
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     |  2 +-
 .../TemplateVersionStatusBadge.tsx            |  2 +-
 .../WorkspaceNotifications/Notifications.tsx  |  2 +-
 site/src/theme/dark/index.ts                  |  2 +-
 .../theme/dark/{colorRoles.ts => roles.ts}    | 14 +------
 site/src/theme/darkBlue/index.ts              |  2 +-
 .../darkBlue/{colorRoles.ts => roles.ts}      | 14 +------
 site/src/theme/index.ts                       |  4 +-
 site/src/theme/light/index.ts                 |  2 +-
 .../theme/light/{colorRoles.ts => roles.ts}   | 14 +------
 site/src/theme/{colorRoles.ts => roles.ts}    | 37 ++++++++-----------
 14 files changed, 33 insertions(+), 68 deletions(-)
 rename site/src/theme/dark/{colorRoles.ts => roles.ts} (91%)
 rename site/src/theme/darkBlue/{colorRoles.ts => roles.ts} (91%)
 rename site/src/theme/light/{colorRoles.ts => roles.ts} (91%)
 rename site/src/theme/{colorRoles.ts => roles.ts} (76%)

diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 918bc8c7be746..dc8fb7c97b96d 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -8,7 +8,7 @@ import {
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 
 interface InfoTooltipProps {
 	type?: ThemeRole;
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index d4241c448be5d..8462b741e4869 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -9,7 +9,7 @@ import {
 	forwardRef,
 	useMemo,
 } from "react";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 
 export type PillProps = HTMLAttributes<HTMLDivElement> & {
 	icon?: ReactNode;
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
index bfc2847560f10..b5b5f396e6797 100644
--- a/site/src/components/StatusIndicator/StatusIndicator.tsx
+++ b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import type { FC } from "react";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 
 interface StatusIndicatorProps {
 	color: ThemeRole;
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 893f55ef66fb3..b6dfbd4d334e2 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -12,7 +12,7 @@ import { TimelineEntry } from "components/Timeline/TimelineEntry";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 import userAgentParser from "ua-parser-js";
 import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription";
 import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff";
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
index 46089331e2260..a0d4856af6407 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
@@ -4,7 +4,7 @@ import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Pill, PillSpinner } from "components/Pill/Pill";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 import { getPendingStatusLabel } from "utils/provisionerJob";
 
 interface TemplateVersionStatusBadgeProps {
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 59121839d41e3..dbf90dd44970e 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -9,7 +9,7 @@ import {
 	usePopover,
 } from "components/Popover/Popover";
 import type { FC, ReactNode } from "react";
-import type { ThemeRole } from "theme/colorRoles";
+import type { ThemeRole } from "theme/roles";
 
 export type NotificationItem = {
 	title: string;
diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index 2959f25db0afa..9d419047fbad4 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -1,5 +1,5 @@
 import { forDarkThemes } from "../externalImages";
-import roles from "./colorRoles";
+import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
diff --git a/site/src/theme/dark/colorRoles.ts b/site/src/theme/dark/roles.ts
similarity index 91%
rename from site/src/theme/dark/colorRoles.ts
rename to site/src/theme/dark/roles.ts
index b8bb6a88361cd..32a9ea4f12992 100644
--- a/site/src/theme/dark/colorRoles.ts
+++ b/site/src/theme/dark/roles.ts
@@ -1,17 +1,7 @@
-import type { ColorRoles } from "../colorRoles";
+import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
 export default {
-	default: {
-		background: colors.zinc[800],
-		outline: colors.zinc[700],
-		text: colors.zinc[200],
-		fill: {
-			solid: colors.zinc[700],
-			outline: colors.zinc[600],
-			text: colors.zinc[50],
-		},
-	},
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -162,4 +152,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies ColorRoles;
+} satisfies Roles;
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index 2959f25db0afa..9d419047fbad4 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -1,5 +1,5 @@
 import { forDarkThemes } from "../externalImages";
-import roles from "./colorRoles";
+import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
diff --git a/site/src/theme/darkBlue/colorRoles.ts b/site/src/theme/darkBlue/roles.ts
similarity index 91%
rename from site/src/theme/darkBlue/colorRoles.ts
rename to site/src/theme/darkBlue/roles.ts
index f3c726e020eb2..744b7329249b9 100644
--- a/site/src/theme/darkBlue/colorRoles.ts
+++ b/site/src/theme/darkBlue/roles.ts
@@ -1,17 +1,7 @@
-import type { ColorRoles } from "../colorRoles";
+import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
 export default {
-	default: {
-		background: colors.gray[800],
-		outline: colors.gray[700],
-		text: colors.gray[200],
-		fill: {
-			solid: colors.gray[700],
-			outline: colors.gray[600],
-			text: colors.gray[50],
-		},
-	},
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -162,4 +152,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies ColorRoles;
+} satisfies Roles;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index e270d144f7a77..c93d236cb6de0 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,7 +1,7 @@
 // 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 { ColorRoles } from "./colorRoles";
+import type { Roles } from "./roles";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
@@ -16,7 +16,7 @@ export interface Theme extends Omit<MuiTheme, "palette"> {
 	 * for the user.
 	 * Does it signify an error? a warning? that something is currently running? etc.
 	 */
-	roles: ColorRoles;
+	roles: Roles;
 
 	/** Theme properties that we're testing out but haven't committed to. */
 	experimental: NewTheme;
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index ae32ce84e6350..b27d64756440f 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -1,5 +1,5 @@
 import { forLightThemes } from "../externalImages";
-import roles from "./colorRoles";
+import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
diff --git a/site/src/theme/light/colorRoles.ts b/site/src/theme/light/roles.ts
similarity index 91%
rename from site/src/theme/light/colorRoles.ts
rename to site/src/theme/light/roles.ts
index 08a536a3209d6..fe3d1d9687bfa 100644
--- a/site/src/theme/light/colorRoles.ts
+++ b/site/src/theme/light/roles.ts
@@ -1,17 +1,7 @@
-import type { ColorRoles } from "../colorRoles";
+import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
 export default {
-	default: {
-		background: colors.zinc[200],
-		outline: colors.zinc[300],
-		text: colors.zinc[700],
-		fill: {
-			solid: colors.gray[300],
-			outline: colors.gray[400],
-			text: colors.gray[800],
-		},
-	},
 	danger: {
 		background: colors.orange[50],
 		outline: colors.orange[400],
@@ -162,4 +152,4 @@ export default {
 			text: colors.white,
 		},
 	},
-} satisfies ColorRoles;
+} satisfies Roles;
diff --git a/site/src/theme/colorRoles.ts b/site/src/theme/roles.ts
similarity index 76%
rename from site/src/theme/colorRoles.ts
rename to site/src/theme/roles.ts
index c7bea65776609..13d54f8840d20 100644
--- a/site/src/theme/colorRoles.ts
+++ b/site/src/theme/roles.ts
@@ -1,54 +1,49 @@
-export type ThemeRole = keyof ColorRoles;
+export type ThemeRole = keyof Roles;
 
 export type InteractiveThemeRole = keyof {
-	[K in keyof ColorRoles as ColorRoles[K] extends InteractiveColorRole
-		? K
-		: never]: unknown;
+	[K in keyof Roles as Roles[K] extends InteractiveRole ? K : never]: unknown;
 };
 
-export interface ColorRoles {
-	/** The default color role for general use */
-	default: ColorRole;
-
+export interface Roles {
 	/** Something is wrong; either unexpectedly, or in a meaningful way. */
-	error: ColorRole;
+	error: Role;
 
 	/** Something isn't quite right, but without serious consequence. */
-	warning: ColorRole;
+	warning: Role;
 
 	/** A prompt for action, to correct or look into something. */
-	notice: ColorRole;
+	notice: Role;
 
 	/** Notable information; just so you know! */
-	info: ColorRole;
+	info: Role;
 
 	/** Confirmation, or affirming that things are as desired. */
-	success: InteractiveColorRole;
+	success: InteractiveRole;
 
 	/** Selected, in progress, of particular relevance right now. */
-	active: InteractiveColorRole;
+	active: InteractiveRole;
 
 	/** For things that can be made "active", but are not currently so.
 	 * Paused, stopped, off, etc.
 	 */
-	inactive: ColorRole;
+	inactive: Role;
 
 	/** Actions that have long lasting or irreversible effects.
 	 * Deletion, immutable parameters, etc.
 	 */
-	danger: InteractiveColorRole;
+	danger: InteractiveRole;
 
 	/** This isn't quite ready for prime-time, but you're welcome to look around!
 	 * Preview features, experiments, unstable, etc.
 	 */
-	preview: ColorRole;
+	preview: Role;
 }
 
 /**
  * A set of colors which work together to fill a desirable "communication role"
  * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
  */
-export interface ColorRole {
+export interface Role {
 	/** A background color that works best with the corresponding `outline` and `text` colors */
 	background: string;
 
@@ -72,10 +67,10 @@ export interface ColorRole {
 }
 
 /** Provides additional colors which can indicate different states for interactive elements */
-export interface InteractiveColorRole extends ColorRole {
+export interface InteractiveRole extends Role {
 	/** A set of colors which can indicate a disabled state */
-	disabled: ColorRole;
+	disabled: Role;
 
 	/** A set of colors which can indicate mouse hover (or keyboard focus)  */
-	hover: ColorRole;
+	hover: Role;
 }

From fae3881d7ae2ed0332fc8e725ad355641a15c456 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 3 Sep 2024 19:22:23 +0000
Subject: [PATCH 08/11] feat: add experimental pill colors

---
 .../CustomRolesPage/PermissionPillsList.tsx           |  6 +++---
 site/src/theme/dark/experimental.ts                   |  6 ++++++
 site/src/theme/darkBlue/experimental.ts               |  6 ++++++
 site/src/theme/experimental.ts                        | 11 ++++++++---
 site/src/theme/light/experimental.ts                  |  6 ++++++
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
index bc07cccf77769..d02dd5dd633f0 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
@@ -129,9 +129,9 @@ const OverflowPermissionPill: FC<OverflowPermissionPillProps> = ({
 
 const styles = {
 	permissionPill: (theme) => ({
-		backgroundColor: theme.roles.default.background,
-		borderColor: theme.roles.default.outline,
-		color: theme.roles.default.text,
+		backgroundColor: theme.experimental.pill.background,
+		borderColor: theme.experimental.pill.outline,
+		color: theme.experimental.pill.text,
 		width: "fit-content",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index aedc1d17146d9..f8ecd6e7c9753 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -43,4 +43,10 @@ export default {
 			},
 		},
 	},
+
+	pill: {
+		background: colors.zinc[800],
+		outline: colors.zinc[700],
+		text: colors.zinc[200],
+	},
 } satisfies NewTheme;
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index 8cf9dafaf3fe6..6baf26632da12 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/site/src/theme/darkBlue/experimental.ts
@@ -43,4 +43,10 @@ export default {
 			},
 		},
 	},
+
+	pill: {
+		background: colors.gray[800],
+		outline: colors.gray[700],
+		text: colors.gray[200],
+	},
 } satisfies NewTheme;
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index 88a4717a8035b..edc7e95debc50 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -1,6 +1,11 @@
-import type { ColorRole, InteractiveColorRole } from "./colorRoles";
+import type { Role, InteractiveRole } from "./roles";
 
 export interface NewTheme {
-	l1: ColorRole; // page background, things which sit at the "root level"
-	l2: InteractiveColorRole; // sidebars, table headers, navigation
+	l1: Role; // page background, things which sit at the "root level"
+	l2: InteractiveRole; // sidebars, table headers, navigation
+	pill: {
+		background: string;
+		outline: string;
+		text: string;
+	};
 }
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index e9c415be9ea1b..c9729b50a630b 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -43,4 +43,10 @@ export default {
 			},
 		},
 	},
+
+	pill: {
+		background: colors.zinc[200],
+		outline: colors.zinc[300],
+		text: colors.zinc[700],
+	},
 } satisfies NewTheme;

From de5e17174e4123bc3e080bf5baa487c00d937195 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 3 Sep 2024 19:23:42 +0000
Subject: [PATCH 09/11] fix: format

---
 site/src/theme/dark/index.ts     | 2 +-
 site/src/theme/darkBlue/index.ts | 2 +-
 site/src/theme/experimental.ts   | 2 +-
 site/src/theme/index.ts          | 2 +-
 site/src/theme/light/index.ts    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
index 9d419047fbad4..d9644e7494a08 100644
--- a/site/src/theme/dark/index.ts
+++ b/site/src/theme/dark/index.ts
@@ -1,8 +1,8 @@
 import { forDarkThemes } from "../externalImages";
-import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import roles from "./roles";
 
 export default {
 	...muiTheme,
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
index 9d419047fbad4..d9644e7494a08 100644
--- a/site/src/theme/darkBlue/index.ts
+++ b/site/src/theme/darkBlue/index.ts
@@ -1,8 +1,8 @@
 import { forDarkThemes } from "../externalImages";
-import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import roles from "./roles";
 
 export default {
 	...muiTheme,
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index edc7e95debc50..eadb818ee8841 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -1,4 +1,4 @@
-import type { Role, InteractiveRole } from "./roles";
+import type { InteractiveRole, Role } from "./roles";
 
 export interface NewTheme {
 	l1: Role; // page background, things which sit at the "root level"
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index c93d236cb6de0..f161ec88cfb64 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,12 +1,12 @@
 // 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 { Roles } from "./roles";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
 import type { NewTheme } from "./experimental";
 import type { ExternalImageModeStyles } from "./externalImages";
 import light from "./light";
+import type { Roles } from "./roles";
 
 export interface Theme extends Omit<MuiTheme, "palette"> {
 	/** @deprecated prefer `theme.roles` when possible */
diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
index b27d64756440f..466ff8d6fb6b9 100644
--- a/site/src/theme/light/index.ts
+++ b/site/src/theme/light/index.ts
@@ -1,8 +1,8 @@
 import { forLightThemes } from "../externalImages";
-import roles from "./roles";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
+import roles from "./roles";
 
 export default {
 	...muiTheme,

From af142e349327ffef4acd712030c95ff69c6b03be Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 3 Sep 2024 19:30:53 +0000
Subject: [PATCH 10/11] chore: update experiment name

---
 .../CustomRolesPage/PermissionPillsList.tsx                 | 6 +++---
 site/src/theme/dark/experimental.ts                         | 2 +-
 site/src/theme/darkBlue/experimental.ts                     | 2 +-
 site/src/theme/experimental.ts                              | 2 +-
 site/src/theme/light/experimental.ts                        | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
index d02dd5dd633f0..08aea94d03dd5 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
@@ -129,9 +129,9 @@ const OverflowPermissionPill: FC<OverflowPermissionPillProps> = ({
 
 const styles = {
 	permissionPill: (theme) => ({
-		backgroundColor: theme.experimental.pill.background,
-		borderColor: theme.experimental.pill.outline,
-		color: theme.experimental.pill.text,
+		backgroundColor: theme.experimental.pillDefault.background,
+		borderColor: theme.experimental.pillDefault.outline,
+		color: theme.experimental.pillDefault.text,
 		width: "fit-content",
 	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
index f8ecd6e7c9753..25074fb0106e0 100644
--- a/site/src/theme/dark/experimental.ts
+++ b/site/src/theme/dark/experimental.ts
@@ -44,7 +44,7 @@ export default {
 		},
 	},
 
-	pill: {
+	pillDefault: {
 		background: colors.zinc[800],
 		outline: colors.zinc[700],
 		text: colors.zinc[200],
diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts
index 6baf26632da12..d7e4b816a775e 100644
--- a/site/src/theme/darkBlue/experimental.ts
+++ b/site/src/theme/darkBlue/experimental.ts
@@ -44,7 +44,7 @@ export default {
 		},
 	},
 
-	pill: {
+	pillDefault: {
 		background: colors.gray[800],
 		outline: colors.gray[700],
 		text: colors.gray[200],
diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts
index eadb818ee8841..56ce8759bec7c 100644
--- a/site/src/theme/experimental.ts
+++ b/site/src/theme/experimental.ts
@@ -3,7 +3,7 @@ import type { InteractiveRole, Role } from "./roles";
 export interface NewTheme {
 	l1: Role; // page background, things which sit at the "root level"
 	l2: InteractiveRole; // sidebars, table headers, navigation
-	pill: {
+	pillDefault: {
 		background: string;
 		outline: string;
 		text: string;
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
index c9729b50a630b..a816daab83ad5 100644
--- a/site/src/theme/light/experimental.ts
+++ b/site/src/theme/light/experimental.ts
@@ -44,7 +44,7 @@ export default {
 		},
 	},
 
-	pill: {
+	pillDefault: {
 		background: colors.zinc[200],
 		outline: colors.zinc[300],
 		text: colors.zinc[700],

From 1b10a76f0a4c2b366087af984e5ce0ca7d6b6657 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 3 Sep 2024 20:13:45 +0000
Subject: [PATCH 11/11] chore: cleanup

---
 .../CustomRolesPage/PermissionPillsList.tsx          | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
index 08aea94d03dd5..e78e8baba15a1 100644
--- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
+++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx
@@ -1,6 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Stack from "@mui/material/Stack";
-import type { Permission, Role } from "api/typesGenerated";
+import type { Permission } from "api/typesGenerated";
 import { Pill } from "components/Pill/Pill";
 import {
 	Popover,
@@ -21,7 +21,7 @@ interface PermissionPillsListProps {
 export const PermissionPillsList: FC<PermissionPillsListProps> = ({
 	permissions,
 }) => {
-	const resourceTypes: string[] = getUniqueResourceTypes(permissions);
+	const resourceTypes = getUniqueResourceTypes(permissions);
 
 	return (
 		<Stack direction="row" spacing={1}>
@@ -53,11 +53,9 @@ const PermissionsPill: FC<PermissionPillProps> = ({
 	resource,
 	permissions,
 }) => {
-	const actions = permissions.filter((p) => {
-		if (resource === p.resource_type) {
-			return p.action;
-		}
-	});
+	const actions = permissions.filter(
+		(p) => resource === p.resource_type && p.action,
+	);
 
 	return (
 		<Pill css={styles.permissionPill}>