@page "/docs/customization/colors"
@layout DocsContentLayout

<DocsSection Title="Overview">
    <p>LumexUI offers a flexible color system that includes 2 types of color palettes:</p>
    <ul>
        <li><LumexLink Href="/docs/customization/colors#common-colors">Common Colors</LumexLink></li>
        <li><LumexLink Href="/docs/customization/colors#semantic-colors">Semantic Colors</LumexLink></li>
    </ul>
    <p>
        This system provides both stability and adaptability,
        allowing you to create a consistent and meaningful visual identity for your application.
    </p>

    <DocsSection Title="Common Colors">
        <p>
            The <strong>common colors</strong> are based on the full range of the expertly-crafted
            <LumexLink Href="https://tailwindcss.com/docs/customizing-colors" External="@true">Tailwind colors</LumexLink>,
            providing a great starting point if you don’t have your own specific branding in mind.
        </p>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "colorsCommon"))" />
        <p>
            These colors are perfect for static UI elements or when you need precise control
            over specific design elements that don’t need to adapt to a dynamic theme.
        </p>

        <p>As in Tailwind, common colors are represented using a scale from <Code>50</Code> to <Code>950</Code>.</p>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "colorsCommonScale"))" />
    </DocsSection>

    <Callout Variant="@CalloutVariant.Warning">
        The common colors are not configurable.
        Any changes made to the Tailwind CSS color palette in the <Code>tailwind.config.js</Code>
        will not affect the C# common colors, and vice versa.
        The C# <Code>Colors</Code> and Tailwind colors operate independently and do not share configuration settings.
    </Callout>

    <DocsSection Title="Semantic Colors">
        <p>
            The <strong>semantic colors</strong> are designed to adapt with the theme,
            delivering meaning and enhancing your brand’s identity.
            Semantic colors are used throughout all LumexUI components and
            are mapped to specific roles, such as primary, secondary, success, or warning.
        </p>
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "colorsSemantic"))" />
        <p>
            These colors are perfect for dynamic UI elements and are key to
            achieving a cohesive look that aligns with your brand’s identity.
        </p>

        <p>
            Unlike common colors, semantic colors are not just a scale from <Code>50</Code> to <Code>950</Code>;
            they also include a <Code>default</Code> key, representing the primary color of the scale (e.g., <Code>500</Code>),
            and a <Code>foreground</Code> key, representing the contrasting text color for optimal readability.
        </p>

        <div class="mt-8 grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1">
            <ColorSwatches />
        </div>
    </DocsSection>
</DocsSection>

@code {
    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;

    private readonly Heading[] _headings = new Heading[]
    {
        new("Overview", [
            new("Common Colors"),
            new("Semantic Colors"),
        ])
    };

    protected override void OnInitialized()
    {
        Layout.Initialize(
            title: "Colors",
            category: "Customization",
            description: "Color system simplifies managing and customizing the application's color palette.",
            _headings
        );
    }
}
