43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
|
# Proposal: carbon-ui-redesign
|
||
|
|
|
||
|
|
## Why
|
||
|
|
|
||
|
|
The tools pages are styled with ad-hoc Bootstrap 4 overrides and ad-hoc dialogs
|
||
|
|
(swal/toastr). Adopting the Carbon Design System gives the two tools a single
|
||
|
|
professional design language (IBM Plex typography, Carbon components, Carbon
|
||
|
|
tokens) consistent with the wider YOUreka ecosystem.
|
||
|
|
|
||
|
|
## What Changes
|
||
|
|
|
||
|
|
- **BREAKING (visual only)**: All three surfaces — landing, `/fingerprint`
|
||
|
|
wizard, `/cropper` — are rebuilt on Carbon Design System web components
|
||
|
|
(`@carbon/web-components` v2.50.0 via the IBM CDN, version-pinned) with IBM
|
||
|
|
Plex Sans typography and Carbon tokens for layout/colors.
|
||
|
|
- Bootstrap 4, swal, toastr and jQuery are removed from the pages; errors and
|
||
|
|
confirmations surface as Carbon inline notifications and toasts.
|
||
|
|
- Form fields use Carbon-styled native controls (text input, select, checkbox,
|
||
|
|
textarea) so Vue state bindings are unchanged; buttons, tags, notifications,
|
||
|
|
toasts, progress bar and tiles are Carbon web components.
|
||
|
|
- **Behavior is frozen**: flows, endpoints, validation and copy stay exactly as
|
||
|
|
they are. The vue-croppa crop pad is kept (no Carbon equivalent), framed in a
|
||
|
|
Carbon tile/panel.
|
||
|
|
|
||
|
|
## Capabilities
|
||
|
|
|
||
|
|
### New Capabilities
|
||
|
|
|
||
|
|
(none)
|
||
|
|
|
||
|
|
### Modified Capabilities
|
||
|
|
|
||
|
|
- `tools-app`: adds a requirement that the tools UI is built on Carbon Design
|
||
|
|
System web components with Carbon notifications.
|
||
|
|
|
||
|
|
## Impact
|
||
|
|
|
||
|
|
- Pages and `style.css` rewritten; `app.js` files adapted (notification/toast
|
||
|
|
models replace swal/toastr calls; `Vue.config.ignoredElements` for cds-*).
|
||
|
|
- No server-side changes; no new npm dependencies; component JS + Plex font +
|
||
|
|
Carbon CSS delivered via CDN (IBM CDN for components, jsdelivr for
|
||
|
|
@carbon/styles, Google Fonts for Plex).
|