Create migrations for replacing legacy v11 custom properties (#8272)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Part of #8405 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
This PR creates migrations for the following deprecated custom property
groups in v11 using the generic codemod
[`styles-replace-custom-property`](#8265).

Due to a bit of confusion on my end I also ended up creating some v9
migrations as well 😅

# v11
### v11-styles-replace-custom-property-border 
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-border-radius-base` | `--p-border-radius-1` |
| `--p-border-radius-large` | `--p-border-radius-2` |
| `--p-border-radius-half` | `--p-border-radius-full` |
| `--p-border-base` | `var(--p-border-width-1) solid
var(--p-color-border-subdued)` |
| `--p-border-dark` | `var(--p-border-width-1) solid
var(--p-color-border)` |
| `--p-border-transparent` | `var(--p-border-width-1) solid transparent`
|
| `--p-border-divider` | `var(--p-border-width-1) solid
var(--p-color-border-subdued)` |
| `--p-border-divider-on-dark` | `var(--p-border-width-1) solid
var(--p-color-border-inverse)` |

### v11-styles-replace-custom-property-depth
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-transparent`  | `--p-shadow-none`    | 
|`--p-shadow-faint` | `--p-shadow-sm` |
|`--p-shadow-base` | `--p-shadow-md` |
|`--p-shadow-deep` | `--p-shadow-md` |
|`--p-shadow-button` | `--p-shadow-sm` |
|`--p-shadow-top-bar` | `--p-shadow-sm` |
|`--p-shadow-card` | `--p-shadow-md` |
|`--p-shadow-popover` | `--p-shadow-xl` |
|`--p-shadow-layer` | `--p-shadow-2xl` |
|`--p-shadow-modal` | `--p-shadow-2xl` |
|`--p-shadows-inset-button` | `--p-shadow-none` |
|`--p-shadows-inset-button-pressed` | `--p-shadow-inset-md` |

### v11-styles-replace-custom-property-zindex
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-z-1`  | `--p-z-index-1`  |
| `--p-z-2`  | `--p-z-index-2`  |
| `--p-z-3`  | `--p-z-index-3`  |
| `--p-z-4`  | `--p-z-index-4`  |
| `--p-z-5`  | `--p-z-index-5`  |
| `--p-z-6`  | `--p-z-index-6`  |
| `--p-z-7`  | `--p-z-index-7`  |
| `--p-z-8`  | `--p-z-index-8`  |
| `--p-z-9`  | `--p-z-index-9`  |
| `--p-z-10` | `--p-z-index-10` |
| `--p-z-11` | `--p-z-index-11` |
| `--p-z-12` | `--p-z-index-12` |

### v11-styles-replace-custom-property-legacy
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-override-loading-z-index` | `--p-z-index-6` |
| `--p-choice-size`                | `1.25rem`         |
| `--p-icon-size-small`                | `0.5rem`         |
| `--p-icon-size-medium`                | `1.25rem`         |
| `--p-choice-margin`                | `--p-space-025`         |
| `--p-control-border-width` | `--p-border-width-2` |
| `--p-banner-border-default` | `inset 0 var(--p-border-width-1) 0 0
var(--p-color-border-strong), inset 0 0 0 (--p-border-width-1)
var(--p-color-border-strong)` |
| `--p-banner-border-success` | `inset 0 var(--p-border-width-1) 0 0
var(--p-color-border-success-subdued), inset 0 0 0 (--p-border-width-1)
var(--p-color-border-success-subdued)` |
| `--p-banner-border-highlight` | `inset 0 var(--p-border-width-1) 0 0
var(--p-color-border-info-subdued), inset 0 0 0 (--p-border-width-1)
var(--p-color-border-info-subdued)` |
| `--p-banner-border-warning` | `inset 0 var(--p-border-width-1) 0 0
var(--p-color-border-caution-subdued), inset 0 0 0
(--p-border-width-1)var(--p-color-border-caution-subdued)` |
| `--p-banner-border-critical` | `inset 0 var(--p-border-width-1) 0 0
var(--p-color-border-critical-subdued), inset 0 0 0 (--p-border-width-1)
var(--p-color-border-critical-subdued)` |
| `--p-thin-border-subdued` | `var(--p-border-width-1) solid
var(--p-color-border-subdued)` |
| `--p-text-field-spinner-offset` | `0.125rem` |
| `--p-text-field-focus-ring-offset` | `-0.25rem` |
| `--p-button-group-item-spacing` | `calc(-1 * var(--p-space-025))` |
| `--p-range-slider-thumb-size-base` | `1rem` |
| `--p-range-slider-thumb-size-active` | `1.5rem` |
| `--p-frame-offset` | `0` |

# v9

### v9-styles-replace-custom-property-border 
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-border-radius-slim` | `--p-border-radius-05` |
| `--p-border-radius-wide` | `--p-border-radius-2` |
| `--p-text-field-focus-ring-border-radius` | `0.4375rem` / `7px` |

### v9-styles-replace-custom-property-depth
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-button-drop-shadow` | `--p-shadow-button` |
| `--p-button-inner-shadow` | `--p-shadows-inset-button` |
| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed`
|
| `--p-card-shadow` | `--p-shadow-card` |
| `--p-modal-shadow` | `--p-shadow-modal` |
| `--p-popover-shadow` | `--p-shadow-popover` |
| `--p-top-bar-shadow` | `--p-shadow-top-bar` |
| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` |
| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` |
| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` |

### v9-styles-replace-custom-property-font 
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-badge-font-weight` | `--p-font-weight-regular` |
| `--p-button-font-weight` | `--p-font-weight-medium` |

### v9-styles-replace-custom-property-motion
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-duration-1-0-0` | `--p-duration-100` |
| `--p-duration-1-5-0` | `--p-duration-150` |

### v9-styles-replace-custom-property-legacy
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-override-none` | `none` |
| `--p-override-one` | `1` |
| `--p-override-visible` | `visible` |
| `--p-override-zero` | `0` |
| `--p-override-transparent` | `transparent` |
| `--p-non-null-content` | `''` |
| `--p-icon-size` | `--p-icon-size-small` |
| `--p-range-slider-thumb-scale` | `1.5` |
| `--p-badge-mix-blend-mode` | `luminosity` |


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Co-authored-by: Joe Thomas <joe.thomas@shopify.com>

Author: 3 people

.changeset/ten-drinks-refuse.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-migrator': minor
+'polaris.shopify.com': minor
+---
+
+Create migrations to replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss

@@ -0,0 +1,10 @@
+.border {
+  border-radius: var(--p-border-radius-base);
+  border-radius: var(--p-border-radius-large);
+  border-radius: var(--p-border-radius-half);
+  border: var(--p-border-base);
+  border: var(--p-border-dark);
+  border: var(--p-border-transparent);
+  border: var(--p-border-divider);
+  border: var(--p-border-divider-on-dark);
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss

@@ -0,0 +1,10 @@
+.border {
+  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-full);
+  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border: var(--p-border-width-1) solid var(--p-color-border);
+  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border: var(--p-border-width-1) solid var(--p-color-border-inverse);
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.test.ts

@@ -0,0 +1,12 @@
+import {check} from '../../../utilities/testUtils';
+
+const migration = 'v11-styles-replace-custom-property-border';
+const fixtures = ['v11-styles-replace-custom-property-border'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: 'scss',
+  });
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts

@@ -0,0 +1,26 @@
+import type {FileInfo, API} from 'jscodeshift';
+
+import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
+
+const replacementMaps = {
+  '/.+/': {
+    '--p-border-radius-base': '--p-border-radius-1',
+    '--p-border-radius-large': '--p-border-radius-2',
+    '--p-border-radius-half': '--p-border-radius-full',
+    '--p-border-base':
+      'var(--p-border-width-1) solid var(--p-color-border-subdued)',
+    '--p-border-dark': 'var(--p-border-width-1) solid var(--p-color-border)',
+    '--p-border-transparent': 'var(--p-border-width-1) solid transparent',
+    '--p-border-divider':
+      'var(--p-border-width-1) solid var(--p-color-border-subdued)',
+    '--p-border-divider-on-dark':
+      'var(--p-border-width-1) solid var(--p-color-border-inverse)',
+  },
+};
+
+export default function v11StylesReplaceCustomPropertyBorder(
+  fileInfo: FileInfo,
+  _: API,
+) {
+  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss

@@ -0,0 +1,14 @@
+.depth {
+  box-shadow: var(--p-shadow-transparent);
+  box-shadow: var(--p-shadow-faint);
+  box-shadow: var(--p-shadow-base);
+  box-shadow: var(--p-shadow-deep);
+  box-shadow: var(--p-shadow-button);
+  box-shadow: var(--p-shadow-top-bar);
+  box-shadow: var(--p-shadow-card);
+  box-shadow: var(--p-shadow-popover);
+  box-shadow: var(--p-shadow-layer);
+  box-shadow: var(--p-shadow-modal);
+  box-shadow: var(--p-shadows-inset-button);
+  box-shadow: var(--p-shadows-inset-button-pressed);
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss

@@ -0,0 +1,14 @@
+.depth {
+  box-shadow: var(--p-shadow-none);
+  box-shadow: var(--p-shadow-sm);
+  box-shadow: var(--p-shadow-md);
+  box-shadow: var(--p-shadow-md);
+  box-shadow: var(--p-shadow-sm);
+  box-shadow: var(--p-shadow-sm);
+  box-shadow: var(--p-shadow-md);
+  box-shadow: var(--p-shadow-xl);
+  box-shadow: var(--p-shadow-2xl);
+  box-shadow: var(--p-shadow-2xl);
+  box-shadow: var(--p-shadow-none);
+  box-shadow: var(--p-shadow-inset-md);
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.test.ts

@@ -0,0 +1,12 @@
+import {check} from '../../../utilities/testUtils';
+
+const migration = 'v11-styles-replace-custom-property-depth';
+const fixtures = ['v11-styles-replace-custom-property-depth'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: 'scss',
+  });
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/v11-styles-replace-custom-property-depth.ts

@@ -0,0 +1,27 @@
+import type {FileInfo, API} from 'jscodeshift';
+
+import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
+
+const replacementMaps = {
+  '/.+/': {
+    '--p-shadow-transparent': '--p-shadow-none',
+    '--p-shadow-faint': '--p-shadow-sm',
+    '--p-shadow-base': '--p-shadow-md',
+    '--p-shadow-deep': '--p-shadow-md',
+    '--p-shadow-button': '--p-shadow-sm',
+    '--p-shadow-top-bar': '--p-shadow-sm',
+    '--p-shadow-card': '--p-shadow-md',
+    '--p-shadow-popover': '--p-shadow-xl',
+    '--p-shadow-layer': '--p-shadow-2xl',
+    '--p-shadow-modal': '--p-shadow-2xl',
+    '--p-shadows-inset-button': '--p-shadow-none',
+    '--p-shadows-inset-button-pressed': '--p-shadow-inset-md',
+  },
+};
+
+export default function v11StylesReplaceCustomPropertyDepth(
+  fileInfo: FileInfo,
+  _: API,
+) {
+  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
+}

polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss

@@ -0,0 +1,20 @@
+.legacy {
+  z-index: var(--p-override-loading-z-index);
+  width: var(--p-choice-size);
+  width: var(--p-icon-size-small);
+  width: var(--p-icon-size-medium);
+  margin: var(--p-choice-margin);
+  border-width: var(--p-control-border-width);
+  box-shadow: var(--p-banner-border-default);
+  box-shadow: var(--p-banner-border-success);
+  box-shadow: var(--p-banner-border-highlight);
+  box-shadow: var(--p-banner-border-warning);
+  box-shadow: var(--p-banner-border-critical);
+  border: var(--p-thin-border-subdued);
+  margin: var(--p-text-field-spinner-offset);
+  margin-left: var(--p-text-field-focus-ring-offset);
+  padding: var(--p-button-group-item-spacing);
+  width: var(--p-range-slider-thumb-size-base);
+  width: var(--p-range-slider-thumb-size-active);
+  margin: var(--p-frame-offset);
+}