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

Remove v10 legacy custom properties #8405

Closed
lgriffee opened this issue Feb 16, 2023 · 0 comments · Fixed by #8374
Closed

Remove v10 legacy custom properties #8405

lgriffee opened this issue Feb 16, 2023 · 0 comments · Fixed by #8374
Assignees
@lgriffee

Comments

@lgriffee
Copy link
Member

lgriffee commented Feb 16, 2023 •
edited
Loading

For v11 we want to deprecate and remove the following custom properties:

Border

Deprecated Token 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)

Color

Deprecated Token Replacement Value
--p-text-warning --p-color-text-caution
--p-text-success --p-color-text-success
--p-text-subdued-on-dark --p-color-text-inverse-subdued
--p-text-subdued --p-color-text-subdued
--p-text-primary-pressed --p-color-text-primary
--p-text-primary-hovered --p-color-text-primary-hover
--p-text-primary --p-color-text-primary
--p-text-on-primary --p-color-text-on-color
--p-text-on-interactive --p-color-text-on-color
--p-text-on-dark --p-color-text-inverse
--p-text-on-critical --p-color-text-on-color
--p-text-highlight --p-color-text-info
--p-text-disabled --p-color-text-disabled
--p-text-critical --p-color-text-critical
--p-text --p-color-text
--p-surface-warning-subdued-pressed --p-color-bg-caution-subdued-active
--p-surface-warning-subdued-hovered --p-color-bg-caution-subdued-hover
--p-surface-warning-subdued --p-color-bg-caution-subdued
--p-surface-warning --p-color-bg-warning
--p-surface-success-subdued-pressed --p-color-bg-success-subdued-active
--p-surface-success-subdued-hovered --p-color-bg-success-subdued-hover
--p-surface-success-subdued --p-color-bg-success-subdued
--p-surface-success --p-color-bg-success
--p-surface-subdued --p-color-bg-subdued
--p-surface-selected-pressed --p-color-bg-interactive-subdued-active
--p-surface-selected-hovered --p-color-bg-interactive-subdued-hover
--p-surface-selected --p-color-bg-interactive-selected
--p-surface-search-field-dark --p-color-bg-inverse
--p-surface-search-field --p-color-bg-inset
--p-surface-primary-selected-pressed --p-color-bg-primary-subdued-active
--p-surface-primary-selected-hovered --p-color-bg-primary-subdued-hover
--p-surface-primary-selected --p-color-bg-primary-subdued-selected
--p-surface-pressed-dark --p-color-bg-inverse-active
--p-surface-pressed --p-color-bg-active
--p-surface-neutral-subdued-dark --p-color-bg-inverse
--p-surface-neutral-subdued --p-color-bg-subdued
--p-surface-neutral-pressed --p-color-bg-strong-active
--p-surface-neutral-hovered --p-color-bg-strong-hover
--p-surface-neutral-disabled --p-color-bg-disabled
--p-surface-neutral --p-color-bg-strong
--p-surface-hovered-dark --p-color-bg-inverse-hover
--p-surface-hovered --p-color-bg-hover
--p-surface-highlight-subdued-pressed --p-color-bg-info-subdued-active
--p-surface-highlight-subdued-hovered --p-color-bg-info-subdued-hover
--p-surface-highlight-subdued --p-color-bg-info-subdued
--p-surface-highlight --p-color-bg-info
--p-surface-disabled --p-color-bg-disabled
--p-surface-depressed --p-color-bg-inset
--p-surface-dark --p-color-bg-inverse
--p-surface-critical-subdued-pressed --p-color-bg-critical-subdued-active
--p-surface-critical-subdued-hovered --p-color-bg-critical-subdued-hover
--p-surface-critical-subdued-depressed --p-color-bg-critical
--p-surface-critical-subdued --p-color-bg-critical-subdued
--p-surface-critical --p-color-bg-critical
--p-surface-attention --p-color-bg-caution
--p-surface --p-color-bg
--p-shadow-color-picker-dragger rgba(33, 43, 54, 0.32)
--p-shadow-color-picker rgba(0, 0, 0, 0.5)
--p-overlay rgba(255, 255, 255, 0.5)
--p-interactive-pressed-on-dark --p-color-text-interactive-inverse
--p-interactive-pressed For color properties: --p-color-text-interactive-active
For background properties: --p-color-bg-interactive-active
For border properties: --p-color-border-interactive-active
For fill properties: --p-color-icon-interactive-active
--p-interactive-on-dark --p-color-text-interactive-inverse
--p-interactive-hovered For color properties: --p-color-text-interactive-hover
For background properties: --p-color-bg-interactive-hover
For border properties: --p-color-border-interactive-hover
For fill properties: --p-color-icon-interactive-hover
--p-interactive-disabled For color properties: --p-color-text-interactive-disabled
For background properties: --p-color-bg-interactive-disabled
For border properties: --p-color-border-interactive-disabled
For fill properties: --p-color-icon-interactive-disabled
--p-interactive-critical-pressed --p-color-text-critical-active
--p-interactive-critical-hovered --p-color-bg-critical-strong-hover
--p-interactive-critical-disabled --p-color-text-disabled
--p-interactive-critical For color properties: --p-color-text-critical
For background properties: --p-color-bg-critical
For border properties: --p-color-border-critical
For fill properties: --p-color-icon-critical
--p-interactive For color properties: --p-color-text-interactive
For background properties: --p-color-bg-interactive
For border properties: --p-color-border-interactive
For fill properties: --p-color-icon-interactive
--p-icon-warning --p-color-icon-caution
--p-icon-success --p-color-icon-success
--p-icon-subdued --p-color-icon-subdued
--p-icon-pressed --p-color-icon-active
--p-icon-on-primary --p-color-icon-on-color
--p-icon-on-interactive --p-color-icon-on-color
--p-icon-on-dark --p-color-icon-inverse
--p-icon-on-critical --p-color-icon-on-color
--p-icon-hovered --p-color-icon-hover
--p-icon-highlight --p-color-icon-info
--p-icon-disabled --p-color-icon-disabled
--p-icon-critical --p-color-icon-critical
--p-icon-attention --p-color-icon-caution
--p-icon --p-color-icon
--p-hint-from-direct-light rgba(0, 0, 0, 0.15)
--p-focused --p-color-border-interactive-focus
--p-divider-dark --p-color-border-inverse
--p-divider --p-color-border-subdued
--p-decorative-two-text rgba(73, 11, 28, 1)
--p-decorative-two-surface rgba(255, 196, 176, 1)
--p-decorative-two-icon rgba(175, 41, 78, 1)
--p-decorative-three-text rgba(0, 47, 25, 1)
--p-decorative-three-surface rgba(146, 230, 181, 1)
--p-decorative-three-icon rgba(0, 109, 65, 1)
--p-decorative-one-text rgba(61, 40, 0, 1)
--p-decorative-one-surface rgba(255, 201, 107, 1)
--p-decorative-one-icon rgba(126, 87, 0, 1)
--p-decorative-four-text rgba(0, 45, 45, 1)
--p-decorative-four-surface rgba(145, 224, 214, 1)
--p-decorative-four-icon rgba(0, 106, 104, 1)
--p-decorative-five-text rgba(79, 14, 31, 1)
--p-decorative-five-surface rgba(253, 201, 208, 1)
--p-decorative-five-icon rgba(174, 43, 76, 1)
--p-border-warning-subdued --p-color-border-caution-subdued
--p-border-warning --p-color-border-caution
--p-border-success-subdued --p-color-border-success-subdued
--p-border-success --p-color-border-success
--p-border-subdued --p-color-border-subdued
--p-border-shadow-subdued --p-color-border-input
--p-border-shadow --p-color-border-input
--p-border-on-dark --p-color-border-inverse
--p-border-neutral-subdued --p-color-border-strong
--p-border-hovered --p-color-border-hover
--p-border-highlight-subdued --p-color-border-info-subdued
--p-border-highlight --p-color-border-info
--p-border-disabled --p-color-border-disabled
--p-border-depressed --p-color-border-inverse
--p-border-critical-subdued --p-color-border-critical-subdued
--p-border-critical-disabled --p-color-border-disabled
--p-border-critical --p-color-border-critical
--p-border --p-color-border
--p-background-selected --p-color-bg-app-selected
--p-background-pressed --p-color-bg-app-active
--p-background-hovered --p-color-bg-app-hover
--p-background --p-color-bg-app
--p-backdrop rgba(0, 0, 0, 0.5)
--p-action-secondary-pressed-dark --p-color-bg-inverse-active
--p-action-secondary-pressed --p-color-bg-subdued-active
--p-action-secondary-hovered-dark --p-color-bg-inverse-hover
--p-action-secondary-hovered --p-color-bg-subdued-hover
--p-action-secondary-disabled --p-color-bg-disabled
--p-action-secondary-depressed --p-color-bg-inset-strong
--p-action-secondary --p-color-bg-subdued
--p-action-primary-pressed --p-color-bg-primary-active
--p-action-primary-hovered --p-color-bg-primary-hover
--p-action-primary-disabled --p-color-bg-disabled
--p-action-primary-depressed --p-color-bg-primary-active
--p-action-primary For color properties: --p-color-text-primary
For background properties: --p-color-bg-primary
For border properties: --p-color-border-primary
For fill properties: --p-color-icon-primary
--p-action-critical-pressed --p-color-bg-critical-strong-active
--p-action-critical-hovered --p-color-bg-critical-strong-hover
--p-action-critical-disabled --p-color-bg-disabled
--p-action-critical-depressed --p-color-bg-critical-strong-active
--p-action-critical --p-color-bg-critical-strong

