4.3 KiB
4.3 KiB
Design migration matrix
design/src-web is the implementation source for component structure, CSS, assets and visual
interaction states. Migration means adapting that implementation to Vue and Reka UI; it does not
mean recreating the effect from screenshots.
Rules
- Port the existing DOM anatomy, CSS values and raster assets before optimizing them.
- Keep pixel-accurate atomic dimensions, but expose component width and density through props or CSS custom properties.
- Move reusable colors and metrics into semantic
--ui-*tokens after visual parity is established. - Keep page data, routing and stores outside
src/components/ui. - Delete a legacy
calc-*component only after all of its call sites have migrated.
Matrix
| Design source | Current target | Status | Migration notes |
|---|---|---|---|
foundations, shared |
style/tokens, style/themes, shared UI contract |
Migrated | Semantic color and overridable geometry contracts |
button |
ui/button |
Migrated | Preserved three-slice states; exposed density and width |
input |
ui/input, ui/number-field |
Migrated | Removed forced inline width; normalized text metrics |
form-controls |
ui/checkbox, ui/radio-group, ui/switch, ui/rating |
Migrated | Tokenized state colors and aligned label/control anatomy |
select |
ui/select |
Migrated | Preserved popup anatomy and Reka keyboard behavior |
tabs |
ui/tabs |
Migrated | Preserved list-owned animated marker |
slider |
ui/slider |
Migrated | Preserved the Reka coordinate system |
data-table |
ui/data-table |
Migrated | Ported hover, selected and density behavior |
dialog |
ui/dialog |
Migrated | Preserved the focused title effect and focus management |
menu |
ui/dropdown-menu |
Migrated | Ported source menu spacing and state tokens |
rarity |
ui/item-slot |
Migrated | Retained rarity presentation as data-semantic tokens |
autocomplete |
ui/autocomplete |
Migrated | Reka Combobox composition with source popup anatomy |
navigation |
ui/navigation |
Migrated | Selectable navigation primitive with source assets |
scrollbar |
ui/scroll-area |
Migrated | Reusable Reka viewport/scrollbar composition |
data-section |
ui/data-section |
Migrated | Collapsible section and vertically centered data rows |
shop-item-row |
ui/shop-item-row |
Migrated | Ported source row structure and selectable states |
complex-dialog |
ui/dialog + migrated primitives |
Composition | Kept domain-independent by composing existing primitives |
settings |
ui/settings |
Migrated | Responsive settings group, section and row primitives |
Legacy replacement order
Deferred: this component-library pass does not change business call sites.
- Shared form controls and overlays used by DNF Helper and import dialogs.
- Forge controls (
select,checkbox,slider, tabs and panels). - Equipment dictionary filters, tree, cascader and pagination.
- Skill tree, skill detail and VP controls.
- Result tables and remaining domain-specific components.