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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user