From c7cafc60332307e00dcb70204c3980d5b3bf9a11 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Sun, 21 Jul 2019 23:53:35 +0200
Subject: [PATCH] fix: #space fixup due to `.dnb-core-style` and css margins
 reset

---
 .../dnb-ui-lib/src/components/space/Space.js  |   7 +-
 .../__snapshots__/Space.test.js.snap          | 762 ++++++++++--------
 ...h-the-2-5-spacing-margins-1-896d5.snap.png | Bin 4856 -> 4959 bytes
 .../src/components/space/style/_space.scss    | 151 ++--
 .../dnb-ui-lib/stories/components/Space.js    |   2 +-
 5 files changed, 531 insertions(+), 391 deletions(-)

diff --git a/packages/dnb-ui-lib/src/components/space/Space.js b/packages/dnb-ui-lib/src/components/space/Space.js
index c6f180790d7..1c6fdb71fa3 100644
--- a/packages/dnb-ui-lib/src/components/space/Space.js
+++ b/packages/dnb-ui-lib/src/components/space/Space.js
@@ -7,7 +7,6 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
-  isTrue,
   extend,
   extendPropsWithContext,
   registerElement,
@@ -23,7 +22,6 @@ const renderProps = {
 export const propTypes = {
   id: PropTypes.string,
   element: PropTypes.string,
-  inline: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -45,7 +43,6 @@ export const propTypes = {
 export const defaultProps = {
   id: null,
   element: 'div',
-  inline: false,
   top: null,
   right: null,
   bottom: null,
@@ -93,7 +90,6 @@ export default class Space extends PureComponent {
 
     let {
       element,
-      inline,
       top,
       right,
       bottom,
@@ -112,7 +108,6 @@ export default class Space extends PureComponent {
     const params = {
       className: classnames(
         'dnb-space',
-        isTrue(inline) && 'dnb-space--inline',
         createSpacingClasses({ top, right, bottom, left }),
         className,
         _className
@@ -140,6 +135,8 @@ export default class Space extends PureComponent {
       }
     })
 
+    // const Element = element
+
     return (
       <Context.Provider value={context}>
         <Element element={element} {...params}>
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
index 78db1852418..d7342433bf5 100644
--- a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/Space.test.js.snap
@@ -7,7 +7,6 @@ exports[`Space component have to match snapshot 1`] = `
   className="className"
   element="div"
   id="space"
-  inline="inline"
   left="left"
   render_content={[Function]}
   right="right"
@@ -93,388 +92,493 @@ exports[`Space scss have to match snapshot 1`] = `
  * Space component
  *
  */
-.dnb-space--inline,
 .dnb-core-style .dnb-space--inline {
   display: inline-block; }
 
-.dnb-space__top--x-small,
 .dnb-core-style .dnb-space__top--x-small {
-  margin-top: var(--spacing-x-small); }
+  margin-top: 0.5rem; }
 
-.dnb-space__top--small,
 .dnb-core-style .dnb-space__top--small {
-  margin-top: var(--spacing-small); }
+  margin-top: 1rem; }
 
-.dnb-space__top--medium,
 .dnb-core-style .dnb-space__top--medium {
-  margin-top: var(--spacing-medium); }
+  margin-top: 1.5rem; }
 
-.dnb-space__top--large,
 .dnb-core-style .dnb-space__top--large {
-  margin-top: var(--spacing-large); }
+  margin-top: 2rem; }
 
-.dnb-space__top--large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-small,
-.dnb-core-style .dnb-space__top--large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-small {
-  margin-top: calc( var(--spacing-large) + var(--spacing-x-small)); }
+.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
+  margin-top: 2.5rem; }
 
-.dnb-space__top--x-large,
 .dnb-core-style .dnb-space__top--x-large {
-  margin-top: var(--spacing-x-large); }
+  margin-top: 3rem; }
 
-.dnb-space__top--xx-large,
 .dnb-core-style .dnb-space__top--xx-large {
-  margin-top: var(--spacing-xx-large); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-small,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--small,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--medium,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--medium {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--large,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--large {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-small,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__top--xx-large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-large,
-.dnb-core-style .dnb-space__top--xx-large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-large {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__top--xx-large-x2,
+  margin-top: 3.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small {
+  margin-top: 4rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small {
+  margin-top: 4.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium {
+  margin-top: 5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large {
+  margin-top: 5.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
+  margin-top: 6rem; }
+
+.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large {
+  margin-top: 6.5rem; }
+
 .dnb-core-style .dnb-space__top--xx-large-x2 {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-small,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--small,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--medium,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--medium {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--large,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--large {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--large.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-small,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--large.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-small {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__top--xx-large-x2.dnb-space__top, .dnb-space__top .dnb-core-style .dnb-space__top--x-large,
-.dnb-core-style .dnb-space__top--xx-large-x2.dnb-space__top,
-.dnb-core-style .dnb-space__top .dnb-core-style .dnb-space__top--x-large {
-  margin-top: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__right--x-small,
+  margin-top: 7rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small {
+  margin-top: 7.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small {
+  margin-top: 8rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium {
+  margin-top: 8.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large {
+  margin-top: 9rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small {
+  margin-top: 9.5rem; }
+
+.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large {
+  margin-top: 10rem; }
+
 .dnb-core-style .dnb-space__right--x-small {
-  margin-right: var(--spacing-x-small); }
+  margin-right: 0.5rem; }
 
-.dnb-space__right--small,
 .dnb-core-style .dnb-space__right--small {
-  margin-right: var(--spacing-small); }
+  margin-right: 1rem; }
 
-.dnb-space__right--medium,
 .dnb-core-style .dnb-space__right--medium {
-  margin-right: var(--spacing-medium); }
+  margin-right: 1.5rem; }
 
-.dnb-space__right--large,
 .dnb-core-style .dnb-space__right--large {
-  margin-right: var(--spacing-large); }
+  margin-right: 2rem; }
 
-.dnb-space__right--large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-small,
-.dnb-core-style .dnb-space__right--large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-small {
-  margin-right: calc( var(--spacing-large) + var(--spacing-x-small)); }
+.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
+  margin-right: 2.5rem; }
 
-.dnb-space__right--x-large,
 .dnb-core-style .dnb-space__right--x-large {
-  margin-right: var(--spacing-x-large); }
+  margin-right: 3rem; }
 
-.dnb-space__right--xx-large,
 .dnb-core-style .dnb-space__right--xx-large {
-  margin-right: var(--spacing-xx-large); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-small,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--small,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--medium,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--medium {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--large,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--large {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-small,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__right--xx-large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-large,
-.dnb-core-style .dnb-space__right--xx-large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-large {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__right--xx-large-x2,
+  margin-right: 3.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small {
+  margin-right: 4rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small {
+  margin-right: 4.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium {
+  margin-right: 5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large {
+  margin-right: 5.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
+  margin-right: 6rem; }
+
+.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large {
+  margin-right: 6.5rem; }
+
 .dnb-core-style .dnb-space__right--xx-large-x2 {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-small,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--small,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--medium,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--medium {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--large,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--large {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--large.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-small,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--large.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-small {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__right--xx-large-x2.dnb-space__right, .dnb-space__right .dnb-core-style .dnb-space__right--x-large,
-.dnb-core-style .dnb-space__right--xx-large-x2.dnb-space__right,
-.dnb-core-style .dnb-space__right .dnb-core-style .dnb-space__right--x-large {
-  margin-right: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__bottom--x-small,
+  margin-right: 7rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small {
+  margin-right: 7.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small {
+  margin-right: 8rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium {
+  margin-right: 8.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large {
+  margin-right: 9rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small {
+  margin-right: 9.5rem; }
+
+.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large {
+  margin-right: 10rem; }
+
 .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: var(--spacing-x-small); }
+  margin-bottom: 0.5rem; }
 
-.dnb-space__bottom--small,
 .dnb-core-style .dnb-space__bottom--small {
-  margin-bottom: var(--spacing-small); }
+  margin-bottom: 1rem; }
 
-.dnb-space__bottom--medium,
 .dnb-core-style .dnb-space__bottom--medium {
-  margin-bottom: var(--spacing-medium); }
+  margin-bottom: 1.5rem; }
 
-.dnb-space__bottom--large,
 .dnb-core-style .dnb-space__bottom--large {
-  margin-bottom: var(--spacing-large); }
+  margin-bottom: 2rem; }
 
-.dnb-space__bottom--large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small,
-.dnb-core-style .dnb-space__bottom--large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: calc( var(--spacing-large) + var(--spacing-x-small)); }
+.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
+  margin-bottom: 2.5rem; }
 
-.dnb-space__bottom--x-large,
 .dnb-core-style .dnb-space__bottom--x-large {
-  margin-bottom: var(--spacing-x-large); }
+  margin-bottom: 3rem; }
 
-.dnb-space__bottom--xx-large,
 .dnb-core-style .dnb-space__bottom--xx-large {
-  margin-bottom: var(--spacing-xx-large); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--small,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--medium,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--medium {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__bottom--xx-large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-large,
-.dnb-core-style .dnb-space__bottom--xx-large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-large {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__bottom--xx-large-x2,
+  margin-bottom: 3.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small {
+  margin-bottom: 4rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small {
+  margin-bottom: 4.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium {
+  margin-bottom: 5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large {
+  margin-bottom: 5.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
+  margin-bottom: 6rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large {
+  margin-bottom: 6.5rem; }
+
 .dnb-core-style .dnb-space__bottom--xx-large-x2 {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--small,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--medium,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--medium {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--large.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-small {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__bottom--xx-large-x2.dnb-space__bottom, .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-large,
-.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-space__bottom,
-.dnb-core-style .dnb-space__bottom .dnb-core-style .dnb-space__bottom--x-large {
-  margin-bottom: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__left--x-small,
+  margin-bottom: 7rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small {
+  margin-bottom: 7.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small {
+  margin-bottom: 8rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium {
+  margin-bottom: 8.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large {
+  margin-bottom: 9rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small {
+  margin-bottom: 9.5rem; }
+
+.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large {
+  margin-bottom: 10rem; }
+
 .dnb-core-style .dnb-space__left--x-small {
-  margin-left: var(--spacing-x-small); }
+  margin-left: 0.5rem; }
 
-.dnb-space__left--small,
 .dnb-core-style .dnb-space__left--small {
-  margin-left: var(--spacing-small); }
+  margin-left: 1rem; }
 
-.dnb-space__left--medium,
 .dnb-core-style .dnb-space__left--medium {
-  margin-left: var(--spacing-medium); }
+  margin-left: 1.5rem; }
 
-.dnb-space__left--large,
 .dnb-core-style .dnb-space__left--large {
-  margin-left: var(--spacing-large); }
+  margin-left: 2rem; }
 
-.dnb-space__left--large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-small,
-.dnb-core-style .dnb-space__left--large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-small {
-  margin-left: calc( var(--spacing-large) + var(--spacing-x-small)); }
+.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
+  margin-left: 2.5rem; }
 
-.dnb-space__left--x-large,
 .dnb-core-style .dnb-space__left--x-large {
-  margin-left: var(--spacing-x-large); }
+  margin-left: 3rem; }
 
-.dnb-space__left--xx-large,
 .dnb-core-style .dnb-space__left--xx-large {
-  margin-left: var(--spacing-xx-large); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-small,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--small,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--medium,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--medium {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--large,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--large {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-small,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__left--xx-large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-large,
-.dnb-core-style .dnb-space__left--xx-large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-large {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-x-large)); }
-
-.dnb-space__left--xx-large-x2,
+  margin-left: 3.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small {
+  margin-left: 4rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small {
+  margin-left: 4.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium {
+  margin-left: 5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large {
+  margin-left: 5.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
+  margin-left: 6rem; }
+
+.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large {
+  margin-left: 6.5rem; }
+
 .dnb-core-style .dnb-space__left--xx-large-x2 {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-small,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-small)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--small,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-small)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--medium,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--medium {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-medium)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--large,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--large {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--large.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-small,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--large.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-small {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-x-small)); }
-
-.dnb-space__left--xx-large-x2.dnb-space__left, .dnb-space__left .dnb-core-style .dnb-space__left--x-large,
-.dnb-core-style .dnb-space__left--xx-large-x2.dnb-space__left,
-.dnb-core-style .dnb-space__left .dnb-core-style .dnb-space__left--x-large {
-  margin-left: calc( var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large)); }
+  margin-left: 7rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small {
+  margin-left: 7.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small {
+  margin-left: 8rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium {
+  margin-left: 8.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large {
+  margin-left: 9rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small {
+  margin-left: 9.5rem; }
+
+.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large {
+  margin-left: 10rem; }
+
+/* stylelint-disable */
+.dnb-space--inline {
+  display: inline-block; }
+
+.dnb-space__top--x-small {
+  margin-top: 0.5rem; }
+
+.dnb-space__top--small {
+  margin-top: 1rem; }
+
+.dnb-space__top--medium {
+  margin-top: 1.5rem; }
+
+.dnb-space__top--large {
+  margin-top: 2rem; }
+
+.dnb-space__top--large.dnb-space__top--x-small {
+  margin-top: 2.5rem; }
+
+.dnb-space__top--x-large {
+  margin-top: 3rem; }
+
+.dnb-space__top--xx-large {
+  margin-top: 3.5rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--x-small {
+  margin-top: 4rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--small {
+  margin-top: 4.5rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--medium {
+  margin-top: 5rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--large {
+  margin-top: 5.5rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small {
+  margin-top: 6rem; }
+
+.dnb-space__top--xx-large.dnb-space__top--x-large {
+  margin-top: 6.5rem; }
+
+.dnb-space__top--xx-large-x2 {
+  margin-top: 7rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--x-small {
+  margin-top: 7.5rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--small {
+  margin-top: 8rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--medium {
+  margin-top: 8.5rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--large {
+  margin-top: 9rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small {
+  margin-top: 9.5rem; }
+
+.dnb-space__top--xx-large-x2.dnb-space__top--x-large {
+  margin-top: 10rem; }
+
+.dnb-space__right--x-small {
+  margin-right: 0.5rem; }
+
+.dnb-space__right--small {
+  margin-right: 1rem; }
+
+.dnb-space__right--medium {
+  margin-right: 1.5rem; }
+
+.dnb-space__right--large {
+  margin-right: 2rem; }
+
+.dnb-space__right--large.dnb-space__right--x-small {
+  margin-right: 2.5rem; }
+
+.dnb-space__right--x-large {
+  margin-right: 3rem; }
+
+.dnb-space__right--xx-large {
+  margin-right: 3.5rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--x-small {
+  margin-right: 4rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--small {
+  margin-right: 4.5rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--medium {
+  margin-right: 5rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--large {
+  margin-right: 5.5rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small {
+  margin-right: 6rem; }
+
+.dnb-space__right--xx-large.dnb-space__right--x-large {
+  margin-right: 6.5rem; }
+
+.dnb-space__right--xx-large-x2 {
+  margin-right: 7rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--x-small {
+  margin-right: 7.5rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--small {
+  margin-right: 8rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--medium {
+  margin-right: 8.5rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--large {
+  margin-right: 9rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small {
+  margin-right: 9.5rem; }
+
+.dnb-space__right--xx-large-x2.dnb-space__right--x-large {
+  margin-right: 10rem; }
+
+.dnb-space__bottom--x-small {
+  margin-bottom: 0.5rem; }
+
+.dnb-space__bottom--small {
+  margin-bottom: 1rem; }
+
+.dnb-space__bottom--medium {
+  margin-bottom: 1.5rem; }
+
+.dnb-space__bottom--large {
+  margin-bottom: 2rem; }
+
+.dnb-space__bottom--large.dnb-space__bottom--x-small {
+  margin-bottom: 2.5rem; }
+
+.dnb-space__bottom--x-large {
+  margin-bottom: 3rem; }
+
+.dnb-space__bottom--xx-large {
+  margin-bottom: 3.5rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--x-small {
+  margin-bottom: 4rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--small {
+  margin-bottom: 4.5rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--medium {
+  margin-bottom: 5rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--large {
+  margin-bottom: 5.5rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small {
+  margin-bottom: 6rem; }
+
+.dnb-space__bottom--xx-large.dnb-space__bottom--x-large {
+  margin-bottom: 6.5rem; }
+
+.dnb-space__bottom--xx-large-x2 {
+  margin-bottom: 7rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small {
+  margin-bottom: 7.5rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--small {
+  margin-bottom: 8rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium {
+  margin-bottom: 8.5rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large {
+  margin-bottom: 9rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small {
+  margin-bottom: 9.5rem; }
+
+.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large {
+  margin-bottom: 10rem; }
+
+.dnb-space__left--x-small {
+  margin-left: 0.5rem; }
+
+.dnb-space__left--small {
+  margin-left: 1rem; }
+
+.dnb-space__left--medium {
+  margin-left: 1.5rem; }
+
+.dnb-space__left--large {
+  margin-left: 2rem; }
+
+.dnb-space__left--large.dnb-space__left--x-small {
+  margin-left: 2.5rem; }
+
+.dnb-space__left--x-large {
+  margin-left: 3rem; }
+
+.dnb-space__left--xx-large {
+  margin-left: 3.5rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--x-small {
+  margin-left: 4rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--small {
+  margin-left: 4.5rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--medium {
+  margin-left: 5rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--large {
+  margin-left: 5.5rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small {
+  margin-left: 6rem; }
+
+.dnb-space__left--xx-large.dnb-space__left--x-large {
+  margin-left: 6.5rem; }
+
+.dnb-space__left--xx-large-x2 {
+  margin-left: 7rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--x-small {
+  margin-left: 7.5rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--small {
+  margin-left: 8rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--medium {
+  margin-left: 8.5rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--large {
+  margin-left: 9rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small {
+  margin-left: 9.5rem; }
+
+.dnb-space__left--xx-large-x2.dnb-space__left--x-large {
+  margin-left: 10rem; }
+
+/* stylelint-enable */
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-2-5-spacing-margins-1-896d5.snap.png b/packages/dnb-ui-lib/src/components/space/__tests__/__snapshots__/space-screenshot-test-js-space-screenshot-have-to-match-the-2-5-spacing-margins-1-896d5.snap.png
index 0866bdf8bf0d8a35ce5d2f4458d4fd54824ba47e..c85f5351053db5a08dc4a88c1a16cfb798e14e40 100644
GIT binary patch
literal 4959
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

literal 4856
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

diff --git a/packages/dnb-ui-lib/src/components/space/style/_space.scss b/packages/dnb-ui-lib/src/components/space/style/_space.scss
index 6596d1152e9..5efcfeb620e 100644
--- a/packages/dnb-ui-lib/src/components/space/style/_space.scss
+++ b/packages/dnb-ui-lib/src/components/space/style/_space.scss
@@ -6,122 +6,141 @@
 @mixin direction($direction) {
   // 0.5rem
   &--x-small {
-    margin-#{$direction}: var(--spacing-x-small);
+    margin-#{$direction}: 0.5rem;
+    // margin-#{$direction}: var(--spacing-x-small);
   }
   // 1rem
   &--small {
-    margin-#{$direction}: var(--spacing-small);
+    margin-#{$direction}: 1rem;
+    // margin-#{$direction}: var(--spacing-small);
   }
   // 1.5rem
   &--medium {
-    margin-#{$direction}: var(--spacing-medium);
+    margin-#{$direction}: 1.5rem;
+    // margin-#{$direction}: var(--spacing-medium);
   }
   // 2rem
   &--large {
-    margin-#{$direction}: var(--spacing-large);
+    margin-#{$direction}: 2rem;
+    // margin-#{$direction}: var(--spacing-large);
   }
   // 2.5rem
   &--large#{&}--x-small {
-    margin-#{$direction}: calc(
-      var(--spacing-large) + var(--spacing-x-small)
-    );
+    margin-#{$direction}: 2.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-large) + var(--spacing-x-small)
+    // );
   }
   // 3rem
   &--x-large {
-    margin-#{$direction}: var(--spacing-x-large);
+    margin-#{$direction}: 3rem;
+    // margin-#{$direction}: var(--spacing-x-large);
   }
   // 3.5rem
   &--xx-large {
-    margin-#{$direction}: var(--spacing-xx-large);
+    margin-#{$direction}: 3.5rem;
+    // margin-#{$direction}: var(--spacing-xx-large);
   }
   // 4rem
   &--xx-large#{&}--x-small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-x-small)
-    );
+    margin-#{$direction}: 4rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-x-small)
+    // );
   }
   // 4.5rem
   &--xx-large#{&}--small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-small)
-    );
+    margin-#{$direction}: 4.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-small)
+    // );
   }
   // 5rem
   &--xx-large#{&}--medium {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-medium)
-    );
+    margin-#{$direction}: 5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-medium)
+    // );
   }
   // 5.5rem
   &--xx-large#{&}--large {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-large)
-    );
+    margin-#{$direction}: 5.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-large)
+    // );
   }
   // 6rem
   &--xx-large#{&}--large#{&}--x-small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-large) +
-        var(--spacing-x-small)
-    );
+    margin-#{$direction}: 6rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-large) +
+    //     var(--spacing-x-small)
+    // );
   }
   // 6.5rem
   &--xx-large#{&}--x-large {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-x-large)
-    );
+    margin-#{$direction}: 6.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-x-large)
+    // );
   }
   // 7rem
   &--xx-large-x2 {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large)
-    );
+    margin-#{$direction}: 7rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large)
+    // );
   }
   // 7.5rem
   &--xx-large-x2#{&}--x-small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-x-small)
-    );
+    margin-#{$direction}: 7.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-x-small)
+    // );
   }
   // 8rem
   &--xx-large-x2#{&}--small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-small)
-    );
+    margin-#{$direction}: 8rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-small)
+    // );
   }
   // 8.5rem
   &--xx-large-x2#{&}--medium {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-medium)
-    );
+    margin-#{$direction}: 8.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-medium)
+    // );
   }
   // 9rem
   &--xx-large-x2#{&}--large {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-large)
-    );
+    margin-#{$direction}: 9rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-large)
+    // );
   }
   // 9.5rem
   &--xx-large-x2#{&}--large#{&}--x-small {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-large) + var(--spacing-x-small)
-    );
+    margin-#{$direction}: 9.5rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-large) + var(--spacing-x-small)
+    // );
   }
   // 10rem
   &--xx-large-x2#{&}--x-large {
-    margin-#{$direction}: calc(
-      var(--spacing-xx-large) + var(--spacing-xx-large) +
-        var(--spacing-x-large)
-    );
+    margin-#{$direction}: 10rem;
+    // margin-#{$direction}: calc(
+    //   var(--spacing-xx-large) + var(--spacing-xx-large) +
+    //     var(--spacing-x-large)
+    // );
   }
 }
 
-.dnb-space,
 .dnb-core-style .dnb-space {
   &--inline {
     display: inline-block;
@@ -139,3 +158,23 @@
     @include direction(left);
   }
 }
+
+/* stylelint-disable */
+.dnb-space {
+  &--inline {
+    display: inline-block;
+  }
+  &__top {
+    @include direction(top);
+  }
+  &__right {
+    @include direction(right);
+  }
+  &__bottom {
+    @include direction(bottom);
+  }
+  &__left {
+    @include direction(left);
+  }
+}
+/* stylelint-enable */
diff --git a/packages/dnb-ui-lib/stories/components/Space.js b/packages/dnb-ui-lib/stories/components/Space.js
index f986918f0aa..f3707f56be3 100644
--- a/packages/dnb-ui-lib/stories/components/Space.js
+++ b/packages/dnb-ui-lib/stories/components/Space.js
@@ -25,7 +25,7 @@ export default [
         <CustomStyle>
           <VisualSpace>
             {/* <MagicBox top="medium" /> */}
-            <Space top="medium">
+            <Space top="large x-small">
               <Input label="Input:" />
             </Space>
           </VisualSpace>