@kickstartds/ds-agency-premium 1.3.3 → 1.3.4--canary.10.390.0

package/dist/components/blog-post/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
+import { BlogPostProps } from "../../BlogPostProps-0910f130.js";
 declare const BlogPost: {
     ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/cta/cta.css

@@ -25,30 +25,41 @@
 
 .c-storytelling.dsa-cta {
   --c-storytelling--padding-ratio: 2;
-  --c-storytelling--horizontal-padding: var(--l-section--content-padding);
   justify-content: center;
   align-items: center;
   padding: 0;
 }
 .c-storytelling.dsa-cta--color-neutral {
-  --dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
-  --dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
-  --dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
+  --dsa-cta__copy--color: var(
+    --dsa-cta_color-neutral__copy--color,
+    var(--ks-text-color-default)
+  );
+  --dsa-cta__headline--color: var(
+    --dsa-cta_color-neutral__headline--color,
+    var(--ks-text-color-default)
+  );
+  --dsa-cta__subheadline--color: var(
+    --dsa-cta_color-neutral__subheadline--color,
+    var(--ks-text-color-default)
+  );
 }
 .c-storytelling.dsa-cta--highlight-text {
-  --dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
-  --dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
+  --dsa-cta__copy--font: var(
+    --dsa-cta_highlight-text__copy--font,
+    var(--ks-text-font-default)
+  );
+  --dsa-cta__headline--font: var(
+    --dsa-cta_highlight-text__headline--font,
+    var(--ks-text-font-default)
+  );
   --dsa-cta__subheadline--font: var(
     --dsa-cta_highlight-text__subheadline--font,
-    var(--dsa-headline_h1__subheadline--font)
+    var(--ks-text-font-default)
   );
 }
 .c-storytelling.dsa-cta.c-storytelling--full {
   --c-storytelling--padding-ratio: 1;
 }
-.c-storytelling.dsa-cta.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
-  padding-left: var(--dsa-cta--horizontal-padding);
-}
 .c-storytelling.dsa-cta.dsa-cta--align-top {
   align-items: flex-start;
 }
