diff --git a/site/src/theme/light/colors.ts b/site/src/theme/light/colors.ts deleted file mode 100644 index 74508b31db..0000000000 --- a/site/src/theme/light/colors.ts +++ /dev/null @@ -1,62 +0,0 @@ -import tw from "../tailwindColors"; - -export default { - white: "#fff", - - gray: { - 17: tw.zinc[950], - 16: tw.zinc[900], - 14: tw.zinc[800], - 13: tw.zinc[700], - 12: tw.zinc[600], - 11: tw.zinc[500], - 9: tw.zinc[400], - 6: tw.zinc[300], - 4: tw.zinc[200], - 2: tw.zinc[100], - 1: tw.zinc[50], - }, - - red: { - 15: tw.red[950], - 12: tw.red[800], - 10: tw.red[700], - 9: tw.red[600], - 8: tw.red[500], - 6: tw.red[400], - 2: tw.red[50], - }, - - orange: { - 15: tw.amber[950], - 14: tw.amber[900], - 12: tw.amber[800], - 11: tw.amber[700], - 10: tw.amber[600], - 9: tw.amber[500], - 7: tw.amber[400], - }, - - yellow: { - 5: tw.yellow[300], - }, - - green: { - 15: tw.green[950], - 13: tw.green[700], - 12: tw.green[600], - 11: tw.green[500], - 9: tw.green[400], - 8: tw.green[300], - }, - - blue: { - 14: tw.blue[950], - 9: tw.blue[600], - 8: tw.blue[500], - 7: tw.blue[400], - 6: tw.blue[300], - 3: tw.blue[200], - 1: tw.blue[50], - }, -}; diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts index 4a1d9094c6..7c487ee146 100644 --- a/site/src/theme/light/index.ts +++ b/site/src/theme/light/index.ts @@ -1,11 +1,9 @@ -import colors from "./colors"; import experimental from "./experimental"; import monaco from "./monaco"; import muiTheme from "./mui"; export default { ...muiTheme, - colors, experimental, monaco, }; diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts index 82c8efdde2..e508dabc3c 100644 --- a/site/src/theme/light/mui.ts +++ b/site/src/theme/light/mui.ts @@ -1,17 +1,11 @@ -// eslint-disable-next-line no-restricted-imports -- We need MUI here -import { alertClasses } from "@mui/material/Alert"; -import { createTheme, type ThemeOptions } from "@mui/material/styles"; -import { - BODY_FONT_FAMILY, - borderRadius, - BUTTON_LG_HEIGHT, - BUTTON_MD_HEIGHT, - BUTTON_SM_HEIGHT, - BUTTON_XL_HEIGHT, -} from "../constants"; +/* eslint-disable @typescript-eslint/no-explicit-any +-- we need to hack around the MUI types a little */ +import { createTheme } from "@mui/material/styles"; +import { BODY_FONT_FAMILY, borderRadius } from "../constants"; +import { components } from "../mui"; import tw from "../tailwindColors"; -let muiTheme = createTheme({ +const muiTheme = createTheme({ palette: { mode: "light", primary: { @@ -79,12 +73,10 @@ let muiTheme = createTheme({ shape: { borderRadius, }, -}); - -muiTheme = createTheme(muiTheme, { components: { + ...components, MuiCssBaseline: { - styleOverrides: ` + styleOverrides: (theme) => ` html, body, #root, #storybook-root { height: 100%; } @@ -97,87 +89,37 @@ muiTheme = createTheme(muiTheme, { input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 100px ${muiTheme.palette.background.default} inset !important; + -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important; } ::placeholder { - color: ${muiTheme.palette.text.disabled}; + color: ${theme.palette.text.disabled}; } `, }, MuiAvatar: { styleOverrides: { - root: { - width: 36, - height: 36, - fontSize: 18, - - "& .MuiSvgIcon-root": { - width: "50%", - }, - }, + root: components.MuiAvatar.styleOverrides.root, colorDefault: { backgroundColor: tw.zinc[700], }, }, }, - // Button styles are based on - // https://tailwindui.com/components/application-ui/elements/buttons - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, - }, MuiButton: { - defaultProps: { - variant: "outlined", - color: "neutral", - }, + ...components.MuiButton, styleOverrides: { - root: { - textTransform: "none", - letterSpacing: "normal", - fontWeight: 500, - height: BUTTON_MD_HEIGHT, - padding: "8px 16px", - borderRadius: "6px", - fontSize: 14, - - whiteSpace: "nowrap", - ":focus-visible": { - outline: `2px solid ${muiTheme.palette.primary.main}`, - }, - - "& .MuiLoadingButton-loadingIndicator": { - width: 14, - height: 14, - }, - - "& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": { - width: "inherit !important", - height: "inherit !important", - }, - }, - sizeSmall: { - height: BUTTON_SM_HEIGHT, - }, - sizeLarge: { - height: BUTTON_LG_HEIGHT, - }, - sizeXlarge: { - height: BUTTON_XL_HEIGHT, - }, - outlined: { + ...components.MuiButton.styleOverrides, + outlined: ({ theme }) => ({ boxShadow: "0 1px 4px #0001", ":hover": { boxShadow: "0 1px 4px #0001", - border: `1px solid ${tw.zinc[500]}`, + border: `1px solid ${theme.palette.secondary.main}`, }, "&.Mui-disabled": { boxShadow: "none !important", }, - }, - outlinedNeutral: { + }), + ["outlinedNeutral" as any]: { borderColor: tw.zinc[300], "&.Mui-disabled": { @@ -198,7 +140,7 @@ muiTheme = createTheme(muiTheme, { boxShadow: "0 1px 4px #0001", }, }, - containedNeutral: { + ["containedNeutral" as any]: { backgroundColor: tw.zinc[100], border: `1px solid ${tw.zinc[200]}`, @@ -212,19 +154,6 @@ muiTheme = createTheme(muiTheme, { border: `1px solid ${tw.zinc[300]}`, }, }, - iconSizeMedium: { - "& > .MuiSvgIcon-root": { - fontSize: 14, - }, - }, - iconSizeSmall: { - "& > .MuiSvgIcon-root": { - fontSize: 13, - }, - }, - startIcon: { - marginLeft: "-2px", - }, }, }, MuiButtonGroup: { @@ -237,104 +166,6 @@ muiTheme = createTheme(muiTheme, { }, }, }, - MuiLoadingButton: { - defaultProps: { - variant: "outlined", - color: "neutral", - }, - }, - MuiTableContainer: { - styleOverrides: { - root: { - borderRadius, - border: `1px solid ${muiTheme.palette.divider}`, - }, - }, - }, - MuiTable: { - styleOverrides: { - root: ({ theme }) => ({ - borderCollapse: "unset", - border: "none", - boxShadow: `0 0 0 1px ${muiTheme.palette.background.default} inset`, - overflow: "hidden", - - "& td": { - paddingTop: 16, - paddingBottom: 16, - background: "transparent", - }, - - [theme.breakpoints.down("md")]: { - minWidth: 1000, - }, - }), - }, - }, - MuiTableCell: { - styleOverrides: { - head: { - fontSize: 14, - color: muiTheme.palette.text.secondary, - fontWeight: 600, - background: muiTheme.palette.background.paper, - }, - root: { - fontSize: 16, - background: muiTheme.palette.background.paper, - borderBottom: `1px solid ${muiTheme.palette.divider}`, - padding: "12px 8px", - // This targets the first+last td elements, and also the first+last elements - // of a TableCellLink. - "&:not(:only-child):first-of-type, &:not(:only-child):first-of-type > a": - { - paddingLeft: 32, - }, - "&:not(:only-child):last-child, &:not(:only-child):last-child > a": { - paddingRight: 32, - }, - }, - }, - }, - MuiTableRow: { - styleOverrides: { - root: { - "&:last-child .MuiTableCell-body": { - borderBottom: 0, - }, - }, - }, - }, - MuiLink: { - defaultProps: { - underline: "hover", - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - styleOverrides: { - root: { - border: `1px solid ${muiTheme.palette.divider}`, - backgroundImage: "none", - }, - }, - }, - MuiSkeleton: { - styleOverrides: { - root: { - backgroundColor: muiTheme.palette.divider, - }, - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: { - borderRadius: 999, - }, - }, - }, MuiChip: { styleOverrides: { root: { @@ -342,81 +173,11 @@ muiTheme = createTheme(muiTheme, { }, }, }, - MuiMenu: { - defaultProps: { - anchorOrigin: { - vertical: "bottom", - horizontal: "right", - }, - transformOrigin: { - vertical: "top", - horizontal: "right", - }, - }, - styleOverrides: { - paper: { - marginTop: 8, - borderRadius: 4, - padding: "4px 0", - minWidth: 160, - }, - root: { - // It should be the same as the menu padding - "& .MuiDivider-root": { - marginTop: `4px !important`, - marginBottom: `4px !important`, - }, - }, - }, - }, - MuiMenuItem: { - styleOverrides: { - root: { - gap: 12, - - "& .MuiSvgIcon-root": { - fontSize: 20, - }, - }, - }, - }, - MuiSnackbar: { - styleOverrides: { - anchorOriginBottomRight: { - bottom: `${24 + 36}px !important`, // 36 is the bottom bar height - }, - }, - }, - MuiSnackbarContent: { - styleOverrides: { - root: { - borderRadius: "4px !important", - }, - }, - }, - MuiTextField: { - defaultProps: { - InputLabelProps: { - shrink: true, - }, - }, - }, MuiInputBase: { - defaultProps: { - color: "primary", - }, + ...components.MuiInputBase, styleOverrides: { - root: { - height: BUTTON_LG_HEIGHT, - }, - sizeSmall: { - height: BUTTON_MD_HEIGHT, - fontSize: 14, - }, - multiline: { - height: "auto", - }, - colorPrimary: { + ...components.MuiInputBase.styleOverrides, + ["colorPrimary" as any]: { // Same as button "& .MuiOutlinedInput-notchedOutline": { borderColor: tw.zinc[300], @@ -429,19 +190,6 @@ muiTheme = createTheme(muiTheme, { }, }, }, - MuiFormHelperText: { - defaultProps: { - sx: { - marginLeft: 0, - marginTop: 1, - }, - }, - }, - MuiRadio: { - defaultProps: { - disableRipple: true, - }, - }, MuiCheckbox: { styleOverrides: { root: { @@ -472,7 +220,7 @@ muiTheme = createTheme(muiTheme, { }, }, MuiSwitch: { - defaultProps: { color: "primary" }, + ...components.MuiSwitch, styleOverrides: { root: { ".Mui-focusVisible .MuiSwitch-thumb": { @@ -483,84 +231,19 @@ muiTheme = createTheme(muiTheme, { }, }, }, - MuiAutocomplete: { - styleOverrides: { - root: { - // Not sure why but since the input has padding we don't need it here - "& .MuiInputBase-root": { - padding: 0, - }, - }, - }, - }, - MuiList: { - defaultProps: { - disablePadding: true, - }, - }, - MuiTabs: { - defaultProps: { - textColor: "primary", - indicatorColor: "primary", - }, - }, MuiTooltip: { styleOverrides: { - tooltip: { + tooltip: ({ theme }) => ({ lineHeight: "150%", borderRadius: 4, - background: muiTheme.palette.background.paper, - color: muiTheme.palette.secondary.contrastText, - border: `1px solid ${muiTheme.palette.divider}`, + background: theme.palette.background.paper, + color: theme.palette.secondary.contrastText, + border: `1px solid ${theme.palette.divider}`, padding: "8px 16px", boxShadow: "0 1px 4px #0001", - }, - }, - }, - MuiAlert: { - defaultProps: { - variant: "outlined", - }, - styleOverrides: { - root: ({ theme }) => ({ - background: theme.palette.background.paper, }), - action: { - paddingTop: 2, // Idk why it is not aligned as expected - }, - icon: { - fontSize: 16, - marginTop: "4px", // The size of text is 24 so (24 - 16)/2 = 4 - }, - message: ({ theme }) => ({ - color: theme.palette.text.primary, - }), - outlinedWarning: { - [`& .${alertClasses.icon}`]: { - color: muiTheme.palette.warning.light, - }, - }, - outlinedInfo: { - [`& .${alertClasses.icon}`]: { - color: muiTheme.palette.primary.light, - }, - }, - outlinedError: { - [`& .${alertClasses.icon}`]: { - color: muiTheme.palette.error.light, - }, - }, }, }, - MuiAlertTitle: { - styleOverrides: { - root: { - fontSize: "inherit", - marginBottom: 0, - }, - }, - }, - MuiIconButton: { styleOverrides: { root: { @@ -571,6 +254,6 @@ muiTheme = createTheme(muiTheme, { }, }, }, -} as ThemeOptions); +}); export default muiTheme; diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts index 899eda9782..c4c9a2db3e 100644 --- a/site/src/theme/mui.ts +++ b/site/src/theme/mui.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any -- we need to hack around the MUI types a little */ import { type ThemeOptions } from "@mui/material/styles"; -// eslint-disable-next-line no-restricted-imports -- We need MUI here +// eslint-disable-next-line no-restricted-imports -- we use the classes for customization import { alertClasses } from "@mui/material/Alert"; import { BODY_FONT_FAMILY, @@ -25,28 +25,28 @@ export type PaletteIndex = | "action" | "neutral"; -export const components: ThemeOptions["components"] = { +export const components = { MuiCssBaseline: { styleOverrides: (theme) => ` - html, body, #root, #storybook-root { - height: 100%; - } + html, body, #root, #storybook-root { + height: 100%; + } - button, input { - font-family: ${BODY_FONT_FAMILY}; - } + button, input { + font-family: ${BODY_FONT_FAMILY}; + } - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important; - } + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 100px ${theme.palette.background.default} inset !important; + } - ::placeholder { - color: ${theme.palette.text.disabled}; - } - `, + ::placeholder { + color: ${theme.palette.text.disabled}; + } + `, }, MuiAvatar: { styleOverrides: { @@ -489,4 +489,4 @@ export const components: ThemeOptions["components"] = { }, }, }, -}; +} satisfies ThemeOptions["components"];