cesnimda
567 lines
21 KiB
TypeScript
567 lines
21 KiB
TypeScript
import { alpha, createTheme, darken, lighten } from "@mui/material/styles";
|
|
|
|
type PaletteLike = Record<string, any>;
|
|
|
|
export type ContentDensity = "comfortable" | "compact";
|
|
|
|
// Existing provisional brand hue. Dark mode uses a lighter tone for readable text;
|
|
// this does not settle the Phase 3 brand/identity decision.
|
|
const ACCENT = "#5B5BD6";
|
|
const DARK_ACCENT = lighten(ACCENT, 0.45);
|
|
|
|
// The existing inverse sidebar remains inverse in both modes. These are MUI palette
|
|
// roles so feature code does not have to invent colors for this surface.
|
|
const navigation = {
|
|
background: "#0F172A", border: "rgba(255,255,255,0.08)",
|
|
text: "#E2E8F0", muted: "#94A3B8", hover: "rgba(255,255,255,0.06)",
|
|
selected: "rgba(99,102,241,0.18)", selectedText: "#FFFFFF", selectedIcon: "#A5B4FC",
|
|
};
|
|
|
|
function buildPrimary(main: string) {
|
|
return {
|
|
lighter: lighten(main, 0.82),
|
|
light: lighten(main, 0.56),
|
|
main,
|
|
dark: darken(main, 0.22),
|
|
darker: darken(main, 0.72),
|
|
};
|
|
}
|
|
|
|
function buildLightPalette(): PaletteLike {
|
|
const textPrimary = "#1B1B1F";
|
|
const textSecondary = "#46464F";
|
|
|
|
const secondaryMain = "#5A5C78";
|
|
const divider = "#EFEDF4";
|
|
const background = "#FFFFFF";
|
|
|
|
const disabled = "#777680";
|
|
const disabledBackground = "#E4E1E6";
|
|
|
|
return {
|
|
primary: { ...buildPrimary(ACCENT), contrastText: "#FFFFFF" },
|
|
contrastThreshold: 4.5,
|
|
navigation,
|
|
focus: { main: ACCENT, inverse: "#A5B4FC" },
|
|
border: { subtle: divider, default: "#777680", strong: textSecondary },
|
|
secondary: {
|
|
lighter: "#E0E0FF",
|
|
light: "#C3C4E4",
|
|
main: secondaryMain,
|
|
dark: "#43455F",
|
|
darker: "#171A31",
|
|
},
|
|
error: {
|
|
lighter: "#FFEDEA",
|
|
light: "#FFDAD6",
|
|
main: "#BA1A1A",
|
|
dark: darken("#BA1A1A", 0.16),
|
|
darker: "#690005",
|
|
},
|
|
warning: {
|
|
lighter: "#FFEEE1",
|
|
light: "#FFDCBE",
|
|
main: "#8B5000",
|
|
dark: darken("#8B5000", 0.16),
|
|
darker: "#4A2800",
|
|
},
|
|
success: {
|
|
lighter: "#DCFCE7",
|
|
light: "#BBF7D0",
|
|
main: "#15803D",
|
|
dark: darken("#15803D", 0.16),
|
|
darker: "#14532D",
|
|
},
|
|
info: {
|
|
lighter: "#D4F7FF",
|
|
light: "#A1EFFF",
|
|
main: "#006876",
|
|
dark: darken("#006876", 0.16),
|
|
darker: "#00363E",
|
|
},
|
|
grey: {
|
|
50: "#FBF8FF",
|
|
100: "#F5F2FA",
|
|
200: divider,
|
|
300: "#EAE7EF",
|
|
400: disabledBackground,
|
|
500: "#DBD9E0",
|
|
600: "#C7C5D0",
|
|
700: disabled,
|
|
800: textSecondary,
|
|
900: textPrimary,
|
|
},
|
|
text: {
|
|
primary: textPrimary,
|
|
secondary: textSecondary,
|
|
disabled,
|
|
},
|
|
divider,
|
|
// Soft grey app background with white paper gives the layered dashboard look
|
|
// from the product mockups; cards/inputs (paper) sit above it.
|
|
background: { default: "#F4F6FB", paper: background, elevated: background },
|
|
action: {
|
|
hover: alpha(ACCENT, 0.05),
|
|
selected: alpha(ACCENT, 0.12),
|
|
focus: alpha(ACCENT, 0.15),
|
|
disabled: alpha(disabled, 0.6),
|
|
disabledBackground: alpha(disabledBackground, 0.9),
|
|
},
|
|
};
|
|
}
|
|
|
|
function buildDarkPalette(): PaletteLike {
|
|
const bg = "#0B0B0E";
|
|
const paper = "#111116";
|
|
const divider = alpha("#FFFFFF", 0.10);
|
|
const textPrimary = "#EAEAF2";
|
|
const textSecondary = alpha(textPrimary, 0.72);
|
|
|
|
const secondaryMain = "#A4A6C8";
|
|
const disabled = alpha(textPrimary, 0.5);
|
|
const disabledBackground = alpha("#FFFFFF", 0.08);
|
|
|
|
return {
|
|
primary: { ...buildPrimary(DARK_ACCENT), contrastText: paper },
|
|
contrastThreshold: 4.5,
|
|
navigation,
|
|
focus: { main: DARK_ACCENT, inverse: "#A5B4FC" },
|
|
border: { subtle: divider, default: "#777680", strong: "#B8B8C6" },
|
|
secondary: {
|
|
lighter: alpha(secondaryMain, 0.22),
|
|
light: alpha(secondaryMain, 0.14),
|
|
main: secondaryMain,
|
|
dark: alpha(secondaryMain, 0.8),
|
|
darker: alpha(secondaryMain, 0.95),
|
|
},
|
|
error: {
|
|
lighter: alpha("#DE3730", 0.18),
|
|
light: alpha("#DE3730", 0.12),
|
|
main: "#FF5A52",
|
|
dark: "#FF3B33",
|
|
darker: "#FFC2BE",
|
|
},
|
|
warning: {
|
|
lighter: alpha("#AE6600", 0.18),
|
|
light: alpha("#AE6600", 0.12),
|
|
main: "#FFB14A",
|
|
dark: "#FF9A1F",
|
|
darker: "#FFE1B8",
|
|
},
|
|
success: {
|
|
lighter: alpha("#16A34A", 0.18),
|
|
light: alpha("#16A34A", 0.12),
|
|
main: "#4ADE80",
|
|
dark: "#22C55E",
|
|
darker: "#BBF7D0",
|
|
},
|
|
info: {
|
|
lighter: alpha("#008394", 0.18),
|
|
light: alpha("#008394", 0.12),
|
|
main: "#22D3EE",
|
|
dark: "#06B6D4",
|
|
darker: "#BAF3FF",
|
|
},
|
|
grey: {
|
|
50: bg,
|
|
100: "#0F0F13",
|
|
200: "#15151B",
|
|
300: "#1C1C24",
|
|
400: "#23232D",
|
|
500: "#2D2D3A",
|
|
600: "#3A3A4A",
|
|
700: "#4A4A5D",
|
|
800: "#B8B8C6",
|
|
900: textPrimary,
|
|
},
|
|
text: {
|
|
primary: textPrimary,
|
|
secondary: textSecondary,
|
|
disabled,
|
|
},
|
|
divider,
|
|
background: { default: bg, paper, elevated: "#1C1C24" },
|
|
action: {
|
|
hover: alpha(DARK_ACCENT, 0.10),
|
|
selected: alpha(DARK_ACCENT, 0.18),
|
|
focus: alpha(DARK_ACCENT, 0.20),
|
|
disabled: alpha("#FFFFFF", 0.5),
|
|
disabledBackground,
|
|
},
|
|
};
|
|
}
|
|
|
|
function buildCustomShadows(palette: any) {
|
|
const shadowColor = palette.text.primary;
|
|
const primaryColor = palette.primary.main;
|
|
return {
|
|
button: `0px 0.711px 1.422px 0px ${alpha(shadowColor, 0.05)}`,
|
|
// Mockup cards float on the grey page background with no visible border, just a soft,
|
|
// fairly generous shadow (dashboard stat tiles, pipeline columns' cards, job-workspace
|
|
// panels) -- the old 1px "section" shadow read as flat/bordered rather than elevated.
|
|
section: `0px 1px 2px 0px ${alpha(shadowColor, 0.04)}, 0px 8px 24px -12px ${alpha(shadowColor, 0.12)}`,
|
|
tooltip: `0px 12px 16px -4px ${alpha(shadowColor, 0.08)}, 0px 4px 6px -2px ${alpha(shadowColor, 0.03)}`,
|
|
focus: `0px 0px 0px 3px ${palette.focus.main}`,
|
|
// Gradient CTA (mockup's "Tailor my CV" / "See the interface tour" buttons) gets its own
|
|
// colored glow instead of the flat neutral button shadow.
|
|
gradientButton: `0px 4px 14px -4px ${alpha(primaryColor, 0.45)}`,
|
|
};
|
|
}
|
|
|
|
// Mockup's signature AI/primary-action gradient (dashboard "Tailor my CV", landing "See the
|
|
// interface tour"). Exported so every gradient CTA across the app stays pixel-identical
|
|
// instead of each screen inventing its own two-color mix -- consumed via <GradientButton>
|
|
// (src/components/GradientButton.tsx), not applied as a MUI Button variant (MUI's variant
|
|
// override machinery needs TS module augmentation for a genuinely new variant name; a plain
|
|
// wrapper component is far less code for the same result).
|
|
export const GRADIENT_CTA = "linear-gradient(90deg, #6366F1 0%, #22D3EE 100%)";
|
|
|
|
function buildTypography() {
|
|
return {
|
|
fontFamily: "'Archivo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
|
|
letterSpacing: 0,
|
|
// Opt-in application hierarchy; legacy page/marketing variants stay unchanged.
|
|
pageTitle: { fontWeight: 700, fontSize: "1.5rem", lineHeight: 1.25, letterSpacing: "-0.01em", "@media (min-width: 768px)": { fontSize: "1.75rem", lineHeight: 34 / 28 } },
|
|
sectionTitle: { fontWeight: 600, fontSize: "1.125rem", lineHeight: 24 / 18 },
|
|
pageDescription: { fontWeight: 400, fontSize: "0.875rem", lineHeight: 20 / 14 },
|
|
// Mockup headings (F:\Pictures\website\jobtracker\new) are bold/black-weight display
|
|
// type ("Dashboard", "One workspace for the whole search") -- 500 across the board read
|
|
// as noticeably lighter/flatter than that reference. h1-h4 (page titles, hero, section
|
|
// headers) go heavy; h5/h6 (card titles, in-context labels) stay a lighter semibold so
|
|
// dense screens don't turn into a wall of black text.
|
|
h1: { fontWeight: 800, fontSize: 36, lineHeight: "40px", letterSpacing: "-0.02em" },
|
|
h2: { fontWeight: 800, fontSize: 30, lineHeight: "34px", letterSpacing: "-0.02em" },
|
|
h3: { fontWeight: 800, fontSize: 26, lineHeight: "30px", letterSpacing: "-0.01em" },
|
|
h4: { fontWeight: 700, fontSize: 22, lineHeight: "26px", letterSpacing: "-0.01em" },
|
|
h5: { fontWeight: 700, fontSize: 18, lineHeight: "22px" },
|
|
h6: { fontWeight: 600, fontSize: 16, lineHeight: "20px" },
|
|
subtitle1: { fontWeight: 600, fontSize: 14, lineHeight: "18px" },
|
|
subtitle2: { fontWeight: 600, fontSize: 13, lineHeight: "17px" },
|
|
body1: { fontWeight: 400, fontSize: 14, lineHeight: "18px" },
|
|
body2: { fontWeight: 400, fontSize: 13, lineHeight: "17px" },
|
|
caption: { fontWeight: 400, fontSize: 12, lineHeight: "16px", letterSpacing: 0 },
|
|
overline: { fontWeight: 700, fontSize: 11, lineHeight: "14px", letterSpacing: "0.08em", textTransform: "uppercase" as const },
|
|
caption1: { fontWeight: 500, fontSize: 12, lineHeight: "16px", letterSpacing: 0 },
|
|
button: { textTransform: "capitalize" as const, fontWeight: 600 },
|
|
};
|
|
}
|
|
|
|
export const getTheme = (_mode: "light" | "dark") => {
|
|
void _mode;
|
|
const lightPalette = buildLightPalette();
|
|
const darkPalette = buildDarkPalette();
|
|
|
|
const theme = createTheme({
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0,
|
|
sm: 768,
|
|
md: 1024,
|
|
lg: 1266,
|
|
xl: 1440,
|
|
},
|
|
},
|
|
cssVariables: {
|
|
cssVarPrefix: "",
|
|
colorSchemeSelector: "data-color-scheme",
|
|
},
|
|
colorSchemes: {
|
|
light: { palette: lightPalette, customShadows: buildCustomShadows(lightPalette) },
|
|
dark: { palette: darkPalette, customShadows: buildCustomShadows(darkPalette) },
|
|
},
|
|
// Mockup radius reads noticeably rounder than the previous 10/8px defaults across cards,
|
|
// stat tiles, kanban cards and buttons.
|
|
shape: { borderRadius: 14 },
|
|
typography: buildTypography() as any,
|
|
} as any) as any;
|
|
|
|
// ButtonBase covers buttons/icons/tabs/menu items/interactive cards. Native links
|
|
// need the same rule. An outline survives forced colors and adds a shape, not
|
|
// just a color change. Inset variants stay visible inside scrolling tab/menu lists.
|
|
const focusRing = {
|
|
outline: `3px solid var(--app-focus-color, ${theme.vars.palette.focus.main})`,
|
|
outlineOffset: "2px",
|
|
};
|
|
theme.components = {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
":root": {
|
|
"--app-page-gutter": "16px",
|
|
"--app-section-gap": "24px",
|
|
"--app-card-padding": "16px",
|
|
"--app-page-width-reading": "60rem",
|
|
"--app-page-width-data": "82.5rem",
|
|
"--app-page-width-editor": "100%",
|
|
},
|
|
"@media (min-width: 768px)": {
|
|
":root": {
|
|
"--app-page-gutter": "24px",
|
|
"--app-card-padding": "20px",
|
|
},
|
|
},
|
|
"@media (min-width: 1440px)": {
|
|
":root": { "--app-page-gutter": "32px" },
|
|
},
|
|
// Opt-in MUI table/list spacing. Unmigrated consumers keep their defaults.
|
|
"[data-content-density]": {
|
|
"--app-table-cell-py": "12px",
|
|
"--app-list-item-padding": "16px",
|
|
"--app-list-gap": "12px",
|
|
"--app-data-target": "32px",
|
|
},
|
|
'[data-content-density="compact"]': {
|
|
"--app-table-cell-py": "8px",
|
|
"--app-list-item-padding": "12px",
|
|
"--app-list-gap": "8px",
|
|
},
|
|
// Density never shrinks hit regions. Coarse pointers and phone cards get
|
|
// 44px targets in either mode; desktop controls keep at least 32px.
|
|
"@media (pointer: coarse), (max-width: 767.95px)": {
|
|
"[data-content-density]": { "--app-data-target": "44px" },
|
|
},
|
|
"[data-content-density] .MuiIconButton-root, [data-content-density] .MuiCheckbox-root": {
|
|
minWidth: "var(--app-data-target)", minHeight: "var(--app-data-target)",
|
|
},
|
|
"[data-content-density] .MuiTableSortLabel-root, [data-content-density] .MuiChip-clickable, [data-content-density] .MuiButton-root, [data-content-density] a": {
|
|
minHeight: "var(--app-data-target)",
|
|
},
|
|
"[data-content-density] a": { display: "inline-flex", alignItems: "center" },
|
|
"[data-content-density] .MuiTableCell-paddingCheckbox": { width: "auto" },
|
|
body: {
|
|
WebkitFontSmoothing: "antialiased",
|
|
MozOsxFontSmoothing: "grayscale",
|
|
overflowX: "hidden",
|
|
},
|
|
"a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:not(.MuiInputBase-input):focus-visible, textarea:not(.MuiInputBase-input):focus-visible, select:focus-visible": focusRing,
|
|
// A global floor under every animation added this session (card hover-lift,
|
|
// MUI's own Dialog/Menu/Collapse transitions, ripple) -- users who set this OS/
|
|
// browser preference get near-instant, non-animated interactions everywhere at
|
|
// once, rather than each component needing its own reduced-motion check.
|
|
"@media (prefers-reduced-motion: reduce)": {
|
|
"*, *::before, *::after": {
|
|
animationDuration: "0.01ms !important",
|
|
animationIterationCount: "1 !important",
|
|
transitionDuration: "0.01ms !important",
|
|
scrollBehavior: "auto !important",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiButtonBase: {
|
|
styleOverrides: { root: { "&.Mui-focusVisible": focusRing } },
|
|
},
|
|
MuiLink: {
|
|
styleOverrides: { root: { "&:focus-visible": focusRing } },
|
|
},
|
|
MuiTab: {
|
|
styleOverrides: { root: { "&.Mui-focusVisible": { ...focusRing, outlineOffset: "-3px" } } },
|
|
},
|
|
MuiMenuItem: {
|
|
styleOverrides: { root: { "&.Mui-focusVisible": { ...focusRing, outlineOffset: "-3px" } } },
|
|
},
|
|
MuiCardActionArea: {
|
|
styleOverrides: { root: { "&.Mui-focusVisible": { ...focusRing, outlineOffset: "-3px" } } },
|
|
},
|
|
MuiPaper: {
|
|
defaultProps: { elevation: 0 },
|
|
styleOverrides: {
|
|
root: ({ theme }: any) => ({
|
|
border: `1px solid ${theme.vars.palette.divider}`,
|
|
boxShadow: "none",
|
|
backgroundImage: "none",
|
|
}),
|
|
},
|
|
},
|
|
MuiCard: {
|
|
defaultProps: { elevation: 0 },
|
|
styleOverrides: {
|
|
root: ({ theme }: any) => ({
|
|
// No border -- mockup cards float on the grey page background purely via shadow.
|
|
border: "none",
|
|
borderRadius: 16,
|
|
backgroundImage: "none",
|
|
boxShadow: theme.vars.customShadows.section,
|
|
}),
|
|
},
|
|
},
|
|
// Every Dialog/Modal renders its content via MuiPaper, which is deliberately flat
|
|
// (border, no shadow -- see MuiPaper above, kept minimal since it's used too broadly
|
|
// to safely restyle globally). A dialog is inherently a floating overlay though, so it
|
|
// should never be flat -- this override wins on specificity without touching MuiPaper's
|
|
// own defaults, giving every modal in the app (confirm/prompt, AddJobModal,
|
|
// EditJobDialog, JobDetailsDialog, etc.) the same rounded floating-shadow treatment in
|
|
// one place instead of patching each dialog's own sx individually.
|
|
MuiDialog: {
|
|
styleOverrides: {
|
|
paper: ({ theme }: any) => ({
|
|
backgroundColor: theme.vars.palette.background.elevated,
|
|
border: "none",
|
|
borderRadius: 20,
|
|
boxShadow: theme.vars.customShadows.tooltip,
|
|
}),
|
|
},
|
|
},
|
|
MuiAlert: {
|
|
styleOverrides: {
|
|
root: {
|
|
alignItems: "flex-start",
|
|
},
|
|
standardError: ({ theme }: any) => ({ backgroundColor: theme.vars.palette.error.lighter, color: theme.vars.palette.error.darker, "& .MuiAlert-icon": { color: theme.vars.palette.error.main } }),
|
|
standardWarning: ({ theme }: any) => ({ backgroundColor: theme.vars.palette.warning.lighter, color: theme.vars.palette.warning.darker, "& .MuiAlert-icon": { color: theme.vars.palette.warning.main } }),
|
|
standardInfo: ({ theme }: any) => ({ backgroundColor: theme.vars.palette.info.lighter, color: theme.vars.palette.info.darker, "& .MuiAlert-icon": { color: theme.vars.palette.info.main } }),
|
|
standardSuccess: ({ theme }: any) => ({ backgroundColor: theme.vars.palette.success.lighter, color: theme.vars.palette.success.darker, "& .MuiAlert-icon": { color: theme.vars.palette.success.main } }),
|
|
outlinedError: ({ theme }: any) => ({ borderColor: theme.vars.palette.error.main, color: theme.vars.palette.error.darker, "& .MuiAlert-icon": { color: theme.vars.palette.error.main } }),
|
|
outlinedWarning: ({ theme }: any) => ({ borderColor: theme.vars.palette.warning.main, color: theme.vars.palette.warning.darker, "& .MuiAlert-icon": { color: theme.vars.palette.warning.main } }),
|
|
outlinedInfo: ({ theme }: any) => ({ borderColor: theme.vars.palette.info.main, color: theme.vars.palette.info.darker, "& .MuiAlert-icon": { color: theme.vars.palette.info.main } }),
|
|
outlinedSuccess: ({ theme }: any) => ({ borderColor: theme.vars.palette.success.main, color: theme.vars.palette.success.darker, "& .MuiAlert-icon": { color: theme.vars.palette.success.main } }),
|
|
},
|
|
},
|
|
MuiPopover: {
|
|
styleOverrides: {
|
|
paper: ({ theme }: any) => ({
|
|
backgroundColor: theme.vars.palette.background.elevated,
|
|
border: "none",
|
|
boxShadow: theme.vars.customShadows.tooltip,
|
|
}),
|
|
},
|
|
},
|
|
MuiMenu: {
|
|
styleOverrides: {
|
|
paper: ({ theme }: any) => ({
|
|
border: "none",
|
|
borderRadius: 12,
|
|
boxShadow: theme.vars.customShadows.tooltip,
|
|
}),
|
|
},
|
|
},
|
|
MuiButton: {
|
|
defaultProps: { disableFocusRipple: true },
|
|
styleOverrides: {
|
|
root: ({ theme }: any) => ({
|
|
borderRadius: 10,
|
|
boxShadow: theme.vars.customShadows.button,
|
|
"&:hover": { boxShadow: theme.vars.customShadows.button },
|
|
}),
|
|
},
|
|
},
|
|
MuiTextField: {
|
|
defaultProps: {
|
|
size: "small",
|
|
variant: "outlined",
|
|
},
|
|
},
|
|
MuiOutlinedInput: {
|
|
defaultProps: { size: "small" },
|
|
styleOverrides: {
|
|
root: ({ theme }: any) => ({
|
|
borderRadius: 8,
|
|
boxShadow: theme.vars.customShadows.button,
|
|
background: theme.vars.palette.background.default,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
minHeight: 42,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
// Use the existing label notch: an outer outline crosses floating labels.
|
|
"&:has(input:focus-visible, textarea:focus-visible, [role=combobox]:focus-visible)": {
|
|
outline: "none",
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderWidth: "3px",
|
|
borderColor: `var(--app-focus-color, ${theme.vars.palette.focus.main})`,
|
|
},
|
|
},
|
|
"&.Mui-disabled": {
|
|
cursor: "not-allowed",
|
|
input: { cursor: "not-allowed" },
|
|
"& .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.divider },
|
|
},
|
|
}),
|
|
notchedOutline: ({ theme }: any) => ({ borderColor: theme.vars.palette.border.default }),
|
|
multiline: {
|
|
padding: 10,
|
|
alignItems: "flex-start",
|
|
minHeight: "unset",
|
|
},
|
|
input: {
|
|
paddingLeft: 0,
|
|
paddingRight: 0,
|
|
paddingTop: 9,
|
|
paddingBottom: 9,
|
|
lineHeight: 1.45,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
},
|
|
inputMultiline: {
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
lineHeight: 1.5,
|
|
},
|
|
},
|
|
},
|
|
MuiInputBase: {
|
|
styleOverrides: {
|
|
root: {
|
|
"&:has(input:focus-visible, textarea:focus-visible, [role=combobox]:focus-visible)": focusRing,
|
|
"& input:focus-visible, & textarea:focus-visible, & [role=combobox]:focus-visible": { outline: "none" },
|
|
},
|
|
input: {
|
|
"&::placeholder": {
|
|
opacity: 0.72,
|
|
},
|
|
},
|
|
inputMultiline: {
|
|
"&::placeholder": {
|
|
opacity: 0.72,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
MuiTooltip: {
|
|
styleOverrides: {
|
|
tooltip: ({ theme }: any) => ({
|
|
backgroundColor: theme.vars.palette.text.primary,
|
|
color: theme.vars.palette.background.paper,
|
|
borderRadius: 8,
|
|
fontWeight: 600,
|
|
fontSize: 12,
|
|
}),
|
|
arrow: ({ theme }: any) => ({ color: theme.vars.palette.text.primary }),
|
|
},
|
|
},
|
|
MuiChip: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 999,
|
|
fontWeight: 600,
|
|
},
|
|
},
|
|
},
|
|
MuiListItemButton: {
|
|
styleOverrides: {
|
|
root: ({ theme }: any) => ({
|
|
borderRadius: 8,
|
|
"&.Mui-focusVisible": { ...focusRing, outlineOffset: "-3px" },
|
|
"&.Mui-selected": {
|
|
backgroundColor: theme.vars.palette.action.selected,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
MuiTableCell: {
|
|
styleOverrides: {
|
|
head: ({ theme }: any) => ({
|
|
fontWeight: 600,
|
|
color: theme.vars.palette.text.primary,
|
|
background: theme.vars.palette.grey[100],
|
|
}),
|
|
root: {
|
|
paddingTop: "var(--app-table-cell-py, 10px)",
|
|
paddingBottom: "var(--app-table-cell-py, 10px)",
|
|
},
|
|
},
|
|
},
|
|
} as any;
|
|
|
|
return theme;
|
|
};
|