@dxlbnl/ui
v1.1.1
Published
Design system for [dexterlabs.nl](https://dexterlabs.nl). SvelteKit component library with Phosphor (dark) and Paper (light) palettes, built with Svelte 5 and documented in Storybook.
Readme
dxlb-design
Design system for dexterlabs.nl. SvelteKit component library with Phosphor (dark) and Paper (light) palettes, built with Svelte 5 and documented in Storybook.
Install
pnpm add dxlb-designPeer dependencies
{
"svelte": "^5.0.0",
"@sveltejs/kit": "^2.0.0"
}Setup
Import the design token CSS in your global stylesheet or root layout:
// src/app.css or src/routes/+layout.svelte
import 'dxlb-design/tokens/tokens.css';
import 'dxlb-design/tokens/typography.css';tokens.css defines all CSS custom properties (colours, spacing, typography scale, transitions).
typography.css adds base element resets and global typography classes.
Palette
Set data-palette on the <html> element to activate a palette:
<!-- Phosphor — dark, terminal-green accent, amber highlights -->
<html data-palette="phosphor">
<!-- Paper — light, warm off-white background, same amber highlights -->
<html data-palette="paper">Both palettes use the same CSS custom property names (--ink, --bg, --amber, etc.) so components switch automatically.
Usage
<script>
import { Button, Stack, Heading } from 'dxlb-design';
</script>
<Stack gap="md">
<Heading level={2}>Deploy module</Heading>
<Button variant="primary">Confirm</Button>
<Button variant="ghost">Cancel</Button>
</Stack>Components
| Category | Components |
|----------|-----------|
| Primitives | Button, Led, TagPill, Text, Heading |
| Layout | Stack, Inline, Spread, Grid, Container, Rule, Prose |
| Cards | Card, ProductCard, ProjectCard, NoteCard |
| Navigation | Nav, Breadcrumb |
| Forms | Input, Textarea, Select, InputWrap, Field, Checkbox, Radio, RadioGroup, Switch |
| Feedback | Modal, Alert, Toast, ToastRegion |
| Patterns | CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero |
| Data | Accordion, AccordionItem, Tabs, Table |
Toast store
<script>
import { toast, ToastRegion } from 'dxlb-design';
</script>
<!-- Mount once in your root layout -->
<ToastRegion />
<!-- Push a notification from anywhere -->
<button onclick={() => toast.push('Saved', { title: 'Done', variant: 'success' })}>Save</button>Storybook
Interactive component explorer with play-function tests:
pnpm storybook # starts at http://localhost:6006