Add docs for Android components

docs/_partials/views/clerk-theme-colors-property.mdx

@@ -0,0 +1,104 @@
+<Properties>
+  - `primary`
+  - `Color`
+
+  The primary color used throughout the views.
+
+  ---
+
+  - `background`
+  - `Color`
+
+  The background color for containers.
+
+  ---
+
+  - `input`
+  - `Color`
+
+  The background color used for input fields.
+
+  ---
+
+  - `danger`
+  - `Color`
+
+  The color used for error states.
+
+  ---
+
+  - `success`
+  - `Color`
+
+  The color used for success states.
+
+  ---
+
+  - `warning`
+  - `Color`
+
+  The color used for warning states.
+
+  ---
+
+  - `foreground`
+  - `Color`
+
+  The color used for text.
+
+  ---
+
+  - `mutedForeground`
+  - `Color`
+
+  The color used for secondary text.
+
+  ---
+
+  - `primaryForeground`
+  - `Color`
+
+  The color used for text on the primary background.
+
+  ---
+
+  - `inputForeground`
+  - `Color`
+
+  The color used for text in input fields.
+
+  ---
+
+  - `neutral`
+  - `Color`
+
+  The color that will be used to generate the neutral shades the views use.
+
+  ---
+
+  - `ring`
+  - `Color`
+
+  The color of the ring when an interactive element is focused.
+
+  ---
+
+  - `muted`
+  - `Color`
+
+  The color used for muted backgrounds.
+
+  ---
+
+  - `shadow`
+  - `Color`
+
+  The base shadow color used in the views.
+
+  ---
+
+  - `border`
+  - `Color`
+
+  The base border color used in the views.
+</Properties>

docs/_partials/ios/customization.mdx → docs/_partials/views/customization.mdx

@@ -1,3 +1,3 @@
-To learn how to customize Clerk iOS views, see the [dedicated guide](/docs/guides/customizing-clerk/clerk-theme).
+To learn how to customize Clerk views, see the [dedicated guide](/docs/guides/customizing-clerk/clerk-theme).
 
 If Clerk's prebuilt views don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview).

docs/guides/customizing-clerk/appearance-prop/captcha.mdx

@@ -1,7 +1,7 @@
 ---
 title: '`captcha` prop'
 description: Utilize Clerk's `captcha` prop in order to change the appearance of the CAPTCHA widget.
-sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby, android
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby
 ---
 
 {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */}

docs/guides/customizing-clerk/appearance-prop/layout.mdx

@@ -1,7 +1,7 @@
 ---
 title: '`Layout` prop'
 description: Utilize Clerk's layout prop in order to change the layout of the <SignIn /> and <SignUp /> components, as well as set important links to your support, terms and privacy pages.
-sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby, android
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby
 ---
 
 {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L538 */}

docs/guides/customizing-clerk/appearance-prop/overview.mdx

@@ -1,7 +1,7 @@
 ---
 title: '`Appearance` prop'
 description: Utilize Clerk's appearance property in order to share styles across every component or individually to any of the Clerk components.
-sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby, android
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby
 ---
 
 {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L619 */}

docs/guides/customizing-clerk/appearance-prop/themes.mdx

@@ -1,7 +1,7 @@
 ---
 title: Themes
 description: Clerk currently offers six prebuilt themes for you to customize the overall appearance of your Clerk app.
-sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby, android
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby
 ---
 
 Clerk currently offers [six prebuilt themes](#available-themes) for you to customize the overall appearance of your Clerk application.

docs/guides/customizing-clerk/appearance-prop/variables.mdx

@@ -1,7 +1,7 @@
 ---
 title: '`Variables` prop'
 description: Utilize Clerk's variables property in order to adjust the general styles of the component's base theme, like colors, backgrounds, typography.
-sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby, android
+sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend, fastify, expressjs, js-backend, go, ruby
 ---
 
 {/* JS file: https://github.com/clerk/javascript/blob/main/packages/types/src/appearance.ts#L399 */}

docs/guides/customizing-clerk/clerk-theme.android.mdx

@@ -0,0 +1,179 @@
+---
+title: '`ClerkTheme`'
+description: Utilize Clerk's ClerkTheme to adjust the general styles of the Android views, like colors, fonts, and design properties.
+sdk: android
+---
+
+The `ClerkTheme` is used to customize the appearance of Clerk Android views by adjusting colors, fonts, and design properties. It provides a comprehensive theming system that allows you to create a consistent visual experience across all Clerk views.
+
+## Structure
+
+`ClerkTheme` consists of five main properties:
+
+- **`colors`** - Color properties for various UI elements across light and dark modes.
+- **`lightColors`** - Optional overrides that only apply when the system is in light mode. These will default to the `colors` property if not provided.
+- **`darkColors`** - Optional overrides that only apply when the system is in dark mode. These will default to the `colors` property if not provided.
+- **`typography`** - Font and typography properties for different text styles.
+- **`design`** - Design properties like border radius.
+
+## Colors
+
+The `colors`,`lightColors`, and `darkColors` properties contain the following color options:
+
+<Include src="_partials/views/clerk-theme-colors-property" />
+
+## Fonts
+
+The `typography` property contains the following font options based on Android Dynamic Type:
+
+<Properties>
+  - `displaySmall`
+  - `TextStyle`
+
+  ---
+
+  - `headlineLarge`
+  - `TextStyle`
+
+  ---
+
+  - `headlineMedium`
+  - `TextStyle`
+
+  ---
+
+  - `titleMedium`
+  - `TextStyle`
+
+  ---
+
+  - `titleSmall`
+  - `TextStyle`
+
+  ---
+
+  - `bodyLarge`
+  - `TextStyle`
+
+  ---
+
+  - `bodyMedium`
+  - `TextStyle`
+
+  ---
+
+  - `bodySmall`
+  - `TextStyle`
+
+  ---
+
+  - `labelMedium`
+  - `TextStyle`
+
+  ---
+
+  - `labelSmall`
+  - `TextStyle`
+</Properties>
+
+## Design
+
+The `design` property contains the following design options:
+
+<Properties>
+  - `borderRadius`
+  - `Dp`
+
+  The border radius used throughout the views. By default, this is set to `8.0`.
+</Properties>
+
+## Usage
+
+You can customize Clerk Android views by creating a `ClerkTheme` and applying it to Clerk's `customTheme` setter.
+
+### Apply a custom theme to all Clerk views
+
+To customize all Clerk views in your app, create a `ClerkTheme` and apply it where you initialize the Clerk SDK.
+
+```kotlin
+import android.app.Application
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkColors
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
+
+class WorkbenchApplication : Application() {
+
+  override fun onCreate() {
+    super.onCreate()
+    val theme = ClerkTheme(
+        colors = ClerkColors(primary = Color.Black), 
+        design = ClerkDesign(borderRadius = 24.dp), 
+        typography = ClerkTypographyDefaults.displaySmall.copy(fontSize = 24.sp)
+    )
+
+    Clerk.initialize(this, "YOUR_PUBLIC_KEY", theme = theme)
+  }
+}
+
+```
+
+### Apply a theme to specific views
+
+You can apply a theme to specific Clerk views by passing a `ClerkTheme` to any Clerk UI component. The theme used here will apply to all children of this view.
+
+```kotlin
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.Alignment
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.background
+import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkColors
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
+import com.clerk.api.ui.ClerkTypographyDefaults
+import com.clerk.api.ui.UserButton
+import com.clerk.api.ui.AuthView
+
+@Composable
+fun HomeScreen {
+   val user by Clerk.userFlow.collecAsStateWithLifecycle()
+   Box(
+    modifier = Modifier.fillMaxSize().background(color = Color(0xFFF9F9F9)),
+    contentAlignment = Alignment.Center,
+   ) {
+        if (user != null) {
+            UserButton()
+        } else {
+            AuthView(clerkTheme = ClerkTheme(colors = ClerkColors(primary = Color.Blue)))
+        }
+    }
+}
+```
+
+### Custom fonts
+
+You can customize fonts by modifying the `typography` property of the `ClerkTheme`.
+
+#### Using a font family name
+
+```kotlin
+AuthView(clerkTheme = ClerkTheme(typography = ClerkTypography(displaySmall = ClerkTypographyDefaults.displaySmall.copy(fontSize = 24.sp))))
+```
+
+## Light and Dark mode support
+
+Clerk Android views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.
+
+<div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
+  ![Light Mode](/docs/images/ui-components/android-user-profile-view.png){{ style: { maxWidth: '230px' } }}
+  ![Dark Mode](/docs/images/ui-components/android-user-profile-view-dark.png){{ style: { maxWidth: '230px' } }}
+</div>
+
+If Clerk's prebuilt theming doesn't meet your specific needs, you can create completely custom authentication flows using the Clerk API. For more information, see the [custom flow guides](/docs/guides/development/custom-flows/overview).