dcalc/frontend-ui/README.md

DCalc frontend-ui

frontend-ui is the progressive UI refactor of the current frontend application. The original project remains available as the behavior baseline.

Foundation

• Vue 3, Vue Router, Pinia, Vite and TypeScript track the current stable release line.
• Reka UI provides accessible interaction primitives.
• Tailwind CSS 4 provides layout utilities without Preflight during the migration period.
• CSS variables define the stable semantic contract between components and themes.
• SCSS/CSS remains available for game textures, image borders and state effects.
• class-variance-authority defines component variants in the local, source-owned UI layer.
• Oxc (oxlint and oxfmt) handles linting and formatting.

Theme model

Components consume --ui-* semantic variables. Each skin maps its own palette and effects to that contract under [data-theme]. Add a theme stylesheet and register it in useTheme.ts; component code should not need to change.

The initial themes are:

• dcalc: tokens captured from design/src-web.
• midnight: a second skin used to verify that components are not coupled to the classic palette.

Commands

pnpm install
pnpm dev
pnpm check
pnpm build

Open /components for the complete catalog of currently introduced components and their live interactions. /ui-preview remains the smaller foundation smoke-test page.

See docs/ui-migration-standard.md for the reusable component migration, theming, responsive implementation and browser QA standard.

The current catalog covers Button, Badge, Panel, Input, NumberField, Checkbox, RadioGroup, Switch, Rating, Select, Slider, Progress, Tabs, ItemSlot, DataTable, Tooltip, DropdownMenu and Dialog.

Migration rule

New UI components live under src/components/ui. Route changes, keyboard shortcuts and DNF data mapping belong to pages, composables or domain components instead of generic primitives. Existing calc-* components remain only until their business call sites are migrated.