@bonniernews/dn-design-system-web 25.0.6-beta.2 → 25.0.6-beta.4

package/components/button/button.scss

@@ -116,13 +116,13 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
     padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
-    @include ds-typography($token: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-size: 20px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
       padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
       @include ds-typography(
-        $token: $ds-typography-functional-body-sm,
+        $variable: $ds-typography-functional-body-sm,
         $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
@@ -132,12 +132,12 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   &.ds-btn--medium {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100), true)};
     padding: _btn-brdr(ds-spacing($ds-s-050), true) _btn-brdr(ds-spacing($ds-s-125), true);
-    @include ds-typography($token: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-100))};
       padding: _btn-brdr(ds-spacing($ds-s-050)) _btn-brdr(ds-spacing($ds-s-125));
       @include ds-typography(
-        $token: $ds-typography-functional-body-md,
+        $variable: $ds-typography-functional-body-md,
         $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
@@ -147,13 +147,13 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
   &.ds-btn--large {
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125), true)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-150), true);
-    @include ds-typography($token: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
 
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-125))};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-150));
       @include ds-typography(
-        $token: $ds-typography-functional-body-md,
+        $variable: $ds-typography-functional-body-md,
         $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );
@@ -164,13 +164,13 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     --ds-btn__icon-size: #{ds-px-to-rem(32px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200), true) - ds-px-to-rem(4px)};
     padding: _btn-brdr(ds-spacing($ds-s-075), true) _btn-brdr(ds-spacing($ds-s-200), true);
-    @include ds-typography($token: $ds-typography-functional-body-lg, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($variable: $ds-typography-functional-body-lg, $fontWeight: $ds-fontweight-semibold);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-size: 32px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-200)) - 4px};
       padding: _btn-brdr(ds-spacing($ds-s-075)) _btn-brdr(ds-spacing($ds-s-200));
       @include ds-typography(
-        $token: $ds-typography-functional-body-lg,
+        $variable: $ds-typography-functional-body-lg,
         $fontWeight: $ds-fontweight-semibold,
         $forcePx: true
       );

package/components/teaser-centered/teaser-centered.scss

@@ -38,7 +38,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-detail-teaser-breaking) {
+    @include ds-typography($ds-typography-detail-teaser-centrerad) {
       text-align: center;
     }
   }

package/foundations/helpers/links.scss

@@ -7,8 +7,6 @@ $ds-link-list: "list";
 $ds-link-paragraph: "paragraph";
 $ds-link-article-body: "article-body";
 
-$ds-text-decoration-link-underline: underline;
-
 @mixin ds-link($type: paragraph) {
   &:focus-visible {
     outline-color: $ds-color-border-primary;
@@ -20,10 +18,10 @@ $ds-text-decoration-link-underline: underline;
     @if ($type == $ds-link-list) {
       text-decoration-line: none;
       &:hover {
-        text-decoration-line: $ds-text-decoration-link-underline;
+        text-decoration-line: underline;
       }
     } @else if ($type == $ds-link-paragraph) {
-      text-decoration-line: $ds-text-decoration-link-underline;
+      text-decoration-line: underline;
       &:hover {
         text-decoration-line: none;
       }
@@ -31,7 +29,7 @@ $ds-text-decoration-link-underline: underline;
         color: $ds-color-text-primary-subtle;
       }
     } @else if ($type == $ds-link-article-body) {
-      text-decoration-line: $ds-text-decoration-link-underline;
+      text-decoration-line: underline;
       color: $ds-color-text-body-link;
       &:hover {
         text-decoration-line: none;
@@ -45,7 +43,7 @@ $ds-text-decoration-link-underline: underline;
 }
 
 @mixin ds-underline($offset: 2px, $thickness: 2px) {
-  text-decoration-line: $ds-text-decoration-link-underline;
+  text-decoration-line: underline;
   text-decoration-thickness: ds-px-to-rem($thickness);
   text-underline-offset: ds-px-to-rem($offset);
 }

package/foundations/helpers/typography.scss

@@ -48,7 +48,7 @@ $dsSerifWeights: (
 // Serif variation changes, text 18px, headline 26px, display 34px. As fallback we will always use headline
 
 @mixin ds-typography(
-  $token,
+  $variable,
   $forcePx: false,
   $fontWeight: null,
   $letterSpacing: null,
@@ -62,9 +62,9 @@ $dsSerifWeights: (
     "lineHeight": null,
     "fontStyle": null,
   );
-  $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $token));
-  $tmpMapScreenLarge: map.merge($addons, map.get($typographyScreenLarge, $token));
-  $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyScreenExtraLarge, $token));
+  $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $variable));
+  $tmpMapScreenLarge: map.merge($addons, map.get($typographyScreenLarge, $variable));
+  $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyScreenExtraLarge, $variable));
 
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
@@ -102,7 +102,7 @@ $dsSerifWeights: (
 }
 
 @mixin ds-typography-without-mq(
-  $token,
+  $variable,
   $screen: mobile,
   $forcePx: false,
   $fontWeight: null,
@@ -121,12 +121,12 @@ $dsSerifWeights: (
   );
 
   @if $screen == mobile {
-    $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenSmall, $variable));
   } @else if $screen == tablet {
-    $tmpMap: map.merge($addons, map.get($typographyScreenLarge, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenLarge, $variable));
     $scaling: "large";
   } @else if $screen == desktop {
-    $tmpMap: map.merge($addons, map.get($typographyScreenExtraLarge, $token));
+    $tmpMap: map.merge($addons, map.get($typographyScreenExtraLarge, $variable));
     $scaling: "extraLarge";
   }
 
@@ -245,11 +245,11 @@ $dsSerifWeights: (
   }
 }
 
-@mixin ds-typography-with-force-px($token) {
-  @include ds-typography($token);
+@mixin ds-typography-with-force-px($variable) {
+  @include ds-typography($variable);
   // If called from element without a wrapper class, ex. a it will generate incorrect selector .ds-force-pxa
   @at-root .ds-force-px#{&} {
-    @include ds-typography($token, true);
+    @include ds-typography($variable, true);
   }
   & {
     @content;

package/foundations/variables/typographyList.scss

@@ -41,7 +41,7 @@ $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
 $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
 $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
 $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
-$ds-typography-detail-teaser-breaking: 'detail-teaser-breaking';
+$ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
 $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
 $ds-typography-detail-teaser-story: 'detail-teaser-story';
 $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';

package/foundations/variables/typographyScreenExtraLarge.scss

@@ -304,7 +304,7 @@ $typographyScreenExtraLarge: (
     letterSpacing: 0,
     lineHeight: 1.1
   ),
-  detail-teaser-breaking: (
+  detail-teaser-centrerad: (
     fontFamily: "DN Serif Display",
     fontSize: 64,
     fontWeight: ExtraBold,

package/foundations/variables/typographyScreenLarge.scss

@@ -304,9 +304,9 @@ $typographyScreenLarge: (
     letterSpacing: 0,
     lineHeight: 1.1
   ),
-  detail-teaser-breaking: (
+  detail-teaser-centrerad: (
     fontFamily: "DN Serif Display",
-    fontSize: 64,
+    fontSize: 56,
     fontWeight: ExtraBold,
     letterSpacing: 0,
     lineHeight: 1.1

package/foundations/variables/typographyScreenSmall.scss

@@ -242,7 +242,7 @@ $typographyScreenSmall: (
   detail-teaser-standard-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontSize: 18,
-    fontWeight: Regular,
+    fontWeight: Medium,
     letterSpacing: 0,
     lineHeight: 1.2,
     fontStyle: italic
@@ -304,7 +304,7 @@ $typographyScreenSmall: (
     letterSpacing: 0,
     lineHeight: 1.2
   ),
-  detail-teaser-breaking: (
+  detail-teaser-centrerad: (
     fontFamily: "DN Serif Display",
     fontSize: 36,
     fontWeight: ExtraBold,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "25.0.6-beta.2",
+  "version": "25.0.6-beta.4",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/variables/typography-list.json

@@ -42,7 +42,7 @@
   "detail-teaser-tipsa": "'detail-teaser-tipsa'",
   "detail-teaser-baotaxl": "'detail-teaser-baotaxl'",
   "detail-teaser-longlife": "'detail-teaser-longlife'",
-  "detail-teaser-breaking": "'detail-teaser-breaking'",
+  "detail-teaser-centrerad": "'detail-teaser-centrerad'",
   "detail-teaser-large-opinion": "'detail-teaser-large-opinion'",
   "detail-teaser-story": "'detail-teaser-story'",
   "detail-teaser-large-rightcol": "'detail-teaser-large-rightcol'",