feat(eds-tokens): generate spacing and typography variables (#4250)

Author: torleifhalseth

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 @equinor/eds-tokens styled-components 
+npm install @equinor/eds-core-react styled-components 
 ```
 If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
 ```sh

packages/eds-core-react/package.json

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

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

@@ -1,80 +1,129 @@
 /* Demo-specific styles for Spacing stories */
 
-.flex {
+.spacing-demo-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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;
+  min-width: 80px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.spacing-demo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.spacing-demo-row {
   display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: flex-start;
 }
 
-.flex-col {
+.spacing-demo-item {
+  display: flex;
   flex-direction: column;
+  gap: 0.5rem;
 }
 
-.flex-row {
-  flex-direction: row;
+.spacing-demo-label {
+  font-size: 0.875rem;
+  color: var(--eds-color-text-neutral-strong);
+  font-family: monospace;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
+.spacing-demo-section {
+  margin-bottom: 3rem;
 }
 
-.items-start {
-  align-items: flex-start;
+/* Selectable space examples */
+.selectable-space-box {
+  padding: var(--eds-selectable-space-vertical)
+    var(--eds-selectable-space-horizontal);
+}
+
+/* Container space examples */
+.container-space-box {
+  padding: var(--eds-container-space-vertical)
+    var(--eds-container-space-horizontal);
 }
 
-/* Margin-bottom utilities (4px grid) */
-.mb-2 {
-  margin-bottom: 0.5rem; /* 8px */
+/* Page space examples */
+.page-space-box {
+  padding: var(--eds-page-space-vertical) var(--eds-page-space-horizontal);
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem; /* 12px */
+/* Generic gap examples */
+.generic-gap-horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: 0 var(--eds-generic-gap-horizontal);
 }
 
-.mb-4 {
-  margin-bottom: 1rem; /* 16px */
+.generic-gap-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: var(--eds-generic-gap-vertical) 0;
 }
 
-.spacing-demo-box {
-  display: inline-block;
-  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%;
+.generic-gap-both {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eds-generic-gap-vertical) var(--eds-generic-gap-horizontal);
 }
 
-.size-32 {
-  width: 32px;
-  height: 32px;
+/* Generic space examples */
+.generic-space-horizontal {
+  padding-left: var(--eds-generic-space-horizontal);
+  padding-right: var(--eds-generic-space-horizontal);
 }
 
-.spacing-demo-button-primary,
-.spacing-demo-button-secondary {
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
+.generic-space-vertical {
+  padding-top: var(--eds-generic-space-vertical);
+  padding-bottom: var(--eds-generic-space-vertical);
 }
 
-.spacing-demo-button-primary {
-  background-color: var(--eds-color-bg-accent-fill-emphasis-default);
-  color: var(--eds-color-text-accent-strong-on-emphasis);
-  border-color: var(--eds-color-border-accent-strong);
+.generic-space-both {
+  padding: var(--eds-generic-space-vertical) var(--eds-generic-space-horizontal);
 }
 
-.spacing-demo-button-secondary {
-  background-color: var(--eds-color-bg-neutral-surface);
-  color: var(--eds-color-text-neutral-strong);
-  border-color: var(--eds-color-border-neutral-medium);
+/* Fixed gap examples */
+.selectable-gap-example {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eds-selectable-gap-vertical) var(--eds-selectable-gap-horizontal);
 }
 
-.spacing-demo-button-primary:hover,
-.spacing-demo-button-secondary:hover {
-  opacity: 0.9;
+.container-gap-example {
+  display: flex;
+  flex-direction: column;
+  gap: var(--eds-container-gap-vertical) var(--eds-container-gap-horizontal);
+}
+
+.page-gap-example {
+  display: flex;
+  flex-direction: column;
+  gap: var(--eds-page-gap-vertical) var(--eds-page-gap-horizontal);
 }
 
-.spacing-demo-card {
-  background-color: var(--eds-color-bg-neutral-surface);
-  border: 1px solid var(--eds-color-border-neutral-medium);
-  max-width: 400px;
+/* Small box for gap demonstrations */
+.spacing-demo-small-box {
+  width: 60px;
+  height: 40px;
+  background-color: var(--eds-color-bg-info-fill-muted-default);
+  border: 1px solid var(--eds-color-border-info-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: var(--eds-color-text-info-strong);
 }