MapComplete/src/UI/StylesheetTestGui.svelte

<script lang="ts">
  import Loading from "./Base/Loading.svelte"
  import Community from "../assets/svg/Community.svelte"
  import Login from "../assets/svg/Login.svelte"
  import Dropdown from "./Base/Dropdown.svelte"
  import { UIEventSource } from "../Logic/UIEventSource"
  import StylesheetTestUnit from "./StylesheetTestUnit.svelte"
</script>

<main class="w-full h-full p-4">
  <div class="flex flex-col gap-y-2">
    <h1>Stylesheet testing grounds</h1>

    This document exists to explore the style hierarchy.

    <div class="border-interactive m-2 p-2">

    <h2>Normal background</h2>
    There are a few styles, such as the
    <span class="literal-code">normal-background</span>
    -style which is used if there is nothing special going on. Some general information, with at most
      <StylesheetTestUnit/>
    </div>

    <div class="low-interaction flex flex-col">
      <h2>Low interaction</h2>
      <p>
        There are <span class="literal-code">low-interaction</span>
        areas, where some buttons might appear.
      </p>


      <StylesheetTestUnit/>

    </div>

    <div class="interactive flex flex-col">
      <h2>Interactive area</h2>
      <p>
        There are <span class="literal-code">interactive</span>
        areas, where many buttons and input elements will appear.
      </p>

      <StylesheetTestUnit/>

    </div>
  </div>
</main>