refactor: update ui and make it modern
This commit is contained in:
+194
-130
@@ -1,6 +1,6 @@
|
||||
import { extendTheme } from "@mui/joy/styles";
|
||||
|
||||
// I generated this theme with AI (Claude Opus 4.6)
|
||||
// Palette tokens sourced from the v0.9 design mockups (canvas/surface/ink/brand/etc.)
|
||||
|
||||
export const theme = extendTheme({
|
||||
cssVarPrefix: "joy",
|
||||
@@ -8,23 +8,23 @@ export const theme = extendTheme({
|
||||
light: {
|
||||
palette: {
|
||||
primary: {
|
||||
50: "#eef7ff",
|
||||
100: "#dcedff",
|
||||
200: "#b3d9ff",
|
||||
300: "#7fbdff",
|
||||
400: "#469cf5",
|
||||
500: "#0b6bcb",
|
||||
600: "#0958a8",
|
||||
700: "#08478a",
|
||||
800: "#0a3a6e",
|
||||
900: "#0c2f59",
|
||||
solidBg: "#0b6bcb",
|
||||
solidHoverBg: "#095aa7",
|
||||
solidActiveBg: "#08478a",
|
||||
outlinedBorder: "#7fbdff",
|
||||
outlinedColor: "#08478a",
|
||||
softBg: "#dcedff", // Color in sidebar for selected view
|
||||
softColor: "#08478a",
|
||||
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",
|
||||
@@ -39,88 +39,100 @@ export const theme = extendTheme({
|
||||
900: "#0a423f",
|
||||
solidBg: "#0d9488",
|
||||
solidHoverBg: "#0b7c73",
|
||||
outlinedBorder: "#a6f4dc",
|
||||
outlinedColor: "#0b7c73",
|
||||
softBg: "#d1faee",
|
||||
softColor: "#0a655e",
|
||||
},
|
||||
warning: {
|
||||
50: "#fffaeb",
|
||||
100: "#fef0c7",
|
||||
200: "#fedf89",
|
||||
300: "#fdc74a",
|
||||
400: "#fbaf24",
|
||||
500: "#f59e0b",
|
||||
600: "#d67e06",
|
||||
700: "#b25f08",
|
||||
800: "#8f4a0e",
|
||||
900: "#763d10",
|
||||
solidBg: "#f59e0b",
|
||||
solidHoverBg: "#d67e06",
|
||||
softBg: "#fef0c7",
|
||||
softColor: "#8f4a0e",
|
||||
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: "#fff1f2",
|
||||
100: "#ffe1e4",
|
||||
200: "#ffc7cd",
|
||||
300: "#ff9ba7",
|
||||
400: "#fb6b7d",
|
||||
500: "#e11d48",
|
||||
600: "#be123c",
|
||||
700: "#9b1038",
|
||||
800: "#7f1230",
|
||||
900: "#6a122b",
|
||||
solidBg: "#e11d48",
|
||||
solidHoverBg: "#be123c",
|
||||
softBg: "#ffe1e4",
|
||||
softColor: "#9b1038",
|
||||
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: "#f8fafc",
|
||||
100: "#f1f5f9",
|
||||
200: "#e2e8f0",
|
||||
300: "#cbd5e1",
|
||||
400: "#94a3b8",
|
||||
500: "#64748b",
|
||||
600: "#475569",
|
||||
700: "#334155",
|
||||
800: "#1e293b",
|
||||
900: "#0f172a",
|
||||
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: "#f7f9fc",
|
||||
body: "#f6f7f9",
|
||||
surface: "#ffffff",
|
||||
level1: "#f1f5f9",
|
||||
level2: "#e2e8f0",
|
||||
level3: "#cbd5e1",
|
||||
level1: "#fbfcfd",
|
||||
level2: "#f2f4f6",
|
||||
level3: "#e4e7ec",
|
||||
},
|
||||
text: {
|
||||
primary: "#0f172a",
|
||||
secondary: "#475569",
|
||||
tertiary: "#64748b",
|
||||
primary: "#10151f",
|
||||
secondary: "#4a5364",
|
||||
tertiary: "#667283",
|
||||
},
|
||||
divider: "rgba(15, 23, 42, 0.08)",
|
||||
divider: "#e4e7ec",
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
palette: {
|
||||
primary: {
|
||||
50: "#0c2f59",
|
||||
100: "#0a3a6e",
|
||||
200: "#08478a",
|
||||
300: "#0958a8",
|
||||
400: "#0b6bcb",
|
||||
500: "#3b8ce0",
|
||||
600: "#6ba9ea",
|
||||
700: "#9cc6f2",
|
||||
800: "#c7defa",
|
||||
900: "#eef7ff",
|
||||
solidBg: "#3b8ce0",
|
||||
solidHoverBg: "#6ba9ea",
|
||||
solidActiveBg: "#0958a8",
|
||||
outlinedBorder: "#0958a8",
|
||||
outlinedColor: "#9cc6f2",
|
||||
softBg: "rgba(59, 140, 224, 0.16)", // Color in sidebar for selected view
|
||||
softColor: "#9cc6f2",
|
||||
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",
|
||||
@@ -135,72 +147,85 @@ export const theme = extendTheme({
|
||||
900: "#ecfdf5",
|
||||
solidBg: "#0d9488",
|
||||
solidHoverBg: "#2dc8b1",
|
||||
outlinedBorder: "#0a655e",
|
||||
outlinedColor: "#6ee7c9",
|
||||
softBg: "rgba(13, 148, 136, 0.18)",
|
||||
softColor: "#6ee7c9",
|
||||
},
|
||||
warning: {
|
||||
50: "#763d10",
|
||||
100: "#8f4a0e",
|
||||
200: "#b25f08",
|
||||
300: "#d67e06",
|
||||
400: "#f59e0b",
|
||||
500: "#fbaf24",
|
||||
600: "#fdc74a",
|
||||
700: "#fedf89",
|
||||
800: "#fef0c7",
|
||||
900: "#fffaeb",
|
||||
solidBg: "#f59e0b",
|
||||
solidHoverBg: "#fbaf24",
|
||||
softBg: "rgba(245, 158, 11, 0.16)",
|
||||
softColor: "#fdc74a",
|
||||
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: "#6a122b",
|
||||
100: "#7f1230",
|
||||
200: "#9b1038",
|
||||
300: "#be123c",
|
||||
400: "#e11d48",
|
||||
500: "#f04463",
|
||||
600: "#fb6b7d",
|
||||
700: "#ff9ba7",
|
||||
800: "#ffc7cd",
|
||||
900: "#fff1f2",
|
||||
solidBg: "#e11d48",
|
||||
solidHoverBg: "#f04463",
|
||||
softBg: "rgba(225, 29, 72, 0.18)",
|
||||
softColor: "#fb6b7d",
|
||||
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: "#0b1220",
|
||||
100: "#0f172a",
|
||||
200: "#1e293b",
|
||||
300: "#334155",
|
||||
400: "#475569",
|
||||
500: "#64748b",
|
||||
600: "#94a3b8",
|
||||
700: "#cbd5e1",
|
||||
800: "#e2e8f0",
|
||||
900: "#f1f5f9",
|
||||
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: "#0b1220",
|
||||
surface: "#111a2e",
|
||||
level1: "#16213a",
|
||||
level2: "#1e293b",
|
||||
level3: "#334155",
|
||||
body: "#0e1116",
|
||||
surface: "#161b22",
|
||||
level1: "#1b212a",
|
||||
level2: "#20262f",
|
||||
level3: "#272e39",
|
||||
},
|
||||
text: {
|
||||
primary: "#f1f5f9",
|
||||
secondary: "#cbd5e1",
|
||||
tertiary: "#94a3b8",
|
||||
primary: "#e8ecf2",
|
||||
secondary: "#aab4c2",
|
||||
tertiary: "#8590a0",
|
||||
},
|
||||
divider: "rgba(226, 232, 240, 0.08)",
|
||||
divider: "#272e39",
|
||||
},
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
body: "'Inter', 'Segoe UI', system-ui, sans-serif",
|
||||
display: "'Inter', 'Segoe UI', system-ui, sans-serif",
|
||||
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",
|
||||
@@ -209,6 +234,45 @@ export const theme = extendTheme({
|
||||
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: {
|
||||
|
||||
Reference in New Issue
Block a user