[Navigation] Fix icon filter colors

[kyledurand]

WHY are these changes introduced?

Fixes #4659

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[kyledurand]

Taken from https://github.com/Shopify/polaris-tokens/blob/main/dist/color-filters.color-map.scss#L137-L147

[alex-page]

Nice. Thanks @kyledurand.

[kyledurand]

Switching to named vars throughout this PR for clarity. Should make things slightly easier to figure out what's going on when we remove recolor-icon()

[kyledurand]

We always have one active items in the nav within the admin. This change reflects that int he basic example

[kyledurand]

We had two active items in this example which should never happen. Undoing this one since the example is for selected secondary, which is below

[github-actions]

size-limit report

Path	Size
cjs	165.95 KB (0%)
esm	96.52 KB (0%)
esnext	143.12 KB (+0.03% 🔺)
css	34.31 KB (+0.1% 🔺)

[aaronccasanova]

Updates look great! Note: I was mainly focused on validating the syntax and consistency of the updates since I am unfamiliar with this component and the recolor-icon mixin.