Migrate border custom properties from v11 to v12 (#10741)

### WHY are these changes introduced?

Resolves #10525.

### WHAT is this pull request doing?

Runs the following migration to migrate `border` custom properties from
v11 to v12 with updated border migration snapshot that includes breaking
changes. More detailed steps for migration process can be found in
[#10519](#10519).

```script
npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230927173749 \
  v12-styles-replace-custom-property-border \
  'src/**/*.scss'
```

### How to 🎩

#### Replacement maps

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-border-radius-0-experimental` | `--p-border-radius-0` | 
| `--p-border-radius-05` | `--p-border-radius-050` | 
| `--p-border-radius-1` | `--p-border-radius-100` | 
| `--p-border-radius-1_5-experimental` | `--p-border-radius-150` | 
| `--p-border-radius-2` | `--p-border-radius-200` | 
| `--p-border-radius-3` | `--p-border-radius-300` | 
| `--p-border-radius-4` | `--p-border-radius-400` | 
| `--p-border-radius-5` | `--p-border-radius-500` | 
| `--p-border-radius-6` | `--p-border-radius-750` | 
| `--p-border-width-1` | `--p-border-width-025` | 
| `--p-border-width-1-experimental` | `--p-border-width-0165` | 
| `--p-border-width-2` | `--p-border-width-050` | 
| `--p-border-width-2-experimental` | `--p-border-width-025` | 
| `--p-border-width-3` | `--p-border-width-050` | 
| `--p-border-width-4` | `--p-border-width-100` | 
| `--p-border-width-5` | `--p-border-width-100` | 

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/few-starfishes-notice.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': major
+---
+
+- Migrated `border` custom properties from v11 to v12
+- Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type
+- Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components

.changeset/lemon-bees-confess.md

@@ -1,5 +1,7 @@
 ---
-'@shopify/polaris': minor
+'@shopify/polaris': major
 ---
 
-Migrated `space` custom properties from v11 to v12
+- Migrated `space` custom properties from v11 to v12
+- Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type
+- Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component

documentation/guides/legacy-polaris-v8-public-api.scss

@@ -1046,8 +1046,8 @@ $fixed-element-stacking-order: (
   );
   $border-radius: if(
     $size == 'wide',
-    var(--p-border-radius-2),
-    var(--p-border-radius-1)
+    var(--p-border-radius-200),
+    var(--p-border-radius-100)
   );
   $negative-offset: calc(-1 * #{$offset});
 
@@ -1330,7 +1330,7 @@ $nav-min-window: em(layout-width(page-with-nav));
   padding: $vertical-padding spacing();
   background: var(--p-surface);
   box-shadow: var(--p-shadow-button);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: var(--p-text);
   border: 1px solid var(--p-border-neutral-subdued);
   border-top-color: var(--p-border-subdued);
@@ -1562,7 +1562,7 @@ $nav-min-window: em(layout-width(page-with-nav));
     position: relative;
     border: var(--p-control-border-width) solid var(--p-border);
     background-color: var(--p-surface);
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     &::before {
       content: '';
@@ -1571,7 +1571,7 @@ $nav-min-window: em(layout-width(page-with-nav));
       right: calc(-1 * var(--p-control-border-width));
       bottom: calc(-1 * var(--p-control-border-width));
       left: calc(-1 * var(--p-control-border-width));
-      border-radius: var(--p-border-radius-1);
+      border-radius: var(--p-border-radius-100);
       background-color: var(--p-interactive);
       opacity: 0;
       transform: scale(0.25);
@@ -2133,8 +2133,8 @@ $thumbnail-sizes: (
   height: 100%;
   display: block;
   width: border-width(thicker);
-  border-top-right-radius: var(--p-border-radius-1);
-  border-bottom-right-radius: var(--p-border-radius-1);
+  border-top-right-radius: var(--p-border-radius-100);
+  border-bottom-right-radius: var(--p-border-radius-100);
 }
 
 //

polaris-react/src/components/ActionList/ActionList.scss

@@ -26,8 +26,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   text-decoration: none;
   cursor: pointer;
   padding: var(--p-space-150);
-  border-radius: var(--p-border-radius-2);
-  border-top: var(--p-border-width-1) solid transparent;
+  border-radius: var(--p-border-radius-200);
+  border-top: var(--p-border-width-025) solid transparent;
   color: inherit;
 
   @media (forced-colors: active) {
@@ -37,7 +37,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   &:hover {
     background-color: var(--p-color-bg-subdued-hover);
     text-decoration: none;
-    outline: var(--p-border-width-3) solid transparent;
+    outline: var(--p-border-width-050) solid transparent;
   }
 
   &:active {
@@ -52,7 +52,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
     background-color: var(--p-color-bg);
-    outline: var(--p-border-width-2) solid
+    outline: var(--p-border-width-050) solid
       var(--p-color-border-interactive-focus);
   }
 

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -120,7 +120,7 @@ export function Section({
       as="li"
       role="presentation"
       borderColor="border-subdued"
-      {...(!isFirst && {borderBlockStartWidth: '1'})}
+      {...(!isFirst && {borderBlockStartWidth: '025'})}
       {...(!section.title && {
         paddingBlockStart: '150',
       })}

polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss

@@ -5,7 +5,7 @@
   // stylelint-disable-next-line selector-no-qualifying-type -- override `.iconOnly` negative margins
   button[type='button'] {
     background: var(--p-color-bg-strong);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     border: none;
     box-shadow: none;
     margin: 0;
@@ -19,7 +19,7 @@
     &:focus:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- button overrides */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-050);
       background: var(--p-color-bg-strong-active);

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss

@@ -11,7 +11,7 @@
     background-color: var(--p-color-bg-strong) !important;
     box-shadow: none !important;
     border: none;
-    border-radius: var(--p-border-radius-2) !important;
+    border-radius: var(--p-border-radius-200) !important;
     padding: var(--p-space-100) var(--p-space-300);
     min-height: 28px;
 
@@ -27,7 +27,7 @@
     &:focus-visible {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- focus styles */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-050);
     }

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -43,7 +43,7 @@
   // stylelint-disable-next-line -- using pre-existing private pc token
   margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
     calc(-1 * var(--p-space-300));
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 
   &:hover {
     background-color: var(--p-color-bg-hover);

polaris-react/src/components/Badge/Badge.scss

@@ -10,7 +10,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-color-bg-transparent-subdued-experimental);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   color: var(--p-color-text-subdued);
   font-weight: var(--p-font-weight-medium);
 
@@ -118,7 +118,7 @@
   background-color: var(--p-color-bg-transparent-subdued-experimental);
   color: var(--p-color-text-subdued);
   font-weight: var(--p-font-weight-bold);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 
   svg {
     fill: var(--p-color-text-subdued);

polaris-react/src/components/Badge/components/Pip/Pip.scss

@@ -14,7 +14,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-pip-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border: var(--p-border-width-2) solid var(--pc-pip-color);
+  border: var(--p-border-width-050) solid var(--pc-pip-color);
   flex-shrink: 0;
   // stylelint-disable-next-line -- 3px border radius
   border-radius: 3px;

polaris-react/src/components/Banner/Banner.scss

@@ -15,7 +15,7 @@
 }
 
 .withinContentContainer {
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 
   + .Banner {
     margin-top: var(--p-space-200);
@@ -25,13 +25,13 @@
 .withinPage {
   @include shadow-bevel(
     $boxShadow: var(--p-shadow-sm),
-    $borderRadius: var(--p-border-radius-0-experimental)
+    $borderRadius: var(--p-border-radius-0)
   );
 
   @media #{$p-breakpoints-sm-up} {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-sm),
-      $borderRadius: var(--p-border-radius-3)
+      $borderRadius: var(--p-border-radius-300)
     );
   }
 

polaris-react/src/components/Banner/Banner.tsx

@@ -258,15 +258,15 @@ export function InlineIconBanner({
   useEventListener('resize', handleResize);
 
   return (
-    <Box width="100%" padding="300" borderRadius="3">
+    <Box width="100%" padding="300" borderRadius="300">
       <InlineStack align="space-between" blockAlign={blockAlign} wrap={false}>
         <Box width="100%">
           <InlineStack gap="200" wrap={false} blockAlign={blockAlign}>
             {bannerIcon ? (
               <div ref={iconNode}>
                 <Box
                   background={backgroundColor}
-                  borderRadius="2"
+                  borderRadius="200"
                   padding="100"
                 >
                   {bannerIcon}
@@ -301,7 +301,7 @@ export function WithinContentContainerBanner({
       width="100%"
       background={backgroundColor}
       padding="200"
-      borderRadius="2"
+      borderRadius="200"
       color={textColor}
     >
       <InlineStack

polaris-react/src/components/Bleed/Bleed.stories.tsx

@@ -8,7 +8,7 @@ export default {
 
 const styles = {
   background: 'var(--p-color-bg-inverse)',
-  borderRadius: 'var(--p-border-radius-05)',
+  borderRadius: 'var(--p-border-radius-050)',
   padding: 'var(--p-space-400)',
   height: 'var(--p-space-1200)',
 };
@@ -39,7 +39,7 @@ export function WithVerticalDirection() {
       background="bg"
       padding="400"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginBlock="600">
         <div style={styles} />
@@ -54,7 +54,7 @@ export function WithHorizontalDirection() {
       background="bg"
       padding="400"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginInline="600">
         <div style={styles} />
@@ -71,7 +71,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="400"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="400" marginBlockStart="600">
           <div style={styles} />
@@ -82,7 +82,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="400"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="400" marginBlockEnd="600">
           <div style={styles} />
@@ -93,7 +93,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="400"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="0" marginInlineStart="600">
           <div style={styles} />
@@ -104,7 +104,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="400"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="0" marginInlineEnd="600">
           <div style={styles} />
@@ -120,7 +120,7 @@ export function WithAllDirection() {
       background="bg"
       padding="400"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginInline="600" marginBlock="600">
         <div style={styles} />
@@ -135,7 +135,7 @@ export function WithResponsiveHorizontalDirection() {
       background="bg"
       padding={{xs: '100', sm: '200', md: '300', lg: '400', xl: '500'}}
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed
         marginInline={{xs: '100', sm: '200', md: '300', lg: '400', xl: '500'}}