Legacy

Deprecated Token Replacement Value
--p-override-loading-z-index --p-z-index-6
--p-choice-size 20px / 1.25rem
--p-icon-size-small 8px / 0.5rem
--p-icon-size-medium 20px / 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 2px / 0.125rem
--p-text-field-focus-ring-offset -4px / -0.25rem
--p-button-group-item-spacing calc(-1 * var(--p-space-025))
--p-range-slider-thumb-size-base 16px / 1rem
--p-range-slider-thumb-size-active 24px / 1.5rem
--p-frame-offset 0

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

Shadow

Deprecated Token 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

Z-index

Deprecated Token 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
@lgriffee lgriffee self-assigned this Feb 16, 2023
This was referenced Feb 16, 2023
Merged
Closed
Merged
Merged
@lgriffee lgriffee linked a pull request Feb 16, 2023 that will close this issue
Remove v10 legacy custom properties #8374
Merged
This was referenced Feb 17, 2023
Merged
Merged
Merged
lgriffee added a commit that referenced this issue Feb 17, 2023
@lgriffee
Migrate z-index custom properties from v10 to v11 (#8423)
bc8ab02 
### WHY are these changes introduced?

Part of #8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-zindex`](#8272)
from `@shopify/polaris-migrator` to migrate `z-index` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react

npx @shopify/[email protected] \ 
v11-styles-replace-custom-property-zindex \
'./src/**/*.scss'

npx prettier --write "./src/**/*.scss"
```
lgriffee added a commit that referenced this issue Feb 17, 2023
@lgriffee
Manually migrate z-index custom properties from v10 to v11 (#8425)
c73717c 
### WHY are these changes introduced?

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

### WHAT is this pull request doing?
Finds and replaces any instances of legacy `z-index` custom properties
in non SCSS files with the repalcement map from
[`v11-styles-replace-custom-property-zindex`](#8272)
This was referenced Feb 17, 2023
Merged
Closed
lgriffee added a commit that referenced this issue Feb 23, 2023
@lgriffee
Migrate legacy custom properties from v10 to v11 (#8426)
fbd135c 
### WHY are these changes introduced?

Part of #8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-legacy`](#8272)
from `@shopify/polaris-migrator` to migrate `legacy` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react

npx @shopify/[email protected] \ 
v11-styles-replace-custom-property-legacy \
'./src/**/*.scss'

npx prettier --write "./src/**/*.scss"
```
@lgriffee lgriffee mentioned this issue Feb 24, 2023
Merged
lgriffee added a commit that referenced this issue Feb 27, 2023
@lgriffee
Migrate legacy custom properties from v10 to v11 (#8498)
6247511 
### WHY are these changes introduced?

Part of #8405 

Running this migration again after the revert of #8426. 

**Changes from last PR**
- Replacement values are in `px` instead of `rem`
- Corrects replacement value of `--p-control-border-width`
- Includes 3 manual migrations

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-legacy`](#8272)
from `@shopify/polaris-migrator` to migrate `legacy` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/[email protected] v11-styles-replace-custom-property-legacy './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
This was referenced Mar 3, 2023
Merged
Merged
lgriffee added a commit that referenced this issue 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 added a commit that referenced this issue Mar 16, 2023
@lgriffee
Migrate depth custom properties from v10 to v11 (#8601)
243fd62 
### WHY are these changes introduced?

Part of #8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-depth`](#8272)
from `@shopify/polaris-migrator` to migrate `depth` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/[email protected] v11-styles-replace-custom-property-depth './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
<hr>

🚨 Note: This PR will not merge until:
- [x] Shopify/web#85942 is ready to merge (so
that we can release these changes in both polaris and web at the same
time)
- [x] #8604 is merged since one of the migrations in this PR will need
to access it
@lgriffee lgriffee mentioned this issue Apr 6, 2023
Merged
lgriffee added a commit that referenced this issue Apr 11, 2023
@lgriffee @aaronccasanova
Migrate border custom properties from v10 to v11 (#8879)
2e65ec7 
## WHY are these changes introduced?

Part of #8405 

## WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-border`](https://github.com/Shopify/polaris/blob/780acafd681ffeba6f5df634f290bee646557b64/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts)
from `@shopify/polaris-migrator` to migrate `border` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/polaris-migrator v11-styles-replace-custom-property-border './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```

This PR changes the `BorderAliasTokens` in the `Divider` component. As a
result, there are slight visual changes to the `Divider` component
border colors. Please see screenshots of documentation changes below:

### polaris.shopify.com 
**Before**
<img width="1760" alt="Screenshot 2023-04-11 at 11 40 06 AM"
src="https://user-images.githubusercontent.com/21976492/231247036-e7fb726d-2160-4c71-a292-c8438b4d682b.png">


**After**  
<img width="1774" alt="Screenshot 2023-04-11 at 11 48 52 AM"
src="https://user-images.githubusercontent.com/21976492/231247072-3f9bd2d0-b32b-41bf-98d5-d2d5c4e7d488.png">


#### Storybook 
**Before** 
<img width="1772" alt="Screenshot 2023-04-11 at 11 51 44 AM"
src="https://user-images.githubusercontent.com/21976492/231247343-0bbb2d79-89e0-4fed-ba77-7363597e496c.png">

**After** 
<img width="1776" alt="Screenshot 2023-04-11 at 11 40 26 AM"
src="https://user-images.githubusercontent.com/21976492/231247092-b020ca72-2e0a-4269-bd46-30953200ca39.png">

---------

Co-authored-by: Aaron Casanova <[email protected]>
@lgriffee lgriffee changed the title Remove v11 legacy custom properties Remove v10 legacy custom properties Apr 12, 2023
@lgriffee lgriffee mentioned this issue Apr 24, 2023
Merged
lgriffee added a commit that referenced this issue 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]>
lgriffee added a commit that referenced this issue Apr 24, 2023
@lgriffee @alex-page @aaronccasanova
Remove v10 legacy custom properties (#8374)
37f3e2e 
### WHY are these changes introduced?

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

Closes #4826


### WHAT is this pull request doing?

Removes the legacy custom properties outlined in #8405  from v11.

---------

Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>
sam-b-rose added a commit that referenced this issue May 26, 2023
@lgriffee @tmlayton
@Bringer128 @aveline @kyledurand @itwasmattgregg @alex-page @laurkim @BPScott @aaronccasanova @sam-b-rose @mrcthms @chloerice @heyjoethomas @shopify-github-actions-access @github-actions
@shopify/polaris v11.0.0 major release (#7597)
9e1350e 
## @shopify/polaris v11.0.0

### Dependencies

- [x] #8200

### NodeJS

- [x] #8201

### TypeScript

- [x] #8203

### Components

- [x] #7349
- [x] #7397
- [x] #7962
- [x] #8187
- [x] #8184
- [x] #8206
- [x] #7990
- [x] #8468
- [x] #8577
- [x] #8631
- [x] #8962

## @shopify/polaris-tokens v7.0.0

### Tokens
- [x] #6920
- [x] #8245
- [x] #4826
- [x] #8405

## @shopify/stylelint-polaris v7.0.0
- [x] #7622
- [x] #8419

# Post @shopify/polaris v11 shipping
- [ ] #8420

## Low priority or not ready breaking changes
- [x] Remove deprecated layout components
- [x] Release Layout primitive components

---------

Co-authored-by: Tim Layton <[email protected]>
Co-authored-by: Ryan Musgrave <[email protected]>
Co-authored-by: Ryan Musgrave <[email protected]>
Co-authored-by: aveline <[email protected]>
Co-authored-by: Kyle Durand <[email protected]>
Co-authored-by: Matt Gregg <[email protected]>
Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Lo Kim <[email protected]>
Co-authored-by: Ben Scott <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>
Co-authored-by: Sam Rose <[email protected]>
Co-authored-by: Sam Rose <[email protected]>
Co-authored-by: Marc Thomas <[email protected]>
Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>
Co-authored-by: Joe Thomas <[email protected]>
Co-authored-by: Yuraima Estevez <[email protected]>
Co-authored-by: shopify-github-actions-access[bot] <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this issue Jul 27, 2023
@lgriffee @juzser
Migrate z-index custom properties from v10 to v11 (Shopify#8423)
1a7c568 
### WHY are these changes introduced?

Part of Shopify#8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-zindex`](Shopify#8272)
from `@shopify/polaris-migrator` to migrate `z-index` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react

npx @shopify/[email protected] \ 
v11-styles-replace-custom-property-zindex \
'./src/**/*.scss'

npx prettier --write "./src/**/*.scss"
```
juzser pushed a commit to juzser/polaris that referenced this issue Jul 27, 2023
@lgriffee @juzser
Manually migrate z-index custom properties from v10 to v11 (Sho…
93105ff 
…pify#8425)

### WHY are these changes introduced?

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

### WHAT is this pull request doing?
Finds and replaces any instances of legacy `z-index` custom properties
in non SCSS files with the repalcement map from
[`v11-styles-replace-custom-property-zindex`](Shopify#8272)
juzser added a commit to juzser/polaris that referenced this issue Jul 27, 2023
@juzser
Migrate legacy custom properties from v10 to v11 (Shopify#8426)
5f09ddb 
Part of Shopify#8405

Runs the
[`v11-styles-replace-custom-property-legacy`](Shopify#8272)
from `@shopify/polaris-migrator` to migrate `legacy` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react

npx @shopify/[email protected] \
v11-styles-replace-custom-property-legacy \
'./src/**/*.scss'

npx prettier --write "./src/**/*.scss"
```
juzser pushed a commit to juzser/polaris that referenced this issue Jul 27, 2023
@lgriffee @juzser
Migrate legacy custom properties from v10 to v11 (Shopify#8498)
b4e8555 
Part of Shopify#8405

Running this migration again after the revert of Shopify#8426.

**Changes from last PR**
- Replacement values are in `px` instead of `rem`
- Corrects replacement value of `--p-control-border-width`
- Includes 3 manual migrations

Runs the
[`v11-styles-replace-custom-property-legacy`](Shopify#8272)
from `@shopify/polaris-migrator` to migrate `legacy` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/[email protected] v11-styles-replace-custom-property-legacy './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
juzser pushed a commit to juzser/polaris that referenced this issue 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 issue Jul 27, 2023
@lgriffee @juzser
Migrate depth custom properties from v10 to v11 (Shopify#8601)
e46a4f2 
### WHY are these changes introduced?

Part of Shopify#8405 

### WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-depth`](Shopify#8272)
from `@shopify/polaris-migrator` to migrate `depth` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/[email protected] v11-styles-replace-custom-property-depth './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```
<hr>

🚨 Note: This PR will not merge until:
- [x] https://github.com/Shopify/web/pull/85942 is ready to merge (so
that we can release these changes in both polaris and web at the same
time)
- [x] Shopify#8604 is merged since one of the migrations in this PR will need
to access it
juzser pushed a commit to juzser/polaris that referenced this issue Jul 27, 2023
@lgriffee @aaronccasanova @juzser
Migrate border custom properties from v10 to v11 (Shopify#8879)
70347d4 
## WHY are these changes introduced?

Part of Shopify#8405 

## WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-border`](https://github.com/Shopify/polaris/blob/780acafd681ffeba6f5df634f290bee646557b64/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts)
from `@shopify/polaris-migrator` to migrate `border` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/polaris-migrator v11-styles-replace-custom-property-border './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```

This PR changes the `BorderAliasTokens` in the `Divider` component. As a
result, there are slight visual changes to the `Divider` component
border colors. Please see screenshots of documentation changes below:

### polaris.shopify.com 
**Before**
<img width="1760" alt="Screenshot 2023-04-11 at 11 40 06 AM"
src="https://user-images.githubusercontent.com/21976492/231247036-e7fb726d-2160-4c71-a292-c8438b4d682b.png">


**After**  
<img width="1774" alt="Screenshot 2023-04-11 at 11 48 52 AM"
src="https://user-images.githubusercontent.com/21976492/231247072-3f9bd2d0-b32b-41bf-98d5-d2d5c4e7d488.png">


#### Storybook 
**Before** 
<img width="1772" alt="Screenshot 2023-04-11 at 11 51 44 AM"
src="https://user-images.githubusercontent.com/21976492/231247343-0bbb2d79-89e0-4fed-ba77-7363597e496c.png">

**After** 
<img width="1776" alt="Screenshot 2023-04-11 at 11 40 26 AM"
src="https://user-images.githubusercontent.com/21976492/231247092-b020ca72-2e0a-4269-bd46-30953200ca39.png">

---------

Co-authored-by: Aaron Casanova <[email protected]>
juzser pushed a commit to juzser/polaris that referenced this issue 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]>
juzser pushed a commit to juzser/polaris that referenced this issue Jul 27, 2023
@lgriffee @tmlayton
@Bringer128 @aveline @kyledurand @itwasmattgregg @alex-page @laurkim @BPScott @aaronccasanova @sam-b-rose @mrcthms @chloerice @heyjoethomas @shopify-github-actions-access @github-actions @juzser
@shopify/polaris v11.0.0 major release (Shopify#7597)
7201283 
## @shopify/polaris v11.0.0

### Dependencies

- [x] Shopify#8200

### NodeJS

- [x] Shopify#8201

### TypeScript

- [x] Shopify#8203

### Components

- [x] Shopify#7349
- [x] Shopify#7397
- [x] Shopify#7962
- [x] Shopify#8187
- [x] Shopify#8184
- [x] Shopify#8206
- [x] Shopify#7990
- [x] Shopify#8468
- [x] Shopify#8577
- [x] Shopify#8631
- [x] Shopify#8962

## @shopify/polaris-tokens v7.0.0

### Tokens
- [x] Shopify#6920
- [x] Shopify#8245
- [x] Shopify#4826
- [x] Shopify#8405

## @shopify/stylelint-polaris v7.0.0
- [x] Shopify#7622
- [x] Shopify#8419

# Post @shopify/polaris v11 shipping
- [ ] Shopify#8420

## Low priority or not ready breaking changes
- [x] Remove deprecated layout components
- [x] Release Layout primitive components

---------

Co-authored-by: Tim Layton <[email protected]>
Co-authored-by: Ryan Musgrave <[email protected]>
Co-authored-by: Ryan Musgrave <[email protected]>
Co-authored-by: aveline <[email protected]>
Co-authored-by: Kyle Durand <[email protected]>
Co-authored-by: Matt Gregg <[email protected]>
Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Lo Kim <[email protected]>
Co-authored-by: Ben Scott <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>
Co-authored-by: Sam Rose <[email protected]>
Co-authored-by: Sam Rose <[email protected]>
Co-authored-by: Marc Thomas <[email protected]>
Co-authored-by: Alex Page <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>
Co-authored-by: Joe Thomas <[email protected]>
Co-authored-by: Yuraima Estevez <[email protected]>
Co-authored-by: shopify-github-actions-access[bot] <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@lgriffee lgriffee mentioned this issue Aug 3, 2023
Merged
lgriffee added a commit that referenced this issue Aug 15, 2023
@lgriffee
Remove deprecated v10 custom properties from stylelint-polaris (#9887)
a3da87e 
### WHY are these changes introduced?

Fixes #8420

### WHAT is this pull request doing?

Removes [these deprecated v10 custom
properties](#8405) from
`stylelint-polaris` which were added in
#8549 and
#9074.
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this issue Apr 22, 2024
@lgriffee @aaronccasanova
Migrate border custom properties from v10 to v11 (Shopify#8879)
47c1791 
## WHY are these changes introduced?

Part of Shopify#8405 

## WHAT is this pull request doing?

Runs the
[`v11-styles-replace-custom-property-border`](https://github.com/Shopify/polaris/blob/6e3696a9c99b7295acf99b505d858e982208600d/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts)
from `@shopify/polaris-migrator` to migrate `border` custom properties
from `v10` to `v11`. e.g.

```sh
cd polaris-react
npx @shopify/polaris-migrator v11-styles-replace-custom-property-border './src/**/*.scss'
npx prettier --write "./src/**/*.scss"
yarn lint:styles
```

This PR changes the `BorderAliasTokens` in the `Divider` component. As a
result, there are slight visual changes to the `Divider` component
border colors. Please see screenshots of documentation changes below:

### polaris.shopify.com 
**Before**
<img width="1760" alt="Screenshot 2023-04-11 at 11 40 06 AM"
src="https://user-images.githubusercontent.com/21976492/231247036-e7fb726d-2160-4c71-a292-c8438b4d682b.png">


**After**  
<img width="1774" alt="Screenshot 2023-04-11 at 11 48 52 AM"
src="https://user-images.githubusercontent.com/21976492/231247072-3f9bd2d0-b32b-41bf-98d5-d2d5c4e7d488.png">


#### Storybook 
**Before** 
<img width="1772" alt="Screenshot 2023-04-11 at 11 51 44 AM"
src="https://user-images.githubusercontent.com/21976492/231247343-0bbb2d79-89e0-4fed-ba77-7363597e496c.png">

**After** 
<img width="1776" alt="Screenshot 2023-04-11 at 11 40 26 AM"
src="https://user-images.githubusercontent.com/21976492/231247092-b020ca72-2e0a-4269-bd46-30953200ca39.png">

---------

Co-authored-by: Aaron Casanova <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lgriffee lgriffee

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove v10 legacy custom properties Shopify/polaris
1 participant
@lgriffee