fix: removed deprecated tokens in button

components/button/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '../commons/index.css';
+@import "../commons/index.css";
 
 :root {
   /* Todo: fix in DNA, should have been zero */
@@ -55,9 +55,9 @@ governing permissions and limitations under the License.
   vertical-align: top;
 
   transition: background var(--spectrum-global-animation-duration-100) ease-out,
-              border-color var(--spectrum-global-animation-duration-100) ease-out,
-              color var(--spectrum-global-animation-duration-100) ease-out,
-              box-shadow var(--spectrum-global-animation-duration-100) ease-out;
+    border-color var(--spectrum-global-animation-duration-100) ease-out,
+    color var(--spectrum-global-animation-duration-100) ease-out,
+    box-shadow var(--spectrum-global-animation-duration-100) ease-out;
 
   text-decoration: none;
   font-family: var(--spectrum-font-family-base);
@@ -83,8 +83,8 @@ governing permissions and limitations under the License.
     padding: 0;
 
     /* Use uppercase PX so values don't get converted to rem */
-    margin-block-start: -2PX;
-    margin-block-end: -2PX;
+    margin-block-start: -2px;
+    margin-block-end: -2px;
   }
 
   &:disabled,
@@ -96,13 +96,15 @@ governing permissions and limitations under the License.
     max-block-size: 100%;
     flex-shrink: 0;
   }
-
 }
 
 %spectrum-ButtonWithFocusRing {
   &:after {
-    border-radius: calc(var(--spectrum-button-primary-border-radius) + var(--spectrum-alias-focus-ring-gap));
-    content: '';
+    border-radius: calc(
+      var(--spectrum-button-primary-border-radius) +
+        var(--spectrum-alias-focus-ring-gap)
+    );
+    content: "";
     display: block;
     position: absolute;
     left: 0;
@@ -111,8 +113,9 @@ governing permissions and limitations under the License.
     top: 0;
     margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
-                margin var(--spectrum-global-animation-duration-100) ease-out;
+    transition: box-shadow var(--spectrum-global-animation-duration-100)
+        ease-out,
+      margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 
   &:focus-ring {
@@ -134,7 +137,11 @@ governing permissions and limitations under the License.
   block-size: auto;
   min-inline-size: var(--spectrum-button-primary-min-width);
 
-  padding: var(--spectrum-button-padding-y) calc(var(--spectrum-button-primary-padding-x) - var(--spectrum-button-primary-border-size));
+  padding: var(--spectrum-button-padding-y)
+    calc(
+      var(--spectrum-button-primary-text-padding-x) -
+        var(--spectrum-button-primary-border-size)
+    );
 
   /* @hack: fix button text vertical alignment at 14px */
   padding-block-end: calc(var(--spectrum-button-padding-y) + 1px);
@@ -173,7 +180,11 @@ a.spectrum-ActionButton {
   min-inline-size: var(--spectrum-actionbutton-min-width);
 
   /* Use icon padding by default as it's smaller */
-  padding: 0 calc(var(--spectrum-actionbutton-icon-padding-x) - var(--spectrum-actionbutton-border-size));
+  padding: 0
+    calc(
+      var(--spectrum-actionbutton-icon-padding-x) -
+        var(--spectrum-actionbutton-border-size)
+    );
 
   border-width: var(--spectrum-actionbutton-border-size);
   border-radius: var(--spectrum-actionbutton-border-radius);
@@ -186,19 +197,30 @@ a.spectrum-ActionButton {
     padding-inline-start: var(--spectrum-actionbutton-icon-padding-x);
 
     /* Have text padding on the right */
-    padding-inline-end: calc(var(--spectrum-actionbutton-text-padding-x) - var(--spectrum-actionbutton-icon-padding-x));
+    padding-inline-end: calc(
+      var(--spectrum-actionbutton-text-padding-x) -
+        var(--spectrum-actionbutton-icon-padding-x)
+    );
   }
 
   .spectrum-Icon--sizeS:only-child {
     /* Position absolutely to avoid layout errors introduced by padding */
     position: absolute;
-    inset-block-start: calc(50% - calc(var(--spectrum-actionbutton-icon-size) / 2));
-    inset-inline-start: calc(50% - calc(var(--spectrum-actionbutton-icon-size) / 2));
+    inset-block-start: calc(
+      50% - calc(var(--spectrum-actionbutton-icon-size) / 2)
+    );
+    inset-inline-start: calc(
+      50% - calc(var(--spectrum-actionbutton-icon-size) / 2)
+    );
   }
 
   .spectrum-ActionButton-label:only-child {
     /* Add padding for text only buttons */
-    padding: 0 calc(var(--spectrum-actionbutton-text-padding-x) - var(--spectrum-actionbutton-icon-padding-x));
+    padding: 0
+      calc(
+        var(--spectrum-actionbutton-text-padding-x) -
+          var(--spectrum-actionbutton-icon-padding-x)
+      );
   }
 }
 
@@ -226,7 +248,6 @@ a.spectrum-ActionButton {
   }
 }
 
-
 .spectrum-ActionButton-label {
   white-space: nowrap;
   overflow: hidden;
@@ -257,20 +278,23 @@ a.spectrum-ActionButton {
 
   &:after {
     /* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
-    border-radius: calc(var(--spectrum-logicbutton-and-border-radius) + var(--spectrum-alias-focus-ring-gap));
+    border-radius: calc(
+      var(--spectrum-logicbutton-and-border-radius) +
+        var(--spectrum-alias-focus-ring-gap)
+    );
   }
 }
 
 .spectrum-FieldButton {
   @inherit: %spectrum-BaseButton;
 
-  block-size: var(--spectrum-dropdown-height);
+  block-size: var(--spectrum-picker-height);
 
-  padding: 0 var(--spectrum-dropdown-padding-x);
+  padding: 0 var(--spectrum-picker-padding-x);
 
   font-family: inherit;
   font-weight: normal;
-  font-size: var(--spectrum-dropdown-text-size);
+  font-size: var(--spectrum-picker-text-size);
   line-height: normal;
   -webkit-font-smoothing: initial;
 
@@ -281,9 +305,9 @@ a.spectrum-ActionButton {
 .spectrum-FieldButton {
   margin: 0;
   padding-block: 0;
-  padding-inline: var(--spectrum-dropdown-padding-x);
+  padding-inline: var(--spectrum-picker-padding-x);
 
-  border-width: var(--spectrum-dropdown-border-size);
+  border-width: var(--spectrum-picker-border-size);
   border-style: solid;
   border-radius: var(--spectrum-border-radius);
 
@@ -298,7 +322,7 @@ a.spectrum-ActionButton {
   }
 
   &.is-open {
-    border-width: var(--spectrum-dropdown-border-size);
+    border-width: var(--spectrum-picker-border-size);
   }
 }