fix(color-handle,color-loupe,swatch,thumbnail): use the Opacity Checkerboard package

[Westbrook]

Description

• leverage the new opacity-checkerboard class across various components
• also build an "is opacity checkerboard" build for use in Color Handle
• custom build Color Loupe so that it uses it as well
• Color Slider is skipped here for feat(color-slider): migrate to core tokens #3507 and lack of support for that functionality

How has this been tested?

• Test case 1
  1. Go here
  2. See it in action in Color Handle and Color Loupe
• Test case 2
  1. Go here
  2. See it in action in a Thumbnail
• Test case 3
  1. Go here
  2. See it in action in a Swatch

Types of changes

• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[github-actions]

Branch Preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Classic | Lightest | Medium | LTR
• Classic | Lightest | Medium | RTL
• Classic | Lightest | Large | LTR
• Classic | Lightest | Large | RTL
• Classic | Light | Medium | LTR
• Classic | Light | Medium | RTL
• Classic | Light | Large | LTR
• Classic | Light | Large | RTL
• Classic | Dark | Medium | LTR
• Classic | Dark | Medium | RTL
• Classic | Dark | Large | LTR
• Classic | Dark | Large | RTL
• Classic | Darkest | Medium | LTR
• Classic | Darkest | Medium | RTL
• Classic | Darkest | Large | LTR
• Classic | Darkest | Large | RTL
• Express | Lightest | Medium | LTR
• Express | Lightest | Medium | RTL
• Express | Lightest | Large | LTR
• Express | Lightest | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Express | Darkest | Medium | LTR
• Express | Darkest | Medium | RTL
• Express | Darkest | Large | LTR
• Express | Darkest | Large | RTL

[github-actions]

Tachometer results

Chrome

color-area permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	445 kB	222.81ms - 223.91ms	-	slower ❌ 1% - 2% 2.55ms - 4.14ms
branch	440 kB	219.44ms - 220.59ms	faster ✔ 1% - 2% 2.55ms - 4.14ms	-

color-handle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	363 kB	74.29ms - 76.59ms	-	slower ❌ 5% - 9% 3.49ms - 6.01ms
branch	359 kB	70.18ms - 71.20ms	faster ✔ 5% - 8% 3.49ms - 6.01ms	-

color-loupe permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	355 kB	48.67ms - 49.25ms	-	slower ❌ 6% - 8% 2.83ms - 3.57ms
branch	351 kB	45.53ms - 45.99ms	faster ✔ 6% - 7% 2.83ms - 3.57ms	-

color-slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	446 kB	187.63ms - 188.70ms	-	slower ❌ 2% - 3% 3.72ms - 5.20ms
branch	442 kB	183.20ms - 184.22ms	faster ✔ 2% - 3% 3.72ms - 5.20ms	-

color-wheel permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	448 kB	190.73ms - 192.09ms	-	slower ❌ 2% - 3% 3.26ms - 5.22ms
branch	443 kB	186.46ms - 187.88ms	faster ✔ 2% - 3% 3.26ms - 5.22ms	-

swatch permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	396 kB	40.48ms - 41.07ms	-	faster ✔ 0% - 2% 0.16ms - 1.02ms
branch	392 kB	41.05ms - 41.68ms	slower ❌ 0% - 3% 0.16ms - 1.02ms	-

thumbnail permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	754 kB	47.78ms - 48.16ms	-	unsure 🔍 -0% - +1% -0.13ms - +0.39ms
branch	747 kB	47.67ms - 48.02ms	unsure 🔍 -1% - +0% -0.39ms - +0.13ms	-

Firefox

color-area permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	445 kB	389.60ms - 411.00ms	-	faster ✔ 4% - 11% 16.80ms - 49.60ms
branch	440 kB	421.06ms - 445.94ms	slower ❌ 4% - 13% 16.80ms - 49.60ms	-

color-handle permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	363 kB	179.21ms - 199.99ms	-	unsure 🔍 -12% - +2% -24.33ms - +5.29ms
branch	359 kB	188.58ms - 209.66ms	unsure 🔍 -3% - +13% -5.29ms - +24.33ms	-

color-loupe permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	355 kB	132.77ms - 148.83ms	-	faster ✔ 2% - 14% 3.33ms - 22.07ms
branch	351 kB	148.68ms - 158.32ms	slower ❌ 2% - 16% 3.33ms - 22.07ms	-

color-slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	446 kB	379.35ms - 403.89ms	-	faster ✔ 1% - 9% 2.16ms - 37.04ms
branch	442 kB	398.83ms - 423.61ms	slower ❌ 0% - 10% 2.16ms - 37.04ms	-

color-wheel permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	448 kB	353.80ms - 373.20ms	-	faster ✔ 11% - 16% 44.56ms - 69.12ms
branch	443 kB	412.80ms - 427.88ms	slower ❌ 12% - 19% 44.56ms - 69.12ms	-

swatch permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	396 kB	129.31ms - 145.81ms	-	unsure 🔍 -13% - +6% -18.65ms - +8.73ms
branch	392 kB	131.59ms - 153.45ms	unsure 🔍 -6% - +14% -8.73ms - +18.65ms	-

thumbnail permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	754 kB	128.42ms - 142.42ms	-	faster ✔ 6% - 23% 7.96ms - 39.16ms
branch	747 kB	145.04ms - 172.92ms	slower ❌ 5% - 29% 7.96ms - 39.16ms	-