@kickstartds/ds-agency-premium 1.3.13 → 1.3.14--canary.454.c8089ef.0

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

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

package/dist/components/button/button.css

@@ -1,6 +1,6 @@
 .dsa-button {
-  --dsa-button--border-radius: var(--ks-border-radius-pill);
   --dsa-button--padding: 0.75em 2em;
+  --dsa-button--border-width: 2px;
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button_primary--color: var(--dsa-text-color-on-primary);
   --dsa-button_primary--color_hover: var(--dsa-text-color-on-primary);
@@ -13,10 +13,6 @@
   --dsa-button_secondary--color: var(--ks-text-color-default);
   --dsa-button_secondary--color_hover: var(--ks-text-color-default);
   --dsa-button_secondary--color_active: var(--ks-text-color-default);
-  --dsa-button_secondary--border-color: transparent;
-  --dsa-button_secondary--border-color_hover: transparent;
-  --dsa-button_secondary--border-color_active: transparent;
-  --dsa-button_secondary--border-width: 2px;
   --dsa-button_secondary--background-color: var(--ks-background-color-interface-interactive);
   --dsa-button_secondary--background-color_hover: var(--ks-background-color-interface-interactive-hover);
   --dsa-button_secondary--background-color_active: var(--ks-background-color-interface-interactive-active);

package/dist/components/faq/faq.css

@@ -1,30 +1,30 @@
-.c-faq {
-  --c-faq--border-color: var(--ks-border-color-accent);
-  --c-faq__summary--color: var(--dsa-topic--color);
-  --c-faq__summary--font-weight: var(--dsa-topic--font-weight);
-  --c-faq__summary--font: var(--dsa-topic--font);
-  --c-faq__summary--font-family: var(--dsa-topic--font-family);
-  --c-faq__answer--color: var(--dsa-headline--color);
-  --c-faq__answer--font: var(--dsa-topic-font);
-  --c-faq__icon--color: var(--ks-text-color-primary-interactive);
-  --c-faq_header--padding: 1em 0;
-  --c-faq_content--padding: 0em 0em 1em 0em;
+.dsa-faq {
+  --dsa-faq--border-color: var(--ks-border-color-accent);
+  --dsa-faq__summary--color: var(--dsa-topic--color);
+  --dsa-faq__summary--font-weight: var(--dsa-topic--font-weight);
+  --dsa-faq__summary--font: var(--dsa-topic--font);
+  --dsa-faq__summary--font-family: var(--dsa-topic--font-family);
+  --dsa-faq__answer--color: var(--dsa-headline--color);
+  --dsa-faq__answer--font: var(--dsa-topic--font);
+  --dsa-faq__icon--color: var(--ks-text-color-primary-interactive);
+  --dsa-faq_header--padding: 1em 0;
+  --dsa-faq_content--padding: 0em 0em 1em 0em;
 }
 
-.c-faq .c-collapsible-box {
-  --c-collapsible-box-summary--color: var(--c-faq__summary--color, var(--dsa-topic--color));
-  --c-collapsible-box-summary--font-weight: var(--c-faq__summary--font-weight), var(--dsa-topic--font-weight);
-  --c-collapsible-box-summary--font: var(--c-faq__summary--font, var(--dsa-topic--font));
-  --c-collapsible-box-icon--color: var(--c-faq-icon--color, var(--ks-text-color-primary));
-  --c-collapsible-box_header--padding: var(--c-faq_header--padding, 1em 0);
-  --c-collapsible-box_content--padding: var(--c-faq_content--padding, 0em 0em 1em 0em);
-  --c-collapsible-box--border-color: var(--c-faq--border-color, var(--ks-border-color-accent));
+.dsa-faq .c-collapsible-box {
+  --c-collapsible-box-summary--color: var(--dsa-faq__summary--color, var(--dsa-topic--color));
+  --c-collapsible-box-summary--font-weight: var(--dsa-faq__summary--font-weight), var(--dsa-topic--font-weight);
+  --c-collapsible-box-summary--font: var(--dsa-faq__summary--font, var(--dsa-topic--font));
+  --c-collapsible-box-icon--color: var(--dsa-faq-icon--color, var(--ks-text-color-primary));
+  --c-collapsible-box_header--padding: var(--dsa-faq_header--padding, 1em 0);
+  --c-collapsible-box_content--padding: var(--dsa-faq_content--padding, 0em 0em 1em 0em);
+  --c-collapsible-box--border-color: var(--dsa-faq--border-color, var(--ks-border-color-accent));
 }
-.c-faq .c-collapsible-box__header__text {
+.dsa-faq .c-collapsible-box__header__text {
   color: var(--dsa-faq__summary--color, var(--dsa-topic--color));
   font: var(--dsa-faq__summary--font, var(--dsa-topic--font));
   font-weight: var(--dsa-faq__summary--font-weight, var(--dsa-topic--font-weight));
 }
-.c-faq .c-collapsible-box__header__icon {
+.dsa-faq .c-collapsible-box__header__icon {
   color: var(--c-collapsible-box-icon--color, var(--ks-text-color-primary-interactive));
 }

package/dist/components/faq/index.js

@@ -3,7 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { CollapsibleBox } from '@kickstartds/base/lib/collapsible-box';
 
-const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: `c-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) })));
+const FaqContextDefault = forwardRef(({ questions, ...rest }, ref) => (
+//TODO: Fix in main
+jsx("div", { ...rest, ref: ref, className: `dsa-faq`, children: questions.map((question, index) => (jsx(CollapsibleBox, { summary: question.question, text: question.answer }, index))) })));
 const FaqContext = createContext(FaqContextDefault);
 const Faq = forwardRef((props, ref) => {
     const Component = useContext(FaqContext);

package/dist/components/header/header.css

@@ -4,20 +4,21 @@
 }
 
 .dsa-header {
-  --dsa-header--background-color: var(--ks-background-color-default);
+  --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);
 }
 
 .dsa-header {
-  position: relative;
-  background-color: var(--dsa-header--background-color);
+  background: var(--dsa-header--background, var(--ks-background-color-default));
   z-index: 1;
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
+  position: relative;
 }
 .dsa-header--floating {
-  background: linear-gradient(var(--ks-color-bg-alpha-5), transparent);
+  background: var(--dsa-header_floating--background, linear-gradient(var(--ks-color-bg-alpha-5), transparent));
   position: absolute;
   z-index: 999;
 }

package/dist/components/headline/headline.css

@@ -1,7 +1,14 @@
 :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
-  --dsa-headline--higlight-gradient: linear-gradient(90deg, var(--ks-color-secondary), var(--ks-color-primary));
+  --dsa-headline--higlight-background: linear-gradient(
+    0deg,
+    var(--ks-color-primary-alpha-4) 45%,
+    var(--ks-color-primary-alpha-3) 45%,
+    var(--ks-color-primary-alpha-3) 60%,
+    var(--ks-color-primary-alpha-1) 60%
+  );
   --dsa-headline--color: var(--ks-text-color-display);
-  --dsa-headline--font-weight: var(--ks-font-weight-medium);
+  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline--text-transform: uppercase;
   --dsa-headline__subheadline--color: var(--ks-text-color-primary);
   --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline--gap: 0.25em;
@@ -33,6 +40,7 @@
 }
 .dsa-headline .dsa-headline__headline {
   font: var(--dsa-headline--font);
+  text-transform: var(--dsa-headline--text-transform);
 }
 .dsa-headline .dsa-headline__subheadline {
   font: var(--dsa-headline__subheadline--font);
@@ -101,7 +109,7 @@ h3 strong,
 h4 strong,
 h5 strong {
   font-weight: inherit;
-  background: var(--dsa-headline--higlight-gradient);
+  background: var(--dsa-headline--higlight-background);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

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

@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-0910f130.js";
+export * from "../../BlogPostProps-f9a49428.js";
 export * from "../../BlogOverviewProps-f385fc47.js";
 export { Sections, Floating, Inverted, Inverted1, PageProps, Header, Footer, SettingsProps };

package/dist/components/nav-main/nav-main.css

@@ -1,15 +1,14 @@
 .nav-main {
-  --dsa-nav-main--background: linear-gradient(
-    125deg,
-    var(--ks-background-color-default),
-    var(--ks-color-primary-to-bg-6)
-  );
+  --dsa-nav-main--background: var(--ks-background-color-default);
   --dsa-nav-main__link--color: var(--ks-text-color-interface-interactive);
   --dsa-nav-main__link--opacity_hover: 0.75;
   --dsa-nav-main__link--color_active: var(--ks-text-color-interface-interactive-active);
   --dsa-nav-main__link--font: var(--ks-font-interface-l);
   --dsa-nav-main__link--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-main__link--font-weight_active: var(--ks-font-weight-semi-bold);
+  --dsa-nav-main_floating__link--color: var(--ks-color-fg);
+  --dsa-nav-main_floating__link--color_active: var(--ks-color-fg);
+  --dsa-nav-main_floating__link--opacity_hover: 0.6;
   --dsa-nav-main__link--padding: 0.35em 0;
   --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
 }
@@ -28,10 +27,20 @@
 .nav-main--active .nav-main__item .nav-main__link {
   color: var(--dsa-nav-main__link--color);
 }
+@media (min-width: 62rem) {
+  .dsa-header--floating .nav-main--active .nav-main__item .nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color);
+  }
+}
 .nav-main--active .nav-main__item--active .nav-main__link {
   color: var(--dsa-nav-main__link--color_active);
   font-weight: var(--dsa-nav-main__link--font-weight_active);
 }
+@media (min-width: 62rem) {
+  .dsa-header--floating .nav-main--active .nav-main__item--active .nav-main__link {
+    color: var(--dsa-nav-main_floating__link--color_active);
+  }
+}
 .nav-main ul {
   /* critical:start */
   box-sizing: border-box;
@@ -50,7 +59,12 @@
 .nav-main__list:hover .nav-main__link {
   opacity: var(--dsa-nav-main__link--opacity_hover);
 }
-.nav-main a.nav-main__link {
+@media (min-width: 62rem) {
+  .dsa-header--floating .nav-main__list:hover .nav-main__link {
+    opacity: var(--dsa-nav-main_floating__link--opacity_hover);
+  }
+}
+.nav-main .nav-main__item a.nav-main__link {
   /* critical:start */
   font: var(--dsa-nav-main__link--font);
   font-weight: var(--dsa-nav-main__link--font-weight);
@@ -60,11 +74,11 @@
   padding: var(--dsa-nav-main__link--padding);
   /* critical:end */
 }
-.nav-main a.nav-main__link:hover {
+.nav-main .nav-main__item a.nav-main__link:hover {
   opacity: 1;
   color: var(--dsa-nav-main__link--color_active);
 }
-.nav-main a.nav-main__link:active {
+.nav-main .nav-main__item a.nav-main__link:active {
   color: var(--dsa-nav-main__link--color_active);
 }
 .nav-main__logo {

package/dist/components/nav-main/nav-toggle.css

@@ -1,6 +1,8 @@
 .nav-toggle {
   --nav-toggle--color: var(--ks-text-color-default);
   --nav-toggle--color_open: var(--ks-text-color-default);
+  --nav-toggle_floating--color: var(--ks-text-color-interface-interactive);
+  --nav-toggle_floating--color_open: var(--ks-text-color-interface-interactive);
 }
 
 html.overlay-open {
@@ -16,6 +18,12 @@ button.nav-toggle {
   z-index: 1;
   padding: 0 var(--dsa-header--spacing-horizontal);
   transform: translateX(var(--dsa-header--spacing-horizontal));
+  --nav-toggle__icon-bar--offset: 14px;
+}
+@media (min-width: 42em) {
+  button.nav-toggle {
+    --nav-toggle__icon-bar--offset: 18px;
+  }
 }
 @media (min-width: 62em) {
   button.nav-toggle {
@@ -38,19 +46,25 @@ button.nav-toggle .nav-toggle__icon {
   display: block;
   cursor: pointer;
   height: var(--dsa-logo--height);
-  width: 31px;
+  width: var(--dsa-logo--height);
   transform: scale(0.7) translate(7.5%, 7.5%);
   transition: inherit;
   color: var(--nav-toggle--color);
 }
+.dsa-header--floating button.nav-toggle .nav-toggle__icon {
+  color: var(--nav-toggle_floating--color);
+}
 @media (min-width: 40rem) {
   button.nav-toggle .nav-toggle__icon {
-    transform: scale(0.9) translate(2.5%, 2.5%);
+    transform: scale(0.8) translate(2.5%, 2.5%);
   }
 }
 .overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
+.overlay-open .dsa-header--floating button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling .dsa-header--floating button.nav-toggle .nav-toggle__icon {
+  color: var(--nav-toggle_floating--color_open);
+}
 .header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
   color: var(--nav-toggle--color_open);
 }
@@ -79,12 +93,12 @@ button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
   display: none;
 }
 button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
-  top: 14px;
+  top: var(--nav-toggle__icon-bar--offset);
   transition: top ease 150ms, transform 150ms ease 150ms;
   transform: rotate(-45deg);
 }
 button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
-  bottom: 14px;
+  bottom: var(--nav-toggle__icon-bar--offset);
   transition: bottom ease 150ms, transform 150ms ease 150ms;
   transform: rotate(45deg);
 }