Optimise for large screen resolutions

package.json

@@ -79,11 +79,11 @@
   "devDependencies": {
     "@auto-it/npm": "^11.0.1",
     "@auto-it/released": "^11.0.1",
-    "@kickstartds/base": "^4.1.0",
-    "@kickstartds/blog": "^4.1.0",
+    "@kickstartds/base": "4.2.0-canary.1708.7098.0",
+    "@kickstartds/blog": "4.2.0-canary.1708.7098.0",
     "@kickstartds/content": "^4.0.0",
-    "@kickstartds/core": "^4.1.0",
-    "@kickstartds/form": "^4.1.0",
+    "@kickstartds/core": "^4.0.2",
+    "@kickstartds/form": "4.2.0-canary.1708.7098.0",
     "@kickstartds/jsonschema-utils": "^3.4.2",
     "@kickstartds/jsonschema2types": "^1.1.51",
     "@kickstartds/storybook-addon-component-tokens": "^3.0.0",

src/components/cta/cta.scss

@@ -123,8 +123,7 @@
     .c-storytelling__box:only-child {
       width: 100%;
       max-width: calc(
-        var(--l-section--content-width-default) -
-          calc(var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio))
+        var(--dsa-content--width_default) - calc(var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio))
       );
     }
 
@@ -144,7 +143,7 @@
 
     > .c-storytelling__image,
     > .c-storytelling__box {
-      max-width: calc(calc(var(--l-section--content-width-wide) / 2));
+      max-width: calc(calc(var(--dsa-content--width_wide) / 2));
     }
 
     &.dsa-cta--full-width {

src/components/footer/footer-tokens.scss

@@ -1,7 +1,7 @@
 .dsa-footer {
   --dsa-footer--background-color: var(--ks-background-color-default);
   --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
-  --dsa-footer--max-width: var(--l-section--content-width-wide);
+  --dsa-footer--max-width: var(--dsa-content--width_wide);
   --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
 
   --dsa-footer__byline--font: var(--ks-font-copy-xs);

src/components/footer/footer.scss

@@ -10,7 +10,7 @@
   &__content {
     padding: var(--l-section--space-small) var(--dsa-content--spacing);
     border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
-    max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
+    max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
     width: 100%;
     margin: auto;
     display: flex;

src/components/header/header-tokens.scss

@@ -12,7 +12,7 @@
 }
 
 .dsa-header {
-  --dsa-header--max-width: var(--l-section--content-width-max);
+  --dsa-header--max-width: var(--dsa-content--width_max);
   --dsa-header--background: var(--ks-background-color-default);
   --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
   --dsa-header__logo--height: var(--dsa-logo--height);

src/components/headline/headline.scss

@@ -79,7 +79,7 @@
   .dsa-headline__subheadline {
     font: var(--subheadline--font);
     margin: 0;
-    max-width: var(--l-section--content-width-default);
+    max-width: var(--dsa-content--width_default);
     color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
     font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
   }

src/components/hero/hero-tokens.scss

@@ -31,9 +31,10 @@
   --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
 
+  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
   --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
 
   --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
 }

src/components/hero/hero.scss

@@ -47,7 +47,7 @@
     }
 
     .c-visual__box {
-      --c-visual_box--max-width: 50rem;
+      --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
     }
   }
 }
@@ -77,7 +77,7 @@
   }
 
   .c-visual__content--indent {
-    max-width: var(--l-section--content-width-wide);
+    max-width: var(--dsa-content--width_wide);
   }
 
   @include container.size("≥", 640px, "visual") {
@@ -96,7 +96,7 @@
         position: relative;
 
         .c-visual__box {
-          --c-visual_box--max-width: var(--l-section--content-width-default);
+          --c-visual_box--max-width: var(--dsa-content--width_default);
         }
       }
     }

src/components/image-story/image-story.scss

@@ -7,7 +7,7 @@
 
   .c-storytelling__box {
     &__content {
-      max-width: var(--l-section--content-width-narrow);
+      max-width: var(--dsa-content--width_narrow);
     }
   }
 

src/components/logos/logos.scss

@@ -13,7 +13,7 @@
   &__tagline {
     font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
     font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
-    max-width: var(--l-section--content-width-narrow);
+    max-width: var(--dsa-content--width_narrow);
     color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
     width: 100%;
   }
@@ -29,7 +29,7 @@
 
     &__text {
       color: var(--ks-text-color-default);
-      max-width: var(--l-section--content-width-narrow);
+      max-width: var(--dsa-content--width_narrow);
     }
 
     &__text,

src/components/section/Section.stories.tsx

@@ -8,7 +8,7 @@ import { Section } from "./SectionComponent";
 import schema from "./section.schema.dereffed.json";
 import customProperties from "./section-tokens.json";
 
-const meta: Meta<typeof Section> = {
+const meta: Meta = {
   ...sectionStories,
   title: "Layout/Section",
   component: Section,

src/components/section/SectionComponent.tsx

@@ -33,6 +33,7 @@ export const SectionContextDefault = forwardRef<
       style = "default",
       spotlight = false,
       backgroundColor = "default",
+      backgroundImage,
       spaceBefore = "default",
       spaceAfter = "default",
       className,
@@ -78,6 +79,7 @@ export const SectionContextDefault = forwardRef<
           className
         )}
         background={backgroundColor}
+        backgroundImage={backgroundImage}
         content={content}
         headline={{
           ...headlineRest,

src/components/section/SectionProps.ts

@@ -43,6 +43,10 @@ export type Style =
  * Color of background
  */
 export type Style1 = "default" | "accent" | "bold";
+/**
+ * Background image for the whole section
+ */
+export type BackgroundImage = string;
 /**
  * Show spotlight behind cursor
  */
@@ -145,6 +149,7 @@ export interface SectionProps {
   width?: Width;
   style?: Style;
   backgroundColor?: Style1;
+  backgroundImage?: BackgroundImage;
   spotlight?: Spotlight;
   spaceBefore?: SpaceBefore;
   spaceAfter?: SpaceAfter;

src/components/section/section-tokens.scss

@@ -1,4 +1,6 @@
+@use "@kickstartds/core/source/core/container";
 @import "../../selectors";
+@include container.wrapper("section");
 
 .dsa-section {
   //Columns
@@ -13,9 +15,9 @@
   //Tile Width
   --dsa-section__tile--width_smallest: 14rem;
   --dsa-section__tile--width_default: 18rem;
-  --dsa-section__tile--width_medium: var(--l-section--content-width-narrow);
-  --dsa-section__tile--width_large: var(--l-section--content-width-default);
-  --dsa-section__tile--width_largest: var(--l-section--content-width-wide);
+  --dsa-section__tile--width_medium: var(--dsa-content--width_narrow);
+  --dsa-section__tile--width_large: var(--dsa-content--width_default);
+  --dsa-section__tile--width_largest: var(--dsa-content--width_wide);
 
   //Gutter
   --dsa-section--gutter_small: var(--ks-spacing-xs);
@@ -26,9 +28,9 @@
   --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
 
   //Content Width
-  --dsa-section__content--width_narrow: 46.5rem;
-  --dsa-section__content--width_default: 62rem;
-  --dsa-section__content--width_wide: 75rem;
+  --dsa-section__content--width_narrow: var(--dsa-content--width_narrow);
+  --dsa-section__content--width_default: var(--dsa-content--width_default);
+  --dsa-section__content--width_wide: var(--dsa-content--width_wide);
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
   --dsa-section__content--padding: var(--dsa-content--spacing);
@@ -40,7 +42,6 @@
 
   //Slider Arrows
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
-  --dsa-section__slider-arrow--background-color: transparent;
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
   --dsa-section__slider-arrow--opacity: 0.6;

src/components/section/section.schema.json

@@ -34,6 +34,12 @@
       "enum": ["default", "accent", "bold"],
       "default": "default"
     },
+    "backgroundImage": {
+      "title": "Background image",
+      "description": "Background image for the whole section",
+      "type": "string",
+      "format": "image"
+    },
     "spotlight": {
       "type": "boolean",
       "title": "Spotlight",

src/components/section/section.scss

@@ -1,32 +1,31 @@
 @use "section-tokens.scss";
 
 .l-section.dsa-section {
-  --l-section--gutter: var(--dsa-section--gutter_default);
+  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
+
+  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
+  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
 
   --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--min-width, 1fr);
+  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
   --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
 
-  --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
-  --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
-  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--l-section--content-width-narrow));
-  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--l-section--content-width-default));
-  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--l-section--content-width-wide));
-
-  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, 46.5rem);
-  --l-section--content-width-default: var(--dsa-section__content--width_default, 62rem);
-  --l-section--content-width-wide: var(--dsa-section__content--width_wide, 75rem);
-  --l-section--content-width-max: var(--dsa-section__content--width_max, 120rem);
-  --l-section--content-width-full: var(--dsa-section__content--width_full, 120rem);
+  --l-section--content-width-narrow: var(--dsa-section__content--width_narrow, var(--dsa-content--width_narrow));
+  --l-section--content-width-default: var(--dsa-section__content--width_default, var(--dsa-content--width_default));
+  --l-section--content-width-wide: var(--dsa-section__content--width_wide, var(--dsa-content--width_wide));
+  --l-section--content-width-max: var(--dsa-section__content--width_max, var(--dsa-content--width_max));
+  --l-section--content-width-full: var(--dsa-section__content--width_full, var(--dsa-content--width_full));
   --l-section--content-padding: var(--dsa-section__content--padding, var(--ks-spacing-m));
 
