@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
        );
    }
}
