@kickstartds/ds-agency-premium 1.7.0--canary.18.1660.0 → 1.7.0--canary.46.1791.0

package/dist/components/testimonials/testimonials.css

@@ -1,37 +1,55 @@
+@charset "UTF-8";
 .dsa-testimonials {
-  --dsa-testimonial__source--font: var(--ks-font-copy-m);
-  --dsa-testimonial__icon--font-family: var(--ks-font-family-copy);
-  --dsa-testimonial__icon--font-size: 3em;
-  --dsa-testimonial__icon--color: var(--ks-text-color-primary);
-  --dsa-testimonial__byline--font: var(--ks-font-copy-m);
-  --dsa-testimonial__byline--font-weight: var(--ks-font-weight-regular);
-  --dsa-testimonial__image--max-width: 40%;
-  --dsa-testimonial__source--color: var(--ks-text-color-default);
-  --dsa-testimonial__byline--color: var(--ks-text-color-copy);
-  --testimonials__copy--margin-bottom: var(--ks-spacing-stack-s);
-  --dsa-testimonial--padding-left: var(--ks-spacing-xl);
-  --dsa-testimonial__copy--font: var(--ks-font-copy-l);
-  --dsa-testimonial__list--gap: var(--ks-spacing-stack-xl);
+  --dsa-testimonials--padding-left: calc(var(--dsa-testimonials__icon--font-size) / 6);
+  --dsa-testimonials--padding-top: 0.5em;
+  --dsa-testimonials__quote--font: var(--ks-font-copy-l);
+  --dsa-testimonials__quote--font-weight: var(--ks-font-weight-regular);
+  --dsa-testimonials__quote--margin-bottom: var(--ks-spacing-stack-s);
+  --dsa-testimonials__source--font: var(--ks-font-copy-m);
+  --dsa-testimonials__source--font-style: normal;
+  --dsa-testimonials__source--color: var(--ks-text-color-default);
+  --dsa-testimonials__source--text-transform: normal;
+  --dsa-testimonials__source--font-weight: var(--ks-font-weight-bold);
+  --dsa-testimonials__icon--font-family: var(--ks-font-family-copy);
+  --dsa-testimonials__icon--font-size: 10em;
+  --dsa-testimonials__icon--color: var(--ks-color-fg-alpha-8);
+  --dsa-testimonials__icon--content: "”";
+  --dsa-testimonials__icon--left: 0.15em;
+  --dsa-testimonials__icon--transform: translate(-50%, -10%);
+  --dsa-testimonials__byline--font: var(--ks-font-copy-m);
+  --dsa-testimonials__byline--font-weight: var(--ks-font-weight-regular);
+  --dsa-testimonials__byline--color: var(--ks-text-color-copy);
+  --dsa-testimonials__image--max-width: 40%;
+  --dsa-testimonials__list--gap: var(--ks-spacing-stack-xl);
 }
 @container quote (min-width: 640px) {
   .dsa-testimonials {
-    --dsa-testimonial__image--max-width: 40%;
+    --dsa-testimonials__image--max-width: 40%;
   }
 }
 @container quote (min-width: 960px) {
   .dsa-testimonials {
-    --c-quote_content--padding-left: var(--ks-spacing-l);
+    --dsa-testimonials--padding-left: var(--ks-spacing-inline-xl);
   }
 }
 
 .dsa-testimonials .c-quote {
-  --c-quote_source--font: var(--dsa-testimonial__source--font, var(--ks-font-copy-m));
-  --c-quote_icon--font-family: var(--dsa-testimonial__icon--font-family, var(--ks-font-family-copy));
-  --c-quote_icon--font-size: var(--dsa-testimonial__icon--font-size, 3em);
-  --c-quote_icon--color: var(--dsa-testimonial__icon--color, var(--ks-text-color-primary));
-  --c-quote_byline--font: var(--dsa-testimonial__byline--font, var(--ks-font-copy-m));
-  --c-quote_byline--font-weight: var(--dsa-testimonial__byline--font-weight, var(--ks-font-weight-regular));
-  --c-quote_image--max-width: var(--dsa-testimonial__image--max-width, 40%);
+  --c-quote_text--font: var(--dsa-testimonials__quote--font, var(--ks-font-copy-l));
+  --c-quote_text--margin-bottom: var(--dsa-testimonials__quote--margin-bottom, var(--ks-spacing-stack-s));
+  --c-quote_source--font: var(--dsa-testimonials__source--font, (--ks-font-copy-s));
+  --c-quote_source--font-style: var(--dsa-testimonials__source--font-style, normal);
+  --c-quote_source--font-weight: var(--dsa-testimonials__source--font-weight, var(--ks-font-weight-bold));
+  --c-quote_source--text-transform: var(--dsa-testimonials__source--text-transform, uppercase);
+  --c-quote_icon--font-family: var(--dsa-testimonials__icon--font-family, var(--ks-font-family-copy));
+  --c-quote_icon--font-size: var(--dsa-testimonials__icon--font-size, 3em);
+  --c-quote_icon--color: var(--dsa-testimonials__icon--color, var(--ks-text-color-primary));
+  --c-quote_icon--content: var(--dsa-testimonials__icon--content, "”");
+  --c-quote_icon--left: var(--dsa-testimonials__icon--left, calc(var(--c-quote_content--padding-left) / 2));
+  --c-quote_icon--transform: var(--dsa-testimonials__icon--transform, translateX(-50%));
+  --c-quote_byline--font: var(--dsa-testimonials__byline--font, var(--ks-font-copy-m));
+  --c-quote_byline--font-weight: var(--dsa-testimonials__byline--font-weight, var(--ks-font-weight-regular));
+  --c-quote_image--max-width: var(--dsa-testimonials__image--max-width, 40%);
+  --c-quote_content--padding-left: var(--dsa-testimonials--padding-left, var(--ks-spacing-inline-l));
 }
 .dsa-testimonials .c-slider-main {
   --c-slider_bullet--outline-color-active: var(--ks-text-color-primary);
@@ -40,22 +58,25 @@
 .dsa-testimonials--list {
   display: flex;
   flex-direction: column;
-  gap: var(--dsa-testimonial__list--gap, var(--ks-spacing-stack-xl));
+  gap: var(--dsa-testimonials__list--gap, var(--ks-spacing-stack-xl));
 }
 .dsa-testimonials .c-quote__source {
-  color: var(--dsa-testimonial__source--color, var(--ks-text-color-default));
+  color: var(--dsa-testimonials__source--color, var(--ks-text-color-default));
 }
 .dsa-testimonials .c-quote__byline {
-  color: var(--dsa-testimonial__byline--color, var(--ks-text-color-copy));
+  color: var(--dsa-testimonials__byline--color, var(--ks-text-color-copy));
 }
 .dsa-testimonials .c-quote__text {
-  margin-bottom: var(--testimonials__copy--margin-bottom, var(--ks-spacing-stack-s));
+  font-weight: var(--dsa-testimonials__quote--font-weight, var(--ks-font-weight-regular));
+  position: relative;
+  z-index: 1;
+  margin-bottom: var(--dsa-testimonials__quote--margin-bottom, var(--ks-spacing-stack-s));
 }
 .dsa-testimonials .c-quote--reverse {
   flex-direction: row-reverse;
 }
 .dsa-testimonials .c-quote--reverse .c-quote__content {
-  padding-right: var(--dsa-testimonial--padding-left, var(--ks-spacing-xl));
+  padding-right: var(--dsa-testimonials--padding-left, var(--ks-spacing-xl));
   padding-left: unset;
 }
 .dsa-testimonials .c-quote--reverse .c-quote__content:before {
@@ -63,8 +84,15 @@
   top: 0;
   left: unset;
 }
+.dsa-testimonials .c-quote.c-quote--small-signs .c-quote__content {
+  padding: 0;
+}
+.dsa-testimonials .c-quote.c-quote--small-signs .c-quote__content::before {
+  content: "";
+}
 .dsa-testimonials .c-quote .c-quote__content {
-  font: var(--dsa-testimonial__copy--font, var(--ks-font-copy-l));
+  font: var(--dsa-testimonials__quote--font, var(--ks-font-copy-l));
+  padding-top: var(--dsa-testimonials--padding-top, 0.5em);
 }
 .dsa-testimonials .c-quote .c-quote__content::before {
   line-height: 0.7;

package/dist/components/testimonials/testimonials.schema.dereffed.json

@@ -16,13 +16,22 @@
       ],
       "default": "slider"
     },
