Skip to content

IBX-12322: Harmonized container shadows on the design-system token - #2037

Open
tischsoic wants to merge 2 commits into
6.0from
IBX-12322-neutral-shadow-color
Open

IBX-12322: Harmonized container shadows on the design-system token#2037
tischsoic wants to merge 2 commits into
6.0from
IBX-12322-neutral-shadow-color

Conversation

@tischsoic

@tischsoic tischsoic commented Aug 27, 2026

Copy link
Copy Markdown
Contributor
🎫 Issue IBX-12322

Related PRs:

ibexa/design-system must merge first — admin-ui-assets pins the design system as #main, so this change only renders once the design-system PR has landed and been rolled into admin-ui-assets.

Description:

Container surfaces each hard-coded their own copy of the 4px 22px 47px shadow with a different colour and alpha, so .ibexa-tab-content rendered a blue shadow right next to .ibexa-container's.

Adds $ibexa-container-box-shadow, sourced from the design-system $box-shadow-medium (#CFD0D0 @ 10%), and uses it for the container surfaces: .ibexa-container, .ibexa-tab-content, .ibexa-adaptive-filters, .ibexa-collapse--heavy and the UDW search top bar. It lives in the alias layer, so the other packages reach it through the custom.scss they already @use — no new imports anywhere.

$ibexa-edit-header-box-shadow is deliberately kept: its remaining consumers are floating/transient (chart, back-to-top, Page Builder timeline and tooltips), not containers, so renaming it would be a BC break and would mislabel them.

Also drops three declarations with no call sites left — $ibexa-context-menu-box-shadow and the container-box-shadow / container-box-shadow-right mixins. container-box-shadow-left stays; _extra-actions.scss still includes it.

Tooltips, popovers, dropdowns, drag-hover lifts, edge shadows and repeated list/grid items keep their current shadows — harmonizing those is IBX-12222.

For QA:

The new shadow is deliberately very subtle: #CFD0D0 at 10% composites to roughly #FAFAFA on white, so it reads as a faint lift rather than the previous purple glow. Please don't report the faintness as a bug.

  • /admin/role/list and /admin/product/list — container and filter panel
  • /admin/view/content/<id>/full/<version>/<location> — tab content, now the same shadow as the container above it
  • UDW → Select Item → Search tab — the search top bar

Documentation:

tischsoic and others added 2 commits August 21, 2026 09:16
The Design System specifies the container shadow at 10% opacity, so
point $ibexa-edit-header-box-shadow at $box-shadow-medium instead of
$box-shadow-large (15%).

Co-Authored-By: Claude <noreply@anthropic.com>
Container surfaces each hard-coded their own copy of the 4/22/47 shadow
with a different colour and alpha, so .ibexa-tab-content rendered a blue
shadow next to .ibexa-container's neutral one.

Add $ibexa-container-box-shadow, sourced from the DS $box-shadow-medium,
and use it for the container surfaces. It lives in the alias layer so
other packages reach it through the custom.scss they already @use, with
no new imports. $ibexa-edit-header-box-shadow is left alone — its other
consumers are floating/transient elements, not containers.

Also drop three declarations with no remaining call sites:
$ibexa-context-menu-box-shadow and the container-box-shadow /
container-box-shadow-right mixins. container-box-shadow-left stays; it is
still included by _extra-actions.scss.

Co-Authored-By: Claude <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants