IzzyTheme

@* The same card under each preset, described by its card. On part of a page a preset sets density,
   shape and depth only, so each card also takes its preset's brand and gray, and the Editorial card
   sets its fonts with Style (fonts are app-wide, so the preset alone wouldn't change them here). *@
<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4" Grow>
    @foreach (var set in Sets)
    {
        <IzzyTheme Preset="set.Preset" Brand="@set.Brand" Gray="@set.Gray" Style="@set.Style">
            <Card Title="@set.Preset.ToString()" Description="@set.Description" Height="Length.Full">
                <Row Gap="2" Wrap Align="Align.Center">
                    <Button>Invite</Button>
                    <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Later</Button>
                    <Badge Status="Status.Success">Active</Badge>
                </Row>
            </Card>
        </IzzyTheme>
    }
</Grid>

@code {
    private sealed record PresetSet(ThemePreset Preset, string Brand, string Gray, string Description, string? Style = null);

    private static readonly PresetSet[] Sets =
    [
        new(ThemePreset.Standard, "blue", "neutral", "The default: 36px controls, a medium radius and hairline shadows."),
        new(ThemePreset.Compact, "indigo", "slate", "For dense data and admin: 32px controls, tight rows, a small radius, borders only."),
        new(ThemePreset.Soft, "teal", "neutral", "For consumer apps and portals: 40px controls, roomy, a large radius, gentle shadows."),
        new(ThemePreset.Editorial, "ink", "stone", "For reading and docs: serif headings over a plain sans, a large radius.",
            "font-family: \"IBM Plex Sans\", system-ui, sans-serif; --ib-font-heading: Newsreader, Georgia, \"Times New Roman\", serif"),
    ];
}

@* The built-in brand colors, each tuned so text holds 4.5:1 on its fill and on every gray. *@
<Stack Gap="3" Grow>
    @foreach (var brand in Names)
    {
        <IzzyTheme Brand="@brand">
            <Row Gap="3" Align="Align.Center" Wrap>
                <Code Width="4.Rem">@brand</Code>
                <Button Size="ControlSize.Sm">Save</Button>
                <Button Size="ControlSize.Sm" Variant="ButtonVariant.Soft">Preview</Button>
                <Anchor Href="#">A link</Anchor>
                <Badge Accent="Accent.Primary">New</Badge>
            </Row>
        </IzzyTheme>
    }
</Stack>

@code {
    private static readonly string[] Names = ["blue", "ink", "indigo", "violet", "teal", "green", "rose"];
}

@inject NavigationManager Navigation

@* A hex Brand: the server derives the fill, the text on it, the accent as text and the soft tint,
   in light and dark, each pair checked for 4.5:1. A light color like yellow gets dark text. *@
<Stack Gap="5" Grow>
    <Row Gap="2" Wrap>
        @foreach (var (name, hex) in Colors)
        {
            <IzzyTheme Brand="@hex">
                <Button Href="@Navigation.GetUriWithQueryParameter("brand", hex)" Size="ControlSize.Sm"
                        Variant="@(hex == Chosen ? ButtonVariant.Solid : ButtonVariant.Soft)">@name</Button>
            </IzzyTheme>
        }
    </Row>
    <Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4">
        @foreach (var scheme in new[] { ColorScheme.Light, ColorScheme.Dark })
        {
            <IzzyTheme Brand="@Chosen" ColorScheme="scheme">
                <Card Title="@(scheme == ColorScheme.Light ? "Light" : "Dark")" Description="@Chosen">
                    <Stack Gap="4">
                        <Row Gap="2" Wrap>
                            <Button>Save</Button>
                            <Button Variant="ButtonVariant.Soft">Preview</Button>
                            <Button Variant="ButtonVariant.Outline">Share</Button>
                        </Row>
                        <Row Gap="3" Align="Align.Center" Wrap>
                            <Anchor Href="@Navigation.Uri">A link in the accent</Anchor>
                            <Badge Accent="Accent.Primary">New</Badge>
                        </Row>
                        <Progress Value="64" Label="Upload" />
                    </Stack>
                </Card>
            </IzzyTheme>
        }
    </Grid>
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "brand")]
    private string? Picked { get; set; }

    // Only the colors offered here, whatever the address says.
    private string Chosen => Colors.Any(c => c.Hex == Picked) ? Picked! : Colors[0].Hex;
}

@* A nested IzzyTheme themes what's inside: here a compact, rose, small-radius panel next to one
   in the page's theme. What it doesn't set comes from the theme around it. *@
<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4" Grow>
    <Card Title="The page's theme" Description="Standard, blue, medium radius.">
        <Row Gap="2" Wrap Align="Align.Center">
            <Button>Approve</Button>
            <Button Variant="ButtonVariant.Soft">Comment</Button>
            <Badge Accent="Accent.Primary">Draft</Badge>
        </Row>
    </Card>
    <IzzyTheme Density="ThemeDensity.Compact" Brand="rose" Radius="ThemeRadius.Sm">
        <Card Title="A nested IzzyTheme" Description="Compact, rose, small radius.">
            <Row Gap="2" Wrap Align="Align.Center">
                <Button>Approve</Button>
                <Button Variant="ButtonVariant.Soft">Comment</Button>
                <Badge Accent="Accent.Primary">Draft</Badge>
            </Row>
        </Card>
    </IzzyTheme>
</Grid>