+    "quoteSigns": {
+      "title": "Style of the quote signs",
+      "description": "The style of the quote signs",
+      "type": "string",
+      "enum": [
+        "normal",
+        "large",
+        "none"
+      ],
+      "default": "normal"
+    },
     "testimonial": {
       "type": "array",
       "title": "Testimonials",
       "description": "Add testimonials featuring an image, a quote, a source and a rating",
       "items": {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "http://schema.mydesignsystem.com/testimonial.schema.json",
         "title": "Testimonial",
         "description": "Testimonial entry of Testimonials component",
         "type": "object",
@@ -75,9 +84,6 @@
             "type": "integer",
             "minimum": 1,
             "maximum": 5
-          },
-          "type": {
-            "const": "testimonial"
           }
         },
         "additionalProperties": false,

package/dist/components/testimonials/testimonials.schema.json

@@ -12,12 +12,41 @@
       "enum": ["slider", "list", "alternating"],
       "default": "slider"
     },
+    "quoteSigns": {
+      "title": "Style of the quote signs",
+      "description": "The style of the quote signs",
+      "type": "string",
+      "enum": ["normal", "large", "none"],
+      "default": "normal"
+    },
     "testimonial": {
       "type": "array",
       "title": "Testimonials",
       "description": "Add testimonials featuring an image, a quote, a source and a rating",
       "items": {
-        "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json"
+        "title": "Testimonial",
+        "description": "Testimonial entry of Testimonials component",
+        "type": "object",
+        "properties": {
+          "quote": {
+            "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json#/properties/quote"
+          },
+
+          "name": {
+            "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json#/properties/name"
+          },
+          "title": {
+            "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json#/properties/title"
+          },
+          "image": {
+            "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json#/properties/image"
+          },
+          "rating": {
+            "$ref": "http://schema.mydesignsystem.com/testimonial.schema.json#/properties/rating"
+          }
+        },
+        "additionalProperties": false,
+        "required": ["quote", "name", "image"]
       }
     }
   },

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

