Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create generic codemod to replace custom properties #8265

Merged
merged 13 commits into from
Feb 13, 2023
Merged

Create generic codemod to replace custom properties #8265

merged 13 commits into from
Feb 13, 2023

Conversation

aaronccasanova
Copy link
Member

This PR introduces a generic codemod to replace CSS custom properties with mapped values (either a different Polaris custom property or a static value).

- color: var(--p-text);
+ color: var(--p-color-text);

- animation-duration: var(--p-fast);
+ animation-duration: 100ms;

The migration can be run in two ways:

  1. Using a combination of --decl, --from, and --to flags to replace a single custom property, or
  2. Using a --maps flag which points to a file defining replacements for multiple custom properties

Option 1:

npx @shopify/polaris-migrator styles-replace-custom-property \
  --decl="<name>" --from="<prop>" --to="<prop>" <path>

Option 2:

npx @shopify/polaris-migrator styles-replace-custom-property \
  --maps="<replacement-maps>" <path>

Example replacement-maps.js (with option 2):

export default {
  color: {
    '--p-text': '--p-color-text',
  },
  '/^animation/': {
    '--p-fast': '100ms',
  },
};

@aaronccasanova
Copy link
Member Author

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Feb 3, 2023

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@lgriffee lgriffee mentioned this pull request Feb 10, 2023
Merged
alex-page
alex-page approved these changes Feb 12, 2023
View reviewed changes
Copy link
Member

@alex-page alex-page left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, one non blocking comment.

sam-b-rose
sam-b-rose approved these changes Feb 13, 2023
View reviewed changes
Copy link
Member

@sam-b-rose sam-b-rose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great! Nice work creating this generic codemod 💯 the two options for usage are nice as well

