@bonniernews/dn-design-system-web 8.0.8 → 8.0.9

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.9 (2023-11-10)
+
+
+### Bug Fixes
+
+* **web:** rename metrics function ([#1086](https://github.com/BonnierNews/dn-design-system/issues/1086)) ([589bc48](https://github.com/BonnierNews/dn-design-system/commit/589bc487eae3ba8b34b1418e1723d1b26fad91b0))
+
+
+
 ## 8.0.8 (2023-11-10)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/blocked-content/blocked-content.scss

@@ -8,8 +8,8 @@
 
   .ds-blocked-content__inner {
     text-align: center;
-    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    border-radius: ds-metrics-border-radius(x1);
+    border: ds-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(x1);
     padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
   }
 

package/components/buddy-menu/buddy-menu.scss

@@ -25,7 +25,7 @@
 
   .ds-buddy-menu__inner {
     background-color: $ds-color-surface-elevated;
-    border-radius: ds-metrics-border-radius(x2);
+    border-radius: ds-border-radius(x2);
     box-shadow: ds-shadow-get-box-shadow($ds-shadow-drop-shadow-a), ds-shadow-get-box-shadow($ds-shadow-drop-shadow-b);
     position: relative;
     z-index: 1;
@@ -81,8 +81,8 @@
     display: block;
   }
   .ds-buddy-menu__links-list {
-    border-bottom-left-radius: ds-metrics-border-radius(x2);
-    border-bottom-right-radius: ds-metrics-border-radius(x2);
+    border-bottom-left-radius: ds-border-radius(x2);
+    border-bottom-right-radius: ds-border-radius(x2);
     overflow: hidden;
     margin: 0;
     padding: 0;

package/components/button/button.scss

@@ -3,7 +3,7 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+$ds-btn-outlined__border-width: ds-border-width(x1);
 $ds-btn__min-clickable-area: 48px;
 $ds-btn__icon-size: 24px;
 
@@ -29,7 +29,7 @@ $ds-btn__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-btn__inner {
-      outline: ds-metrics-border-width(x2) solid;
+      outline: ds-border-width(x2) solid;
       outline-offset: 2px;
     }
   }
@@ -43,7 +43,7 @@ $ds-btn__icon-size: 24px;
   .ds-btn__inner {
     @include ds-typography($ds-typography-detailstandard-button);
     border: $ds-btn-outlined__border-width solid;
-    border-radius: ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1);
     padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
         $ds-btn-outlined__border-width
       );

package/components/checkbox/checkbox.scss

@@ -20,7 +20,7 @@ $ds-checkbox__icon-size: 24px;
     &::before {
       content: "";
       position: absolute;
-      border-radius: ds-metrics-border-radius(x1);
+      border-radius: ds-border-radius(x1);
       top: 0;
       left: 0;
       right: 0;
@@ -75,8 +75,8 @@ $ds-checkbox__icon-size: 24px;
     }
 
     &:focus-visible + .ds-checkbox__inner {
-      border-radius: ds-metrics-border-radius(x1);
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      border-radius: ds-border-radius(x1);
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }

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

@@ -20,7 +20,7 @@ $ds-radio-btn__icon-size: 24px;
     &::before {
       content: "";
       position: absolute;
-      border-radius: ds-metrics-border-radius(x1);
+      border-radius: ds-border-radius(x1);
       top: 0;
       left: 0;
       right: 0;
@@ -85,8 +85,8 @@ $ds-radio-btn__icon-size: 24px;
     }
 
     &:focus-visible + .ds-radio-btn__inner {
-      border-radius: ds-metrics-border-radius(x1);
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      border-radius: ds-border-radius(x1);
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }

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

@@ -24,15 +24,15 @@
     display: flex;
     flex-direction: column;
     padding: ds-spacing($ds-s-075);
-    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    border-radius: ds-metrics-border-radius(x1);
+    border: ds-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(x1);
     margin: 0;
     flex: 1;
   }
 
   .ds-teaser-image {
-    border-top-right-radius: ds-metrics-border-radius(x1);
-    border-top-left-radius: ds-metrics-border-radius(x1);
+    border-top-right-radius: ds-border-radius(x1);
+    border-top-left-radius: ds-border-radius(x1);
     overflow: hidden;
   }
 
