@kickstartds/ds-agency-premium 1.6.71--canary.43.2356.0 → 1.6.71--canary.43.2358.0

package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-6a826e52.d.ts}

@@ -3,8 +3,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-6a826e52.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { SectionProps } from "./SectionProps-7cac90e5.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts}

@@ -3,9 +3,9 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
+import { BlogHeadProps } from "./BlogHeadProps-f5855e93.js";
 import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
-import { SectionProps } from "./SectionProps-6a826e52.js";
+import { SectionProps } from "./SectionProps-7cac90e5.js";
 import { CtaProps } from "./CtaProps-789f8508.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{PageProps-aa29c554.d.ts → PageProps-6a826e52.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-6a826e52.js";
+import { SectionProps } from "./SectionProps-7cac90e5.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-6a826e52.d.ts → SectionProps-7cac90e5.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
 import { BusinessCardProps } from "./BusinessCardProps-e10e7b62.js";
 import { ContactProps } from "./ContactProps-7cac90e5.js";
 import { ContentNavProps } from "./ContentNavProps-0e282a9f.js";
@@ -17,13 +17,13 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-d4677d2c.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";
 import { SliderProps } from "./SliderProps-789f8508.js";
-import { SplitEvenProps } from "./SplitEvenProps-789f8508.js";
-import { SplitWeightedProps } from "./SplitWeightedProps-789f8508.js";
+import { SplitEvenProps } from "./SplitEvenProps-7cac90e5.js";
+import { SplitWeightedProps } from "./SplitWeightedProps-7cac90e5.js";
 import { StatsProps } from "./StatsProps-bf5ef578.js";
 import { TeaserCardProps } from "./TeaserCardProps-d069476f.js";
 import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";

