Use createStyles API to style components in the app (#31426)

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import "metabase/css/index.css";
-import { ThemeProvider } from "../frontend/src/metabase/ui";
+import { ThemeProvider } from "metabase/ui";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

babel.config.json

@@ -4,7 +4,7 @@
     "@babel/preset-env",
     [
       "@babel/preset-react",
-      { "runtime": "automatic", "importSource": "@emotion/react" }
+      { "runtime": "automatic" }
     ],
     "@babel/preset-typescript"
   ],

frontend/src/metabase/auth/components/Login/Login.styled.tsx

@@ -1,23 +0,0 @@
-import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
-export const LoginTitle = styled.div`
-  color: ${color("text-dark")};
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.5rem;
-  text-align: center;
-`;
-
-export const LoginPanel = styled.div`
-  margin-top: 2.5rem;
-`;
-
-export const ActionList = styled.div`
-  margin-top: 3.5rem;
-`;
-
-export const ActionListItem = styled.div`
-  margin-top: 2rem;
-  text-align: center;
-`;

frontend/src/metabase/auth/components/Login/Login.tsx

@@ -1,15 +1,10 @@
 import { t } from "ttag";
 import { Location } from "history";
+import { Box } from "metabase/ui";
 import { useSelector } from "metabase/lib/redux";
 import { AuthProvider } from "metabase/plugins/types";
 import { AuthLayout } from "../AuthLayout";
 import { getAuthProviders } from "../../selectors";
-import {
-  ActionList,
-  ActionListItem,
-  LoginPanel,
-  LoginTitle,
-} from "./Login.styled";
 
 interface LoginQueryString {
   redirect?: string;
@@ -31,20 +26,22 @@ export const Login = ({ params, location }: LoginProps): JSX.Element => {
 
   return (
     <AuthLayout>
-      <LoginTitle>{t`Sign in to Metabase`}</LoginTitle>
+      <Box c="text.2" fz="1.25rem" fw="bold" lh="1.5rem" ta="center">
+        {t`Sign in to Metabase`}
+      </Box>
       {selection && selection.Panel && (
-        <LoginPanel>
+        <Box mt="2.5rem">
           <selection.Panel redirectUrl={redirectUrl} />
-        </LoginPanel>
+        </Box>
       )}
       {!selection && (
-        <ActionList>
+        <Box mt="3.5rem">
           {providers.map(provider => (
-            <ActionListItem key={provider.name}>
+            <Box key={provider.name} mt="2rem" ta="center">
               <provider.Button isCard={true} redirectUrl={redirectUrl} />
-            </ActionListItem>
+            </Box>
           ))}
-        </ActionList>
+        </Box>
       )}
     </AuthLayout>
   );

frontend/src/metabase/ui/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./inputs";
+export * from "./layout";
+export * from "./theme";
+export * from "./typography";

frontend/src/metabase/ui/components/inputs/index.ts

@@ -0,0 +1 @@
+export * from "./Radio";

frontend/src/metabase/ui/components/layout/Box/index.ts

@@ -0,0 +1 @@
+export { Box } from "@mantine/core";

frontend/src/metabase/ui/components/layout/Center/index.ts

@@ -0,0 +1 @@
+export { Center } from "@mantine/core";

frontend/src/metabase/ui/components/layout/Flex/index.ts

@@ -0,0 +1 @@
+export { Flex } from "@mantine/core";

frontend/src/metabase/ui/components/layout/Grid/index.ts

@@ -0,0 +1 @@
+export { Grid } from "@mantine/core";

frontend/src/metabase/ui/components/layout/Group/index.ts

@@ -0,0 +1 @@
+export { Group } from "@mantine/core";

frontend/src/metabase/ui/components/layout/Stack/index.ts

@@ -0,0 +1 @@
+export { Stack } from "@mantine/core";

frontend/src/metabase/ui/components/layout/index.ts

@@ -0,0 +1,6 @@
+export * from "./Box";
+export * from "./Center";
+export * from "./Flex";
+export * from "./Grid";
+export * from "./Group";
+export * from "./Stack";

frontend/src/metabase/ui/components/theme/ThemeProvider/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { MantineProvider } from "@mantine/core";
-import { theme } from "metabase/ui";
+import { theme } from "../../../theme";
 
 interface ThemeProviderProps {
   children: ReactNode;

frontend/src/metabase/ui/components/theme/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export * from "./ThemeProvider";

frontend/src/metabase/ui/components/theme/index.ts

@@ -0,0 +1 @@
+export * from "./ThemeProvider";

frontend/src/metabase/ui/components/typography/Text/index.ts

@@ -0,0 +1 @@
+export { Text } from "@mantine/core";

frontend/src/metabase/ui/components/typography/index.ts

@@ -0,0 +1 @@
+export * from "./Text";

frontend/src/metabase/ui/index.ts

@@ -1,8 +1 @@
-export { ThemeProvider } from "metabase/ui/components/ThemeProvider";
-export { theme } from "metabase/ui/theme";
-
-// General helpers
-export { Group } from "@mantine/core";
-
-// Inputs
-export { Radio } from "metabase/ui/components/inputs/Radio";
+export * from "./components";

frontend/test/__support__/ui.tsx

@@ -7,10 +7,10 @@ import { Router } from "react-router";
 import { routerReducer, routerMiddleware } from "react-router-redux";
 import type { Store, Reducer } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "@emotion/react";
 import { DragDropContextProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
 import type { MatcherFunction } from "@testing-library/dom";
+import { ThemeProvider } from "metabase/ui";
 
 import type { State } from "metabase-types/store";
 
@@ -116,7 +116,7 @@ function Wrapper({
   return (
     <Provider store={store}>
       <MaybeDNDProvider hasDND={withDND}>
-        <ThemeProvider theme={{}}>
+        <ThemeProvider>
           <MaybeRouter hasRouter={withRouter} history={history}>
             {children}
           </MaybeRouter>