@kickstartds/ds-agency-premium 1.3.23 → 1.3.25--canary.523.91aa920.0

package/dist/{SectionProps-93230a76.d.ts → SectionProps-83d399b4.d.ts}

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-58c84ccc.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-93230a76.js";
 declare const BlogOverview: {
     ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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-93230a76.js";
 declare const BlogPost: {
     ({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/button/button.css

@@ -36,6 +36,9 @@
   text-transform: var(--dsa-button--text-transform);
   transition-property: box-shadow, transform, background-color, color, border;
 }
+.dsa-button.c-button .icon {
+  margin-left: var(--ks-spacing-xxs);
+}
 .dsa-button.c-button.c-button--solid {
   --c-button--color: var(--dsa-button_primary--color, var(--dsa-text-color-on-primary));
   --c-button--color-hover: var(--dsa-button_primary--color_hover, var(--dsa-text-color-on-primary));
@@ -84,7 +87,7 @@
   );
   --c-button--background-color-selected: var(
     --dsa-button_secondary--background-color_selected,
-    var(--ks-background-color-clear-interactive-selected)
+    var(--ks-background-color-clear-interactive-selected) ;
   );
 }
 .dsa-button.c-button.c-button--outline {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-24e0335c.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.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

@@ -4,7 +4,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-93230a76.js";
+import { SectionProps } from "../../SectionProps-83d399b4.js";
 import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
 /* eslint-disable */
 /**
@@ -72,6 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-0910f130.js";
-export * from "../../BlogOverviewProps-f385fc47.js";
+export * from "../../BlogPostProps-93230a76.js";
+export * from "../../BlogOverviewProps-93230a76.js";
 export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:39 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:34 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-93230a76.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 & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+import { SectionProps } from "../../SectionProps-83d399b4.js";
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionProvider: FC<PropsWithChildren<any>>;
-export { SectionContextDefault, SectionContext, Section, SectionProvider };
+export { Section, SectionProvider };

package/dist/components/section/index.js

@@ -1,13 +1,13 @@
 import "./section.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, createContext, useContext } from 'react';
+import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
-import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
+import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const Section = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -16,7 +16,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
             `dsa-section-style--${style === "verticalGradient"
                 ? "vertical-gradient"
                 : style === "horizontalGradient"
@@ -42,12 +42,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
             items: buttons,
         }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
 });
-const SectionContext = createContext(SectionContextDefault);
-const Section = forwardRef((props, ref) => {
-    const Component = useContext(SectionContext);
-    return jsx(Component, { ...props, ref: ref });
-});
 Section.displayName = "Section";
-const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));
+const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));
 
-export { Section, SectionContext, SectionContextDefault, SectionProvider };
+export { Section, SectionProvider };

package/dist/global.css

@@ -608,6 +608,997 @@ h3 {
   font-style: normal;
   font-display: swap;
 }
+.spacings {
+  border: 2px solid white;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.spacing {
+  height: 26px;
+  background-color: var(--ks-color-fg-alpha-4);
+  position: relative;
+}
+
+.spacing-xxs {
+  width: calc(var(--ks-spacing-xxs) * 1);
+}
+
+.spacing-xs {
+  width: calc(var(--ks-spacing-xs) * 1);
+}
+
+.spacing-s {
+  width: calc(var(--ks-spacing-s) * 1);
+}
+
+.spacing-m {
+  width: calc(var(--ks-spacing-m) * 1);
+}
+
+.spacing-l {
+  width: calc(var(--ks-spacing-l) * 1);
+}
+
+.spacing-xl {
+  width: calc(var(--ks-spacing-xl) * 1);
+}
+
+.spacing-xxl {
+  width: calc(var(--ks-spacing-xxl) * 1);
+}
+
+.font-sizes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-m);
+}
+.font-sizes-display {
+  font-family: var(--ks-font-family-display);
+}
+.font-sizes-interface {
+  font-family: var(--ks-font-family-interface);
+}
+.font-sizes-copy {
+  font-family: var(--ks-font-family-copy);
+}
+.font-sizes-mono {
+  font-family: var(--ks-font-family-mono);
+}
+
+.font-size {
+  color: var(--ks-color-fg);
+}
+.font-size-display-xxs {
+  font-size: var(--ks-font-size-display-xxs);
+}
+.font-size-display-xs {
+  font-size: var(--ks-font-size-display-xs);
+}
+.font-size-display-s {
+  font-size: var(--ks-font-size-display-s);
+}
+.font-size-display-m {
+  font-size: var(--ks-font-size-display-m);
+}
+.font-size-display-l {
+  font-size: var(--ks-font-size-display-l);
+}
+.font-size-display-xl {
+  font-size: var(--ks-font-size-display-xl);
+}
+.font-size-display-xxl {
+  font-size: var(--ks-font-size-display-xxl);
+}
+.font-size-copy-xxs {
+  font-size: var(--ks-font-size-copy-xxs);
+}
+.font-size-copy-xs {
+  font-size: var(--ks-font-size-copy-xs);
+}
+.font-size-copy-s {
+  font-size: var(--ks-font-size-copy-s);
+}
+.font-size-copy-m {
+  font-size: var(--ks-font-size-copy-m);
+}
+.font-size-copy-l {
+  font-size: var(--ks-font-size-copy-l);
+}
+.font-size-copy-xl {
+  font-size: var(--ks-font-size-copy-xl);
+}
+.font-size-copy-xxl {
+  font-size: var(--ks-font-size-copy-xxl);
+}
+.font-size-interface-xxs {
+  font-size: var(--ks-font-size-interface-xxs);
+}
+.font-size-interface-xs {
+  font-size: var(--ks-font-size-interface-xs);
+}
+.font-size-interface-s {
+  font-size: var(--ks-font-size-interface-s);
+}
+.font-size-interface-m {
+  font-size: var(--ks-font-size-interface-m);
+}
+.font-size-interface-l {
+  font-size: var(--ks-font-size-interface-l);
+}
+.font-size-interface-xl {
+  font-size: var(--ks-font-size-interface-xl);
+}
+.font-size-interface-xxl {
+  font-size: var(--ks-font-size-interface-xxl);
+}
+.font-size-mono-xxs {
+  font-size: var(--ks-font-size-mono-xxs);
+}
+.font-size-mono-xs {
+  font-size: var(--ks-font-size-mono-xs);
+}
+.font-size-mono-s {
+  font-size: var(--ks-font-size-mono-s);
+}
+.font-size-mono-m {
+  font-size: var(--ks-font-size-mono-m);
+}
+.font-size-mono-l {
+  font-size: var(--ks-font-size-mono-l);
+}
+.font-size-mono-xl {
+  font-size: var(--ks-font-size-mono-xl);
+}
+.font-size-mono-xxl {
+  font-size: var(--ks-font-size-mono-xxl);
+}
+.font-size-base-xxs {
+  font-size: var(--ks-font-size-xxs);
+}
+.font-size-base-xs {
+  font-size: var(--ks-font-size-xs);
+}
+.font-size-base-s {
+  font-size: var(--ks-font-size-s);
+}
+.font-size-base-m {
+  font-size: var(--ks-font-size-m);
+}
+.font-size-base-l {
+  font-size: var(--ks-font-size-l);
+}
+.font-size-base-xl {
+  font-size: var(--ks-font-size-xl);
+}
+.font-size-base-xxl {
+  font-size: var(--ks-font-size-xxl);
+}
+
+:root {
+  --global-shrink-factor: 0.8;
+  --global-grow-factor: 1.2;
+  --global-bp-factor: 1.02;
+}
+
+:root {
+  --color-test: #ff00ff;
+  --color-test-inverted: #00f2ff;
+}
+
+:root,
+[ks-theme] {
+  --ks-color-test-base: var(--color-test);
+  --ks-color-test-inverted-base: var(--color-test-inverted);
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false] {
+  --ks-color-test: var(--ks-color-test-base);
+  --ks-color-test-inverted: var(--ks-color-test-inverted-base);
+}
+
+[ks-inverted=true] {
+  --ks-color-test: var(--ks-color-test-inverted-base);
+  --ks-color-test-inverted: var(--ks-color-test-base);
+}
+
+:root,
+[ks-inverted],
+[ks-inverted=true],
+[ks-inverted=false] {
+  --ks-color-test-alpha-1: color-mix(in srgb, var(--ks-color-test) 10%, transparent);
+  --ks-color-test-alpha-2: color-mix(in srgb, var(--ks-color-test) 20%, transparent);
+  --ks-color-test-alpha-3: color-mix(in srgb, var(--ks-color-test) 30%, transparent);
+  --ks-color-test-alpha-4: color-mix(in srgb, var(--ks-color-test) 40%, transparent);
+  --ks-color-test-alpha-5: color-mix(in srgb, var(--ks-color-test) 50%, transparent);
+  --ks-color-test-alpha-6: color-mix(in srgb, var(--ks-color-test) 60%, transparent);
+  --ks-color-test-alpha-7: color-mix(in srgb, var(--ks-color-test) 70%, transparent);
+  --ks-color-test-alpha-8: color-mix(in srgb, var(--ks-color-test) 80%, transparent);
+  --ks-color-test-alpha-9: color-mix(in srgb, var(--ks-color-test) 90%, transparent);
+  --ks-color-test-alpha-1-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 10%, transparent);
+  --ks-color-test-alpha-2-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 20%, transparent);
+  --ks-color-test-alpha-3-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 30%, transparent);
+  --ks-color-test-alpha-4-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 40%, transparent);
+  --ks-color-test-alpha-5-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 50%, transparent);
+  --ks-color-test-alpha-6-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 60%, transparent);
+  --ks-color-test-alpha-7-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 70%, transparent);
+  --ks-color-test-alpha-8-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 80%, transparent);
+  --ks-color-test-alpha-9-inverted: color-mix(in srgb, var(--ks-color-test-inverted) 90%, transparent);
+  --ks-color-test-to-bg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-bg));
+  --ks-color-test-to-bg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-bg));
+  --ks-color-test-to-bg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-bg));
+  --ks-color-test-to-bg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-bg));
+  --ks-color-test-to-bg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-bg));
+  --ks-color-test-to-bg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-bg));
+  --ks-color-test-to-bg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-bg));
+  --ks-color-test-to-bg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-bg));
+  --ks-color-test-to-bg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-bg));
+  --ks-color-test-inverted-to-bg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-bg-inverted));
+  --ks-color-test-inverted-to-bg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-bg-inverted));
+  --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-fg));
+  --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-fg));
+  --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-fg));
+  --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-fg));
+  --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-fg));
+  --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-fg));
+  --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-fg));
+  --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-fg));
+  --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-fg));
+  --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-fg-inverted));
+  --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-fg-inverted));
+}
+
+:root,
+[ks-theme] {
+  --ks-background-color-test-base: var(--ks-color-test);
+  --ks-background-color-test-inverted-base: var(--ks-color-test-inverted);
+}
+
+:root {
+  --ks-background-color-test: var(--ks-background-color-test-base);
+  --ks-background-color-test-inverted: var(--ks-background-color-test-inverted-base);
+}
+
+[ks-inverted=true] {
+  --ks-background-color-test: var(--ks-background-color-test-inverted-base);
+  --ks-background-color-test-inverted: var(--ks-background-color-test-base);
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --font-size-base: 16px;
+  --font-size-display-shrink-factor: 0.8;
+  --font-size-display-grow-factor: 1.3;
+  --font-size-display-bp-factor: 1.02;
+  --font-size-copy-shrink-factor: 0.8;
+  --font-size-copy-grow-factor: 1.2;
+  --font-size-copy-bp-factor: 1.01;
+  --font-size-interface-shrink-factor: 0.8;
+  --font-size-interface-grow-factor: 1.2;
+  --font-size-interface-bp-factor: 1.01;
+  --font-size-mono-shrink-factor: 0.8;
+  --font-size-mono-grow-factor: 1.2;
+  --font-size-mono-bp-factor: 1.01;
+  --font-size-display-xxs-bp-factor: calc(1 * var(--font-size-display-bp-factor));
+  --font-size-display-xs-bp-factor: calc(var(--font-size-display-xxs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-s-bp-factor: calc(var(--font-size-display-xs-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-m-bp-factor: calc(var(--font-size-display-s-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-l-bp-factor: calc(var(--font-size-display-m-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xl-bp-factor: calc(var(--font-size-display-l-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-display-xxl-bp-factor: calc(var(--font-size-display-xl-bp-factor) * var(--font-size-display-bp-factor));
+  --font-size-copy-xxs-bp-factor: calc(1 * var(--font-size-copy-bp-factor));
+  --font-size-copy-xs-bp-factor: calc(var(--font-size-copy-xxs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-s-bp-factor: calc(var(--font-size-copy-xs-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-m-bp-factor: calc(var(--font-size-copy-s-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-l-bp-factor: calc(var(--font-size-copy-m-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xl-bp-factor: calc(var(--font-size-copy-l-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-copy-xxl-bp-factor: calc(var(--font-size-copy-xl-bp-factor) * var(--font-size-copy-bp-factor));
+  --font-size-interface-xxs-bp-factor: calc(1 * var(--font-size-interface-bp-factor));
+  --font-size-interface-xs-bp-factor: calc(
+    var(--font-size-interface-xxs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-s-bp-factor: calc(
+    var(--font-size-interface-xs-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-m-bp-factor: calc(
+    var(--font-size-interface-s-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-l-bp-factor: calc(
+    var(--font-size-interface-m-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xl-bp-factor: calc(
+    var(--font-size-interface-l-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-interface-xxl-bp-factor: calc(
+    var(--font-size-interface-xl-bp-factor) * var(--font-size-interface-bp-factor)
+  );
+  --font-size-mono-xxs-bp-factor: calc(1 * var(--font-size-mono-bp-factor));
+  --font-size-mono-xs-bp-factor: calc(var(--font-size-mono-xxs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-s-bp-factor: calc(var(--font-size-mono-xs-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-m-bp-factor: calc(var(--font-size-mono-s-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-l-bp-factor: calc(var(--font-size-mono-m-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xl-bp-factor: calc(var(--font-size-mono-l-bp-factor) * var(--font-size-mono-bp-factor));
+  --font-size-mono-xxl-bp-factor: calc(var(--font-size-mono-xl-bp-factor) * var(--font-size-mono-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-base: calc(
+    var(--ks-font-size-display-xs-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-xs-base: calc(
+    var(--ks-font-size-display-s-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-s-base: calc(
+    var(--ks-font-size-display-m-base) * calc(var(--font-size-display-shrink-factor) * 1)
+  );
+  --ks-font-size-display-m-base: var(--font-size-base);
+  --ks-font-size-display-l-base: calc(var(--ks-font-size-display-m-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xl-base: calc(var(--ks-font-size-display-l-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-display-xxl-base: calc(var(--ks-font-size-display-xl-base) * var(--font-size-display-grow-factor));
+  --ks-font-size-copy-xxs-base: calc(var(--ks-font-size-copy-xs-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-xs-base: calc(var(--ks-font-size-copy-s-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-s-base: calc(var(--ks-font-size-copy-m-base) * calc(var(--font-size-copy-shrink-factor) * 1));
+  --ks-font-size-copy-m-base: var(--font-size-base);
+  --ks-font-size-copy-l-base: calc(var(--ks-font-size-copy-m-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xl-base: calc(var(--ks-font-size-copy-l-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-copy-xxl-base: calc(var(--ks-font-size-copy-xl-base) * var(--font-size-copy-grow-factor));
+  --ks-font-size-interface-xxs-base: calc(
+    var(--ks-font-size-interface-xs-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-xs-base: calc(
+    var(--ks-font-size-interface-s-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-s-base: calc(
+    var(--ks-font-size-interface-m-base) * calc(var(--font-size-interface-shrink-factor) * 1)
+  );
+  --ks-font-size-interface-m-base: var(--font-size-base);
+  --ks-font-size-interface-l-base: calc(var(--ks-font-size-interface-m-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xl-base: calc(var(--ks-font-size-interface-l-base) * var(--font-size-interface-grow-factor));
+  --ks-font-size-interface-xxl-base: calc(
+    var(--ks-font-size-interface-xl-base) * var(--font-size-interface-grow-factor)
+  );
+  --ks-font-size-mono-xxs-base: calc(var(--ks-font-size-mono-xs-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-xs-base: calc(var(--ks-font-size-mono-s-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-s-base: calc(var(--ks-font-size-mono-m-base) * calc(var(--font-size-mono-shrink-factor) * 1));
+  --ks-font-size-mono-m-base: var(--font-size-base);
+  --ks-font-size-mono-l-base: calc(var(--ks-font-size-mono-m-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xl-base: calc(var(--ks-font-size-mono-l-base) * var(--font-size-mono-grow-factor));
+  --ks-font-size-mono-xxl-base: calc(var(--ks-font-size-mono-xl-base) * var(--font-size-mono-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs-bp-factor-phone: calc(1 * var(--font-size-display-xxs-bp-factor));
+  --ks-font-size-display-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxs-bp-factor-phone) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-tablet) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxs-bp-factor-laptop) * var(--font-size-display-xxs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-phone: calc(1 * var(--font-size-display-xs-bp-factor));
+  --ks-font-size-display-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xs-bp-factor-phone) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xs-bp-factor-tablet) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xs-bp-factor-laptop) * var(--font-size-display-xs-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-phone: calc(1 * var(--font-size-display-s-bp-factor));
+  --ks-font-size-display-s-bp-factor-tablet: calc(
+    var(--ks-font-size-display-s-bp-factor-phone) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-laptop: calc(
+    var(--ks-font-size-display-s-bp-factor-tablet) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-s-bp-factor-desktop: calc(
+    var(--ks-font-size-display-s-bp-factor-laptop) * var(--font-size-display-s-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-phone: calc(1 * var(--font-size-display-m-bp-factor));
+  --ks-font-size-display-m-bp-factor-tablet: calc(
+    var(--ks-font-size-display-m-bp-factor-phone) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-laptop: calc(
+    var(--ks-font-size-display-m-bp-factor-tablet) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-m-bp-factor-desktop: calc(
+    var(--ks-font-size-display-m-bp-factor-laptop) * var(--font-size-display-m-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-phone: calc(1 * var(--font-size-display-l-bp-factor));
+  --ks-font-size-display-l-bp-factor-tablet: calc(
+    var(--ks-font-size-display-l-bp-factor-phone) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-laptop: calc(
+    var(--ks-font-size-display-l-bp-factor-tablet) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-l-bp-factor-desktop: calc(
+    var(--ks-font-size-display-l-bp-factor-laptop) * var(--font-size-display-l-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-phone: calc(1 * var(--font-size-display-xl-bp-factor));
+  --ks-font-size-display-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xl-bp-factor-phone) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xl-bp-factor-tablet) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xl-bp-factor-laptop) * var(--font-size-display-xl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-phone: calc(1 * var(--font-size-display-xxl-bp-factor));
+  --ks-font-size-display-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-display-xxl-bp-factor-phone) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-tablet) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-display-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-display-xxl-bp-factor-laptop) * var(--font-size-display-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-phone: calc(1 * var(--font-size-copy-xxs-bp-factor));
+  --ks-font-size-copy-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-phone) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-tablet) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxs-bp-factor-laptop) * var(--font-size-copy-xxs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-phone: calc(1 * var(--font-size-copy-xs-bp-factor));
+  --ks-font-size-copy-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xs-bp-factor-phone) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-tablet) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xs-bp-factor-laptop) * var(--font-size-copy-xs-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-phone: calc(1 * var(--font-size-copy-s-bp-factor));
+  --ks-font-size-copy-s-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-s-bp-factor-phone) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-s-bp-factor-tablet) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-s-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-s-bp-factor-laptop) * var(--font-size-copy-s-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-phone: calc(1 * var(--font-size-copy-m-bp-factor));
+  --ks-font-size-copy-m-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-m-bp-factor-phone) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-m-bp-factor-tablet) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-m-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-m-bp-factor-laptop) * var(--font-size-copy-m-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-phone: calc(1 * var(--font-size-copy-l-bp-factor));
+  --ks-font-size-copy-l-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-l-bp-factor-phone) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-l-bp-factor-tablet) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-l-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-l-bp-factor-laptop) * var(--font-size-copy-l-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-phone: calc(1 * var(--font-size-copy-xl-bp-factor));
+  --ks-font-size-copy-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xl-bp-factor-phone) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-tablet) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xl-bp-factor-laptop) * var(--font-size-copy-xl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-phone: calc(1 * var(--font-size-copy-xxl-bp-factor));
+  --ks-font-size-copy-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-phone) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-tablet) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-copy-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-copy-xxl-bp-factor-laptop) * var(--font-size-copy-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-phone: calc(1 * var(--font-size-interface-xxs-bp-factor));
+  --ks-font-size-interface-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-phone) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-tablet) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxs-bp-factor-laptop) * var(--font-size-interface-xxs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-phone: calc(1 * var(--font-size-interface-xs-bp-factor));
+  --ks-font-size-interface-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xs-bp-factor-phone) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-tablet) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xs-bp-factor-laptop) * var(--font-size-interface-xs-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-phone: calc(1 * var(--font-size-interface-s-bp-factor));
+  --ks-font-size-interface-s-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-s-bp-factor-phone) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-s-bp-factor-tablet) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-s-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-s-bp-factor-laptop) * var(--font-size-interface-s-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-phone: calc(1 * var(--font-size-interface-m-bp-factor));
+  --ks-font-size-interface-m-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-m-bp-factor-phone) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-m-bp-factor-tablet) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-m-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-m-bp-factor-laptop) * var(--font-size-interface-m-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-phone: calc(1 * var(--font-size-interface-l-bp-factor));
+  --ks-font-size-interface-l-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-l-bp-factor-phone) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-l-bp-factor-tablet) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-l-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-l-bp-factor-laptop) * var(--font-size-interface-l-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-phone: calc(1 * var(--font-size-interface-xl-bp-factor));
+  --ks-font-size-interface-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xl-bp-factor-phone) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-tablet) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xl-bp-factor-laptop) * var(--font-size-interface-xl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-phone: calc(1 * var(--font-size-interface-xxl-bp-factor));
+  --ks-font-size-interface-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-phone) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-tablet) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-interface-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-interface-xxl-bp-factor-laptop) * var(--font-size-interface-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-phone: calc(1 * var(--font-size-mono-xxs-bp-factor));
+  --ks-font-size-mono-xxs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-phone) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-tablet) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xxs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxs-bp-factor-laptop) * var(--font-size-mono-xxs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-phone: calc(1 * var(--font-size-mono-xs-bp-factor));
+  --ks-font-size-mono-xs-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xs-bp-factor-phone) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-tablet) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-xs-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xs-bp-factor-laptop) * var(--font-size-mono-xs-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-phone: calc(1 * var(--font-size-mono-s-bp-factor));
+  --ks-font-size-mono-s-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-s-bp-factor-phone) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-s-bp-factor-tablet) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-s-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-s-bp-factor-laptop) * var(--font-size-mono-s-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-phone: calc(1 * var(--font-size-mono-m-bp-factor));
+  --ks-font-size-mono-m-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-m-bp-factor-phone) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-m-bp-factor-tablet) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-m-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-m-bp-factor-laptop) * var(--font-size-mono-m-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-phone: calc(1 * var(--font-size-mono-l-bp-factor));
+  --ks-font-size-mono-l-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-l-bp-factor-phone) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-l-bp-factor-tablet) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-l-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-l-bp-factor-laptop) * var(--font-size-mono-l-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-phone: calc(1 * var(--font-size-mono-xl-bp-factor));
+  --ks-font-size-mono-xl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xl-bp-factor-phone) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-tablet) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xl-bp-factor-laptop) * var(--font-size-mono-xl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-phone: calc(1 * var(--font-size-mono-xxl-bp-factor));
+  --ks-font-size-mono-xxl-bp-factor-tablet: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-phone) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-laptop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-tablet) * var(--font-size-mono-xxl-bp-factor)
+  );
+  --ks-font-size-mono-xxl-bp-factor-desktop: calc(
+    var(--ks-font-size-mono-xxl-bp-factor-laptop) * var(--font-size-mono-xxl-bp-factor)
+  );
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-xxs-bp-factor, 1));
+  --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-xs-bp-factor, 1));
+  --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-s-bp-factor, 1));
+  --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-m-bp-factor, 1));
+  --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-l-bp-factor, 1));
+  --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-xl-bp-factor, 1));
+  --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-xxl-bp-factor, 1));
+  --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-xxs-bp-factor, 1));
+  --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-xs-bp-factor, 1));
+  --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-s-bp-factor, 1));
+  --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-m-bp-factor, 1));
+  --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-l-bp-factor, 1));
+  --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-xl-bp-factor, 1));
+  --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-xxl-bp-factor, 1));
+  --ks-font-size-interface-xxs: calc(
+    var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-xxs-bp-factor, 1)
+  );
+  --ks-font-size-interface-xs: calc(
+    var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-xs-bp-factor, 1)
+  );
+  --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-s-bp-factor, 1));
+  --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-m-bp-factor, 1));
+  --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-l-bp-factor, 1));
+  --ks-font-size-interface-xl: calc(
+    var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-xl-bp-factor, 1)
+  );
+  --ks-font-size-interface-xxl: calc(
+    var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-xxl-bp-factor, 1)
+  );
+  --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-xxs-bp-factor, 1));
+  --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-xs-bp-factor, 1));
+  --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-s-bp-factor, 1));
+  --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-m-bp-factor, 1));
+  --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-l-bp-factor, 1));
+  --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-xl-bp-factor, 1));
+  --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-xxl-bp-factor, 1));
+}
+
+@media (min-width: 36em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-phone);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-phone);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-phone);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-phone);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-phone);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-phone);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-phone);
+    --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-phone);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-phone);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-phone);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-phone);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-phone);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-phone);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-phone);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-phone);
+    --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-phone);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-phone);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-phone);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-phone);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-phone);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-phone);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-phone);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-phone);
+    --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-phone);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-phone);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-phone);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-phone);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-phone);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-phone);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-phone);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-phone);
+  }
+}
+@media (min-width: 48em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-tablet);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-tablet);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-tablet);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-tablet);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-tablet);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-tablet);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-tablet);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-tablet);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-tablet);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-tablet);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-tablet);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-tablet);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-tablet);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-tablet);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-tablet);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-tablet);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-tablet);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-tablet);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-tablet);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-tablet);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-tablet);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-tablet);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-tablet);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-tablet);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-tablet);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-tablet);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-tablet);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-tablet);
+  }
+}
+@media (min-width: 62em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-laptop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-laptop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-laptop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-laptop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-laptop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-laptop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-laptop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-laptop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-laptop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-laptop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-laptop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-laptop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-laptop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-laptop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-laptop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-laptop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-laptop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-laptop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-laptop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-laptop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-laptop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-laptop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-laptop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-laptop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-laptop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-laptop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-laptop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-laptop);
+  }
+}
+@media (min-width: 75em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-desktop);
+    --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-desktop);
+    --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-desktop);
+    --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-desktop);
+    --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-desktop);
+    --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-desktop);
+    --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-desktop);
+    --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-desktop);
+    --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-desktop);
+    --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-desktop);
+    --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-desktop);
+    --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-desktop);
+    --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-desktop);
+    --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-desktop);
+    --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-desktop);
+    --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-desktop);
+    --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-desktop);
+    --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-desktop);
+    --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-desktop);
+    --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-desktop);
+    --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-desktop);
+    --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-desktop);
+    --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-desktop);
+    --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-desktop);
+    --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-desktop);
+    --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-desktop);
+    --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-desktop);
+    --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-desktop);
+  }
+}
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --spacing-base: 16px;
+  --spacing-shrink-factor: calc(var(--global-shrink-factor) * 1);
+  --spacing-grow-factor: calc(var(--global-grow-factor) * 1);
+  --spacing-bp-factor: calc(var(--global-bp-factor) * 1);
+  --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
+  --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-s-bp-factor: calc(var(--spacing-xs-bp-factor) * var(--spacing-bp-factor));
+  --spacing-m-bp-factor: calc(var(--spacing-s-bp-factor) * var(--spacing-bp-factor));
+  --spacing-l-bp-factor: calc(var(--spacing-m-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xl-bp-factor: calc(var(--spacing-l-bp-factor) * var(--spacing-bp-factor));
+  --spacing-xxl-bp-factor: calc(var(--spacing-xl-bp-factor) * var(--spacing-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--spacing-shrink-factor) * 1));
+  --ks-spacing-m-base: var(--spacing-base);
+  --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--spacing-grow-factor));
+  --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--spacing-grow-factor));
+  --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--spacing-grow-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-tablet: calc(var(--ks-spacing-xxs-bp-factor-phone) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-laptop: calc(var(--ks-spacing-xxs-bp-factor-tablet) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xxs-bp-factor-desktop: calc(var(--ks-spacing-xxs-bp-factor-laptop) * var(--spacing-xxs-bp-factor));
+  --ks-spacing-xs-bp-factor-phone: calc(1 * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--spacing-xs-bp-factor));
+  --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--spacing-xs-bp-factor));
+  --ks-spacing-s-bp-factor-phone: calc(1 * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--spacing-s-bp-factor));
+  --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--spacing-s-bp-factor));
+  --ks-spacing-m-bp-factor-phone: calc(1 * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--spacing-m-bp-factor));
+  --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--spacing-m-bp-factor));
+  --ks-spacing-l-bp-factor-phone: calc(1 * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--spacing-l-bp-factor));
+  --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--spacing-l-bp-factor));
+  --ks-spacing-xl-bp-factor-phone: calc(1 * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--spacing-xl-bp-factor));
+  --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-tablet: calc(var(--ks-spacing-xxl-bp-factor-phone) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-laptop: calc(var(--ks-spacing-xxl-bp-factor-tablet) * var(--spacing-xxl-bp-factor));
+  --ks-spacing-xxl-bp-factor-desktop: calc(var(--ks-spacing-xxl-bp-factor-laptop) * var(--spacing-xxl-bp-factor));
+}
+
+:root,
+[ks-theme],
+[ks-inverted=false],
+[ks-inverted=true] {
+  --ks-spacing-xxs: calc(var(--ks-spacing-xxs-base) * var(--ks-spacing-xxs-bp-factor, 1));
+  --ks-spacing-xs: calc(var(--ks-spacing-xs-base) * var(--ks-spacing-xs-bp-factor, 1));
+  --ks-spacing-s: calc(var(--ks-spacing-s-base) * var(--ks-spacing-s-bp-factor, 1));
+  --ks-spacing-m: calc(var(--ks-spacing-m-base) * var(--ks-spacing-m-bp-factor, 1));
+  --ks-spacing-l: calc(var(--ks-spacing-l-base) * var(--ks-spacing-l-bp-factor, 1));
+  --ks-spacing-xl: calc(var(--ks-spacing-xl-base) * var(--ks-spacing-xl-bp-factor, 1));
+  --ks-spacing-xxl: calc(var(--ks-spacing-xxl-base) * var(--ks-spacing-xxl-bp-factor, 1));
+  --ks-spacing-stack: calc(var(--ks-spacing-stack-base) * var(--ks-spacing-stack-bp-factor, 1));
+  --ks-spacing-inline: calc(var(--ks-spacing-inline-base) * var(--ks-spacing-inline-bp-factor, 1));
+  --ks-spacing-inset: calc(var(--ks-spacing-inset-base) * var(--ks-spacing-inset-bp-factor, 1));
+  --ks-spacing-inset-squish: calc(var(--ks-spacing-inset-squish-base) * var(--ks-spacing-inset-squish-bp-factor, 1));
+  --ks-spacing-inset-stretch: calc(var(--ks-spacing-inset-stretch-base) * var(--ks-spacing-inset-stretch-bp-factor, 1));
+}
+
+@media (min-width: 36em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-phone);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-phone);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-phone);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-phone);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-phone);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-phone);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-phone);
+  }
+}
+@media (min-width: 48em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-tablet);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-tablet);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-tablet);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-tablet);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-tablet);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-tablet);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-tablet);
+  }
+}
+@media (min-width: 62em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-laptop);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-laptop);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-laptop);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-laptop);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-laptop);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-laptop);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-laptop);
+  }
+}
+@media (min-width: 75em) {
+  :root,
+  [ks-theme],
+  [ks-inverted=false],
+  [ks-inverted=true] {
+    --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-desktop);
+    --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-desktop);
+    --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-desktop);
+    --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-desktop);
+    --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-desktop);
+    --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
+    --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
+  }
+}
 @font-face {
   font-family: "Google Sans 18pt";
   font-style: normal;

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:42 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:36 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 Tue, 30 Jul 2024 07:54:46 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:41 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 Tue, 30 Jul 2024 07:54:44 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:39 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 Tue, 30 Jul 2024 07:54:48 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:43 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 Tue, 30 Jul 2024 07:54:39 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:34 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jul 2024 07:54:40 GMT
+ * Generated on Tue, 30 Jul 2024 11:54:34 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.3.23",
+  "version": "1.3.25--canary.523.91aa920.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {