@kickstartds/ds-agency-premium 1.6.43 → 1.6.44--canary.39.1365.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/BlogOverviewProps-9f207f1c.d.ts +1 -1
  2. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-d9decb7c.d.ts} +1 -1
  3. package/dist/PageProps-aa29c554.d.ts +1 -1
  4. package/dist/{SectionProps-7a46a8ad.d.ts → SectionProps-1cfcf6e8.d.ts} +6 -1
  5. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +9 -0
  6. package/dist/components/blog-post/blog-post.schema.dereffed.json +9 -0
  7. package/dist/components/blog-post/index.d.ts +1 -1
  8. package/dist/components/cta/cta.css +2 -2
  9. package/dist/components/footer/footer.css +2 -2
  10. package/dist/components/header/header.css +1 -1
  11. package/dist/components/headline/headline.css +1 -1
  12. package/dist/components/hero/hero.css +5 -4
  13. package/dist/components/image-story/image-story.css +1 -1
  14. package/dist/components/index/index.d.ts +1 -1
  15. package/dist/components/logos/logos.css +2 -2
  16. package/dist/components/page/page.schema.dereffed.json +9 -0
  17. package/dist/components/page-wrapper/tokens.css +12 -12
  18. package/dist/components/presets.json +32 -14
  19. package/dist/components/section/index.d.ts +1 -1
  20. package/dist/components/section/section.css +32 -25
  21. package/dist/components/section/section.schema.dereffed.json +9 -0
  22. package/dist/components/section/section.schema.json +7 -0
  23. package/dist/components/split/split.css +3 -3
  24. package/dist/components/video-curtain/video-curtain.css +3 -2
  25. package/dist/global.css +12 -11
  26. package/dist/tokens/themes.css +4 -4
  27. package/dist/tokens/tokens.css +12 -12
  28. package/dist/tokens/tokens.js +12 -12
  29. package/package.json +1 -1
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
6
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
7
7
  import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
8
8
  import { CtaProps } from "./CtaProps-93230a76.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-d9decb7c.js";
8
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
8
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
9
9
  import { CtaProps } from "./CtaProps-93230a76.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-7a46a8ad.js";
6
+ import { SectionProps } from "./SectionProps-1cfcf6e8.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
@@ -33,6 +33,10 @@ type Style = "stagelights" | "horizontalGradient" | "verticalGradient" | "accent
33
33
  * Color of background
34
34
  */
35
35
  type Style1 = "default" | "accent" | "bold";
36
+ /**
37
+ * Background image for the whole section
38
+ */
39
+ type BackgroundImage = string;
36
40
  /**
37
41
  * Show spotlight behind cursor
38
42
  */
@@ -116,6 +120,7 @@ interface SectionProps {
116
120
  width?: Width;
117
121
  style?: Style;
118
122
  backgroundColor?: Style1;
123
+ backgroundImage?: BackgroundImage;
119
124
  spotlight?: Spotlight;
120
125
  spaceBefore?: SpaceBefore;
121
126
  spaceAfter?: SpaceAfter;
@@ -140,4 +145,4 @@ interface SectionProps {
140
145
  components?: Content;
141
146
  buttons?: Buttons;
142
147
  }
143
- export { Width, Style, Style1, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
148
+ export { Width, Style, Style1, BackgroundImage, Spotlight, SpaceBefore, SpaceAfter, Inverted, HeaderSpacing, Headline, LargeHeadline, HeadlineWidth, HeadlineTextAlignment, HeadlineAlignment, Subheadline, SwitchHeadlineOrder, ContentWidth, ContentAlignment, Gutter, Mode, TileWidth, Content, Buttons, SectionProps };
@@ -58,6 +58,15 @@
58
58
  ],
59
59
  "default": "default"
60
60
  },
61
+ "backgroundImage": {
62
+ "title": "Background image",
63
+ "description": "Background image for the whole section",
64
+ "type": "string",
65
+ "format": "image",
66
+ "examples": [
67
+ "https://picsum.photos/seed/visual/1920/600"
68
+ ]
69
+ },
61
70
  "spotlight": {
62
71
  "type": "boolean",
63
72
  "title": "Spotlight",
@@ -334,6 +334,15 @@
334
334
  ],
335
335
  "default": "default"
336
336
  },
337
+ "backgroundImage": {
338
+ "title": "Background image",
339
+ "description": "Background image for the whole section",
340
+ "type": "string",
341
+ "format": "image",
342
+ "examples": [
343
+ "https://picsum.photos/seed/visual/1920/600"
344
+ ]
345
+ },
337
346
  "spotlight": {
338
347
  "type": "boolean",
339
348
  "title": "Spotlight",
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -100,7 +100,7 @@
100
100
  }
