Replace border-radius() function with tokens

UNRELEASED-v8.md

@@ -28,6 +28,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763))
 - Dropped support for node < 16 ([#4778](https://github.com/Shopify/polaris-react/pull/4778))
 - Removed `build/styles` directory from build output ([#4728](https://github.com/Shopify/polaris-react/pull/4728))
+- Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793))
 
 ### New components
 

src/components/ActionList/ActionList.scss

@@ -121,7 +121,7 @@
   align-items: center;
   height: var(--pc-action-list-image-size);
   width: var(--pc-action-list-image-size);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.

src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -93,7 +93,7 @@
   align-items: center;
   height: var(--pc-mapped-actions-image-size);
   width: var(--pc-mapped-actions-image-size);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.

src/components/Avatar/Avatar.scss

@@ -12,7 +12,7 @@
   max-width: 100%;
   background: var(--p-surface-neutral);
   color: var(--p-icon-subdued);
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   user-select: none;
 
   @media (forced-colors: active) {
@@ -82,7 +82,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--p-background);
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   transform: translate(-50%, -50%);
   object-fit: cover;
 }

src/components/Badge/Badge.scss

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

src/components/Banner/Banner.scss

@@ -169,7 +169,7 @@
 }
 
 .withinPage {
-  border-radius: 0 0 border-radius() border-radius();
+  border-radius: 0 0 var(--p-border-radius-base) var(--p-border-radius-base);
   padding: var(--p-space-5);
 
   @include banner-variants(true);

src/components/CheckableButton/CheckableButton.scss

@@ -60,7 +60,7 @@ $button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2;
   }
 
   &.CheckableButton-plain {
-    border-radius: border-radius();
+    border-radius: var(--p-border-radius-base);
     box-shadow: none;
     background: transparent;
     border: none;

src/components/ColorPicker/ColorPicker.scss

@@ -77,7 +77,7 @@
   will-change: transform;
   background: transparent;
   border: var(--p-border-radius-1) solid var(--p-surface);
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   pointer-events: none;
 }
 

src/components/DropZone/DropZone.scss

@@ -17,7 +17,7 @@ $dropzone-min-height-small: 50px;
 }
 
 @mixin set-border-radius {
-  border-radius: calc(var(--p-border-radius-1) + #{border-width()} + #{1px});
+  border-radius: calc(var(--p-border-radius-1) + #{border-width()} + 1px);
 }
 
 .DropZone {

src/components/ExceptionList/ExceptionList.scss

@@ -41,7 +41,7 @@
 .Bullet {
   width: 6px;
   height: 6px;
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   background-color: var(--p-icon-subdued);
 
   .statusWarning & {

src/components/Frame/Frame.scss

@@ -83,7 +83,7 @@
   margin: var(--p-space-4);
   padding: 0;
   border: none;
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   background: none;
   opacity: 0;
   pointer-events: none;
@@ -99,7 +99,7 @@
   &:focus {
     @include focus-ring($style: focused);
     position: absolute;
-    border-radius: border-radius();
+    border-radius: var(--p-border-radius-base);
     outline: none;
   }
 

src/components/Icon/Icon.scss

@@ -26,7 +26,7 @@
     bottom: calc(-1 * var(--p-space-1));
     left: calc(-1 * var(--p-space-1));
     right: calc(-1 * var(--p-space-1));
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-half);
   }
 }
 

src/components/IndexTable/IndexTable.scss

@@ -418,7 +418,6 @@ $loading-panel-height: 53px;
 $scroll-bar-size: var(--p-space-2);
 
 .ScrollBarContainer {
-  --pc-scroll-bar-container-border-radius: 4px;
   position: sticky;
   z-index: var(--pc-index-table-scroll-bar);
   bottom: 0;
@@ -442,7 +441,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-track {
-  border-radius: var(--pc-scroll-bar-container-border-radius);
+  border-radius: var(--p-border-radius-1);
   background-color: transparent;
 }
 
@@ -454,7 +453,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-thumb {
-  border-radius: var(--pc-scroll-bar-container-border-radius);
+  border-radius: var(--p-border-radius-1);
   background-color: var(--p-border-neutral-subdued);
   transition: background-color var(--p-duration-100) ease-out;
 }

src/components/Indicator/Indicator.scss

@@ -13,7 +13,7 @@ $base-position: -4px;
     top: $base-position;
     width: $size;
     height: $size;
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-half);
     border: calc(#{$size} / 2) solid transparent;
   }
 }

src/components/Link/Link.scss

@@ -37,7 +37,7 @@
       left: -5px;
       display: block;
 
-      border-radius: border-radius();
+      border-radius: var(--p-border-radius-base);
     }
   }
 

