From 7e0f4b6684aab8e94b04829e08b0160339ec2657 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 28 Sep 2023 18:02:29 -0600 Subject: [PATCH 1/4] Manually migrate `border` custom properties from Polaris v11 to v12 --- .../stylelint-polaris/rules/border-at-rule-disallowed-list.md | 4 ++-- .../rules/border-custom-property-disallowed-list.md | 2 +- .../rules/border-declaration-property-unit-disallowed-list.md | 4 ++-- .../rules/border-function-disallowed-list.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md index 911d7895d09..579182e1254 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ outline: var(--p-border-width-1) solid transparent; ++ outline: var(--p-border-width-025) solid transparent; // Don't - @include high-contrast-outline() ``` @@ -28,7 +28,7 @@ NOTE: The `focus-ring` at rule does not currently have an equivalent token or co ```diff // Do + &:focus { - + outline: var(--p-border-width-2) solid var(--p-color-border-interactive-focus); + + outline: var(--p-border-width-050) solid var(--p-color-border-interactive-focus); + outline-offset: var(--p-space-050); + } // Don't diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-custom-property-disallowed-list.md index 9623ae81432..05815c5e901 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-custom-property-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-custom-property-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ border-radius: var(--p-border-radius-2); ++ border-radius: var(--p-border-radius-200); // Don't - border-radius: var(--p-border-radius-large); ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-declaration-property-unit-disallowed-list.md index 6de121c0c4b..8ede880e5b0 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-declaration-property-unit-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-declaration-property-unit-disallowed-list.md @@ -18,8 +18,8 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ border-width: var(--p-border-width-2); -+ border-radius: var(--p-border-radius-2); ++ border-width: var(--p-border-width-050); ++ border-radius: var(--p-border-radius-200); // Don't - border-width: 2px; - border-radius: 0.5rem; diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-function-disallowed-list.md index 59d4ca78f8d..d83bd1855b9 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-function-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-function-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ border-radius: var(--p-border-radius-1); ++ border-radius: var(--p-border-radius-100); // Don't - border-radius: border-radius(); ``` From d22b300fa3a8aa7158832664bdababc297ee9385 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 28 Sep 2023 18:11:13 -0600 Subject: [PATCH 2/4] Manually migrate `color` custom properties from Polaris v11 to v12 --- .../stylelint-polaris/rules/border-at-rule-disallowed-list.md | 2 +- .../stylelint-polaris/rules/color-at-rule-disallowed-list.md | 2 +- .../stylelint-polaris/rules/color-function-disallowed-list.md | 2 +- .../rules/conventions-custom-property-allowed-list.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md index 579182e1254..866d50f6268 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/border-at-rule-disallowed-list.md @@ -28,7 +28,7 @@ NOTE: The `focus-ring` at rule does not currently have an equivalent token or co ```diff // Do + &:focus { - + outline: var(--p-border-width-050) solid var(--p-color-border-interactive-focus); + + outline: var(--p-border-width-050) solid var(--p-color-border-focus); + outline-offset: var(--p-space-050); + } // Don't diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-at-rule-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-at-rule-disallowed-list.md index ce984f20fd2..a1731f1b188 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-at-rule-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-at-rule-disallowed-list.md @@ -19,7 +19,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do + svg { -+ fill: var(--p-color-icon-subdued); ++ fill: var(--p-color-icon-secondary); +} // Don't diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-function-disallowed-list.md index 9b87bc04761..596df09addc 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-function-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/color-function-disallowed-list.md @@ -19,7 +19,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do + color: var(--p-color-text-disabled); -+ background: var(--p-color-bg-inverse-hover); ++ background: var(--p-color-bg-fill-inverse-hover); // Don't - color: rgb(140, 145, 150); - background: color('hover'); diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md index 575783f2316..8508efee28f 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md @@ -38,7 +38,7 @@ Flags declaration property values using private `--pc-*` tokens. ```diff // Do -+ background: var(--p-color-bg-inset-strong); ++ background: var(--p-color-bg-fill-inverse); // Don't - background: var(--pc-button-color-depressed); ``` From 89eeda50df150844c584bef9bff93806e3718ea8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 28 Sep 2023 18:20:21 -0600 Subject: [PATCH 3/4] Manually migrate `font` custom properties from Polaris v11 to v12 --- .../rules/conventions-custom-property-allowed-list.md | 2 +- .../typography-declaration-property-unit-disallowed-list.md | 4 ++-- .../rules/typography-function-disallowed-list.md | 2 +- .../rules/typography-global-disallowed-list.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md index 8508efee28f..f8841f3024e 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-custom-property-allowed-list.md @@ -29,7 +29,7 @@ Flags declaration property values using `--p-*` that are not valid Polaris token ```diff // Do -+ font-size: var(--p-font-size-200); ++ font-size: var(--p-font-size-400); // Don't - font-size: var(--p-fontsize-200); ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md index 3f436140b5d..019a86e3307 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-declaration-property-unit-disallowed-list.md @@ -18,8 +18,8 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ font-size: var(--p-font-size-75); -+ line-height: var(--p-font-line-height-3); ++ font-size: var(--p-font-size-300); ++ line-height: var(--p-font-line-height-600); // Don't - font-size: 12px; - line-height: 1.5rem diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md index 749e10b1bce..181dd1a6329 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-function-disallowed-list.md @@ -20,7 +20,7 @@ import RulePostamble from '../_postamble.md'; // Do + // Do -+ font-size: var(--p-font-size-75); ++ font-size: var(--p-font-size-300); // Don't - font-size: font-size('caption'); ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md index a39592837a0..a6b159ea729 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ font-size: var(--p-font-size-200); ++ font-size: var(--p-font-size-400); // Don't - font-size: $base-font-size; ``` From 10c6725020b25c94bfa34585d2bb84ddad632ae7 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 28 Sep 2023 18:22:53 -0600 Subject: [PATCH 4/4] Manually migrate `shadow` custom properties from Polaris v11 to v12 --- .../rules/shadow-custom-property-disallowed-list.md | 2 +- .../rules/shadow-declaration-property-unit-disallowed-list.md | 2 +- .../stylelint-polaris/rules/shadow-function-disallowed-list.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-custom-property-disallowed-list.md index 30c6c151653..c76c5a97181 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-custom-property-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-custom-property-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ box-shadow: var(--p-shadow-md); ++ box-shadow: var(--p-shadow-300); // Don't - box-shadow: var(--p-shadow-deep) ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-declaration-property-unit-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-declaration-property-unit-disallowed-list.md index f5f83d421e9..ca112330cde 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-declaration-property-unit-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-declaration-property-unit-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ box-shadow: var(--p-shadow-md); ++ box-shadow: var(--p-shadow-300); // Don't - box-shadow: 0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05); ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-function-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-function-disallowed-list.md index f1845405630..6025a8a3ba5 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-function-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shadow-function-disallowed-list.md @@ -18,7 +18,7 @@ import RulePostamble from '../_postamble.md'; ```diff // Do -+ box-shadow: var(--p-shadow-md); ++ box-shadow: var(--p-shadow-300); // Don't - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); ```