Skip to content

Create migration guidance for filter() function #5046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Feb 7, 2022
Merged

Create migration guidance for filter() function #5046

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0851ec0
Add filter documentation to new sass functions and mixins section
lgriffee Feb 3, 2022
836558d
Include shorthand function names
lgriffee Feb 3, 2022
2204a86
Remove token replacement section
lgriffee Feb 3, 2022
b2384ac
Add quotes around all parameters
lgriffee Feb 3, 2022
df13cd4
Add more context to replacing functions section
lgriffee Feb 4, 2022
b3f895c
Add in token replacement values with note
lgriffee Feb 4, 2022
b652e04
Use footnote Markdown
lgriffee Feb 4, 2022
1ca31ea
Make language reflective of mixins as well
lgriffee Feb 4, 2022
14bba9e
Merge branch 'v9.0.0-major' of https://github.com/Shopify/polaris-rea…
lgriffee Feb 4, 2022
b2a10ae
Get rid of duplicate copy
lgriffee Feb 4, 2022
6d3f67d
Add backticks around all values in table
lgriffee Feb 4, 2022
47d5d44
Fix typo
lgriffee Feb 4, 2022
22edcb1
Remove use of var in tokens
lgriffee Feb 4, 2022
ea7ccc8
Merge branch 'v9.0.0-major' into 5008-migration-guide-filter-function
lgriffee Feb 4, 2022
f792903
Merge branch 'v9.0.0-major' into 5008-migration-guide-filter-function
lgriffee Feb 4, 2022
08df029
Remove color tokens from table
lgriffee Feb 7, 2022
b738547
Merge branch 'v9.0.0-major' into 5008-migration-guide-filter-function
lgriffee Feb 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions documentation/guides/migrating-from-v8-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,73 @@ A list of functions/mixins and their value equivalents or new token values.
| `easing(overshoot)` | `cubic-bezier(0.07, 0.28, 0.32, 1.22)` |
| `easing(anticipate)` | `cubic-bezier(0.38, -0.4, 0.88, 0.65)` |

#### `filter()`
Copy link
Member

@aaronccasanova aaronccasanova Feb 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thoughts on breaking this filter() section in two parts?

  1. (Table not in <summary>) Here are all the values we've replaced with tokens/values NOT css filters
  2. (Table in <summary>) Here is an exhaustive list of all legacy css filters you can use for backward compatibility

Copy link
Contributor Author

@lgriffee lgriffee Feb 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good callout, I was also wondering what's the clearest and most helpful documentation for folks in this case. I ended up combining tokens and values into one table for the easing() guidance so I was trying to be consistent with that approach here.

But perhaps this is just such a giant table and the tokens aren't 1:1 replacements so it makes sense to break them out into two here. I'm totally down with doing that if it feels more clear.

If we do break them into two tables for filter(), I do want to just quickly consider if we should do the same for easing() to be consistent? Some of the easing tokens aren't 1:1 replacements for the previous function values. However, unlike filter() they are improvements on easing() values versus values meant for another property, which makes me lean towards thinking easing() values and tokens are fine in the same table together vs. two tables even if we break the filter() table up.

Copy link
Member

@aaronccasanova aaronccasanova Feb 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I think the guidance should help folks get their apps back to a functional state as quickly as possible. We were able to take some time throughout the process to update and test new ideas, but others may not have that luxury. This is just my 2 cents, so I wonder what other folks think. @alex-page @aveline Thoughts?

Copy link
Contributor Author

@lgriffee lgriffee Feb 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spoke with @alex-page about this and we decided to remove the color token replacement values from the table and just have a general note/disclaimer at the top that our team replaced some instances of the function with color tokens (and that folks should use caution if they do that too).


We replaced a few of the following filter function instances with color tokens instead of their exact replacement values. However, this can break intended behavior so be careful if you take this approach as well.

