refactor(site): make pill colors more soft

site/src/components/Pill/Pill.tsx

@@ -20,8 +20,9 @@ export type PillProps = HTMLAttributes<HTMLDivElement> & {
 
 const themeOverrides = {
   neutral: (theme) => ({
-    backgroundColor: theme.experimental.l1.background,
-    borderColor: theme.experimental.l1.outline,
+    borderColor: theme.experimental.l2.fill.outline,
+    color: theme.experimental.l2.fill.text,
+    backgroundColor: theme.experimental.l2.background,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 
@@ -29,7 +30,8 @@ const themeStyles = (type: ThemeRole) => (theme: Theme) => {
   const palette = theme.experimental.roles[type];
   return {
     backgroundColor: palette.background,
-    borderColor: palette.outline,
+    borderColor: palette.fill.outline,
+    color: palette.text,
   };
 };
 
@@ -59,7 +61,7 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
             display: "inline-flex",
             alignItems: "center",
             whiteSpace: "nowrap",
-            fontWeight: 400,
+            fontWeight: 500,
             borderWidth: 1,
             borderStyle: "solid",
             borderRadius: 99999,
@@ -79,7 +81,7 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
         {...divProps}
       >
         {icon}
-        {children}
+        <span>{children}</span>
       </div>
     );
   },

site/src/modules/workspaces/WorkspaceStatusBadge/DormantDeletionText.tsx

@@ -1,34 +0,0 @@
-import { type FC } from "react";
-import type { Workspace } from "api/typesGenerated";
-import { displayDormantDeletion } from "utils/dormant";
-import { useDashboard } from "modules/dashboard/useDashboard";
-
-interface DormantDeletionTextProps {
-  workspace: Workspace;
-}
-
-export const DormantDeletionText: FC<DormantDeletionTextProps> = ({
-  workspace,
-}) => {
-  const { entitlements } = useDashboard();
-  const allowAdvancedScheduling =
-    entitlements.features["advanced_template_scheduling"].enabled;
-  // This check can be removed when https://github.com/coder/coder/milestone/19
-  // is merged up
-
-  if (!displayDormantDeletion(workspace, allowAdvancedScheduling)) {
-    return null;
-  }
-
-  return (
-    <span
-      role="status"
-      css={(theme) => ({
-        color: theme.palette.warning.light,
-        fontWeight: 600,
-      })}
-    >
-      Impending deletion
-    </span>
-  );
-};

site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -9,7 +9,6 @@ import { type FC, type ReactNode } from "react";
 import type { Workspace } from "api/typesGenerated";
 import { Pill } from "components/Pill/Pill";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
-import { DormantDeletionText } from "./DormantDeletionText";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { useClassName } from "hooks/useClassName";
 import { formatDistanceToNow } from "date-fns";
@@ -111,7 +110,9 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
       <Pill
         role="status"
         className={className}
-        icon={<AutoDeleteIcon />}
+        // Manually adjust the icon size as Material-UI's default
+        // padding/spacing for icons is inconsistent.
+        icon={<AutoDeleteIcon css={{ padding: 1 }} />}
         type="error"
       >
         Deletion Pending
@@ -140,38 +141,6 @@ export const DormantStatusBadge: FC<DormantStatusBadgeProps> = ({
   );
 };
 
-export const WorkspaceStatusText: FC<WorkspaceStatusBadgeProps> = ({
-  workspace,
-  className,
-}) => {
-  const { text, type } = getDisplayWorkspaceStatus(
-    workspace.latest_build.status,
-  );
-
-  return (
-    <ChooseOne>
-      <Cond condition={Boolean(DormantDeletionText({ workspace }))}>
-        <DormantDeletionText workspace={workspace} />
-      </Cond>
-      <Cond>
-        <span
-          role="status"
-          data-testid="build-status"
-          className={className}
-          css={(theme) => ({
-            fontWeight: 600,
-            color: type
-              ? theme.experimental.roles[type].fill.solid
-              : theme.experimental.l1.text,
-          })}
-        >
-          {text}
-        </span>
-      </Cond>
-    </ChooseOne>
-  );
-};
-
 const FailureTooltip: FC<TooltipProps> = ({ children, ...tooltipProps }) => {
   const popper = useClassName(
     (css, theme) => css`

site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx

@@ -64,8 +64,8 @@ const NotificationPill = (props: NotificationsProps) => {
   return (
     <Pill
       icon={icon}
+      type={severity}
       css={(theme) => ({
-        "& svg": { color: theme.experimental.roles[severity].outline },
         borderColor: popover.isOpen
           ? theme.experimental.roles[severity].outline
           : undefined,

site/src/utils/workspace.tsx

@@ -197,7 +197,7 @@ export const getDisplayWorkspaceStatus = (
       } as const;
     case "stopped":
       return {
-        type: "notice",
+        type: "neutral",
         text: "Stopped",
         icon: <StopIcon />,
       } as const;