feat(ui): establish shared design system foundations

src/app/routes/AppRoutes.test.tsx

@@ -6,9 +6,9 @@ import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 
 import { AuthProvider } from "@/features/auth";
+import { cssVariablesResolver, theme } from "@/shared/theme";
 import { createTestQueryClient } from "@/test/query";
 import { server } from "@/test/server";
-import { theme } from "../theme";
 import { AppRoutes } from "./AppRoutes";
 
 describe("AppRoutes", () => {
@@ -16,7 +16,10 @@ describe("AppRoutes", () => {
 		return render(
 			<QueryClientProvider client={createTestQueryClient()}>
 				<MemoryRouter initialEntries={[path]}>
-					<MantineProvider theme={theme}>
+					<MantineProvider
+						cssVariablesResolver={cssVariablesResolver}
+						theme={theme}
+					>
 						<AuthProvider>
 							<AppRoutes />
 						</AuthProvider>

src/app/styles.css

@@ -1,12 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-body {
-	margin: 0;
-	background: var(--mantine-color-gray-2);
-	color: var(--mantine-color-dark-7);
-}
-a {
-	color: inherit;
-	text-decoration: none;
-}

src/app/theme.ts

@@ -1,24 +0,0 @@
-import { createTheme } from "@mantine/core";
-
-const theme = createTheme({
-	primaryColor: "blue",
-	defaultRadius: "md",
-	fontFamily:
-		'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-	colors: {
-		blue: [
-			"#eff6ff",
-			"#dbeafe",
-			"#bfdbfe",
-			"#93c5fd",
-			"#60a5fa",
-			"#3b82f6",
-			"#2563eb",
-			"#1d4ed8",
-			"#1e40af",
-			"#1e3a8a",
-		],
-	},
-});
-
-export { theme };

src/app/ui/App.tsx

@@ -4,8 +4,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { FC } from "react";
 import { BrowserRouter } from "react-router";
 import { AppRoutes, RouteErrorBoundary } from "@/app/routes";
-import { theme } from "@/app/theme";
 import { AuthProvider } from "@/features/auth";
+import { cssVariablesResolver, theme } from "@/shared/theme";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -15,7 +15,11 @@ const queryClient = new QueryClient({
 
 const App: FC = () => {
 	return (
-		<MantineProvider theme={theme} forceColorScheme="light">
+		<MantineProvider
+			cssVariablesResolver={cssVariablesResolver}
+			theme={theme}
+			forceColorScheme="light"
+		>
 			<DatesProvider settings={{ locale: "ru" }}>
 				<QueryClientProvider client={queryClient}>
 					<BrowserRouter>