@kickstartds/ds-agency-premium 1.2.10--canary.171.76273d8.0 → 1.2.10--canary.178.33c3c92.0

package/dist/global.css

@@ -296,80 +296,216 @@ h3 {
     --c-rich-text_headline--margin:1.5em 0 1em;
   }
 }
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --dsa-text-color-on-primary: var(--ks-color-fg);
+  --dsa-text-color-on-primary-inverted: var(--ks-color-fg-inverted);
+  --ks-text-color-copy: var(--ks-color-fg-alpha-3);
+  --ks-text-color-display: var(--ks-color-fg);
+  --ks-border-color-card: var(--ks-color-fg-alpha-9);
+  --ks-border-color-card-interactive: var(--ks-color-fg-alpha-9);
+  --ks-border-color-card-interactive-hover: var(--ks-color-fg-alpha-7);
+  --ks-border-color-card-interactive-active: var(--ks-color-fg-alpha-7);
+  --ks-background-color-card: var(--ks-color-fg-alpha-3);
+  --ks-background-color-card-interactive: var(--ks-color-fg-alpha-9);
+  --ks-background-color-card-interactive-hover: var(--ks-color-fg-alpha-7);
+  --ks-background-color-card-interactive-active: var(--ks-color-fg-alpha-7);
+  --ks-text-color-card: var(--ks-color-fg);
+  --ks-text-color-card-interactive: var(--ks-color-fg-alpha-3);
+  --ks-text-color-card-interactive-hover: var(--ks-color-fg-alpha-3);
+  --ks-text-color-card-interactive-active: var(--ks-color-fg-alpha-3);
+  --dsa-topic--font: var(--ks-font-display-m);
+  --dsa-topic--font-weight: var(--ks-font-weight-medium);
+  --dsa-topic--color: var(--ks-text-color-display);
+  --dsa-topic--font-family: var(--ks-font-family-display);
+  --dsa-link--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-link--color: var(--ks-text-color-default-interactive);
+  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
+  --dsa-link--text-decoration: none;
+  --dsa-link--text-decoration_hover: none;
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
+  --dsa-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
+  --dsa-section__content--padding: var(--ks-spacing-inset-l);
+  --dsa-section__content_wide--width: 1440px;
+  --dsa-logo--height: 2rem;
+}
+@media (min-width: 42rem) {
+  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+    --dsa-section__content--padding: var(--ks-spacing-inset-xl);
+  }
+}
+@media (min-width: 42rem) {
+  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+    --dsa-logo--height: 2.5rem;
+  }
+}
+@media (min-width: 62em) {
+  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+    --dsa-logo--height: 3rem;
+  }
+}
+
 .l-container--post-teaser {
   /* stylelint-disable-next-line property-no-unknown */
   container-name: post-teaser;
 }
 
-article.c-post-teaser {
-  --c-teaser--background: transparent;
-  --c-post-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
-  --c-teaser_text--spacing: var(--ks-spacing-stack-s);
-  --g-topic--font: var(--ks-font-display-s);
+.dsa-blog-teaser {
+  --dsa-blog-teaser--background: transparent;
+  --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
+  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
+  --dsa-blog-teaser__copy--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
+  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
+  --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-copy-interface-interactive-hover);
+  --dsa-blog-teaser__copy--margin-top: var(--ks-spacing-stack-s);
+  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
+  --dsa-blog-teaser__meta--color: var(--c-post-meta_item--color);
+  --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-post-teaser__image--border-radius: var(--ks-border-radius-card);
 }
 @container post-teaser (min-width: 640px) {
-  article.c-post-teaser {
-    --g-topic--font: var(--ks-font-display-l);
-    --c-rich-text--font: var(--ks-font-copy-m);
-  }
-  article.c-post-teaser .c-tag-label--s {
-    --c-tag-label--font: var(--ks-font-interface-s);
+  .dsa-blog-teaser {
+    --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
+    --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
   }
 }
 @container post-teaser (min-width: 1000px) {
-  article.c-post-teaser {
-    --g-topic--font: var(--ks-font-display-xl);
+  .dsa-blog-teaser {
+    --dsa-blog-teaser__topic--font: var(--ks-font-display-xl);
   }
 }
-article.c-post-teaser .c-teaser {
+
+.l-container--post-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: post-teaser;
+}
+
+.dsa-blog-teaser.c-post-teaser {
+  --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
+  --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
+  --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
+}
+.dsa-blog-teaser.c-post-teaser .c-tag-label {
+  --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));
+}
+.dsa-blog-teaser.c-post-teaser .c-teaser {
   overflow: visible;
   cursor: pointer;
 }
