web: Improve auth ui on web/desktop (#10218)

* web: improve auth ui

* web: fix password show/hide icons

* web: fix auth form width

* web: fix minor ui issues with back button & recovery view

packages/theme/src/emotion/theme-provider.tsx

@@ -21,13 +21,15 @@ import { ThemeProvider } from "@theme-ui/core";
 import React, { ForwardedRef, PropsWithChildren, useMemo } from "react";
 import { Box, BoxProps } from "@theme-ui/components";
 import { useTheme } from "@emotion/react";
-import { ThemeScopes } from "../theme-engine/types.js";
+import { ThemeDefinition, ThemeScopes } from "../theme-engine/types.js";
 import { Theme, ThemeFactory } from "../theme/index.js";
 import {
+  getThemeScope,
   ScopedThemeProvider,
   useThemeColors,
   useThemeEngineStore
 } from "../theme-engine/index.js";
+import { colorsToCSSVariables } from "../theme-engine/utils.js";
 
 export type EmotionThemeProviderProps = {
   scope?: keyof ThemeScopes;
@@ -90,6 +92,65 @@ function _EmotionThemeProvider(
   );
 }
 
+type FixedThemeProviderProps = {
+  scope: keyof ThemeScopes;
+  injectCssVars?: boolean;
+  theme: ThemeDefinition;
+} & Omit<BoxProps, "variant" | "ref">;
+
+function _FixedThemeProvider(
+  props: PropsWithChildren<FixedThemeProviderProps>,
+  forwardedRef: ForwardedRef<HTMLDivElement>
+) {
+  const {
+    children,
+    scope = "base",
+    injectCssVars = true,
+    theme,
+    ...restProps
+  } = props;
+
+  const themeScope = getThemeScope(scope, theme);
+  const { colors } = themeScope;
+
+  const themeProperties = useMemo(
+    () =>
+      ThemeFactory.construct({
+        scope: colors,
+        colorScheme: theme.colorScheme
+      }),
+    [colors, theme.colorScheme]
+  );
+
+  return (
+    <ThemeProvider
+      theme={{
+        ...themeProperties,
+        colors: themeProperties.colors
+      }}
+    >
+      <ScopedThemeProvider value={scope}>
+        {injectCssVars ? (
+          <Box
+            {...restProps}
+            ref={forwardedRef}
+            css={colorsToCSSVariables(themeProperties.colors)}
+          >
+            {children}
+          </Box>
+        ) : (
+          children
+        )}
+      </ScopedThemeProvider>
+    </ThemeProvider>
+  );
+}
+
+export const FixedThemeProvider = React.forwardRef<
+  HTMLDivElement,
+  FixedThemeProviderProps
+>(_FixedThemeProvider);
+
 export const EmotionThemeProvider = React.forwardRef<
   HTMLDivElement,
   EmotionThemeProviderProps

packages/theme/src/theme-engine/index.ts

@@ -69,6 +69,19 @@ export function useThemeColors(scope?: keyof ThemeScopes): ThemeScope {
   return currentTheme;
 }
 
+export function getThemeScope(
+  scope: keyof ThemeScopes,
+  theme: ThemeDefinition
+): ThemeScope {
+  const themeScope = theme.scopes[scope] || theme.scopes.base;
+  const currentTheme = {
+    colors: buildVariants(scope, theme, themeScope),
+    isDark: theme.colorScheme === "dark",
+    scope
+  };
+  return currentTheme;
+}
+
 export const useCurrentThemeScope = () => useContext(ThemeScopeContext);
 export const ScopedThemeProvider = ThemeScopeContext.Provider;
 export const THEME_COMPATIBILITY_VERSION: ThemeCompatibilityVersion = 1;