fs
6e3fc63c1d
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>
138 lines
4.5 KiB
CSS
138 lines
4.5 KiB
CSS
@layer components {
|
|
/* Subtle 3D lift (inset top highlight + drop shadow) on filled
|
|
action-intent buttons only — explicit opt-in via class so chrome
|
|
buttons (topbar icons, aside icon bar, menu toggles) stay flat. */
|
|
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
|
|
.primary,
|
|
.app-action-success,
|
|
.app-action-danger,
|
|
.danger
|
|
):not(.outline):not(.contrast) {
|
|
box-shadow: var(--app-button-filled-shadow);
|
|
}
|
|
|
|
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):is(
|
|
.primary,
|
|
.app-action-success,
|
|
.app-action-danger,
|
|
.danger
|
|
):not(.outline):not(.contrast):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active
|
|
) {
|
|
box-shadow: var(--app-button-filled-shadow-hover);
|
|
}
|
|
|
|
/* Action button variants — success and danger colors with outline and focus states. */
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
|
|
--app-background-color: var(--app-action-success-background);
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-color);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-success-hover-background);
|
|
--app-border-color: var(--app-action-success-hover-border);
|
|
--app-color: var(--app-action-success-color);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]).outline {
|
|
--app-background-color: color-mix(in srgb, var(--app-action-success-border) 10%, transparent);
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-outline-color);
|
|
}
|
|
|
|
.app-action-success:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: color-mix(in srgb, var(--app-action-success-border) 22%, transparent);
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-outline-color);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):focus {
|
|
--app-box-shadow:
|
|
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
0 0 0 var(--app-outline-width) var(--app-action-success-focus-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]),
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]) {
|
|
--app-background-color: var(--app-action-danger-background);
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
),
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-danger-hover-background);
|
|
--app-border-color: var(--app-action-danger-hover-border);
|
|
--app-color: var(--app-action-danger-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
|
|
--app-background-color: color-mix(in srgb, var(--app-action-danger-border) 10%, transparent);
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-outline-color);
|
|
}
|
|
|
|
.danger:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
),
|
|
.app-action-danger:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: color-mix(in srgb, var(--app-action-danger-border) 22%, transparent);
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-outline-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
|
|
--app-box-shadow:
|
|
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
0 0 0 var(--app-outline-width) var(--app-action-danger-focus-color);
|
|
}
|
|
}
|