330 lines
8.3 KiB
TypeScript
330 lines
8.3 KiB
TypeScript
import { extendTheme } from "@mui/joy/styles";
|
|
|
|
// Palette tokens sourced from the v0.9 design mockups (canvas/surface/ink/brand/etc.)
|
|
|
|
export const theme = extendTheme({
|
|
cssVarPrefix: "joy",
|
|
colorSchemes: {
|
|
light: {
|
|
palette: {
|
|
primary: {
|
|
50: "#eef3fe",
|
|
100: "#dbe6fc",
|
|
200: "#b0c8f8",
|
|
300: "#7fa3f0",
|
|
400: "#4c7de0",
|
|
500: "#2159c9",
|
|
600: "#1c48a3",
|
|
700: "#163a82",
|
|
800: "#122e68",
|
|
900: "#0e2453",
|
|
solidBg: "#2159c9",
|
|
solidHoverBg: "#1c48a3",
|
|
solidActiveBg: "#163a82",
|
|
outlinedBorder: "#7fa3f0",
|
|
outlinedColor: "#163a82",
|
|
softBg: "#eef3fe", // Color in sidebar for selected view
|
|
softColor: "#163a82",
|
|
},
|
|
success: {
|
|
50: "#ecfdf5",
|
|
100: "#d1faee",
|
|
200: "#a6f4dc",
|
|
300: "#6ee7c9",
|
|
400: "#34d0ac",
|
|
500: "#0d9488",
|
|
600: "#0b7c73",
|
|
700: "#0a655e",
|
|
800: "#0b514c",
|
|
900: "#0a423f",
|
|
solidBg: "#0d9488",
|
|
solidHoverBg: "#0b7c73",
|
|
outlinedBorder: "#a6f4dc",
|
|
outlinedColor: "#0b7c73",
|
|
softBg: "#d1faee",
|
|
softColor: "#0a655e",
|
|
},
|
|
warning: {
|
|
50: "#fdf1e0",
|
|
100: "#fbe3c1",
|
|
200: "#f6c98a",
|
|
300: "#eeab54",
|
|
400: "#e2932c",
|
|
500: "#d98014",
|
|
600: "#b46810",
|
|
700: "#92530f",
|
|
800: "#734111",
|
|
900: "#5c350f",
|
|
solidBg: "#d98014",
|
|
solidHoverBg: "#b46810",
|
|
outlinedBorder: "#f6c98a",
|
|
outlinedColor: "#b46810",
|
|
softBg: "#fdf1e0",
|
|
softColor: "#734111",
|
|
},
|
|
danger: {
|
|
50: "#fbeae9",
|
|
100: "#f6d2cf",
|
|
200: "#eaa39c",
|
|
300: "#dc746a",
|
|
400: "#cd4f42",
|
|
500: "#c4342c",
|
|
600: "#a32a24",
|
|
700: "#84221f",
|
|
800: "#691c1b",
|
|
900: "#551818",
|
|
solidBg: "#c4342c",
|
|
solidHoverBg: "#a32a24",
|
|
outlinedBorder: "#eaa39c",
|
|
outlinedColor: "#a32a24",
|
|
softBg: "#fbeae9",
|
|
softColor: "#84221f",
|
|
},
|
|
neutral: {
|
|
50: "#f6f7f9",
|
|
100: "#f2f4f6",
|
|
200: "#e4e7ec",
|
|
300: "#dfe3e8",
|
|
400: "#7b8494",
|
|
500: "#667283",
|
|
600: "#4a5364",
|
|
700: "#39414f",
|
|
800: "#232833",
|
|
900: "#10151f",
|
|
plainColor: "#4a5364",
|
|
outlinedColor: "#4a5364",
|
|
outlinedBorder: "#e4e7ec",
|
|
outlinedHoverBg: "#fbfcfd",
|
|
softColor: "#4a5364",
|
|
softBg: "#f2f4f6",
|
|
},
|
|
background: {
|
|
body: "#f6f7f9",
|
|
surface: "#ffffff",
|
|
level1: "#fbfcfd",
|
|
level2: "#f2f4f6",
|
|
level3: "#e4e7ec",
|
|
},
|
|
text: {
|
|
primary: "#10151f",
|
|
secondary: "#4a5364",
|
|
tertiary: "#667283",
|
|
},
|
|
divider: "#e4e7ec",
|
|
},
|
|
},
|
|
dark: {
|
|
palette: {
|
|
primary: {
|
|
50: "#0e2453",
|
|
100: "#122e68",
|
|
200: "#163a82",
|
|
300: "#1c48a3",
|
|
400: "#2159c9",
|
|
500: "#5b8def",
|
|
600: "#82a8f2",
|
|
700: "#a9c3f6",
|
|
800: "#cddcfa",
|
|
900: "#eef3fe",
|
|
solidBg: "#5b8def",
|
|
solidHoverBg: "#82a8f2",
|
|
solidActiveBg: "#1c48a3",
|
|
outlinedBorder: "#1c48a3",
|
|
outlinedColor: "#a9c3f6",
|
|
softBg: "#16233d", // Color in sidebar for selected view
|
|
softColor: "#a9c3f6",
|
|
},
|
|
success: {
|
|
50: "#0a423f",
|
|
100: "#0b514c",
|
|
200: "#0a655e",
|
|
300: "#0b7c73",
|
|
400: "#0d9488",
|
|
500: "#2dc8b1",
|
|
600: "#6ee7c9",
|
|
700: "#a6f4dc",
|
|
800: "#d1faee",
|
|
900: "#ecfdf5",
|
|
solidBg: "#0d9488",
|
|
solidHoverBg: "#2dc8b1",
|
|
outlinedBorder: "#0a655e",
|
|
outlinedColor: "#6ee7c9",
|
|
softBg: "rgba(13, 148, 136, 0.18)",
|
|
softColor: "#6ee7c9",
|
|
},
|
|
warning: {
|
|
50: "#5c350f",
|
|
100: "#734111",
|
|
200: "#92530f",
|
|
300: "#b46810",
|
|
400: "#d98014",
|
|
500: "#e3a054",
|
|
600: "#edbb82",
|
|
700: "#f4d3ac",
|
|
800: "#f9e6d3",
|
|
900: "#fdf1e0",
|
|
solidBg: "#e3a054",
|
|
solidHoverBg: "#edbb82",
|
|
outlinedBorder: "#92530f",
|
|
outlinedColor: "#edbb82",
|
|
softBg: "rgba(227, 160, 84, 0.16)",
|
|
softColor: "#f4d3ac",
|
|
},
|
|
danger: {
|
|
50: "#551818",
|
|
100: "#691c1b",
|
|
200: "#84221f",
|
|
300: "#a32a24",
|
|
400: "#c4342c",
|
|
500: "#f07168",
|
|
600: "#f4948d",
|
|
700: "#f8b7b2",
|
|
800: "#fbd6d3",
|
|
900: "#fdeceb",
|
|
solidBg: "#f07168",
|
|
solidHoverBg: "#f4948d",
|
|
outlinedBorder: "#84221f",
|
|
outlinedColor: "#f4948d",
|
|
softBg: "rgba(240, 113, 104, 0.16)",
|
|
softColor: "#f8b7b2",
|
|
},
|
|
neutral: {
|
|
50: "#0e1116",
|
|
100: "#161b22",
|
|
200: "#1b212a",
|
|
300: "#20262f",
|
|
400: "#272e39",
|
|
500: "#8590a0",
|
|
600: "#aab4c2",
|
|
700: "#c7cfd9",
|
|
800: "#e8ecf2",
|
|
900: "#f6f8fa",
|
|
plainColor: "#aab4c2",
|
|
outlinedColor: "#aab4c2",
|
|
outlinedBorder: "#272e39",
|
|
outlinedHoverBg: "#1b212a",
|
|
softColor: "#aab4c2",
|
|
softBg: "#20262f",
|
|
},
|
|
background: {
|
|
body: "#0e1116",
|
|
surface: "#161b22",
|
|
level1: "#1b212a",
|
|
level2: "#20262f",
|
|
level3: "#272e39",
|
|
},
|
|
text: {
|
|
primary: "#e8ecf2",
|
|
secondary: "#aab4c2",
|
|
tertiary: "#8590a0",
|
|
},
|
|
divider: "#272e39",
|
|
},
|
|
},
|
|
},
|
|
fontFamily: {
|
|
body: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
|
|
display: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
|
|
code: "'IBM Plex Mono', ui-monospace, monospace",
|
|
},
|
|
radius: {
|
|
xs: "6px",
|
|
sm: "10px",
|
|
md: "14px",
|
|
lg: "20px",
|
|
xl: "28px",
|
|
},
|
|
typography: {
|
|
h1: {
|
|
fontSize: "30px",
|
|
fontWeight: 700,
|
|
letterSpacing: "-0.03em",
|
|
lineHeight: 1.2,
|
|
},
|
|
h2: {
|
|
fontSize: "22px",
|
|
fontWeight: 700,
|
|
letterSpacing: "-0.02em",
|
|
lineHeight: 1.25,
|
|
},
|
|
"title-lg": {
|
|
fontSize: "15px",
|
|
fontWeight: 600,
|
|
lineHeight: 1.4,
|
|
},
|
|
"title-md": {
|
|
fontSize: "13px",
|
|
fontWeight: 600,
|
|
lineHeight: 1.4,
|
|
},
|
|
"body-lg": {
|
|
fontSize: "13.5px",
|
|
fontWeight: 400,
|
|
lineHeight: 1.5,
|
|
},
|
|
"body-md": {
|
|
fontSize: "13.5px",
|
|
fontWeight: 400,
|
|
lineHeight: 1.5,
|
|
},
|
|
"body-sm": {
|
|
fontSize: "11.5px",
|
|
fontWeight: 600,
|
|
lineHeight: 1.4,
|
|
},
|
|
},
|
|
components: {
|
|
JoyInput: {
|
|
styleOverrides: {
|
|
input: ({ theme }) => ({
|
|
color: theme.vars.palette.text.primary,
|
|
"&::placeholder": {
|
|
color: theme.vars.palette.text.tertiary,
|
|
opacity: 1,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
JoySelect: {
|
|
styleOverrides: {
|
|
button: ({ theme }) => ({
|
|
color: theme.vars.palette.text.primary,
|
|
}),
|
|
listbox: ({ theme }) => ({
|
|
color: theme.vars.palette.text.primary,
|
|
backgroundColor: theme.vars.palette.background.surface,
|
|
}),
|
|
},
|
|
},
|
|
JoySheet: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
backgroundColor: theme.vars.palette.background.surface,
|
|
borderColor: theme.vars.palette.divider,
|
|
}),
|
|
},
|
|
},
|
|
JoyOption: {
|
|
styleOverrides: {
|
|
root: ({ theme }) => ({
|
|
color: theme.vars.palette.text.primary,
|
|
backgroundColor: theme.vars.palette.background.surface,
|
|
"&:hover": {
|
|
backgroundColor: theme.vars.palette.background.level1,
|
|
},
|
|
'&[aria-selected="true"]': {
|
|
backgroundColor: theme.vars.palette.background.level2,
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
JoyButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
transition: "all 0.15s ease",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|