# 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).