chore: update storybook spacing with new tokens (#698)

packages/web/.storybook/manager-head.html

@@ -10,8 +10,8 @@
   }
 
   .sidebar-container .os-content {
-    padding: var(--gcds-spacing-100) var(--gcds-spacing-250)
-      var(--gcds-spacing-400) !important;
+    padding: var(--gcds-spacing-75) var(--gcds-spacing-175)
+      var(--gcds-spacing-300) !important;
   }
 
   .sidebar-container .css-d3imve {
@@ -50,7 +50,7 @@
 
   .sidebar-header .css-1jtjrtn {
     flex-shrink: 0;
-    margin: var(--gcds-spacing-500) 0 0;
+    margin: var(--gcds-spacing-600) 0 0;
   }
 
   .sidebar-header .css-1rb1jn6 {
@@ -62,16 +62,16 @@
   .sidebar-header .css-c3junj,
   .sidebar-header .css-17fv6jh {
     position: absolute;
-    top: var(--gcds-spacing-200);
+    top: var(--gcds-spacing-150);
   }
 
   .sidebar-header .css-c3junj {
     right: var(--gcds-spacing-450);
-    margin: 0 0 var(--gcds-spacing-150);
+    margin: 0 0 var(--gcds-spacing-100);
   }
 
   .sidebar-header .css-17fv6jh {
-    right: var(--gcds-spacing-600);
+    right: var(--gcds-spacing-900);
   }
 
   .sidebar-header .css-c3junj button {
@@ -85,7 +85,7 @@
   /* Sidebar subheadings + welcome story */
   .sidebar-subheading,
   div.sidebar-item[data-item-id='welcome--stories'] {
-    margin-block-end: var(--gcds-spacing-250) !important;
+    margin-block-end: var(--gcds-spacing-175) !important;
   }
 
   .sidebar-subheading,
@@ -140,12 +140,12 @@
   }
 
   .search-result-item {
-    padding: var(--gcds-spacing-150) 0 !important;
+    padding: var(--gcds-spacing-100) 0 !important;
   }
 
   .search-result-item--label strong {
     display: block;
-    margin: 0 0 var(--gcds-spacing-100);
+    margin: 0 0 var(--gcds-spacing-75);
   }
 
   .search-result-item svg {
@@ -175,7 +175,7 @@
   }
 
   .sidebar-item {
-    padding-block: var(--gcds-spacing-150) !important;
+    padding-block: var(--gcds-spacing-100) !important;
     border-radius: 0 !important;
   }
 
@@ -203,7 +203,7 @@
   button.sidebar-item {
     border-block-start: var(--gcds-border-width-sm) solid
       rgba(255, 255, 255, 0.15) !important;
-    padding: var(--gcds-spacing-250) var(--gcds-spacing-450) !important;
+    padding: var(--gcds-spacing-175) var(--gcds-spacing-450) !important;
   }
 
   button.sidebar-item:last-of-type {
@@ -213,7 +213,7 @@
 
   button.sidebar-item span {
     margin-inline-start: 0;
-    margin-inline-end: var(--gcds-spacing-150);
+    margin-inline-end: var(--gcds-spacing-100);
   }
 
   div.sidebar-item:not([data-item-id='welcome--stories']) {

packages/web/.storybook/preview-head.html

@@ -34,14 +34,14 @@
   .intro-boxes {
     background-color: var(--gcds-color-grayscale-50);
     margin-block-start: var(--gcds-spacing-450) !important;
-    margin-block-end: var(--gcds-spacing-500) !important;
-    padding: var(--gcds-spacing-400);
+    margin-block-end: var(--gcds-spacing-600) !important;
+    padding: var(--gcds-spacing-300);
   }
 
   .intro-boxes li {
     list-style: none;
     background-color: var(--gcds-color-grayscale-0);
-    padding: var(--gcds-spacing-400);
+    padding: var(--gcds-spacing-300);
   }
 
   /* ----- PROPERTIES PAGE ----- */
@@ -56,7 +56,7 @@
 
   /* Add space between component preview + copy & hide code btns */
   .docs-story .sb-story {
-    padding-block-end: var(--gcds-spacing-500);
+    padding-block-end: var(--gcds-spacing-600);
   }
 
   .docs-story .css-25bv1u,
@@ -77,9 +77,9 @@
     box-sizing: border-box;
     font: var(--gcds-button-font) !important;
     font-size: 0.875rem !important;
-    margin: 0 var(--gcds-spacing-150) var(--gcds-spacing-250)
-      var(--gcds-spacing-300) !important;
-    padding: var(--gcds-spacing-200) var(--gcds-spacing-150) !important;
+    margin: 0 var(--gcds-spacing-100) var(--gcds-spacing-175)
+      var(--gcds-spacing-225) !important;
+    padding: var(--gcds-spacing-150) var(--gcds-spacing-100) !important;
     transition: all 0.15s ease-in-out 0s;
   }
 
@@ -134,7 +134,7 @@
     border-radius: 0 !important;
     color: var(--gcds-text-primary) !important;
     font-weight: var(--gcds-font-weights-bold);
-    padding-block-start: var(--gcds-spacing-400);
+    padding-block-start: var(--gcds-spacing-300);
     border-inline: 0 !important;
   }
 
@@ -230,7 +230,7 @@
   .css-1p58akv {
     background-color: var(--gcds-color-grayscale-700) !important;
     border: var(--gcds-border-width-sm) solid var(--gcds-color-grayscale-0) !important;
-    padding: var(--gcds-spacing-50) !important;
+    padding: var(--gcds-spacing-25) !important;
   }
 
   .css-tvcum3 span,
@@ -320,11 +320,11 @@
   }
 
   .resources-list {
-    margin: var(--gcds-spacing-400) 0 !important;
+    margin: var(--gcds-spacing-300) 0 !important;
   }
 
   .resources-list li {
-    margin: 0 0 var(--gcds-spacing-300) !important;
+    margin: 0 0 var(--gcds-spacing-225) !important;
   }
 
   /* ----- CUSTOM COPY CODE BTNS ----- */
@@ -355,7 +355,7 @@
   /* gcds-button */
   .sbdocs-preview .docs-story gcds-button.hydrated + gcds-button.hydrated,
   .sb-show-main #storybook-root gcds-button.hydrated + gcds-button.hydrated {
-    margin: 0 0 0 var(--gcds-spacing-400);
+    margin: 0 0 0 var(--gcds-spacing-300);
   }
 
   /* gcds-container */
@@ -367,7 +367,7 @@
   /* gcds-icon */
   .sbdocs-preview .docs-story #story--components-icon--name gcds-icon,
   .sbdocs-preview .docs-story #story--components-icon--sizes gcds-icon {
-    margin: 0 var(--gcds-spacing-150) 0 0;
+    margin: 0 var(--gcds-spacing-100) 0 0;
   }
 
   .sbdocs-preview .docs-story #story--components-icon--margin-left gcds-icon,
@@ -382,7 +382,7 @@
   }
 
   .sbdocs-preview .docs-story #story--components-icon--width gcds-icon {
-    margin: 0 var(--gcds-spacing-150) 0 0;
+    margin: 0 var(--gcds-spacing-100) 0 0;
     border: var(--gcds-border-width-sm) solid var(--gcds-border-default);
   }
 
@@ -578,7 +578,7 @@
           if (tr.children[x].innerText === '-') {
             let span = document.createElement('span');
             span.setAttribute('class', 'sr-only');
-  
+
             if (lang === 'en') {
               tr.children[x].setAttribute('title', 'No default value');
               span.innerText = 'No default value';