-article.c-post-teaser .c-teaser:hover .c-teaser__topic {
-  text-shadow: 0 0 15px var(--ks-color-fg-alpha-5);
-}
-article.c-post-teaser .c-teaser:hover .c-rich-text {
-  color: var(--ks-color-fg);
+.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text {
+  color: var(--dsa-blog-teaser__copy--color_hover, var(--ks-text-color-copy-interface-interactive-hover));
 }
-article.c-post-teaser .c-teaser:hover .c-rich-text > :not(.c-post-meta) {
+.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text > :not(.c-post-meta) {
   text-decoration: none;
 }
-article.c-post-teaser .c-post-teaser__image img {
-  border-radius: var(--ks-border-radius-card);
+.dsa-blog-teaser.c-post-teaser .c-post-teaser__image img {
+  border-radius: var(--dsa-post-teaser__image--border-radius, var(--ks-border-radius-card));
 }
-article.c-post-teaser .c-post-meta {
+.dsa-blog-teaser.c-post-teaser .c-post-meta {
   --c-post-meta_author--font-weight: var(--ks-font-weight-semi-bold);
   --c-post-meta--gap: 0.5em 1em;
+  --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
+  --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
+  --c-post-meta_author--font-weight: var(
+    --dsa-blog-teaser__meta__author--font-weight,
+    var(--ks-font-weight-semi-bold)
+  );
   margin: 0;
 }
-article.c-post-teaser .c-rich-text {
+.dsa-blog-teaser.c-post-teaser .c-rich-text {
   transition: var(--ks-transition-hover);
   transition-property: color;
   display: flex;
   flex-direction: column;
   gap: var(--c-post-teaser--gap);
 }
-article.c-post-teaser .c-teaser__topic {
+.dsa-blog-teaser.c-post-teaser .c-teaser__topic {
+  font: var(--dsa-blog-teaser__topic--font, var(--dsa-topic--font, var(--ks-font-display-m)));
+  font-weight: var(--dsa-topic--font-weight);
   text-align: left;
   transition: var(--ks-transition-hover);
   transition-property: text-shadow;
 }
 
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-  --g-link--text-decoration: none;
-}
-:root .c-rich-text, :root #root .c-rich-text, [ks-inverted] .c-rich-text, [ks-inverted] #root .c-rich-text, #root [ks-inverted] .c-rich-text, [ks-inverted] #root .c-rich-text, [ks-theme] .c-rich-text, [ks-theme] #root .c-rich-text, #root [ks-theme] .c-rich-text {
-  --c-rich-text_headline--font-weight: var(--g-headline--font-weight);
-  --c-rich-text_headline--color: var(--g-headline--color);
+.c-form-check {
+  --dsa-form-check--border: var(--ks-border-width-default) solid;
+  --dsa-form-check--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-form-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
+  --dsa-form-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
+  --dsa-form-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
+  --dsa-form-check--background: var(--ks-background-color-interface-interactive);
+  --dsa-form-check--background_checked: var(--ks-color-secondary);
+  --dsa-form-check--shadow_focus: 0 0 4px 0;
+  --dsa-form-check__checkmark--color: var(--dsa-text-color-on-primary);
+}
+
+.c-form-field {
+  --dsa-form-field--color: var(--ks-text-color-interface);
+  --dsa-form-field--border: var(--ks-border-width-default) solid;
+  --dsa-form-field--border-color: var(--ks-border-color-interface-interactive);
+  --dsa-form-field--border-color_hover: var(--ks-border-color-interface-interactive-hover);
+  --dsa-form-field--border-color_focus: var(--ks-border-color-interface-interactive-active);
+  --dsa-form-field--background: var(--ks-background-color-interface-interactive);
+  --dsa-form-field--shadow_focus: 0 0 4px 0;
+  --dsa-form-field__placeholder--color: var(--ks-color-fg-alpha-5);
+}
+
+:root .c-form-check, :root #root .c-form-check, [ks-inverted] .c-form-check, [ks-inverted] #root .c-form-check, #root [ks-inverted] .c-form-check, [ks-inverted] #root .c-form-check, [ks-theme] .c-form-check, [ks-theme] #root .c-form-check, #root [ks-theme] .c-form-check {
+  --c-form-check_box--size: var(--dsa-form-check--size, 1rem);
+  --c-form-check_box--border: var(--dsa-form-check--border, var(--ks-border-width-default) solid);
+  --c-form-check_box--border-color: var(--dsa-form-check--border-color, var(--ks-border-color-interface-interactive));
+  --c-form-check_box-hover--border-color: var(
+    --dsa-form-check--border-color_hover,
+    var(--ks-border-color-interface-interactive-hover)
+  );
+  --c-form-check_box-focus--border-color: var(
+    --dsa-form-check--border-color_focus,
+    var(--ks-border-color-interface-interactive-active)
+  );
+  --c-form-check_box-checked--border-color: var(
+    --dsa-form-check--border-color_checked,
+    var(--ks-border-color-interface-interactive-selected)
+  );
+  --c-form-check_box--background: var(--dsa-form-check--background, var(--ks-background-color-interface-interactive));
+  --c-form-check_box-checked--background: var(
+    --dsa-form-check--background_checked,
+    var(--ks-background-color-interface-interactive-selected)
+  );
+  --c-form-check_box-focus--shadow: var(--dsa-form-check--shadow_focus, 0 0 4px 0);
+  --c-form-check_checkmark--color: var(--dsa-form-check__checkmark--color, var(--dsa-text-color-on-primary));
+}
+:root .c-form-field, :root #root .c-form-field, [ks-inverted] .c-form-field, [ks-inverted] #root .c-form-field, #root [ks-inverted] .c-form-field, [ks-inverted] #root .c-form-field, [ks-theme] .c-form-field, [ks-theme] #root .c-form-field, #root [ks-theme] .c-form-field {
+  --c-form-field--border: var(--dsa-form-field--border, var(--ks-border-width-default) solid);
+  --c-form-field--border-color: var(--dsa-form-field--border-color, var(--ks-border-color-interface-interactive));
+  --c-form-field-hover--border-color: var(
+    --dsa-form-field--border-color_hover,
+    var(--ks-border-color-interface-interactive-hover)
+  );
+  --c-form-field-focus--border-color: var(
+    --dsa-form-field--border-color_focus,
+    var(--ks-border-color-interface-interactive-active)
+  );
+  --c-form-field--background: var(--dsa-form-field--background, var(--ks-background-color-interface-interactive));
+  --c-form-field_focus--shadow: var(--dsa-form-field--shadow_focus, 0 0 4px 0);
+  --c-form-field--background-disabled: var(
+    var(--ks-background-color-intergface-interactive-disabled),
+    var(--ks-background-color-interface-interactive-disabled)
+  );
+  --c-form-field--color: var(--dsa-form-field--color, var(--ks-text-color-interface));
+  --c-form-field_hover--border-color: var(
+    --dsa-form-field--border-color_hover,
+    var(--ks-border-color-interface-interactive-hover)
+  );
+  --c-form-field_focus--border-color: var(
+    --dsa-form-field--border-color_active,
+    var(--ks-border-color-interface-interactive-active)
+  );
+  --c-form-field_focus--shadow: 0 0 4px -1px;
+  --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
+  --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
 }
-
-:root .c-form-check,
-:root .c-form-field,
-[ks-inverted] .c-form-check,
-[ks-inverted] .c-form-field,
-[ks-theme] .c-form-check,
-[ks-theme] .c-form-field {
-  --c-form-check_checkmark--color: var(--ks-color-fg-base);
+:root .c-form-field__input::placeholder, :root #root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-inverted] #root .c-form-field__input::placeholder, #root [ks-inverted] .c-form-field__input::placeholder, [ks-inverted] #root .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder, [ks-theme] #root .c-form-field__input::placeholder, #root [ks-theme] .c-form-field__input::placeholder {
+  color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
 }
 
 @font-face {
@@ -502,61 +638,75 @@ article.c-post-teaser .c-teaser__topic {
   font-weight: normal;
   src: url("static/fonts/google/google-sans-text.woff2") format("woff2");
 }
-body {
-  background: var(--ks-background-color-default);
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --dsa-rich-text__headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-medium));
+  --dsa-rich-text__headline--color: var(--dsa-headline--color, var(--ks-text-color-display));
+  --dsa-rich-text--color: var(--ks-text-color-default);
+  --dsa-rich-text--font: var(--ks-font-copy-m);
 }
 
 :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-  --g-topic--font-weight: var(--ks-font-weight-medium);
-  --g-topic--color: var(--ks-color-fg);
-  --g-link--font-weight: var(--ks-font-weight-medium);
-  --g-link--color-hover: var(--ks-color-fg);
-  --g-header-height: calc(var(--g-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m)) !important;
-  --g-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
-  --l-section--content-padding: var(--ks-spacing-inset-l) !important;
-  --l-section--content-width-full: 100vw !important;
-  --l-section--content-width-wide: 1440px !important;
-  --dsa-interface--gradient: linear-gradient(
-    90deg,
-    var(--ks-color-primary-to-bg-9),
-    var(--ks-color-primary-to-bg-7),
-    var(--ks-color-primary-to-bg-9)
-  );
-  --dsa-interface--background: #161933b8;
-  --dsa-interface--shadow: 0 0 0 2px var(--ks-color-fg-alpha-8), 0 0px 8px var(--ks-color-fg-alpha-5);
+  --c-rich-text--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
+  --c-rich-text--color: var(--dsa-rich-text--color, var(--ks-text-color-default));
+  --c-rich-text_headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-bold));
+  --c-rich-text_headline--color: var(--dsa-headline--color, var(--ks-text-color-primary));
 }