src/components/MessageIndicator/MessageIndicator.scss

@@ -14,7 +14,7 @@ $indicator-position: -3px;
   right: $indicator-position;
   width: $indicator-size;
   height: $indicator-size;
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   background-color: var(--p-icon-highlight);
   border: solid 2px var(--p-background);
 }

src/components/Modal/components/CloseButton/CloseButton.scss

@@ -6,7 +6,7 @@
   margin-left: var(--p-space-5);
   margin-right: calc(-1 * var(--p-space-2));
   padding: var(--p-space-2);
-  border-radius: border-radius(large);
+  border-radius: var(--p-border-radius-large);
 
   &:hover {
     background: var(--p-surface-hovered);

src/components/RadioButton/RadioButton.scss

@@ -14,7 +14,7 @@
 
     // stylelint-disable-next-line selector-max-specificity, selector-max-class
     &::after {
-      border-radius: var(--p-border-radius-6);
+      border-radius: var(--p-border-radius-half);
     }
   }
 
@@ -50,7 +50,7 @@
   width: 100%;
   height: 100%;
   border: var(--p-control-border-width) solid var(--p-border);
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   background-color: var(--p-surface);
   transition: border-color var(--p-duration-100) var(--p-ease);
 
@@ -65,7 +65,7 @@
     height: var(--p-icon-size);
     width: var(--p-icon-size);
     background-color: var(--p-interactive);
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-half);
     transition: opacity var(--p-duration-100) var(--p-ease),
       transform var(--p-duration-100) var(--p-ease);
 
@@ -77,7 +77,7 @@
   @include focus-ring($border-width: var(--p-control-border-width));
 
   &::after {
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-half);
   }
 
   &.hover,

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

@@ -84,7 +84,7 @@ $range-thumb-border-error: 2px solid var(--p-border-critical);
   padding: 0;
   width: var(--pc-range-slider-thumb-size);
   height: var(--pc-range-slider-thumb-size);
-  border-radius: var(--p-border-radius-6);
+  border-radius: var(--p-border-radius-half);
   border: border-width() solid var(--p-interactive);
   background: linear-gradient(var(--p-interactive), var(--p-interactive));
   -webkit-tap-highlight-color: transparent;
@@ -161,7 +161,7 @@ $range-output-spacing: 16px;
   height: $range-output-size;
   background-color: var(--p-surface);
   box-shadow: var(--p-popover-shadow);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
   transition-property: transform;
   transition-duration: var(--p-duration-150);
   transition-timing-function: var(--p-ease);

src/components/RangeSlider/components/SingleThumb/SingleThumb.scss

@@ -61,9 +61,7 @@
     var(--pc-single-thumb-progress-upper) 100%;
 
   @mixin rangeSliderThumbPosition($size) {
-    margin-top: calc(
-      -1 * (#{$size} - #{var(--pc-range-slider-track-height)}) / 2
-    );
+    margin-top: calc(-1 * (#{$size} - var(--pc-range-slider-track-height)) / 2);
   }
 
   &::-ms-tooltip {
@@ -93,7 +91,7 @@
     width: var(--pc-range-slider-thumb-size);
     height: var(--pc-range-slider-thumb-size);
     border: 1px solid transparent;
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-half);
     background: linear-gradient(var(--p-interactive), var(--p-interactive));
     box-shadow: 0 0 0 0 var(--p-focused);
     appearance: none;
@@ -162,9 +160,7 @@
 /// Output value indicator
 $range-output-size: 32px;
 $range-output-translate-x: calc(
-  -50% + var(--Polaris-RangeSlider-output-factor) * #{var(
-      --pc-range-slider-thumb-size
-    )}
+  -50% + var(--Polaris-RangeSlider-output-factor) * var(--pc-range-slider-thumb-size)
 );
 
 $range-output-spacing: 16px;
@@ -188,7 +184,7 @@ $range-output-spacing: 16px;
     opacity: 1;
     visibility: visible;
     bottom: calc(
-      #{var(--pc-range-slider-thumb-size)} + #{$range-thumb-size-difference}
+      var(--pc-range-slider-thumb-size) + #{$range-thumb-size-difference}
     );
   }
 }
@@ -201,7 +197,7 @@ $range-output-spacing: 16px;
   min-width: $range-output-size;
   height: $range-output-size;
   background-color: var(--p-surface);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
   transition-property: transform;
   transition-duration: var(--p-duration-200);
   transition-timing-function: var(--p-ease);

src/components/Tag/Tag.scss

@@ -69,7 +69,7 @@ $icon-size: 16px;
   height: $height;
   width: $height;
   margin-left: var(--p-space-1);
-  border-radius: 0 border-radius() border-radius() 0;
+  border-radius: 0 var(--p-border-radius-base) var(--p-border-radius-base) 0;
 
   &:hover {
     background: var(--p-surface-neutral-hovered);

src/components/TextStyle/TextStyle.scss

@@ -11,7 +11,7 @@
 .variationCode {
   position: relative;
   padding: 0 var(--p-space-1);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
   background-color: var(--p-surface-subdued);
   display: inline-block;
   font-size: 1.15em;

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

@@ -28,7 +28,7 @@ $content-max-width: 200px;
 
 .Content {
   position: relative;
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
   background-color: var(--p-surface);
   color: var(--p-text);
   max-width: $content-max-width;

src/components/TopBar/TopBar.scss

@@ -66,7 +66,7 @@ $context-control-expand-after: 1400px;
   margin-left: calc(var(--p-space-2) + 2px);
   margin-right: var(--p-space-2);
   padding: var(--p-space-2);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
   fill: var(--p-icon); // Icon will inherit this fill
   transition: var(--p-duration-150) fill var(--p-ease) 33ms;
 

src/components/TopBar/components/Menu/Menu.scss

@@ -32,7 +32,7 @@ $activator-variables: (
   cursor: pointer;
   transition: menu(transition);
   margin-right: var(--p-space-2);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
 
   &:focus {
     @include focus-ring($style: 'focused');

src/styles/_common.scss

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

src/styles/_public-api.scss

@@ -21,7 +21,6 @@
 @import './foundation/spacing';
 @import './foundation/border-width';
 @import './foundation/borders';
-@import './foundation/border-radius';
 @import './foundation/layout';
 @import './foundation/shadows';
 @import './foundation/typography';

src/styles/shared/_buttons.scss

@@ -208,7 +208,7 @@
   padding: 2px 5px;
   margin: -2px -5px;
   background: var(--p-action-secondary-hovered);
-  border-radius: border-radius();
+  border-radius: var(--p-border-radius-base);
 }
 
 @mixin unstyled-button() {

src/styles/shared/_skeleton.scss

@@ -25,7 +25,7 @@ $thumbnail-sizes: (
     left: 0;
     display: block;
     background-color: var(--p-surface-neutral);
-    border-radius: border-radius();
+    border-radius: var(--p-border-radius-base);
 
     @media screen and (-ms-high-contrast: active) {
       background-color: ms-high-contrast-color('disabled-text');

src/tokens/_shape.ts

@@ -8,5 +8,7 @@ export const shape: TokenGroup = {
   'border-radius-3': rem('12px'),
   'border-radius-4': rem('16px'),
   'border-radius-5': rem('20px'),
-  'border-radius-6': '50%',
+  'border-radius-base': rem('3px'),
+  'border-radius-large': rem('6px'),
+  'border-radius-half': '50%',
 };