Add experimental colors

[kyledurand]

WHY are these changes introduced?

WHAT is this pull request doing?

Adds a bit of experimental coloring

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

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	243.08 KB (+0.04% 🔺)
polaris-react-esm	157.34 KB (+0.04% 🔺)
polaris-react-esnext	219.88 KB (+0.06% 🔺)
polaris-react-css	47.53 KB (+0.07% 🔺)

[aaronccasanova]

Discussed offline and brainstormed a consolidated strategy for rolling out experimental tokens: 0869b42

• New tokens that map to an existing alias are assigned to valueExperimental
  • These will apply as overrides when the beta flag is enabled (without code changes)
  • Stylelint will continue to validate SCSS files as expected
  • TypeScript will continue to validate TSX files as expected (e.g. in Layout component props)
  • TODO: Establish a pattern to conditionally apply value or valueExperimental when tokens object is imported directly (we don't encourage this pattern and thus I expect this to be very rare).
• New tokens that do NOT map to an existing alias are assigned to value
  • These will be generated as top level custom properties with a color-experimental prefix since they will be accessible regardless of the beta flag status (which should simplify the TypeScript implementation and intuitiveness). Note: The new token to existing token mappings are currently being worked out and we expect these experimental tokens to be minimal
  • Stylelint will continue to validate SCSS files as expected (without code changes) and breaking changes should be fine by using the color-experimental prefix
  • TypeScript will continue to validate TSX files as expected (e.g. in Layout component props) and breaking changes should be fine by using the color-experimental prefix
  • Direct access to the tokens object will work as expected (since values are accessible via tokenGroup[tokenName].value) and breaking changes should be fine by using the color-experimental prefix
  • Reduces the overall size of the generated stylesheet as the class with overrides will only contain experimental tokens (avoiding the need to generate two stylesheets that are dynamically loaded)

Note: The above pattern is applicable to all token groups (not just color):

Example of new tokens that do NOT map to an existing alias:

Example of new tokens that map to an existing alias (overridden via beta flag)

[kyledurand]

/snapit

[github-actions]

🫰✨ Thanks @kyledurand! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230523201101

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230523201101

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230523201101

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230523201101

yarn add @shopify/polaris@0.0.0-snapshot-release-20230523201101

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230523201101

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230523201101