Installation

# .npmrc i projektet — biblioteket ligger på Whitespace egna registry
registry=https://npm.whitespace.house/

bun add @whitespace/malm-ui

/* allt: tokens, bas, komponenter, utilities, och webbfonterna */
@import "@whitespace/malm-ui/css";

/* …eller utan @font-face, om appen redan serverar snitten själv */
@import "@whitespace/malm-ui/css/nofonts";

/* …eller bara variablerna, om komponenterna kan vänta */
@import "@whitespace/malm-ui/css/tokens";

<html lang="sv" data-font="suisse" data-accent="grey">
<!--            │                     └ grey | blue | green
                └ suisse | plex | system
     data-theme sätts av skriptet nedan: light | dark | inget alls
     (inget = följ operativsystemet) -->
  <head>
    <!-- Inline och synkront. En modul här kör efter att body målats,
         vilket är precis buggen det finns för att undvika. -->
    <script>
      try{var h=document.documentElement;
      var v=localStorage.getItem("malm-ui:theme");
      if(v&&["system","light","dark"].indexOf(v)>-1&&v!=="system")h.setAttribute("data-theme",v);
      var v=localStorage.getItem("malm-ui:font");
      if(v&&["suisse","plex","system"].indexOf(v)>-1&&v!==null)h.setAttribute("data-font",v);
      var v=localStorage.getItem("malm-ui:accent");
      if(v&&["grey","blue","green"].indexOf(v)>-1&&v!==null)h.setAttribute("data-accent",v);
      var v=localStorage.getItem("malm-ui:code-font");
      if(v&&["jetbrains","plex","system"].indexOf(v)>-1&&v!==null)h.setAttribute("data-code-font",v);
      var v=localStorage.getItem("malm-ui:contrast");
      if(v&&["system","more"].indexOf(v)>-1&&v!=="system")h.setAttribute("data-contrast",v);}catch(e){}
    </script>
  </head>

Skriptet är inlineAppearanceScript() ur @whitespace/malm-ui/js/appearance.

import { init } from "@whitespace/malm-ui";
init();

// eller bara det sidan behöver
import { initTabs } from "@whitespace/malm-ui/js/tabs";
import { toast } from "@whitespace/malm-ui/js/toast";
import { confirmDialog } from "@whitespace/malm-ui/js/dialog";

init() är idempotent. Anropa den igen efter ett sidbyte — view transitions, ett htmx-fragment — det är det avsedda sättet.

---
import Button from "@whitespace/malm-ui/astro/Button.astro";
import Panel from "@whitespace/malm-ui/astro/Panel.astro";
import Icon from "@whitespace/malm-ui/astro/Icon.astro";
---

<Panel title="Budget" caption="Projekt">
  <Button slot="actions" size="sm" variant="ghost" icon="Export">Exportera</Button>
  <p>412 av 600 timmar.</p>
</Panel>

@import "@whitespace/malm-ui/css";

/* Byt accent för hela produkten — en rad, och varje knapp,
   länk, fokusring och aktiv nav-pill följer med. */
:root {
  --color-accent: var(--color-ws-green-700);
  --color-accent-hover: var(--color-ws-green-800);
}

/* Eller skriv om en komponent rakt av. Ingen @layer behövs. */
.btn-primary {
  border-radius: 0;
}