-  --l-section--background-default: var(--dsa-section--background-color_default, var(--ks-background-color-default));
-  --l-section--background-accent: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
-  --l-section--background-bold: var(--dsa-section--background-color_bold, var(--ks-background-color-primary));
-
-  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
-  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+  --l-section_tile-width--smallest: var(--dsa-section__tile--width_smallest, 14rem);
+  --l-section_tile-width--default: var(--dsa-section__tile--width_default, 18rem);
+  --l-section_tile-width--medium: var(--dsa-section__tile--width_medium, var(--dsa-content--width_narrow));
+  --l-section_tile-width--large: var(--dsa-section__tile--width_large, var(--dsa-content--width_default));
+  --l-section_tile-width--largest: var(--dsa-section__tile--width_largest, var(--dsa-content--width_wide));
 
+  --l-section--gutter: var(--dsa-section--gutter_default);
+  --dsa-section--gutter_none: 0;
   --l-section--gutter-small: var(--dsa-section--gutter_small, var(--ks-spacing-xs));
   --l-section--gutter-default: var(--dsa-section--gutter_default, var(--ks-spacing-m));
   --l-section--gutter-large: var(--dsa-section--gutter_large, var(--ks-spacing-xl));
@@ -35,27 +34,30 @@
   --l-section_slider-arrow--padding: var(--dsa-section__slider-arrow--padding, var(--ks-spacing-xs));
   --l-section_slider-arrow--color: var(--dsa-section__slider-arrow--color, var(--ks-text-color-interface-interactive));
   --l-section_slider-arrow--opacity: var(--dsa-section__slider-arrow--opacity, 0.6);
-  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opcaity_hover, 0.9);
+  --l-section_slider-arrow--opacity_hover: var(--dsa-section__slider-arrow--opacity_hover, 0.9);
   --l-section_slider-arrow--opacity_disabled: var(--dsa-section__slider-arrow--opacity_disabled, 0.3);
   --l-section_slider-arrow--background: var(--dsa-section__slider-arrow--background, transparent);
 
-  background-image: var(--dsa-section--background-image);
+  --l-section--space-default: var(--dsa-section--space_default, var(--ks-spacing-xxl));
+  --l-section--space-small: var(--dsa-section--space_small, calc(var(--l-section--space-default) / 2));
+}
 
+.l-section.dsa-section {
+  background-image: var(--dsa-section--background-image);
+  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
   position: relative;
 
-  &.l-section--gutter {
-    &-large {
-      --l-section--gutter: var(--dsa-section--gutter_large);
-    }
-    &-small {
-      --l-section--gutter: var(--dsa-section--gutter_small);
-    }
-    &-none {
-      --l-section--gutter: var(--dsa-section--gutter_none);
-    }
+  &.l-section--gutter-large {
+    --l-section--gutter: var(--dsa-section--gutter_large);
   }
 
-  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
+  &.l-section--gutter-small {
+    --l-section--gutter: var(--dsa-section--gutter_small);
+  }
+
+  &.l-section--gutter-none {
+    --l-section--gutter: var(--dsa-section--gutter_none);
+  }
 
   &.l-section--accent {
     background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));

src/components/split/split.scss

@@ -6,15 +6,15 @@
   gap: var(--dsa-split--gap-horizontal) var(--dsa-split--gap-horizontal);
 
   &--narrow {
-    --split__main--flex-basis: var(--l-section--content-width-narrow);
+    --split__main--flex-basis: var(--dsa-content--width_narrow);
   }
 
   &--medium {
-    --split__main--flex-basis: var(--l-section--content-width-default);
+    --split__main--flex-basis: var(--dsa-content--width_default);
   }
 
   &--wide {
-    --split__main--flex-basis: var(--l-section--content-width-wide);
+    --split__main--flex-basis: var(--dsa-content--width_wide);
   }
 
   @media (min-width: 48em) {

src/components/video-curtain/video-curtain-tokens.scss

@@ -10,9 +10,10 @@
   --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
 
+  --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-video-curtain__textbox--max-width: var(--dsa-section__content--width_narrow);
   --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
 
   --dsa-video-curtain__overlay--background: linear-gradient(
     0deg,

src/components/video-curtain/video-curtain.scss

@@ -25,7 +25,7 @@
 
   @container visual (min-width: 640px) {
     .c-visual__box {
-      --c-visual_box--max-width: 50rem;
+      --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
     }
   }
 }