@kickstartds/ds-agency-premium 1.6.71--canary.54.2407.0 → 1.6.71

package/dist/components/video-curtain/video-curtain.schema.dereffed.json

@@ -54,10 +54,10 @@
             "title": "Icon",
             "description": "Choose an icon"
           },
-          "url": {
+          "target": {
             "type": "string",
-            "title": "URL",
-            "description": "The URL to link to when the button is clicked",
+            "title": "Target",
+            "description": "Target that should be linked, makes the button behave like a link semantically",
             "format": "uri"
           }
         },
@@ -113,13 +113,14 @@
       "description": "Choose the alginment of the module content",
       "enum": [
         "center",
-        "bottom",
         "left",
-        "right",
-        "corner"
+        "right"
       ],
       "type": "string",
-      "default": "center"
+      "default": "bottom"
+    },
+    "type": {
+      "const": "video-curtain"
     }
   },
   "additionalProperties": false

package/dist/components/video-curtain/video-curtain.schema.json

@@ -46,8 +46,8 @@
           "icon": {
             "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/icon"
           },
-          "url": {
-            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/url"
+          "target": {
+            "$ref": "http://schema.mydesignsystem.com/button.schema.json#/properties/target"
           }
         }
       }
@@ -61,9 +61,9 @@
     "textPosition": {
       "title": "Module aligment",
       "description": "Choose the alginment of the module content",
-      "enum": ["center", "bottom", "left", "right", "corner"],
+      "enum": ["center", "left", "right"],
       "type": "string",
-      "default": "center"
+      "default": "bottom"
     }
   },
   "additionalProperties": false

package/dist/global.css

@@ -291,234 +291,57 @@ h3 {
     --c-rich-text_headline--margin:1.5em 0 1em;
   }
 }
-:root, [ks-inverted], [ks-theme] {
-  --dsa-text-color-on-primary-base: var(--ks-color-fg-inverted);
-  --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg);
-  --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
-  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-2);
-  --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
-  --dsa-overlay-box_opaque--background-color: var(--ks-color-bg-alpha-2);
-  --dsa-overlay-box_opaque--backdrop-filter: blur(20px);
-  --dsa-overlay-box--text-color: var(--ks-color-fg);
-  --dsa-overlay-text--shadow-base: 0 0 10px var(--ks-color-fg-alpha-3);
-  --dsa-overlay-text--shadow-inverted-base: 0 0 10px var(--ks-color-fg-alpha-3-inverted);
-  --dsa-overlay-text--text-color-base: var(--ks-text-color-display-inverted);
-  --dsa-overlay-text--text-color-inverted-base: var(--ks-text-color-display);
+:root,
+[ks-inverted],
+[ks-theme] {
+  --dsa-text-color-on-primary-base: var(--ks-color-fg);
+  --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg-inverted);
   --dsa-topic--font: var(--ks-font-display-m);
-  --dsa-topic--font-weight: var(--ks-font-weight-semi-bold);
+  --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-regular);
+  --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-typo--highlight: var(--ks-color-primary);
-  --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
-  --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
+  --dsa-link--text-decoration: underline;
+  --dsa-link--text-decoration_hover: underline;
+  --dsa-typo--highlight: linear-gradient(90deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
+  --dsa-content--spacing: var(--ks-spacing-inset-l);
   --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
   --dsa-content--width_default: calc(var(--ks-font-size-copy-m) * 50);
-  --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 72);
+  --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 64);
   --dsa-content--width_max: 100vw;
   --dsa-content--width_full: 100vw;
   --dsa-tile--width_smallest: calc(var(--ks-font-size-copy-m) * 10);
   --dsa-tile--width_small: calc(var(--ks-font-size-copy-m) * 14);
   --dsa-tile--width_medium: calc(var(--ks-font-size-copy-m) * 20);
   --dsa-tile--width_large: calc(var(--ks-font-size-copy-m) * 28);
