Replace border-width() with tokens

src/components/ActionList/ActionList.scss

@@ -61,7 +61,7 @@
     background-color: var(--p-surface-hovered);
     text-decoration: none;
 
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
   }
 
   &.active {
@@ -80,7 +80,7 @@
 
   &:focus:not(:active) {
     @include focus-ring($style: 'focused');
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
   }
 
   &.destructive {

src/components/Badge/Badge.scss

@@ -70,7 +70,7 @@
   margin-left: calc(
     var(--pc-badge-vertical-padding) - var(--pc-badge-pip-spacing)
   );
-  border: border-width(thick) solid currentColor;
+  border: var(--p-border-width-2) solid currentColor;
   border-radius: var(--p-border-radius-half);
   flex-shrink: 0;
 }

src/components/Button/Button.scss

@@ -419,7 +419,7 @@
     position: relative;
     border-color: currentColor;
     // stylelint-disable selector-max-class
-    box-shadow: 0 0 0 border-width('base') currentColor;
+    box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
     @include focus-ring($border-width: 2px);
 
     &::before {
@@ -481,7 +481,7 @@
 
 .ConnectedDisclosure {
   z-index: var(--pc-button-segment);
-  margin-left: -(border-width());
+  margin-left: calc(-1 * var(--p-border-width-1));
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   height: 100%;

src/components/ButtonGroup/ButtonGroup.scss

@@ -38,7 +38,7 @@
     margin-left: 0;
 
     &:not(:first-child) {
-      margin-left: -1 * border-width();
+      margin-left: calc(-1 * var(--p-border-width-1));
     }
   }
 

src/components/Card/Card.scss

@@ -3,7 +3,7 @@
 .Card {
   background-color: var(--p-surface);
   box-shadow: var(--p-shadow-card);
-  outline: border-width(base) solid transparent;
+  outline: var(--p-border-width-1) solid transparent;
 
   + .Card {
     margin-top: var(--p-space-4);

src/components/DropZone/DropZone.scss

@@ -18,11 +18,13 @@ $dropzone-stacking-order: (
   bottom: 0;
   opacity: 1;
   transform: scale(1);
-  border: border-width() $dropzone-border-style transparent;
+  border: var(--p-border-width-1) $dropzone-border-style transparent;
 }
 
 @mixin set-border-radius {
-  border-radius: calc(var(--p-border-radius-1) + #{border-width()} + 1px);
+  border-radius: calc(
+    var(--p-border-radius-1) + #{var(--p-border-width-1)} + 1px
+  );
 }
 
 .DropZone {
@@ -42,7 +44,7 @@ $dropzone-stacking-order: (
     right: 0;
     bottom: 0;
     left: 0;
-    border: border-width() $dropzone-border-style transparent;
+    border: var(--p-border-width-1) $dropzone-border-style transparent;
     border-radius: var(--p-border-radius-1);
     pointer-events: none;
   }
@@ -59,7 +61,7 @@ $dropzone-stacking-order: (
 }
 
 .hasOutline {
-  padding: border-width();
+  padding: var(--p-border-width-1);
 
   &::after {
     border-color: var(--p-border-neutral-subdued);
@@ -121,7 +123,7 @@ $dropzone-stacking-order: (
 }
 
 .Container {
-  @include focus-ring($border-width: border-width());
+  @include focus-ring($border-width: var(--p-border-width-1));
   flex: 1;
 }
 
@@ -137,7 +139,7 @@ $dropzone-stacking-order: (
   justify-content: center;
   align-items: center;
   padding: $dropzone-padding;
-  border: border-width() $dropzone-border-style var(--p-interactive);
+  border: var(--p-border-width-1) $dropzone-border-style var(--p-interactive);
   text-align: center;
   color: var(--p-interactive);
   background-color: var(--p-surface-selected);

src/components/Frame/components/Toast/Toast.scss

@@ -18,7 +18,7 @@ $Backdrop-opacity: 0.88;
   }
 
   @media (forced-colors: active) {
-    @include high-contrast-border(border-width(thick));
+    @include high-contrast-border(var(--p-border-width-2));
   }
 }
 

src/components/OptionList/components/Option/Option.scss

@@ -53,15 +53,15 @@ $control-vertical-adjustment: 2px;
 
   &:hover:not(.disabled) {
     background: var(--p-surface-hovered);
-    outline: border-width(base) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   // stylelint-disable-next-line selector-max-specificity
   &.select,
   &.select:hover:not(.disabled),
   &:active:not(.disabled) {
     background: var(--p-surface-selected);
-    outline: border-width(base) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   &.disabled {

src/components/RangeSlider/components/DualThumb/DualThumb.scss

@@ -71,14 +71,14 @@ $range-thumb-border-error: 2px solid var(--p-border-critical);
 }
 
 .Thumbs {
-  @include focus-ring($size: 'wide', $border-width: border-width());
+  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-1));
   position: absolute;
   z-index: var(--pc-range-slider-input);
   padding: 0;
   width: var(--pc-range-slider-thumb-size);
   height: var(--pc-range-slider-thumb-size);
   border-radius: var(--p-border-radius-half);
-  border: border-width() solid var(--p-interactive);
+  border: var(--p-border-width-1) solid var(--p-interactive);
   background: linear-gradient(var(--p-interactive), var(--p-interactive));
   -webkit-tap-highlight-color: transparent;
 

src/components/Select/Select.scss

@@ -95,7 +95,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: border-width() solid var(--p-border-subdued);
+  border: var(--p-border-width-1) solid var(--p-border-subdued);
   border-bottom-color: var(--p-border-shadow-subdued);
   border-radius: var(--p-border-radius-1);
   background-color: var(--p-surface);

src/components/Tabs/Tabs.scss

@@ -3,7 +3,7 @@
 $item-min-height: 16px;
 $item-min-width: 50px;
 $item-vertical-padding: $item-min-height / 2;
-$underline-height: border-width(thicker);
+$underline-height: var(--p-border-width-3);
 $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
 
 .Tabs {
@@ -104,15 +104,15 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
   @include text-emphasis-normal;
 
   &:focus .Title {
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
     // stylelint-disable-next-line  selector-max-specificity
     &::before {
       background: var(--p-action-primary);
     }
   }
 
   .Title {
-    @include high-contrast-outline($border-width: border-width(thicker));
+    @include high-contrast-outline($border-width: var(--p-border-width-3));
     color: var(--p-text);
 
     &::before {

src/components/TextField/TextField.scss

@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-$textfield-backdrop-offset: -(border-width(thick));
+$textfield-backdrop-offset: calc(-1 * var(--p-border-width-2));
 $backdrop-horizontal-spacing: calc(var(--p-space-2) * 1.5);
 $addon-horizontal-spacing: 0.25em;
 $spinner-icon-size: 12px;
@@ -165,7 +165,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .Backdrop {
-  @include focus-ring($border-width: border-width());
+  @include focus-ring($border-width: var(--p-border-width-1));
   position: absolute;
   z-index: var(--pc-text-field-backdrop);
   top: 0;
@@ -229,7 +229,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 
 .Spinner {
   --pc-text-field-spinner-offset-large: calc(
-    var(--p-text-field-spinner-offset) + #{border-width()}
+    var(--p-text-field-spinner-offset) + var(--p-border-width-1)
   );
   z-index: var(--pc-text-field-contents);
   margin: var(--pc-text-field-spinner-offset-large);

src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

@@ -14,7 +14,7 @@ $content-max-width: 200px;
     var(--p-duration-100);
 
   @media screen and (-ms-high-contrast: active) {
-    border: border-width(thick) solid ms-high-contrast-color('text');
+    border: var(--p-border-width-2) solid ms-high-contrast-color('text');
   }
 }
 

src/styles/_common.scss

@@ -6,7 +6,6 @@
 
 @import './foundation/utilities';
 @import './foundation/colors';
-@import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
 @import './foundation/typography';

src/styles/_public-api.scss

@@ -19,7 +19,6 @@
 @import './foundation/utilities';
 @import './foundation/colors';
 @import './foundation/spacing';
-@import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/layout';
 @import './foundation/typography';

src/styles/foundation/_accessibility.scss

@@ -1,9 +1,9 @@
-@mixin high-contrast-outline($border-width: border-width()) {
+@mixin high-contrast-outline($border-width: var(--p-border-width-1)) {
   outline: $border-width solid transparent;
   @content;
 }
 
-@mixin high-contrast-border($border-width: border-width()) {
+@mixin high-contrast-border($border-width: var(--p-border-width-1)) {
   border: $border-width solid transparent;
   @content;
 }

src/styles/foundation/_borders.scss

@@ -1,8 +1,8 @@
 $borders-data: (
-  base: border-width() solid var(--p-border-subdued),
-  dark: border-width() solid var(--p-border),
-  transparent: border-width() solid transparent,
-  divider: border-width() solid var(--p-divider),
+  base: var(--p-border-width-1) solid var(--p-border-subdued),
+  dark: var(--p-border-width-1) solid var(--p-border),
+  transparent: var(--p-border-width-1) solid transparent,
+  divider: var(--p-border-width-1) solid var(--p-divider),
 );
 
 /// Returns the default border.

src/styles/shared/_buttons.scss

@@ -10,7 +10,7 @@
   );
 
   @include recolor-icon(var(--p-icon));
-  @include focus-ring($border-width: border-width('base'));
+  @include focus-ring($border-width: var(--p-border-width-1));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -118,25 +118,25 @@
 
 @mixin button-outline($outline-color, $background-color: transparent) {
   background: transparent;
-  border: border-width() solid var(--p-border);
+  border: var(--p-border-width-1) solid var(--p-border);
   box-shadow: none;
   color: var(--p-text);
-  @include focus-ring($border-width: border-width('base'));
+  @include focus-ring($border-width: var(--p-border-width-1));
 
   &:hover {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     background: var(--p-surface-hovered);
   }
 
   &:focus {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     @include focus-ring($style: 'focused');
   }
 
   &:active {
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     background: var(--p-surface-pressed);
 
@@ -147,49 +147,49 @@
 
   &.pressed {
     background: var(--p-action-secondary-pressed);
-    border: border-width() solid var(--p-border);
+    border: var(--p-border-width-1) solid var(--p-border);
     box-shadow: none;
     color: var(--pc-button-text);
   }
 
   &.disabled {
-    border: border-width('base') solid var(--p-border-disabled);
+    border: var(--p-border-width-1) solid var(--p-border-disabled);
     box-shadow: none;
     background: transparent;
     color: var(--p-text-disabled);
   }
 
   &.destructive {
     background: transparent;
-    border: border-width('base') solid var(--p-border-critical);
+    border: var(--p-border-width-1) solid var(--p-border-critical);
     box-shadow: none;
     color: var(--p-interactive-critical);
     @include recolor-icon(var(--p-icon-critical));
 
     &:hover {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       background: var(--p-surface-critical-subdued);
     }
 
     &:focus {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       @include focus-ring($style: 'focused');
     }
 
     &:active {
-      border: border-width('base') solid var(--p-border-critical);
+      border: var(--p-border-width-1) solid var(--p-border-critical);
       background: var(--p-surface-critical-subdued);
     }
 
     &.disabled {
-      border: border-width('base') solid var(--p-border-critical-disabled);
+      border: var(--p-border-width-1) solid var(--p-border-critical-disabled);
       background: transparent;
       color: var(--p-interactive-critical-disabled);
     }
 
     &.pressed {
       background: var(--p-surface-critical-subdued);
-      box-shadow: border-width('base') solid var(--p-border-critical);
+      box-shadow: var(--p-border-width-1) solid var(--p-border-critical);
       color: var(--p-interactive-critical);
     }
   }

src/styles/shared/_interaction-state.scss

@@ -33,7 +33,7 @@
   left: calc(-1 * var(--p-space-2));
   height: 100%;
   display: block;
-  width: border-width(thicker);
+  width: var(--p-border-width-3);
   border-top-right-radius: var(--p-border-radius-1);
   border-bottom-right-radius: var(--p-border-radius-1);
 }