Optimise for Large Screen Resolutions

[fleven-kds]

Identified Problems:

• Font size and spacing stop scaling beyond the breakpoint desktop which is set to 1200px by default
• For components with image backgrounds, it's often necessary to set the section width to full to achieve the classic "hero" look. However, this results in losing all layout options for the component's content
• There is a lack of options for creating large layouts at the desktop breakpoint that also scale well at the tv breakpoint. On desktop, the full setting is often needed to fill the screen, but this is too expansive on tv (See Image Story image size/position ruhmesmeile#21)
• The content-width tokens are very close to each other. With large font sizes and spacings and on tv, the differences are barely noticeable

What we've done so far:

• Added new widescreen (>1950px) and tv (>2600px) breakpoints in the style dictionary for larger screens
• Added global content--width and map the section__content--width to the new token
• Decoupled the concept of background images from components and implemented them in sections, enabling more dynamic layouts (See: Add Section background image support kickstartDS#1708)
• Changed the format of content--width to a calculation based on font-size-copy-m
• Increased the width of content--width_wide
• Reduced the width of content--widht_narrow
• Added global tile--width token also calculated based on font-size-copy-m

Possible remaining improvements/discussions:

• Would it help to decouple full/max from large layouts around 1920px? For example introducing a new content--width token (something like extraWide) for approximately 1920px? This way we could do layouts that are large on desktop but don't nessecarily span the entire screen => Lets test if the increased wide width suffices for large layouts thus eliminating the necessity of a new option
• Do we remove any Background Image properties in components as its now redundant with the section property? => No, as a components Background Image still has its own purpose
• Do we add a Background Color property to the section? => Yes :)