package/dist/{SplitEvenProps-789f8508.d.ts → SplitEvenProps-7cac90e5.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
 import { BusinessCardProps } from "./BusinessCardProps-e10e7b62.js";
 import { ContactProps } from "./ContactProps-7cac90e5.js";
 import { ContentNavProps } from "./ContentNavProps-0e282a9f.js";
@@ -17,7 +17,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-d4677d2c.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/{SplitWeightedProps-789f8508.d.ts → SplitWeightedProps-7cac90e5.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
 import { BusinessCardProps } from "./BusinessCardProps-e10e7b62.js";
 import { ContactProps } from "./ContactProps-7cac90e5.js";
 import { ContentNavProps } from "./ContentNavProps-0e282a9f.js";
@@ -17,7 +17,7 @@ import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-fec6b267.js";
 import { HtmlProps } from "./HtmlProps-9d091769.js";
-import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "./ImageStoryProps-4e2b2ecf.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-d4677d2c.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogHeadProps } from "../../BlogHeadProps-c04a5ed8.js";
+import { BlogHeadProps } from "../../BlogHeadProps-f5855e93.js";
 declare const BlogHeadContextDefault: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogHeadContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogHead: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-6a826e52.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export type { BlogOverviewProps };

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

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
+import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
+import { ImageStoryProps } from "../../ImageStoryProps-4e2b2ecf.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -29,8 +29,8 @@ interface SettingsProps {
     seo: SeoProps;
     iconSprite?: IconSprite;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
-export * from "../../BlogOverviewProps-9f207f1c.js";
-export * from "../../PageProps-aa29c554.js";
+export * from "../../BlogPostProps-c760fd2a.js";
+export * from "../../BlogOverviewProps-6a826e52.js";
+export * from "../../PageProps-6a826e52.js";
 export { IconSprite, SettingsProps };
 export * from "../../EventDetailProps-42a7eebe.js";

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-aa29c554.js";
+import { PageProps } from "../../PageProps-6a826e52.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export type { PageProps };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-6a826e52.js";
+import { SectionProps } from "../../SectionProps-7cac90e5.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/split-even/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { SplitEvenProps as SplitEvenComponentProps } from "../../SplitEvenProps-789f8508.js";
+import { SplitEvenProps as SplitEvenComponentProps } from "../../SplitEvenProps-7cac90e5.js";
 interface ComponentProps {
     firstComponents?: React.ReactNode;
     secondComponents?: React.ReactNode;

package/dist/components/split-weighted/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { SplitWeightedProps as SplitWeightedComponentProps } from "../../SplitWeightedProps-789f8508.js";
+import { SplitWeightedProps as SplitWeightedComponentProps } from "../../SplitWeightedProps-7cac90e5.js";
 interface ComponentProps {
     main?: React.ReactNode;
     aside?: React.ReactNode;

package/dist/global.css

@@ -377,6 +377,60 @@ h3 {
   font-weight: 700;
   src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+.color-frame {
+  width: 100px;
+  height: 100px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.color-swatches {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+}
+.color-swatches[ks-inverted=true] {
+  background-color: rgb(33, 31, 36);
+  padding: 1em;
+}
+.color-swatches > div {
+  border-style: solid;
+  width: 100px;
+  height: 50px;
+  display: flex;
+  gap: var(--ks-spacing-s);
+}
+
+.color-frame {
+  width: 100px;
+  height: 100px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.color-test {
+  background-color: var(--ks-color-test);
+}
+
+.color-swatches {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+}
+.color-swatches[ks-inverted=true] {
+  background-color: rgb(33, 31, 36);
+  padding: 1em;
+}
+.color-swatches > div {
+  width: 100px;
+  height: 50px;
+  display: flex;
+  gap: var(--ks-spacing-s);
+}
+
 .color-frame {
   width: 100px;
   height: 100px;
@@ -591,6 +645,24 @@ h3 {
   display: inline-block;
 }
 
+.border-preview {
+  width: 100px;
+  height: 100px;
+}
+
+.border-preview-radius {
+  border: 1px solid black;
+}
+
+.transition-preview {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+}
+.transition-preview:hover {
+  transform: scale(1.1);
+}
+
 .preview-page {
   max-width: 900px;
   margin: auto;
@@ -765,39 +837,6 @@ h3 {
   --ks-color-fg-inverted-to-bg-9: color-mix(in srgb, var(--ks-color-fg-inverted) 90%, var(--ks-color-bg-inverted));
 }
 
-:root,
-[ks-theme] {
-  --ks-background-color-primary-base: var(--ks-color-primary);
-  --ks-background-color-primary-inverted-base: var(--ks-color-primary-inverted);
-  --ks-background-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
-  --ks-background-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
-  --ks-background-color-primary-hover-base: var(--ks-color-primary-to-bg-6);
-  --ks-background-color-primary-inverted-hover-base: var(--ks-color-primary-inverted-to-bg-6);
-}
-
-:root {
-  --ks-background-color-primary: var(--ks-background-color-primary-base);
-  --ks-background-color-primary-inverted: var(--ks-background-color-primary-inverted-base);
-  --ks-background-color-primary-translucent: var(--ks-background-color-primary-translucent-base);
-  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-inverted-translucent-base);
-  --ks-background-color-primary-hover: var(--ks-background-color-primary-hover-base);
-  --ks-background-color-primary-inverted-hover: var(--ks-background-color-primary-inverted-hover-base);
-}
-
-[ks-inverted=true] {
-  --ks-background-color-primary: var(--ks-background-color-primary-inverted-base);
-  --ks-background-color-primary-inverted: var(--ks-background-color-primary-base);
-  --ks-background-color-primary-translucent: var(--ks-background-color-primary-inverted-translucent-base);
-  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-translucent-base);
-  --ks-background-color-primary-hover: var(--ks-background-color-primary-inverted-hover-base);
-  --ks-background-color-primary-inverted-hover: var(--ks-background-color-primary-hover-base);
-}
-
-.dsa-button {
-  --dsa-button_primary--background-color: var(--ks-background-color-primary);
-  --dsa-button_primary--background-color-hover: var(--ks-background-color-primary-hover);
-}
-
 :root,
 [ks-inverted=true],
 [ks-inverted=false],
@@ -1671,7 +1710,7 @@ h3 {
   --ks-border-width-emphasized: 2px;
   --ks-border-radius-control: 16px;
   --ks-border-radius-card: 16px;
-  --ks-border-radius-control: 32px;
+  --ks-border-radius-surface: 32px;
   --ks-border-radius-pill: 999px;
   --ks-border-radius-circle: 50%;
 }
@@ -1691,6 +1730,125 @@ h3 {
   --ks-box-shadow-surface-inverted-hover: 0 1px 11px var(--ks-color-fg-alpha-5);
 }
 
+:root {
+  --ks-duration-immediate: 50ms;
+  --ks-duration-fast: 100ms;
+  --ks-duration-medium: 150ms;
+  --ks-duration-slow: 300ms;
+  --ks-timing-function-bounce: cubic-bezier(0.17, 1, 0.5, 1.5);
+  --ks-timing-function-ease-out: ease-out;
+  --ks-timing-function-ease-in: ease-in;
+  --ks-timing-function-ease-in-out: ease-in-out;
+  --ks-timing-function-linear: linear;
+  --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
+  --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
+  --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
+}
+
+:root,
+[ks-theme] {
+  --ks-text-color-primary-base: var(--ks-color-primary);
+  --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-text-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
+  --ks-text-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-text-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
+  --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-6);
+  --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-6);
+}
+
+:root {
+  --ks-text-color-primary: var(--ks-text-color-primary-base);
+  --ks-text-color-primary-inverted: var(--ks-text-color-primary-inverted-base);
+  --ks-text-color-primary-translucent: var(--ks-text-color-primary-translucent-base);
+  --ks-text-color-primary-inverted-translucent: var(--ks-text-color-primary-inverted-translucent-base);
+  --ks-text-color-primary-interactive: var(--ks-text-color-primary-interactive-base);
+  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-inverted-interactive-base);
+  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
+  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
+}
+
+[ks-inverted=true] {
+  --ks-text-color-primary: var(--ks-text-color-primary-inverted-base);
+  --ks-text-color-primary-inverted: var(--ks-text-color-primary-base);
+  --ks-text-color-primary-translucent: var(--ks-text-color-primary-inverted-translucent-base);
+  --ks-text-color-primary-inverted-translucent: var(--ks-text-color-primary-translucent-base);
+  --ks-text-color-primary-interactive: var(--ks-text-color-primary-inverted-interactive-base);
+  --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-interactive-base);
+  --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
+  --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
+}
+
+:root,
+[ks-theme] {
+  --ks-border-color-primary-base: var(--ks-color-primary);
+  --ks-border-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
+  --ks-border-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-border-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-border-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
+  --ks-border-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-6);
+  --ks-border-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-6);
+}
+
+:root {
+  --ks-border-color-primary: var(--ks-border-color-primary-base);
+  --ks-border-color-primary-inverted: var(--ks-border-color-primary-inverted-base);
+  --ks-border-color-primary-translucent: var(--ks-border-color-primary-translucent-base);
+  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-inverted-translucent-base);
+  --ks-border-color-primary-interactive: var(--ks-border-color-primary-interactive-base);
+  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-inverted-interactive-base);
+  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
+  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
+}
+
+[ks-inverted=true] {
+  --ks-border-color-primary: var(--ks-border-color-primary-inverted-base);
+  --ks-border-color-primary-inverted: var(--ks-border-color-primary-base);
+  --ks-border-color-primary-translucent: var(--ks-border-color-primary-inverted-translucent-base);
+  --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-translucent-base);
+  --ks-border-color-primary-interactive: var(--ks-border-color-primary-inverted-interactive-base);
+  --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-interactive-base);
+  --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
+  --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
+}
+
+:root,
+[ks-theme] {
+  --ks-background-color-primary-base: var(--ks-color-primary);
+  --ks-background-color-primary-inverted-base: var(--ks-color-primary-inverted);
+  --ks-background-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
+  --ks-background-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
+  --ks-background-color-primary-interactive-base: var(--ks-color-primary);
+  --ks-background-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
+  --ks-background-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-6);
+  --ks-background-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-6);
+}
+
+:root {
+  --ks-background-color-primary: var(--ks-background-color-primary-base);
+  --ks-background-color-primary-inverted: var(--ks-background-color-primary-inverted-base);
+  --ks-background-color-primary-translucent: var(--ks-background-color-primary-translucent-base);
+  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-inverted-translucent-base);
+  --ks-background-color-primary-interactive: var(--ks-background-color-primary-interactive-base);
+  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-inverted-interactive-base);
+  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
+  --ks-background-color-primary-inverted-interactive-hover: var(
+    --ks-background-color-primary-inverted-interactive-hover-base
+  );
+}
+
+[ks-inverted=true] {
+  --ks-background-color-primary: var(--ks-background-color-primary-inverted-base);
+  --ks-background-color-primary-inverted: var(--ks-background-color-primary-base);
+  --ks-background-color-primary-translucent: var(--ks-background-color-primary-inverted-translucent-base);
+  --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-translucent-base);
+  --ks-background-color-primary-interactive: var(--ks-background-color-primary-inverted-interactive-base);
+  --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-interactive-base);
+  --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-inverted-interactive-hover-base);
+  --ks-background-color-primary-inverted-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
+}
+
 .l-container--blog-teaser {
   /* stylelint-disable-next-line property-no-unknown */
   container-name: blog-teaser;

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Nov 2025 13:21:42 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:46 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 Fri, 14 Nov 2025 13:21:46 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:50 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 Fri, 14 Nov 2025 13:21:44 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:48 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 Fri, 14 Nov 2025 13:21:49 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:52 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 Fri, 14 Nov 2025 13:21:39 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:43 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Nov 2025 13:21:40 GMT
+ * Generated on Tue, 18 Nov 2025 12:03:44 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

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