-@media (min-width: 42rem) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-    --l-section--content-padding: var(--ks-spacing-inset-xl) !important;
-  }
+
+body.sb-show-main.sb-main-padded {
+  padding: 0 !important;
 }
-:root[ks-inverted=true], :root #root[ks-inverted=true], [ks-inverted][ks-inverted=true], [ks-inverted] #root[ks-inverted=true], #root [ks-inverted][ks-inverted=true], [ks-inverted] #root[ks-inverted=true], [ks-theme][ks-inverted=true], [ks-theme] #root[ks-inverted=true], #root [ks-theme][ks-inverted=true] {
-  --dsa-interface--background: var(--ks-color-bg-alpha-3);
-  --dsa-interface--shadow: 0 0 0 2px var(--ks-color-fg-alpha-9), 0 0px 8px var(--ks-color-fg-alpha-7);
+
+.preview {
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
+  padding: 42px 29px;
+  background-color: var(--ks-background-color-default);
+  border-radius: var(--ks-border-radius-card);
 }
-:root .c-divider, :root #root .c-divider, [ks-inverted] .c-divider, [ks-inverted] #root .c-divider, #root [ks-inverted] .c-divider, [ks-inverted] #root .c-divider, [ks-theme] .c-divider, [ks-theme] #root .c-divider, #root [ks-theme] .c-divider {
-  --c-divider--background: var(--ks-border-color-accent);
+.preview--wrapper {
+  background-color: #1f213d;
+  padding: 2rem;
 }
