@bonniernews/dn-design-system-web 3.0.0-alpha.1 → 3.0.0-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,97 @@
 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.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)
+
+
+### Features
+
+* **web:** article image ([#697](https://github.com/BonnierNews/dn-design-system/issues/697)) ([e3e9cec](https://github.com/BonnierNews/dn-design-system/commit/e3e9cecd96f4d6240854ffc593a082f7d6c66793))
+
+
+
+## [3.0.0-alpha.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.1...@bonniernews/dn-design-system-web@3.0.0-alpha.2) (2023-03-06)
+
+
+### Bug Fixes
+
+* **web:** use large screen spacing on tablet ([#718](https://github.com/BonnierNews/dn-design-system/issues/718)) ([42f6dc7](https://github.com/BonnierNews/dn-design-system/commit/42f6dc79c03f2cca823921b07d9ec5855628625a))
+
+
+
 ## [3.0.0-alpha.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.0...@bonniernews/dn-design-system-web@3.0.0-alpha.1) (2023-03-06)
 
 

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

@@ -0,0 +1,34 @@
+{% from '@bonniernews/dn-design-system-web/components/image-caption/image-caption.njk' import ImageCaption %}
+
+{% macro ArticleImage(params) %}
+  {% set macroClassName = "ds-article-image" %}
+  {% set additionalClasses = [] %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figure class="{{ classes }}" {{- params.attributes | safe }}>
+    {% if params.fullWidth %}
+      <div class="ds-full-width-element">
+        {{ params.imageHtml | safe }}
+      </div>
+    {% else %}
+      {{ params.imageHtml | safe }}
+    {% endif %}
+
+    {% if params.caption or params.author %}
+    {% 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

@@ -0,0 +1,6 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/image-caption/image-caption.scss"  as *;
+
+.ds-article-image {
+  margin: 0;
+}

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

@@ -8,7 +8,7 @@
 $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 +22,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 +48,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

@@ -0,0 +1,42 @@
+- 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: [ArticleBodyImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
+
+----
+
+# ArticleBodyImage
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | String | yes | | | Use to populate figure tag with image information |
+|fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## 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/article-body-image/article-body-image.njk' import ArticleBodyImage %}
+
+{{ ArticleBodyImage({
+  imageHtml: exampleArticleBodyImageHtml(),
+  fullWidth: true,
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
+```

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

@@ -0,0 +1,19 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
+{% set classes = [] %}
+
+{% macro ArticleBodyImage(params) %}
+  {% set componentClassName = "ds-article-image--body" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), 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, forcePx: params.forcePx  } %}
+
+  {% call ArticleImage(imageParams) %}{% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,8 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/article-image/article-image.scss" as *;
+
+.ds-article-image--body {
+  @include ds-spacing-layout(
+    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  );
+}

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

@@ -0,0 +1,40 @@
+- 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: [ArticleTopImage > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
+
+----
+
+# ArticleTopImage
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|imageHtml | String | yes | | | Use to populate figure tag with image information |
+|caption | String | no | | | Ex "Detta är en bildtext" |
+|imageType | String | no | | | Type of image. Ex "Foto" |
+|author | String | no | | | Ex "Paul Hansen" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## 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/article-top-image/article-top-image.njk' import ArticleTopImage %}
+
+{{ ArticleTopImage({
+  imageHtml: exampleArticleTopImageHtml(),
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Beatrice Lundborg",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/article-top-image/article-top-image";
+```

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

@@ -0,0 +1,19 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
+{% set classes = [] %}
+
+{% macro ArticleTopImage(params) %}
+  {% set componentClassName = "ds-article-image--top" %}
+  {% set additionalClasses = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), 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, forcePx: params.forcePx  } %}
+
+  {% call ArticleImage(imageParams) %}{% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,6 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/article-image/article-image.scss" as *;
+
+.ds-article-image--top {
+  @include ds-spacing-layout($ds-sl-gap-vertical-static-large, padding-bottom);
+}

package/components/badge/badge.scss

@@ -11,7 +11,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 +21,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

@@ -47,45 +47,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 +103,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 +114,7 @@
   }
 
   .ds-buddy-menu__campaign {
-    margin: 0 -#{ds-spacing-component(x4)};
+    margin: 0 -#{ds-spacing-component($ds-sc-x4)};
   }
 
   &.ds-buddy-menu--skola {

package/components/button/button.scss

@@ -41,7 +41,7 @@ $ds-btn__icon-size: 24px;
     border: $ds-btn-outlined__border-width solid;
     border-radius: ds-metrics-border-radius(x1);
     /* stylelint-disable-next-line */
-    padding: ds-spacing-component(x3, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing-component(x6, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
+    padding: ds-spacing-component($ds-sc-x3, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing-component($ds-sc-x6, rem) - ds-px-to-rem($ds-btn-outlined__border-width);
     position: relative;
     &::before {
       content: "";
@@ -80,9 +80,11 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn--small .ds-btn__inner {
   padding: ds-px-to-rem(
-      ds-spacing-component(x2) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x2) - $ds-btn-outlined__border-width
     )
-    ds-px-to-rem(ds-spacing-component(x5) - $ds-btn-outlined__border-width);
+    ds-px-to-rem(
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
+    );
 }
 
 @include ds-mq-only-breakpoint(mobile) {
@@ -103,7 +105,7 @@ $ds-btn__icon-size: 24px;
     display: flex;
     height: ds-px-to-rem($ds-btn__icon-size);
     width: ds-px-to-rem($ds-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 x2, rem);
+    margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
     svg {
       fill: currentColor;
     }
@@ -113,12 +115,12 @@ $ds-btn__icon-size: 24px;
 .ds-btn--icon-right {
   .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
     );
   }
   &.ds-btn--small .ds-btn__inner {
     padding-right: ds-px-to-rem(
-      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -127,15 +129,15 @@ $ds-btn__icon-size: 24px;
   .ds-btn__inner {
     flex-direction: row-reverse;
     padding-left: ds-px-to-rem(
-      ds-spacing-component(x5) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x5) - $ds-btn-outlined__border-width
     );
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0, rem);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0, rem);
     }
   }
   &.ds-btn--small .ds-btn__inner {
     padding-left: ds-px-to-rem(
-      ds-spacing-component(x4) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x4) - $ds-btn-outlined__border-width
     );
   }
 }
@@ -289,37 +291,37 @@ $ds-btn__icon-size: 24px;
 
 .ds-btn.ds-force-px {
   .ds-btn__inner {
-    padding: ds-spacing-component(x3) - $ds-btn-outlined__border-width
-      ds-spacing-component(x6) - $ds-btn-outlined__border-width;
+    padding: ds-spacing-component($ds-sc-x3) - $ds-btn-outlined__border-width
+      ds-spacing-component($ds-sc-x6) - $ds-btn-outlined__border-width;
     @include ds-typography($ds-typography-detailstandard-button, true);
   }
   &.ds-btn--icon-left .ds-btn__inner,
   &.ds-btn--icon-right .ds-btn__inner {
     .ds-icon {
-      margin: ds-spacing-component(0 0 0 x2);
+      margin: ds-spacing-component(0 0 0 $ds-sc-x2);
       height: $ds-btn__icon-size;
       width: $ds-btn__icon-size;
     }
   }
   &.ds-btn--icon-right .ds-btn__inner {
-    padding-right: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    padding-right: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
   }
   &.ds-btn--icon-left .ds-btn__inner {
-    padding-left: ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+    padding-left: ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
     .ds-icon {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
     }
   }
   &.ds-btn--small {
     .ds-btn__inner {
-      padding: ds-spacing-component(x2)-$ds-btn-outlined__border-width
-        ds-spacing-component(x5)-$ds-btn-outlined__border-width;
+      padding: ds-spacing-component($ds-sc-x2)-$ds-btn-outlined__border-width
+        ds-spacing-component($ds-sc-x5)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-right .ds-btn__inner {
-      padding-right: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+      padding-right: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
     }
     &.ds-btn--icon-left .ds-btn__inner {
-      padding-left: ds-spacing-component(x4)-$ds-btn-outlined__border-width;
+      padding-left: ds-spacing-component($ds-sc-x4)-$ds-btn-outlined__border-width;
     }
   }
 }