-  --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 42);
-  --dsa-logo--height: 2rem;
+  --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 38);
+  --dsa-logo--height: 2.25rem;
   --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
 }
 @media (min-width: 48em) {
-  :root, [ks-inverted], [ks-theme] {
-    --dsa-content--horizontal-spacing: var(--ks-spacing-inset-xl);
-  }
-}
-@media (min-width: 48em) {
-  :root, [ks-inverted], [ks-theme] {
-    --dsa-logo--height: 2.25rem;
-  }
-}
-@media (min-width: 62em) {
-  :root, [ks-inverted], [ks-theme] {
-    --dsa-logo--height: 5rem;
-  }
-}
-
-:root,
-[ks-theme],
-[ks-inverted=false],
-[ks-inverted=true] {
-  --spacing-base: 16px;
-  --spacing-shrink-factor: 0.65;
-  --spacing-grow-factor: 1.585;
-  --spacing-bp-factor: 1.0125;
-  --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-stack-xxs: var(--ks-spacing-xxs);
-  --ks-spacing-stack-xs: var(--ks-spacing-xs);
-  --ks-spacing-stack-s: var(--ks-spacing-s);
-  --ks-spacing-stack-m: var(--ks-spacing-m);
-  --ks-spacing-stack-l: var(--ks-spacing-l);
-  --ks-spacing-stack-xl: var(--ks-spacing-xl);
-  --ks-spacing-stack-xxl: var(--ks-spacing-xxl);
-  --ks-spacing-inline-xxs: var(--ks-spacing-xxs);
-  --ks-spacing-inline-xs: var(--ks-spacing-xs);
-  --ks-spacing-inline-s: var(--ks-spacing-s);
-  --ks-spacing-inline-m: var(--ks-spacing-m);
-  --ks-spacing-inline-l: var(--ks-spacing-l);
-  --ks-spacing-inline-xl: var(--ks-spacing-xl);
-  --ks-spacing-inline-xxl: var(--ks-spacing-xxl);
-  --ks-spacing-inset-xxs: var(--ks-spacing-xxs);
-  --ks-spacing-inset-xs: var(--ks-spacing-xs);
-  --ks-spacing-inset-s: var(--ks-spacing-s);
-  --ks-spacing-inset-m: var(--ks-spacing-m);
-  --ks-spacing-inset-l: var(--ks-spacing-l);
-  --ks-spacing-inset-xl: var(--ks-spacing-xl);
-  --ks-spacing-inset-xxl: var(--ks-spacing-xxl);
-  --ks-spacing-inset-squish-xxs: var(--ks-spacing-xs) var(--ks-spacing-xxs);
-  --ks-spacing-inset-squish-xs: var(--ks-spacing-s) var(--ks-spacing-xs);
-  --ks-spacing-inset-squish-s: var(--ks-spacing-m) var(--ks-spacing-s);
-  --ks-spacing-inset-squish-m: var(--ks-spacing-l) var(--ks-spacing-m);
-  --ks-spacing-inset-squish-l: var(--ks-spacing-xl) var(--ks-spacing-l);
-  --ks-spacing-inset-squish-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
-  --ks-spacing-inset-squish-xxl: calc(var(--ks-spacing-xxl) * 1.25) var(--ks-spacing-xxl);
-  --ks-spacing-inset-squish-xxs: var(--ks-spacing-xxs) var(--ks-spacing-xs);
-  --ks-spacing-inset-squish-xs: var(--ks-spacing-xs) var(--ks-spacing-s);
-  --ks-spacing-inset-squish-s: var(--ks-spacing-s) var(--ks-spacing-m);
-  --ks-spacing-inset-squish-m: var(--ks-spacing-m) var(--ks-spacing-l);
-  --ks-spacing-inset-squish-l: var(--ks-spacing-l) var(--ks-spacing-xl);
-  --ks-spacing-inset-squish-xl: var(--ks-spacing-xl) var(--ks-spacing-xxl);
-  --ks-spacing-inset-squish-xxl: var(--ks-spacing-xxl) calc(var(--ks-spacing-xxl) * 1.25);
-}
-
-: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));
-}
-
-@media (min-width: 36em) {
   :root,
-  [ks-theme],
-  [ks-inverted=false],
-  [ks-inverted=true] {
-    --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);
+  [ks-inverted],
+  [ks-theme] {
+    --dsa-content--spacing: var(--ks-spacing-inset-xl);
   }
 }
 @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);