-:root .c-post-head, :root #root .c-post-head, [ks-inverted] .c-post-head, [ks-inverted] #root .c-post-head, #root [ks-inverted] .c-post-head, [ks-inverted] #root .c-post-head, [ks-theme] .c-post-head, [ks-theme] #root .c-post-head, #root [ks-theme] .c-post-head {
-  --c-post-head_date--font-weight: var(--ks-font-weight-semi-bold);
+
+body {
+  background: var(--ks-background-color-default);
 }
-:root .g-link, :root #root .g-link, [ks-inverted] .g-link, [ks-inverted] #root .g-link, #root [ks-inverted] .g-link, [ks-inverted] #root .g-link, [ks-theme] .g-link, [ks-theme] #root .g-link, #root [ks-theme] .g-link {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  width: fit-content;
-  font-family: var(--ks-font-family-copy);
-  font-size: var(--ks-font-size-interface-m);
-  font-weight: var(--ks-font-weight-semi-bold);
-}
-:root .g-link .icon, :root #root .g-link .icon, [ks-inverted] .g-link .icon, [ks-inverted] #root .g-link .icon, #root [ks-inverted] .g-link .icon, [ks-inverted] #root .g-link .icon, [ks-theme] .g-link .icon, [ks-theme] #root .g-link .icon, #root [ks-theme] .g-link .icon {
-  width: 1.5em;
-  height: 1.5em;
-}
-:root .c-tag-label--m, :root #root .c-tag-label--m, [ks-inverted] .c-tag-label--m, [ks-inverted] #root .c-tag-label--m, #root [ks-inverted] .c-tag-label--m, [ks-inverted] #root .c-tag-label--m, [ks-theme] .c-tag-label--m, [ks-theme] #root .c-tag-label--m, #root [ks-theme] .c-tag-label--m {
-  --c-tag-label--vertical-padding: 0.4em;
-  --c-tag-label--horizontal-padding: 1em;
-  --c-tag-label_icon--size: 1.25em;
-  --c-tag-label_icon--margin-left: -0.6em;
-  --c-tag-label_icon--horizontal-padding: 0.5em;
+
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --g-link--font-weight: var(--dsa-link--font-weight, var(--ks-font-weight-semi-bold));
+  --g-link--text-decoration: var(--dsa-link--text-decoration, underline);
+  --g-link--text-decoration-hover: var(--dsa-link--text-decoration_hover, none);
+  --g-link--color: var(--dsa-link--color, var(--ks-text-color-default-interactive));
+  --g-link--color-hover: var(--dsa-link_hover--color, var(--ks-text-color-default-interactive-hover));
+  --g-link--background: var(--dsa-link--background, transparent);
+  --g-link--border-radius: var(--dsa-link--border-radius, 0);
+  --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--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_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
+  --l-section--content-width: var(--dsa-section__content--width, var(--l-section--container-width));
+  --g-topic--color: var(--dsa-topic--color, var(--ks-text-color-default));
+  --g-topic--font: var(--dsa-topic--font, var(--ks-font-display-l));
+  --g-topic--font-weight: var(--dsa-topic--font-weight, var(--ks-font-weight-bold));
+  --c-rich-text--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
+  --c-rich-text--vertical-spacing: var(--dsa-rich-text--vertical-spacing, var(--ks-spacing-m));
+  --c-rich-text--horizontal-spacing: var(--dsa-rich-text--horizontal-spacing, 1em);
+  --c-rich-text--color: var(--dsa-rich-text--color, var(--ks-text-color-default));
+  --c-rich-text--font-weight: var(--dsa-rich-text--font-weight, var(--ks-font-weight-regular));
+  --c-rich-text_headline--color: var(--dsa-rich-text__headline--color, var(--ks-text-color-display));
+  --c-rich-text_headline--font: var(--dsa-rich-text__headline--font, var(--ks-font-display-m));
+  --c-rich-text_headline--font-weight: var(--dsa-rich-text__headline--font-weight, var(--ks-font-weight-medium));
+  --c-rich-text_headline--margin: var(--dsa-rich-text__headline--margin, 0.75em 0 0.5em);
+}
+
+[ks-inverted=false] {
+  --dsa-text-color-on-primary: var(--dsa-text-color-on-primary);
+}
+
+[ks-inverted=true] {
+  --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-inverted);
 }

package/dist/static/tokens-business.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:26:57 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:37 GMT
  */
 
 :root, [ks-theme] {

package/dist/static/tokens-google.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:27:04 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:46 GMT
  */
 
 :root, [ks-theme] {

package/dist/static/tokens-ngo.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:26:59 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:40 GMT
  */
 
 :root, [ks-theme] {

package/dist/static/tokens-telekom.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:27:02 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:43 GMT
  */
 
 :root, [ks-theme] {

package/dist/static/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:26:54 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:34 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:26:54 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:34 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 28 Feb 2024 12:26:54 GMT
+ * Generated on Wed, 28 Feb 2024 13:06:35 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#100e36";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.2.10--canary.171.76273d8.0",
+  "version": "1.2.10--canary.178.33c3c92.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {