@bonniernews/dn-design-system-web 3.0.0-alpha.3 → 3.0.0-alpha.31

package/CHANGELOG.md

@@ -3,6 +3,251 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.31 (2023-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Quote and Factbox has property from ´variant´ to ´theme´
+
+### Bug Fixes
+
+* **web:** add web themes and update quote and factbox ([#761](https://github.com/BonnierNews/dn-design-system/issues/761)) ([0ee3299](https://github.com/BonnierNews/dn-design-system/commit/0ee329900641325278e04242074f819f66bda025))
+
+
+
+## 3.0.0-alpha.30 (2023-04-19)
+
+
+### Features
+
+* **web:** vip badge component ([#759](https://github.com/BonnierNews/dn-design-system/issues/759)) ([7d0791e](https://github.com/BonnierNews/dn-design-system/commit/7d0791ee9d101265ec5f5427b550da783afff93e))
+
+
+
+## 3.0.0-alpha.29 (2023-04-19)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.28 (2023-04-13)
+
+
+### Bug Fixes
+
+* **web:** remove easing from hover effekt ([#753](https://github.com/BonnierNews/dn-design-system/issues/753)) ([86cce98](https://github.com/BonnierNews/dn-design-system/commit/86cce9804593683642ae2d44cd76803f06f340d6))
+
+
+
+## 3.0.0-alpha.27 (2023-04-13)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.26](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.25...@bonniernews/dn-design-system-web@3.0.0-alpha.26) (2023-04-06)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.25 (2023-04-05)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.24 (2023-04-03)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 3.0.0-alpha.23 (2023-03-31)
+
+
+### Bug Fixes
+
+* **web:** only fullwidth factbox button in small screen ([#742](https://github.com/BonnierNews/dn-design-system/issues/742)) ([97b7a4d](https://github.com/BonnierNews/dn-design-system/commit/97b7a4dec6731ec38ae67345296338c08da65a00))
+
+
+
+## 3.0.0-alpha.22 (2023-03-30)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.21](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.20...@bonniernews/dn-design-system-web@3.0.0-alpha.21) (2023-03-28)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.20](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.19...@bonniernews/dn-design-system-web@3.0.0-alpha.20) (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.19](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.18...@bonniernews/dn-design-system-web@3.0.0-alpha.19) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** use spacing layout in disclaimer ([#730](https://github.com/BonnierNews/dn-design-system/issues/730)) ([a29d313](https://github.com/BonnierNews/dn-design-system/commit/a29d3137ac57cafa317c75f1f8c74504f45f270d))
+
+
+
+## [3.0.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.17...@bonniernews/dn-design-system-web@3.0.0-alpha.18) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** dynamic spacing image top ([#736](https://github.com/BonnierNews/dn-design-system/issues/736)) ([dfb418f](https://github.com/BonnierNews/dn-design-system/commit/dfb418f471429d685a2fed738cbcd8006ef87f32))
+
+
+
+## [3.0.0-alpha.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.16...@bonniernews/dn-design-system-web@3.0.0-alpha.17) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** clean up helper includes ([#731](https://github.com/BonnierNews/dn-design-system/issues/731)) ([9680d73](https://github.com/BonnierNews/dn-design-system/commit/9680d73f7c4ce0609b1d964666ae9845f0464955))
+
+
+
+## [3.0.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.15...@bonniernews/dn-design-system-web@3.0.0-alpha.16) (2023-03-24)
+
+
+### Bug Fixes
+
+* **web:** image-caption credit is now inline ([#734](https://github.com/BonnierNews/dn-design-system/issues/734)) ([beeeaf8](https://github.com/BonnierNews/dn-design-system/commit/beeeaf8236163438bc42963a55a7ca44856627c1))
+
+
+
+## 3.0.0-alpha.15 (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.13...@bonniernews/dn-design-system-web@3.0.0-alpha.14) (2023-03-22)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.12...@bonniernews/dn-design-system-web@3.0.0-alpha.13) (2023-03-21)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.11...@bonniernews/dn-design-system-web@3.0.0-alpha.12) (2023-03-20)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.10...@bonniernews/dn-design-system-web@3.0.0-alpha.11) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.9...@bonniernews/dn-design-system-web@3.0.0-alpha.10) (2023-03-15)
+
+
+### Features
+
+* **web:** image caption ([#723](https://github.com/BonnierNews/dn-design-system/issues/723)) ([5247279](https://github.com/BonnierNews/dn-design-system/commit/5247279d3205eef7bc19599e21dbac997994cc92))
+
+
+
+## [3.0.0-alpha.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.8...@bonniernews/dn-design-system-web@3.0.0-alpha.9) (2023-03-15)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.7...@bonniernews/dn-design-system-web@3.0.0-alpha.8) (2023-03-10)
+
+
+### Bug Fixes
+
+* **web:** treat b as strong ([#722](https://github.com/BonnierNews/dn-design-system/issues/722)) ([8148ce9](https://github.com/BonnierNews/dn-design-system/commit/8148ce98e11827668858a1507ea69b8f122d8a83))
+
+
+
+## 3.0.0-alpha.7 (2023-03-10)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.5...@bonniernews/dn-design-system-web@3.0.0-alpha.6) (2023-03-08)
+
+
+### Bug Fixes
+
+* **web:** add sass variables for spacing and refactor helper ([#719](https://github.com/BonnierNews/dn-design-system/issues/719)) ([e65417c](https://github.com/BonnierNews/dn-design-system/commit/e65417cbcbe54d6d388e7b7f8b88e33ec7598588))
+
+
+
+## [3.0.0-alpha.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.4...@bonniernews/dn-design-system-web@3.0.0-alpha.5) (2023-03-08)
+
+
+### Features
+
+* **web:** video caption component ([#706](https://github.com/BonnierNews/dn-design-system/issues/706)) ([a64278a](https://github.com/BonnierNews/dn-design-system/commit/a64278a64840e2422baed278b7bae29055dabf78))
+
+
+
+## [3.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* typography medium to semibold (#717)
+
+### Miscellaneous Chores
+
+* typography medium to semibold ([#717](https://github.com/BonnierNews/dn-design-system/issues/717)) ([964de48](https://github.com/BonnierNews/dn-design-system/commit/964de485f43f18cd3f93ce4f0f82a1ce89219dee))
+
+
+
 ## [3.0.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.2...@bonniernews/dn-design-system-web@3.0.0-alpha.3) (2023-03-08)
 
 

package/README.md

@@ -10,4 +10,4 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
-For specific instructions see each component or helper readme.
+For specific instructions see each component or helper readme

package/assets/article-image/article-image.njk

@@ -1,3 +1,5 @@
+{% from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.njk' import ImageCaption %}
+
 {% macro ArticleImage(params) %}
   {% set macroClassName = "ds-article-image" %}
   {% set additionalClasses = [] %}
@@ -18,16 +20,15 @@
     {% endif %}
 
     {% if params.caption or params.author %}
-      <figcaption>
-        {% if params.caption %}
-          <span aria-hidden="true">{{ params.caption | safe }}</span>
-        {% endif %}
-        {% if params.author %}
-          <span class="ds-article-image__credits">
-            {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
-          </span>
-        {% endif %}
-      </figcaption>
+      {% set caption = params.caption if params.caption else "" %}
+      {% set author = params.author if params.author else "" %}
+      {% set imageType = params.imageType if params.imageType else "" %}
+      {{ ImageCaption({
+        caption: caption,
+        author: author,
+        imageType: imageType,
+        forcePx: params.forcePx
+      })}}
     {% endif %}
   </figure>
 {% endmacro %}

package/assets/article-image/article-image.scss

@@ -1,20 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/image-caption/image-caption.scss"  as *;
 
 .ds-article-image {
   margin: 0;
-
-  > figcaption {
-    @include ds-typography($ds-typography-functional-body01regular);
-    margin-top: ds-spacing-component(x2);
-    color: $ds-color-text-primary;
-
-    @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
-    }
-
-    > .ds-article-image__credits {
-      display: block;
-      color: $ds-color-text-primary-02;
-    }
-  }
 }

package/assets/form-field/form-field.scss

@@ -1,14 +1,10 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 
 $ds-form-field__error-icon-size: 20px;
 
 .ds-form-field__help-text {
-  margin-top: ds-spacing-component(x2);
+  margin-top: ds-spacing-component($ds-sc-x2);
   margin-bottom: 0;
   color: $ds-color-text-primary-02;
   @include ds-typography($ds-typography-functional-body01regular);
@@ -22,9 +18,9 @@ $ds-form-field__error-icon-size: 20px;
 .invalid {
   .ds-form-field__error-message {
     display: flex;
-    margin-top: ds-spacing-component(x2);
+    margin-top: ds-spacing-component($ds-sc-x2);
     .ds-icon {
-      margin: 0 ds-px-to-rem(ds-spacing-component(x2)) 0 0;
+      margin: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x2)) 0 0;
       height: ds-px-to-rem($ds-form-field__error-icon-size);
       width: ds-px-to-rem($ds-form-field__error-icon-size);
       line-height: 0;
@@ -48,7 +44,7 @@ $ds-form-field__error-icon-size: 20px;
   .invalid {
     .ds-form-field__error-message {
       .ds-icon {
-        margin: 0 ds-spacing-component(x2) 0 0;
+        margin: 0 ds-spacing-component($ds-sc-x2) 0 0;
         height: $ds-form-field__error-icon-size;
         width: $ds-form-field__error-icon-size;
       }

package/components/article-body-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+- Storybook: [ArticleBodyImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
 
 ----
 
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
   fullWidth: true,
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Paul Hansen",
+  author: "Paul Hansen"
 })}}
 ```
 

package/components/article-body-image/article-body-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-body-image/article-body-image.scss

@@ -3,6 +3,6 @@
 
 .ds-article-image--body {
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 }

package/components/article-top-image/README.md

@@ -1,5 +1,5 @@
 - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
-- Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
+- Storybook: [ArticleTopImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
 
 ----
 
@@ -30,7 +30,7 @@ These are copy paste friendly examples to quickliy get started using a component
   imageHtml: exampleArticleTopImageHtml(),
   caption: "En bildtext",
   imageType: "Foto",
-  author: "Beatrice Lundborg",
+  author: "Beatrice Lundborg"
 })}}
 ```
 

package/components/article-top-image/article-top-image.njk

@@ -11,13 +11,9 @@
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif %}
 
-  {% if params.forcePx %}
-    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
-  {% endif %}
-
   {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
-  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes  } %}
+  {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes, forcePx: params.forcePx  } %}
 
   {% call ArticleImage(imageParams) %}{% endcall %}
 {% endmacro %}

package/components/article-top-image/article-top-image.scss

@@ -2,5 +2,5 @@
 @use "../../assets/article-image/article-image.scss" as *;
 
 .ds-article-image--top {
-  @include ds-spacing-layout(gap-vertical-static-large, px, padding-bottom);
+  @include ds-spacing-layout($ds-sl-gap-vertical-medium, padding-bottom);
 }

package/components/badge/badge.scss

@@ -1,8 +1,4 @@
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 
 $ds-badge__min-size: 8px;
 
@@ -11,7 +7,7 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    @include ds-typography($ds-typography-functional-meta02medium);
+    @include ds-typography($ds-typography-functional-meta02semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
     border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -21,12 +17,12 @@ $ds-badge__min-size: 8px;
     justify-content: center;
     min-height: ds-px-to-rem($ds-badge__min-size);
     min-width: ds-px-to-rem($ds-badge__min-size);
-    padding: 0 ds-px-to-rem(ds-spacing-component(x1));
+    padding: 0 ds-px-to-rem(ds-spacing-component($ds-sc-x1));
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-meta02medium, true);
+      @include ds-typography($ds-typography-functional-meta02semibold, true);
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
-      padding: 0 ds-spacing-component(x1);
+      padding: 0 ds-spacing-component($ds-sc-x1);
     }
   }
 

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

@@ -5,18 +5,18 @@
   background-color: $ds-color-surface-background;
   margin: 0;
   @include ds-spacing-layout(
-    gap-vertical-static-medium 0 gap-vertical-static-large
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
   );
 
   .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);
-    padding: ds-spacing-component(x8 x4 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
   }
 
   .ds-blocked-content__body {
-    margin: ds-spacing-component(0 0 x8);
+    margin: ds-spacing-component(0 0 $ds-sc-x8);
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
@@ -24,11 +24,11 @@
     }
   }
   .ds-blocked-content__title {
-    @include ds-typography($ds-typography-functional-heading01medium);
+    @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
-    margin: 0 0 ds-spacing-component(x2);
+    margin: 0 0 ds-spacing-component($ds-sc-x2);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-heading01medium, true);
+      @include ds-typography($ds-typography-functional-heading01semibold, true);
     }
   }
 }

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

@@ -1,11 +1,4 @@
-@use "../../foundations/helpers/spacing.scss" as *;
-@use "../../foundations/helpers/typography.scss" as *;
-@use "../../foundations/helpers/mediaQueries.scss" as *;
-@use "../../foundations/helpers/metrics.scss" as *;
-@use "../../foundations/helpers/utilities.scss" as *;
-@use "../../foundations/helpers/colors.scss" as *;
-@use "../../foundations/helpers/links.scss" as *;
-@use "../../foundations/helpers/shadows.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
 @use "../icon-button/icon-button.scss" as *;
 @use "../list-item/list-item.scss" as *;
@@ -47,45 +40,45 @@
     position: relative;
   }
   .ds-buddy-menu__header {
-    padding: ds-spacing-component(x8 x4 x4);
-    margin: ds-spacing-component(0 0 x4);
+    padding: ds-spacing-component($ds-sc-x8 $ds-sc-x4 $ds-sc-x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
   }
   .ds-buddy-menu__close {
     position: absolute;
-    right: ds-spacing-component(x1);
-    top: ds-spacing-component(x1);
+    right: ds-spacing-component($ds-sc-x1);
+    top: ds-spacing-component($ds-sc-x1);
   }
   .ds-buddy-menu__greeting {
     @include ds-typography($ds-typography-functional-heading03bold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     display: block;
   }
   .ds-buddy-menu__account-title,
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
-    @include ds-typography($ds-typography-functional-body02medium);
+    @include ds-typography($ds-typography-functional-body02semibold);
     color: $ds-color-text-primary;
-    margin: ds-spacing-component(0 0 x1);
+    margin: ds-spacing-component(0 0 $ds-sc-x1);
   }
   .ds-buddy-menu__links-title {
-    padding: ds-spacing-component(0 x4);
+    padding: ds-spacing-component(0 $ds-sc-x4);
   }
   .ds-buddy-menu__addons-list {
     padding: 0;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     list-style: none;
     a {
       @include ds-link($ds-link-list);
       @include ds-typography($ds-typography-functional-body02regular);
       color: $ds-color-text-primary-02;
-      margin: ds-spacing-component(0 0 x4);
+      margin: ds-spacing-component(0 0 $ds-sc-x4);
     }
   }
   .ds-buddy-menu__account-level {
     @include ds-typography($ds-typography-functional-body02regular);
     color: $ds-color-text-primary-02;
-    margin: ds-spacing-component(0 0 x4);
+    margin: ds-spacing-component(0 0 $ds-sc-x4);
     display: block;
   }
   .ds-buddy-menu__links-list {
@@ -103,7 +96,7 @@
     .ds-buddy-menu__account-title,
     .ds-buddy-menu__addons-title,
     .ds-buddy-menu__links-title {
-      @include ds-typography($ds-typography-functional-body02medium, true);
+      @include ds-typography($ds-typography-functional-body02semibold, true);
     }
     .ds-buddy-menu__addons-list a {
       @include ds-typography($ds-typography-functional-body02regular, true);
@@ -114,7 +107,7 @@
   }
 
   .ds-buddy-menu__campaign {
-    margin: 0 -#{ds-spacing-component(x4)};
+    margin: 0 -#{ds-spacing-component($ds-sc-x4)};
   }
 
   &.ds-buddy-menu--skola {