Add LeptonX Lite Docs

docs/en/Themes/LeptonXLite/angular.md

@@ -0,0 +1,75 @@
+# Client Side
+
+To add `LeptonX-lite` into your project,
+
+* Install `@abp/ng.theme.lepton-x`
+
+`yarn add @abp/ng.theme.lepton-x@preview`
+
+* Install `bootstrap-icons`
+
+`yarn add bootstrap-icons`
+
+
+* Then, we need to edit the styles array in `angular.json` to replace the existing style with the new one.
+
+Add the following style 
+
+```json
+"node_modules/bootstrap-icons/font/bootstrap-icons.css",
+```
+
+* Finally, remove `ThemeBasicModule` from `app.module.ts`, and import the related modules in `app.module.ts`
+
+```js
+import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
+import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
+
+@NgModule({
+  imports: [
+    // ...
+
+    // do not forget to remove ThemeBasicModule
+    //  ThemeBasicModule.forRoot(),
+    ThemeLeptonXModule.forRoot(),
+    SideMenuLayoutModule.forRoot(),
+  ],
+  // ...
+})
+export class AppModule {}
+```
+
+Note: If you employ [Resource Owner Password Flow](https://docs.abp.io/en/abp/latest/UI/Angular/Authorization#resource-owner-password-flow) for authorization, you should import the following module as well:
+
+```js
+import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
+
+@NgModule({
+  // ...
+  imports: [
+    // ...
+    AccountLayoutModule.forRoot(),
+    // ...
+  ],
+  // ...
+})
+export class AppModule {}
+```
+
+To change the logos and brand color of the `LeptonX`, simply add the following CSS to the `styles.scss`
+
+```css
+:root {
+  --lpx-logo: url('/assets/images/logo.png');
+  --lpx-logo-icon: url('/assets/images/logo-icon.png');
+  --lpx-brand: #edae53;
+}
+```
+
+- `--lpx-logo` is used to place the logo in the menu.
+- `--lpx-logo-icon` is a square icon used when the menu is collapsed. 
+- `--lpx-brand` is a color used throughout the application, especially on active elements. 
+
+# Server Side
+
+In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow [Server Side Migration](mvc.md) document.

docs/en/Themes/LeptonXLite/blazor.md

@@ -0,0 +1,124 @@
+# LeptonX Lite MVC UI
+
+````json
+//[doc-params]
+{
+    "UI": ["Blazor", "BlazorServer"]
+}
+````
+
+LeptonX Lite has implementation for ABP Framework Blazor WebAssembly & Blazor Server.
+
+## Installation
+
+
+## Installation
+
+{{if UI == "Blazor"}}
+
+- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme** package to your **Blazor wasm** application.
+  ```bash
+  dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme
+  ```
+
+- Remove old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule** type to **DependsOn** attribute.
+
+```diff
+[DependsOn(
+-    typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeModule),
++    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule)
+)]
+```
+
+- Change startup App component with LeptonX one.
+
+```csharp
+// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace.
+builder.RootComponents.Add<App>("#ApplicationContainer");
+
+```
+
+- Run `abp bundle` command in your **Blazor** application folder.
+
+{{end}}
+
+
+{{if UI == "BlazorServer"}}
+
+- Complete [MVC Razor Pages Installation](mvc.md#installation) first. 
+
+- Add **Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme** package to your **Blazor server** application.
+  ```bash
+  dotnet add package Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme
+  ```
+
+- Remove old theme from **DependsOn** attribute in your module class and add **AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule** type to **DependsOn** attribute.
+
+  ```diff
+  [DependsOn(
+  -    typeof(AbpAspNetCoreComponentsServerBasicThemeModule),
+  +    typeof(AbpAspNetCoreComponentsServerLeptonXLiteThemeModule)
+  )]
+  ```
+
+- Update AbpBundlingOptions
+  ```diff
+  options.StyleBundles.Configure(
+  - BlazorBasicThemeBundles.Styles.Global,
+  + BlazorLeptonXLiteThemeBundles.Styles.Global,
+    bundle =>
+    {
+        bundle.AddFiles("/blazor-global-styles.css");
+        //You can remove the following line if you don't use Blazor CSS isolation for components
+        bundle.AddFiles("/MyProjectName.Blazor.styles.css");
+    });
+  ```
+
+- Update `_Host.cshtml` file. _(located under **Pages** folder by default.)_
+
+  - Add following usings to Locate **App** and **BlazorLeptonXLiteThemeBundles** classes.
+    ```csharp
+    @using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite
+    @using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Bundling
+    ```
+  - Then replace script & style bunles as following
+    ```diff
+    - <abp-style-bundle name="@BlazorBasicThemeBundles.Styles.Global" />
+    + <abp-style-bundle name="@BlazorLeptonXLiteThemeBundles.Styles.Global" />
+    ```
+
+    ```diff
+    - <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" />
+    + <abp-script-bundle name="@BlazorLeptonXLiteThemeBundles.Scripts.Global" />
+    ```
+
+{{end}}
+
+
+---
+
+## Customization
+
+### Toolbars
+LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in **LeptonXLiteToolbars** class.
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
+
+```csharp
+public class MyProjectNameMainToolbarContributor : IToolbarContributor
+{
+    public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+    {
+        if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+        }
+
+        if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+        }
+    }
+}
+```

docs/en/Themes/LeptonXLite/mvc.md

@@ -0,0 +1,63 @@
+# LeptonX Lite MVC UI
+LeptonX Lite has implementation for ABP Framework Razor Pages.
+
+## Installation
+
+- Add **Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite** package to your **Web** application.
+
+```bash
+dotnet add package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite
+```
+
+- Make sure old theme is removed and LeptonX is added in your Module class.
+
+```diff
+[DependsOn(
+-    typeof(AbpAspNetCoreMvcUiBasicThemeModule),
++    typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule)
+)]
+```
+
+- Update AbpBundlingOptions
+
+```diff
+Configure<AbpBundlingOptions>(options =>
+{
+    options.StyleBundles.Configure(
+-       BasicThemeBundles.Styles.Global,
++       LeptonXLiteThemeBundles.Styles.Global
+        bundle =>
+        {
+            bundle.AddFiles("/global-styles.css");
+        }
+    );
+});
+```
+
+---
+
+## Customization
+
+### Toolbars
+LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in **LeptonXLiteToolbars** class.
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
+
+```csharp
+public class MyProjectNameMainToolbarContributor : IToolbarContributor
+{
+    public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+    {
+        if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+        }
+
+        if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
+        {
+            context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+        }
+    }
+}
+```