Box

@* Surface props on boxes: a band with lines above and below, a bordered box, and a dashed card
   for an "add new" tile. *@
<Stack Gap="4" Grow>
    <Box Bg="Color.FillSubtle" BorderY="1" PaddingX="4" PaddingY="3">
        <TextBlock Size="TextSize.Sm">A band: <Code>Bg</Code>, <Code>BorderY="1"</Code>, padding.</TextBlock>
    </Box>
    <Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4">
        <Box Border="1" BorderColor="Color.Outline" Radius="Radius.Lg" Padding="4">
            <TextBlock Size="TextSize.Sm">A box with <Code>Border</Code>, <Code>BorderColor</Code> and <Code>Radius</Code>.</TextBlock>
        </Box>
        <Card BorderStyle="BorderStyle.Dashed" Size="ControlSize.Sm">
            <Row Gap="2" Align="Align.Center">
                <Icon Name="Lucide.Plus" />
                <TextBlock Size="TextSize.Sm">New project</TextBlock>
            </Row>
        </Card>
    </Grid>
</Stack>

@* A dark part of a light page, and one that's always the opposite of the page (Inverse). Every
   token switches inside, so text, buttons and badges keep their contrast. *@
<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="4" Grow>
    <Card Title="Dark" Description="ColorScheme.Dark" ColorScheme="ColorScheme.Dark">
        <Row Gap="2" Wrap Align="Align.Center">
            <Button>Deploy</Button>
            <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Logs</Button>
            <Badge Status="Status.Warning">Pending</Badge>
        </Row>
    </Card>
    <Card Title="Inverse" Description="ColorScheme.Inverse, the opposite of the page" ColorScheme="ColorScheme.Inverse">
        <Row Gap="2" Wrap Align="Align.Center">
            <Button>Deploy</Button>
            <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Logs</Button>
            <Badge Status="Status.Success">Live</Badge>
        </Row>
    </Card>
</Grid>

@* Each color where it's used: the page, a card on it (Surface), fills inside the card, each a step
   further from it, and an overlay with a border and a shadow, as menus and popovers draw
   over the card. *@
<Box Padding="4" Bg="Color.Background" Border="1" Radius="Radius.Lg" Grow>
    <Stack Gap="3">
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Background</TextBlock>
        <Box Padding="4" Bg="Color.Surface" Border="1" Radius="Radius.Lg">
            <Stack Gap="3">
                <TextBlock Size="TextSize.Sm" Color="Color.Muted">Surface</TextBlock>
                <Grid Columns="new() { Base = 1, Sm = 3 }" Gap="3">
                    <Box Padding="3" Bg="Color.FillSubtle" Radius="Radius.Md">FillSubtle</Box>
                    <Box Padding="3" Bg="Color.Fill" Radius="Radius.Md">Fill</Box>
                    <Box Padding="3" Bg="Color.FillStrong" Radius="Radius.Md">FillStrong</Box>
                </Grid>
                <Box Padding="3" Bg="Color.SurfaceOverlay" Border="1" Shadow="Shadow.Lg" Radius="Radius.Lg" MaxWidth="Length.Rem(16)">
                    SurfaceOverlay
                    <TextBlock Size="TextSize.Sm" Color="Color.Muted">A menu or popover</TextBlock>
                </Box>
            </Stack>
        </Box>
    </Stack>
</Box>

<Row Gap="3" Wrap Grow>
    <Box Bg="Color.Primary" Padding="4" Radius="Radius.Md" Grow>Primary</Box>
    <Box Bg="Color.Success" Padding="4" Radius="Radius.Md" Grow>Success</Box>
    <Box Bg="Color.Warning" Padding="4" Radius="Radius.Md" Grow>Warning</Box>
    <Box Bg="Color.Danger" Padding="4" Radius="Radius.Md" Grow>Danger</Box>
    <Box Bg="Color.PrimarySoft" Color="Color.PrimaryText" Padding="4" Radius="Radius.Md" Grow>PrimarySoft with PrimaryText</Box>
</Row>

<Box As="article" MaxWidth="Length.Prose" Padding="6" Bg="Color.FillSubtle" Radius="Radius.Lg">
    <Column Gap="2">
        <Heading Level="3">Release 2.4</Heading>
        <TextBlock Color="Color.Muted">
            Invoices can now be paid in installments. Choose a plan when you send one, and we'll
            remind your customer before each payment is due. Existing invoices aren't affected.
        </TextBlock>
    </Column>
</Box>

<Row Gap="2" Align="Align.Center" PaddingY="3" BorderBottom="1" Grow>
    <TextBlock As="span" Size="TextSize.Lg" Weight="FontWeight.Semibold">Invoices</TextBlock>
    <Spacer />
    <IconButton Icon="Lucide.Plus" Label="New invoice" HiddenFrom="Breakpoint.Sm" />
    <Button StartIcon="Lucide.Plus" VisibleFrom="Breakpoint.Sm">New invoice</Button>
</Row>