refactor(sf-19): BestLayouts inline hex → Tailwind tokens #296

Merged

lekss361 merged 1 commit from fix/sf-19-best-layouts-hex-tokens into main

2026-05-17 14:17:05 +00:00

lekss361 commented

2026-05-17 14:06:16 +00:00

Owner

Summary

SF FixList #19 (Wave 3) — BestLayoutsBlock.tsx использовал inline hex (CONFIDENCE_STYLES с #dcfce7, #fef3c7, #fee2e2 etc) — нарушение .claude/rules/ui-ux.md. Полный refactor на Tailwind utilities + CSS tokens.

Changes

frontend/src/components/site-finder/BestLayoutsBlock.tsx:

CONFIDENCE_STYLES — refactored с {bg, fg, label} (inline style) на {cls, label} (Tailwind classNames):

high: bg-emerald-100 text-emerald-800
medium: bg-amber-100 text-amber-800
low: bg-rose-100 text-rose-800

Все остальные hex → CSS tokens:

Text: var(--fg-primary), var(--fg-secondary), var(--fg-tertiary)
Accent: var(--accent), var(--accent-soft)
Surfaces: var(--bg-card), var(--bg-card-alt), var(--bg-app)
Borders: var(--border-card), var(--border-soft), var(--border-strong)
Semantic: var(--danger-soft), var(--danger)
Data-viz: var(--viz-1..5) для UnitMixBar COLORS
Dynamic disabled state: var(--fg-tertiary) вместо #9ca3af

Полная mapping table в vault fixes/Fix_SF_BestLayouts_HexTokens_May17.md.

Test plan

Confidence badge colors visible (green/yellow/red)
UnitMixBar color sequence консистентный с другими частями
Button disabled state — серый
tsc --noEmit pass (✅ verified — нет ошибок в этом файле)
Visual smoke на test_cad — Confidence + UnitMixBar выглядят как раньше

Related: epic #271 item #19 · Wave 3 (P2) · cleanup

## Summary SF FixList #19 (Wave 3) — `BestLayoutsBlock.tsx` использовал inline hex (`CONFIDENCE_STYLES` с `#dcfce7`, `#fef3c7`, `#fee2e2` etc) — нарушение `.claude/rules/ui-ux.md`. Полный refactor на Tailwind utilities + CSS tokens. ## Changes `frontend/src/components/site-finder/BestLayoutsBlock.tsx`: **`CONFIDENCE_STYLES`** — refactored с `{bg, fg, label}` (inline style) на `{cls, label}` (Tailwind classNames): - high: `bg-emerald-100 text-emerald-800` - medium: `bg-amber-100 text-amber-800` - low: `bg-rose-100 text-rose-800` **Все остальные hex → CSS tokens:** - Text: `var(--fg-primary)`, `var(--fg-secondary)`, `var(--fg-tertiary)` - Accent: `var(--accent)`, `var(--accent-soft)` - Surfaces: `var(--bg-card)`, `var(--bg-card-alt)`, `var(--bg-app)` - Borders: `var(--border-card)`, `var(--border-soft)`, `var(--border-strong)` - Semantic: `var(--danger-soft)`, `var(--danger)` - Data-viz: `var(--viz-1..5)` для `UnitMixBar COLORS` - Dynamic disabled state: `var(--fg-tertiary)` вместо `#9ca3af` Полная mapping table в vault `fixes/Fix_SF_BestLayouts_HexTokens_May17.md`. ## Test plan - [ ] Confidence badge colors visible (green/yellow/red) - [ ] UnitMixBar color sequence консистентный с другими частями - [ ] Button disabled state — серый - [ ] tsc --noEmit pass (✅ verified — нет ошибок в этом файле) - [ ] Visual smoke на test_cad — Confidence + UnitMixBar выглядят как раньше Related: epic #271 item #19 · Wave 3 (P2) · cleanup

lekss361 added 1 commit 2026-05-17 14:06:17 +00:00

refactor(sf-19): BestLayouts inline hex → Tailwind / CSS tokens f0edc8cfcd