@@ -103,7 +103,7 @@
       &::after {
         content: "";
         display: block;
-        height: ds-metrics-border-width(x1);
+        height: ds-border-width(x1);
         flex: 1;
         background-color: $ds-color-border-primary;
         margin-left: ds-spacing($ds-s-050);

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

@@ -70,7 +70,7 @@ $ds-text-btn__underline-offset: 2px;
   &:focus-visible {
     outline: none;
     .ds-text-btn__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -83,7 +83,7 @@ $ds-text-btn__underline-offset: 2px;
 
   .ds-text-btn__inner {
     background-color: transparent;
-    border-radius: ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1);
     padding: var(--ds-text-btn__inner-padding);
     position: relative;
     &::before {

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

@@ -38,7 +38,7 @@ $ds-text-btn-toggle__icon-size: 24px;
   &:focus-visible {
     outline: none;
     .ds-text-btn-toggle__inner {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
       outline-offset: 2px;
     }
   }
@@ -54,7 +54,7 @@ $ds-text-btn-toggle__icon-size: 24px;
     align-items: center;
     justify-content: center;
     background-color: transparent;
-    border-radius: ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1);
     padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
     position: relative;
     &::before {

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

@@ -24,17 +24,15 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   color: $ds-color-text-primary;
   background-color: $ds-color-component-secondary;
   @include ds-typography($ds-typography-functional-body02regular);
-  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-metrics-border-width(x1)) ds-spacing($ds-s-100) - ds-metrics-border-width(
-      x1
-    );
-  border: solid ds-metrics-border-width(x1) $ds-color-border-primary-02;
-  border-radius: ds-metrics-border-radius(x1);
+  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;
 
   &.password-toggle {
     padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area);
     &:focus {
-      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-metrics-border-width(x2));
+      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-border-width(x2));
     }
   }
 
@@ -51,14 +49,12 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   &:focus {
-    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-metrics-border-width(x2)) ds-spacing($ds-s-100) - ds-metrics-border-width(
-        x2
-      );
+    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x2)) ds-spacing($ds-s-100) - ds-border-width(x2);
     border-color: $ds-color-border-primary-03;
-    border-width: ds-metrics-border-width(x2);
+    border-width: ds-border-width(x2);
 
     + .ds-text-input__label::before {
-      height: ds-metrics-border-width(x2);
+      height: ds-border-width(x2);
     }
   }
 
@@ -90,7 +86,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
     content: "";
     width: calc(100% + ds-spacing($ds-s-050));
     left: -#{ds-spacing($ds-s-025)};
-    height: ds-metrics-border-width(x1);
+    height: ds-border-width(x1);
     position: absolute;
     top: ds-spacing($ds-s-050, rem);
     z-index: -1;
@@ -116,12 +112,12 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x1);
+    padding: ds-spacing($ds-s-100) - ds-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
       &:focus {
-        padding-right: ($ds-text-input-toggle-btn__area - ds-metrics-border-width(x2));
+        padding-right: ($ds-text-input-toggle-btn__area - ds-border-width(x2));
       }
     }
 
@@ -133,7 +129,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
     }
 
     &:focus {
-      padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
+      padding: ds-spacing($ds-s-100) - ds-border-width(x2);
     }
   }
 

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

@@ -7,8 +7,8 @@ $ds-vip-badge__icon-size: 16px;
   display: none;
   align-items: center;
   box-sizing: content-box;
-  border-radius: ds-px-to-rem(ds-metrics-border-radius(x1)) 0 ds-px-to-rem(ds-metrics-border-radius(x1))
-    ds-px-to-rem(ds-metrics-border-radius(x1));
+  border-radius: ds-px-to-rem(ds-border-radius(x1)) 0 ds-px-to-rem(ds-border-radius(x1))
+    ds-px-to-rem(ds-border-radius(x1));
   background-color: $ds-color-component-business;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
@@ -17,7 +17,7 @@ $ds-vip-badge__icon-size: 16px;
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-functional-meta01regular, true);
-    border-radius: ds-metrics-border-radius(x1) 0 ds-metrics-border-radius(x1) ds-metrics-border-radius(x1);
+    border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
     padding: ds-spacing($ds-s-025);
   }
 

package/foundations/helpers/metrics.scss

@@ -6,7 +6,7 @@
 $dsBorderRadius: map.get($metrics, "border-radius");
 $dsBorderWidth: map.get($metrics, "border-width");
 
-@function ds-metrics-border-radius($units: null) {
+@function ds-border-radius($units: null) {
   @if ($units) {
     @return _ds-get-metric($dsBorderRadius, $units);
   }
@@ -14,7 +14,7 @@ $dsBorderWidth: map.get($metrics, "border-width");
   @return null;
 }
 
-@function ds-metrics-border-width($units: null) {
+@function ds-border-width($units: null) {
   @if ($units) {
     @return _ds-get-metric($dsBorderWidth, $units);
   }
@@ -41,3 +41,13 @@ $dsBorderWidth: map.get($metrics, "border-width");
 
   @return $values;
 }
+
+// deprecated
+@function ds-metrics-border-radius($units: null) {
+  @return ds-border-radius($units);
+}
+
+// deprecated
+@function ds-metrics-border-width($units: null) {
+  @return ds-border-width($units);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "8.0.8",
+  "version": "8.0.9",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",