blitzkit/packages/website-ue/src/layouts/BaseLayout.astro

---
import BaseMeta from "../components/BaseMeta.astro";
import BaseStyles from "../components/BaseStyles.astro";
import ColorAlias from "../components/ColorAlias.astro";
import ColorScale from "../components/ColorScale.astro";
import Navbar from "../components/Navbar.astro";
import type { Color } from "../core/ui/color";

interface Props {
  locale: string;
  accent: Color;
  noNavbar?: boolean;
}

const { accent, noNavbar, locale } = Astro.props;
---

<html lang={locale}>
  <head>
    <BaseMeta />

    <ColorScale color="mauve" />
    <ColorScale color="mauve" alpha />
    <ColorAlias color="mauve" alias="gray" />
    <ColorAlias color="mauve" alpha alias="gray" />

    <ColorScale color="black" alpha />
    <ColorScale color="white" alpha />

    <ColorScale color={accent} />
    <ColorScale color={accent} alpha />
    <ColorAlias color={accent} alias="accent" />
    <ColorAlias color={accent} alpha alias="accent" />

    <BaseStyles />

    <style>
      body {
        margin: 0;
        display: flex;
        flex-direction: column;
        min-height: 100dvh;

        background-color: var(--gray-1);
        color: var(--gray-12);
        font-family: var(--font-family-regular);

        .app {
          display: flex;
          flex: 1;
          flex-direction: column;

          background-color: var(--gray-1);
        }
      }
    </style>

    <slot name="head" />
  </head>

  <body class="dark">
    {!noNavbar && <Navbar {locale} />}

    <slot name="pre-app" />

    <div class="app">
      <slot />
    </div>
  </body>
</html>