@bonniernews/dn-design-system-web 21.1.2 → 21.1.4

package/components/teaser-onsite/README.md

@@ -1,45 +1,20 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
-- Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
-- Storybook (Latest): [TeaserOnSite](https://designsystem-latest.dn.se/?path=/docs/section-teaseronsite--docs)
-
-----
-
-# teaser-onsite
+TeaserOnsite
+============
 
 Also known as "På Plats-puffen".
 
 In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
 
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
-|text | String | no | | | Teaser subtext |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickly get started using a component.
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+*   Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
 
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.njk' import TeaserOnSite %}
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
 
-{{ TeaserOnSite({
-  title: 'Kiev, Ukraina',
-  text: 'Henrik Brandão Jönsson och Eduardo Leal'
-})}}
-```
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">mediaHtml="&lt;figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&amp;quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&amp;quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
+</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>

package/components/teaser-onsite/teaser-onsite.tsx

@@ -13,6 +13,17 @@ export interface TeaserOnSiteProps {
   text?: string;
 }
 
+/**
+ * Also known as "På Plats-puffen".
+ *
+ * In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+ *
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+ * - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
+ */
 export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {
 
   const classes = formatClassString([

package/components/teaser-standard/teaser-standard.scss

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
-@use "sass:math";
 
 .ds-teaser.ds-teaser--standard {
   padding: ds-spacing($ds-s-075 $ds-s-100 0);

package/components/teaser-swipe-card/teaser-swipe-card.scss

@@ -44,14 +44,15 @@
   }
 
   .ds-teaser-swipe-card__time {
-    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: $ds-lineheight-l);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: $ds-lineheight-l) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressiveheading01);
     margin-bottom: ds-spacing($ds-s-050);
     flex: 1;
+    @include ds-typography($ds-typography-expressiveheading01);
   }
 
   @include ds-hover(true) {
@@ -89,10 +90,11 @@
 
     .ds-teaser-swipe-card__time {
       display: flex;
-      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
-      color: $ds-theme-color;
       align-items: center;
       margin-bottom: ds-spacing($ds-s-025);
+      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+        color: $ds-theme-color;
+      }
 
       &::before {
         content: "";

package/components/teaser-tipsa/teaser-tipsa.scss

@@ -17,7 +17,7 @@
   }
 
   .ds-teaser__text {
-    @include ds-typography($ds-typography-functionalbody02);
     margin-top: ds-spacing($ds-s-050);
+    @include ds-typography($ds-typography-functionalbody02);
   }
 }

package/components/text-button/text-button.scss

@@ -7,6 +7,17 @@ $ds-text-btn__underline-offset: 2px;
 .ds-text-btn {
   --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
 
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ds-border-radius(x1);
+  padding: 0;
+  position: relative;
+  text-decoration: none;
+
   &.ds-force-px {
     --ds-text-btn__icon-size: 24px;
   }
@@ -47,17 +58,6 @@ $ds-text-btn__underline-offset: 2px;
     }
   }
 
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: ds-border-radius(x1);
-  padding: 0;
-  position: relative;
-  text-decoration: none;
-
   &::before {
     content: "";
     border-radius: inherit;
@@ -86,9 +86,10 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   .ds-text-btn__text {
-    @include ds-typography-with-force-px($ds-typography-functionalbody02);
     text-underline-offset: $ds-text-btn__underline-offset;
-    color: $ds-color-text-primary;
+    @include ds-typography-with-force-px($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
   }
 
   &:not(:disabled) .ds-text-btn__text {

package/components/text-button-toggle/text-button-toggle.scss

@@ -69,11 +69,14 @@ $ds-text-btn-toggle__icon-size: 24px;
   }
 
   .ds-text-btn-toggle__text {
-    @include ds-typography($ds-typography-functionalbody02);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody02, true);
+      @include ds-typography($ds-typography-functionalbody02, true) {
+        color: $ds-color-text-primary;
+      }
     }
-    color: $ds-color-text-primary;
   }
 
   .ds-text-btn-toggle__off {

package/components/text-input/text-input.scss

@@ -21,13 +21,14 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
 .ds-text-input__input {
   box-sizing: border-box;
   width: 100%;
-  color: $ds-color-text-primary;
   background-color: $ds-color-component-secondary;
-  @include ds-typography($ds-typography-functionalbody02);
   padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x1)) ds-spacing($ds-s-100) - ds-border-width(x1);
   border: solid ds-border-width(x1) $ds-color-border-primary-02;
   border-radius: ds-border-radius(x1);
   margin: 0;
+  @include ds-typography($ds-typography-functionalbody02) {
+    color: $ds-color-text-primary;
+  }
 
   &.password-toggle {
     padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area);
@@ -39,8 +40,8 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   &:focus,
   &:not(:placeholder-shown) {
     + .ds-text-input__label {
-      @include ds-typography($ds-typography-functionalmeta02);
       top: 0;
+      @include ds-typography($ds-typography-functionalmeta02);
 
       &::before {
         background-color: $ds-color-component-secondary;
@@ -111,8 +112,8 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   .ds-text-input__input {
-    @include ds-typography($ds-typography-functionalbody02, true);
     padding: ds-spacing($ds-s-100) - ds-border-width(x1);
+    @include ds-typography($ds-typography-functionalbody02, true);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
@@ -134,8 +135,8 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   .ds-text-input__label {
-    @include ds-typography($ds-typography-functionalbody02, true);
     top: ds-spacing($ds-s-150);
+    @include ds-typography($ds-typography-functionalbody02, true);
     &::before {
       top: ds-spacing($ds-s-050);
     }

package/components/thematic-break/README-NJK.md

@@ -0,0 +1,31 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
+- Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
+- Storybook (Latest): [ThematicBreak](https://designsystem-latest.dn.se/?path=/docs/article-thematicbreak--docs)
+
+----
+
+# ThematicBreak
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.njk' import ThematicBreak %}
+
+{{ ThematicBreak() }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
+```

package/components/thematic-break/README.md

@@ -1,31 +1,11 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
-- Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
-- Storybook (Latest): [ThematicBreak](https://designsystem-latest.dn.se/?path=/docs/article-thematicbreak--docs)
+ThematicBreak
+=============
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
+*   Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
 
-# ThematicBreak
+The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
 
-## Parameters
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.njk' import ThematicBreak %}
-
-{{ ThematicBreak() }}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
-```
+<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">ThematicBreak</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>

package/components/thematic-break/thematic-break.tsx

@@ -5,6 +5,14 @@ export interface ThematicBreakProps {
   attributes?: object;
 }
 
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
+ * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
+ *
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
+ * `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
+ */
+
 export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
   const classes = formatClassString([
     'ds-thematic-break',

package/components/tooltip/tooltip.scss

@@ -48,8 +48,8 @@
     @include ds-typography($ds-typography-functionalbody01);
 
     h2 {
-      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
       margin: 0;
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
 
       + p {
         margin-top: 0;

package/components/video-caption/video-caption.scss

@@ -1,12 +1,13 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-video-caption {
-  @include ds-typography($ds-typography-functionalbody01);
-  color: $ds-color-text-primary;
+  @include ds-typography($ds-typography-functionalbody01) {
+    color: $ds-color-text-primary;
+  }
 
   .ds-video-caption__duration {
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-bold);
     margin-right: ds-spacing($ds-s-025);
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-bold);
   }
 
   @at-root .ds-force-px#{&} {

package/components/vip-badge/vip-badge.scss

@@ -12,22 +12,22 @@ $ds-vip-badge__icon-size: 16px;
   background-color: $ds-color-component-business;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
+  padding: ds-spacing($ds-s-025, rem);
   @include ds-typography(
     $ds-typography-functionalmeta01,
     $lineHeight: $ds-lineheight-l,
     $letterSpacing: $ds-letterspacing-none
   );
-  padding: ds-spacing($ds-s-025, rem);
 
   @at-root .ds-force-px#{&} {
+    border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
+    padding: ds-spacing($ds-s-025);
     @include ds-typography(
       $ds-typography-functionalmeta01,
       $forcePx: true,
       $lineHeight: $ds-lineheight-l,
       $letterSpacing: $ds-letterspacing-none
     );
-    border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
-    padding: ds-spacing($ds-s-025);
   }
 
   // bang class indicating that the user has premium access

package/foundations/helpers/links.scss

@@ -1,3 +1,5 @@
+@use "../variables/colorsCssVariables";
+
 @use "colors.scss" as *;
 @use "../variables/decorations.scss" as *;
 @use "utilities.scss" as *;
@@ -7,34 +9,37 @@ $ds-link-paragraph: "paragraph";
 $ds-link-article-body: "article-body";
 
 @mixin ds-link($type: paragraph) {
-  color: inherit;
-  @include ds-underline(2px, 1px);
   &:focus-visible {
     outline-color: $ds-color-border-focus-02;
   }
 
-  @if ($type == $ds-link-list) {
-    text-decoration-line: none;
-    &:hover {
-      text-decoration-line: $ds-text-decoration-link-underline;
-    }
-  } @else if ($type == $ds-link-paragraph) {
-    text-decoration-line: $ds-text-decoration-link-underline;
-    &:hover {
+  & {
+    color: inherit;
+    @include ds-underline(2px, 1px);
+    @if ($type == $ds-link-list) {
       text-decoration-line: none;
+      &:hover {
+        text-decoration-line: $ds-text-decoration-link-underline;
+      }
+    } @else if ($type == $ds-link-paragraph) {
+      text-decoration-line: $ds-text-decoration-link-underline;
+      &:hover {
+        text-decoration-line: none;
+      }
+      &:visited {
+        color: $ds-color-text-primary-02;
+      }
+    } @else if ($type == $ds-link-article-body) {
+      text-decoration-line: $ds-text-decoration-link-underline;
+      color: $ds-color-text-body-link;
+      &:hover {
+        text-decoration-line: none;
+      }
+      &:visited {
+        color: $ds-color-text-body-link-visited;
+      }
     }
-    &:visited {
-      color: $ds-color-text-primary-02;
-    }
-  } @else if ($type == $ds-link-article-body) {
-    text-decoration-line: $ds-text-decoration-link-underline;
-    color: $ds-color-text-body-link;
-    &:hover {
-      text-decoration-line: none;
-    }
-    &:visited {
-      color: $ds-color-text-body-link-visited;
-    }
+    @content;
   }
 }
 

package/foundations/helpers/mediaQueries.scss

@@ -1,6 +1,4 @@
-@use "sass:list";
 @use "sass:map";
-@use "sass:string";
 
 $ds-mq-min-width--desktop: 1025;
 $ds-mq-min-width--tablet: 768;

package/foundations/helpers/metrics.scss

@@ -1,5 +1,4 @@
 @use "sass:list";
-@use "sass:math";
 @use "sass:map";
 @use "../variables/metrics.scss" as *;
 
@@ -35,7 +34,7 @@ $dsBorderWidth: map.get($metrics, "border-width");
     $values: list.append($values, $value);
   }
 
-  @if length($values) == 1 {
+  @if list.length($values) == 1 {
     @return list.nth($values, 1);
   }
 

package/foundations/helpers/shadows.scss

@@ -1,6 +1,4 @@
-@use "sass:meta";
 @use "sass:map";
-@use "sass:string";
 @use "utilities.scss" as *;
 @use "../variables/shadowsDnLightTokens.scss" as *;
 @use "../variables/shadowsDnDarkTokens.scss" as *;

package/foundations/helpers/spacing.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:list";
 @use "sass:math";
 @use "sass:map";
@@ -27,7 +28,7 @@
 
         @if ($value == 0) {
           $value: 0 * 1;
-        } @else if ($value and type-of($value) == "number") {
+        } @else if ($value and meta.type-of($value) == "number") {
           @if ($sizeUnit == "rem") {
             $value: (math.div($value, 16)) * 1rem;
           } @else {
@@ -37,13 +38,13 @@
             $value: $value * -1;
           }
         }
-        @if (type-of($value) == "number" or $value == "auto") {
+        @if (meta.type-of($value) == "number" or $value == "auto") {
           $values: list.append($values, $value);
         }
       }
     }
 
-    @if length($values) == 1 {
+    @if list.length($values) == 1 {
       @return list.nth($values, 1);
     }
 

package/foundations/helpers/typography.scss

@@ -1,4 +1,3 @@
-@use "sass:meta";
 @use "sass:map";
 @use "sass:string";
 @use "sass:math";
@@ -71,7 +70,7 @@ $dsSerifWeights: (
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
       @include _ds-normalize-letter-spacing($tmpMap);
-      @each $key in map-keys($tmpMap) {
+      @each $key in map.keys($tmpMap) {
         $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight, $fontStyle);
         @include _ds-typography-get-property($tmpMap, $key, $forcePx, "small", $value);
       }
@@ -81,7 +80,7 @@ $dsSerifWeights: (
   @if $tmpMapScreenLarge {
     @include ds-mq-only-breakpoint(tablet) {
       @include _ds-normalize-letter-spacing($tmpMapScreenLarge);
-      @each $key in map-keys($tmpMapScreenLarge) {
+      @each $key in map.keys($tmpMapScreenLarge) {
         $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight, $fontStyle);
         @include _ds-typography-get-property($tmpMapScreenLarge, $key, $forcePx, "large", $value);
       }
@@ -91,12 +90,16 @@ $dsSerifWeights: (
   @if $tmpMapScreenExtraLarge {
     @include ds-mq-smallest-breakpoint(desktop) {
       @include _ds-normalize-letter-spacing($tmpMapScreenExtraLarge);
-      @each $key in map-keys($tmpMapScreenExtraLarge) {
+      @each $key in map.keys($tmpMapScreenExtraLarge) {
         $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight, $fontStyle);
         @include _ds-typography-get-property($tmpMapScreenExtraLarge, $key, $forcePx, "extraLarge", $value);
       }
     }
   }
+
+  & {
+    @content;
+  }
 }
 
 @mixin ds-typography-without-mq(
@@ -130,7 +133,7 @@ $dsSerifWeights: (
 
   @if $tmpMap {
     @include _ds-normalize-letter-spacing($tmpMap);
-    @each $key in map-keys($tmpMap) {
+    @each $key in map.keys($tmpMap) {
       $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight, $fontStyle);
       @include _ds-typography-get-property($tmpMap, $key, $forcePx, $scaling, $value);
     }
@@ -156,7 +159,7 @@ $dsSerifWeights: (
     letterSpacing: $letterSpacing,
   );
   $forcePx: $scaling == false;
-  @each $key in map-keys($dsTypographyKeys) {
+  @each $key in map.keys($dsTypographyKeys) {
     @include _ds-typography-get-property($dsTypographyKeys, $key, $forcePx, $scaling);
   }
 }
@@ -178,7 +181,7 @@ $dsSerifWeights: (
       }
     } @else if $key == "fontWeight" {
       $value: string.to-lower-case($value);
-      @if map-has-key($fontWeights, $value) {
+      @if map.has-key($fontWeights, $value) {
         $value: map.get($fontWeights, $value);
       }
       font-weight: #{$value};
@@ -204,7 +207,7 @@ $dsSerifWeights: (
           letter-spacing: ds-px-to-rem($value);
         }
       }
-    } @else if index(map-keys($dsTypographyKeys), $key) {
+    } @else if list.index(map.keys($dsTypographyKeys), $key) {
       #{map.get($dsTypographyKeys, $key)}: $value;
     }
   }
@@ -249,6 +252,9 @@ $dsSerifWeights: (
   @at-root .ds-force-px#{&} {
     @include ds-typography($token, true);
   }
+  & {
+    @content;
+  }
 }
 
 @function _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight, $fontStyle) {

package/foundations/helpers/utilities.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:math";
 
 $ds-btn__min-clickable-area: 48px;
@@ -7,7 +8,7 @@ $ds-btn__min-clickable-area: 48px;
 }
 
 @function ds-strip-unit($number) {
-  @if type-of($number) == "number" and not unitless($number) {
+  @if meta.type-of($number) == "number" and not math.is-unitless($number) {
     @return math.div($number, ($number * 0 + 1));
   }