@aaronccasanova
Copy link
Member Author

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@aaronccasanova aaronccasanova merged commit f5afc40 into main Feb 13, 2023
@aaronccasanova aaronccasanova deleted the scss-replace-custom-property branch February 13, 2023 23:42
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Feb 13, 2023
Merged
@gwyneplaine gwyneplaine mentioned this pull request Feb 14, 2023
Merged
lgriffee added a commit that referenced this pull request Mar 15, 2023
@lgriffee @aaronccasanova @heyjoethomas
Create migrations for replacing legacy v11 custom properties (#8272)
cccd698 
<!--
  ☝️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 <[email protected]>
Co-authored-by: Joe Thomas <[email protected]>
@lgriffee lgriffee mentioned this pull request Apr 24, 2023
Merged
lgriffee added a commit that referenced this pull request Apr 24, 2023
@lgriffee @aaronccasanova
Add migration/codemod to replace motion custom properties (#9068)
c47996b 
<!--
  ☝️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

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

### WHAT is this pull request doing?

This PR creates a migration and codemod for deprecated custom properties
in v11 within the motion token group using the generic codemod
[`styles-replace-custom-property`](#8265).
It also adds the color migration to the new codemod folder.

#### Motion

| Deprecated Token             | Replacement Value                   |
| ---------------------------- | ----------------------------------- |
| `--p-linear`                 | `--p-motion-linear`                 |
| `--p-ease-in-out`            | `--p-motion-ease-in-out`            |
| `--p-ease-out`               | `--p-motion-ease-out`               |
| `--p-ease-in`                | `--p-motion-ease-in`                |
| `--p-ease`                   | `--p-motion-ease`                   |
| `--p-duration-0`             | `--p-motion-duration-0`             |
| `--p-duration-50`            | `--p-motion-duration-50`            |
| `--p-duration-100`           | `--p-motion-duration-100`           |
| `--p-duration-150`           | `--p-motion-duration-150`           |
| `--p-duration-200`           | `--p-motion-duration-200`           |
| `--p-duration-250`           | `--p-motion-duration-250`           |
| `--p-duration-300`           | `--p-motion-duration-300`           |
| `--p-duration-350`           | `--p-motion-duration-350`           |
| `--p-duration-400`           | `--p-motion-duration-400`           |
| `--p-duration-450`           | `--p-motion-duration-450`           |
| `--p-duration-500`           | `--p-motion-duration-500`           |
| `--p-duration-5000`          | `--p-motion-duration-5000`          |
| `--p-keyframes-bounce`       | `--p-motion-keyframes-bounce`       |
| `--p-keyframes-fade-in`      | `--p-motion-keyframes-fade-in`      |
| `--p-keyframes-pulse`        | `--p-motion-keyframes-pulse`        |
| `--p-keyframes-spin`         | `--p-motion-keyframes-spin`         |
| `--p-keyframes-appear-above` | `--p-motion-keyframes-appear-above` |
| `--p-keyframes-appear-below` | `--p-motion-keyframes-appear-below` |

---------

Co-authored-by: Aaron Casanova <[email protected]>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@aaronccasanova @juzser
Create generic codemod to replace custom properties (Shopify#8265)
cbace5e
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@lgriffee @aaronccasanova
@heyjoethomas @juzser
Create migrations for replacing legacy v11 custom properties (Shopify…
2e556b4 
…#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 Shopify#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`](Shopify#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 <[email protected]>
Co-authored-by: Joe Thomas <[email protected]>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@lgriffee @aaronccasanova @juzser
Add migration/codemod to replace motion custom properties (Shopify#9068)
12eba63 
<!--
  ☝️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 Shopify#8405

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

### WHAT is this pull request doing?

This PR creates a migration and codemod for deprecated custom properties
in v11 within the motion token group using the generic codemod
[`styles-replace-custom-property`](Shopify#8265).
It also adds the color migration to the new codemod folder.

#### Motion

| Deprecated Token             | Replacement Value                   |
| ---------------------------- | ----------------------------------- |
| `--p-linear`                 | `--p-motion-linear`                 |
| `--p-ease-in-out`            | `--p-motion-ease-in-out`            |
| `--p-ease-out`               | `--p-motion-ease-out`               |
| `--p-ease-in`                | `--p-motion-ease-in`                |
| `--p-ease`                   | `--p-motion-ease`                   |
| `--p-duration-0`             | `--p-motion-duration-0`             |
| `--p-duration-50`            | `--p-motion-duration-50`            |
| `--p-duration-100`           | `--p-motion-duration-100`           |
| `--p-duration-150`           | `--p-motion-duration-150`           |
| `--p-duration-200`           | `--p-motion-duration-200`           |
| `--p-duration-250`           | `--p-motion-duration-250`           |
| `--p-duration-300`           | `--p-motion-duration-300`           |
| `--p-duration-350`           | `--p-motion-duration-350`           |
| `--p-duration-400`           | `--p-motion-duration-400`           |
| `--p-duration-450`           | `--p-motion-duration-450`           |
| `--p-duration-500`           | `--p-motion-duration-500`           |
| `--p-duration-5000`          | `--p-motion-duration-5000`          |
| `--p-keyframes-bounce`       | `--p-motion-keyframes-bounce`       |
| `--p-keyframes-fade-in`      | `--p-motion-keyframes-fade-in`      |
| `--p-keyframes-pulse`        | `--p-motion-keyframes-pulse`        |
| `--p-keyframes-spin`         | `--p-motion-keyframes-spin`         |
| `--p-keyframes-appear-above` | `--p-motion-keyframes-appear-above` |
| `--p-keyframes-appear-below` | `--p-motion-keyframes-appear-below` |

---------

Co-authored-by: Aaron Casanova <[email protected]>
This was referenced Sep 1, 2023
Closed
Merged
Merged
Merged
@lgriffee lgriffee mentioned this pull request Sep 15, 2023
Merged
lgriffee added a commit that referenced this pull request Sep 29, 2023
@lgriffee
Create migration for replacing v11 border custom properties (#10506)
d901a07 
### WHY are these changes introduced?

Fixes #10443 
Fixes #10444 

### WHAT is this pull request doing?
This PR creates a migration for deprecated `border` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-space
| 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` | 

> [!NOTE]  
> The following values cannot be safely migrated pre-v12 while
maintaining existing feature flag functionality. These tokens will need
to be migrated in the next major version v12:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-border-width-3` | `--p-border-width-050` | 
| `--p-border-width-5` | `--p-border-width-100` |
lgriffee added a commit that referenced this pull request Sep 29, 2023
@lgriffee
Create migration for replacing v11 space custom properties (#10305)
1b36b92 
### WHY are these changes introduced?

Fixes #10445 

### WHAT is this pull request doing?
This PR creates a migration for deprecated `space` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-space
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-space-05` | `--p-space-050` | 
| `--p-space-1` | `--p-space-100` | 
| `--p-space-1_5-experimental` | `--p-space-150` | 
| `--p-space-2` | `--p-space-200` | 
| `--p-space-3` | `--p-space-300` |
| `--p-space-4` | `--p-space-400` | 
| `--p-space-5` | `--p-space-500` | 
| `--p-space-6` | `--p-space-600` | 
| `--p-space-8` | `--p-space-800` | 
| `--p-space-10` | `--p-space-1000` | 
| `--p-space-12` | `--p-space-1200` | 
| `--p-space-16` | `--p-space-1600` | 
| `--p-space-20` | `--p-space-2000` | 
| `--p-space-24` | `--p-space-2400` | 
| `--p-space-28` | `--p-space-2800` | 
| `--p-space-32` | `--p-space-3200` |
lgriffee added a commit that referenced this pull request Sep 29, 2023
@lgriffee @aaronccasanova
Create migration for replacing v11 font custom properties (#10304)
eb93b7f 
### WHY are these changes introduced?

Fixes #10446 
Fixes #10447  

### WHAT is this pull request doing?
This PR creates a migration for deprecated `font` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-font 
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
 | `--p-font-size-70-experimental` | `--p-font-size-275` |
  | `--p-font-size-75` | `--p-font-size-300` |
  | `--p-font-size-80-experimental` | `--p-font-size-325` |
  | `--p-font-size-100` | `--p-font-size-350` |
  | `--p-font-size-200` | `--p-font-size-400` |
 | `--p-font-size-300` | `--p-font-size-500` |
  | `--p-font-size-400` | `--p-font-size-600` |
  | `--p-font-size-500` |`--p-font-size-750` |
  | `--p-font-size-600` | `--p-font-size-900` |
  | `--p-font-size-700` | `--p-font-size-1000` |
| `--p-font-line-height-075-experimental` | `--p-font-line-height-300` |
  | `--p-font-line-height-1` | `--p-font-line-height-400` | 
  | `--p-font-line-height-2` | `--p-font-line-height-500` | 
  | `--p-font-line-height-3` | `--p-font-line-height-600` | 
  | `--p-font-line-height-4` | `--p-font-line-height-700` | 
  | `--p-font-line-height-5` | `--p-font-line-height-800` | 
  | `--p-font-line-height-6` | `--p-font-line-height-1000` | 
  | `--p-font-line-height-7` | `--p-font-line-height-1200` | 


> [!NOTE]  
> The following values cannot be safely migrated pre-v12 and will need
to be migrated in the next major version v12:

| New Token          | Value        |
| ------------------------- | ------------------------ |
  | `--p-font-size-75` | `--p-font-size-300` |
  | `--p-font-size-200` | `--p-font-size-400` |
 | `--p-font-size-300` | `--p-font-size-500` |
  | `--p-font-size-400` | `--p-font-size-600` |
  | `--p-font-size-500` |`--p-font-size-750` |
  | `--p-font-size-600` | `--p-font-size-900` |

---------

Co-authored-by: Aaron Casanova <[email protected]>
lgriffee added a commit that referenced this pull request Oct 3, 2023
@lgriffee
Create migration for replacing v11 shadow custom properties (#10306)
dbae87e 
### WHY are these changes introduced?

Fixes #10513

### WHAT is this pull request doing?
This PR creates a migration for deprecated `shadow` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-shadow
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-inset-lg` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-md` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-sm` | `--p-shadow-inset-100`    |
| `--p-shadow-none` | `--p-shadow-0`    |
| `--p-shadow-xs` | `--p-shadow-100`    |
| `--p-shadow-sm` | `--p-shadow-200`    |
| `--p-shadow-md` | `--p-shadow-300`    |
| `--p-shadow-lg` | `--p-shadow-400`    |
| `--p-shadow-xl` | `--p-shadow-500`    |
| `--p-shadow-2xl` | `--p-shadow-600`    |
| `--p-shadow-bevel-experimental` | `--p-shadow-bevel-100`    |
| `--p-shadow-card-sm-experimental` | `--p-shadow-100`    |
| `--p-shadow-card-md-experimental` | `--p-shadow-200`    |
| `--p-shadow-card-lg-experimental` | `--p-shadow-300`    |
| `--p-shadow-button-experimental` | `--p-shadow-button`    |
| `--p-shadow-button-hover-experimental` | `--p-shadow-button-hover` |
| `--p-shadow-button-disabled-experimental` | `inset 0 0 0 1px rgba(227,
227, 227, 1)` |
| `--p-shadow-button-primary-strong-experimental` |
`--p-shadow-button-primary` |
| `--p-shadow-button-primary-strong-inset-experimental` |
`--p-shadow-button-primary-inset` |
| `--p-shadow-button-primary-strong-hover-experimental` |
`--p-shadow-button-primary-hover` |
| `--p-shadow-border-inset-experimental` | `--p-shadow-border-inset` |

>[!IMPORTANT]
>The following tokens need to be manually migrated because their values
are context dependent.

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-button-primary-experimental` |
`--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success`
|
| `--p-shadow-button-primary-hover-experimental` |
`--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover`
|
| `--p-shadow-button-inset-experimental` |
`--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset`
|
mrcthms pushed a commit that referenced this pull request Oct 12, 2023
@lgriffee @mrcthms
Create migration for replacing v11 shadow custom properties (#10306)
6f249de 
### WHY are these changes introduced?

Fixes #10513

### WHAT is this pull request doing?
This PR creates a migration for deprecated `shadow` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-shadow
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-inset-lg` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-md` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-sm` | `--p-shadow-inset-100`    |
| `--p-shadow-none` | `--p-shadow-0`    |
| `--p-shadow-xs` | `--p-shadow-100`    |
| `--p-shadow-sm` | `--p-shadow-200`    |
| `--p-shadow-md` | `--p-shadow-300`    |
| `--p-shadow-lg` | `--p-shadow-400`    |
| `--p-shadow-xl` | `--p-shadow-500`    |
| `--p-shadow-2xl` | `--p-shadow-600`    |
| `--p-shadow-bevel-experimental` | `--p-shadow-bevel-100`    |
| `--p-shadow-card-sm-experimental` | `--p-shadow-100`    |
| `--p-shadow-card-md-experimental` | `--p-shadow-200`    |
| `--p-shadow-card-lg-experimental` | `--p-shadow-300`    |
| `--p-shadow-button-experimental` | `--p-shadow-button`    |
| `--p-shadow-button-hover-experimental` | `--p-shadow-button-hover` |
| `--p-shadow-button-disabled-experimental` | `inset 0 0 0 1px rgba(227,
227, 227, 1)` |
| `--p-shadow-button-primary-strong-experimental` |
`--p-shadow-button-primary` |
| `--p-shadow-button-primary-strong-inset-experimental` |
`--p-shadow-button-primary-inset` |
| `--p-shadow-button-primary-strong-hover-experimental` |
`--p-shadow-button-primary-hover` |
| `--p-shadow-border-inset-experimental` | `--p-shadow-border-inset` |

>[!IMPORTANT]
>The following tokens need to be manually migrated because their values
are context dependent.

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-button-primary-experimental` |
`--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success`
|
| `--p-shadow-button-primary-hover-experimental` |
`--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover`
|
| `--p-shadow-button-inset-experimental` |
`--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset`
|
mrcthms pushed a commit that referenced this pull request Oct 12, 2023
@lgriffee @mrcthms
Create migration for replacing v11 shadow custom properties (#10306)
96e4900 
### WHY are these changes introduced?

Fixes #10513

### WHAT is this pull request doing?
This PR creates a migration for deprecated `shadow` custom properties in
v12 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v12-styles-replace-custom-property-shadow
| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-inset-lg` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-md` | `--p-shadow-inset-200`    |
| `--p-shadow-inset-sm` | `--p-shadow-inset-100`    |
| `--p-shadow-none` | `--p-shadow-0`    |
| `--p-shadow-xs` | `--p-shadow-100`    |
| `--p-shadow-sm` | `--p-shadow-200`    |
| `--p-shadow-md` | `--p-shadow-300`    |
| `--p-shadow-lg` | `--p-shadow-400`    |
| `--p-shadow-xl` | `--p-shadow-500`    |
| `--p-shadow-2xl` | `--p-shadow-600`    |
| `--p-shadow-bevel-experimental` | `--p-shadow-bevel-100`    |
| `--p-shadow-card-sm-experimental` | `--p-shadow-100`    |
| `--p-shadow-card-md-experimental` | `--p-shadow-200`    |
| `--p-shadow-card-lg-experimental` | `--p-shadow-300`    |
| `--p-shadow-button-experimental` | `--p-shadow-button`    |
| `--p-shadow-button-hover-experimental` | `--p-shadow-button-hover` |
| `--p-shadow-button-disabled-experimental` | `inset 0 0 0 1px rgba(227,
227, 227, 1)` |
| `--p-shadow-button-primary-strong-experimental` |
`--p-shadow-button-primary` |
| `--p-shadow-button-primary-strong-inset-experimental` |
`--p-shadow-button-primary-inset` |
| `--p-shadow-button-primary-strong-hover-experimental` |
`--p-shadow-button-primary-hover` |
| `--p-shadow-border-inset-experimental` | `--p-shadow-border-inset` |

>[!IMPORTANT]
>The following tokens need to be manually migrated because their values
are context dependent.

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- |
---------------------------------- |
| `--p-shadow-button-primary-experimental` |
`--p-shadow-button-primary-critical`<br>`--p-shadow-button-primary-success`
|
| `--p-shadow-button-primary-hover-experimental` |
`--p-shadow-button-primary-critical-hover`<br>`--p-shadow-button-primary-success-hover`
|
| `--p-shadow-button-inset-experimental` |
`--p-shadow-button-primary-critical-inset`<br>`--p-shadow-button-primary-success-inset`
|
@lgriffee lgriffee mentioned this pull request Feb 13, 2024
Merged
lgriffee added a commit that referenced this pull request Feb 14, 2024
@lgriffee
Migrations for Text heading3xl and heading2xl removal (#11596)
c8fabc0 
### WHY are these changes introduced?

Fixes Shopify/polaris-internal#1427

We need migrations for primitive tokens associated with the removal of
the Text `heading-3xl` and `heading-2xl` variants/classes/alias tokens.

### WHAT is this pull request doing?

This PR creates a migration for deprecated `font` custom properties in
v13 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v13-styles-replace-custom-property-font
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
| `--p-font-size-750`  | `--p-font-size-600` | 
| `--p-font-size-900` | `--p-font-size-600` | 
| `--p-font-size-1000` | `--p-font-size-600` | 
| `--p-font-letter-spacing-denser` | `--p-font-letter-spacing-dense` | 
| `--p-font-letter-spacing-densest` | `--p-font-letter-spacing-dense` | 
| `--p-font-line-height-1000` | `--p-font-line-height-800` | 
| `--p-font-line-height-1200` | `--p-font-line-height-800` | 
|`--p-text-heading-3xl-font-family`| `--p-text-heading-xl-font-family`|
|`--p-text-heading-3xl-font-size`| `--p-text-heading-xl-font-size`|
| `--p-text-heading-3xl-font-weight`| `--p-text-heading-xl-font-weight`|
|`--p-text-heading-3xl-font-letter-spacing`|
`--p-text-heading-xl-font-letter-spacing`|
| `--p-text-heading-3xl-font-line-height`|
`--p-text-heading-xl-font-line-height`|
|`--p-text-heading-2xl-font-family`| `--p-text-heading-xl-font-family`|
| `--p-text-heading-2xl-font-size`| `--p-text-heading-xl-font-size`|
| `--p-text-heading-2xl-font-weight`| `--p-text-heading-xl-font-weight`|
| `--p-text-heading-2xl-font-letter-spacing`|
`--p-text-heading-xl-font-letter-spacing`|
|`--p-text-heading-2xl-font-line-height`|
`--p-text-heading-xl-font-line-height`|
>[!NOTE]
>Major version upgrade guidance is located [on a separate PR on the v13
branch](#11597).
@lgriffee lgriffee mentioned this pull request Apr 3, 2024
Merged
lgriffee added a commit that referenced this pull request Apr 5, 2024
@lgriffee
Create migration for replacing v14 text custom properties (#11831)
99972a5 
### WHY are these changes introduced?

Related to https://github.com/Shopify/polaris-internal/issues/1554
Fixes https://github.com/Shopify/polaris-internal/issues/1555

We need migrations for semantic tokens associated with the removal of
the text token group.

### WHAT is this pull request doing?

This PR creates a migration for deprecated `text` custom properties in
v14 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v14-styles-replace-custom-property-text
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--p-text-heading-3xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-3xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-3xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-3xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-3xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-2xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-2xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-2xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-2xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-2xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xl-font-size`|`--p-font-size-600`|
|`--p-text-heading-xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-xl-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-xl-font-line-height`|`--p-font-line-height-800`|
|`--p-text-heading-lg-font-family`|`--p-font-family-sans`|
|`--p-text-heading-lg-font-size`|`--p-font-size-500`|
|`--p-text-heading-lg-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-lg-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-lg-font-line-height`|`--p-font-line-height-600`|
|`--p-text-heading-md-font-family`|`--p-font-family-sans`|
|`--p-text-heading-md-font-size`|`--p-font-size-350`|
|`--p-text-heading-md-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-sm-font-family`|`--p-font-family-sans`|
|`--p-text-heading-sm-font-size`|`--p-font-size-325`|
|`--p-text-heading-sm-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-sm-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-xs-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xs-font-size`|`--p-font-size-300`|
|`--p-text-heading-xs-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-xs-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-lg-font-family`|`--p-font-family-sans`|
|`--p-text-body-lg-font-size`|`--p-font-size-350`|
|`--p-text-body-lg-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-lg-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-lg-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-md-font-family`|`--p-font-family-sans`|
|`--p-text-body-md-font-size`|`--p-font-size-325`|
|`--p-text-body-md-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-sm-font-family`|`--p-font-family-sans`|
|`--p-text-body-sm-font-size`|`--p-font-size-300`|
|`--p-text-body-sm-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-sm-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-xs-font-family`|`--p-font-family-sans`|
|`--p-text-body-xs-font-size`|`--p-font-size-275`|
|`--p-text-body-xs-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-xs-font-line-height`|`--p-font-line-height-300`|

It also updates the existing v14-styles-replace-custom-property-font
migration to remove any text tokens.

#### v14-styles-replace-custom-property-font
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--p-font-size-800`|`--p-font-size-750`|
|`--p-font-size-900`|`--p-font-size-750`|
|`--p-font-size-1000`|`--p-font-size-750`|
|`--p-font-letter-spacing-densest`|`--p-font-letter-spacing-denser`|
|`--p-font-line-height-1200`|`--p-font-line-height-1000`|

>[!NOTE]
>Major version upgrade guidance is located [on a separate PR on the v13
branch](#11832).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alex-page alex-page alex-page approved these changes

@sam-b-rose sam-b-rose sam-b-rose approved these changes

Assignees

@lgriffee lgriffee

@aaronccasanova aaronccasanova

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@aaronccasanova @sam-b-rose @alex-page @lgriffee