From a363964528a6da63ca4bdc0bfa5e3e92f2b767c2 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 7 Feb 2022 16:22:58 -0700 Subject: [PATCH 1/7] Add in all color function and mixin headers --- documentation/guides/migrating-from-v8-to-v9.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 32ea7d24904..a682e7e963d 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -89,6 +89,12 @@ To help you quickly add these functions and mixins back to your repo, we've crea A list of functions/mixins and their value equivalents or new token values. +#### `color()` + +#### `color-icon()` + +#### `color-multiply()` + #### `duration()` | Function | Replacement Value/Token | From e17684fa4e3507e661add069c1643da3d55c15d5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 7 Feb 2022 16:25:13 -0700 Subject: [PATCH 2/7] Move color() UNRELEASED entry to v9 doc --- UNRELEASED-v9.md | 1 + UNRELEASED.md | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v9.md b/UNRELEASED-v9.md index f9da39e930d..c8587b256e1 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 `filter()` function ([#4676](https://github.com/Shopify/polaris-react/pull/4676)) - Removed the `px()` function ([#4751](https://github.com/Shopify/polaris-react/pull/4751)) - Removed the `em()` function ([#4937](https://github.com/Shopify/polaris-react/pull/4937)) diff --git a/UNRELEASED.md b/UNRELEASED.md index deda771a28f..da1d8d9108f 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)) From 202b9e37e5dd91c09fa4c92592221b84ca943692 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 7 Feb 2022 17:04:16 -0700 Subject: [PATCH 3/7] Add documentation for color functions and mixins --- .../guides/migrating-from-v8-to-v9.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index a682e7e963d..2dc71f12778 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -91,10 +91,30 @@ A list of functions/mixins and their value equivalents or new token values. #### `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. 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()` and `filter()` sections for repalcing those functions. + +```scss +svg { + fill: color(, ); +} + +img { + filter: filter(, ); +} +``` + +| Function | Replacement Value/Token | +| ---------------------------- | ------------------------------------------------------------------------------- | +| `color-icon(, )` | svg {fill: color(\, \);}
img {filter: filter(\, \);} | + #### `color-multiply()` +Use browser developer tools to inspect the output color value of the function and hard code the color value you need. + #### `duration()` | Function | Replacement Value/Token | From 42fee0686fbe591f6bcbb0c9bdbb7d23be45c482 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 8 Feb 2022 09:30:01 -0700 Subject: [PATCH 4/7] Wording and presentation revisions --- documentation/guides/migrating-from-v8-to-v9.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 2dc71f12778..0d5499291de 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -107,13 +107,9 @@ img { } ``` -| Function | Replacement Value/Token | -| ---------------------------- | ------------------------------------------------------------------------------- | -| `color-icon(, )` | svg {fill: color(\, \);}
img {filter: filter(\, \);} | - #### `color-multiply()` -Use browser developer tools to inspect the output color value of the function and hard code the color value you need. +Use your browser developer tools to inspect the output color value of the function and hard code the color value you need. #### `duration()` From ff47a6fed75921ff665011fd9b6b1850bcbd48ea Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 8 Feb 2022 10:50:38 -0700 Subject: [PATCH 5/7] Link out section references --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 0d5499291de..e4726ea3065 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -95,7 +95,7 @@ Reference our [new color token file](https://github.com/Shopify/polaris-react/bl #### `color-icon()` -Replace any `color-icon(, )` instances with the following code block. See the `color()` and `filter()` sections for repalcing those functions. +Replace any `color-icon(, )` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for repalcing those functions. ```scss svg { From 34eb0e97cb3487a326ac4bfb69d5b62b283253ff Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 9 Feb 2022 10:47:05 -0700 Subject: [PATCH 6/7] Fix typo --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index e4726ea3065..9e7673f8abe 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -95,7 +95,7 @@ Reference our [new color token file](https://github.com/Shopify/polaris-react/bl #### `color-icon()` -Replace any `color-icon(, )` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for repalcing those functions. +Replace any `color-icon(, )` instances with the following code block. See the [`color()`](#color) and [`filter()`](#filter) sections for replacing those functions. ```scss svg { From 4d3207b08f384566eb6249cab92344d553bbfd28 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 11:05:57 -0700 Subject: [PATCH 7/7] Add clarification to documentation --- documentation/guides/migrating-from-v8-to-v9.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 94a42aa1457..ed513a562f2 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -140,7 +140,7 @@ A list of functions/mixins and their value equivalents or new token values. #### `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. If you can't find a suitable token replacement hard code the color value you need. +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()` @@ -160,6 +160,12 @@ img { 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 |