@aksell/ui

Shared UI package for unifying Aksell projects.

Demo: aksell-ui.aksell.workers.dev

Usage

---
import "@aksell/ui/resets.css"; // Simple standard html resets like bounding-box
import "@aksell/ui/colors.css"; // Color variables
import "@aksell/ui/typography.css"; // Typography css
import "@aksell/ui/native.css"; // Tables css
import "@aksell/ui/utilities.css"; // Utilities css (container classes etc..)
import "@aksell/ui/btn.css"; // Button css
---

Fonts

@aksell/ui/typography.css uses locally installed Aeonik when available, then falls back to system-ui. The package does not ship Aeonik font files.

If a project has a valid Aeonik license, add project-owned @font-face declarations in that project's CSS and keep the font files in that project.

Components

---
import Button from "@aksell/ui/button";
import PillArrowBtn from "@aksell/ui/pillarrowbtn";
---

<Button variant="primary">Save</Button>
<PillArrowBtn link={{ href: "/", title: "Go", target: "_self" }} />

---
import "@aksell/ui/resets.css";
import "@aksell/ui/colors.css";
import "@aksell/ui/typography.css";
import "@aksell/ui/btn.css";
---

<button class="btn btn--primary">Save</Button>

PillArrowBtn — Web Component

<script type="module">
  import "@aksell/ui/wc";
  import "@aksell/ui/pillarrowbtn.css";
</script>

<!-- Link -->
<pill-arrow-btn href="/" title="Go" target="_self" variant="primary"></pill-arrow-btn>

<!-- Button -->
<pill-arrow-btn title="Click me" variant="dark"></pill-arrow-btn>

Variants: primary, dark, darkaccent

Variants

• btn
• btn--outline
• btn--sm

Colors

• btn--ghost
• btn--primary
• btn--secondary
• btn--accent
• btn--beige
• btn--light
• btn--dark
• btn--danger
• btn--success
• btn--warning

Examples:

• class="btn"
• class="btn btn--outline"
• class="btn btn--dark"
• class="btn btn--dark btn--outline"
• class="btn btn--primary btn--sm"