@@ -4,4 +4,5 @@ import { TextProps } from "../../TextProps-a23170d2.js";
 declare const TextContextDefault: import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const TextContext: import("react").Context<import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Text: import("react").ForwardRefExoticComponent<TextProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { TextProps };
 export { TextContextDefault, TextContext, Text };

package/dist/components/tile/tile.schema.dereffed.json

@@ -67,6 +67,7 @@
         },
         "icon": {
           "type": "string",
+          "format": "icon",
           "title": "Icon",
           "description": "Choose an icon"
         }

package/dist/components/tile/tile.schema.json

@@ -26,10 +26,16 @@
       "type": "object",
       "properties": {
         "src": {
-          "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/src"
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image",
+          "examples": ["img/close-up-young-business-team-working.png"]
         },
         "alt": {
-          "$ref": "http://schema.mydesignsystem.com/image.schema.json#/properties/alt"
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
         }
       }
     },

package/dist/components/video-curtain/index.d.ts

@@ -4,4 +4,5 @@ import { VideoCurtainProps } from "../../VideoCurtainProps-6c625a69.js";
 declare const VideoCurtainContextDefault: import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const VideoCurtainContext: import("react").Context<import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const VideoCurtain: import("react").ForwardRefExoticComponent<VideoCurtainProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { VideoCurtainProps };
 export { VideoCurtainContextDefault, VideoCurtainContext, VideoCurtain };

package/dist/components/video-curtain/video-curtain.css

@@ -7,9 +7,10 @@
   --dsa-video-curtain__copy--font: var(--dsa-rich-text--font);
   --dsa-video-curtain_highlight-text__copy--font: var(--ks-font-copy-l);
   --dsa-video-curtain_color-neutral__copy--color: var(--ks-text-color-default);
+  --dsa-video-curtain__textbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__textbox--border-radius: var(--ks-border-radius-surface);
+  --dsa-video-curtain__textbox--max-width: var(--dsa-section__content--width_narrow);
   --dsa-video-curtain__textbox--padding: var(--ks-spacing-inset-squish-xl);
-  --dsa-video-curtain__texbox--background-color: var(--ks-color-bg-alpha-2);
   --dsa-video-curtain__overlay--background: linear-gradient(
     0deg,
     var(--ks-background-color-default) 15%,
@@ -40,7 +41,7 @@
 }
 @container visual (min-width: 640px) {
   .c-visual.dsa-video-curtain .c-visual__box {
-    --c-visual_box--max-width: 50rem;
+    --c-visual_box--max-width: var(--dsa-video-curtain__textbox--max-width, 50rem);
   }
 }
 
