Create migration guidance for color functions and mixins

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

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

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(<value>, <hue>)` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for replacing those functions.
+
+```scss
+svg {
+  fill: color(<value>, <hue>);
+}
+
+img {
+  filter: filter(<value>, <hue>);
+}
+```
+
+#### `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 |