Expand theme system and refresh UI components

src/security/pages/LoginPage.jsx

@@ -4,13 +4,20 @@ import { getRouterPath, setRouterPath } from '../../platform/compat.js';
 import { securityService, useSecurityState } from '../runtime/security-service.js';
 import { Panel } from '../../ui/components/Panel.jsx';
 
-const LoginField = forwardRef(function LoginField({ id, label, ...props }, ref) {
+const LoginField = forwardRef(function LoginField({ id, label, error, ...props }, ref) {
   return (
     <YStack gap="$2">
-      <Label htmlFor={id} size="$3" color="$color" fontWeight="600">
+      <Label htmlFor={id} size="$3" color="$textPrimary" fontWeight="600">
         {label}
       </Label>
-      <Input ref={ref} id={id} {...props} />
+      <Input
+        ref={ref}
+        id={id}
+        backgroundColor="$bgPanel"
+        borderColor={error ? '$danger' : '$lineSubtle'}
+        focusStyle={{ borderColor: error ? '$danger' : '$accent' }}
+        {...props}
+      />
     </YStack>
   );
 });
@@ -64,8 +71,8 @@ export function LoginPage({ compact = false, title = 'Login', subtitle = 'Sign i
       icon="login"
       title={title}
       width="100%"
-      headerFront={{ color: '$accentColor' }}
-      headerBack={{ backgroundColor: '$accentSurface' }}
+      headerFront={{ color: '$textPrimary' }}
+      headerBack={{ backgroundColor: '$bgPanel' }}
     >
       <YStack
         tag="form"
@@ -73,12 +80,13 @@ export function LoginPage({ compact = false, title = 'Login', subtitle = 'Sign i
         onSubmit={handleFormSubmit}
         autoComplete="on"
       >
-        <Paragraph color="$color" opacity={0.78}>
+        <Paragraph color="$textMuted">
           {subtitle}
         </Paragraph>
         <LoginField
           id="login-identifier"
           label="Username or email"
+          error={Boolean(errorMessage)}
           placeholder="Username or email"
           value={identifier}
           onChangeText={setIdentifier}
@@ -96,6 +104,7 @@ export function LoginPage({ compact = false, title = 'Login', subtitle = 'Sign i
         <LoginField
           id="login-password"
           label="Password"
+          error={Boolean(errorMessage)}
           ref={passwordInputRef}
           placeholder="Password"
           value={password}
@@ -111,30 +120,28 @@ export function LoginPage({ compact = false, title = 'Login', subtitle = 'Sign i
           onKeyDown={handlePasswordKeyDown}
         />
         {errorMessage ? (
-          <Text color="#ef4444" fontSize="$4">
+          <Text color="$danger" fontSize="$4">
             {errorMessage}
           </Text>
         ) : null}
         <Button
-          themeInverse
-          backgroundColor="$accentColor"
-          color="white"
+          theme="accent"
           onPress={handleSubmit}
           disabled={security.loading || !security.enabled || !security.initialized}
         >
           {security.loading ? 'Signing In...' : 'Sign In'}
         </Button>
         {!security.enabled ? (
-          <Paragraph fontSize="$3" color="#8b5e3c">
+          <Paragraph fontSize="$3" color="$textSecondary">
             Identity is currently disabled in the active app profile.
           </Paragraph>
         ) : null}
         {security.enabled && !security.initialized ? (
-          <Paragraph fontSize="$3" color="#8b5e3c">
+          <Paragraph fontSize="$3" color="$textSecondary">
             Security is still initializing.
           </Paragraph>
         ) : null}
-        <Paragraph fontSize="$3" color="$color" opacity={0.65}>
+        <Paragraph fontSize="$3" color="$textMuted">
           Demo credentials: admin / admin or demo / demo
         </Paragraph>
       </YStack>
@@ -153,7 +160,7 @@ export function LoginPage({ compact = false, title = 'Login', subtitle = 'Sign i
       alignItems="center"
       justifyContent="center"
       padding="$6"
-      backgroundColor="$background"
+      backgroundColor="$bgPage"
     >
       <YStack width="100%" maxWidth={520}>
         {content}