| Function | Replacement Value/Token |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| `filter('purple', 'text')` | `brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)` |
| `filter('purple', 'darker')` | `brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)` |
| `filter('purple', 'dark')` | `brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)` |
| `filter('purple')`<br>`filter('purple', 'base')` | `brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)` |
| `filter('purple', 'light')` | `brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)` |
| `filter('purple', 'lighter')` | `brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)` |
| `filter('indigo', 'text')` | `brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)` |
| `filter('indigo', 'darker')` | `brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)` |
| `filter('indigo', 'dark')` | `brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)` |
| `filter('indigo')`<br>`filter('indigo', 'base')` | `brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)` |
| `filter('indigo', 'light')` | `brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)` |
| `filter('indigo', 'lighter')` | `brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)` |
| `filter('blue', 'text')` | `brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)` |
| `filter('blue', 'darker')` | `brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)` |
| `filter('blue', 'dark')` | `brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)` |
| `filter('blue')`<br>`filter('blue', 'base')` | `brightness(0) saturate(100%) invert(19%) sepia(98%) saturate(2885%) hue-rotate(190deg) brightness(99%) contrast(101%)` |
| `filter('blue', 'light')` | `brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)` |
| `filter('blue', 'lighter')` | `brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)` |
| `filter('teal', 'text')` | `brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)` |
| `filter('teal', 'darker')` | `brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)` |
| `filter('teal', 'dark')` | `brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)` |
| `filter('teal')`<br>`filter('teal', 'base')` | `brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)` |
| `filter('teal', 'light')` | `brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)` |
| `filter('teal', 'lighter')` | `brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)` |
| `filter('green', 'text')` | `brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)` |
| `filter('green', 'darker')` | `brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)` |
| `filter('green', 'dark')` | `brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)` |
| `filter('green')`<br>`filter('green', 'base')` | `brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)` |
| `filter('green', 'light')` | `brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)` |
| `filter('green', 'lighter')` | `brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)` |
| `filter('yellow', 'text')` | `brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)` |
| `filter('yellow', 'darker')` | `brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)` |
| `filter('yellow', 'dark')` | `brightness(0) saturate(100%) invert(37%) sepia(51%) saturate(709%) hue-rotate(0deg) brightness(93%) contrast(89%)` |
| `filter('yellow')`<br>`filter('yellow', 'base')` | `brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)` |
| `filter('yellow', 'light')` | `brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)` |
| `filter('yellow', 'lighter')` | `brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)` |
| `filter('orange', 'text')` | `brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)` |
| `filter('orange', 'darker')` | `brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)` |
| `filter('orange', 'dark')` | `brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)` |
| `filter('orange')`<br>`filter('orange', 'base')` | `brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)` |
| `filter('orange', 'light')` | `brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)` |
| `filter('orange', 'lighter')` | `brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)` |
| `filter('red', 'text')` | `brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)` |
| `filter('red', 'darker')` | `brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)` |
| `filter('red', 'dark')` | `brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)` |
| `filter('red')`<br>`filter('red', 'base')` | `brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)` |
| `filter('red', 'light')` | `brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)` |
| `filter('red', 'lighter')` | `brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)` |
| `filter('ink')`<br>`filter('ink', 'base')` | `brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)` |
| `filter('ink', 'light')` | `brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)` |
| `filter('ink', 'lighter')` | `brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)` |
| `filter('ink', 'lightest')` | `brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)` |
| `filter('sky', 'dark')` | `brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)` |
| `filter('sky')`<br>`filter('sky', 'base')` | `brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)` |
| `filter('sky', 'light')` | `brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)` |
| `filter('sky', 'lighter')` | `brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)` |
| `filter('black')`<br>`filter('black', 'base')` | `brightness(0) saturate(100%)` |
| `filter('white')`<br>`filter('white', 'base')` | `brightness(0) saturate(100%) invert(100%)` |
| `filter('icon')`<br>`filter('icon', 'base')` | `brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%)` |
| `filter('action')`<br>`filter('action', 'base')` | `brightness(0) saturate(100%) invert(20%) sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%) contrast(101%)` |

#### `ms-high-contrast-color()`

| Function | Replacement Value/Token |
Expand Down