[Notification-overlay] Title classes get margin-top on modal with internet styles

[imagoiq]

When using @use "@swisspost/design-system-styles/index.scss"; and code example from https://design-system.post.ch/#/post-samples/notification-overlay , we get unwanted margin-top with all titles:

[imagoiq]

So the issue seems present since the beginning, here is the culprit and PR:

design-system/packages/web-styles/src/layouts/portal/_type.scss

Line 53 in d69e86b

margin-top: map.get(spacing.$post-sizes, 'bigger-big');

This type for the portal style is only loaded on external apps (and so index.scss). Source:

design-system/packages/web-styles/src/post-portal.scss

Line 13 in d69e86b

@use './layouts/portal';

I guess this was never seen as the Notification overlays are not used on external apps? I'm not sure what is the right fix. I don't think those portal´styles should be part of the design system. @gfellerph @alizedebray @oliverschuerch what do you think?

[gfellerph]

@imagoiq I would prefer a temporary fix in the portal styles. With the next major version, typographic styles will get a complete overhaul and this theme will be refactored anyways. We're also looking at design tokens which will render these styles obsolete.