101
101
  .dsa-cta.c-storytelling .c-storytelling__box:only-child {
102
102
  width: 100%;
103
- max-width: calc(var(--l-section--content-width-default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
103
+ max-width: calc(var(--dsa-content--width_default) - var(--dsa-content--spacing) * var(--c-storytelling--padding-ratio));
104
104
  }
105
105
  .dsa-cta.c-storytelling > .c-storytelling__image {
106
106
  padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--dsa-content--spacing));
@@ -111,7 +111,7 @@
111
111
  }
112
112
  .dsa-cta.c-storytelling > .c-storytelling__image,
113
113
  .dsa-cta.c-storytelling > .c-storytelling__box {
114
- max-width: calc(var(--l-section--content-width-wide) / 2);
114
+ max-width: calc(var(--dsa-content--width_wide) / 2);
115
115
  }
116
116
  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
117
117
  .dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
@@ -1,7 +1,7 @@
1
1
  .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
3
  --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
4
- --dsa-footer--max-width: var(--l-section--content-width-wide);
4
+ --dsa-footer--max-width: var(--dsa-content--width_wide);
5
5
  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
6
6
  --dsa-footer__byline--font: var(--ks-font-copy-xs);
7
7
  --dsa-footer__byline--color: var(--ks-text-color-default);
@@ -29,7 +29,7 @@
29
29
  .dsa-footer__content {
30
30
  padding: var(--l-section--space-small) var(--dsa-content--spacing);
31
31
  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
32
- max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
32
+ max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
33
33
  width: 100%;
34
34
  margin: auto;
35
35
  display: flex;
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .dsa-header {
17
- --dsa-header--max-width: var(--l-section--content-width-max);
17
+ --dsa-header--max-width: var(--dsa-content--width_max);
18
18
  --dsa-header--background: var(--ks-background-color-default);
19
19
  --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
20
20
  --dsa-header__logo--height: var(--dsa-logo--height);
@@ -113,7 +113,7 @@
113
113
  .dsa-headline .dsa-headline__subheadline {
114
114
  font: var(--subheadline--font);
115
115
  margin: 0;
116
- max-width: var(--l-section--content-width-default);
116
+ max-width: var(--dsa-content--width_default);
117
117
  color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
118
118
  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
119
119
  }
@@ -14,9 +14,10 @@
14
14
  --dsa-hero__copy--font: var(--dsa-rich-text--font);
15
15
  --dsa-hero_highlight-text__copy--font: var(--ks-font-copy-l);
16
16
  --dsa-hero_color-neutral__copy--color: var(--ks-text-color-default);
17
+ --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
17
18
  --dsa-hero__textbox--border-radius: var(--ks-border-radius-surface);
19
+ --dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
18
20
  --dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
19
- --dsa-hero__textbox--background-color: var(--ks-color-bg-alpha-2);
20
21
  --dsa-hero__overlay--background: linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%);
21
22
  }
22
23
  @container visual (min-width: 640px) {
@@ -81,7 +82,7 @@
81
82
  );
82
83
  }
83
84
  .c-visual.dsa-hero .c-visual__box {
84
- --c-visual_box--max-width: 50rem;
85
+ --c-visual_box--max-width: var(--dsa-hero__textbox--max-width, var(--dsa-content--width_narrow));
85
86
  }
86
87
  }
87
88
 
@@ -103,7 +104,7 @@
103
104
  padding: var(--c-visual_box--padding);
104
105
  }
105
106
  .c-visual.dsa-hero .c-visual__content--indent {
106
- max-width: var(--l-section--content-width-wide);
107
+ max-width: var(--dsa-content--width_wide);
107
108
  }
108
109
  @container visual (min-width: 640px) {
109
110
  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
@@ -118,7 +119,7 @@
118
119
  position: relative;
119
120
  }
120
121
  .c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
121
- --c-visual_box--max-width: var(--l-section--content-width-default);
122
+ --c-visual_box--max-width: var(--dsa-content--width_default);
122
123
  }
123
124
  @container visual (min-width: 640px) {
124
125
  .c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
@@ -12,7 +12,7 @@
12
12
  --c-storytelling--vertical-padding: var(--dsa-image-story--vertical-padding, var(--ks-spacing-xl));
13
13
  }
