mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
chore: clean up light theme code (#11319)
This commit is contained in:
Kayla Washburn
@@ -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],
|
||||
},
|
||||
};
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
+27
-344
@@ -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;
|
||||
|
||||
+19
-19
@@ -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"];
|
||||
|
||||
Reference in New Issue
Block a user