+  [ks-inverted],
+  [ks-theme] {
+    --dsa-logo--height: 2.5rem;
   }
 }
 @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);
+  [ks-inverted],
+  [ks-theme] {
+    --dsa-logo--height: 3rem;
   }
 }
+
 .l-container--blog-teaser {
   /* stylelint-disable-next-line property-no-unknown */
   container-name: blog-teaser;
@@ -532,7 +355,7 @@ h3 {
   --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
   --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
   --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
-  --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
+  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
   --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
   --dsa-blog-teaser__copy--margin-top: 0.5em;
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
@@ -564,7 +387,7 @@ h3 {
   --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(--ks-text-color-copy));
+  --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));
@@ -618,130 +441,84 @@ h3 {
 }
 
 .c-form-check {
-  --dsa-check--background: transparent;
-  --dsa-check--background_checked: var(--ks-color-primary);
-  --dsa-check--background_active: transparent;
-  --dsa-check--border: var(--ks-border-width-default) solid;
-  --dsa-check--border-color: var(--ks-border-color-interface-interactive);
-  --dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
-  --dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
-  --dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
-  --dsa-check--size: 1.5em;
-  --dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
-  --dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
-  --dsa-check_radio--border-radius: var(--ks-border-radius-circle);
-  --dsa-check_radio__checkmark--size: calc(var(--dsa-check--size) * 0.5);
-  --dsa-check__checkmark--color: var(--dsa-text-color-on-primary);
-  --dsa-check__label--font: var(--ks-font-interface-s);
-  --dsa-check__label--font-weight: var(--ks-font-weight-regular);
-  --dsa-check__label--color: var(--ks-text-color-interface);
-  --dsa-check__label--margin-left: 0.5em;
+  --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-input--color: var(--ks-text-color-interface);
-  --dsa-input--border: var(--ks-border-width-default) solid;
-  --dsa-input--border-color: var(--ks-border-color-interface-interactive);
-  --dsa-input--border-color_hover: var(--ks-border-color-interface-interactive-hover);
-  --dsa-input--border-color_focus: var(--ks-border-color-interface-interactive-active);
-  --dsa-input--border-color_active: var(--ks-border-color-interface-interactive-active);
-  --dsa-input__label--padding-bottom: 0.25em;
-  --dsa-input__label--color: var(--ks-text-color-interface);
-  --dsa-input__label--font: var(--ks-font-interface-s);
-  --dsa-input__label--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-input--font: var(--ks-font-interface-s);
-  --dsa-input--background: transparent;
-  --dsa-input--background_focus: transparent;
-  --dsa-input--padding: 0.4rem 0.75rem 0.35rem;
-  --dsa-input--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
-  --dsa-input__placeholder--color: var(--ks-color-fg-alpha-5);
+  --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, [ks-inverted] .c-form-check, [ks-theme] .c-form-check {
-  --c-form-check_box--size: var(--dsa-check--size, 1.125em);
-  --c-form-check_box--border: var(--dsa-check--border, var(--ks-border-width-default) solid);
-  --c-form-check_box--border-color: var(--dsa-check--border-color, var(--ks-border-color-interface-interactive));
+  --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-check--border-color_hover,
+    --dsa-form-check--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-check_box-focus--border-color: var(
-    --dsa-check--border-color_focus,
+    --dsa-form-check--border-color_focus,
     var(--ks-border-color-interface-interactive-active)
   );
   --c-form-check_box-checked--border-color: var(
-    --dsa-check--border-color_checked,
+    --dsa-form-check--border-color_checked,
     var(--ks-border-color-interface-interactive-selected)
   );
-  --c-form-check_box--background: var(--dsa-check--background, var(--ks-background-color-interface-interactive));
+  --c-form-check_box--background: var(--dsa-form-check--background, var(--ks-background-color-interface-interactive));
   --c-form-check_box-checked--background: var(
-    --dsa-check--background_checked,
+    --dsa-form-check--background_checked,
     var(--ks-background-color-interface-interactive-selected)
   );
-  --c-form-check_checkmark--color: var(--dsa-check__checkmark--color, var(--dsa-text-color-on-primary));
-  --c-form-check_box--border-radius: var(--dsa-check--border-radius, 2px);
-  --c-form-check_box-focus--shadow: var(--dsa-check--shadow_focus, 0 0 4px 0);
-  --c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--dsa-check--size) * 0.5));
-  font: var(--dsa-check__label--font, var(--ks-font-interface-s));
-  font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
-  color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
-}
-:root .c-form-check__label, [ks-inverted] .c-form-check__label, [ks-theme] .c-form-check__label {
-  margin-left: var(--dsa-check__label--margin-left, 0.5em);
-}
-:root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
-  --c-form-check_box--border-radius: var(
-    --dsa-check_box--border-radius,
-    min(4px, calc(var(--dsa-check--size) / 4))
-  );
-}
-:root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
-  --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
+  --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, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
-  --c-form-field_label--padding: 0 0 var(--dsa-input__label--padding-bottom, 0.25em) 0;
-  --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);
-  --c-form-field--border-color: var(--dsa-input--border-color, var(--ks-border-color-interface-interactive));
+  --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-input--border-color_hover,
+    --dsa-form-field--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-field-focus--border-color: var(
-    --dsa-input--border-color_focus,
+    --dsa-form-field--border-color_focus,
     var(--ks-border-color-interface-interactive-active)
   );
