feat(30-button-primary-color): separate CTA color from section headings

Phase 30 complete:\n- split semantic tokens for actions vs informational headings\n- update primary/outline button styles and rebuild CSS assets\n- update TODO/docs and close PAUL loop with SUMMARY
2026-03-25 21:59:37 +01:00
parent f592203b60
commit 9cbe0a89f0
12 changed files with 623 additions and 3372 deletions
--- a/.paul/phases/30-button-primary-color/30-01-PLAN.md
+++ b/.paul/phases/30-button-primary-color/30-01-PLAN.md
@@ -0,0 +1,163 @@
+---
+phase: 30-button-primary-color
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - resources/scss/shared/_ui-components.scss
+  - resources/scss/modules/_printing.scss
+  - public/assets/css/app.css
+  - DOCS/ARCHITECTURE.md
+  - DOCS/TECH_CHANGELOG.md
+  - DOCS/todo.md
+autonomous: true
+---
+
+<objective>
+## Goal
+Zaplanowac wdrozenie zmiany z `DOCS/todo.md` pkt 39: glowny kolor przyciskow ma zostac zmieniony z niebieskiego na inny, aby nie mylil sie wizualnie z naglowkami sekcji.
+
+## Purpose
+Poprawa czytelnosci interfejsu i szybsze rozroznianie elementow akcji (przyciski) od elementow informacyjnych (naglowki `section-title`).
+
+## Output
+Gotowa implementacja nowego koloru akcji w warstwie SCSS (bez inline CSS), przebudowany `public/assets/css/app.css`, oraz aktualizacja dokumentacji technicznej i statusu punktu 39 na liscie TODO.
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+@.paul/STATE.md
+@DOCS/todo.md
+@DOCS/ARCHITECTURE.md
+@DOCS/DB_SCHEMA.md
+
+## Source Files
+@resources/scss/shared/_ui-components.scss
+@resources/scss/modules/_printing.scss
+@resources/scss/app.scss
+@public/assets/css/app.css
+</context>
+
+<skills>
+## Required Skills (from SPECIAL-FLOWS.md)
+
+| Skill | Priority | When to Invoke | Loaded? |
+|-------|----------|----------------|---------|
+| `sonar-scanner` | required | Po APPLY, przed UNIFY | done |
+| /frontend-design | optional | Przy finalnym dopracowaniu kontrastu i czytelnosci UI | pending |
+| /code-review | optional | Po implementacji, przed UNIFY | pending |
+
+**BLOCKING:** Required skills MUST be loaded before APPLY proceeds.
+Run each skill command or confirm already loaded.
+
+## Skill Invocation Checklist
+- [x] `sonar-scanner` uruchomiony po APPLY
+- [ ] /frontend-design (opcjonalnie) jesli potrzebna korekta kontrastu
+- [ ] /code-review (opcjonalnie) przed UNIFY
+
+</skills>
+
+<acceptance_criteria>
+
+## AC-1: Rozdzielenie kolorow naglowkow i przyciskow
+```gherkin
+Given interfejs korzysta z globalnych tokenow kolorow
+When widok renderuje `section-title` oraz `btn btn--primary`
+Then glowny przycisk nie uzywa niebieskiego koloru bazowego naglowkow i jest latwo odroznialny wizualnie
+```
+
+## AC-2: Spojne stany przyciskow akcji
+```gherkin
+Given przyciski glownych akcji (`.btn--primary` i `.btn--outline-primary`)
+When uzytkownik wejdzie w hover/focus
+Then wszystkie stany korzystaja z nowej palety akcji i zachowuja czytelnosc
+```
+
+## AC-3: Zmiana wdrozona zgodnie ze standardem projektu
+```gherkin
+Given standard frontendowy orderPRO
+When zmiana zostanie zakonczona
+Then style sa utrzymane w plikach SCSS, assets sa zbudowane do `public/assets/css/app.css`, a dokumentacja i TODO sa zaktualizowane
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Wydzielenie palety kolorow dla akcji (buttons)</name>
+  <files>resources/scss/shared/_ui-components.scss</files>
+  <action>
+    Wprowadz oddzielne tokeny kolorystyczne dla przyciskow akcji (np. `--c-action-primary`, `--c-action-primary-dark`, opcjonalny token focus-ring),
+    pozostawiajac `--c-primary` dla elementow informacyjnych (naglowki/linki), aby nie mieszac semantyki.
+    Podlacz nowe tokeny do `.btn--primary` oraz focusa przyciskow.
+    Unikaj zmian w HTML/PHP - zakres to warstwa stylow.
+  </action>
+  <verify>rg -n "c-action-primary|btn--primary|focus-ring" resources/scss/shared/_ui-components.scss</verify>
+  <done>AC-1 satisfied: primary button nie korzysta juz z tej samej niebieskiej bazy co `section-title`.</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: Ujednolicenie wariantow przyciskow zaleznych od primary</name>
+  <files>resources/scss/modules/_printing.scss, resources/scss/shared/_ui-components.scss</files>
+  <action>
+    Zaktualizuj miejsca, ktore semantycznie reprezentuja glowna akcje, aby korzystaly z nowej palety akcji
+    (w szczegolnosci `.btn--outline-primary` i pokrewne stany), bez zmiany logiki UI.
+    Zachowaj kompaktowosc interfejsu i aktualne rozmiary komponentow.
+  </action>
+  <verify>rg -n "btn--outline-primary|c-primary|c-action-primary" resources/scss/modules/_printing.scss resources/scss/shared/_ui-components.scss</verify>
+  <done>AC-2 satisfied: stany hover/focus dla przyciskow sa spojne i oparte o nowy kolor akcji.</done>
+</task>
+
+<task type="auto">
+  <name>Task 3: Build assets i aktualizacja dokumentacji zmiany</name>
+  <files>public/assets/css/app.css, DOCS/ARCHITECTURE.md, DOCS/TECH_CHANGELOG.md, DOCS/todo.md</files>
+  <action>
+    Zbuduj CSS (`npm run build:css`) po zmianach SCSS.
+    Zaktualizuj dokumentacje techniczna (ARCHITECTURE + TECH_CHANGELOG) o nowy standard rozdzielenia kolorow akcji i naglowkow.
+    Oznacz punkt 39 w `DOCS/todo.md` jako zrealizowany po pozytywnej weryfikacji.
+  </action>
+  <verify>npm run build:css oraz manualny check ekranow z przyciskami i naglowkami (np. orders/list, settings/*)</verify>
+  <done>AC-3 satisfied: assets + dokumentacja + status TODO sa zgodne z wymaganiami projektu.</done>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- `database/migrations/*`
+- Logika backendu PHP (kontrolery/repozytoria/serwisy)
+- Moduly alertow `resources/modules/jquery-alerts/*` (poza zakresem tej zmiany)
+
+## SCOPE LIMITS
+- Zakres dotyczy tylko zmiany glównego koloru przyciskow i powiazanych tokenow wizualnych.
+- Bez redesignu layoutu, bez zmian spacingu i bez realizacji innych punktow z `DOCS/todo.md`.
+- Brak zmian kontraktow API i brak zmian schematu DB.
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] `npm run build:css` przechodzi bez bledow
+- [ ] Widoczna roznica miedzy `section-title` i `btn--primary` na kluczowych ekranach
+- [ ] Brak inline CSS w widokach
+- [ ] `DOCS/ARCHITECTURE.md` i `DOCS/TECH_CHANGELOG.md` zaktualizowane
+- [ ] `DOCS/todo.md` punkt 39 oznaczony jako zrealizowany
+- [ ] All acceptance criteria met
+</verification>
+
+<success_criteria>
+- Wszystkie taski zakonczone
+- Build CSS zakonczony sukcesem
+- Kontrast semantyczny: naglowki i glowny CTA nie myla sie kolorystycznie
+- Zmiana udokumentowana i gotowa do UNIFY
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/30-button-primary-color/30-01-SUMMARY.md`
+</output>
+
--- a/.paul/phases/30-button-primary-color/30-01-SUMMARY.md
+++ b/.paul/phases/30-button-primary-color/30-01-SUMMARY.md
@@ -0,0 +1,133 @@
+---
+phase: 30-button-primary-color
+plan: 01
+subsystem: ui
+tags: [scss, css, ui, design]
+requires:
+  - phase: 29-delivery-status-mapping-ui
+    provides: global UI conventions based on section-title and shared button classes
+provides:
+  - separated color tokens for action buttons vs section headings
+  - updated primary/outline button styles in SCSS and built CSS assets
+affects: [frontend-styling, visual-consistency, docs]
+tech-stack:
+  added: [none]
+  patterns: [semantic-color-tokens]
+key-files:
+  created: [.paul/phases/30-button-primary-color/30-01-SUMMARY.md]
+  modified:
+    - resources/scss/shared/_ui-components.scss
+    - resources/scss/modules/_printing.scss
+    - public/assets/css/app.css
+    - DOCS/ARCHITECTURE.md
+    - DOCS/TECH_CHANGELOG.md
+    - DOCS/todo.md
+key-decisions:
+  - "Action colors decoupled from informational heading colors"
+  - "Primary/outline buttons now consume action tokens"
+patterns-established:
+  - "Use --c-primary for informational accents (links/section-title)"
+  - "Use --c-action-primary for call-to-action buttons"
+duration: 11min
+started: 2026-03-25T21:40:00+01:00
+completed: 2026-03-25T21:51:00+01:00
+---
+
+# Phase 30 Plan 01: Button Primary Color Distinction Summary
+
+**Wydzielono semantyczna palete kolorow akcji, dzieki czemu przyciski glownych akcji nie myla sie wizualnie z naglowkami sekcji.**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | 11 min |
+| Started | 2026-03-25T21:40:00+01:00 |
+| Completed | 2026-03-25T21:51:00+01:00 |
+| Tasks | 3 completed |
+| Files modified | 10 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Rozdzielenie kolorow naglowkow i przyciskow | Pass | `btn--primary` przeniesiony na `--c-action-primary`, `section-title` pozostaje na `--c-primary`. |
+| AC-2: Spojne stany przyciskow akcji | Pass | `btn--primary`, focus i `btn--outline-primary` korzystaja z tej samej palety akcji. |
+| AC-3: Zmiana wdrozona zgodnie ze standardem projektu | Pass | Zmiany w SCSS + build do `public/assets/css/app.css` + aktualizacje dokumentacji i TODO. |
+
+## Accomplishments
+
+- Wprowadzono dedykowane tokeny akcji (`--c-action-primary`, `--c-action-primary-dark`, `--focus-ring-action`) bez naruszania koloru informacyjnego `--c-primary`.
+- Ujednolicono przyciski glownych akcji i ich stany hover/focus w calym UI.
+- Zakonczono wymagania planu wraz ze skanem `sonar-scanner` i aktualizacja dokumentacji technicznej.
+
+## Verification Results
+
+- `rg -n "c-action-primary|btn--primary|focus-ring-action" resources/scss/shared/_ui-components.scss` -> PASS
+- `rg -n "btn--outline-primary|c-action-primary" resources/scss/modules/_printing.scss` -> PASS
+- `npm run build:css` -> PASS
+- `sonar-scanner` -> PASS (`ANALYSIS SUCCESSFUL`, project `orderPRO`)
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `.paul/phases/30-button-primary-color/30-01-SUMMARY.md` | Created | Podsumowanie UNIFY planu 30-01 |
+| `resources/scss/shared/_ui-components.scss` | Modified | Dodanie tokenow akcji + przepiecie `btn--primary` i focus |
+| `resources/scss/modules/_printing.scss` | Modified | Przepiecie `btn--outline-primary` na token akcji |
+| `public/assets/css/app.css` | Modified | Build CSS po zmianach SCSS |
+| `public/assets/css/login.css` | Modified | Rebuild assets (`npm run build:css`) |
+| `DOCS/ARCHITECTURE.md` | Modified | Aktualizacja standardu kolorow UI |
+| `DOCS/TECH_CHANGELOG.md` | Modified | Log zmian technicznych dla fazy 30 |
+| `DOCS/todo.md` | Modified | Punkt 39 oznaczony jako wykonany |
+| `.paul/STATE.md` | Modified | Zamkniecie loopa i aktualizacja pozycji |
+| `.paul/ROADMAP.md` | Modified | Status fazy/milestone po UNIFY |
+
+## Decisions Made
+
+| Decision | Rationale | Impact |
+|----------|-----------|--------|
+| Action colors decoupled from heading colors | Niebieskie CTA mylilo sie z naglowkami `section-title` | Lepsza czytelnosc i szybsze rozpoznanie akcji |
+| Keep `--c-primary` for informational accents | Zachowanie dotychczasowej semantyki linkow i naglowkow | Mniejsza skala zmian i brak regresji semantycznej |
+
+## Deviations from Plan
+
+### Summary
+
+| Type | Count | Impact |
+|------|-------|--------|
+| Auto-fixed | 1 | Niski - naprawa formatowania wpisu w changelogu bez zmian zakresu |
+| Scope additions | 0 | Brak |
+| Deferred | 0 | Brak |
+
+**Total impact:** Minimalny, bez scope creep.
+
+### Auto-fixed Issues
+
+1. Wpis changeloga po pierwszym zapisie mial artefakty formatowania; zostal nadpisany poprawna trescia UTF-8.
+
+### Deferred Items
+
+None — plan executed exactly as written.
+
+## Skill Audit
+
+| Expected | Invoked | Notes |
+|----------|---------|-------|
+| `sonar-scanner` | ✓ | Wymagany skill uruchomiony po APPLY |
+
+## Next Phase Readiness
+
+**Ready:**
+- Standard kolorow akcji jest zdefiniowany i udokumentowany.
+- Todo item 39 zamkniety.
+
+**Concerns:**
+- Optional `/frontend-design` i `/code-review` nie byly wymagane do domkniecia zakresu tej mikro-zmiany.
+
+**Blockers:**
+- None.
+
+---
+*Phase: 30-button-primary-color, Plan: 01*
+*Completed: 2026-03-25*