14
14
  .c-storytelling.dsa-image-story .c-storytelling__box__content {
15
- max-width: var(--l-section--content-width-narrow);
15
+ max-width: var(--dsa-content--width_narrow);
16
16
  }
17
17
  .c-storytelling.dsa-image-story.c-storytelling--three-to-two img {
18
18
  aspect-ratio: 3/2;
@@ -29,7 +29,7 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-6b3cff22.js";
32
+ export * from "../../BlogPostProps-d9decb7c.js";
33
33
  export * from "../../BlogOverviewProps-9f207f1c.js";
34
34
  export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
@@ -26,7 +26,7 @@
26
26
  .dsa-logos__tagline {
27
27
  font: var(--dsa-logos__tagline--font, var(--ks-font-display-m));
28
28
  font-weight: var(--dsa-logos__tagline--font-weight, var(--dsa-headline--font-weight));
29
- max-width: var(--l-section--content-width-narrow);
29
+ max-width: var(--dsa-content--width_narrow);
30
30
  color: var(--dsa-logos__tagline--color, var(--dsa-headline--color, var(--ks-text-color-display)));
31
31
  width: 100%;
32
32
  }
@@ -40,7 +40,7 @@
40
40
  }
41
41
  .dsa-logos__cta__text {
42
42
  color: var(--ks-text-color-default);
43
- max-width: var(--l-section--content-width-narrow);
43
+ max-width: var(--dsa-content--width_narrow);
44
44
  }
45
45
  .dsa-logos__cta__text, .dsa-logos__cta__link {
46
46
  font: var(--ks-font-copy-m);
@@ -58,6 +58,15 @@
58
58
  ],
59
59
  "default": "default"
60
60
  },
