@bonniernews/dn-design-system-web 21.1.3 → 21.1.5

package/components/profile-header/profile-header.scss

@@ -39,10 +39,11 @@
   }
 
   .ds-profile-header__title {
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
-    color: $ds-color-text-primary;
     margin: 0;
     word-break: break-word;
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-profile-header__media {
@@ -56,15 +57,17 @@
   .ds-profile-header__article-count {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-profile-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     a {
       @include ds-link($ds-link-article-body);

package/components/quote/quote.scss

@@ -1,11 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-quote {
-  @include ds-typography($ds-typography-detailarticle-quote);
-  color: $ds-color-text-primary;
   margin: 0;
   padding: ds-spacing($ds-s-100 0 $ds-s-200);
   position: relative;
+  @include ds-typography($ds-typography-detailarticle-quote) {
+    color: $ds-color-text-primary;
+  }
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-detailarticle-quote, true);

package/components/radio-button/radio-button.scss

@@ -40,8 +40,8 @@ $ds-radio-btn__icon-size: 24px;
       margin: ds-spacing(0 0 0 $ds-s-050, rem);
       @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functionalbody02, true);
         margin: ds-spacing(0 0 0 $ds-s-050);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
     }
 

package/components/tag-header/tag-header.scss

@@ -50,21 +50,23 @@
   }
 
   .ds-tag-header__vignette {
-    @include ds-typography($ds-typography-functionallabel01);
-    color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
     display: block;
     text-decoration: none;
+    @include ds-typography($ds-typography-functionallabel01) {
+      color: $ds-theme-color;
+    }
     &:hover {
       text-decoration: none;
     }
   }
 
   .ds-tag-header__title {
-    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
-    color: $ds-color-text-primary;
-    margin: 0;
     word-break: break-word;
+    margin: 0;
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-tag-header__media {
@@ -84,15 +86,17 @@
   .ds-tag-header__article-count {
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary-02;
+    }
   }
 
   .ds-tag-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
-    color: $ds-color-text-primary;
     margin: ds-spacing(0 $ds-s-100 0);
     padding-top: ds-spacing($ds-s-100);
+    @include ds-typography($ds-typography-functionalbody02) {
+      color: $ds-color-text-primary;
+    }
 
     a {
       @include ds-link($ds-link-article-body);

package/components/teaser-footer/teaser-footer.scss

@@ -9,9 +9,10 @@
 }
 
 .ds-teaser-footer__notes {
-  @include ds-typography($ds-typography-functionalmeta02);
   display: block;
-  color: $ds-color-text-primary-02;
+  @include ds-typography($ds-typography-functionalmeta02) {
+    color: $ds-color-text-primary-02;
+  }
 }
 
 .ds-teaser-footer--podcast {
@@ -21,8 +22,9 @@
   margin-top: ds-spacing($ds-s-050);
 
   .ds-teaser-footer__title {
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
-    color: $ds-color-text-primary;
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+      color: $ds-color-text-primary;
+    }
   }
 
   .ds-teaser-footer__notes {

package/components/teaser-image/teaser-image.scss

@@ -7,15 +7,16 @@
   margin: 0;
 
   .ds-teaser-image__byline {
-    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l);
     position: absolute;
     bottom: 0;
     right: 0;
     padding: ds-spacing(0 $ds-s-025);
     margin-left: ds-spacing($ds-s-050);
-    color: $ds-color-static-white;
     background-color: $ds-color-static-transparent-black;
     z-index: 5;
+    @include ds-typography($ds-typography-functionalmeta01, $lineHeight: $ds-lineheight-l) {
+      color: $ds-color-static-white;
+    }
   }
 
   &--mask {

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -63,15 +63,17 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
     .ds-teaser-list-vertical__item-vignette {
       display: block;
-      @include ds-typography($ds-typography-functionallabel01);
-      color: $ds-theme-color;
       margin-bottom: ds-spacing($ds-s-025);
+      @include ds-typography($ds-typography-functionallabel01) {
+        color: $ds-theme-color;
+      }
     }
 
     .ds-teaser-list-vertical__item-title {
-      @include ds-typography($ds-typography-expressiveheading01);
-      color: $ds-color-text-primary;
       word-break: break-word;
+      @include ds-typography($ds-typography-expressiveheading01) {
+        color: $ds-color-text-primary;
+      }
 
       .ds-teaser-list-vertical__item-highlight {
         color: $ds-theme-color;

package/components/teaser-longlife/teaser-longlife.scss

@@ -52,12 +52,12 @@
 
   .ds-teaser__vignette {
     color: currentColor;
+    margin: 0;
     @include ds-typography(
       $ds-typography-functionallabel01,
       $lineHeight: $ds-lineheight-l,
       $letterSpacing: $ds-letterspacing-none
     );
-    margin: 0;
   }
 
   .ds-teaser__title {

package/components/teaser-native/teaser-native.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--native {
   overflow: hidden;
@@ -24,8 +23,9 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressiveheading02);
-    font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
+    @include ds-typography($ds-typography-expressiveheading02) {
+      font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   &::after {

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/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));
   }