chore: use px values instead of theme.spacing and theme.shape.borderRadius (#10519)

site/src/components/Avatar/Avatar.tsx

@@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
 };
 
 const sizeStyles = {
-  xs: (theme) => ({
+  xs: {
-    width: theme.spacing(2),
+    width: 16,
-    height: theme.spacing(2),
+    height: 16,
-    fontSize: theme.spacing(1),
+    fontSize: 8,
     fontWeight: 700,
-  }),
+  },
-  sm: (theme) => ({
+  sm: {
-    width: theme.spacing(3),
+    width: 24,
-    height: theme.spacing(3),
+    height: 24,
-    fontSize: theme.spacing(1.5),
+    fontSize: 12,
     fontWeight: 600,
-  }),
+  },
   md: {},
-  xl: (theme) => ({
+  xl: {
-    width: theme.spacing(6),
+    width: 48,
-    height: theme.spacing(6),
+    height: 48,
-    fontSize: theme.spacing(3),
+    fontSize: 24,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 const colorStyles = {

site/src/components/AvatarData/AvatarData.tsx

@@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
       direction="row"
       alignItems="center"
       css={{
-        minHeight: theme.spacing(5), // Make it predictable for the skeleton
+        minHeight: 40, // Make it predictable for the skeleton
         width: "100%",
         lineHeight: "150%",
       }}

site/src/components/CodeExample/CodeExample.tsx

@@ -26,8 +26,8 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
         color: theme.palette.primary.contrastText,
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 14,
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: 8,
-        padding: theme.spacing(1),
+        padding: 8,
         lineHeight: "150%",
         border: `1px solid ${theme.palette.divider}`,
       }}
@@ -35,7 +35,7 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
     >
       <code
         css={{
-          padding: theme.spacing(0, 1),
+          padding: "0 8px",
           width: "100%",
           display: "flex",
           alignItems: "center",

site/src/components/CopyButton/CopyButton.tsx

@@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
         <IconButton
           className={buttonClassName}
           css={(theme) => css`
-            border-radius: ${theme.shape.borderRadius}px;
+            border-radius: 8px;
-            padding: ${theme.spacing(0.85)};
+            padding: 8px;
             min-width: 32px;
 
             &:hover {
@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
           ) : (
             <FileCopyIcon css={fileCopyIconStyles} />
           )}
-          {ctaCopy && (
+          {ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
-            <div
-              css={(theme) => ({
-                marginLeft: theme.spacing(1),
-              })}
-            >
-              {ctaCopy}
-            </div>
-          )}
         </IconButton>
       </div>
     </Tooltip>

site/src/components/Dashboard/DashboardLayout.tsx

@@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
             sx: (theme) => ({
               background: theme.palette.background.paper,
               color: theme.palette.text.primary,
-              maxWidth: theme.spacing(55),
+              maxWidth: 440,
               flexDirection: "row",
               borderColor: theme.palette.info.light,
 

site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -46,18 +46,18 @@ const styles = {
     align-items: center;
   `,
   category: (theme) => ({
-    marginRight: theme.spacing(2),
+    marginRight: 16,
     color: theme.palette.text.primary,
   }),
   values: (theme) => ({
     display: "flex",
-    gap: theme.spacing(1),
+    gap: 8,
     color: theme.palette.text.secondary,
   }),
-  value: (theme) => css`
+  value: css`
     display: flex;
     align-items: center;
-    gap: ${theme.spacing(0.5)};
+    gap: 4px;
 
     & svg {
       width: 12px;
@@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
     align-items: center;
     justify-content: center;
     background-color: ${unhealthy ? colors.red[10] : undefined};
-    padding: ${theme.spacing(0, 1.5)};
+    padding: 0 12px;
     height: ${bannerHeight}px;
     color: #fff;
 
@@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
   const statusSummaryStyle = className`
     ${theme.typography.body2 as CSSObject}
 
-    margin: ${theme.spacing(0, 0, 0.5, 1.5)};
+    margin: 0 0 4px 12px;
-    width: ${theme.spacing(50)};
+    width: 400px;
-    padding: ${theme.spacing(2)};
+    padding: 16px;
     color: ${theme.palette.text.primary};
     background-color: ${theme.palette.background.paper};
     border: 1px solid ${theme.palette.divider};
@@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
         height: bannerHeight,
         bottom: 0,
         zIndex: 1,
-        paddingRight: theme.spacing(2),
+        paddingRight: 16,
         backgroundColor: theme.palette.background.paper,
         display: "flex",
         alignItems: "center",
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 12,
-        gap: theme.spacing(4),
+        gap: 32,
         borderTop: `1px solid ${theme.palette.divider}`,
         overflowX: "auto",
         whiteSpace: "nowrap",
@@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
           )
         }
         open={process.env.STORYBOOK === "true" ? true : undefined}
-        css={{ marginRight: theme.spacing(-2) }}
+        css={{ marginRight: -16 }}
       >
         {unhealthy ? (
           <Link component={RouterLink} to="/health" css={statusBadgeStyle}>
@@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
           marginLeft: "auto",
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(2),
+          gap: 16,
         }}
       >
         <Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
@@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
 
         <Tooltip title="A countdown until stats are fetched again. Click to refresh!">
           <Button
-            css={css`
+            css={[
-              ${styles.value(theme)}
+              styles.value,
+              css`
+                margin: 0;
+                padding: 0 8px;
+                height: unset;
+                min-height: unset;
+                font-size: unset;
+                color: unset;
+                border: 0;
+                min-width: unset;
+                font-family: inherit;
 
-              margin: 0;
+                & svg {
-              padding: 0 8px;
+                  margin-right: 4px;
-              height: unset;
+                }
-              min-height: unset;
+              `,
-              font-size: unset;
+            ]}
-              color: unset;
-              border: 0;
-              min-width: unset;
-              font-family: inherit;
-
-              & svg {
-                margin-right: ${theme.spacing(0.5)};
-              }
-            `}
             onClick={() => {
               if (fetchStats) {
                 fetchStats();

site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

@@ -21,10 +21,10 @@ export const Language = {
 };
 
 const styles = {
-  leftContent: (theme) => ({
+  leftContent: {
-    marginRight: theme.spacing(1),
+    marginRight: 8,
-    marginLeft: theme.spacing(1),
+    marginLeft: 8,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface LicenseBannerViewProps {
@@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
 
     display: flex;
     align-items: center;
-    padding: ${theme.spacing(1.5)};
+    padding: 12px;
     background-color: ${type === "error"
       ? colors.red[12]
       : theme.palette.warning.main};
@@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
           </Link>
         </div>
         <Expander expanded={showDetails} setExpanded={setShowDetails}>
-          <ul css={{ padding: theme.spacing(1), margin: 0 }}>
+          <ul css={{ padding: 8, margin: 0 }}>
             {messages.map((message) => (
-              <li css={{ margin: theme.spacing(0.5) }} key={message}>
+              <li css={{ margin: 4 }} key={message}>
                 {message}
               </li>
             ))}

site/src/components/Dashboard/Navbar/NavbarView.tsx

@@ -70,17 +70,17 @@ const styles = {
       justify-content: flex-start;
     }
   `,
-  drawerHeader: (theme) => ({
+  drawerHeader: {
-    padding: theme.spacing(2),
+    padding: 16,
-    paddingTop: theme.spacing(4),
+    paddingTop: 32,
-    paddingBottom: theme.spacing(4),
+    paddingBottom: 32,
-  }),
+  },
   logo: (theme) => css`
     align-items: center;
     display: flex;
     height: ${navHeight}px;
     color: ${theme.palette.text.primary};
-    padding: ${theme.spacing(2)};
+    padding: 16px;
 
     // svg is for the Coder logo, img is for custom images
     & svg,
@@ -89,10 +89,10 @@ const styles = {
       object-fit: contain;
     }
   `,
-  drawerLogo: (theme) => ({
+  drawerLogo: {
     padding: 0,
-    maxHeight: theme.spacing(5),
+    maxHeight: 40,
-  }),
+  },
   item: {
     padding: 0,
   },
@@ -102,7 +102,7 @@ const styles = {
     display: flex;
     flex: 1;
     font-size: 16px;
-    padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
+    padding: 12px 16px;
     text-decoration: none;
     transition: background-color 0.15s ease-in-out;
 
@@ -117,7 +117,7 @@ const styles = {
 
     ${theme.breakpoints.up("md")} {
       height: ${navHeight}px;
-      padding: 0 ${theme.spacing(3)};
+      padding: 0 24px;
     }
   `,
 } satisfies Record<string, Interpolation<Theme>>;
@@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
     </nav>
   );
 };
+
 export const NavbarView: FC<NavbarViewProps> = ({
   user,
   logo_url,

site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

@@ -1,7 +1,7 @@
 import Badge from "@mui/material/Badge";
-import { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import { colors } from "theme/colors";
-import * as TypesGen from "api/typesGenerated";
+import type * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
@@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
         <>
           <PopoverTrigger>
             <button
-              css={(theme) => css`
+              css={css`
                 background: none;
                 border: 0;
                 cursor: pointer;
                 height: ${navHeight}px;
-                padding: ${theme.spacing(1.5, 0)};
+                padding: 12px 0;
 
                 &:hover {
                   background-color: transparent;

site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

@@ -28,7 +28,7 @@ const styles = {
   info: (theme) => [
     theme.typography.body2 as CSSObject,
     {
-      padding: theme.spacing(2.5),
+      padding: 20,
     },
   ],
   userName: {
@@ -45,8 +45,8 @@ const styles = {
     color: "inherit",
   },
   menuItem: (theme) => css`
-    gap: ${theme.spacing(2.5)};
+    gap: 20px;
-    padding: ${theme.spacing(1, 2.5)};
+    padding: 8px 20px;
 
     &:hover {
       background-color: ${theme.palette.action.hover};
@@ -55,8 +55,8 @@ const styles = {
   `,
   menuItemIcon: (theme) => ({
     color: theme.palette.text.secondary,
-    width: theme.spacing(2.5),
+    width: 20,
-    height: theme.spacing(2.5),
+    height: 20,
   }),
   menuItemText: {
     fontSize: 14,

site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

@@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
   return (
     <div
       css={css`
-        padding: ${theme.spacing(1.5)};
+        padding: 12px;
         background-color: ${backgroundColor ?? theme.palette.warning.main};
         display: flex;
         align-items: center;

site/src/components/DeploySettingsLayout/Badges.tsx

@@ -5,19 +5,19 @@ import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 
 const styles = {
-  badge: (theme) => ({
+  badge: {
     fontSize: 10,
     height: 24,
     fontWeight: 600,
     textTransform: "uppercase",
     letterSpacing: "0.085em",
-    padding: theme.spacing(0, 1.5),
+    padding: "0 12px",
     borderRadius: 9999,
     display: "flex",
     alignItems: "center",
     width: "fit-content",
     whiteSpace: "nowrap",
-  }),
+  },
 
   enabledBadge: (theme) => ({
     border: `1px solid ${theme.palette.success.light}`,
@@ -125,9 +125,7 @@ export const AlphaBadge: FC = () => {
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
   return (
     <Stack
-      css={(theme) => ({
+      css={{ margin: "0 0 16px" }}
-        margin: theme.spacing(0, 0, 2),
-      })}
       direction="row"
       alignItems="center"
       spacing={1}

site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

@@ -35,11 +35,7 @@ export const DeploySettingsLayout: FC = () => {
   return (
     <RequirePermission isFeatureVisible={permissions.viewDeploymentValues}>
       <Margins>
-        <Stack
+        <Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
-          css={(theme) => ({ padding: theme.spacing(6, 0) })}
-          direction="row"
-          spacing={6}
-        >
           <Sidebar />
           <main css={{ maxWidth: 800, width: "100%" }}>
             {deploymentConfigQuery.data ? (

site/src/components/DeploySettingsLayout/Fieldset.tsx

@@ -27,17 +27,17 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
   return (
     <form
       css={{
-        borderRadius: theme.spacing(1),
+        borderRadius: 8,
         border: `1px solid ${theme.palette.divider}`,
         background: theme.palette.background.paper,
-        marginTop: theme.spacing(4),
+        marginTop: 32,
       }}
       onSubmit={onSubmit}
     >
-      <header css={{ padding: theme.spacing(3) }}>
+      <header css={{ padding: 24 }}>
         <div
           css={{
-            fontSize: theme.spacing(2.5),
+            fontSize: 20,
             margin: 0,
             fontWeight: 600,
           }}
@@ -49,18 +49,13 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
             css={{
               color: theme.palette.text.secondary,
               fontSize: 14,
-              marginTop: theme.spacing(1),
+              marginTop: 8,
             }}
           >
             {subtitle}
           </div>
         )}
-        <div
+        <div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
-          css={[
-            theme.typography.body2 as CSSObject,
-            { paddingTop: theme.spacing(2) },
-          ]}
-        >
           {children}
         </div>
       </header>
@@ -69,7 +64,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
           theme.typography.body2 as CSSObject,
           {
             background: theme.palette.background.paperLight,
-            padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
+            padding: "16px 24px",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",

site/src/components/DeploySettingsLayout/Header.tsx

@@ -14,7 +14,7 @@ export const Header: FC<{
 
   return (
     <Stack alignItems="baseline" direction="row" justifyContent="space-between">
-      <div css={{ maxWidth: 420, marginBottom: theme.spacing(3) }}>
+      <div css={{ maxWidth: 420, marginBottom: 24 }}>
         <h1
           css={[
             {
@@ -24,8 +24,8 @@ export const Header: FC<{
               alignItems: "center",
               lineHeight: "initial",
               margin: 0,
-              marginBottom: theme.spacing(0.5),
+              marginBottom: 4,
-              gap: theme.spacing(1),
+              gap: 8,
             },
             secondary && {
               fontSize: 24,

site/src/components/DeploySettingsLayout/Option.tsx

@@ -30,7 +30,7 @@ export const OptionDescription: FC<PropsWithChildren> = (props) => {
         display: "block",
         color: theme.palette.text.secondary,
         fontSize: 14,
-        marginTop: theme.spacing(0.5),
+        marginTop: 4,
       }}
     >
       {children}
@@ -53,18 +53,10 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
     user-select: all;
 
     & ul {
-      padding: ${theme.spacing(2)};
+      padding: 16px;
     }
   `;
 
-  const listStyles = css`
-    margin: 0,
-    padding: 0,
-    display: "flex",
-    flex-direction: "column",
-    gap: theme.spacing(0.5),
-  `;
-
   if (typeof value === "boolean") {
     return value ? <EnabledBadge /> : <DisabledBadge />;
   }
@@ -83,7 +75,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
   if (typeof value === "object" && !Array.isArray(value)) {
     return (
-      <ul css={listStyles && { listStyle: "none" }}>
+      <ul css={{ listStyle: "none" }}>
         {Object.entries(value)
           .sort((a, b) => a[0].localeCompare(b[0]))
           .map(([option, isEnabled]) => (
@@ -109,7 +101,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
                       width: 16,
                       height: 16,
                       color: (theme) => theme.palette.success.light,
-                      margin: (theme) => theme.spacing(0, 1),
+                      margin: "0 8px",
                     }}
                   />
                 )}
@@ -123,7 +115,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
   if (Array.isArray(value)) {
     return (
-      <ul css={listStyles && { listStylePosition: "inside" }}>
+      <ul css={{ listStylePosition: "inside" }}>
         {value.map((item) => (
           <li key={item} css={optionStyles}>
             {item}
@@ -162,7 +154,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
         display: "inline-flex",
         alignItems: "center",
         borderRadius: 0.25,
-        padding: (theme) => theme.spacing(0, 1),
+        padding: "0 8px",
         border: `1px solid ${borderColor}`,
         ...sx,
       }}
@@ -183,12 +175,12 @@ export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
       sx={{
         fontSize: 10,
         fontWeight: 600,
-        margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
+        margin: "0 6px 0 -4px",
         display: "block",
         backgroundColor: (theme) =>
           source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
         lineHeight: 1,
-        padding: (theme) => theme.spacing(0.25, 0.5),
+        padding: "2px 4px",
         borderRadius: 0.25,
         ...sx,
       }}

site/src/components/DeploySettingsLayout/OptionsTable.tsx

@@ -28,15 +28,15 @@ const OptionsTable: FC<{
   return (
     <TableContainer>
       <Table
-        css={(theme) => css`
+        css={css`
           & td {
-            padding-top: ${theme.spacing(3)};
+            padding-top: 24px;
-            padding-bottom: ${theme.spacing(3)};
+            padding-bottom: 24px;
           }
 
           & td:last-child,
           & th:last-child {
-            padding-left: ${theme.spacing(4)};
+            padding-left: 32px;
           }
         `}
       >

site/src/components/DeploySettingsLayout/Sidebar.tsx

@@ -32,8 +32,8 @@ const SidebarNavItem: FC<
       left: 0;
       top: 0;
       background-color: ${theme.palette.secondary.dark};
-      border-top-left-radius: ${theme.shape.borderRadius};
+      border-top-left-radius: 8px;
-      border-bottom-left-radius: ${theme.shape.borderRadius};
+      border-bottom-left-radius: 8px;
     }
   `;
 
@@ -47,8 +47,8 @@ const SidebarNavItem: FC<
         display: block;
         font-size: 14px;
         text-decoration: none;
-        padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
+        padding: 12px 12px 12px 16px;
-        border-radius: ${theme.shape.borderRadius / 2}px;
+        border-radius: 4px;
         transition: background-color 0.15s ease-in-out;
         margin-bottom: 1;
         position: relative;
@@ -67,15 +67,7 @@ const SidebarNavItem: FC<
 };
 
 const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
-  const theme = useTheme();
+  return <Icon css={{ width: 16, height: 16 }} />;
-  return (
-    <Icon
-      css={{
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-      }}
-    />
-  );
 };
 
 export const Sidebar: React.FC = () => {

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -58,22 +58,22 @@ const styles = {
       background: theme.palette.background.paper,
       border: `1px solid ${theme.palette.divider}`,
       width: "100%",
-      maxWidth: theme.spacing(55),
+      maxWidth: 440,
     },
     "& .MuiDialogActions-spacing": {
-      padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
+      padding: "0 40px 40px",
     },
   }),
   dialogContent: (theme) => ({
     color: theme.palette.text.secondary,
-    padding: theme.spacing(5),
+    padding: 40,
   }),
   dialogTitle: (theme) => ({
     margin: 0,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
     color: theme.palette.text.primary,
     fontWeight: 400,
-    fontSize: theme.spacing(2.5),
+    fontSize: 20,
   }),
   dialogDescription: (theme) => ({
     color: theme.palette.text.secondary,
@@ -89,7 +89,7 @@ const styles = {
     },
 
     "& > p": {
-      margin: theme.spacing(1, 0),
+      margin: "8px 0",
     },
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

@@ -75,7 +75,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
             <TextField
               fullWidth
               autoFocus
-              sx={{ marginTop: theme.spacing(3) }}
+              css={{ marginTop: 24 }}
               name="confirmation"
               autoComplete="off"
               id={`${hookId}-confirm`}

site/src/components/DropdownArrow/DropdownArrow.tsx

@@ -19,7 +19,7 @@ export const DropdownArrow: FC<ArrowProps> = (props) => {
       aria-label={close ? "close-dropdown" : "open-dropdown"}
       css={(theme: Theme) => ({
         color: color ?? theme.palette.primary.contrastText,
-        marginLeft: margin ? theme.spacing(1) : 0,
+        marginLeft: margin ? 8 : 0,
         width: 16,
         height: 16,
       })}

site/src/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import type { FC, ReactNode } from "react";
-import { useTheme } from "@emotion/react";
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
@@ -25,7 +24,6 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
   props,
 ) => {
   const { message, description, cta, image, ...boxProps } = props;
-  const theme = useTheme();
 
   return (
     <Box
@@ -37,17 +35,12 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
         alignItems: "center",
         textAlign: "center",
         minHeight: 360,
-        padding: theme.spacing(10, 5),
+        padding: "80px 40px",
         position: "relative",
       }}
       {...boxProps}
     >
-      <Typography
+      <Typography variant="h5" css={{ fontSize: 24 }}>
-        variant="h5"
-        css={{
-          fontSize: theme.spacing(3),
-        }}
-      >
         {message}
       </Typography>
       {description && (
@@ -55,24 +48,16 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
           variant="body2"
           color="textSecondary"
           css={{
-            marginTop: theme.spacing(1.5),
+            marginTop: 12,
-            fontSize: theme.spacing(2),
+            fontSize: 16,
             lineHeight: "140%",
-            maxWidth: theme.spacing(60),
+            maxWidth: 480,
           }}
         >
           {description}
         </Typography>
       )}
-      {cta && (
+      {cta && <div css={{ marginTop: 32 }}>{cta}</div>}
-        <div
-          css={{
-            marginTop: theme.spacing(4),
-          }}
-        >
-          {cta}
-        </div>
-      )}
       {image}
     </Box>
   );

site/src/components/ErrorBoundary/RuntimeErrorState.tsx

@@ -4,7 +4,7 @@ import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { css } from "@emotion/css";
-import { useTheme, type Interpolation, type Theme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { CoderIcon } from "components/Icons/CoderIcon";
@@ -18,7 +18,6 @@ const fetchDynamicallyImportedModuleError =
 export type RuntimeErrorStateProps = { error: Error };
 
 export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
-  const theme = useTheme();
   const [checkingError, setCheckingError] = useState(true);
   const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
   const coderVersion = staticBuildInfo?.version;
@@ -102,10 +101,10 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
                       background-color: transparent;
                       border: 0;
                       border-radius: 999px;
-                      min-height: ${theme.spacing(4)};
+                      min-height: 32px;
-                      min-width: ${theme.spacing(4)};
+                      min-width: 32px;
-                      height: ${theme.spacing(4)};
+                      height: 32px;
-                      width: ${theme.spacing(4)};
+                      width: 32px;
 
                       & svg {
                         width: 16px;
@@ -147,38 +146,38 @@ const getStaticBuildInfo = () => {
 };
 
 const styles = {
-  root: (theme) => ({
+  root: {
-    paddingTop: theme.spacing(4),
+    paddingTop: 32,
-    paddingBottom: theme.spacing(4),
+    paddingBottom: 32,
     textAlign: "center",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100%",
-    maxWidth: theme.spacing(75),
+    maxWidth: 600,
-  }),
+  },
 
-  logo: (theme) => ({
+  logo: {
-    fontSize: theme.spacing(8),
+    fontSize: 64,
-  }),
+  },
 
-  title: (theme) => ({
+  title: {
-    fontSize: theme.spacing(4),
+    fontSize: 32,
     fontWeight: 400,
-  }),
+  },
 
   text: (theme) => ({
     fontSize: 16,
     color: theme.palette.text.secondary,
     lineHeight: "160%",
-    marginBottom: theme.spacing(4),
+    marginBottom: 32,
   }),
 
   stack: (theme) => ({
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
-    marginTop: theme.spacing(8),
+    marginTop: 64,
     display: "block",
     textAlign: "left",
   }),
@@ -188,7 +187,7 @@ const styles = {
     textTransform: "uppercase",
     fontWeight: 600,
     letterSpacing: 1,
-    padding: theme.spacing(1, 1, 1, 2),
+    padding: "8px 8px 8px 16px",
     backgroundColor: theme.palette.background.paperLight,
     borderBottom: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.secondary,
@@ -198,15 +197,15 @@ const styles = {
     alignItems: "center",
   }),
 
-  stackCode: (theme) => ({
+  stackCode: {
-    padding: theme.spacing(2),
+    padding: 16,
     margin: 0,
     wordWrap: "break-word",
     whiteSpace: "break-spaces",
-  }),
+  },
 
   version: (theme) => ({
-    marginTop: theme.spacing(4),
+    marginTop: 32,
     fontSize: 12,
     color: theme.palette.text.secondary,
   }),

site/src/components/Expander/Expander.tsx

@@ -49,9 +49,9 @@ const styles = {
     cursor: "pointer",
     color: theme.palette.text.secondary,
   }),
-  collapseLink: (theme) => ({
+  collapseLink: {
-    marginTop: theme.spacing(2),
+    marginTop: 16,
-  }),
+  },
   text: (theme) => ({
     display: "flex",
     alignItems: "center",

site/src/components/FileUpload/FileUpload.tsx

@@ -133,9 +133,9 @@ const styles = {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: ${theme.shape.borderRadius}px;
+    border-radius: 8px;
     border: 2px dashed ${theme.palette.divider};
-    padding: ${theme.spacing(6)};
+    padding: 48px;
     cursor: pointer;
 
     &:hover {
@@ -148,18 +148,18 @@ const styles = {
     opacity: 0.75,
   },
 
-  icon: (theme) => ({
+  icon: {
-    fontSize: theme.spacing(8),
+    fontSize: 64,
-  }),
+  },
 
-  title: (theme) => ({
+  title: {
-    fontSize: theme.spacing(2),
+    fontSize: 16,
-  }),
+  },
 
   description: (theme) => ({
     color: theme.palette.text.secondary,
     textAlign: "center",
-    maxWidth: theme.spacing(50),
+    maxWidth: 400,
   }),
 
   input: {
@@ -167,9 +167,9 @@ const styles = {
   },
 
   file: (theme) => ({
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(2),
+    padding: 16,
     background: theme.palette.background.paper,
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/Form/Form.tsx

@@ -34,10 +34,10 @@ export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
         css={{
           display: "flex",
           flexDirection: "column",
-          gap: theme.spacing(direction === "horizontal" ? 10 : 5),
+          gap: direction === "horizontal" ? 80 : 40,
 
           [theme.breakpoints.down("md")]: {
-            gap: theme.spacing(8),
+            gap: 64,
           },
         }}
       />
@@ -88,11 +88,11 @@ export const FormSection: FC<
         display: "flex",
         alignItems: "flex-start",
         flexDirection: direction === "horizontal" ? "row" : "column",
-        gap: theme.spacing(direction === "horizontal" ? 15 : 3),
+        gap: direction === "horizontal" ? 120 : 24,
 
         [theme.breakpoints.down("md")]: {
           flexDirection: "column",
-          gap: theme.spacing(2),
+          gap: 16,
         },
       }}
       className={classes.root}
@@ -103,7 +103,7 @@ export const FormSection: FC<
           maxWidth: direction === "horizontal" ? 312 : undefined,
           flexShrink: 0,
           position: direction === "horizontal" ? "sticky" : undefined,
-          top: theme.spacing(3),
+          top: 24,
 
           [theme.breakpoints.down("md")]: {
             width: "100%",
@@ -144,15 +144,15 @@ const styles = {
     color: theme.palette.text.primary,
     fontWeight: 400,
     margin: 0,
-    marginBottom: theme.spacing(1),
+    marginBottom: 8,
   }),
 
-  formSectionInfoTitleAlpha: (theme) => ({
+  formSectionInfoTitleAlpha: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.spacing(1.5),
+    gap: 12,
-  }),
+  },
 
   formSectionInfoDescription: (theme) => ({
     fontSize: 14,
@@ -172,7 +172,7 @@ export const FormFooter = (props: Exclude<FormFooterProps, "styles">) => (
 
 const footerStyles = {
   button: (theme) => ({
-    minWidth: theme.spacing(23),
+    minWidth: 184,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
@@ -184,11 +184,11 @@ const footerStyles = {
     alignItems: "center",
     justifyContent: "flex-start",
     flexDirection: "row-reverse",
-    gap: theme.spacing(2),
+    gap: 16,
 
     [theme.breakpoints.down("md")]: {
       flexDirection: "column",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 } satisfies FormFooterStyles;

site/src/components/FormFooter/FormFooter.tsx

@@ -57,16 +57,16 @@ export const FormFooter: FC<FormFooterProps> = ({
 };
 
 const defaultStyles = {
-  footer: (theme) => ({
+  footer: {
     display: "flex",
     flex: "0",
     // The first button is the submit so it is the first element to be focused
     // on tab so we use row-reverse to display it on the right
     flexDirection: "row-reverse",
-    gap: theme.spacing(1.5),
+    gap: 12,
     alignItems: "center",
-    marginTop: theme.spacing(3),
+    marginTop: 24,
-  }),
+  },
   button: {
     width: "100%",
   },

site/src/components/FullPageForm/FullPageForm.tsx

@@ -5,7 +5,6 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader";
-import { useTheme } from "@emotion/react";
 
 export interface FullPageFormProps {
   title: string;
@@ -17,11 +16,9 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
   detail,
   children,
 }) => {
-  const theme = useTheme();
-
   return (
     <Margins size="small">
-      <PageHeader css={{ paddingBottom: theme.spacing(3) }}>
+      <PageHeader css={{ paddingBottom: 24 }}>
         <PageHeaderTitle>{title}</PageHeaderTitle>
         {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
       </PageHeader>

site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

@@ -35,8 +35,8 @@ export const EnterpriseSnackbar: FC<
   const snackbarContentStyles = css`
     border: 1px solid ${theme.palette.divider};
     border-left: 4px solid ${variantColor(variant, theme)};
-    border-radius: ${theme.shape.borderRadius}px;
+    border-radius: 8px;
-    padding: ${theme.spacing(1, 3, 1, 2)};
+    padding: 8px 24px 8px 16px;
     box-shadow: ${theme.shadows[6]};
     align-items: inherit;
     background-color: ${theme.palette.background.paper};

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -125,11 +125,11 @@ const styles = {
     fontSize: 14,
     fontWeight: 600,
   },
-  messageSubtitle: (theme) => ({
+  messageSubtitle: {
-    marginTop: theme.spacing(1.5),
+    marginTop: 12,
-  }),
+  },
   errorIcon: (theme) => ({
     color: theme.palette.error.contrastText,
-    marginRight: theme.spacing(2),
+    marginRight: 16,
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -59,9 +59,9 @@ export const HelpPopover: FC<
         paper: className`
           ${theme.typography.body2 as CSSObject}
 
-          margin-top: ${theme.spacing(0.5)};
+          margin-top: 4px;
-          width: ${theme.spacing(38)};
+          width: 304px;
-          padding: ${theme.spacing(2.5)};
+          padding: 20px;
           color: ${theme.palette.text.secondary};
           pointer-events: auto;
         `,
@@ -239,7 +239,7 @@ const getIconSpacingFromSize = (size?: Size): number => {
 const styles = {
   title: (theme) => ({
     marginTop: 0,
-    marginBottom: theme.spacing(1),
+    marginBottom: 8,
     color: theme.palette.text.primary,
     fontSize: 14,
     lineHeight: "150%",
@@ -247,8 +247,8 @@ const styles = {
   }),
 
   text: (theme) => ({
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
     ...(theme.typography.body2 as CSSObject),
   }),
 
@@ -258,16 +258,16 @@ const styles = {
     ...(theme.typography.body2 as CSSObject),
   }),
 
-  linkIcon: (theme) => ({
+  linkIcon: {
     color: "inherit",
     width: 14,
     height: 14,
-    marginRight: theme.spacing(1),
+    marginRight: 8,
-  }),
+  },
 
-  linksGroup: (theme) => ({
+  linksGroup: {
-    marginTop: theme.spacing(2),
+    marginTop: 16,
-  }),
+  },
 
   action: (theme) => ({
     display: "flex",
@@ -280,10 +280,10 @@ const styles = {
     fontSize: 14,
   }),
 
-  actionIcon: (theme) => ({
+  actionIcon: {
     color: "inherit",
     width: 14,
     height: 14,
-    marginRight: theme.spacing(1),
+    marginRight: 8,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/IconField/IconField.tsx

@@ -62,8 +62,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
             <InputAdornment
               position="end"
               css={{
-                width: theme.spacing(3),
+                width: 24,
-                height: theme.spacing(3),
+                height: 24,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",

site/src/components/Markdown/Markdown.tsx

@@ -66,7 +66,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
           ) : (
             <code
               css={(theme) => ({
-                padding: theme.spacing(0.125, 0.5),
+                padding: "1px 4px",
                 background: theme.palette.divider,
                 borderRadius: 4,
                 color: theme.palette.text.primary,
@@ -120,14 +120,14 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   lineHeight: "24px",
 
   "& h1, & h2, & h3, & h4, & h5, & h6": {
-    marginTop: theme.spacing(4),
+    marginTop: 32,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
     lineHeight: "1.25",
   },
 
   "& p": {
     marginTop: 0,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   },
 
   "& p:only-child": {
@@ -138,12 +138,12 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
   "& ul, & ol": {
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(1),
+    gap: 8,
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   },
 
   "& li > ul, & li > ol": {
-    marginTop: theme.spacing(2),
+    marginTop: 16,
   },
 
   "& li > p": {
@@ -152,8 +152,8 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
 
   "& .prismjs": {
     background: theme.palette.background.paperLight,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
-    padding: theme.spacing(2, 3),
+    padding: "16px 24px",
     overflowX: "auto",
 
     "& code": {

site/src/components/MoreMenu/MoreMenu.tsx

@@ -93,8 +93,8 @@ export const MoreMenuItem = (
         fontSize: 14,
         color: danger ? theme.palette.error.light : undefined,
         "& .MuiSvgIcon-root": {
-          width: theme.spacing(2),
+          width: 16,
-          height: theme.spacing(2),
+          height: 16,
         },
       })}
       onClick={(e) => {

site/src/components/PageHeader/FullWidthPageHeader.tsx

@@ -11,12 +11,12 @@ export const FullWidthPageHeader: FC<
       css={[
         {
           ...(theme.typography.body2 as CSSObject),
-          padding: theme.spacing(3),
+          padding: 24,
           background: theme.palette.background.paper,
           borderBottom: `1px solid ${theme.palette.divider}`,
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(6),
+          gap: 48,
 
           zIndex: 10,
           flexWrap: "wrap",

site/src/components/PageHeader/PageHeader.tsx

@@ -17,9 +17,9 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
       css={(theme) => ({
         display: "flex",
         alignItems: "center",
-        paddingTop: theme.spacing(6),
+        paddingTop: 48,
-        paddingBottom: theme.spacing(6),
+        paddingBottom: 48,
-        gap: theme.spacing(4),
+        gap: 32,
 
         [theme.breakpoints.down("md")]: {
           flexDirection: "column",
@@ -53,14 +53,14 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
 }) => {
   return (
     <h1
-      css={(theme) => ({
+      css={{
-        fontSize: theme.spacing(3),
+        fontSize: 24,
         fontWeight: 400,
         margin: 0,
         display: "flex",
         alignItems: "center",
         lineHeight: "140%",
-      })}
+      }}
     >
       {children}
     </h1>
@@ -73,12 +73,12 @@ export const PageHeaderSubtitle: FC<
   return (
     <h2
       css={(theme) => ({
-        fontSize: theme.spacing(2),
+        fontSize: 16,
         color: theme.palette.text.secondary,
         fontWeight: 400,
         display: "block",
         margin: 0,
-        marginTop: condensed ? theme.spacing(0.5) : theme.spacing(1),
+        marginTop: condensed ? 4 : 8,
         lineHeight: "140%",
       })}
     >

site/src/components/PaginationWidget/PageButton.tsx

@@ -24,7 +24,7 @@ export const PageButton = ({
       css={[
         css`
           &:not(:last-of-type) {
-            margin-right: ${theme.spacing(0.5)};
+            margin-right: 4px;
           }
         `,
         activePage === page && {

site/src/components/PaginationWidget/PaginationWidgetBase.tsx

@@ -41,7 +41,7 @@ export const PaginationWidgetBase = ({
     >
       <Button
         css={{
-          marginRight: theme.spacing(0.5),
+          marginRight: 4,
         }}
         aria-label="Previous page"
         disabled={isFirstPage}

site/src/components/Paywall/Paywall.tsx

@@ -52,24 +52,24 @@ const styles = {
     alignItems: "center",
     textAlign: "center",
     minHeight: 300,
-    padding: theme.spacing(3),
+    padding: 24,
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
-  }),
-  header: (theme) => ({
-    marginBottom: theme.spacing(3),
   }),
+  header: {
+    marginBottom: 24,
+  },
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
   },
-  description: (theme) => ({
+  description: {
-    marginTop: theme.spacing(1),
+    marginTop: 8,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  }),
+  },
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,

site/src/components/Pill/Pill.tsx

@@ -1,5 +1,5 @@
 import { type FC, type ReactNode, useMemo, forwardRef } from "react";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 import { colors } from "theme/colors";
 
 export type PillType =
@@ -53,7 +53,6 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
       type = "neutral",
       ...attrs
     } = props;
-    const theme = useTheme();
 
     const typeStyles = useMemo(() => {
       if (type in themeOverrides) {
@@ -75,9 +74,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
             borderRadius: 99999,
             fontSize: 12,
             color: "#FFF",
-            height: theme.spacing(3),
+            height: 24,
-            paddingLeft: icon ? theme.spacing(0.75) : theme.spacing(1.5),
+            paddingLeft: icon ? 6 : 12,
-            paddingRight: theme.spacing(1.5),
+            paddingRight: 12,
             whiteSpace: "nowrap",
             fontWeight: 400,
           },
@@ -89,9 +88,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
         {icon && (
           <div
             css={css`
-              margin-right: ${theme.spacing(0.5)};
+              margin-right: 4px;
-              width: ${theme.spacing(1.75)};
+              width: 14px;
-              height: ${theme.spacing(1.75)};
+              height: 14px;
               line-height: 0;
               display: flex;
               align-items: center;
@@ -99,8 +98,8 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
 
               & > img,
               & > svg {
-                width: ${theme.spacing(1.75)};
+                width: 14px;
-                height: ${theme.spacing(1.75)};
+                height: 14px;
               }
             `}
           >

site/src/components/Popover/Popover.tsx

@@ -128,19 +128,19 @@ export const PopoverContent = (
   return (
     <MuiPopover
       disablePortal
-      css={(theme) => ({
+      css={{
         // When it is on hover mode, and the mode is moving from the trigger to
         // the popover, if there is any space, the popover will be closed. I
         // found this is a limitation on how MUI structured the component. It is
         // not a big issue for now but we can re-evaluate it in the future.
-        marginTop: hoverMode ? undefined : theme.spacing(1),
+        marginTop: hoverMode ? undefined : 8,
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {
-          minWidth: theme.spacing(40),
+          minWidth: 320,
           fontSize: 14,
           pointerEvents: hoverMode ? "auto" : undefined,
         },
-      })}
+      }}
       {...horizontalProps(horizontal)}
       {...modeProps(popover)}
       {...props}

site/src/components/Resources/AgentLatency.tsx

@@ -65,11 +65,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
           first row is the preferred relay.
         </HelpTooltipText>
         <HelpTooltipText>
-          <Stack
+          <Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
-            direction="column"
-            spacing={1}
-            css={{ marginTop: theme.spacing(2) }}
-          >
             {Object.entries(agent.latency)
               .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
               .map(([regionName, region]) => (

site/src/components/Resources/AgentMetadata.tsx

@@ -205,26 +205,26 @@ const StaticWidth = (props: BoxProps) => {
 // site/src/components/Resources/ResourceCard.tsx
 const styles = {
   root: (theme) => ({
-    padding: theme.spacing(2.5, 4),
+    padding: "20px 32px",
     borderTop: `1px solid ${theme.palette.divider}`,
     background: theme.palette.background.paper,
     overflowX: "auto",
-    scrollPadding: theme.spacing(0, 4),
+    scrollPadding: "0 32px",
   }),
 
-  metadata: (theme) => ({
+  metadata: {
     fontSize: 12,
     lineHeight: "normal",
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(0.5),
+    gap: 4,
     overflow: "visible",
 
     // Because of scrolling
     "&:last-child": {
-      paddingRight: theme.spacing(4),
+      paddingRight: 32,
     },
-  }),
+  },
 
   metadataLabel: (theme) => ({
     color: theme.palette.text.secondary,
@@ -255,9 +255,9 @@ const styles = {
     cursor: "pointer",
   }),
 
-  skeleton: (theme) => ({
+  skeleton: {
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
-  }),
+  },
 
   inlineCommand: (theme) => ({
     fontFamily: MONOSPACE_FONT_FAMILY,

site/src/components/Resources/AgentRow.tsx

@@ -563,31 +563,31 @@ const styles = {
   }),
 
   agentInfo: (theme) => ({
-    padding: theme.spacing(2, 4),
+    padding: "16px 32px",
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(6),
+    gap: 48,
     flexWrap: "wrap",
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(2),
+      gap: 16,
     },
   }),
 
   agentNameAndInfo: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(3),
+    gap: 24,
     flexWrap: "wrap",
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(1.5),
+      gap: 12,
     },
   }),
 
   agentButtons: (theme) => ({
     display: "flex",
-    gap: theme.spacing(1),
+    gap: 8,
     justifyContent: "flex-end",
     flexWrap: "wrap",
     flex: 1,
@@ -607,7 +607,7 @@ const styles = {
     maxHeight: 256,
     borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
-    paddingTop: theme.spacing(2),
+    paddingTop: 16,
 
     // We need this to be able to apply the padding top from startupLogs
     "& > div": {
@@ -618,7 +618,7 @@ const styles = {
   agentNameAndStatus: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(4),
+    gap: 32,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
@@ -631,7 +631,7 @@ const styles = {
     textOverflow: "ellipsis",
     maxWidth: 260,
     fontWeight: 600,
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     flexShrink: 0,
     width: "fit-content",
 
@@ -640,11 +640,11 @@ const styles = {
     },
   }),
 
-  agentDataGroup: (theme) => ({
+  agentDataGroup: {
     display: "flex",
     alignItems: "baseline",
-    gap: theme.spacing(6),
+    gap: 48,
-  }),
+  },
 
   agentData: (theme) => ({
     display: "flex",
@@ -670,12 +670,12 @@ const styles = {
     background: "transparent",
     border: 0,
     fontFamily: "inherit",
-    padding: theme.spacing(1.5, 4),
+    padding: "12px 32px",
     color: theme.palette.text.secondary,
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1),
+    gap: 8,
     whiteSpace: "nowrap",
 
     "&:hover": {
@@ -699,7 +699,7 @@ const styles = {
   agentErrorMessage: (theme) => ({
     fontSize: 12,
     fontWeight: 400,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
     color: theme.palette.warning.light,
   }),
 

site/src/components/Resources/AgentRowPreview.tsx

@@ -102,7 +102,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
 
 const styles = {
   agentRow: (theme) => ({
-    padding: theme.spacing(2, 4),
+    padding: "16px 32px",
     backgroundColor: theme.palette.background.paperLight,
     fontSize: 16,
     position: "relative",
@@ -122,12 +122,12 @@ const styles = {
     },
   }),
 
-  agentStatusWrapper: (theme) => ({
+  agentStatusWrapper: {
-    width: theme.spacing(4.5),
+    width: 36,
     display: "flex",
     justifyContent: "center",
     flexShrink: 0,
-  }),
+  },
 
   agentStatusPreview: (theme) => ({
     width: 10,
@@ -153,7 +153,7 @@ const styles = {
     color: theme.palette.text.secondary,
 
     [theme.breakpoints.down("md")]: {
-      gap: theme.spacing(2),
+      gap: 16,
       flexWrap: "wrap",
     },
   }),
@@ -170,7 +170,7 @@ const styles = {
     [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
       width: "fit-content",
     },
   }),

site/src/components/Resources/AgentStatus.tsx

@@ -353,12 +353,12 @@ export const AgentStatus: React.FC<{
 };
 
 const styles = {
-  status: (theme) => ({
+  status: {
-    width: theme.spacing(1),
+    width: 8,
-    height: theme.spacing(1),
+    height: 8,
     borderRadius: "100%",
     flexShrink: 0,
-  }),
+  },
 
   connected: (theme) => ({
     backgroundColor: theme.palette.success.light,
@@ -388,15 +388,15 @@ const styles = {
 
   timeoutWarning: (theme) => ({
     color: theme.palette.warning.light,
-    width: theme.spacing(2),
+    width: 16,
-    height: theme.spacing(2),
+    height: 16,
     position: "relative",
   }),
 
   errorWarning: (theme) => ({
     color: theme.palette.error.main,
-    width: theme.spacing(2),
+    width: 16,
-    height: theme.spacing(2),
+    height: 16,
     position: "relative",
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/Resources/AppLink/AppLink.tsx

@@ -94,7 +94,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
       <span
         css={
           !isPrivateApp && {
-            marginRight: theme.spacing(1),
+            marginRight: 8,
           }
         }
       >

site/src/components/Resources/AppLink/AppPreviewLink.tsx

@@ -12,7 +12,7 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
   return (
     <Stack
       css={(theme) => ({
-        padding: theme.spacing(0.25, 1.5),
+        padding: "2px 12px",
         borderRadius: 9999,
         border: `1px solid ${theme.palette.divider}`,
         color: theme.palette.text.primary,

site/src/components/Resources/PortForwardButton.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof PortForwardPopoverView> = {
     (Story) => (
       <Box
         sx={{
-          width: (theme) => theme.spacing(38),
+          width: 304,
           border: (theme) => `1px solid ${theme.palette.divider}`,
           borderRadius: 1,
           backgroundColor: (theme) => theme.palette.background.paper,

site/src/components/Resources/PortForwardButton.tsx

@@ -54,7 +54,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
                 fontWeight: 500,
                 height: 20,
                 minWidth: 20,
-                padding: (theme) => theme.spacing(0, 0.5),
+                padding: "0 4px",
                 borderRadius: "50%",
                 display: "flex",
                 alignItems: "center",
@@ -75,9 +75,9 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
         classes={{
           paper: css`
             padding: 0;
-            width: ${theme.spacing(38)};
+            width: 304px;
             color: ${theme.palette.text.secondary};
-            margin-top: ${theme.spacing(0.5)};
+            margin-top: 4px;
           `,
         }}
       >
@@ -90,25 +90,24 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
 export const PortForwardPopoverView: React.FC<
   PortForwardButtonProps & { ports?: WorkspaceAgentListeningPort[] }
 > = (props) => {
+  const theme = useTheme();
   const { host, workspaceName, agent, username, ports } = props;
 
   return (
     <>
       <Box
-        sx={{
+        css={{
-          padding: (theme) => theme.spacing(2.5),
+          padding: 20,
-          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`,
         }}
       >
         <HelpTooltipTitle>Forwarded ports</HelpTooltipTitle>
-        <HelpTooltipText
+        <HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
-          sx={{ color: (theme) => theme.palette.text.secondary }}
-        >
           {ports?.length === 0
             ? "No open ports were detected."
             : "The forwarded ports are exclusively accessible to you."}
         </HelpTooltipText>
-        <Box sx={{ marginTop: (theme) => theme.spacing(1.5) }}>
+        <Box css={{ marginTop: 12 }}>
           {ports?.map((p) => {
             const url = portForwardURL(
               host,
@@ -122,7 +121,7 @@ export const PortForwardPopoverView: React.FC<
               <Link
                 underline="none"
                 sx={{
-                  color: (theme) => theme.palette.text.primary,
+                  color: theme.palette.text.primary,
                   fontSize: 14,
                   display: "flex",
                   alignItems: "center",
@@ -141,7 +140,7 @@ export const PortForwardPopoverView: React.FC<
                   component="span"
                   sx={{
                     ml: "auto",
-                    color: (theme) => theme.palette.text.secondary,
+                    color: theme.palette.text.secondary,
                     fontSize: 13,
                     fontWeight: 400,
                   }}
@@ -154,28 +153,22 @@ export const PortForwardPopoverView: React.FC<
         </Box>
       </Box>
 
-      <Box
+      <Box css={{ padding: 20 }}>
-        sx={{
-          padding: (theme) => theme.spacing(2.5),
-        }}
-      >
         <HelpTooltipTitle>Forward port</HelpTooltipTitle>
-        <HelpTooltipText
+        <HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
-          sx={{ color: (theme) => theme.palette.text.secondary }}
-        >
           Access ports running on the agent:
         </HelpTooltipText>
 
         <Box
           component="form"
           sx={{
-            border: (theme) => `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.palette.divider}`,
             borderRadius: "4px",
             mt: 2,
             display: "flex",
             alignItems: "center",
             "&:focus-within": {
-              borderColor: (theme) => theme.palette.primary.main,
+              borderColor: theme.palette.primary.main,
             },
           }}
           onSubmit={(e) => {
@@ -201,26 +194,26 @@ export const PortForwardPopoverView: React.FC<
             min={0}
             max={65535}
             required
-            sx={{
+            css={{
               fontSize: 14,
               height: 34,
-              p: (theme) => theme.spacing(0, 1.5),
+              padding: "0 12px",
               background: "none",
               border: 0,
               outline: "none",
-              color: (theme) => theme.palette.text.primary,
+              color: theme.palette.text.primary,
               appearance: "textfield",
               display: "block",
               width: "100%",
             }}
           />
           <OpenInNewOutlined
-            sx={{
+            css={{
               flexShrink: 0,
               width: 14,
               height: 14,
-              marginRight: (theme) => theme.spacing(1.5),
+              marginRight: 12,
-              color: (theme) => theme.palette.text.primary,
+              color: theme.palette.text.primary,
             }}
           />
         </Box>

site/src/components/Resources/ResourceCard.tsx

@@ -2,9 +2,9 @@ import { type FC, useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
-import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { DropdownArrow } from "../DropdownArrow/DropdownArrow";
-import { CopyableValue } from "components/CopyableValue/CopyableValue";
+import { CopyableValue } from "../CopyableValue/CopyableValue";
 import { Stack } from "../Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
@@ -12,7 +12,7 @@ import { SensitiveValue } from "./SensitiveValue";
 const styles = {
   resourceCard: (theme) => ({
     background: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
 
     "&:not(:first-of-type)": {
@@ -33,7 +33,7 @@ const styles = {
   },
 
   resourceCardHeader: (theme) => ({
-    padding: theme.spacing(3, 4),
+    padding: "24px 32px",
     borderBottom: `1px solid ${theme.palette.divider}`,
 
     "&:last-child": {
@@ -112,13 +112,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
         </Stack>
 
         <div
-          css={(theme) => ({
+          css={{
             flexGrow: 2,
             display: "grid",
             gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
-            gap: theme.spacing(5),
+            gap: 40,
-            rowGap: theme.spacing(3),
+            rowGap: 24,
-          })}
+          }}
         >
           {resource.daily_cost > 0 && (
             <div css={styles.metadata}>

site/src/components/Resources/Resources.tsx

@@ -55,12 +55,12 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
 };
 
 const styles = {
-  buttonWrapper: (theme) => ({
+  buttonWrapper: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    marginTop: theme.spacing(2),
+    marginTop: 16,
-  }),
+  },
 
   showMoreButton: {
     borderRadius: 9999,

site/src/components/Resources/SSHButton/SSHButton.tsx

@@ -41,10 +41,10 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
         horizontal="right"
         classes={{
           paper: css`
-            padding: ${theme.spacing(2, 3, 3)};
+            padding: 16px 24px 24px;
-            width: ${theme.spacing(38)};
+            width: 304px;
             color: ${theme.palette.text.secondary};
-            margin-top: ${theme.spacing(0.25)};
+            margin-top: 2px;
           `,
         }}
       >
@@ -94,9 +94,9 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
 };
 
 const styles = {
-  codeExamples: (theme) => ({
+  codeExamples: {
-    marginTop: theme.spacing(1.5),
+    marginTop: 12,
-  }),
+  },
 
   codeExampleLabel: {
     fontSize: 12,

site/src/components/Resources/SensitiveValue.tsx

@@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
-import { useState } from "react";
+import { type FC, useState } from "react";
 import { css } from "@emotion/react";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
@@ -11,7 +11,7 @@ const Language = {
   hideLabel: "Hide value",
 };
 
-export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
+export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
   const [shouldDisplay, setShouldDisplay] = useState(false);
   const displayValue = shouldDisplay ? value : "••••••••";
   const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@@ -23,11 +23,11 @@ export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
 
   return (
     <div
-      css={(theme) => ({
+      css={{
         display: "flex",
         alignItems: "center",
-        gap: theme.spacing(0.5),
+        gap: 4,
-      })}
+      }}
     >
       <CopyableValue
         value={value}

site/src/components/RichParameterInput/MultiTextField.tsx

@@ -72,15 +72,15 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
 const styles = {
   root: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
-    minHeight: theme.spacing(6), // Chip height + paddings
+    minHeight: 48, // Chip height + paddings
-    padding: theme.spacing(1.25, 1.75),
+    padding: "10px 14px",
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     display: "flex",
     flexWrap: "wrap",
-    gap: theme.spacing(1),
+    gap: 8,
     position: "relative",
-    margin: theme.spacing(1, 0, 0.5), // Have same margin than TextField
+    margin: "8px 0 4px", // Have same margin than TextField
 
     "&:has(input:focus)": {
       borderColor: theme.palette.primary.main,

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -4,7 +4,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
@@ -17,9 +17,9 @@ const isBoolean = (parameter: TemplateVersionParameter) => {
 };
 
 const styles = {
-  label: (theme) => ({
+  label: {
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
-  }),
+  },
   labelCaption: (theme) => ({
     fontSize: 14,
     color: theme.palette.text.secondary,
@@ -43,11 +43,11 @@ const styles = {
       fontSize: 14,
     },
   }),
-  labelImmutable: (theme) => ({
+  labelImmutable: {
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
     color: colors.yellow[7],
-  }),
+  },
   textField: {
     ".small & .MuiInputBase-root": {
       height: 36,
@@ -55,32 +55,32 @@ const styles = {
       borderRadius: 6,
     },
   },
-  radioGroup: (theme) => ({
+  radioGroup: {
     ".small & .MuiFormControlLabel-label": {
       fontSize: 14,
     },
     ".small & .MuiRadio-root": {
-      padding: theme.spacing(0.75, "9px"), // 8px + 1px border
+      padding: "6px 9px", // 8px + 1px border
     },
     ".small & .MuiRadio-root svg": {
       width: 16,
       height: 16,
     },
-  }),
+  },
-  checkbox: (theme) => ({
+  checkbox: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1),
+    gap: 8,
-  }),
+  },
-  labelIconWrapper: (theme) => ({
+  labelIconWrapper: {
-    width: theme.spacing(2.5),
+    width: 20,
-    height: theme.spacing(2.5),
+    height: 20,
     display: "block",
 
     ".small &": {
       display: "none",
     },
-  }),
+  },
   labelIcon: {
     width: "100%",
     height: "100%",
@@ -175,7 +175,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
-  const theme = useTheme();
   const small = size === "small";
 
   if (isBoolean(parameter)) {
@@ -232,9 +231,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
                     spacing={small ? 1 : 0}
                     alignItems={small ? "center" : undefined}
                     direction={small ? "row" : "column"}
-                    css={{
+                    css={{ padding: small ? undefined : "4px 0" }}
-                      padding: small ? undefined : `${theme.spacing(0.5)} 0`,
-                    }}
                   >
                     {small ? (
                       <Tooltip

site/src/components/SettingsLayout/Section.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode, type PropsWithChildren } from "react";
 import { SectionAction } from "./SectionAction";
@@ -32,8 +31,6 @@ export const Section: SectionFC = ({
   children,
   layout = "fixed",
 }) => {
-  const theme = useTheme();
-
   return (
     <section className={className} id={id} data-testid={id}>
       <div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
@@ -55,7 +52,7 @@ export const Section: SectionFC = ({
             {toolbar && <div>{toolbar}</div>}
           </div>
         )}
-        {alert && <div css={{ marginBottom: theme.spacing(1) }}>{alert}</div>}
+        {alert && <div css={{ marginBottom: 8 }}>{alert}</div>}
         {children}
       </div>
     </section>
@@ -66,16 +63,16 @@ export const Section: SectionFC = ({
 Section.Action = SectionAction;
 
 const styles = {
-  header: (theme) => ({
+  header: {
-    marginBottom: theme.spacing(3),
+    marginBottom: 24,
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
-  }),
+  },
   description: (theme) => ({
     color: theme.palette.text.secondary,
     fontSize: 16,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
     lineHeight: "140%",
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/SettingsLayout/SectionAction.tsx

@@ -7,13 +7,5 @@ import { type FC } from "react";
 export const SectionAction: FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  return (
+  return <div css={{ marginTop: 24 }}>{children}</div>;
-    <div
-      css={(theme) => ({
-        marginTop: theme.spacing(3),
-      })}
-    >
-      {children}
-    </div>
-  );
 };

site/src/components/SettingsLayout/SettingsLayout.tsx

@@ -18,21 +18,10 @@ export const SettingsLayout: FC = () => {
       </Helmet>
 
       <Margins>
-        <Stack
+        <Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
-          css={(theme) => ({
-            padding: theme.spacing(6, 0),
-          })}
-          direction="row"
-          spacing={6}
-        >
           <Sidebar user={me} />
           <Suspense fallback={<Loader />}>
-            <main
+            <main css={{ maxWidth: 800, width: "100%" }}>
-              css={{
-                maxWidth: 800,
-                width: "100%",
-              }}
-            >
               <Outlet />
             </main>
           </Suspense>

site/src/components/SettingsLayout/Sidebar.tsx

@@ -33,8 +33,8 @@ const SidebarNavItem: FC<
     display: block;
     font-size: 14px;
     text-decoration: none;
-    padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
+    padding: 12px 12px 12px 16px;
-    border-radius: ${theme.shape.borderRadius / 2}px;
+    border-radius: 4px;
     transition: background-color 0.15s ease-in-out;
     margin-bottom: 1px;
     position: relative;
@@ -56,8 +56,8 @@ const SidebarNavItem: FC<
       left: 0;
       top: 0;
       background-color: ${theme.palette.secondary.dark};
-      border-top-left-radius: ${theme.shape.borderRadius};
+      border-top-left-radius: 8px;
-      border-bottom-left-radius: ${theme.shape.borderRadius};
+      border-bottom-left-radius: 8px;
     }
   `;
 
@@ -82,14 +82,7 @@ const SidebarNavItem: FC<
 const SidebarNavItemIcon: React.FC<{
   icon: ComponentType<{ className?: string }>;
 }> = ({ icon: Icon }) => {
-  return (
+  return <Icon css={{ width: 16, height: 16 }} />;
-    <Icon
-      css={(theme) => ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-      })}
-    />
-  );
 };
 
 export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
@@ -150,7 +143,7 @@ const styles = {
   },
   userInfo: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    marginBottom: theme.spacing(2),
+    marginBottom: 16,
   }),
   userData: {
     overflow: "hidden",

site/src/components/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import { colors } from "theme/colors";
 export const Sidebar = styled((props: BoxProps) => (
   <Box {...props} component="nav" />
 ))(({ theme }) => ({
-  width: theme.spacing(32),
+  width: 256,
   flexShrink: 0,
   borderRight: `1px solid ${theme.palette.divider}`,
   height: "100%",
@@ -22,7 +22,7 @@ export const SidebarItem = styled(
   fontSize: 14,
   width: "100%",
   textAlign: "left",
-  padding: theme.spacing(0, 3),
+  padding: "0 24px",
   cursor: "pointer",
   pointerEvents: active ? "none" : "auto",
   color: active ? theme.palette.text.primary : theme.palette.text.secondary,
@@ -30,8 +30,8 @@ export const SidebarItem = styled(
     background: theme.palette.action.hover,
     color: theme.palette.text.primary,
   },
-  paddingTop: theme.spacing(1.25),
+  paddingTop: 10,
-  paddingBottom: theme.spacing(1.25),
+  paddingBottom: 10,
 }));
 
 export const SidebarCaption = styled(Box)(({ theme }) => ({
@@ -39,6 +39,6 @@ export const SidebarCaption = styled(Box)(({ theme }) => ({
   textTransform: "uppercase",
   fontWeight: 500,
   color: theme.palette.text.secondary,
-  padding: theme.spacing(1.5, 3),
+  padding: "12px 24px",
   letterSpacing: "0.5px",
 }));

site/src/components/SignInLayout/SignInLayout.tsx

@@ -32,7 +32,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
           css={(theme) => ({
             fontSize: 12,
             color: theme.palette.text.secondary,
-            marginTop: theme.spacing(3),
+            marginTop: 24,
           })}
         >
           {`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}

site/src/components/Stack/Stack.tsx

@@ -25,15 +25,15 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
     <div
       {...divProps}
       ref={ref}
-      css={(theme) => ({
+      css={{
         display: "flex",
         flexDirection: direction,
-        gap: spacing && theme.spacing(spacing),
+        gap: spacing * 8,
         alignItems: alignItems,
         justifyContent: justifyContent,
         flexWrap: wrap,
         maxWidth: "100%",
-      })}
+      }}
     >
       {children}
     </div>

site/src/components/Stats/Stats.tsx

@@ -23,9 +23,9 @@ export const StatsItem: FC<
 const styles = {
   stats: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    paddingLeft: theme.spacing(2),
+    paddingLeft: 16,
-    paddingRight: theme.spacing(2),
+    paddingRight: 16,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
     display: "flex",
     alignItems: "center",
@@ -35,20 +35,20 @@ const styles = {
 
     [theme.breakpoints.down("md")]: {
       display: "block",
-      padding: theme.spacing(2),
+      padding: 16,
     },
   }),
 
   statItem: (theme) => ({
-    padding: theme.spacing(1.75),
+    padding: 14,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: 16,
-    paddingRight: theme.spacing(2),
+    paddingRight: 16,
     display: "flex",
     alignItems: "baseline",
-    gap: theme.spacing(1),
+    gap: 8,
 
     [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(1),
+      padding: 8,
     },
   }),
 
@@ -58,7 +58,7 @@ const styles = {
   },
 
   statsValue: (theme) => ({
-    marginTop: theme.spacing(0.25),
+    marginTop: 2,
     display: "flex",
     wordWrap: "break-word",
     color: theme.palette.text.primary,

site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -35,7 +35,7 @@ export const SyntaxHighlighter: FC<{
   return (
     <div
       css={(theme) => ({
-        padding: theme.spacing(1, 0),
+        padding: "8px 0",
         background: theme.palette.background.paper,
         height: "100%",
       })}

site/src/components/TableLoader/TableLoader.tsx

@@ -1,21 +1,12 @@
 import TableCell from "@mui/material/TableCell";
 import TableRow, { type TableRowProps } from "@mui/material/TableRow";
 import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
-import { useTheme } from "@emotion/react";
 import { Loader } from "../Loader/Loader";
 
 export const TableLoader: FC = () => {
-  const theme = useTheme();
-
   return (
     <TableRow>
-      <TableCell
+      <TableCell colSpan={999} css={{ textAlign: "center", height: 160 }}>
-        colSpan={999}
-        css={{
-          textAlign: "center",
-          height: theme.spacing(20),
-        }}
-      >
         <Loader />
       </TableCell>
     </TableRow>

site/src/components/TableToolbar/TableToolbar.tsx

@@ -4,13 +4,15 @@ import Skeleton from "@mui/material/Skeleton";
 
 export const TableToolbar = styled(Box)(({ theme }) => ({
   fontSize: 13,
-  marginBottom: theme.spacing(1),
+  marginBottom: "8px",
   marginTop: 0,
-  height: 36, // The size of a small button
+  height: "36px", // The size of a small button
   color: theme.palette.text.secondary,
-  "& strong": { color: theme.palette.text.primary },
   display: "flex",
   alignItems: "center",
+  "& strong": {
+    color: theme.palette.text.primary,
+  },
 }));
 
 type BasePaginationStatusProps = {

site/src/components/Tabs/Tabs.tsx

@@ -10,15 +10,15 @@ export const Tabs = ({ children }: { children: ReactNode }) => {
     <div
       css={(theme) => ({
         borderBottom: `1px solid ${theme.palette.divider}`,
-        marginBottom: theme.spacing(5),
+        marginBottom: 40,
       })}
     >
       <Margins
-        css={(theme) => ({
+        css={{
           display: "flex",
           alignItems: "center",
-          gap: theme.spacing(0.25),
+          gap: 2,
-        })}
+        }}
       >
         {children}
       </Margins>
@@ -34,7 +34,7 @@ export const TabLink = (props: NavLinkProps) => {
     color: ${theme.palette.text.secondary};
     font-size: 14px;
     display: block;
-    padding: ${theme.spacing(0, 2, 2)};
+    padding: 0 16px 16px;
 
     &:hover {
       color: ${theme.palette.text.primary};

site/src/components/TemplateExampleCard/TemplateExampleCard.tsx

@@ -33,7 +33,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 const styles = {
   template: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     background: theme.palette.background.paper,
     textDecoration: "none",
     textAlign: "left",
@@ -47,36 +47,36 @@ const styles = {
     },
   }),
 
-  templateIcon: (theme) => ({
+  templateIcon: {
-    width: theme.spacing(12),
+    width: 96,
-    height: theme.spacing(12),
+    height: 96,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
 
     "& img": {
-      height: theme.spacing(4),
+      height: 32,
     },
-  }),
+  },
 
-  templateInfo: (theme) => ({
+  templateInfo: {
-    padding: theme.spacing(2, 2, 2, 0),
+    padding: "16px 16px 16px 0",
     display: "flex",
     flexDirection: "column",
     overflow: "hidden",
-  }),
+  },
 
-  templateName: (theme) => ({
+  templateName: {
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     textOverflow: "ellipsis",
     width: "100%",
     overflow: "hidden",
     whiteSpace: "nowrap",
-  }),
+  },
 
   templateDescription: (theme) => ({
-    fontSize: theme.spacing(1.75),
+    fontSize: 14,
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     width: "100%",

site/src/components/TemplateFiles/TemplateFiles.tsx

@@ -99,13 +99,13 @@ const styles = {
   tab: (theme) => ({
     background: "transparent",
     border: 0,
-    padding: theme.spacing(0, 3),
+    padding: "0 24px",
     display: "flex",
     alignItems: "center",
-    height: theme.spacing(6),
+    height: 48,
     opacity: 0.85,
     cursor: "pointer",
-    gap: theme.spacing(0.5),
+    gap: 4,
     position: "relative",
     color: theme.palette.text.secondary,
     whiteSpace: "nowrap",
@@ -142,7 +142,7 @@ const styles = {
     width: 6,
     backgroundColor: theme.palette.warning.light,
     borderRadius: "100%",
-    marginLeft: theme.spacing(0.5),
+    marginLeft: 4,
   }),
 
   codeWrapper: (theme) => ({
@@ -150,7 +150,7 @@ const styles = {
   }),
 
   files: (theme) => ({
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
   }),
 

site/src/components/Timeline/TimelineDateRow.tsx

@@ -23,7 +23,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
     >
       <TableCell
         css={{
-          padding: `${theme.spacing(1, 4)} !important`,
+          padding: `8px 32px !important`,
           background: `${theme.palette.background.paperLight} !important`,
           fontSize: 12,
           position: "relative",

site/src/components/UserAutocomplete/UserAutocomplete.tsx

@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
@@ -33,7 +32,6 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   className,
   size = "small",
 }) => {
-  const theme = useTheme();
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
     open: boolean;
@@ -130,10 +128,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
             ),
             classes: {
               root: css`
-                padding-left: ${theme.spacing(
+                padding-left: 14px !important; // Same padding left as input
-                  1.75,
+                gap: 4px;
-                )} !important; // Same padding left as input
-                gap: ${theme.spacing(0.5)};
               `,
             },
           }}

site/src/components/Welcome/Welcome.tsx

@@ -27,18 +27,16 @@ export const Welcome: FC<
         <CoderIcon
           css={{
             color: theme.palette.text.primary,
-            fontSize: theme.spacing(8),
+            fontSize: 64,
           }}
         />
       </div>
       <Typography
         css={css`
           text-align: center;
-          font-size: ${theme.spacing(4)};
+          font-size: 32px;
           font-weight: 400;
-          margin: 0;
+          margin: 16px 0 32px;
-          margin-bottom: ${theme.spacing(4)};
-          margin-top: ${theme.spacing(2)};
           line-height: 1.25;
 
           & strong {

site/src/components/WorkspaceBuildLogs/Logs.tsx

@@ -25,7 +25,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
 }) => {
   return (
     <div css={styles.root} className={className}>
-      <div css={styles.scrollWrapper}>
+      <div css={{ minWidth: "fit-content" }}>
         {lines.map((line, idx) => (
           <div css={styles.line} className={line.level} key={idx}>
             {!hideTimestamps && (
@@ -63,7 +63,7 @@ export const LogLine: FC<{
 
   return (
     <div
-      css={[styles.line, isUsingLineNumber && styles.lineNumber]}
+      css={[styles.line, isUsingLineNumber && { paddingLeft: 16 }]}
       className={line.level}
       style={style}
     >
@@ -93,8 +93,8 @@ export const LogLine: FC<{
 const styles = {
   root: (theme) => ({
     minHeight: 156,
-    padding: theme.spacing(1, 0),
+    padding: "8px 0",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     overflowX: "auto",
     background: theme.palette.background.default,
 
@@ -103,9 +103,6 @@ const styles = {
       borderRadius: 0,
     },
   }),
-  scrollWrapper: {
-    minWidth: "fit-content",
-  },
   line: (theme) => ({
     wordBreak: "break-all",
     display: "flex",
@@ -116,7 +113,7 @@ const styles = {
     height: "auto",
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
-    padding: theme.spacing(0, 4),
+    padding: "0 32px",
 
     "&.error": {
       backgroundColor: theme.palette.error.dark,
@@ -130,23 +127,20 @@ const styles = {
       backgroundColor: theme.palette.warning.dark,
     },
   }),
-  lineNumber: (theme) => ({
+  space: {
-    paddingLeft: theme.spacing(2),
-  }),
-  space: (theme) => ({
     userSelect: "none",
-    width: theme.spacing(3),
+    width: 24,
     display: "block",
     flexShrink: 0,
-  }),
+  },
   time: (theme) => ({
     userSelect: "none",
     whiteSpace: "pre",
     display: "inline-block",
     color: theme.palette.text.secondary,
   }),
-  number: (theme) => ({
+  number: {
-    width: theme.spacing(4),
+    width: 32,
     textAlign: "right",
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;

site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx

@@ -97,7 +97,7 @@ const styles = {
   header: (theme) => ({
     fontSize: 13,
     fontWeight: 600,
-    padding: theme.spacing(0.5, 3),
+    padding: "4px 24px",
     display: "flex",
     alignItems: "center",
     fontFamily: "Inter",

site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

@@ -89,7 +89,7 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
     backgroundColor: theme.palette.background.paperLight,
     border: `1px solid ${theme.palette.divider}`,
     fontSize: 12,
-    padding: theme.spacing(1, 1.25),
+    padding: "8px 10px",
   },
 }));
 

site/src/hooks/useClickableTableRow.ts

@@ -42,8 +42,8 @@ export const useClickableTableRow = ({
       },
 
       "&:last-of-type": {
-        borderBottomLeftRadius: theme.shape.borderRadius,
+        borderBottomLeftRadius: 8,
-        borderBottomRightRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: 8,
       },
     },
     hover: true,

site/src/pages/404Page/404Page.tsx

@@ -15,8 +15,8 @@ export const NotFoundPage: FC = () => {
     >
       <div
         css={(theme) => ({
-          margin: theme.spacing(1),
+          margin: 8,
-          padding: theme.spacing(1),
+          padding: 8,
           borderRight: theme.palette.divider,
         })}
       >

site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx

@@ -69,15 +69,15 @@ const styles = {
     zIndex: 2,
   }),
 
-  diffColumn: (theme) => ({
+  diffColumn: {
     flex: 1,
-    paddingTop: theme.spacing(2),
+    paddingTop: 16,
-    paddingBottom: theme.spacing(2.5),
+    paddingBottom: 20,
-    paddingRight: theme.spacing(2),
+    paddingRight: 16,
     lineHeight: "160%",
     alignSelf: "stretch",
     overflowWrap: "anywhere",
-  }),
+  },
 
   diffOld: (theme) => ({
     backgroundColor: theme.palette.error.dark,
@@ -89,15 +89,15 @@ const styles = {
     alignItems: "baseline",
   },
 
-  diffLine: (theme) => ({
+  diffLine: {
     opacity: 0.5,
-    width: theme.spacing(6),
+    width: 48,
     textAlign: "right",
     flexShrink: 0,
-  }),
+  },
 
   diffIcon: (theme) => ({
-    width: theme.spacing(4),
+    width: 32,
     textAlign: "center",
     fontSize: theme.typography.body1.fontSize,
     flexShrink: 0,
@@ -108,10 +108,10 @@ const styles = {
     color: theme.palette.success.contrastText,
   }),
 
-  diffValue: (theme) => ({
+  diffValue: {
     padding: 1,
-    borderRadius: theme.shape.borderRadius / 2,
+    borderRadius: 4,
-  }),
+  },
 
   diffValueOld: {
     backgroundColor: colors.red[12],

site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

@@ -168,9 +168,9 @@ const styles = {
     border: 0,
   },
 
-  auditLogHeader: (theme) => ({
+  auditLogHeader: {
-    padding: theme.spacing(2, 4),
+    padding: "16px 32px",
-  }),
+  },
 
   auditLogHeaderInfo: {
     flex: 1,

site/src/pages/CliAuthPage/CliAuthPageView.tsx

@@ -26,7 +26,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         css={{
           fontSize: 16,
           color: theme.palette.text.secondary,
-          marginBottom: theme.spacing(4),
+          marginBottom: 32,
           textAlign: "center",
           lineHeight: "160%",
         }}
@@ -48,7 +48,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         css={{
           display: "flex",
           justifyContent: "flex-end",
-          paddingTop: theme.spacing(1),
+          paddingTop: 8,
         }}
       >
         <Button component={RouterLink} size="large" to="/workspaces" fullWidth>

site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

@@ -695,18 +695,18 @@ const styles = {
   },
 
   optionText: (theme) => ({
-    fontSize: theme.spacing(2),
+    fontSize: 16,
     color: theme.palette.text.primary,
   }),
 
   optionHelperText: (theme) => ({
-    fontSize: theme.spacing(1.5),
+    fontSize: 12,
     color: theme.palette.text.secondary,
   }),
 
   error: (theme) => ({
-    padding: theme.spacing(3),
+    padding: 24,
-    borderRadius: theme.spacing(1),
+    borderRadius: 8,
     background: theme.palette.background.paper,
     border: `1px solid ${theme.palette.error.main}`,
   }),
@@ -719,13 +719,13 @@ const styles = {
   errorDescription: (theme) => ({
     margin: 0,
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.5),
+    marginTop: 4,
   }),
 
   errorDetails: (theme) => ({
     display: "block",
-    marginTop: theme.spacing(1),
+    marginTop: 8,
     color: theme.palette.error.light,
-    fontSize: theme.spacing(2),
+    fontSize: 16,
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/pages/CreateTemplatePage/VariableInput.tsx

@@ -114,7 +114,7 @@ const styles = {
     fontSize: 14,
     color: theme.palette.text.secondary,
     display: "block",
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
   }),
   labelDescription: (theme) => ({
     fontSize: 16,

site/src/pages/CreateTokenPage/CreateTokenPage.tsx

@@ -72,12 +72,12 @@ export const CreateTokenPage: FC = () => {
       <p>Make sure you copy the below token before proceeding:</p>
       <CodeExample
         code={newToken?.key ?? ""}
-        css={(theme) => ({
+        css={{
           minHeight: "auto",
           userSelect: "all",
           width: "100%",
-          marginTop: theme.spacing(3),
+          marginTop: 24,
-        })}
+        }}
       />
     </>
   );

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -234,9 +234,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                   border: 1px solid ${theme.palette.warning.light};
                   border-radius: 8px;
                   background-color: ${theme.palette.background.paper};
-                  padding: ${theme.spacing(10)};
+                  padding: 80px;
-                  margin-left: ${theme.spacing(-10)};
+                  margin-left: -80px;
-                  margin-right: ${theme.spacing(-10)};
+                  margin-right: -80px;
                 `,
               }}
               getInputProps={(parameter, index) => {
@@ -308,9 +308,9 @@ const useExternalAuthVerification = (
 };
 
 const styles = {
-  hasDescription: (theme) => ({
+  hasDescription: {
-    paddingBottom: theme.spacing(2),
+    paddingBottom: 16,
-  }),
+  },
   description: (theme) => ({
     fontSize: 13,
     color: theme.palette.text.secondary,

site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx

@@ -40,8 +40,8 @@ export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
 
 const styles = {
   template: (theme) => ({
-    padding: theme.spacing(2.5, 3),
+    padding: "20px 24px",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
   }),

site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

@@ -134,8 +134,8 @@ export const AppearanceSettingsPageView = ({
               <InputAdornment
                 position="end"
                 css={{
-                  width: theme.spacing(3),
+                  width: 24,
-                  height: theme.spacing(3),
+                  height: 24,
 
                   "& img": {
                     maxWidth: "100%",

site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx

@@ -1,4 +1,4 @@
-import { css, useTheme } from "@emotion/react";
+import { css } from "@emotion/react";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -18,8 +18,6 @@ export type ExternalAuthSettingsPageViewProps = {
 export const ExternalAuthSettingsPageView = ({
   config,
 }: ExternalAuthSettingsPageViewProps): JSX.Element => {
-  const theme = useTheme();
-
   return (
     <>
       <Header
@@ -42,8 +40,8 @@ export const ExternalAuthSettingsPageView = ({
 
       <div
         css={{
-          marginTop: theme.spacing(3),
+          marginTop: 24,
-          marginBottom: theme.spacing(3),
+          marginBottom: 24,
         }}
       >
         <Alert severity="info" actions={<EnterpriseBadge key="enterprise" />}>
@@ -56,13 +54,13 @@ export const ExternalAuthSettingsPageView = ({
         <Table
           css={css`
             & td {
-              padding-top: ${theme.spacing(3)};
+              padding-top: 24px;
-              padding-bottom: ${theme.spacing(3)};
+              padding-bottom: 24px;
             }
 
             & td:last-child,
             & th:last-child {
-              padding-left: ${theme.spacing(4)};
+              padding-left: 32px;
             }
           `}
         >

site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx

@@ -28,7 +28,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
     <Paper
       css={{
         border: `1px solid ${theme.palette.divider}`,
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: 8,
       }}
       elevation={0}
     >
@@ -38,7 +38,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
             alignItems: "center",
             display: "flex",
             justifyContent: "space-between",
-            padding: theme.spacing(1.5, 2),
+            padding: "12px 16px",
           }}
         >
           <h6
@@ -54,12 +54,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
         </div>
       )}
 
-      <div
+      <div {...contentsProps} css={{ margin: 16 }}>
-        {...contentsProps}
-        css={{
-          margin: theme.spacing(2),
-        }}
-      >
         {children}
       </div>
     </Paper>

site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
@@ -23,8 +22,6 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
   isSavingLicense,
   savingLicenseError,
 }) => {
-  const theme = useTheme();
-
   function handleFileUploaded(files: File[]) {
     const fileReader = new FileReader();
     fileReader.onload = () => {
@@ -76,7 +73,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
         description="Select a text file that contains your license key."
       />
 
-      <Stack css={{ paddingTop: theme.spacing(5) }}>
+      <Stack css={{ paddingTop: 40 }}>
         <DividerWithText>or</DividerWithText>
 
         <Fieldset

site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx

@@ -21,10 +21,10 @@ const styles = {
     width: "100%",
   }),
   content: (theme) => ({
-    paddingTop: theme.spacing(0.5),
+    paddingTop: 4,
-    paddingBottom: theme.spacing(0.5),
+    paddingBottom: 4,
-    paddingRight: theme.spacing(2),
+    paddingRight: 16,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: 16,
     fontSize: theme.typography.h5.fontSize,
     color: theme.palette.text.secondary,
   }),

site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx

@@ -118,7 +118,7 @@ const styles = {
   }),
   licenseCard: (theme) => ({
     ...(theme.typography.body2 as CSSObject),
-    padding: theme.spacing(2),
+    padding: 16,
   }),
   cardContent: {},
   licenseId: (theme) => ({
@@ -135,9 +135,9 @@ const styles = {
   licenseExpires: (theme) => ({
     color: theme.palette.text.secondary,
   }),
-  expiredBadge: (theme) => ({
+  expiredBadge: {
-    marginBottom: theme.spacing(0.5),
+    marginBottom: 4,
-  }),
+  },
   secondaryMaincolor: (theme) => ({
     color: theme.palette.text.secondary,
   }),

site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -128,25 +128,25 @@ const LicensesSettingsPageView: FC<Props> = ({
 };
 
 const styles = {
-  title: (theme) => ({
+  title: {
-    fontSize: theme.spacing(2),
+    fontSize: 16,
-  }),
+  },
 
   root: (theme) => ({
-    minHeight: theme.spacing(30),
+    minHeight: 240,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(6),
+    padding: 48,
   }),
 
   description: (theme) => ({
     color: theme.palette.text.secondary,
     textAlign: "center",
-    maxWidth: theme.spacing(58),
+    maxWidth: 464,
-    marginTop: theme.spacing(1),
+    marginTop: 8,
   }),
 } satisfies Record<string, Interpolation<Theme>>;
 

site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -232,30 +232,30 @@ const styles = {
     color: theme.palette.text.primary,
   }),
 
-  installAlert: (theme) => ({
+  installAlert: {
-    margin: theme.spacing(2),
+    margin: 16,
-  }),
+  },
 
-  links: (theme) => ({
+  links: {
     display: "flex",
-    gap: theme.spacing(0.5),
+    gap: 4,
-    margin: theme.spacing(2),
+    margin: 16,
     flexDirection: "column",
-  }),
+  },
 
-  link: (theme) => ({
+  link: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     fontSize: 16,
-    gap: theme.spacing(1),
+    gap: 8,
-  }),
+  },
 
   status: (theme) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.spacing(1),
+    gap: 8,
     color: theme.palette.text.disabled,
   }),
 
@@ -263,6 +263,6 @@ const styles = {
     display: "flex",
     gap: 4,
     color: theme.palette.text.disabled,
-    margin: theme.spacing(4),
+    margin: 32,
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/pages/GroupsPage/GroupsPageView.tsx

@@ -220,7 +220,7 @@ const styles = {
     },
 
     "& .MuiTableCell-root:last-child": {
-      paddingRight: `${theme.spacing(2)} !important`,
+      paddingRight: `16px !important`,
     },
   }),
   arrowRight: (theme) => ({

site/src/pages/HealthPage/HealthPage.tsx

@@ -114,7 +114,7 @@ export function HealthPageView({
       >
         <Box
           sx={{
-            width: (theme) => theme.spacing(32),
+            width: 256,
             flexShrink: 0,
             borderRight: (theme) => `1px solid ${theme.palette.divider}`,
           }}
@@ -125,7 +125,7 @@ export function HealthPageView({
               textTransform: "uppercase",
               fontWeight: 500,
               color: (theme) => theme.palette.text.secondary,
-              padding: (theme) => theme.spacing(1.5, 3),
+              padding: "12px 24px",
               letterSpacing: "0.5px",
             }}
           >
@@ -157,7 +157,7 @@ export function HealthPageView({
                       gap: 1,
                       textAlign: "left",
                       height: 36,
-                      padding: (theme) => theme.spacing(0, 3),
+                      padding: "0 24px",
                       cursor: "pointer",
                       pointerEvents: isActive ? "none" : "auto",
                       color: (theme) =>
@@ -214,15 +214,15 @@ const styles = {
   stats: (theme) => ({
     padding: 0,
     border: 0,
-    gap: theme.spacing(6),
+    gap: 48,
-    rowGap: theme.spacing(3),
+    rowGap: 24,
     flex: 1,
 
     [theme.breakpoints.down("md")]: {
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: theme.spacing(1),
+      gap: 8,
     },
   }),
 

site/src/pages/IconsPage/IconsPage.tsx

@@ -82,7 +82,7 @@ export const IconsPage: FC = () => {
               title={
                 <Box
                   css={{
-                    padding: theme.spacing(1),
+                    padding: 8,
                     fontSize: 13,
                     lineHeight: 1.5,
                   }}
@@ -153,14 +153,14 @@ export const IconsPage: FC = () => {
           wrap="wrap"
           spacing={1}
           justifyContent="center"
-          css={(theme) => ({ marginTop: theme.spacing(4) })}
+          css={{ marginTop: 32 }}
         >
           {searchedIcons.length === 0 && (
             <EmptyState message="No results matched your search" />
           )}
           {searchedIcons.map((icon) => (
             <CopyableValue key={icon.url} value={icon.url} placement="bottom">
-              <Stack alignItems="center" css={{ margin: theme.spacing(1.5) }}>
+              <Stack alignItems="center" css={{ margin: 12 }}>
                 <img
                   alt={icon.url}
                   src={icon.url}
@@ -169,7 +169,7 @@ export const IconsPage: FC = () => {
                     height: 60,
                     objectFit: "contain",
                     pointerEvents: "none",
-                    padding: theme.spacing(1.5),
+                    padding: 12,
                   }}
                 />
                 <figcaption

site/src/pages/LoginPage/LoginPageView.tsx

@@ -64,31 +64,31 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 };
 
 const styles = {
-  root: (theme) => ({
+  root: {
-    padding: theme.spacing(3),
+    padding: 24,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100%",
     textAlign: "center",
-  }),
+  },
 
-  container: (theme) => ({
+  container: {
     width: "100%",
     maxWidth: 385,
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: theme.spacing(2),
+    gap: 16,
-  }),
+  },
 
-  icon: (theme) => ({
+  icon: {
-    fontSize: theme.spacing(8),
+    fontSize: 64,
-  }),
+  },
 
   footer: (theme) => ({
     fontSize: 12,
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(3),
+    marginTop: 24,
   }),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/pages/LoginPage/OAuthSignInForm.tsx

@@ -4,7 +4,6 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Box from "@mui/material/Box";
 import { type FC } from "react";
-import { useTheme } from "@emotion/react";
 import { Language } from "./SignInForm";
 import { type AuthMethods } from "api/typesGenerated";
 
@@ -19,11 +18,9 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
   redirectTo,
   authMethods,
 }) => {
-  const theme = useTheme();
-
   const iconStyles = {
-    width: theme.spacing(2),
+    width: 16,
-    height: theme.spacing(2),
+    height: 16,
   };
 
   return (

site/src/pages/LoginPage/SignInForm.tsx

@@ -25,27 +25,27 @@ const styles = {
   root: {
     width: "100%",
   },
-  title: (theme) => ({
+  title: {
-    fontSize: theme.spacing(4),
+    fontSize: 32,
     fontWeight: 400,
     margin: 0,
-    marginBottom: theme.spacing(4),
+    marginBottom: 32,
     lineHeight: 1,
 
     "& strong": {
       fontWeight: 600,
     },
-  }),
+  },
-  alert: (theme) => ({
+  alert: {
-    marginBottom: theme.spacing(4),
+    marginBottom: 32,
-  }),
+  },
-  divider: (theme) => ({
+  divider: {
-    paddingTop: theme.spacing(3),
+    paddingTop: 24,
-    paddingBottom: theme.spacing(3),
+    paddingBottom: 24,
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(2),
+    gap: 16,
-  }),
+  },
   dividerLine: (theme) => ({
     width: "100%",
     height: 1,
@@ -58,10 +58,10 @@ const styles = {
     fontSize: 12,
     letterSpacing: 1,
   }),
-  icon: (theme) => ({
+  icon: {
-    width: theme.spacing(2),
+    width: 16,
-    height: theme.spacing(2),
+    height: 16,
-  }),
+  },
 } satisfies Record<string, Interpolation<Theme>>;
 
 export interface SignInFormProps {