diff --git a/UNRELEASED-v9.md b/UNRELEASED-v9.md index 7565447f00e..6ee22703452 100644 --- a/UNRELEASED-v9.md +++ b/UNRELEASED-v9.md @@ -19,6 +19,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t **Sass functions and mixins** +- Removed the `color()` function ([#4696](https://github.com/Shopify/polaris-react/pull/4696)) - Removed the `border-width()` function ([#4900](https://github.com/Shopify/polaris-react/pull/4900)) - Removed the `filter()` function ([#4676](https://github.com/Shopify/polaris-react/pull/4676)) - Removed the `px()` function ([#4751](https://github.com/Shopify/polaris-react/pull/4751)) diff --git a/UNRELEASED.md b/UNRELEASED.md index 4937c7ba3da..5b7e439d5e7 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -8,7 +8,6 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Enhancements -- Delete `color()` function from sass API ([#4696](https://github.com/Shopify/polaris-react/pull/4696)) - Keyboard arrow navigation support added in `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505)) - Menu role attribute value support added in `ActionList/Section` ([#4505](https://github.com/Shopify/polaris-react/pull/4505)) - Updated the styling of `DropZone.FileUpload` ([#4813](https://github.com/Shopify/polaris-react/pull/4813)) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index ad7633c3402..ed513a562f2 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -138,6 +138,34 @@ A list of functions/mixins and their value equivalents or new token values. | `border-width(thick)` | `--p-border-width-2` | | `border-width(thicker)` | `--p-border-width-3` | +#### `color()` + +Reference our [new color token file](https://github.com/Shopify/polaris-react/blob/20dba92b5b226347d4e5220246a7165319a07836/src/tokens/token-groups/color.light.json) and search for a token with an applicable semantic name. These tokens get mapped to css custom properties, if you use them make sure to prefix them with `--p-`. If you can't find a suitable token replacement hard code the color value you need. + +#### `color-icon()` + +Replace any `color-icon(, )` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for replacing those functions. + +```scss +svg { + fill: color(, ); +} + +img { + filter: filter(, ); +} +``` + +#### `color-multiply()` + +Use your browser developer tools to inspect the output color value of the function and hard code the color value you need. + +Otherwise, you can copy the function definition and use it locally. + +| Function | Source | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `color-multiply()` | [definition](https://github.com/Shopify/polaris-react/blob/b443d114d447df15d9e72914c8ca5058439a175e/documentation/guides/legacy-polaris-v8-public-api.scss#L479-L500) | + #### `duration()` | Function | Replacement Value/Token |