From 0bc3a23aeaca60ffdbd7134c901744eb68394a00 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 9 Feb 2022 10:03:51 -0700 Subject: [PATCH 1/2] Add documentation for high-contrast-outline() and high-contrast-border() --- .../guides/migrating-from-v8-to-v9.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 32ea7d24904..62e40a130e0 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -89,6 +89,8 @@ 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. +#### `border-width()` + #### `duration()` | Function | Replacement Value/Token | @@ -178,6 +180,28 @@ We replaced a few of the following filter function instances with color tokens i | `filter('icon')`
`filter('icon', 'base')` | `brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%)` | | `filter('action')`
`filter('action', 'base')` | `brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%) contrast(101%)` | +#### `high-contrast-outline()` + +| Mixin | Replacement Value/Token | +| --------------------------------------------------------------- | ----------------------------------------------------- | +| `@include high-contrast-outline` | `outline: var(--p-border-width-1) solid transparent;` | +| `@include high-contrast-outline($border-width: )` | `outline: solid transparent;` | + +For `` instances that are functions, see the [`border-width()`](#border-width) section for repalcing it. + +For `` instances that are hard coded values, see if you can replace it with one of our [new border-width tokens](https://github.com/Shopify/polaris-react/blob/77e8669595a4964ff5ce399967661a7621ea2a4d/src/tokens/token-groups/shape.json), otherwise leave it hardcoded. + +#### `high-contrast-border()` + +| Mixin | Replacement Value/Token | +| -------------------------------------------------------------- | ---------------------------------------------------- | +| `@include high-contrast-border` | `border: var(--p-border-width-1) solid transparent;` | +| `@include high-contrast-border($border-width: )` | `border: solid transparent;` | + +For `` instances that are functions, see the [`border-width()`](#border-width) section for repalcing it. + +For `` instances that are hard coded values, see if you can replace it with one of our [new border-width tokens](https://github.com/Shopify/polaris-react/blob/77e8669595a4964ff5ce399967661a7621ea2a4d/src/tokens/token-groups/shape.json), otherwise leave it hardcoded. + #### `ms-high-contrast-color()` | Function | Replacement Value/Token | From ef6d310a6aa7a3d45825753612d469dd9c9dc050 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 9 Feb 2022 10:44:49 -0700 Subject: [PATCH 2/2] Fix typo --- documentation/guides/migrating-from-v8-to-v9.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index 9c4ff53b95d..dab2adb23dd 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -226,7 +226,7 @@ We replaced a few of the following filter function instances with color tokens i | `@include high-contrast-border` | `border: var(--p-border-width-1) solid transparent;` | | `@include high-contrast-border($border-width: )` | `border: solid transparent;` | -For `` instances that are functions, see the [`border-width()`](#border-width) section for repalcing it. +For `` instances that are functions, see the [`border-width()`](#border-width) section for replacing it. For `` instances that are hard coded values, see if you can replace it with one of our [new border-width tokens](https://github.com/Shopify/polaris-react/blob/77e8669595a4964ff5ce399967661a7621ea2a4d/src/tokens/token-groups/shape.json), otherwise leave it hardcoded. @@ -237,7 +237,7 @@ For `` instances that are hard coded values, see if you can replac | `@include high-contrast-outline` | `outline: var(--p-border-width-1) solid transparent;` | | `@include high-contrast-outline($border-width: )` | `outline: solid transparent;` | -For `` instances that are functions, see the [`border-width()`](#border-width) section for repalcing it. +For `` instances that are functions, see the [`border-width()`](#border-width) section for replacing it. For `` instances that are hard coded values, see if you can replace it with one of our [new border-width tokens](https://github.com/Shopify/polaris-react/blob/77e8669595a4964ff5ce399967661a7621ea2a4d/src/tokens/token-groups/shape.json), otherwise leave it hardcoded.