feat(eds-core-react, eds-tokens)!: add spacing foundation variables, fix names in old variables and remove density specific spacing variables. eds-tokens package is now a peerDependency in eds-core-react to support using the new variables. (#4200)

Author: torleifhalseth

.eslintrc.js

@@ -167,6 +167,7 @@ module.exports = {
       files: [
         '**/playwright.config.ts',
         '**/vite.config.ts',
+        '**/vite.*.config.ts',
         '**/vitest.config.ts',
       ],
       rules: {

packages/eds-core-react/README.md

@@ -8,7 +8,7 @@ Read the [changelog](https://github.com/equinor/design-system/blob/main/packages
 ## Installation
 
 ```sh
-npm install @equinor/eds-core-react styled-components
+npm install @equinor/eds-core-react @equinor/eds-tokens styled-components 
 ```
 If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
 ```sh

packages/eds-core-react/package.json

@@ -95,7 +95,8 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "styled-components": "^6"
+    "styled-components": "^6",
+    "@equinor/eds-tokens": "^2"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",

packages/eds-core-react/src/components/Spacing/Spacing.stories.css

@@ -1,271 +1,80 @@
 /* Demo-specific styles for Spacing stories */
 
-/* Container styles */
-.spacing-demo-container {
+.flex {
   display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.spacing-demo-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-
-.spacing-demo-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-width: 120px;
 }
 
-.spacing-demo-density-section {
-  display: flex;
+.flex-col {
   flex-direction: column;
-  gap: 2rem;
 }
 
-.spacing-demo-density-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.spacing-demo-flex {
-  display: flex;
+.flex-row {
   flex-direction: row;
 }
 
-/* Typography styles */
-.spacing-demo-heading {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-  font-weight: 600;
+.flex-wrap {
+  flex-wrap: wrap;
 }
 
-.spacing-demo-subheading {
-  margin: 0 0 0.75rem 0;
-  font-size: 1.125rem;
-  font-weight: 600;
+.items-start {
+  align-items: flex-start;
 }
 
-.spacing-demo-label {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.875rem;
-  color: var(--eds-color-text-neutral-subtle);
+/* Margin-bottom utilities (4px grid) */
+.mb-2 {
+  margin-bottom: 0.5rem; /* 8px */
 }
 
-.spacing-demo-text {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: var(--eds-color-text-neutral-subtle);
+.mb-3 {
+  margin-bottom: 0.75rem; /* 12px */
 }
 
-/* Box demo styles */
-.spacing-demo-box-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.spacing-demo-box-container-column {
-  display: flex;
-  flex-direction: column;
+.mb-4 {
+  margin-bottom: 1rem; /* 16px */
 }
 
 .spacing-demo-box {
-  width: 40px;
-  height: 40px;
-  background-color: var(--eds-color-bg-accent-fill-emphasis-default);
-  border: 1px solid var(--eds-color-border-accent-strong);
-}
-
-.spacing-demo-box-horizontal {
-  width: 100%;
-  height: 40px;
-  background-color: var(--eds-color-bg-accent-fill-emphasis-default);
-  border: 1px solid var(--eds-color-border-accent-strong);
-}
-
-/* Inset demo styles */
-.spacing-demo-inset {
   display: inline-block;
-  background-color: var(--eds-color-bg-neutral-fill-muted-default);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  color: var(--eds-color-text-neutral-strong);
+  background-color: var(--eds-color-bg-accent-fill-muted-default);
+  border: 1px solid var(--eds-color-border-accent-medium);
+  color: var(--eds-color-text-accent-strong);
   text-align: center;
   white-space: nowrap;
+  width: fit-content;
+  max-width: 100%;
 }
 
-/* Border radius demo styles */
-.spacing-demo-border-none,
-.spacing-demo-border-rounded,
-.spacing-demo-border-pill {
-  display: inline-block;
-  padding: 0.75rem 1.5rem;
-  background-color: var(--eds-color-bg-neutral-fill-muted-default);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  color: var(--eds-color-text-neutral-strong);
-  text-align: center;
-  font-size: 0.875rem;
-}
-
-/* Icon demo styles */
-.spacing-demo-icon {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.size-32 {
+  width: 32px;
+  height: 32px;
 }
 
-.spacing-demo-icon-box {
-  width: 1em;
-  height: 1em;
-  background-color: var(--eds-color-bg-accent-fill-emphasis-default);
-  border: 1px solid var(--eds-color-border-accent-strong);
-  flex-shrink: 0;
-}
-
-.spacing-demo-icon-xs {
-  font-size: 0.75rem;
-}
-
-.spacing-demo-icon-sm {
-  font-size: 0.875rem;
-}
-
-.spacing-demo-icon-md {
-  font-size: 1rem;
-}
-
-.spacing-demo-icon-lg {
-  font-size: 1.125rem;
-}
-
-.spacing-demo-icon-xl {
-  font-size: 1.25rem;
-}
-
-.spacing-demo-icon-2xl {
-  font-size: 1.5rem;
+.spacing-demo-button-primary,
+.spacing-demo-button-secondary {
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
 }
 
-/* Button demo styles */
 .spacing-demo-button-primary {
   background-color: var(--eds-color-bg-accent-fill-emphasis-default);
   color: var(--eds-color-text-accent-strong-on-emphasis);
-  border: 1px solid var(--eds-color-border-accent-strong);
-  cursor: pointer;
+  border-color: var(--eds-color-border-accent-strong);
 }
 
 .spacing-demo-button-secondary {
   background-color: var(--eds-color-bg-neutral-surface);
   color: var(--eds-color-text-neutral-strong);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  cursor: pointer;
+  border-color: var(--eds-color-border-neutral-medium);
 }
 
 .spacing-demo-button-primary:hover,
 .spacing-demo-button-secondary:hover {
   opacity: 0.9;
 }
 
-/* Card demo styles */
 .spacing-demo-card {
   background-color: var(--eds-color-bg-neutral-surface);
   border: 1px solid var(--eds-color-border-neutral-medium);
   max-width: 400px;
 }
-
-.spacing-demo-card-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.spacing-demo-card-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--eds-color-text-neutral-strong);
-}
-
-.spacing-demo-card-text {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--eds-color-text-neutral-subtle);
-}
-
-.spacing-demo-card-actions {
-  display: flex;
-  flex-direction: row;
-}
-
-/* Form demo styles */
-.spacing-demo-form {
-  display: flex;
-  flex-direction: column;
-  max-width: 300px;
-}
-
-.spacing-demo-form-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.spacing-demo-form-label {
-  margin: 0 0 0.25rem 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--eds-color-text-neutral-strong);
-}
-
-.spacing-demo-form-input {
-  background-color: var(--eds-color-bg-input);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  color: var(--eds-color-text-neutral-strong);
-  font-size: 0.875rem;
-  outline: none;
-}
-
-.spacing-demo-form-input:focus {
-  border-color: var(--eds-color-border-focus);
-}
-
-.spacing-demo-form-submit {
-  background-color: var(--eds-color-bg-accent-fill-emphasis-default);
-  color: var(--eds-color-text-accent-strong-on-emphasis);
-  border: 1px solid var(--eds-color-border-accent-strong);
-  cursor: pointer;
-}
-
-.spacing-demo-form-submit:hover {
-  opacity: 0.9;
-}
-
-/* Navigation demo styles */
-.spacing-demo-nav {
-  background-color: var(--eds-color-bg-neutral-surface);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  max-width: 200px;
-}
-
-.spacing-demo-nav-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-}
-
-.spacing-demo-nav-item {
-  display: block;
-  padding: 0.5rem;
-  color: var(--eds-color-text-link);
-  text-decoration: none;
-  font-size: 0.875rem;
-}
-
-.spacing-demo-nav-item:hover {
-  background-color: var(--eds-color-bg-neutral-fill-muted-default);
-}