@enirman/ui
enirman-ui
Shared design system and Vue component library for every eNirman app.
- Stack: Vue 3 · frappe-ui · Tailwind · CSS variables · Lucide icons
- Brand: Engineering Blueprint — navy 700 primary, blue 500 action, amber 400 accent
- Type: Manrope (UI / display) + JetBrains Mono (IDs, currency, tabular numerics)
- Density: 14 px ERP base; subtle 6–12 px radii; navy-tinted layered shadows
- Themes: Light + dark, driven entirely by CSS variables
- Sidebar: Dark navy in both themes — the navy lockup is part of the brand
- Responsive: Mobile-first, with hamburger drawer on phones
v2 — Enirman Design System. Tokens, primitives, and
AppShellwere resurfaced against the official design system bundle. Seeapps/enirman_ui/docs/DESIGN_TOKENS.mdfor the authoritative variable list.
Docs
docs/USAGE.md— how to install and integrate in a new appdocs/DESIGN_TOKENS.md— every color, radius, shadow, sizedocs/COMPONENTS.md— rules, variants, sizes per component
Components
| Area | Components |
|---|---|
| Actions | Button (Soft / Flat / Ghost / Outline / Subtle / Link / Destructive / Success), Icon button sizes |
| Data display | Card family, StatCard (with optional sparkline), Badge (pill / tag, dot + status), Progress, EuiSparkline, EuiAvatarStack, Skeleton |
| Forms | Input, Label, Switch |
| Overlays | Dialog, Sheet, Popover, DropdownMenu, Tooltip, Sonner |
| Tables | Table family, EuiPhaseTable, EuiPhaseKanban |
| Navigation | Tabs, PageHeader, Command palette |
| Domain (CDE / design ops) | EuiStageBadge, EuiBlockBadge, EuiCdeStateBadge, EuiDesignItemCard, EuiVersionTimeline, EuiStatusFlow, EuiDwgViewer, EuiFileViewer, EuiHandoffCard, EuiReviewCard, EuiActivityFeed |
| Layout | AppShell (dark sidebar, 52 px topbar), SidebarItem, SidebarSection, EmptyState, PageContainer |
| Composables | useTheme, useBreakpoint, useCommandPalette |
| Brand | logo, logoLight, logoMark (asset URLs) |
Rebranding
Every visual decision routes through src/theme.css. The brand scales
(--brand-navy-*, --brand-blue-*, --brand-amber-*) live at the top
of :root; the semantic tokens (--primary, --accent, --success-*,
etc.) reference them. Swap the brand scales and the entire system shifts
without touching components.
To opt a single app surface into a light sidebar, override the
--sidebar-* tokens inside that surface's scope.
Since 5.3.0 there is also a runtime brand axis: data-brand="aec"
(default, identical to no attribute) or data-brand="estate" on <html>,
driven by useTheme().setBrand(). Brand files live in src/brands/ and
override only brand-axis tokens; the theme axis (data-theme) is
untouched by them. See docs/DESIGN_TOKENS.md → "Brand axis".
Soft button materiality
<Button variant="default"> ships the Soft material — vertical
gradient, navy-tinted layered shadow, white inner highlight, and a
1 px translate on :active. This is the recommended default per the
design system. To restore a flat-shadcn appearance, use variant="ghost"
or variant="outline".
Status
v2 — Enirman Design System tokens, primitives, and AppShell. Branch
v2; consumer apps (e.g. enirman_connect) bump after merge.
Related Packages
Adaptive Raindrop component library for Vue 3 — Reka UI primitives styled with t...
A collection of reusable Vue 3 components built with Reka UI and Tailwind CSS, f...
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 5.3.0 | ^3.4.0 | ||
| 5.2.1 | ^3.4.0 | ||
| 5.2.0 | ^3.4.0 | ||
| 5.1.1 | ^3.4.0 | ||
| 5.0.0 | ^3.4.0 | ||
| 4.1.0 | ^3.4.0 | ||
| 4.0.8 | ^3.4.0 | ||
| 4.0.7 | ^3.4.0 | ||
| 4.0.6 | ^3.4.0 | ||
| 4.0.5 | ^3.4.0 | ||
| 4.0.4 | ^3.4.0 | ||
| 4.0.3 | ^3.4.0 | ||
| 4.0.2 | ^3.4.0 | ||
| 4.0.1 | ^3.4.0 | ||
| 4.0.0 | ^3.4.0 | ||
| 3.2.0 | ^3.4.0 | ||
| 3.1.0 | ^3.4.0 | ||
| 3.0.2 | ^3.4.0 | ||
| 3.0.1 | ^3.4.0 | ||
| 3.0.0 | ^3.4.0 | ||
| 1.4.3 | ^3.4.0 | ||
| 1.4.2 | ^3.4.0 | ||
| 1.4.1 | ^3.4.0 | ||
| 1.4.0 | ^3.4.0 | ||
| 1.3.0 | ^3.4.0 | ||
| 1.2.2 | ^3.4.0 | ||
| 1.2.1 | ^3.4.0 | ||
| 1.2.0 | ^3.4.0 | ||
| 1.1.0 | ^3.4.0 | ||
| 1.0.0 | ^3.4.0 | MIT |