Skip to content

Commit

Permalink
[Docs] Add in color replacement maps in v12 migration guide (#10809)
Browse files Browse the repository at this point in the history 
### WHY are these changes introduced?

I added some missing color tokens in this [migration
PR](#10779). I'm adding them here
to the migration guide for v12 as a follow up.

I noticed some other color tokens were missing in the replacement map
table so I added them in as well as a separate section for the manual
replacement maps for hardcoded token values.

### 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
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
  • Loading branch information
@laurkim @mrcthms
laurkim authored and mrcthms committed Oct 12, 2023
1 parent c906088 commit b797cd0
Showing 1 changed file with 39 additions and 2 deletions.
41 changes: 39 additions & 2 deletions polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ npx @shopify/polaris-migrator v12-styles-replace-custom-property-color <path>
After migrating use the following RegExp to check for any additional instances of `color` custom properties across all file types:

```
(?:--p-color-avatar-background-experimental|--p-color-avatar-color-experimental|--p-color-avatar-style-five-background-experimental|--p-color-avatar-style-five-color-experimental|--p-color-avatar-style-four-background-experimental|--p-color-avatar-style-four-color-experimental|--p-color-avatar-style-one-background-experimental|--p-color-avatar-style-one-color-experimental|--p-color-avatar-style-three-background-experimental|--p-color-avatar-style-three-color-experimental|--p-color-avatar-style-two-background-experimental|--p-color-avatar-style-two-color-experimental|--p-color-bg|--p-color-bg-active|--p-color-bg-app-selected|--p-color-bg-backdrop-experimental|--p-color-bg-caution|--p-color-bg-caution-strong|--p-color-bg-caution-subdued|--p-color-bg-caution-subdued-active|--p-color-bg-caution-subdued-hover|--p-color-bg-critical|--p-color-bg-critical-strong|--p-color-bg-critical-strong-active|--p-color-bg-critical-strong-hover|--p-color-bg-critical-subdued|--p-color-bg-critical-subdued-active|--p-color-bg-critical-subdued-hover|--p-color-bg-disabled|--p-color-bg-hover|--p-color-bg-info|--p-color-bg-info-strong|--p-color-bg-info-subdued|--p-color-bg-info-subdued-active|--p-color-bg-info-subdued-hover|--p-color-bg-input|--p-color-bg-input-active-experimental|--p-color-bg-input-hover-experimental|--p-color-bg-inset|--p-color-bg-inset-strong|--p-color-bg-inverse-active|--p-color-bg-inverse-hover|--p-color-bg-magic|--p-color-bg-magic-active|--p-color-bg-magic-hover|--p-color-bg-magic-strong|--p-color-bg-magic-subdued|--p-color-bg-magic-subdued-hover|--p-color-bg-primary|--p-color-bg-primary-active|--p-color-bg-primary-hover|--p-color-bg-primary-subdued|--p-color-bg-primary-subdued-active|--p-color-bg-primary-subdued-hover|--p-color-bg-primary-subdued-selected|--p-color-bg-secondary-experimental|--p-color-bg-strong|--p-color-bg-strong-active|--p-color-bg-strong-hover|--p-color-bg-subdued|--p-color-bg-subdued-active|--p-color-bg-subdued-hover|--p-color-bg-success|--p-color-bg-success-strong|--p-color-bg-success-strong-active-experimental|--p-color-bg-success-strong-hover-experimental|--p-color-bg-success-subdued|--p-color-bg-success-subdued-active|--p-color-bg-success-subdued-hover|--p-color-bg-transparent-active-experimental|--p-color-bg-transparent-disabled-experimental|--p-color-bg-transparent-experimental|--p-color-bg-transparent-hover-experimental|--p-color-bg-transparent-primary-disabled-experimental|--p-color-bg-transparent-subdued-experimental|--p-color-bg-warning|--p-color-bg-warning-strong-experimental|--p-color-bg-warning-subdued-experimental|--p-color-border-critical-strong-experimental|--p-color-border-input|--p-color-border-input-active-experimental|--p-color-border-input-hover|--p-color-border-interactive|--p-color-border-interactive-active|--p-color-border-interactive-focus|--p-color-border-interactive-hover|--p-color-border-magic-strong|--p-color-border-primary|--p-color-border-strong|--p-color-border-subdued|--p-color-icon-interactive|--p-color-icon-interactive-active|--p-color-icon-interactive-hover|--p-color-icon-primary|--p-color-icon-subdued|--p-color-text-critical-hover-experimental|--p-color-text-info-strong|--p-color-text-interactive|--p-color-text-interactive-active|--p-color-text-interactive-hover|--p-color-text-interactive-inverse|--p-color-text-inverse-subdued|--p-color-text-primary|--p-color-text-primary-hover|--p-color-text-subdued|--p-color-text-warning-experimental)(?![\w-])
(?:--p-color-avatar-background-experimental|--p-color-avatar-color-experimental|--p-color-avatar-style-five-background-experimental|--p-color-avatar-style-five-color-experimental|--p-color-avatar-style-four-background-experimental|--p-color-avatar-style-four-color-experimental|--p-color-avatar-style-one-background-experimental|--p-color-avatar-style-one-color-experimental|--p-color-avatar-style-three-background-experimental|--p-color-avatar-style-three-color-experimental|--p-color-avatar-style-two-background-experimental|--p-color-avatar-style-two-color-experimental|--p-color-bg|--p-color-bg-active|--p-color-bg-app-active|--p-color-bg-app-hover|--p-color-bg-app-selected|--p-color-bg-backdrop-experimental|--p-color-bg-caution|--p-color-bg-caution-strong|--p-color-bg-caution-subdued|--p-color-bg-caution-subdued-active|--p-color-bg-caution-subdued-hover|--p-color-bg-critical|--p-color-bg-critical-strong|--p-color-bg-critical-strong-active|--p-color-bg-critical-strong-hover|--p-color-bg-critical-subdued|--p-color-bg-critical-subdued-active|--p-color-bg-critical-subdued-hover|--p-color-bg-disabled|--p-color-bg-hover|--p-color-bg-info|--p-color-bg-info-strong|--p-color-bg-info-subdued|--p-color-bg-info-subdued-active|--p-color-bg-info-subdued-hover|--p-color-bg-input|--p-color-bg-input-active-experimental|--p-color-bg-input-hover-experimental|--p-color-bg-inset|--p-color-bg-inset-strong|--p-color-bg-interactive|--p-color-bg-interactive-selected|--p-color-bg-interactive-subdued-active|--p-color-bg-interactive-subdued-hover|--p-color-bg-inverse-active|--p-color-bg-inverse-hover|--p-color-bg-magic|--p-color-bg-magic-active|--p-color-bg-magic-hover|--p-color-bg-magic-strong|--p-color-bg-magic-subdued|--p-color-bg-magic-subdued-hover|--p-color-bg-primary|--p-color-bg-primary-active|--p-color-bg-primary-disabled-experimental|--p-color-bg-primary-hover|--p-color-bg-primary-subdued|--p-color-bg-primary-subdued-active|--p-color-bg-primary-subdued-hover|--p-color-bg-primary-subdued-selected|--p-color-bg-secondary-experimental|--p-color-bg-strong|--p-color-bg-strong-active|--p-color-bg-strong-hover|--p-color-bg-subdued|--p-color-bg-subdued-active|--p-color-bg-subdued-hover|--p-color-bg-success|--p-color-bg-success-strong|--p-color-bg-success-strong-active-experimental|--p-color-bg-success-strong-hover-experimental|--p-color-bg-success-subdued|--p-color-bg-success-subdued-active|--p-color-bg-success-subdued-hover|--p-color-bg-transparent-active-experimental|--p-color-bg-transparent-disabled-experimental|--p-color-bg-transparent-experimental|--p-color-bg-transparent-hover-experimental|--p-color-bg-transparent-primary-disabled-experimental|--p-color-bg-transparent-subdued-experimental|--p-color-bg-warning|--p-color-bg-warning-strong-experimental|--p-color-bg-warning-subdued-experimental|--p-color-border-critical-strong-experimental|--p-color-border-input|--p-color-border-input-active-experimental|--p-color-border-input-hover|--p-color-border-interactive|--p-color-border-interactive-active|--p-color-border-interactive-disabled|--p-color-border-caution-subdued|--p-color-border-critical-active|--p-color-border-critical-hover|--p-color-border-critical-subdued|--p-color-border-info-subdued|--p-color-border-interactive-focus|--p-color-border-interactive-hover|--p-color-border-magic-strong|--p-color-border-primary|--p-color-border-strong|--p-color-border-subdued|--p-color-border-success-subdued|--p-color-icon-interactive|--p-color-icon-interactive-active|--p-color-icon-interactive-hover|--p-color-icon-info-strong-experimental|--p-color-icon-interactive-disabled|--p-color-icon-primary|--p-color-icon-subdued|--p-color-icon-critical-strong-experimental|--p-color-icon-critical-strong-active-experimental|--p-color-icon-critical-strong-hover-experimental|--p-color-icon-success-strong-experimental|--p-color-icon-warning-strong-experimental|--p-color-text-critical-hover-experimental|--p-color-text-info-strong|--p-color-text-interactive|--p-color-text-interactive-active|--p-color-text-interactive-disabled|--p-color-text-interactive-hover|--p-color-text-interactive-inverse|--p-color-text-inverse-subdued|--p-color-text-primary|--p-color-text-primary-hover|--p-color-text-caution-strong|--p-color-text-critical-strong|--p-color-text-magic-strong|--p-color-text-success-strong|--p-color-text-subdued|--p-color-text-warning-experimental)(?![\w-])
```

```
Expand Down Expand Up @@ -332,10 +332,13 @@ After migrating use the following RegExp to check for any additional instances o
| `--p-color-bg-primary` | `--p-color-bg-fill-brand` |
| `--p-color-bg-primary-hover` | `--p-color-bg-fill-brand-hover` |
| `--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-subdued` | `--p-color-bg-surface-brand` |
| `--p-color-bg-primary-subdued-hover` | `--p-color-bg-surface-brand-hover` |
| `--p-color-bg-primary-subdued-active` | `--p-color-bg-surface-brand-active` |
| `--p-color-bg-primary-subdued-selected` | `--p-color-bg-surface-brand-selected` |
| `--p-color-bg-app-active` | `--p-color-bg-surface-active` |
| `--p-color-bg-app-hover` | `--p-color-bg-surface-hover` |
| `--p-color-bg-app-selected` | `--p-color-bg-surface-selected` |
| `--p-color-bg-success-strong` | `--p-color-bg-fill-success` |
| `--p-color-bg-success-strong-hover-experimental` | `--p-color-bg-fill-success-hover` |
Expand Down Expand Up @@ -372,6 +375,10 @@ After migrating use the following RegExp to check for any additional instances o
| `--p-color-bg-magic-subdued-hover` | `--p-color-bg-surface-magic-hover` |
| `--p-color-bg-inset` | `--p-color-bg-fill-secondary` |
| `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` |
| `--p-color-bg-interactive` | `--p-color-bg-fill-brand` |
| `--p-color-bg-interactive-selected` | `--p-color-bg-surface-brand-selected` |
| `--p-color-bg-interactive-subdued-active` | `--p-color-bg-surface-brand-active` |
| `--p-color-bg-interactive-subdued-hover` | `--p-color-bg-surface-brand-hover` |
| `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` |
| `--p-color-bg-inverse-active` | `--p-color-bg-fill-inverse-active` |
| `--p-color-bg-transparent-experimental` | `--p-color-bg-surface-transparent` |
Expand All @@ -387,17 +394,22 @@ After migrating use the following RegExp to check for any additional instances o
| `--p-color-avatar-style-three-background-experimental` | `--p-color-avatar-three-bg-fill` |
| `--p-color-avatar-style-four-background-experimental` | `--p-color-avatar-four-bg-fill` |
| `--p-color-avatar-style-five-background-experimental` | `--p-color-avatar-five-bg-fill` |
| `--p-color-text-caution-strong` | `--p-color-text-caution` |
| `--p-color-text-subdued` | `--p-color-text-secondary` |
| `--p-color-text-interactive` | `--p-color-text-emphasis` |
| `--p-color-text-interactive-hover` | `--p-color-text-emphasis-hover` |
| `--p-color-text-interactive-active` | `--p-color-text-emphasis-active` |
| `--p-color-text-interactive-disabled` | `--p-color-text-disabled` |
| `--p-color-text-primary` | `--p-color-text-brand` |
| `--p-color-text-primary-hover` | `--p-color-text-brand-hover` |
| `--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-warning-experimental` | `--p-color-text-warning` |
| `--p-color-text-warning-experimental` | `--p-color-text-warning` |
| `--p-color-text-inverse-subdued` | `--p-color-text-inverse-secondary` |
| `--p-color-text-interactive-inverse` | `--p-color-text-link-inverse` |
| `--p-color-text-magic-strong` | `--p-color-text-magic` |
| `--p-color-text-success-strong` | `--p-color-text-success` |
| `--p-color-avatar-color-experimental` | `--p-color-avatar-text-on-bg-fill` |
| `--p-color-avatar-style-one-color-experimental` | `--p-color-avatar-one-text-on-bg-fill` |
| `--p-color-avatar-style-two-color-experimental` | `--p-color-avatar-two-text-on-bg-fill` |
Expand All @@ -408,20 +420,45 @@ After migrating use the following RegExp to check for any additional instances o
| `--p-color-icon-interactive` | `--p-color-icon-emphasis` |
| `--p-color-icon-interactive-hover` | `--p-color-icon-emphasis-hover` |
| `--p-color-icon-interactive-active` | `--p-color-icon-emphasis-active` |
| `--p-color-icon-interactive-disabled` | `--p-color-icon-disabled` |
| `--p-color-icon-info-strong-experimental` | `--p-color-text-info` |
| `--p-color-icon-primary` | `--p-color-icon-brand` |
| `--p-color-icon-critical-strong-experimental` | `--p-color-text-critical` |
| `--p-color-icon-critical-strong-active-experimental` | `--p-color-text-critical-active` |
| `--p-color-icon-critical-strong-hover-experimental` | `--p-color-text-critical-hover` |
| `--p-color-icon-success-strong-experimental` | `--p-color-text-success` |
| `--p-color-icon-warning-strong-experimental` | `--p-color-text-warning` |
| `--p-color-border-caution-subdued` | `--p-color-border-caution` |
| `--p-color-border-subdued` | `--p-color-border-secondary` |
| `--p-color-border-success-subdued` | `--p-color-border-success` |
| `--p-color-border-strong` | `--p-color-border-tertiary` |
| `--p-color-border-info-subdued` | `--p-color-border-info` |
| `--p-color-border-input` | `--p-color-input-border` |
| `--p-color-border-input-hover` | `--p-color-input-border-hover` |
| `--p-color-border-input-active-experimental` | `--p-color-input-border-active` |
| `--p-color-border-interactive` | `--p-color-border-emphasis` |
| `--p-color-border-interactive-hover` | `--p-color-border-emphasis-hover` |
| `--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-primary` | `--p-color-border-brand` |
| `--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-magic-strong` | `--p-color-border-magic-secondary` |

#### Manual replacement maps

The following color tokens are no longer supported in v12.0.0 and will need to be manually migrated to their hardcoded value.

| Deprecated Token | Replacement Value |
| ---------------------------------------------------------- | ------------------------ |
| `--p-color-bg-transparent-primary-experimental` | `rgba(0, 0, 0, 0.62)` |
| `--p-color-bg-transparent-secondary-disabled-experimental` | `rgba(0, 0, 0, 0.08)` |
| `--p-color-icon-on-color` | `rgba(255, 255, 255, 1)` |
| `--p-color-text-on-color` | `rgba(255, 255, 255, 1)` |

#### `on-color` tokens

`on-color` is being replaced by `on-bg-fill` tokens. These tokens will no longer be the same value but tailored to the bg color the element is sitting on. This gives us greater control over the visual design of the admin.
Expand Down

0 comments on commit b797cd0

Please sign in to comment.