dcalc/frontend-ui

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 28 component families: Button, Badge, Panel, Input, NumberField, Checkbox, RadioGroup, Switch, Rating, Select, Slider, Progress, Tabs, ItemSlot, DataTable, Tooltip, DropdownMenu, Dialog, Autocomplete, Navigation, DataSection, ScrollArea, Settings, ShopItemRow, TreeSelect, Cascader, Pagination and Popover.

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.