chore: undo color roles name change

coder · jaaydenh · Sep 3, 2024 · Aug 19, 2024 · Aug 21, 2024 · Aug 21, 2024
commit 94975838d1585f5b9a444ae9ad18f3f5d81008cb
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → site/src/theme/dark/roles.ts b/site/src/theme/dark/colorRoles.ts → 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
@@ -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 → site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/colorRoles.ts → 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
@@ -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
@@ -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 → site/src/theme/light/roles.ts b/site/src/theme/light/colorRoles.ts → 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 → site/src/theme/roles.ts b/site/src/theme/colorRoles.ts → 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;
 }