@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.21

package/components/image-caption/README.md

@@ -0,0 +1,38 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/image-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/image-caption)
+- Storybook: [ImageCaption > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-imagecaption-web--image-caption)
+
+----
+
+# ImageCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|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/image-caption/image-caption.njk' import ImageCaption %}
+
+{{ ImageCaption({
+  caption: "En bildtext",
+  imageType: "Foto",
+  author: "Paul Hansen",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/image-caption/image-caption";
+```

package/components/image-caption/image-caption.njk

@@ -0,0 +1,25 @@
+{% macro ImageCaption(params) %}
+  {% set macroClassName = "ds-image-caption" %}
+  {% set additionalClasses = [] %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
+
+  <figcaption class="{{ classes }}" {{- params.attributes | safe }}>
+    {% 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>
+{% endmacro %}

package/components/image-caption/image-caption.scss

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

package/components/list-item/list-item.scss

@@ -33,7 +33,7 @@ $ds-list-item__icon-size: 24px;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: ds-spacing-component(x4 outer);
+    padding: ds-spacing-component($ds-sc-x4 $ds-sc-outer);
     width: 100%;
 
     &::before {
@@ -99,17 +99,17 @@ $ds-list-item__icon-size: 24px;
       @include ds-typography($ds-typography-functional-body01regular, true);
     }
     color: $ds-color-text-primary-02;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   .ds-list-item__icon-left {
     display: inline-flex;
-    margin-right: ds-spacing-component(x4);
+    margin-right: ds-spacing-component($ds-sc-x4);
   }
 
   .ds-list-item__icon-right {
     display: inline-flex;
-    margin-left: ds-spacing-component(x4);
+    margin-left: ds-spacing-component($ds-sc-x4);
   }
 
   @include ds-hover() {
@@ -143,10 +143,10 @@ $ds-list-item__icon-size: 24px;
   &.ds-list-item--accordion-active + .ds-list-item__accordion-inner::after {
     content: "";
     height: ds-metrics-border-width(x1);
-    width: calc(100% - (ds-spacing-component(x4) * 2));
+    width: calc(100% - (ds-spacing-component($ds-sc-x4) * 2));
     background-color: $ds-color-border-primary;
     position: absolute;
-    left: ds-spacing-component(x4);
+    left: ds-spacing-component($ds-sc-x4);
     bottom: 0;
   }
 
@@ -240,13 +240,13 @@ $ds-list-item__icon-size: 24px;
   cursor: default;
   .ds-list-item__inner {
     display: flex;
-    padding: 0 0 0 ds-spacing-component(outer);
+    padding: 0 0 0 ds-spacing-component($ds-sc-outer);
   }
   .ds-list-item__titles {
-    padding: ds-spacing-component(x4) 0;
+    padding: ds-spacing-component($ds-sc-x4) 0;
   }
   .ds-btn-toggle {
-    margin: 0 ds-spacing-component(outer) 0 ds-spacing-component(x4);
+    margin: ds-spacing-component(0 $ds-sc-outer 0 $ds-sc-x4);
   }
   a {
     @include ds-link($ds-link-list);

package/components/quote/quote.scss

@@ -5,7 +5,7 @@
   color: $ds-color-text-primary;
   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
   );
   position: relative;
 
@@ -19,7 +19,7 @@
     height: 8px;
     color: $ds-color-component-brand;
     background: currentColor;
-    margin: ds-spacing-component(0 0 x2);
+    margin: ds-spacing-component(0 0 $ds-sc-x2);
   }
 
   &--culture .ds-quote__border {

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

@@ -1,9 +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/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../../assets/form-field/form-field.scss" as *;
 
@@ -21,7 +16,7 @@ $ds-radio-btn__icon-size: 24px;
     justify-content: center;
     color: $ds-color-text-primary;
     position: relative;
-    padding: ds-spacing-component(x3);
+    padding: ds-spacing-component($ds-sc-x3);
     &::before {
       content: "";
       position: absolute;
@@ -32,11 +27,11 @@ $ds-radio-btn__icon-size: 24px;
       bottom: 0;
     }
     .ds-radio-btn__text {
-      margin: ds-spacing-component(0 0 0 x2, rem);
+      margin: ds-spacing-component(0 0 0 $ds-sc-x2, rem);
       @include ds-typography($ds-typography-functional-body02regular);
       @at-root .ds-force-px#{&} {
         @include ds-typography($ds-typography-functional-body02regular, true);
-        margin: ds-spacing-component(0 0 0 x2);
+        margin: ds-spacing-component(0 0 0 $ds-sc-x2);
       }
     }
     .ds-radio-btn__icon {
@@ -100,13 +95,13 @@ $ds-radio-btn__icon-size: 24px;
     }
 
     .ds-form-field__error-message {
-      margin-top: ds-spacing-component(x1);
-      padding: 0 ds-spacing-component(x3) ds-spacing-component(x3);
+      margin-top: ds-spacing-component($ds-sc-x1);
+      padding: 0 ds-spacing-component($ds-sc-x3) ds-spacing-component($ds-sc-x3);
 
       .ds-icon {
-        margin: 0 ds-spacing-component(x2, rem) 0 ds-spacing-component(x8, rem);
+        margin: 0 ds-spacing-component($ds-sc-x2 0 $ds-sc-x8, rem);
         @at-root .ds-force-px#{&} {
-          margin: ds-spacing-component(0 x2 0 x8);
+          margin: ds-spacing-component(0 $ds-sc-x2 0 $ds-sc-x8);
         }
       }
     }
@@ -115,11 +110,11 @@ $ds-radio-btn__icon-size: 24px;
 
 .ds-radio-btn--condensed {
   .ds-radio-btn__inner {
-    padding: ds-spacing-component(x1);
+    padding: ds-spacing-component($ds-sc-x1);
   }
   &.ds-form-field__error .ds-form-field__error-message,
   .invalid .ds-form-field__error-message {
-    padding: 0 ds-spacing-component(x1) ds-spacing-component(x1);
+    padding: 0 ds-spacing-component($ds-sc-x1) ds-spacing-component($ds-sc-x1);
   }
 }
 

package/components/switch/switch.scss

@@ -12,13 +12,13 @@ $ds-switch__container-width: 44px;
   align-items: flex-start;
 
   .ds-switch__inner {
-    padding: ds-spacing-component(x3 0);
+    padding: ds-spacing-component($ds-sc-x3 0);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     .ds-switch__meta {
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
       color: $ds-color-text-primary-02;
       @include ds-typography($ds-typography-functional-body01regular);
       @at-root .ds-force-px#{&} {

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

@@ -1,10 +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/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -54,7 +48,7 @@ $ds-text-btn__icon-size: 24px;
   .ds-text-btn__inner {
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component(x3);
+    padding: ds-spacing-component($ds-sc-x3);
     position: relative;
     &::before {
       content: "";
@@ -95,6 +89,7 @@ $ds-text-btn__icon-size: 24px;
   &,
   & .ds-text-btn__inner {
     width: 100%;
+    box-sizing: border-box;
   }
 }
 
@@ -108,7 +103,7 @@ $ds-text-btn__icon-size: 24px;
     display: flex;
     height: ds-px-to-rem($ds-text-btn__icon-size);
     width: ds-px-to-rem($ds-text-btn__icon-size);
-    margin: ds-spacing-component(0 0 0 x2);
+    margin: ds-spacing-component(0 0 0 $ds-sc-x2);
     color: $ds-color-icon-primary;
     svg {
       fill: currentColor;
@@ -129,19 +124,19 @@ $ds-text-btn__icon-size: 24px;
 }
 
 .ds-text-btn--icon-left .ds-text-btn__inner {
-  padding: ds-spacing-component(x3 x3 x3 x2);
+  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
   flex-direction: row-reverse;
   .ds-icon {
-    margin: ds-spacing-component(0 x2 0 0);
+    margin: ds-spacing-component(0 $ds-sc-x2 0 0);
   }
 }
 
 .ds-text-btn--icon-right .ds-text-btn__inner {
-  padding: ds-spacing-component(x3 x2 x3 x3);
+  padding: ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3);
 }
 
 .ds-text-btn--condensed .ds-text-btn__inner {
-  padding: ds-spacing-component(x1);
+  padding: ds-spacing-component($ds-sc-x1);
 }
 
 @include ds-mq-only-breakpoint(mobile) {

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

@@ -1,10 +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/loading.scss" as *;
+@use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../spinner/spinner.scss" as *;
 
@@ -57,7 +51,7 @@ $ds-text-btn-toggle__icon-size: 24px;
     justify-content: center;
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component(x3 x3 x3 x2);
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
     position: relative;
     &::before {
       content: "";
@@ -74,7 +68,7 @@ $ds-text-btn-toggle__icon-size: 24px;
       display: flex;
       height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
       width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
-      margin: ds-spacing-component(0 x2 0 0);
+      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
       color: $ds-color-icon-primary;
       svg {
         fill: currentColor;
@@ -128,5 +122,5 @@ $ds-text-btn-toggle__icon-size: 24px;
 }
 
 .ds-text-btn-toggle--condensed .ds-text-btn-toggle__inner {
-  padding: ds-spacing-component(x1);
+  padding: ds-spacing-component($ds-sc-x1);
 }

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

@@ -1,15 +1,11 @@
-@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 "../../assets/form-field/form-field.scss" as *;
 @use "../../foundations/icons/icon.scss" as *;
 @use "../icon-button/icon-button.scss" as *;
 
 $ds-text-input-toggle-btn__width: 32px;
 $ds-text-input-toggle-btn__area: (
-  $ds-text-input-toggle-btn__width + ds-spacing-component(x2)
+  $ds-text-input-toggle-btn__width + ds-spacing-component($ds-sc-x2)
 );
 
 .ds-form-field__error {
@@ -19,7 +15,7 @@ $ds-text-input-toggle-btn__area: (
 }
 
 .ds-text-input {
-  padding-top: ds-px-to-rem(ds-spacing-component(x2));
+  padding-top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
   position: relative;
   color: $ds-color-text-primary;
 }
@@ -30,8 +26,8 @@ $ds-text-input-toggle-btn__area: (
   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-component(x4) - ds-metrics-border-width(x1))
-    ds-spacing-component(x4) - ds-metrics-border-width(x1);
+  /* stylelint-disable-next-line */
+  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1)) ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
   border: solid ds-metrics-border-width(x1) $ds-color-border-primary-02;
   border-radius: ds-metrics-border-radius(x1);
   margin: 0;
@@ -59,9 +55,9 @@ $ds-text-input-toggle-btn__area: (
 
   &:focus {
     padding: ds-px-to-rem(
-        ds-spacing-component(x4) - ds-metrics-border-width(x2)
+        ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2)
       )
-      ds-spacing-component(x4) - ds-metrics-border-width(x2);
+      ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
     border-color: $ds-color-border-primary-03;
     border-width: ds-metrics-border-width(x2);
 
@@ -87,18 +83,18 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-text-input__label {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component(x6));
-  left: ds-spacing-component(x4);
+  top: ds-px-to-rem(ds-spacing-component($ds-sc-x6));
+  left: ds-spacing-component($ds-sc-x4);
   z-index: 1;
   transition: font-size 0.1s ease-in, top 0.1s ease-in;
   @include ds-typography($ds-typography-functional-body02regular);
   &::before {
     content: "";
-    width: calc(100% + ds-spacing-component(x2));
-    left: -#{ds-spacing-component(x1)};
+    width: calc(100% + ds-spacing-component($ds-sc-x2));
+    left: -#{ds-spacing-component($ds-sc-x1)};
     height: ds-metrics-border-width(x1);
     position: absolute;
-    top: ds-px-to-rem(ds-spacing-component(x2));
+    top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
     z-index: -1;
     background-color: transparent; // for animation
     transition: background-color 0.2s ease-in-out;
@@ -107,8 +103,8 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-icon-btn.ds-text-input__password-toggle {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component(x5));
-  right: ds-spacing-component(x1);
+  top: ds-px-to-rem(ds-spacing-component($ds-sc-x5));
+  right: ds-spacing-component($ds-sc-x1);
   z-index: 1;
   min-width: 0;
   min-height: 0;
@@ -116,12 +112,12 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-force-px {
   &.ds-text-input {
-    padding-top: ds-spacing-component(x2);
+    padding-top: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing-component(x4) - ds-metrics-border-width(x1);
+    padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
@@ -140,19 +136,19 @@ $ds-text-input-toggle-btn__area: (
     }
 
     &:focus {
-      padding: ds-spacing-component(x4) - ds-metrics-border-width(x2);
+      padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
     }
   }
 
   .ds-text-input__label {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    top: ds-spacing-component(x6);
+    top: ds-spacing-component($ds-sc-x6);
     &::before {
-      top: ds-spacing-component(x2);
+      top: ds-spacing-component($ds-sc-x2);
     }
   }
 
   .ds-text-input__password-toggle {
-    top: ds-spacing-component(x5);
+    top: ds-spacing-component($ds-sc-x5);
   }
 }

package/components/thematic-break/thematic-break.scss

@@ -3,7 +3,7 @@
 .ds-thematic-break {
   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
   );
 
   hr {

package/components/video-caption/README.md

@@ -0,0 +1,37 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
+- Storybook (PROD): [VideoCaption > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-videocaption-web--video-caption)
+- Storybook (LATEST): [VideoCaption > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-videocaption-web--video-caption)
+
+----
+
+# VideoCaption
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|caption | String | no | | | |
+|duration | String | no | | | |
+|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/video-caption/video-caption.njk' import VideoCaption %}
+
+{{ VideoCaption({
+  caption: "Tre år har gått sedan terrordåden i Paris.",
+  duration: "47 sek"
+}) }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
+```

package/components/video-caption/video-caption.njk

@@ -0,0 +1,26 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro VideoCaption(params) %}
+  {%- set componentClassName = "ds-video-caption" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+  {%- if params.forcePx %}
+    {%- set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <figcaption class="{{ classes }}" {{- attributes | safe }}>
+    {%- if params.duration -%}
+      <span class="{{ componentClassName + '__duration'}}" aria-label="Videon är {{ params.duration }} lång">
+        {{- params.duration -}}
+      </span>
+    {%- endif %}
+    {% if params.caption -%}
+      <span class="{{ componentClassName + '__text'}}">
+        {{- params.caption -}}
+      </span>
+    {% endif -%}
+  </figcaption>
+{% endmacro %}

package/components/video-caption/video-caption.scss

@@ -0,0 +1,18 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-video-caption {
+  @include ds-typography($ds-typography-functional-body01regular);
+  color: $ds-color-text-primary;
+
+  .ds-video-caption__duration {
+    @include ds-typography($ds-typography-functional-body01bold);
+    margin-right: ds-spacing-component($ds-sc-x1);
+  }
+
+  @at-root .ds-force-px#{&} {
+    @include ds-typography($ds-typography-functional-body01regular, true);
+    .ds-video-caption__duration {
+      @include ds-typography($ds-typography-functional-body01bold, true);
+    }
+  }
+}

package/foundations/helpers/README-links.md

@@ -15,7 +15,7 @@
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/foundations/helpers/links.scss" as *;
+@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
 a {
   @include ds-link($ds-link-paragraph);

package/foundations/helpers/README-spacing.md

@@ -5,6 +5,21 @@
 
 # Spacing
 
+## use sass variable
+To avoid silent breaking changes use sass variable instead of raw token name.
+
+Ex: `margin: ds-spacing-component($ds-sc-x1 0 $ds-sc-x4)`
+
+Ex: `@include ds-spacing-layout($ds-sl-page-horizontal auto, padding-top)` 
+
+By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!
+
+By using sass variables for spacing tokens you will see which tokens are available through auto complete.
+
+Variables with `$ds-sc-` prefix are available for `ds-spacing-component()`
+
+Variables with `$ds-sl-` prefix are available for `ds-spacing-layout()`
+
 ## ds-spacing-component | function
 
 Use for space _inside_ a component (or atom).
@@ -22,8 +37,15 @@ Dynamic spacings are static and are _not_ wrapped in any media query, the functi
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
-.test {
-  margin: ds-spacing-component(x1 x2 0, px, true);
+.test-1 {
+  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0);
+}
+
+// Outputs:
+4px 8px 0
+
+.test-2 {
+  margin: ds-spacing-component($ds-sc-x1 $ds-sc-x2 0, px, true);
 }
 
 // Outputs:
@@ -41,31 +63,47 @@ This mixin returns `property: value` wrapped in media query.
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |units | String | yes | one or more spacing tokens or `auto` or `0` | | Ex. 0 page-horizontal  |
-|sizeUnit | String | no | px, rem, em | px | |
 |property | String | no | padding, margin | padding | Use padding for layout spacing to avoid collapsing margins|
+|sizeUnit | String | no | px, rem, em | px | |
 |negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |
 
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
 
-.test {
+.test-1 {
+  @include ds-spacing-layout($ds-sl-page-top-small, padding-top);
+}
+
+// Outputs:
+@media (max-width: 1024px) {
+  .test-1 {
+    padding-top: 16px;
+  }
+}
+@media (min-width: 1025px) {
+  .test-1 {
+    padding-top: 32px;
+  }
+}
+
+.test-2 {
   @include ds-spacing-layout(
-    0 page-horizontal,
-    px,
+    0 $ds-sl-page-horizontal,
     margin,
+    px,
     true
   );
 }
 
 // Outputs:
 @media (max-width: 1024px) {
-  .test {
-      margin: 0 -16px;
+  .test-2 {
+    margin: 0 -16px;
   }
 }
 @media (min-width: 1025px) {
-  .test {
-      margin: 0 -32px;
+  .test-2 {
+    margin: 0 -32px;
   }
 }
 ```