61
+ "backgroundImage": {
62
+ "title": "Background image",
63
+ "description": "Background image for the whole section",
64
+ "type": "string",
65
+ "format": "image",
66
+ "examples": [
67
+ "https://picsum.photos/seed/visual/1920/600"
68
+ ]
69
+ },
61
70
  "spotlight": {
62
71
  "type": "boolean",
63
72
  "title": "Spotlight",
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Dec 2024 16:01:35 GMT
3
+ * Generated on Wed, 11 Dec 2024 09:25:36 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -744,49 +744,49 @@
744
744
  --ks-spacing-xxs-bp-factor-tablet: 1.5006;
745
745
  --ks-spacing-xxs-bp-factor-laptop: 1.8383;
746
746
  --ks-spacing-xxs-bp-factor-desktop: 2.2519;
747
- --ks-spacing-xxs-bp-factor-tv: 2.35;
747
+ --ks-spacing-xxs-bp-factor-tv: 2.5;
748
748
  --ks-spacing-xs: var(--ks-spacing-xs-base);
749
749
  --ks-spacing-xs-base: 0.4309rem;
750
750
  --ks-spacing-xs-bp-factor-phone: 1.225;
751
751
  --ks-spacing-xs-bp-factor-tablet: 1.5006;
752
752
  --ks-spacing-xs-bp-factor-laptop: 1.8383;
753
753
  --ks-spacing-xs-bp-factor-desktop: 2.2519;
754
- --ks-spacing-xs-bp-factor-tv: 2.35;
754
+ --ks-spacing-xs-bp-factor-tv: 2.5;
755
755
  --ks-spacing-s: var(--ks-spacing-s-base);
756
756
  --ks-spacing-s-base: 0.614rem;
757
757
  --ks-spacing-s-bp-factor-phone: 1.225;
758
758
  --ks-spacing-s-bp-factor-tablet: 1.5006;
759
759
  --ks-spacing-s-bp-factor-laptop: 1.8383;
760
760
  --ks-spacing-s-bp-factor-desktop: 2.2519;
761
- --ks-spacing-s-bp-factor-tv: 2.35;
761
+ --ks-spacing-s-bp-factor-tv: 2.5;
762
762
  --ks-spacing-m: var(--ks-spacing-m-base);
763
763
  --ks-spacing-m-base: 0.875rem;
764
764
  --ks-spacing-m-bp-factor-phone: 1.225;
765
765
  --ks-spacing-m-bp-factor-tablet: 1.5006;
766
766
  --ks-spacing-m-bp-factor-laptop: 1.8383;
767
767
  --ks-spacing-m-bp-factor-desktop: 2.2519;
768
- --ks-spacing-m-bp-factor-tv: 2.35;
768
+ --ks-spacing-m-bp-factor-tv: 2.5;
769
769
  --ks-spacing-l: var(--ks-spacing-l-base);
770
770
  --ks-spacing-l-base: 1.2469rem;
771
771
  --ks-spacing-l-bp-factor-phone: 1.225;
772
772
  --ks-spacing-l-bp-factor-tablet: 1.5006;
773
773
  --ks-spacing-l-bp-factor-laptop: 1.8383;
774
774
  --ks-spacing-l-bp-factor-desktop: 2.2519;
775
- --ks-spacing-l-bp-factor-tv: 2.35;
775
+ --ks-spacing-l-bp-factor-tv: 2.5;
776
776
  --ks-spacing-xl: var(--ks-spacing-xl-base);
777
777
  --ks-spacing-xl-base: 1.7768rem;
778
778
  --ks-spacing-xl-bp-factor-phone: 1.225;
779
779
  --ks-spacing-xl-bp-factor-tablet: 1.5006;
780
780
  --ks-spacing-xl-bp-factor-laptop: 1.8383;
781
781
  --ks-spacing-xl-bp-factor-desktop: 2.2519;
782
- --ks-spacing-xl-bp-factor-tv: 2.35;
782
+ --ks-spacing-xl-bp-factor-tv: 2.7;
783
783
  --ks-spacing-xxl: var(--ks-spacing-xxl-base);
784
784
  --ks-spacing-xxl-base: 2.5319rem;
785
785
  --ks-spacing-xxl-bp-factor-phone: 1.225;
786
786
  --ks-spacing-xxl-bp-factor-tablet: 1.5006;
787
787
  --ks-spacing-xxl-bp-factor-laptop: 1.8383;
788
788
  --ks-spacing-xxl-bp-factor-desktop: 2.2519;
789
- --ks-spacing-xxl-bp-factor-tv: 2.35;
789
+ --ks-spacing-xxl-bp-factor-tv: 2.5;
790
790
  --ks-spacing-stack-xs: var(--ks-spacing-xs);
791
791
  --ks-spacing-stack-s: var(--ks-spacing-s);
792
792
  --ks-spacing-stack-m: var(--ks-spacing-m);
@@ -947,7 +947,7 @@
947
947
  --ks-font-size-display-bp-factor-tablet: 1.5;
948
948
  --ks-font-size-display-bp-factor-laptop: 1.5;
949
949
  --ks-font-size-display-bp-factor-desktop: 1.75;
950
- --ks-font-size-display-bp-factor-tv: 2;
950
+ --ks-font-size-display-bp-factor-tv: 2.25;
951
951
  --ks-font-size-display-xxs-base: 0.68rem;
952
952
  --ks-font-size-display-xs-base: 0.833rem;
953
953
  --ks-font-size-display-s-base: 1.0204rem;
@@ -956,7 +956,7 @@
956
956
  --ks-font-size-display-xl-base: 1.8758rem;
957
957
  --ks-font-size-display-xxl-base: 2.2978rem;
958
958
  --ks-font-size-copy-bp-factor-tablet: 1.125;
959
- --ks-font-size-copy-bp-factor-tv: 1.25;
959
+ --ks-font-size-copy-bp-factor-tv: 1.35;
960
960
  --ks-font-size-copy-xxs-base: 0.612rem;
961
961
  --ks-font-size-copy-xs-base: 0.7497rem;
962
962
  --ks-font-size-copy-s-base: 0.9184rem;
@@ -965,7 +965,7 @@
965
965
  --ks-font-size-copy-xl-base: 1.6882rem;
966
966
  --ks-font-size-copy-xxl-base: 2.068rem;
967
967
  --ks-font-size-interface-bp-factor-tablet: 1.125;
968
- --ks-font-size-interface-bp-factor-tv: 1.25;
968
+ --ks-font-size-interface-bp-factor-tv: 1.5;
969
969
  --ks-font-size-interface-xxs-base: 0.544rem;
970
970
  --ks-font-size-interface-xs-base: 0.6664rem;
971
971
  --ks-font-size-interface-s-base: 0.8163rem;
@@ -974,7 +974,7 @@
974
974
  --ks-font-size-interface-xl-base: 1.5006rem;
975
975
  --ks-font-size-interface-xxl-base: 1.8383rem;
976
976
  --ks-font-size-mono-bp-factor-tablet: 1.125;
977
- --ks-font-size-mono-bp-factor-tv: 1.25;
977
+ --ks-font-size-mono-bp-factor-tv: 1.5;
978
978
  --ks-font-size-mono-xxs-base: 0.612rem;
979
979
  --ks-font-size-mono-xs-base: 0.7497rem;
980
980
  --ks-font-size-mono-s-base: 0.9184rem;