-  --c-form-field--background: var(--dsa-input--background, var(--ks-background-color-interface-interactive));
-  --c-form-field_focus--shadow: var(--dsa-input--shadow_focus, 0 0 4px 0);
+  --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(
     --ks-background-color-interface-interactive-disabled,
     var(--ks-background-color-interface-interactive-disabled)
   );
-  --c-form-field--color: var(--dsa-input--color, var(--ks-text-color-interface));
+  --c-form-field--color: var(--dsa-form-field--color, var(--ks-text-color-interface));
   --c-form-field_hover--border-color: var(
-    --dsa-input--border-color_hover,
+    --dsa-form-field--border-color_hover,
     var(--ks-border-color-interface-interactive-hover)
   );
   --c-form-field_focus--border-color: var(
-    --dsa-input--border-color_active,
+    --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);
-  --c-form-field_label--color: var(--dsa-input__label--color, var(--ks-text-color-interface));
-}
-:root .c-form-field__input, [ks-inverted] .c-form-field__input, [ks-theme] .c-form-field__input {
-  font: var(--dsa-input--font, var(--ks-font-interface-m));
-  padding: var(--dsa-input--padding, 0.4rem 0.75rem 0.35rem);
 }
 :root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder {
-  color: var(--dsa-input__placeholder--color, var(--ks-color-fg-alpha-5));
-}
-:root .c-form-field__input:focus, [ks-inverted] .c-form-field__input:focus, [ks-theme] .c-form-field__input:focus {
-  background-color: var(--dsa-input--background_focus, var(--ks-background-color-interface-interactive-active));
-}
-:root .c-form-field__label, [ks-inverted] .c-form-field__label, [ks-theme] .c-form-field__label {
-  font: var(--dsa-input__label--font, var(--ks-font-interface-s));
-  font-weight: var(--dsa-input__label--font-weight, var(--ks-font-weight-regular));
+  color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
 }
 
 :root {
@@ -777,65 +554,68 @@ h3 {
   --c-lightbox--error-text-color: var(--ks-color-error) !important;
 }
 
-/* inter-regular - latin */
 @font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Montserrat";
-  font-style: normal;
+  font-family: "Fredoka";
+  src: url("static/fonts/dsa/Fredoka-Regular.woff") format("woff2"), url("static/fonts/dsa/Fredoka-Regular.woff") format("woff");
   font-weight: 400;
-  src: url("static/fonts/systemics/Montserrat-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  font-style: normal;
+  font-display: swap;
 }
-/* inter-500 - latin */
 @font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Montserrat";
+  font-family: "Fredoka";
+  src: url("static/fonts/dsa/Fredoka-SemiBold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-SemiBold.woff") format("woff");
+  font-weight: 600;
   font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fredoka";
+  src: url("static/fonts/dsa/Fredoka-Medium.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Medium.woff") format("woff");
   font-weight: 500;
-  src: url("static/fonts/systemics/Montserrat-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  font-style: normal;
+  font-display: swap;
 }
-/* inter-600 - latin */
 @font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Montserrat";
+  font-family: "Fredoka";
+  src: url("static/fonts/dsa/Fredoka-Light.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Light.woff") format("woff");
+  font-weight: 300;
   font-style: normal;
-  font-weight: 600;
-  src: url("static/fonts/systemics/Montserrat-SemiBold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  font-display: swap;
 }
-/* inter-700 - latin */
 @font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: "Montserrat";
+  font-family: "Fredoka";
+  src: url("static/fonts/dsa/Fredoka-Bold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Bold.woff") format("woff");
+  font-weight: bold;
   font-style: normal;
-  font-weight: 700;
-  src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  font-display: swap;
 }
 @font-face {
-  font-family: "Myriad Pro";
-  src: url("static/fonts/dsa/MyriadPro-Regular.woff2") format("woff2");
-  font-weight: 400;
+  font-family: "Mulish";
   font-style: normal;
+  font-weight: 400;
   font-display: swap;
+  src: url("static/fonts/dsa/Mulish-Regular.woff2") format("woff2"), url("static/fonts/dsa/Mulish-Regular.woff") format("woff");
 }
 @font-face {
-  font-family: "Myriad Pro";
-  src: url("static/fonts/dsa/MyriadPro-Semibold.woff2") format("woff2");
-  font-weight: 600;
+  font-family: "Mulish";
   font-style: normal;
+  font-weight: 600;
   font-display: swap;
+  src: url("static/fonts/dsa/Mulish-600.woff2") format("woff2"), url("static/fonts/dsa/Mulish-600.woff") format("woff"); /* Legacy iOS */
 }
 @font-face {
-  font-family: "Myriad Pro";
-  src: url("static/fonts/dsa/MyriadPro-Bold.woff2") format("woff2");
-  font-weight: 700;
+  font-family: "Mulish";
   font-style: normal;
+  font-weight: 800;
   font-display: swap;
+  src: url("static/fonts/dsa/Mulish-800.woff2") format("woff2"), url("static/fonts/dsa/Mulish-800.woff") format("woff");
 }
 @font-face {
-  font-family: "Defaults";
-  src: url("static/fonts/dsa/Defaults.woff") format("woff");
-  font-weight: 400;
+  font-family: "Mulish";
   font-style: normal;
+  font-weight: 300;
   font-display: swap;
+  src: url("static/fonts/dsa/Mulish-300.woff2") format("woff2"), url("static/fonts/dsa/Mulish-300.woff") format("woff");
 }
 @font-face {
   font-family: "NovelPro";
@@ -907,10 +687,8 @@ h3 {
 :root, [ks-inverted], [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__headline--margin: 1.25em 0 0.5em;
   --dsa-rich-text--color: var(--ks-text-color-copy);
   --dsa-rich-text--font: var(--ks-font-copy-m);
-  --dsa-rich-text--vertical-spacing: 1em 0 0;
 }
 
 :root, [ks-inverted], [ks-theme] {
@@ -943,18 +721,6 @@ hr.c-divider {
   --c-divider--background: var(--ks-border-color-accent);
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 :root, [ks-inverted], [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);
@@ -982,17 +748,9 @@ hr.c-divider {
 #root {
   --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-base);
   --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-inverted-base);
-  --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-base);
-  --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-inverted-base);
-  --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-base);
-  --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-inverted-base);
 }
 
 [ks-inverted=true] {
   --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-inverted-base);
   --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-base);
-  --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-inverted-base);
-  --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-base);
-  --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-inverted-base);
-  --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-base);
 }