@@ -48,7 +49,7 @@
   --c-visual_overlay--background-size: 100%;
 }
 .c-visual.dsa-video-curtain .c-visual__box {
-  --c-visual_box--background: var(--dsa-video-curtain__texbox--background-color, var(--ks-color-bg-alpha-2));
+  --c-visual_box--background: var(--dsa-video-curtain__textbox--background-color, var(--ks-color-bg-alpha-2));
   --c-visual_box--color: var(--dsa-video-curtain__copy--color, var(--ks-text-color-default));
   --c-visual_box--border-radius: var(--dsa-video-curtain__textbox--border-radius, var(--ks-border-radius-surface));
   --c-visual_box--padding: var(--dsa-video-curtain__textbox--padding, var(--ks-spacing-inset-squish-xl));

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

@@ -50,6 +50,7 @@
           },
           "icon": {
             "type": "string",
+            "format": "icon",
             "title": "Icon",
             "description": "Choose an icon"
           },
@@ -116,7 +117,7 @@
         "right"
       ],
       "type": "string",
-      "default": "bottom"
+      "default": "center"
     },
     "type": {
       "const": "video-curtain"

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

@@ -63,7 +63,7 @@
       "description": "Choose the alginment of the module content",
       "enum": ["center", "left", "right"],
       "type": "string",
-      "default": "bottom"
+      "default": "center"
     }
   },
   "additionalProperties": false

package/dist/global.css

@@ -1,7 +1,3 @@
-.js-focus-visible :focus:not(.focus-visible) {
-  outline: none;
-}
-
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html {
   -webkit-text-size-adjust: 100%;
@@ -249,7 +245,6 @@ html:not(.js) img.lazyload {
 .hidden-visually {
   clip: rect(1px, 1px, 1px, 1px);
   border: 0;
-  -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   height: 1px;
   overflow: hidden;
@@ -296,9 +291,11 @@ h3 {
     --c-rich-text_headline--margin:1.5em 0 1em;
   }
 }
-:root, [ks-inverted], [ks-theme] {
-  --dsa-text-color-on-primary: var(--ks-color-fg);
-  --dsa-text-color-on-primary-inverted: var(--ks-color-fg-inverted);
+: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-medium);
   --dsa-topic--color: var(--ks-text-color-display);
@@ -308,31 +305,46 @@ h3 {
   --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
   --dsa-link--text-decoration: underline;
   --dsa-link--text-decoration_hover: underline;
-  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
-  --dsa-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
+  --dsa-typo--highlight: linear-gradient(90deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
   --dsa-content--spacing: var(--ks-spacing-inset-l);
-  --dsa-section__content_wide--width: 1440px;
+  --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) * 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) * 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] {
+  :root,
+  [ks-inverted],
+  [ks-theme] {
     --dsa-content--spacing: var(--ks-spacing-inset-xl);
   }
 }
 @media (min-width: 48em) {
-  :root, [ks-inverted], [ks-theme] {
+  :root,
+  [ks-inverted],
+  [ks-theme] {
     --dsa-logo--height: 2.5rem;
   }
 }
 @media (min-width: 62em) {
-  :root, [ks-inverted], [ks-theme] {
+  :root,
+  [ks-inverted],
+  [ks-theme] {
     --dsa-logo--height: 3rem;
   }
 }
 
-.l-container--post-teaser {
+.l-container--blog-teaser {
   /* stylelint-disable-next-line property-no-unknown */
-  container-name: post-teaser;
+  container-name: blog-teaser;
 }
 
 .dsa-blog-teaser {
@@ -349,9 +361,10 @@ h3 {
   --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
   --dsa-blog-teaser__meta--color: var(--ks-text-color-interface);
   --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
-  --dsa-post-teaser__image--border-radius: var(--ks-border-radius-card);
+  --dsa-blog-teaser__avatar--size: 2em;
+  --dsa-blog-teaser__image--border-radius: var(--ks-border-radius-card);
 }
-@container post-teaser (min-width: 640px) {
+@container blog-teaser (min-width: 640px) {
   .dsa-blog-teaser {
     --dsa-blog-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
     --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xl);
@@ -359,7 +372,7 @@ h3 {
     --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
   }
 }
-@container post-teaser (min-width: 1000px) {
+@container blog-teaser (min-width: 1000px) {
   .dsa-blog-teaser {
     --dsa-blog-teaser__topic--font-size: var(--ks-font-size-copy-xxl);
   }
@@ -398,6 +411,7 @@ h3 {
   --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
   --c-post-meta_item--gap: 0.35em;
   --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
+  --c-post-meta_author--avatar-size: var(--dsa-blog-teaser__avatar--size, 2em);
   --c-post-meta_author--gap: 0.35em;
   --c-post-meta_author--font-weight: var(
     --dsa-blog-teaser__meta__author--font-weight,
@@ -507,18 +521,37 @@ h3 {
   color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
 }
 
-.dsa-divider {
-  --dsa-divider--background: var(--ks-border-color-default);
-  --dsa-divider--background_accent: var(--ks-border-color-accent);
-  --dsa-divider--height: var(--ks-border-width-default);
+:root {
+  --dsa-lightbox--background-color: var(--ks-background-color-default);
+  --dsa-lightbox__placeholder--background: var(--ks-color-fg-to-bg-1);
+  --dsa-lightbox--root-z-index: var(--ks-depth-modal);
+  --dsa-lightbox__button--color: var(--dsa-text-color-on-primary);
+  --dsa-lightbox__counter--shadow: var(--ks-color-fg-inverted);
+  --dsa-lightbox__counter--font: var(--ks-font-interface-s);
+  --dsa-lightbox__counter--color: var(--ks-color-fg);
 }
 
-hr.c-divider {
-  --c-divider--background: var(--dsa-divider--background, var(--ks-border-color-default));
-  --c-divider--height: var(--dsa-divider--height, var(--ks-border-width-default));
+.pswp .pswp__img {
+  object-fit: contain;
 }
-hr.c-divider--accent {
-  --c-divider--background: var(--dsa-divider--background_accent, var(--ks-border-color-accent));
+.pswp .pswp__caption {
+  background-color: var(--das-lightbox__caption--background-color, var(--ks-color-bg-alpha-5));
+  color: var(--dsa-lightbox__caption--color, var(--ks-color-fg));
+}
+.pswp .pswp__counter {
+  font: var(--dsa-lightbox__counter--font);
+  color: var(--dsa-lightbox__counter--color);
+  opacity: 1;
+}
+
+:root {
+  --c-lightbox--bg: var(--dsa-lightbox--background-color, var(--ks-background-color-default)) !important;
+  --c-lightbox--placeholder-bg: var(--dsa-lightbox__placeholder--background, var(--ks-color-fg-to-bg-1)) !important;
+  --c-lightbox--root-z-index: var(--dsa-lightbox--root-z-index, var(--ks-depth-modal)) !important;
+  --c-lightbox--icon-color: var(--dsa-lightbox__button--color, var(--dsa-text-color-on-primary)) !important;
+  --c-lightbox--icon-color-secondary: var(--dsa-lightbox__counter--shadow, var(--ks-color-fg-inverted)) !important;
+  --c-lightbox--stroke-width: 0px !important;
+  --c-lightbox--error-text-color: var(--ks-color-error) !important;
 }
 
 @font-face {
@@ -696,16 +729,6 @@ hr.c-divider {
   --g-link--color-hover: var(--dsa-link--color_hover, var(--ks-text-color-default-interactive-hover));
   --g-link--background: var(--dsa-link--background, transparent);
   --g-link--border-radius: var(--dsa-link--border-radius, 0);
-  --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));
-  --l-section_col--max-width: var(--dsa-section__col--max-width, 1fr);
-  --l-section_col--repeat: var(--dsa-section__col--repeat, auto-fit);
-  --l-section_tile-width--smallest: var(--dsa-section__tile-width--smallest, 14rem);
-  --l-section_tile-width--default: var(--dsa-section__tile-width--default, 18rem);
-  --l-section_tile-width--medium: var(--dsa-section__tile-width--medium, var(--l-section--content-width-narrow));
-  --l-section_tile-width--large: var(--dsa-section__tile-width--large, var(--l-section--content-width-default));
-  --l-section_tile-width--largest: var(--dsa-section__tile-width--largest, var(--l-section--content-width-wide));
-  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
-  --l-section--content-width: var(--dsa-section__content--width, var(--l-section--container-width));
   --g-topic--color: var(--dsa-topic--color, var(--ks-text-color-default));
   --g-topic--font: var(--dsa-topic--font, var(--ks-font-display-l));
   --g-topic--font-weight: var(--dsa-topic--font-weight, var(--ks-font-weight-bold));
@@ -721,12 +744,13 @@ hr.c-divider {
 }
 
 [ks-inverted=false],
+:root,
 #root {
-  --dsa-text-color-on-primary-base: var(--dsa-text-color-on-primary);
-  --dsa-text-color-on-primary-inverted-base: var(--dsa-text-color-on-primary-inverted);
+  --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);
 }
 
 [ks-inverted=true] {
-  --dsa-text-color-on-primary-base: var(--dsa-text-color-on-primary-inverted);
-  --dsa-text-color-on-primary-inverted-base: var(--dsa-text-color-on-primary);
+  --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);
 }