fix(styles): replace old spacing vars with new syntax (#4889)

Author: jendowns

packages/components/src/components/accordion/_accordion.scss

@@ -143,7 +143,7 @@
     .#{$prefix}--accordion__content {
       display: block;
       padding-bottom: $carbon--spacing-06;
-      padding-top: $spacing-xs;
+      padding-top: $spacing-03;
       // Transition property for when the accordion opens
       transition: padding-top motion(entrance, productive) $duration--fast-02,
         padding-bottom motion(entrance, productive) $duration--fast-02;

packages/components/src/components/code-snippet/_code-snippet.scss

@@ -53,7 +53,7 @@
   }
 
   .#{$prefix}--snippet--inline code {
-    padding: 0 $spacing-xs;
+    padding: 0 $spacing-03;
   }
 
   // Single Line Snippet
@@ -78,7 +78,7 @@
   .#{$prefix}--snippet--single pre {
     white-space: nowrap;
     @include type-style('code-01');
-    padding-right: $spacing-xs;
+    padding-right: $spacing-03;
   }
 
   .#{$prefix}--snippet--single::after {
@@ -181,8 +181,8 @@
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
     height: $carbon--spacing-07;
     width: $carbon--spacing-07;
-    top: $spacing-xs;
-    right: $spacing-xs;
+    top: $spacing-03;
+    right: $spacing-03;
   }
 
   .#{$prefix}--snippet-button:hover {
@@ -217,9 +217,9 @@
     display: inline-flex;
     align-items: center;
     position: absolute;
-    right: $spacing-xs;
-    bottom: $spacing-xs;
-    padding: $spacing-xs;
+    right: $spacing-03;
+    bottom: $spacing-03;
+    padding: $spacing-03;
     padding-left: $carbon--spacing-05;
     color: $text-01;
     background-color: $field-01;
@@ -237,7 +237,7 @@
 
   .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
     fill: $text-01;
-    margin-left: $spacing-xs;
+    margin-left: $spacing-03;
     margin-bottom: rem(1px);
     transform: rotate(0deg);
     transition: $duration--moderate-01 motion(standard, productive);

packages/components/src/components/copy-button/_copy-button.scss

@@ -38,7 +38,7 @@
       @include layer('overlay');
       @include type-style('body-short-01');
       top: 1.1rem;
-      padding: $spacing-2xs;
+      padding: $spacing-02;
       color: $inverse-01;
       content: attr(data-feedback);
       transform: translateX(-50%);

packages/components/src/components/data-table/_data-table-action.scss

@@ -75,7 +75,7 @@
     .#{$prefix}--search-magnifier {
     height: $layout-04;
     width: $layout-04;
-    padding: $spacing-md;
+    padding: $spacing-05;
     left: 0;
     cursor: pointer;
     pointer-events: all;
@@ -141,7 +141,7 @@
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-input {
-    padding-left: $spacing-3xl;
+    padding-left: $spacing-09;
     visibility: inherit;
   }
 
@@ -206,7 +206,7 @@
     cursor: pointer;
     height: $layout-04;
     width: $layout-04;
-    padding: $spacing-md;
+    padding: $spacing-05;
     transition: background $duration--fast-02 motion(entrance, productive);
   }
 
@@ -289,14 +289,14 @@
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-magnifier {
-    left: $spacing-md;
+    left: $spacing-05;
   }
 
   .#{$prefix}--toolbar-search-container-persistent
     .#{$prefix}--search
     .#{$prefix}--search-input {
     height: $layout-04;
-    padding-left: $spacing-3xl;
+    padding-left: $spacing-09;
     border: none;
   }
 
@@ -345,8 +345,8 @@
     top: 0;
     left: 0;
     align-items: center;
-    padding-left: $spacing-lg;
-    padding-right: $spacing-lg;
+    padding-left: $spacing-06;
+    padding-right: $spacing-06;
     width: 100%;
     height: 100%;
     pointer-events: none;
@@ -502,7 +502,7 @@
       .#{$prefix}--search-magnifier {
       height: rem(32px);
       width: rem(32px);
-      padding: $spacing-xs;
+      padding: $spacing-03;
     }
 
     //hidden
@@ -570,7 +570,7 @@
   .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action {
     height: rem(32px);
     width: rem(32px);
-    padding: $spacing-xs;
+    padding: $spacing-03;
   }
 
   .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary {

packages/components/src/components/data-table/_data-table-inline-edit.scss

@@ -35,7 +35,7 @@
 
     &:focus {
       @include focus-outline;
-      padding: $spacing-3xs;
+      padding: $spacing-01;
 
       .#{$prefix}--inline-edit-label__icon {
         width: auto;
@@ -58,7 +58,7 @@
     margin-left: rem(-12px);
 
     input {
-      padding-left: $spacing-sm;
+      padding-left: $spacing-04;
     }
   }
 
@@ -68,7 +68,7 @@
     }
 
     select {
-      padding: 0.45rem 2.75rem 0.45rem $spacing-md;
+      padding: 0.45rem 2.75rem 0.45rem $spacing-05;
     }
 
     .#{$prefix}--select__arrow {

packages/components/src/components/pagination/_pagination.scss

@@ -52,7 +52,7 @@ $css--helpers: true;
     width: auto;
     min-width: auto;
     height: 100%;
-    padding: 0 2.5rem 0 $spacing-md;
+    padding: 0 2.5rem 0 $spacing-05;
     margin-right: -0.65rem;
     @include carbon--breakpoint('md') {
       padding-right: carbon--mini-units(4.5);