Replace all hardcoded hex colors in BestLayoutsBlock.tsx with design
tokens (var(--accent), var(--fg-*), var(--bg-*), var(--border-*),
var(--success-soft) etc.) and Tailwind utilities for CONFIDENCE_STYLES
badge classes (bg-emerald-100/text-emerald-800, bg-amber-100/text-amber-800,
bg-rose-100/text-rose-800). No logic or behavior changes.

Epic #271 item #19.

lekss361 merged commit a86cce79af into main

2026-05-17 14:17:05 +00:00

lekss361 referenced this pull request from a commit

2026-05-17 14:17:06 +00:00

refactor(sf-19): BestLayouts inline hex → Tailwind tokens (#296)

lekss361 commented

2026-05-17 14:17:31 +00:00

Author

Owner

Merged via deep-code-reviewer — verdict APPROVE.

Verified:

0 hex remaining в BestLayoutsBlock.tsx (grep #[0-9a-fA-F]{3,8} → empty)
All var(--*) tokens exist в design system (.claude/rules/ui-ux.md token list): --fg-primary/secondary/tertiary/on-dark, --accent/accent-soft, --bg-card/card-alt/app, --border-card/soft/strong, --danger/danger-soft, --viz-1..5
Tailwind utilities (bg-emerald-100/text-emerald-800, bg-amber-100, bg-rose-100, bg-gray-50, bg-blue-50, text-gray-400) — все из default Tailwind 4 palette
TS type narrowed: { bg, fg, label } → { cls, label } корректно
Backward compat: props signature BestLayoutsBlock({ cadNum, selectedCompetitorObjIds }) без изменений
Visual fidelity: disabled #9ca3af → var(--fg-tertiary) (#73767E) — slight darkening but per design system
Pattern consistency: SuccessRecommendationBlock.tsx уже использует те же tokens (precedent)

Minor notes (не блокирующие):

bg-blue-50 (#eff6ff) для CompetitorDrillIn row — было #f0f4ff. Идеально было бы var(--accent-soft) (#DBEAFE) для полного alignment, но Tailwind utility приемлем
UnitMixBar 6-я позиция COLORS повторяет viz-3 (предел data-viz палитры в 5 цветов) — ожидаемо
border: "1px solid var(--danger-soft)" для error banner — soft tone vs prev #fca5a5. Acceptable per token system.

Closes SF FixList #19. Wave 3 cleanup продвигается.

Merged via deep-code-reviewer — verdict APPROVE. **Verified:** - 0 hex remaining в `BestLayoutsBlock.tsx` (grep `#[0-9a-fA-F]{3,8}` → empty) - All `var(--*)` tokens exist в design system (`.claude/rules/ui-ux.md` token list): `--fg-primary/secondary/tertiary/on-dark`, `--accent/accent-soft`, `--bg-card/card-alt/app`, `--border-card/soft/strong`, `--danger/danger-soft`, `--viz-1..5` - Tailwind utilities (`bg-emerald-100/text-emerald-800`, `bg-amber-100`, `bg-rose-100`, `bg-gray-50`, `bg-blue-50`, `text-gray-400`) — все из default Tailwind 4 palette - TS type narrowed: `{ bg, fg, label }` → `{ cls, label }` корректно - Backward compat: props signature `BestLayoutsBlock({ cadNum, selectedCompetitorObjIds })` без изменений - Visual fidelity: disabled `#9ca3af` → `var(--fg-tertiary)` (#73767E) — slight darkening but per design system - Pattern consistency: `SuccessRecommendationBlock.tsx` уже использует те же tokens (precedent) **Minor notes (не блокирующие):** - `bg-blue-50` (#eff6ff) для CompetitorDrillIn row — было `#f0f4ff`. Идеально было бы `var(--accent-soft)` (#DBEAFE) для полного alignment, но Tailwind utility приемлем - `UnitMixBar` 6-я позиция COLORS повторяет `viz-3` (предел data-viz палитры в 5 цветов) — ожидаемо - `border: "1px solid var(--danger-soft)"` для error banner — soft tone vs prev `#fca5a5`. Acceptable per token system. Closes SF FixList #19. Wave 3 cleanup продвигается.