-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
Run color
migration on next branch
#10636
Comments
5 tasks
aaronccasanova
added a commit
that referenced
this issue
Oct 2, 2023
### WHY are these changes introduced? Closes #10636 Migrates `color` custom properties. > [!Important] > Color migration needed to be run in 2 sequential steps due to overlapping `color-bg` and `color-bg-app` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 1 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 1)" ``` ## Step 2 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 2 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 2)" ``` #### Step 1 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-avatar-background-experimental` | `--p-color-avatar-bg-fill` | | `--p-color-avatar-color-experimental` | `--p-color-avatar-text-on-bg-fill` | | `--p-color-avatar-style-five-background-experimental` | `--p-color-avatar-five-bg-fill` | | `--p-color-avatar-style-five-color-experimental` | `--p-color-avatar-five-text-on-bg-fill` | | `--p-color-avatar-style-four-background-experimental` | `--p-color-avatar-four-bg-fill` | | `--p-color-avatar-style-four-color-experimental` | `--p-color-avatar-four-text-on-bg-fill` | | `--p-color-avatar-style-one-background-experimental` | `--p-color-avatar-one-bg-fill` | | `--p-color-avatar-style-one-color-experimental` | `--p-color-avatar-one-text-on-bg-fill` | | `--p-color-avatar-style-three-background-experimental` | `--p-color-avatar-three-bg-fill` | | `--p-color-avatar-style-three-color-experimental` | `--p-color-avatar-three-text-on-bg-fill` | | `--p-color-avatar-style-two-background-experimental` | `--p-color-avatar-two-bg-fill` | | `--p-color-avatar-style-two-color-experimental` | `--p-color-avatar-two-text-on-bg-fill` | | `--p-color-bg-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-selected` | `--p-color-bg-surface-selected` | | `--p-color-bg-backdrop-experimental` | `--p-color-backdrop-bg` | | `--p-color-bg-caution-strong` | `--p-color-bg-fill-caution` | | `--p-color-bg-caution-subdued-active` | `--p-color-bg-surface-caution-active` | | `--p-color-bg-caution-subdued-hover` | `--p-color-bg-surface-caution-hover` | | `--p-color-bg-caution-subdued` | `--p-color-bg-surface-caution` | | `--p-color-bg-caution` | `--p-color-bg-fill-caution-secondary` | | `--p-color-bg-critical-strong-active` | `--p-color-bg-fill-critical-active` | | `--p-color-bg-critical-strong-hover` | `--p-color-bg-fill-critical-hover` | | `--p-color-bg-critical-strong` | `--p-color-bg-fill-critical` | | `--p-color-bg-critical-subdued-active` | `--p-color-bg-surface-critical-active` | | `--p-color-bg-critical-subdued-hover` | `--p-color-bg-surface-critical-hover` | | `--p-color-bg-critical-subdued` | `--p-color-bg-surface-critical` | | `--p-color-bg-critical` | `--p-color-bg-fill-critical-secondary` | | `--p-color-bg-disabled` | `--p-color-bg-surface-disabled` | | `--p-color-bg-hover` | `--p-color-bg-surface-hover` | | `--p-color-bg-info-strong` | `--p-color-bg-fill-info` | | `--p-color-bg-info-subdued-active` | `--p-color-bg-surface-info-active` | | `--p-color-bg-info-subdued-hover` | `--p-color-bg-surface-info-hover` | | `--p-color-bg-info-subdued` | `--p-color-bg-surface-info` | | `--p-color-bg-info` | `--p-color-bg-fill-info-secondary` | | `--p-color-bg-input-active-experimental` | `--p-color-input-bg-surface-active` | | `--p-color-bg-input-hover-experimental` | `--p-color-input-bg-surface-hover` | | `--p-color-bg-input` | `--p-color-input-bg-surface` | | `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` | | `--p-color-bg-inset` | `--p-color-bg-fill-secondary` | | `--p-color-bg-inverse-active` | `--p-color-bg-fill-inverse-active` | | `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` | | `--p-color-bg-magic-active` | `--p-color-bg-fill-magic-secondary-active` | | `--p-color-bg-magic-hover` | `--p-color-bg-fill-magic-secondary-hover` | | `--p-color-bg-magic-strong` | `--p-color-bg-fill-magic` | | `--p-color-bg-magic-subdued-hover` | `--p-color-bg-surface-magic-hover` | | `--p-color-bg-magic-subdued` | `--p-color-bg-surface-magic` | | `--p-color-bg-magic` | `--p-color-bg-fill-magic-secondary` | | `--p-color-bg-primary-active` | `--p-color-bg-fill-brand-active` | | `--p-color-bg-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-primary-hover` | `--p-color-bg-fill-brand-hover` | | `--p-color-bg-primary-subdued-active` | `--p-color-bg-surface-brand-active` | | `--p-color-bg-primary-subdued-hover` | `--p-color-bg-surface-brand-hover` | | `--p-color-bg-primary-subdued-selected` | `--p-color-bg-surface-brand-selected` | | `--p-color-bg-primary-subdued` | `--p-color-bg-surface-brand` | | `--p-color-bg-primary` | `--p-color-bg-fill-brand` | | `--p-color-bg-secondary-experimental` | `--p-color-bg-surface-tertiary` | | `--p-color-bg-strong-active` | `--p-color-bg-fill-tertiary-active` | | `--p-color-bg-strong-hover` | `--p-color-bg-fill-tertiary-hover` | | `--p-color-bg-strong` | `--p-color-bg-fill-tertiary` | | `--p-color-bg-subdued-active` | `--p-color-bg-surface-secondary-active` | | `--p-color-bg-subdued-hover` | `--p-color-bg-surface-secondary-hover` | | `--p-color-bg-subdued` | `--p-color-bg-surface-secondary` | | `--p-color-bg-success-strong-active-experimental` | `--p-color-bg-fill-success-active` | | `--p-color-bg-success-strong-hover-experimental` | `--p-color-bg-fill-success-hover` | | `--p-color-bg-success-strong` | `--p-color-bg-fill-success` | | `--p-color-bg-success-subdued-active` | `--p-color-bg-surface-success-active` | | `--p-color-bg-success-subdued-hover` | `--p-color-bg-surface-success-hover` | | `--p-color-bg-success-subdued` | `--p-color-bg-surface-success` | | `--p-color-bg-success` | `--p-color-bg-fill-success-secondary` | | `--p-color-bg-transparent-active-experimental` | `--p-color-bg-fill-transparent-active` | | `--p-color-bg-transparent-disabled-experimental` | `--p-color-bg-fill-disabled` | | `--p-color-bg-transparent-experimental` | `--p-color-bg-surface-transparent` | | `--p-color-bg-transparent-hover-experimental` | `--p-color-bg-fill-transparent-hover` | | `--p-color-bg-transparent-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-transparent-subdued-experimental` | `--p-color-bg-fill-transparent-secondary` | | `--p-color-bg-warning-strong-experimental` | `--p-color-bg-fill-warning` | | `--p-color-bg-warning-subdued-experimental` | `--p-color-bg-surface-warning` | | `--p-color-bg-warning` | `--p-color-bg-fill-warning-secondary` | | `--p-color-bg` | `--p-color-bg-surface` | | `--p-color-border-caution-subdued` | `--p-color-border-caution` | | `--p-color-border-critical-active` | `--p-color-border-critical` | | `--p-color-border-critical-hover` | `--p-color-border-critical` | | `--p-color-border-critical-strong-experimental` | `--p-color-border-critical-secondary` | | `--p-color-border-critical-subdued` | `--p-color-border-critical` | | `--p-color-border-info-subdued` | `--p-color-border-info` | | `--p-color-border-input-active-experimental` | `--p-color-input-border-active` | | `--p-color-border-input-hover` | `--p-color-input-border-hover` | | `--p-color-border-input` | `--p-color-input-border` | | `--p-color-border-interactive-active` | `--p-color-border-emphasis-active` | | `--p-color-border-interactive-disabled` | `--p-color-border-disabled` | | `--p-color-border-interactive-focus` | `--p-color-border-focus` | | `--p-color-border-interactive-hover` | `--p-color-border-emphasis-hover` | | `--p-color-border-interactive` | `--p-color-border-emphasis` | | `--p-color-border-magic-strong` | `--p-color-border-magic-secondary` | | `--p-color-border-primary` | `--p-color-border-brand` | | `--p-color-border-strong` | `--p-color-border-tertiary` | | `--p-color-border-subdued` | `--p-color-border-secondary` | | `--p-color-border-success-subdued` | `--p-color-border-success` | | `--p-color-icon-critical-strong-active-experimental` | `--p-color-text-critical-active` | | `--p-color-icon-critical-strong-experimental` | `--p-color-text-critical` | | `--p-color-icon-info-strong-experimental` | `--p-color-text-info` | | `--p-color-icon-interactive-active` | `--p-color-icon-emphasis-active` | | `--p-color-icon-interactive-disabled` | `--p-color-icon-disabled` | | `--p-color-icon-interactive-hover` | `--p-color-icon-emphasis-hover` | | `--p-color-icon-interactive` | `--p-color-icon-emphasis` | | `--p-color-icon-primary` | `--p-color-icon-brand` | | `--p-color-icon-subdued` | `--p-color-icon-secondary` | | `--p-color-icon-success-strong-experimental` | `--p-color-text-success` | | `--p-color-icon-warning-strong-experimental` | `--p-color-text-warning` | | `--p-color-text-caution-strong` | `--p-color-text-caution` | | `--p-color-text-critical-hover-experimental` | `--p-color-text-critical-hover` | | `--p-color-text-critical-strong` | `--p-color-text-critical` | | `--p-color-text-info-strong` | `--p-color-text-info-on-bg-fill` | | `--p-color-text-interactive-active` | `--p-color-text-emphasis-active` | | `--p-color-text-interactive-disabled` | `--p-color-text-disabled` | | `--p-color-text-interactive-hover` | `--p-color-text-emphasis-hover` | | `--p-color-text-interactive-inverse` | `--p-color-text-link-inverse` | | `--p-color-text-interactive` | `--p-color-text-emphasis` | | `--p-color-text-inverse-subdued` | `--p-color-text-inverse-secondary` | | `--p-color-text-magic-strong` | `--p-color-text-magic` | | `--p-color-text-primary-hover` | `--p-color-text-brand-hover` | | `--p-color-text-primary` | `--p-color-text-brand` | | `--p-color-text-subdued` | `--p-color-text-secondary` | | `--p-color-text-success-strong` | `--p-color-text-success` | | `--p-color-text-warning-experimental` | `--p-color-text-warning` | #### Step 2 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-bg-app` | `--p-color-bg` | #### Manual replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-icon-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-text-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-bg-transparent-primary-experimental` | `rgba(0, 0, 0, 0.62)` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
mrcthms
pushed a commit
that referenced
this issue
Oct 12, 2023
### WHY are these changes introduced? Closes #10636 Migrates `color` custom properties. > [!Important] > Color migration needed to be run in 2 sequential steps due to overlapping `color-bg` and `color-bg-app` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 1 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 1)" ``` ## Step 2 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 2 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 2)" ``` #### Step 1 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-avatar-background-experimental` | `--p-color-avatar-bg-fill` | | `--p-color-avatar-color-experimental` | `--p-color-avatar-text-on-bg-fill` | | `--p-color-avatar-style-five-background-experimental` | `--p-color-avatar-five-bg-fill` | | `--p-color-avatar-style-five-color-experimental` | `--p-color-avatar-five-text-on-bg-fill` | | `--p-color-avatar-style-four-background-experimental` | `--p-color-avatar-four-bg-fill` | | `--p-color-avatar-style-four-color-experimental` | `--p-color-avatar-four-text-on-bg-fill` | | `--p-color-avatar-style-one-background-experimental` | `--p-color-avatar-one-bg-fill` | | `--p-color-avatar-style-one-color-experimental` | `--p-color-avatar-one-text-on-bg-fill` | | `--p-color-avatar-style-three-background-experimental` | `--p-color-avatar-three-bg-fill` | | `--p-color-avatar-style-three-color-experimental` | `--p-color-avatar-three-text-on-bg-fill` | | `--p-color-avatar-style-two-background-experimental` | `--p-color-avatar-two-bg-fill` | | `--p-color-avatar-style-two-color-experimental` | `--p-color-avatar-two-text-on-bg-fill` | | `--p-color-bg-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-selected` | `--p-color-bg-surface-selected` | | `--p-color-bg-backdrop-experimental` | `--p-color-backdrop-bg` | | `--p-color-bg-caution-strong` | `--p-color-bg-fill-caution` | | `--p-color-bg-caution-subdued-active` | `--p-color-bg-surface-caution-active` | | `--p-color-bg-caution-subdued-hover` | `--p-color-bg-surface-caution-hover` | | `--p-color-bg-caution-subdued` | `--p-color-bg-surface-caution` | | `--p-color-bg-caution` | `--p-color-bg-fill-caution-secondary` | | `--p-color-bg-critical-strong-active` | `--p-color-bg-fill-critical-active` | | `--p-color-bg-critical-strong-hover` | `--p-color-bg-fill-critical-hover` | | `--p-color-bg-critical-strong` | `--p-color-bg-fill-critical` | | `--p-color-bg-critical-subdued-active` | `--p-color-bg-surface-critical-active` | | `--p-color-bg-critical-subdued-hover` | `--p-color-bg-surface-critical-hover` | | `--p-color-bg-critical-subdued` | `--p-color-bg-surface-critical` | | `--p-color-bg-critical` | `--p-color-bg-fill-critical-secondary` | | `--p-color-bg-disabled` | `--p-color-bg-surface-disabled` | | `--p-color-bg-hover` | `--p-color-bg-surface-hover` | | `--p-color-bg-info-strong` | `--p-color-bg-fill-info` | | `--p-color-bg-info-subdued-active` | `--p-color-bg-surface-info-active` | | `--p-color-bg-info-subdued-hover` | `--p-color-bg-surface-info-hover` | | `--p-color-bg-info-subdued` | `--p-color-bg-surface-info` | | `--p-color-bg-info` | `--p-color-bg-fill-info-secondary` | | `--p-color-bg-input-active-experimental` | `--p-color-input-bg-surface-active` | | `--p-color-bg-input-hover-experimental` | `--p-color-input-bg-surface-hover` | | `--p-color-bg-input` | `--p-color-input-bg-surface` | | `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` | | `--p-color-bg-inset` | `--p-color-bg-fill-secondary` | | `--p-color-bg-inverse-active` | `--p-color-bg-fill-inverse-active` | | `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` | | `--p-color-bg-magic-active` | `--p-color-bg-fill-magic-secondary-active` | | `--p-color-bg-magic-hover` | `--p-color-bg-fill-magic-secondary-hover` | | `--p-color-bg-magic-strong` | `--p-color-bg-fill-magic` | | `--p-color-bg-magic-subdued-hover` | `--p-color-bg-surface-magic-hover` | | `--p-color-bg-magic-subdued` | `--p-color-bg-surface-magic` | | `--p-color-bg-magic` | `--p-color-bg-fill-magic-secondary` | | `--p-color-bg-primary-active` | `--p-color-bg-fill-brand-active` | | `--p-color-bg-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-primary-hover` | `--p-color-bg-fill-brand-hover` | | `--p-color-bg-primary-subdued-active` | `--p-color-bg-surface-brand-active` | | `--p-color-bg-primary-subdued-hover` | `--p-color-bg-surface-brand-hover` | | `--p-color-bg-primary-subdued-selected` | `--p-color-bg-surface-brand-selected` | | `--p-color-bg-primary-subdued` | `--p-color-bg-surface-brand` | | `--p-color-bg-primary` | `--p-color-bg-fill-brand` | | `--p-color-bg-secondary-experimental` | `--p-color-bg-surface-tertiary` | | `--p-color-bg-strong-active` | `--p-color-bg-fill-tertiary-active` | | `--p-color-bg-strong-hover` | `--p-color-bg-fill-tertiary-hover` | | `--p-color-bg-strong` | `--p-color-bg-fill-tertiary` | | `--p-color-bg-subdued-active` | `--p-color-bg-surface-secondary-active` | | `--p-color-bg-subdued-hover` | `--p-color-bg-surface-secondary-hover` | | `--p-color-bg-subdued` | `--p-color-bg-surface-secondary` | | `--p-color-bg-success-strong-active-experimental` | `--p-color-bg-fill-success-active` | | `--p-color-bg-success-strong-hover-experimental` | `--p-color-bg-fill-success-hover` | | `--p-color-bg-success-strong` | `--p-color-bg-fill-success` | | `--p-color-bg-success-subdued-active` | `--p-color-bg-surface-success-active` | | `--p-color-bg-success-subdued-hover` | `--p-color-bg-surface-success-hover` | | `--p-color-bg-success-subdued` | `--p-color-bg-surface-success` | | `--p-color-bg-success` | `--p-color-bg-fill-success-secondary` | | `--p-color-bg-transparent-active-experimental` | `--p-color-bg-fill-transparent-active` | | `--p-color-bg-transparent-disabled-experimental` | `--p-color-bg-fill-disabled` | | `--p-color-bg-transparent-experimental` | `--p-color-bg-surface-transparent` | | `--p-color-bg-transparent-hover-experimental` | `--p-color-bg-fill-transparent-hover` | | `--p-color-bg-transparent-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-transparent-subdued-experimental` | `--p-color-bg-fill-transparent-secondary` | | `--p-color-bg-warning-strong-experimental` | `--p-color-bg-fill-warning` | | `--p-color-bg-warning-subdued-experimental` | `--p-color-bg-surface-warning` | | `--p-color-bg-warning` | `--p-color-bg-fill-warning-secondary` | | `--p-color-bg` | `--p-color-bg-surface` | | `--p-color-border-caution-subdued` | `--p-color-border-caution` | | `--p-color-border-critical-active` | `--p-color-border-critical` | | `--p-color-border-critical-hover` | `--p-color-border-critical` | | `--p-color-border-critical-strong-experimental` | `--p-color-border-critical-secondary` | | `--p-color-border-critical-subdued` | `--p-color-border-critical` | | `--p-color-border-info-subdued` | `--p-color-border-info` | | `--p-color-border-input-active-experimental` | `--p-color-input-border-active` | | `--p-color-border-input-hover` | `--p-color-input-border-hover` | | `--p-color-border-input` | `--p-color-input-border` | | `--p-color-border-interactive-active` | `--p-color-border-emphasis-active` | | `--p-color-border-interactive-disabled` | `--p-color-border-disabled` | | `--p-color-border-interactive-focus` | `--p-color-border-focus` | | `--p-color-border-interactive-hover` | `--p-color-border-emphasis-hover` | | `--p-color-border-interactive` | `--p-color-border-emphasis` | | `--p-color-border-magic-strong` | `--p-color-border-magic-secondary` | | `--p-color-border-primary` | `--p-color-border-brand` | | `--p-color-border-strong` | `--p-color-border-tertiary` | | `--p-color-border-subdued` | `--p-color-border-secondary` | | `--p-color-border-success-subdued` | `--p-color-border-success` | | `--p-color-icon-critical-strong-active-experimental` | `--p-color-text-critical-active` | | `--p-color-icon-critical-strong-experimental` | `--p-color-text-critical` | | `--p-color-icon-info-strong-experimental` | `--p-color-text-info` | | `--p-color-icon-interactive-active` | `--p-color-icon-emphasis-active` | | `--p-color-icon-interactive-disabled` | `--p-color-icon-disabled` | | `--p-color-icon-interactive-hover` | `--p-color-icon-emphasis-hover` | | `--p-color-icon-interactive` | `--p-color-icon-emphasis` | | `--p-color-icon-primary` | `--p-color-icon-brand` | | `--p-color-icon-subdued` | `--p-color-icon-secondary` | | `--p-color-icon-success-strong-experimental` | `--p-color-text-success` | | `--p-color-icon-warning-strong-experimental` | `--p-color-text-warning` | | `--p-color-text-caution-strong` | `--p-color-text-caution` | | `--p-color-text-critical-hover-experimental` | `--p-color-text-critical-hover` | | `--p-color-text-critical-strong` | `--p-color-text-critical` | | `--p-color-text-info-strong` | `--p-color-text-info-on-bg-fill` | | `--p-color-text-interactive-active` | `--p-color-text-emphasis-active` | | `--p-color-text-interactive-disabled` | `--p-color-text-disabled` | | `--p-color-text-interactive-hover` | `--p-color-text-emphasis-hover` | | `--p-color-text-interactive-inverse` | `--p-color-text-link-inverse` | | `--p-color-text-interactive` | `--p-color-text-emphasis` | | `--p-color-text-inverse-subdued` | `--p-color-text-inverse-secondary` | | `--p-color-text-magic-strong` | `--p-color-text-magic` | | `--p-color-text-primary-hover` | `--p-color-text-brand-hover` | | `--p-color-text-primary` | `--p-color-text-brand` | | `--p-color-text-subdued` | `--p-color-text-secondary` | | `--p-color-text-success-strong` | `--p-color-text-success` | | `--p-color-text-warning-experimental` | `--p-color-text-warning` | #### Step 2 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-bg-app` | `--p-color-bg` | #### Manual replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-icon-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-text-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-bg-transparent-primary-experimental` | `rgba(0, 0, 0, 0.62)` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
mrcthms
pushed a commit
that referenced
this issue
Oct 12, 2023
### WHY are these changes introduced? Closes #10636 Migrates `color` custom properties. > [!Important] > Color migration needed to be run in 2 sequential steps due to overlapping `color-bg` and `color-bg-app` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 1 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 1)" ``` ## Step 2 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 2 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 2)" ``` #### Step 1 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-avatar-background-experimental` | `--p-color-avatar-bg-fill` | | `--p-color-avatar-color-experimental` | `--p-color-avatar-text-on-bg-fill` | | `--p-color-avatar-style-five-background-experimental` | `--p-color-avatar-five-bg-fill` | | `--p-color-avatar-style-five-color-experimental` | `--p-color-avatar-five-text-on-bg-fill` | | `--p-color-avatar-style-four-background-experimental` | `--p-color-avatar-four-bg-fill` | | `--p-color-avatar-style-four-color-experimental` | `--p-color-avatar-four-text-on-bg-fill` | | `--p-color-avatar-style-one-background-experimental` | `--p-color-avatar-one-bg-fill` | | `--p-color-avatar-style-one-color-experimental` | `--p-color-avatar-one-text-on-bg-fill` | | `--p-color-avatar-style-three-background-experimental` | `--p-color-avatar-three-bg-fill` | | `--p-color-avatar-style-three-color-experimental` | `--p-color-avatar-three-text-on-bg-fill` | | `--p-color-avatar-style-two-background-experimental` | `--p-color-avatar-two-bg-fill` | | `--p-color-avatar-style-two-color-experimental` | `--p-color-avatar-two-text-on-bg-fill` | | `--p-color-bg-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-selected` | `--p-color-bg-surface-selected` | | `--p-color-bg-backdrop-experimental` | `--p-color-backdrop-bg` | | `--p-color-bg-caution-strong` | `--p-color-bg-fill-caution` | | `--p-color-bg-caution-subdued-active` | `--p-color-bg-surface-caution-active` | | `--p-color-bg-caution-subdued-hover` | `--p-color-bg-surface-caution-hover` | | `--p-color-bg-caution-subdued` | `--p-color-bg-surface-caution` | | `--p-color-bg-caution` | `--p-color-bg-fill-caution-secondary` | | `--p-color-bg-critical-strong-active` | `--p-color-bg-fill-critical-active` | | `--p-color-bg-critical-strong-hover` | `--p-color-bg-fill-critical-hover` | | `--p-color-bg-critical-strong` | `--p-color-bg-fill-critical` | | `--p-color-bg-critical-subdued-active` | `--p-color-bg-surface-critical-active` | | `--p-color-bg-critical-subdued-hover` | `--p-color-bg-surface-critical-hover` | | `--p-color-bg-critical-subdued` | `--p-color-bg-surface-critical` | | `--p-color-bg-critical` | `--p-color-bg-fill-critical-secondary` | | `--p-color-bg-disabled` | `--p-color-bg-surface-disabled` | | `--p-color-bg-hover` | `--p-color-bg-surface-hover` | | `--p-color-bg-info-strong` | `--p-color-bg-fill-info` | | `--p-color-bg-info-subdued-active` | `--p-color-bg-surface-info-active` | | `--p-color-bg-info-subdued-hover` | `--p-color-bg-surface-info-hover` | | `--p-color-bg-info-subdued` | `--p-color-bg-surface-info` | | `--p-color-bg-info` | `--p-color-bg-fill-info-secondary` | | `--p-color-bg-input-active-experimental` | `--p-color-input-bg-surface-active` | | `--p-color-bg-input-hover-experimental` | `--p-color-input-bg-surface-hover` | | `--p-color-bg-input` | `--p-color-input-bg-surface` | | `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` | | `--p-color-bg-inset` | `--p-color-bg-fill-secondary` | | `--p-color-bg-inverse-active` | `--p-color-bg-fill-inverse-active` | | `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` | | `--p-color-bg-magic-active` | `--p-color-bg-fill-magic-secondary-active` | | `--p-color-bg-magic-hover` | `--p-color-bg-fill-magic-secondary-hover` | | `--p-color-bg-magic-strong` | `--p-color-bg-fill-magic` | | `--p-color-bg-magic-subdued-hover` | `--p-color-bg-surface-magic-hover` | | `--p-color-bg-magic-subdued` | `--p-color-bg-surface-magic` | | `--p-color-bg-magic` | `--p-color-bg-fill-magic-secondary` | | `--p-color-bg-primary-active` | `--p-color-bg-fill-brand-active` | | `--p-color-bg-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-primary-hover` | `--p-color-bg-fill-brand-hover` | | `--p-color-bg-primary-subdued-active` | `--p-color-bg-surface-brand-active` | | `--p-color-bg-primary-subdued-hover` | `--p-color-bg-surface-brand-hover` | | `--p-color-bg-primary-subdued-selected` | `--p-color-bg-surface-brand-selected` | | `--p-color-bg-primary-subdued` | `--p-color-bg-surface-brand` | | `--p-color-bg-primary` | `--p-color-bg-fill-brand` | | `--p-color-bg-secondary-experimental` | `--p-color-bg-surface-tertiary` | | `--p-color-bg-strong-active` | `--p-color-bg-fill-tertiary-active` | | `--p-color-bg-strong-hover` | `--p-color-bg-fill-tertiary-hover` | | `--p-color-bg-strong` | `--p-color-bg-fill-tertiary` | | `--p-color-bg-subdued-active` | `--p-color-bg-surface-secondary-active` | | `--p-color-bg-subdued-hover` | `--p-color-bg-surface-secondary-hover` | | `--p-color-bg-subdued` | `--p-color-bg-surface-secondary` | | `--p-color-bg-success-strong-active-experimental` | `--p-color-bg-fill-success-active` | | `--p-color-bg-success-strong-hover-experimental` | `--p-color-bg-fill-success-hover` | | `--p-color-bg-success-strong` | `--p-color-bg-fill-success` | | `--p-color-bg-success-subdued-active` | `--p-color-bg-surface-success-active` | | `--p-color-bg-success-subdued-hover` | `--p-color-bg-surface-success-hover` | | `--p-color-bg-success-subdued` | `--p-color-bg-surface-success` | | `--p-color-bg-success` | `--p-color-bg-fill-success-secondary` | | `--p-color-bg-transparent-active-experimental` | `--p-color-bg-fill-transparent-active` | | `--p-color-bg-transparent-disabled-experimental` | `--p-color-bg-fill-disabled` | | `--p-color-bg-transparent-experimental` | `--p-color-bg-surface-transparent` | | `--p-color-bg-transparent-hover-experimental` | `--p-color-bg-fill-transparent-hover` | | `--p-color-bg-transparent-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-transparent-subdued-experimental` | `--p-color-bg-fill-transparent-secondary` | | `--p-color-bg-warning-strong-experimental` | `--p-color-bg-fill-warning` | | `--p-color-bg-warning-subdued-experimental` | `--p-color-bg-surface-warning` | | `--p-color-bg-warning` | `--p-color-bg-fill-warning-secondary` | | `--p-color-bg` | `--p-color-bg-surface` | | `--p-color-border-caution-subdued` | `--p-color-border-caution` | | `--p-color-border-critical-active` | `--p-color-border-critical` | | `--p-color-border-critical-hover` | `--p-color-border-critical` | | `--p-color-border-critical-strong-experimental` | `--p-color-border-critical-secondary` | | `--p-color-border-critical-subdued` | `--p-color-border-critical` | | `--p-color-border-info-subdued` | `--p-color-border-info` | | `--p-color-border-input-active-experimental` | `--p-color-input-border-active` | | `--p-color-border-input-hover` | `--p-color-input-border-hover` | | `--p-color-border-input` | `--p-color-input-border` | | `--p-color-border-interactive-active` | `--p-color-border-emphasis-active` | | `--p-color-border-interactive-disabled` | `--p-color-border-disabled` | | `--p-color-border-interactive-focus` | `--p-color-border-focus` | | `--p-color-border-interactive-hover` | `--p-color-border-emphasis-hover` | | `--p-color-border-interactive` | `--p-color-border-emphasis` | | `--p-color-border-magic-strong` | `--p-color-border-magic-secondary` | | `--p-color-border-primary` | `--p-color-border-brand` | | `--p-color-border-strong` | `--p-color-border-tertiary` | | `--p-color-border-subdued` | `--p-color-border-secondary` | | `--p-color-border-success-subdued` | `--p-color-border-success` | | `--p-color-icon-critical-strong-active-experimental` | `--p-color-text-critical-active` | | `--p-color-icon-critical-strong-experimental` | `--p-color-text-critical` | | `--p-color-icon-info-strong-experimental` | `--p-color-text-info` | | `--p-color-icon-interactive-active` | `--p-color-icon-emphasis-active` | | `--p-color-icon-interactive-disabled` | `--p-color-icon-disabled` | | `--p-color-icon-interactive-hover` | `--p-color-icon-emphasis-hover` | | `--p-color-icon-interactive` | `--p-color-icon-emphasis` | | `--p-color-icon-primary` | `--p-color-icon-brand` | | `--p-color-icon-subdued` | `--p-color-icon-secondary` | | `--p-color-icon-success-strong-experimental` | `--p-color-text-success` | | `--p-color-icon-warning-strong-experimental` | `--p-color-text-warning` | | `--p-color-text-caution-strong` | `--p-color-text-caution` | | `--p-color-text-critical-hover-experimental` | `--p-color-text-critical-hover` | | `--p-color-text-critical-strong` | `--p-color-text-critical` | | `--p-color-text-info-strong` | `--p-color-text-info-on-bg-fill` | | `--p-color-text-interactive-active` | `--p-color-text-emphasis-active` | | `--p-color-text-interactive-disabled` | `--p-color-text-disabled` | | `--p-color-text-interactive-hover` | `--p-color-text-emphasis-hover` | | `--p-color-text-interactive-inverse` | `--p-color-text-link-inverse` | | `--p-color-text-interactive` | `--p-color-text-emphasis` | | `--p-color-text-inverse-subdued` | `--p-color-text-inverse-secondary` | | `--p-color-text-magic-strong` | `--p-color-text-magic` | | `--p-color-text-primary-hover` | `--p-color-text-brand-hover` | | `--p-color-text-primary` | `--p-color-text-brand` | | `--p-color-text-subdued` | `--p-color-text-secondary` | | `--p-color-text-success-strong` | `--p-color-text-success` | | `--p-color-text-warning-experimental` | `--p-color-text-warning` | #### Step 2 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-bg-app` | `--p-color-bg` | #### Manual replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-icon-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-text-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-bg-transparent-primary-experimental` | `rgba(0, 0, 0, 0.62)` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: