feat(tenant): per-theme logos + file-upload + button UI polish

Replace the single tenant avatar with a pair of theme-scoped brand logos.
Render only the theme-matching <img> server-side and swap src on theme
toggle via a JS hook — no reload, no double request, no CSS tricks.

Tenant logos
- TenantLogoService (ImageUploadTrait) with theme whitelist and per-theme
  storage storage/tenants/{uuid}/logo/{light|dark}/, SIZES 128/256/512
- Public serving endpoint auth/tenant-logo-file so login can show the
  logo pre-auth; matching authenticated admin preview endpoint
- appTenantLogoUrl(?size, ?theme) with 4-step fallback cascade; PDF +
  mail always request 'light'
- Admin tenant edit: avatar block replaced by "Tenant logos" details
  block inside the Master-data tab, two side-by-side slots via Pico
  .grid with the core app-file-upload partial
- Policy rename ABILITY_ADMIN_TENANTS_AVATAR_VIEW -> LOGO_VIEW, action
  routes logo / logo-delete / logo-file with theme body/query param
- API endpoint path kept (backward compat), internals on new service
- CLI tenant:logo-migrate-avatars moves legacy avatar/ -> logo/light/
  idempotently (--dry-run, --yes, --cleanup)
- i18n "Tenant image" removed, 12 new keys synced across de/en

File upload component
- Full-width preview + filename/actions below (3D stack layout)
- Fixed 16:9 aspect ratio with 1rem inner padding for consistent
  preview size across any logo aspect
- Transparency checker pattern as background so black logos stay
  visible on dark mode and white logos on light mode
- form="" + deleteFormId support so the partial works with barrier
  forms inside another form

Buttons
- width:100% dropped from button[type="submit"]; scoped back via
  .login-main for the auth-flow primary CTA
- .outline base rule now tints background via color-mix of --app-color
  so secondary/primary/danger outlines all gain a subtle surface
- .outline.secondary restyled Stripe-style in both themes: solid white
  chip with soft shadow in light, solid elevated dark chip with white
  text in dark; neutral border replaces role-colored border
- .app-action-success/.app-action-danger outlines get color-mix bg +
  theme-aware outline-text tokens for stronger contrast
- Filled .primary/.app-action-success/.app-action-danger get raised
  box-shadow (inset highlight + drop) — opt-in via class so chrome
  buttons stay flat
- Dropped the legacy .secondary utility that was clobbering the
  custom-property cascade with a hardcoded muted color

Theme swap
- Logo img carries data-src-light + data-src-dark; theme-toggle JS
  swaps src when data-theme changes, keeping the topbar/login logo in
  sync without a page reload

Quality gates: PHPUnit (2045), PHPStan L5, CS-Fixer, docs link/drift,
codex skills sync — all green.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-24 20:25:53 +02:00
parent dbeac6b095
commit 6e3fc63c1d
43 changed files with 1009 additions and 282 deletions

View File

@@ -120,6 +120,26 @@
--app-text-selection-color: rgba(2, 154, 232, 0.25);
--app-muted-color: #646b79;
--app-muted-border-color: rgb(231, 234, 239.5);
--app-preview-checker-bg: #ffffff;
--app-preview-checker-fg: #eef0f3;
--app-button-filled-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.12);
--app-button-filled-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 4px rgba(0, 0, 0, 0.18);
--app-button-neutral-bg: #ffffff;
--app-button-neutral-bg-hover: #f6f8fa;
--app-button-neutral-border: #e3e6eb;
--app-button-neutral-border-hover: #c5c9d1;
--app-button-neutral-color: #1a1f2a;
--app-button-neutral-color-hover: #0b0f18;
--app-button-neutral-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(17, 24, 39, 0.08);
--app-button-neutral-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 4px rgba(17, 24, 39, 0.12);
--app-primary-h-light: 180.75;
--app-primary-s-light: 37.38%;
--app-primary-l-light: 58.04%;
@@ -293,6 +313,7 @@
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.45);
--app-action-success-outline-background: rgba(31, 122, 69, 0.14);
--app-action-success-outline-color: #155a32;
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
@@ -300,6 +321,7 @@
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.45);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.14);
--app-action-danger-outline-color: #8f2727;
--app-switch-background-color: #bfc7d9;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;
@@ -610,6 +632,26 @@
--app-text-selection-color: rgba(1, 170, 255, 0.1875);
--app-muted-color: #6e6e6c;
--app-muted-border-color: #2f2f2d;
--app-preview-checker-bg: #2a2a28;
--app-preview-checker-fg: #363634;
--app-button-neutral-bg: #30343b;
--app-button-neutral-bg-hover: #3b4048;
--app-button-neutral-border: #464b54;
--app-button-neutral-border-hover: #5b616c;
--app-button-neutral-color: #d5d9e0;
--app-button-neutral-color-hover: #ffffff;
--app-button-neutral-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(0, 0, 0, 0.3);
--app-button-neutral-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 2px 5px rgba(0, 0, 0, 0.35);
--app-button-filled-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 1px 2px rgba(0, 0, 0, 0.4);
--app-button-filled-shadow-hover:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 2px 5px rgba(0, 0, 0, 0.5);
--app-primary-h-dark: var(--app-primary-h-light, var(--app-primary-h-base));
--app-primary-s-dark: var(--app-primary-s-light, var(--app-primary-s-base));
--app-primary-l-dark: var(--app-primary-l-light, var(--app-primary-l-base));
@@ -792,6 +834,7 @@
--app-action-success-hover-border: #176238;
--app-action-success-focus-color: rgba(31, 122, 69, 0.5);
--app-action-success-outline-background: rgba(31, 122, 69, 0.2);
--app-action-success-outline-color: #4cc37a;
--app-action-danger-background: #b33636;
--app-action-danger-border: #b33636;
--app-action-danger-color: #fff;
@@ -799,6 +842,7 @@
--app-action-danger-hover-border: #952d2d;
--app-action-danger-focus-color: rgba(179, 54, 54, 0.5);
--app-action-danger-outline-background: rgba(179, 54, 54, 0.2);
--app-action-danger-outline-color: #e06666;
--app-switch-background-color: #3a3a38;
--app-switch-checked-background-color: var(--app-primary-background);
--app-switch-color: #fff;