-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): add the Customize Theme page (#116)
- Loading branch information
1 parent
ccc3573
commit be127f9
Showing
9 changed files
with
203 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 134 additions & 0 deletions
134
docs/LumexUI.Docs.Client/Pages/Customization/CustomizeTheme.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| @page "/docs/customization/customize-theme" | ||
| @layout DocsContentLayout | ||
|
|
||
| <DocsSection Title="Overview"> | ||
| <p> | ||
| In LumexUI, the theme system provides flexibility | ||
| with two sub-themes: <Code>Light</Code> and <Code>Dark</Code>. | ||
| Both sub-themes share the same structure, allowing you to | ||
| seamlessly customize your application’s appearance. | ||
| </p> | ||
| <p>Each sub-theme consists of 2 key configurations:</p> | ||
| <ul> | ||
| <li><LumexLink Href="/docs/customization/layout">Layout Configuration</LumexLink></li> | ||
| <li><LumexLink Href="/docs/customization/colors">Colors Configuration</LumexLink></li> | ||
| </ul> | ||
| </DocsSection> | ||
|
|
||
| <DocsSection Title="Customizing Layout"> | ||
| <p> | ||
| The layout configuration allows you to control typography, | ||
| border radius, shadows, and opacities for various states | ||
| like hover, focus, and disabled. | ||
| </p> | ||
| <p> | ||
| Suppose you require a smaller border radius, | ||
| and more opaque disabled elements across all themes. | ||
| You can achieve this by overriding the default <Code>LayoutConfig</Code>. | ||
| </p> | ||
| <CodeSnippet Code="@(new CodeBlock(name: "MyTheme.cs", snippet: "customizeThemeLayout"))" /> | ||
| <p> | ||
| As LumexUI components employ <Code>LayoutConfig</Code> properties, the modifications | ||
| will be reflected across all components that utilize them. | ||
| </p> | ||
| <p> | ||
| For instance, the <LumexLink Href="/docs/components/button#radius">Button</LumexLink> | ||
| component exposes the <Code>Radius</Code> parameter to set the border radius and | ||
| the <Code>Disabled</Code> parameter to set the | ||
| appropriate opacity and disable interactions when it is disabled. | ||
| </p> | ||
| <Preview> | ||
| <div class="w-full flex flex-col items-center justify-around sm:flex-row"> | ||
| <div class="flex flex-col items-center"> | ||
| <span class="font-medium text-sm text-foreground-500 font-mono mb-3">Border Radius</span> | ||
| <div class="flex flex-col gap-4"> | ||
| <LumexButton Radius="@Radius.Medium">Default</LumexButton> | ||
| <LumexButton Class="rounded-[4px]">Custom</LumexButton> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col items-center"> | ||
| <span class="font-medium text-sm text-foreground-500 font-mono mb-3">Disabled Opacity</span> | ||
| <div class="flex flex-col gap-4"> | ||
| <LumexButton Radius="@Radius.Medium" Disabled="@true">Default</LumexButton> | ||
| <LumexButton Disabled="@true" Class="rounded-[4px] opacity-[0.4]">Custom</LumexButton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Preview> | ||
| <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "customizeThemeLayoutExample"))" /> | ||
| <Callout Variant="@CalloutVariant.Info"> | ||
| See the <LumexLink Href="/docs/customization/layout" Class="bordered-link">Layout</LumexLink> | ||
| section for more details about the configuration properties. | ||
| </Callout> | ||
| </DocsSection> | ||
|
|
||
| <DocsSection Title="Customizing Colors"> | ||
| <p> | ||
| The colors configuration allows you to control | ||
| <LumexLink Href="/docs/customization/colors#semantic-colors">semantic colors</LumexLink>. | ||
| </p> | ||
| <p> | ||
| Now, let's say you wish to modify the primary and focus colors of the light theme. | ||
| You can achieve this by overriding the default <Code>ThemeColors</Code>. | ||
| </p> | ||
| <CodeSnippet Code="@(new CodeBlock(name: "MyTheme.cs", snippet: "customizeThemeColors"))" /> | ||
| <p> | ||
| Just like with the layout, the modifications | ||
| will be reflected across all components that utilize them. | ||
| </p> | ||
| <p> | ||
| For instance, the <LumexLink Href="/docs/components/button#colors">Button</LumexLink> | ||
| component exposes the <Code>Color</Code> parameter | ||
| to set the background color when its variant is set to <Code>Solid</Code>. | ||
| </p> | ||
| <Preview> | ||
| <div class="w-full flex flex-col items-center justify-around sm:flex-row"> | ||
| <div class="flex flex-col items-center"> | ||
| <span class="font-medium text-sm text-foreground-500 font-mono mb-3">Primary</span> | ||
| <div class="flex flex-col gap-4"> | ||
| <LumexButton Color="@ThemeColor.Primary">Default</LumexButton> | ||
| <LumexButton Class="bg-[#f97316] focus-visible:outline-[#f97316]">Custom</LumexButton> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col items-center"> | ||
| <span class="font-medium text-sm text-foreground-500 font-mono mb-3">Focus</span> | ||
| <div class="flex flex-col gap-4"> | ||
| <LumexButton Color="@ThemeColor.Primary" | ||
| Variant="@Variant.Outlined"> | ||
| Default | ||
| </LumexButton> | ||
| <LumexButton Variant="@Variant.Outlined" | ||
| Class="text-[#f97316] border-[#f97316] focus-visible:outline-[#f97316]"> | ||
| Custom | ||
| </LumexButton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Preview> | ||
| <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "customizeThemeColorsExample"))" /> | ||
| <Callout Variant="@CalloutVariant.Info"> | ||
| See the <LumexLink Href="/docs/customization/colors" Class="bordered-link">Colors</LumexLink> | ||
| section for more details about the configuration properties. | ||
| </Callout> | ||
| </DocsSection> | ||
|
|
||
| @code { | ||
| [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!; | ||
|
|
||
| private readonly Heading[] _headings = new Heading[] | ||
| { | ||
| new("Overview"), | ||
| new("Customizing Layout"), | ||
| new("Customizing Colors") | ||
| }; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| Layout.Initialize( | ||
| title: "Customize Theme", | ||
| category: "Customization", | ||
| description: "Customizing the default theme for your application.", | ||
| _headings | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColors.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <pre><code class="language-csharp">record MyTheme : LumexTheme | ||
| { | ||
| public MyTheme() | ||
| { | ||
| Light = new ThemeConfigLight() | ||
| { | ||
| Colors = new ThemeColorsLight() | ||
| { | ||
| Primary = new ColorScale( Colors.Orange ), | ||
| Focus = new ColorScale( Colors.Orange["500"] ) // #f97316 | ||
| } | ||
| }; | ||
| } | ||
| } | ||
| </code></pre> |
11 changes: 11 additions & 0 deletions
11
...umexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColorsExample.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <pre><code class="language-razor"><div class="flex flex-col gap-4"> | ||
| <LumexButton Color="@ThemeColor.Primary"> | ||
| Custom | ||
| </LumexButton> | ||
|
|
||
| <LumexButton Color="@ThemeColor.Primary" | ||
| Variant="@Variant.Outlined"> | ||
| Custom | ||
| </LumexButton> | ||
| </div> | ||
| </code></pre> |
27 changes: 27 additions & 0 deletions
27
docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeLayout.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <pre><code class="language-csharp">record MyTheme : LumexTheme | ||
| { | ||
| public MyTheme() | ||
| { | ||
| var layoutConfig = new LayoutConfig() | ||
| { | ||
| DisabledOpacity = 0.4, | ||
| Radius = new BaseScale() | ||
| { | ||
| Sm = "0.125rem", | ||
| Md = "0.25rem", | ||
| Lg = "0.375rem" | ||
| } | ||
| }; | ||
|
|
||
| Light = new ThemeConfigLight | ||
| { | ||
| Layout = layoutConfig | ||
| }; | ||
|
|
||
| Dark = new ThemeConfigDark | ||
| { | ||
| Layout = layoutConfig | ||
| }; | ||
| } | ||
| } | ||
| </code></pre> |
11 changes: 11 additions & 0 deletions
11
...umexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeLayoutExample.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <pre><code class="language-razor"><div class="flex flex-col gap-4"> | ||
| <LumexButton Radius="@Radius.Medium"> | ||
| Custom | ||
| </LumexButton> | ||
|
|
||
| <LumexButton Radius="@Radius.Medium" | ||
| Disabled="@true"> | ||
| Custom | ||
| </LumexButton> | ||
| </div> | ||
| </code></pre> |