@energycap/internal-ui

Shared Tailwind v4 theme + component classes for EnergyCAP internal tools. Framework-agnostic — works with any UI framework or server-rendered HTML; bring your own markup (Razor, React, plain HTML) and apply the classes. Components are built Tailwind-native (@apply), so sizing and spacing track Tailwind's scale and the build path requires Tailwind v4 — the prebuilt dist is standalone CSS.

Install

npm install @energycap/internal-ui

Consume

Tailwind v4 build (npm + PostCSS, Vite, etc.):

@import "tailwindcss";
@import "@energycap/internal-ui";

No build — link the precompiled bundle (reset + tokens + components, no utility layer):

<link rel="stylesheet" href="node_modules/@energycap/internal-ui/dist/internal-ui.css" />

Design tokens

All tokens are CSS variables on :root (so any CSS can use var(--…)), and the color tokens are also exposed as Tailwind utilities.

| Variable | Utility | Value | |----------|---------|-------| | --primary / --primary-hover | bg-primary / bg-primary-hover, text-primary | indigo 600 / 700 | | --primary-light | bg-primary-light, border-l-primary-light | indigo-400 (accent on dark surfaces) | | --primary-soft | — | indigo-300 (focus ring / soft fill) | | --hover / --selected | — | indigo-200 / indigo-100 (interactive row/surface hover + selected fills) | | --canvas | bg-canvas | slate-50 (page background) | | --surface / --surface-alt | bg-surface / bg-surface-alt | white / slate-100 | | --border / --border-strong | border-border / border-border-strong | slate-200 / slate-400 | | --ink / --ink-soft | text-ink / text-ink-soft | slate-900 / slate-800 | | --muted / --muted-strong | text-muted / text-muted-strong | slate-500 / slate-600 | | --on-dark / --on-dark-soft | text-on-dark / text-on-dark-soft | slate-100 / slate-300 (text on dark surfaces) | | --on-dark-muted / --on-dark-muted-strong | text-on-dark-muted / text-on-dark-muted-strong | slate-500 / slate-400 (muted text on dark) | | --success / --warning / --danger / --info | text-* / bg-* | green-600 / amber-600 / red-600 / blue-500 | | --danger-hover | bg-danger-hover | red-700 (solid danger button hover) | | --{success,warning,danger,info}-bg / -text | — | soft fill + readable text for alerts/badges | | --overlay | — | slate-900 @ 50% (modal backdrop scrim) | | --radius-sm/md/lg | rounded-sm/md/lg | 4 / 6 / 8 px (match Tailwind defaults) | | --shadow-card | — | card / panel elevation | | --shadow-overlay | — | modal / dialog elevation | | --font-sans / --font-mono | font-sans / font-mono | Inter / Cascadia Code |

Component classes

| Family | Classes | |--------|---------| | Buttons | .btn + .btn-primary / .btn-outline / .btn-danger, .btn-sm, .btn-icon-only (combine with .btn-sm for 24×24), .btn-group — 32px tall, 24px for .btn-sm | | Button toggle | .btn-toggle-group + .btn-toggle (radio = single-select, checkbox = multi), .btn-toggle-group-sm | | Forms | .form-group (> label), .form-control (input/select/textarea; supports readonly — muted, read-only — and disabled — inactive — states), .form-control-sm, .form-hint, .form-actions — 32px tall, 24px for .form-control-sm | | Cards | .card, .card-heading | | Tables | .table-container (+ .table-sticky) wrapping a <table>; .table-empty; .row-clickable + .row-anchor; .row-selected | | Badges | .badge + .badge-success/warning/danger/info/muted | | Alerts | .alert + .alert-success/warning/error/info (.alert-danger alias) | | Layout | .app-shell, .sidebar (.sidebar-brand/-nav/-footer, a.active, .nav-section), .main-content, .content-header, .subtitle, .toolbar, .pagination | | Modal | .modal (panel) — on a native <dialog> (::backdrop scrim, recommended) or inside a .modal-overlay scrim (no-JS fallback); .modal-header + .modal-title (close button is a regular .btn .btn-outline .btn-icon-only); .modal-body; .modal-footer |

See the kitchen-sink docs site (apps/docs) for live examples of every token and component.

Agent skills

npx @energycap/internal-ui install-skills      # -> ./.claude/skills

Build

npm run build         # compile dist/internal-ui.css (minified)
npm run build:debug   # same, unminified for inspection

Changelog

See CHANGELOG.md for release notes and breaking changes to review before upgrading.