@@ -89,7 +100,7 @@
 }
 .c-storytelling.dsa-cta .c-storytelling__box .c-rich-text {
   font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
+  color: var(--dsa-cta__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
 }
 .c-storytelling.dsa-cta .c-storytelling__box:only-child {
   --dsa-cta--horizontal-padding: var(--l-section--content-padding);

package/dist/components/index/index.d.ts

@@ -45,6 +45,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-e1cbd5d3.js";
+export * from "../../BlogPostProps-0910f130.js";
 export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, PageProps, SettingsProps };

package/dist/components/mosaic/mosaic.css

@@ -21,7 +21,7 @@
 }
 .dsa-mosaic .c-rich-text {
   font: var(--dsa-mosaic__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  color: var(--dsa-mosaic__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
+  color: var(--dsa-mosaic__copy--color, var(--das-rich-text--color, var(--ks-text-color-copy)));
 }
 .dsa-mosaic .c-storytelling__box__content[style^=color] .dsa-headline__headline,
 .dsa-mosaic .c-storytelling__box__content[style^=color] .dsa-headline__subheadline {

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:36:55 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:01 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/section/index.js

@@ -16,8 +16,8 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames(style !== "default" &&
-            `l-section-style--${style === "verticalGradient"
+    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+            `dsa-section-style--${style === "verticalGradient"
                 ? "vertical-gradient"
                 : style === "horizontalGradient"
                     ? "horizontal-gradient"
@@ -29,7 +29,7 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
                                 ? "symmetric-glow"
                                 : style === "anchorGlow"
                                     ? "anchor-glow"
-                                    : style}`, headerSpacing && "l-section--header-spacing", spotlight && "l-section--spotlight", className), background: backgroundColor, content: content, headline: {
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error

package/dist/components/section/js/spotlight.client.js

@@ -1,12 +1,12 @@
 function onMousemove(event) {
-    this.style.setProperty("--l-section--spotlight-top", `${event.clientY - this.getBoundingClientRect().top}px`);
-    this.style.setProperty("--l-section--spotlight-left", `${event.clientX - this.getBoundingClientRect().left}px`);
+    this.style.setProperty("--dsa-section__spotlight--top", `${event.clientY - this.getBoundingClientRect().top}px`);
+    this.style.setProperty("--dsa-section__spotlight--left", `${event.clientX - this.getBoundingClientRect().left}px`);
 }
 const initSpotlight = (element) => {
     element.addEventListener("mousemove", onMousemove, { passive: true });
     return () => {
-        element.style.removeProperty("--l-section--spotlight-top");
-        element.style.removeProperty("--l-section--spotlight-left");
+        element.style.removeProperty("--dsa-section__spotlight--top");
+        element.style.removeProperty("--dsa-section__spotlight--left");
         element.removeEventListener("mousemove", onMousemove, { passive: true });
     };
 };

package/dist/components/section/section.css

@@ -1,91 +1,166 @@
-.l-section {
-  --l-section--background-color: var(--ks-background-color-default);
-  --l-section--tile-width-control: 14rem;
-  --l-section--tile-width-card: 20rem;
-  --l-section--tile-width-narrow: var(--l-section--content-width-narrow);
-  --l-section--tile-width-medium: var(--l-section--content-width-default);
-  --l-section--tile-width-wide: var(--l-section--content-width-wide);
-  --l-section_slider-arrow--color: var(--ks-text-color-interface-interactive);
-}
-.l-section--accent {
-  --l-section--background-color: var(--ks-background-color-accent);
-}
-.l-section--bold {
-  --l-section--background-color: var(--ks-background-color-bold);
-}
-.l-section-style--stagelights {
-  --l-section--background-image: radial-gradient(
+.dsa-section {
+  --dsa-section__col--min-width: var(--dsa-section_tile-width--default);
+  --dsa-section__col--max-width: 1fr;
+  --dsa-section__col--repeat: auto-fit;
+  --dsa-section--space_default: var(--ks-spacing-xxl);
+  --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
+  --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--gutter_small: var(--ks-spacing-xs);
+  --dsa-section--gutter_default: var(--ks-spacing-m);
+  --dsa-section--gutter_large: var(--ks-spacing-xl);
+  --dsa-section__buttons--space-before: var(--ks-spacing-stack-m);
+  --dsa-section__content--width_narrow: 46.5rem;
+  --dsa-section__content--width_default: 62rem;
+  --dsa-section__content--width_wide: 75rem;
+  --dsa-section__content--width_max: 120rem;
+  --dsa-section__content--width_full: 120rem;
+  --dsa-section--background-color_default: var(--ks-color-bg);
+  --dsa-section--background-color_bold: var(--ks-background-color-bold);
+  --dsa-section--background-color_accent: var(--ks-background-color-accent);
+  --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;
+  --dsa-section__slider-arrow--opacity_hover: 1;
+  --dsa-section__slider-arrow--opacity_disabled: 0.3;
+  --dsa-section__slider-arrow--background: transparent;
+  --dsa-section_stagelights--background-image: radial-gradient(
       50% 150% at 100% -50%,
       var(--ks-color-primary-inverted-alpha-3) 0%,
       transparent 100%
     ),
     radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
-}
-.l-section-style--anchor-glow {
-  --l-section--background-image: radial-gradient(
+  --dsa-section_anchor-glow--background-image: radial-gradient(
     50% 50% at 50% 100%,
     var(--ks-color-secondary-alpha-5) 0%,
     transparent 100%
   );
-}
-.l-section-style--symmetric-glow {
-  --l-section--background-image: radial-gradient(
+  --dsa-section_symmetric-glow--background-image: radial-gradient(
       20% 50% at 100% 50%,
       var(--ks-color-primary-alpha-5) 0%,
       transparent 100%
     ),
     radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
-}
-.l-section-style--accent-transition {
-  --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%);
-}
-.l-section-style--bold-transition {
-  --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%);
-}
-.l-section-style--vertical-gradient {
-  --l-section--background-image: linear-gradient(
+  --dsa-section_accent-transition--background-image: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--ks-background-color-accent) 100%
+  );
+  --dsa-section_bold-transition--background-image: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--ks-background-color-bold) 100%
+  );
+  --dsa-section_vertical-gradient--background-image: linear-gradient(
     0deg,
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-secondary-alpha-5) 100%
   );
-}
-.l-section-style--horizontal-gradient {
-  --l-section--background-image: linear-gradient(
+  --dsa-section_horizontal-gradient--background-image: linear-gradient(
     90deg,
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-secondary-alpha-5) 100%
   );
-}
-.l-section--spotlight {
-  --l-section--spotlight-left: 0;
-  --l-section--spotlight-top: 0;
-  --l-section--spotlight-color: var(--ks-color-primary-alpha-5);
-}
-.l-section__content {
-  --l-section_tile-width--default: 20rem;
+  --dsa-section__spotlight--left: 50%;
+  --dsa-section__spotlight--top: 50%;
+  --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
-:root .l-section {
-  background-image: var(--l-section--background-image);
-  background-color: var(--l-section--background-color);
+.l-section.dsa-section {
+  --l-section--gutter: var(--dsa-section--gutter_default);
+  --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--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-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--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));
+  --l-section_slider-arrow--size: var(--dsa-section__slider-arrow--size, 2.5rem);
+  --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_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);
   position: relative;
+  background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
+}
+.l-section.dsa-section.l-section--gutter-large {
+  --l-section--gutter: var(--dsa-section--gutter_large);
 }
-:root .l-section--header-spacing {
-  padding-top: calc(var(--dsa-header--height) + var(--l-section--space-default));
+.l-section.dsa-section.l-section--gutter-small {
+  --l-section--gutter: var(--dsa-section--gutter_small);
 }
-:root .l-section--header-spacing.l-section--space-before-none {
+.l-section.dsa-section.l-section--gutter-none {
+  --l-section--gutter: var(--dsa-section--gutter_none);
+}
+.l-section.dsa-section.l-section--accent {
+  background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
+}
+.l-section.dsa-section.l-section--bold {
+  background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
+}
+.l-section.dsa-section--header-spacing {
+  padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
+}
+.l-section.dsa-section--header-spacing.l-section--space-before-none {
   padding-top: var(--dsa-header--height);
 }
-:root .l-section--header-spacing.l-section--space-before-small {
-  padding-top: calc(var(--dsa-header--height) + var(--l-section--space-small));
+.l-section.dsa-section--header-spacing.l-section--space-before-small {
+  padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
+}
+.l-section.dsa-section-style--stagelights {
+  background-image: var(--dsa-section_stagelights--background-image), radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
+}
+.l-section.dsa-section-style--anchor-glow {
+  background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
 }
-:root .l-section--spotlight {
+.l-section.dsa-section-style--symmetric-glow {
+  background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%));
+}
+.l-section.dsa-section-style--accent-transition {
+  background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+}
+.l-section.dsa-section-style--bold-transition {
+  background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+}
+.l-section.dsa-section-style--vertical-gradient {
+  background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+}
+.l-section.dsa-section-style--horizontal-gradient {
+  background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+}
+.l-section.dsa-section--spotlight {
   position: relative;
 }
-:root .l-section--spotlight:hover::before {
+.l-section.dsa-section--spotlight:hover::before {
   opacity: 1;
 }
-:root .l-section--spotlight::before {
+.l-section.dsa-section--spotlight::before {
   transition: opacity var(--ks-transition-fade);
   opacity: 0;
   top: 0;
@@ -94,17 +169,14 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(650px circle at var(--l-section--spotlight-left) var(--l-section--spotlight-top), var(--l-section--spotlight-color), transparent 80%);
+  background-image: radial-gradient(650px circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color), transparent 80%);
 }
-:root .l-section .l-section__content {
-  --l-section_buttons--space-before: var(
-    --dsa-section__buttons--space-before,
-    var(--l-section--gutter)
-  );
+.l-section.dsa-section .l-section__content {
+  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
 }
-:root .l-section .l-section__content--slider {
+.l-section.dsa-section .l-section__content--slider {
   padding: var(--ks-spacing-s) 0;
 }
-:root .l-section .l-section__content--slider:after {
+.l-section.dsa-section .l-section__content--slider:after {
   min-width: calc(50vw - var(--dsa-section_col--min-width) / 2 - var(--dsa-section--gutter) * 1.25);
 }

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:36:58 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:03 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:37:02 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:07 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:37:00 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:05 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:37:04 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:09 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:36:55 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:01 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 13:36:56 GMT
+ * Generated on Thu, 18 Apr 2024 13:43:01 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.3.3",
+  "version": "1.3.4--canary.10.390.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {