Remove hsl and use Primitive v8 colors

[langermank]

Summary

As an initial step to upgrade primer/primitives to v8 tokens, this PR moves the existing color scales from hsl to hex for an easier transition.

List of notable changes:

• Change base color scales to hex instead of hsl
• Remove the hsl logic that handles opacity
• Use a raw hex8 value where alpha was used temporarily until we have the new build process in place from Primitives
• Adds new tokens for videoPlayer to help with this transition
• Use two files for light/dark vs. one in the base tokens

What should reviewers focus on?

Did we break anything? 😄

Supporting resources (related issues, external links, etc):

Closes https://github.com/github/primer/issues/2756

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• New visual snapshots have been generated / updated for any UI changes
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b01ca8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@primer/brand-primitives	Minor
@primer/react-brand	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🔍 Design token changes found

View CSS variable changes

- --base-color-scale-gray-0-hsl: 210 25% 98%;
+ --base-color-scale-black-0: #1f2328;

- --base-color-scale-gray-0: hsl(210, 25%, 98%);
+ --base-color-scale-transparent: #ffffff00;

- --base-color-scale-gray-1-hsl: 210 24% 93%;
+ --base-color-scale-white-0: #ffffff;

- --base-color-scale-gray-1: hsl(210, 24%, 93%);
+ --base-color-scale-gray-0: #f6f8fa;

- --base-color-scale-gray-2-hsl: 210 16% 85%;
+ --base-color-scale-gray-1: #eaeef2;

- --base-color-scale-gray-2: hsl(210, 16%, 85%);
+ --base-color-scale-gray-2: #d0d7de;

- --base-color-scale-gray-3-hsl: 210 13% 75%;
+ --base-color-scale-gray-3: #afb8c1;

- --base-color-scale-gray-3: hsl(210, 13%, 75%);
+ --base-color-scale-gray-4: #8c959f;

- --base-color-scale-gray-4-hsl: 212 10% 62%;
+ --base-color-scale-gray-5: #6e7781;

- --base-color-scale-gray-4: hsl(212, 10%, 62%);
+ --base-color-scale-gray-6: #57606a;

- --base-color-scale-gray-5-hsl: 210 8% 48%;
+ --base-color-scale-gray-7: #424a53;

- --base-color-scale-gray-5: hsl(210, 8%, 48%);
+ --base-color-scale-gray-8: #32383f;

- --base-color-scale-gray-6-hsl: 212 10% 38%;
+ --base-color-scale-gray-9: #24292f;

- --base-color-scale-gray-6: hsl(212, 10%, 38%);
+ --base-color-scale-blue-0: #ddf4ff;

- --base-color-scale-gray-7-hsl: 212 11% 29%;
+ --base-color-scale-blue-1: #b6e3ff;

- --base-color-scale-gray-7: hsl(212, 11%, 29%);
+ --base-color-scale-blue-2: #80ccff;

- --base-color-scale-gray-8-hsl: 212 12% 22%;
+ --base-color-scale-blue-3: #54aeff;

- --base-color-scale-gray-8: hsl(212, 12%, 22%);
+ --base-color-scale-blue-4: #218bff;

- --base-color-scale-gray-9-hsl: 213 13% 16%;
+ --base-color-scale-blue-5: #0969da;

- --base-color-scale-gray-9: hsl(213, 13%, 16%);
+ --base-color-scale-blue-6: #0550ae;

- --base-color-scale-red-0-hsl: 4 100% 97%;
+ --base-color-scale-blue-7: #033d8b;

- --base-color-scale-red-0: hsl(4, 100%, 97%);
+ --base-color-scale-blue-8: #0a3069;

- --base-color-scale-red-1-hsl: 3 100% 91%;
+ --base-color-scale-blue-9: #002155;

- --base-color-scale-red-1: hsl(3, 100%, 91%);
+ --base-color-scale-green-0: #dafbe1;

- --base-color-scale-red-2-hsl: 2 100% 85%;
+ --base-color-scale-green-1: #aceebb;

- --base-color-scale-red-2: hsl(2, 100%, 85%);
+ --base-color-scale-green-2: #6fdd8b;

- --base-color-scale-red-3-hsl: 1 100% 76%;
+ --base-color-scale-green-3: #4ac26b;

- --base-color-scale-red-3: hsl(1, 100%, 76%);
+ --base-color-scale-green-4: #2da44e;

- --base-color-scale-red-4-hsl: 359 95% 65%;
+ --base-color-scale-green-5: #1a7f37;

- --base-color-scale-red-4: hsl(359, 95%, 65%);
+ --base-color-scale-green-6: #116329;

- --base-color-scale-red-5-hsl: 357 67% 50%;
+ --base-color-scale-green-7: #044f1e;

- --base-color-scale-red-5: hsl(357, 67%, 50%);
+ --base-color-scale-green-8: #003d16;

- --base-color-scale-red-6-hsl: 356 71% 38%;
+ --base-color-scale-green-9: #002d11;

- --base-color-scale-red-6: hsl(356, 71%, 38%);
+ --base-color-scale-yellow-0: #fff8c5;

- --base-color-scale-red-7-hsl: 355 71% 30%;
+ --base-color-scale-yellow-1: #fae17d;

- --base-color-scale-red-7: hsl(355, 71%, 30%);
+ --base-color-scale-yellow-2: #eac54f;

- --base-color-scale-red-8-hsl: 354 74% 24%;
+ --base-color-scale-yellow-3: #d4a72c;

- --base-color-scale-red-8: hsl(354, 74%, 24%);
+ --base-color-scale-yellow-4: #bf8700;

- --base-color-scale-red-9-hsl: 352 91% 17%;
+ --base-color-scale-yellow-5: #9a6700;

- --base-color-scale-red-9: hsl(352, 91%, 17%);
+ --base-color-scale-yellow-6: #7d4e00;

- --base-color-scale-coral-0-hsl: 15 100% 96%;
+ --base-color-scale-yellow-7: #633c01;

- --base-color-scale-coral-0: hsl(15, 100%, 96%);
+ --base-color-scale-yellow-8: #4d2d00;

- --base-color-scale-coral-1-hsl: 12 100% 90%;
+ --base-color-scale-yellow-9: #3b2300;

- --base-color-scale-coral-1: hsl(12, 100%, 90%);
+ --base-color-scale-orange-0: #fff1e5;

- --base-color-scale-coral-2-hsl: 12 100% 82%;
+ --base-color-scale-orange-1: #ffd8b5;

- --base-color-scale-coral-2: hsl(12, 100%, 82%);
+ --base-color-scale-orange-2: #ffb77c;

- --base-color-scale-coral-3-hsl: 11 97% 72%;
+ --base-color-scale-orange-3: #fb8f44;

- --base-color-scale-coral-3: hsl(11, 97%, 72%);
+ --base-color-scale-orange-4: #e16f24;

- --base-color-scale-coral-4-hsl: 11 81% 60%;
+ --base-color-scale-orange-5: #bc4c00;

- --base-color-scale-coral-4: hsl(11, 81%, 60%);
+ --base-color-scale-orange-6: #953800;

- --base-color-scale-coral-5-hsl: 9 64% 47%;
+ --base-color-scale-orange-7: #762c00;

- --base-color-scale-coral-5: hsl(9, 64%, 47%);
+ --base-color-scale-orange-8: #5c2200;

- --base-color-scale-coral-6-hsl: 9 70% 36%;
+ --base-color-scale-orange-9: #471700;

- --base-color-scale-coral-6: hsl(9, 70%, 36%);
+ --base-color-scale-red-0: #ffebe9;

- --base-color-scale-coral-7-hsl: 8 79% 28%;
+ --base-color-scale-red-1: #ffcecb;

- --base-color-scale-coral-7: hsl(8, 79%, 28%);
+ --base-color-scale-red-2: #ffaba8;

- --base-color-scale-coral-8-hsl: 7 91% 22%;
+ --base-color-scale-red-3: #ff8182;

- --base-color-scale-coral-8: hsl(7, 91%, 22%);
+ --base-color-scale-red-4: #fa4549;

- --base-color-scale-coral-9-hsl: 6 98% 16%;
+ --base-color-scale-red-5: #cf222e;

- --base-color-scale-coral-9: hsl(6, 98%, 16%);
+ --base-color-scale-red-6: #a40e26;

- --base-color-scale-orange-0-hsl: 28 100% 95%;
+ --base-color-scale-red-7: #82071e;

- --base-color-scale-orange-0: hsl(28, 100%, 95%);
+ --base-color-scale-red-8: #660018;

- --base-color-scale-orange-1-hsl: 28 100% 85%;
+ --base-color-scale-red-9: #4c0014;

- --base-color-scale-orange-1: hsl(28, 100%, 85%);
+ --base-color-scale-purple-0: #fbefff;

- --base-color-scale-orange-2-hsl: 27 100% 74%;
+ --base-color-scale-purple-1: #ecd8ff;

- --base-color-scale-orange-2: hsl(27, 100%, 74%);
+ --base-color-scale-purple-2: #d8b9ff;

- --base-color-scale-orange-3-hsl: 25 96% 63%;
+ --base-color-scale-purple-3: #c297ff;

- --base-color-scale-orange-3: hsl(25, 96%, 63%);
+ --base-color-scale-purple-4: #a475f9;

- --base-color-scale-orange-4-hsl: 24 76% 51%;
+ --base-color-scale-purple-5: #8250df;

- --base-color-scale-orange-4: hsl(24, 76%, 51%);
+ --base-color-scale-purple-6: #6639ba;

- --base-color-scale-orange-5-hsl: 24 100% 37%;
+ --base-color-scale-purple-7: #512a97;

- --base-color-scale-orange-5: hsl(24, 100%, 37%);
+ --base-color-scale-purple-8: #3e1f79;

- --base-color-scale-orange-6-hsl: 23 100% 29%;
+ --base-color-scale-purple-9: #2e1461;

- --base-color-scale-orange-6: hsl(23, 100%, 29%);
+ --base-color-scale-pink-0: #ffeff7;

- --base-color-scale-orange-7-hsl: 22 100% 23%;
+ --base-color-scale-pink-1: #ffd3eb;

- --base-color-scale-orange-7: hsl(22, 100%, 23%);
+ --base-color-scale-pink-2: #ffadda;

- --base-color-scale-orange-8-hsl: 22 100% 18%;
+ --base-color-scale-pink-3: #ff80c8;

- --base-color-scale-orange-8: hsl(22, 100%, 18%);
+ --base-color-scale-pink-4: #e85aad;

- --base-color-scale-orange-9-hsl: 19 100% 14%;
+ --base-color-scale-pink-5: #bf3989;

- --base-color-scale-orange-9: hsl(19, 100%, 14%);
+ --base-color-scale-pink-6: #99286e;

- --base-color-scale-yellow-0-hsl: 50 89% 89%;
+ --base-color-scale-pink-7: #772057;

- --base-color-scale-yellow-0: hsl(50, 89%, 89%);
+ --base-color-scale-pink-8: #611347;

- --base-color-scale-yellow-1-hsl: 48 87% 73%;
+ --base-color-scale-pink-9: #4d0336;

- --base-color-scale-yellow-1: hsl(48, 87%, 73%);
+ --base-color-scale-coral-0: #fff0eb;

- --base-color-scale-yellow-2-hsl: 46 76% 60%;
+ --base-color-scale-coral-1: #ffd6cc;

- --base-color-scale-yellow-2: hsl(46, 76%, 60%);
+ --base-color-scale-coral-2: #ffb4a1;

- --base-color-scale-yellow-3-hsl: 44 65% 50%;
+ --base-color-scale-coral-3: #fd8c73;

- --base-color-scale-yellow-3: hsl(44, 65%, 50%);
+ --base-color-scale-coral-4: #ec6547;

- --base-color-scale-yellow-4-hsl: 42 100% 37%;
+ --base-color-scale-coral-5: #c4432b;

- --base-color-scale-yellow-4: hsl(42, 100%, 37%);
+ --base-color-scale-coral-6: #9e2f1c;

- --base-color-scale-yellow-5-hsl: 40 100% 30%;
+ --base-color-scale-coral-7: #801f0f;

- --base-color-scale-yellow-5: hsl(40, 100%, 30%);
+ --base-color-scale-coral-8: #691105;

- --base-color-scale-yellow-6-hsl: 37 100% 24%;
+ --base-color-scale-coral-9: #510901;

- --base-color-scale-yellow-6: hsl(37, 100%, 24%);
+ --base-color-scale-lemon-0: #fdf5b3;

- --base-color-scale-yellow-7-hsl: 36 98% 19%;
+ --base-color-scale-lemon-1: #f4e162;

- --base-color-scale-yellow-7: hsl(36, 98%, 19%);
+ --base-color-scale-lemon-2: #dec741;

- --base-color-scale-yellow-8-hsl: 35 100% 15%;
+ --base-color-scale-lemon-3: #c5aa20;

- --base-color-scale-yellow-8: hsl(35, 100%, 15%);
+ --base-color-scale-lemon-4: #c5aa20;

- --base-color-scale-yellow-9-hsl: 34 90% 12%;
+ --base-color-scale-lemon-5: #866d00;

- --base-color-scale-yellow-9: hsl(34, 90%, 12%);
+ --base-color-scale-lemon-6: #685400;

- --base-color-scale-lemon-0-hsl: 54 95% 85%;
+ --base-color-scale-lemon-7: #534100;

- --base-color-scale-lemon-0: hsl(54, 95%, 85%);
+ --base-color-scale-lemon-8: #413200;

- --base-color-scale-lemon-1-hsl: 52 87% 67%;
+ --base-color-scale-lemon-9: #322400;

- --base-color-scale-lemon-1: hsl(52, 87%, 67%);
+ --base-color-scale-lime-0: #eafaba;

- --base-color-scale-lemon-2-hsl: 51 70% 56%;
+ --base-color-scale-lime-1: #cdec78;

- --base-color-scale-lemon-2: hsl(51, 70%, 56%);
+ --base-color-scale-lime-2: #b1d353;

- --base-color-scale-lemon-3-hsl: 50 72% 45%;
+ --base-color-scale-lime-3: #94b83b;

- --base-color-scale-lemon-3: hsl(50, 72%, 45%);
+ --base-color-scale-lime-4: #799a2a;

- --base-color-scale-lemon-4-hsl: 50 98% 33%;
+ --base-color-scale-lime-5: #5a791b;

- --base-color-scale-lemon-4: hsl(50, 98%, 33%);
+ --base-color-scale-lime-6: #425e13;

- --base-color-scale-lemon-5-hsl: 49 100% 26%;
+ --base-color-scale-lime-7: #2f4a06;

- --base-color-scale-lemon-5: hsl(49, 100%, 26%);
+ --base-color-scale-lime-8: #233b03;

- --base-color-scale-lemon-6-hsl: 48 100% 20%;
+ --base-color-scale-lime-9: #182c01;

- --base-color-scale-lemon-6: hsl(48, 100%, 20%);
+ --base-color-scale-teal-0: #daf9f5;

- --base-color-scale-lemon-7-hsl: 47 100% 16%;
+ --base-color-scale-teal-1: #b0eae3;

- --base-color-scale-lemon-7: hsl(47, 100%, 16%);
+ --base-color-scale-teal-2: #6bd6d0;

- --base-color-scale-lemon-8-hsl: 46 100% 13%;
+ --base-color-scale-teal-3: #49bcb7;

- --base-color-scale-lemon-8: hsl(46, 100%, 13%);
+ --base-color-scale-teal-4: #339d9b;

- --base-color-scale-lemon-9-hsl: 43 100% 10%;
+ --base-color-scale-teal-5: #197b7b;

- --base-color-scale-lemon-9: hsl(43, 100%, 10%);
+ --base-color-scale-teal-6: #136061;

- --base-color-scale-lime-0-hsl: 75 86% 85%;
+ --base-color-scale-teal-7: #024b4d;

- --base-color-scale-lime-0: hsl(75, 86%, 85%);
+ --base-color-scale-teal-8: #063a3c;

- --base-color-scale-lime-1-hsl: 76 75% 70%;
+ --base-color-scale-teal-9: #052b2c;

- --base-color-scale-lime-1: hsl(76, 75%, 70%);
+ --base-color-scale-indigo-0: #eff2ff;

- --base-color-scale-lime-2-hsl: 76 59% 58%;
+ --base-color-scale-indigo-1: #d7ddff;

- --base-color-scale-lime-2: hsl(76, 59%, 58%);
+ --base-color-scale-indigo-2: #b9c2ff;

- --base-color-scale-lime-3-hsl: 77 51% 48%;
+ --base-color-scale-indigo-3: #9aa4ff;

- --base-color-scale-lime-3: hsl(77, 51%, 48%);
+ --base-color-scale-indigo-4: #7683ff;

- --base-color-scale-lime-4-hsl: 78 57% 38%;
+ --base-color-scale-indigo-5: #545df0;

- --base-color-scale-lime-4: hsl(78, 57%, 38%);
+ --base-color-scale-indigo-6: #3c42d0;

- --base-color-scale-lime-5-hsl: 80 64% 29%;
+ --base-color-scale-indigo-7: #2c33a5;

- --base-color-scale-lime-5: hsl(80, 64%, 29%);
+ --base-color-scale-indigo-8: #22297f;

- --base-color-scale-lime-6-hsl: 82 66% 22%;
+ --base-color-scale-indigo-9: #191f5c;

- --base-color-scale-gray-0-hsl: 210 67% 96%;
+ --base-color-scale-black-0: #010409;

- --base-color-scale-gray-0: hsl(210, 67%, 96%);
+ --base-color-scale-transparent: #00000000;

- --base-color-scale-gray-1-hsl: 210 17% 82%;
+ --base-color-scale-white-0: #ffffff;

- --base-color-scale-gray-1: hsl(210, 17%, 82%);
+ --base-color-scale-gray-0: #f0f6fc;

- --base-color-scale-gray-2-hsl: 212 14% 73%;
+ --base-color-scale-gray-1: #c9d1d9;

- --base-color-scale-gray-2: hsl(212, 14%, 73%);
+ --base-color-scale-gray-2: #b1bac4;

- --base-color-scale-gray-3-hsl: 212 9% 58%;
+ --base-color-scale-gray-3: #8b949e;

- --base-color-scale-gray-3: hsl(212, 9%, 58%);
+ --base-color-scale-gray-4: #6e7681;

- --base-color-scale-gray-4-hsl: 215 8% 47%;
+ --base-color-scale-gray-5: #484f58;

- --base-color-scale-gray-4: hsl(215, 8%, 47%);
+ --base-color-scale-gray-6: #30363d;

- --base-color-scale-gray-5-hsl: 214 10% 31%;
+ --base-color-scale-gray-7: #21262d;

- --base-color-scale-gray-5: hsl(214, 10%, 31%);
+ --base-color-scale-gray-8: #161b22;

- --base-color-scale-gray-6-hsl: 212 12% 21%;
+ --base-color-scale-gray-9: #0d1117;

- --base-color-scale-gray-6: hsl(212, 12%, 21%);
+ --base-color-scale-blue-0: #cae8ff;

- --base-color-scale-gray-7-hsl: 215 15% 15%;
+ --base-color-scale-blue-1: #a5d6ff;

- --base-color-scale-gray-7: hsl(215, 15%, 15%);
+ --base-color-scale-blue-2: #79c0ff;

- --base-color-scale-gray-8-hsl: 215 21% 11%;
+ --base-color-scale-blue-3: #58a6ff;

- --base-color-scale-gray-8: hsl(215, 21%, 11%);
+ --base-color-scale-blue-4: #388bfd;

- --base-color-scale-gray-9-hsl: 216 28% 7%;
+ --base-color-scale-blue-5: #1f6feb;

- --base-color-scale-gray-9: hsl(216, 28%, 7%);
+ --base-color-scale-blue-6: #1158c7;

- --base-color-scale-red-0-hsl: 8 100% 92%;
+ --base-color-scale-blue-7: #0d419d;

- --base-color-scale-red-0: hsl(8, 100%, 92%);
+ --base-color-scale-blue-8: #0c2d6b;

- --base-color-scale-red-1-hsl: 6 100% 86%;
+ --base-color-scale-blue-9: #051d4d;

- --base-color-scale-red-1: hsl(6, 100%, 86%);
+ --base-color-scale-green-0: #aff5b4;

- --base-color-scale-red-2-hsl: 5 100% 80%;
+ --base-color-scale-green-1: #7ee787;

- --base-color-scale-red-2: hsl(5, 100%, 80%);
+ --base-color-scale-green-2: #56d364;

- --base-color-scale-red-3-hsl: 4 100% 72%;
+ --base-color-scale-green-3: #3fb950;

- --base-color-scale-red-3: hsl(4, 100%, 72%);
+ --base-color-scale-green-4: #2ea043;

- --base-color-scale-red-4-hsl: 3 93% 63%;
+ --base-color-scale-green-5: #238636;

- --base-color-scale-red-4: hsl(3, 93%, 63%);
+ --base-color-scale-green-6: #196c2e;

- --base-color-scale-red-5-hsl: 1 69% 53%;
+ --base-color-scale-green-7: #0f5323;

- --base-color-scale-red-5: hsl(1, 69%, 53%);
+ --base-color-scale-green-8: #033a16;

- --base-color-scale-red-6-hsl: 360 68% 43%;
+ --base-color-scale-green-9: #04260f;

- --base-color-scale-red-6: hsl(360, 68%, 43%);
+ --base-color-scale-yellow-0: #f8e3a1;

- --base-color-scale-red-7-hsl: 358 74% 32%;
+ --base-color-scale-yellow-1: #f2cc60;

- --base-color-scale-red-7: hsl(358, 74%, 32%);
+ --base-color-scale-yellow-2: #e3b341;

- --base-color-scale-red-8-hsl: 356 89% 21%;
+ --base-color-scale-yellow-3: #d29922;

- --base-color-scale-red-8: hsl(356, 89%, 21%);
+ --base-color-scale-yellow-4: #bb8009;

- --base-color-scale-red-9-hsl: 0 95% 15%;
+ --base-color-scale-yellow-5: #9e6a03;

- --base-color-scale-red-9: hsl(0, 95%, 15%);
+ --base-color-scale-yellow-6: #845306;

- --base-color-scale-coral-0-hsl: 15 100% 91%;
+ --base-color-scale-yellow-7: #693e00;

- --base-color-scale-coral-0: hsl(15, 100%, 91%);
+ --base-color-scale-yellow-8: #4b2900;

- --base-color-scale-coral-1-hsl: 12 100% 85%;
+ --base-color-scale-yellow-9: #341a00;

- --base-color-scale-coral-1: hsl(12, 100%, 85%);
+ --base-color-scale-orange-0: #ffdfb6;

- --base-color-scale-coral-2-hsl: 12 100% 77%;
+ --base-color-scale-orange-1: #ffc680;

- --base-color-scale-coral-2: hsl(12, 100%, 77%);
+ --base-color-scale-orange-2: #ffa657;

- --base-color-scale-coral-3-hsl: 11 90% 68%;
+ --base-color-scale-orange-3: #f0883e;

- --base-color-scale-coral-3: hsl(11, 90%, 68%);
+ --base-color-scale-orange-4: #db6d28;

- --base-color-scale-coral-4-hsl: 10 80% 59%;
+ --base-color-scale-orange-5: #bd561d;

- --base-color-scale-coral-4: hsl(10, 80%, 59%);
+ --base-color-scale-orange-6: #9b4215;

- --base-color-scale-coral-5-hsl: 9 64% 49%;
+ --base-color-scale-orange-7: #762d0a;

- --base-color-scale-coral-5: hsl(9, 64%, 49%);
+ --base-color-scale-orange-8: #5a1e02;

- --base-color-scale-coral-6-hsl: 8 69% 40%;
+ --base-color-scale-orange-9: #3d1300;

- --base-color-scale-coral-6: hsl(8, 69%, 40%);
+ --base-color-scale-red-0: #ffdcd7;

- --base-color-scale-coral-7-hsl: 7 76% 30%;
+ --base-color-scale-red-1: #ffc1ba;

- --base-color-scale-coral-7: hsl(7, 76%, 30%);
+ --base-color-scale-red-2: #ffa198;

- --base-color-scale-coral-8-hsl: 6 92% 20%;
+ --base-color-scale-red-3: #ff7b72;

- --base-color-scale-coral-8: hsl(6, 92%, 20%);
+ --base-color-scale-red-4: #f85149;

- --base-color-scale-coral-9-hsl: 5 97% 14%;
+ --base-color-scale-red-5: #da3633;

- --base-color-scale-coral-9: hsl(5, 97%, 14%);
+ --base-color-scale-red-6: #b62324;

- --base-color-scale-orange-0-hsl: 34 100% 86%;
+ --base-color-scale-red-7: #8e1519;

- --base-color-scale-orange-0: hsl(34, 100%, 86%);
+ --base-color-scale-red-8: #67060c;

- --base-color-scale-orange-1-hsl: 33 100% 75%;
+ --base-color-scale-red-9: #490202;

- --base-color-scale-orange-1: hsl(33, 100%, 75%);
+ --base-color-scale-purple-0: #eddeff;

- --base-color-scale-orange-2-hsl: 28 100% 67%;
+ --base-color-scale-purple-1: #e2c5ff;

- --base-color-scale-orange-2: hsl(28, 100%, 67%);
+ --base-color-scale-purple-2: #d2a8ff;

- --base-color-scale-orange-3-hsl: 25 86% 59%;
+ --base-color-scale-purple-3: #bc8cff;

- --base-color-scale-orange-3: hsl(25, 86%, 59%);
+ --base-color-scale-purple-4: #a371f7;

- --base-color-scale-orange-4-hsl: 23 71% 51%;
+ --base-color-scale-purple-5: #8957e5;

- --base-color-scale-orange-4: hsl(23, 71%, 51%);
+ --base-color-scale-purple-6: #6e40c9;

- --base-color-scale-orange-5-hsl: 21 73% 43%;
+ --base-color-scale-purple-7: #553098;

- --base-color-scale-orange-5: hsl(21, 73%, 43%);
+ --base-color-scale-purple-8: #3c1e70;

- --base-color-scale-orange-6-hsl: 20 76% 35%;
+ --base-color-scale-purple-9: #271052;

- --base-color-scale-orange-6: hsl(20, 76%, 35%);
+ --base-color-scale-pink-0: #ffdaec;

- --base-color-scale-orange-7-hsl: 19 84% 25%;
+ --base-color-scale-pink-1: #ffbedd;

- --base-color-scale-orange-7: hsl(19, 84%, 25%);
+ --base-color-scale-pink-2: #ff9bce;

- --base-color-scale-orange-8-hsl: 19 96% 18%;
+ --base-color-scale-pink-3: #f778ba;

- --base-color-scale-orange-8: hsl(19, 96%, 18%);
+ --base-color-scale-pink-4: #db61a2;

- --base-color-scale-orange-9-hsl: 19 100% 12%;
+ --base-color-scale-pink-5: #bf4b8a;

- --base-color-scale-orange-9: hsl(19, 100%, 12%);
+ --base-color-scale-pink-6: #9e3670;

- --base-color-scale-yellow-0-hsl: 46 86% 80%;
+ --base-color-scale-pink-7: #7d2457;

- --base-color-scale-yellow-0: hsl(46, 86%, 80%);
+ --base-color-scale-pink-8: #5e103e;

- --base-color-scale-yellow-1-hsl: 44 85% 66%;
+ --base-color-scale-pink-9: #42062a;

- --base-color-scale-yellow-1: hsl(44, 85%, 66%);
+ --base-color-scale-coral-0: #ffddd2;

- --base-color-scale-yellow-2-hsl: 42 74% 57%;
+ --base-color-scale-coral-1: #ffc2b2;

- --base-color-scale-yellow-2: hsl(42, 74%, 57%);
+ --base-color-scale-coral-2: #ffa28b;

- --base-color-scale-yellow-3-hsl: 41 72% 48%;
+ --base-color-scale-coral-3: #f78166;

- --base-color-scale-yellow-3: hsl(41, 72%, 48%);
+ --base-color-scale-coral-4: #ea6045;

- --base-color-scale-yellow-4-hsl: 40 91% 38%;
+ --base-color-scale-coral-5: #cf462d;

- --base-color-scale-yellow-4: hsl(40, 91%, 38%);
+ --base-color-scale-coral-6: #ac3220;

- --base-color-scale-yellow-5-hsl: 40 96% 32%;
+ --base-color-scale-coral-7: #872012;

- --base-color-scale-yellow-5: hsl(40, 96%, 32%);
+ --base-color-scale-coral-8: #640d04;

- --base-color-scale-yellow-6-hsl: 37 91% 27%;
+ --base-color-scale-coral-9: #460701;

- --base-color-scale-yellow-6: hsl(37, 91%, 27%);
+ --base-color-scale-lemon-0: #fff6a6;

- --base-color-scale-yellow-7-hsl: 35 100% 21%;
+ --base-color-scale-lemon-1: #fae85a;

- --base-color-scale-yellow-7: hsl(35, 100%, 21%);
+ --base-color-scale-lemon-2: #e1cd41;

- --base-color-scale-yellow-8-hsl: 33 100% 15%;
+ --base-color-scale-lemon-3: #c5ae13;

- --base-color-scale-yellow-8: hsl(33, 100%, 15%);
+ --base-color-scale-lemon-4: #a69000;

- --base-color-scale-yellow-9-hsl: 30 100% 10%;
+ --base-color-scale-lemon-5: #8c7600;

- --base-color-scale-yellow-9: hsl(30, 100%, 10%);
+ --base-color-scale-lemon-6: #705d00;

- --base-color-scale-lemon-0-hsl: 54 100% 83%;
+ --base-color-scale-lemon-7: #564500;

- --base-color-scale-lemon-0: hsl(54, 100%, 83%);
+ --base-color-scale-lemon-8: #3d2f00;

- --base-color-scale-lemon-1-hsl: 53 94% 67%;
+ --base-color-scale-lemon-9: #2a1e00;

- --base-color-scale-lemon-1: hsl(53, 94%, 67%);
+ --base-color-scale-lime-0: #d9ef95;

- --base-color-scale-lemon-2-hsl: 52 73% 57%;
+ --base-color-scale-lime-1: #bedc6c;

- --base-color-scale-lemon-2: hsl(52, 73%, 57%);
+ --base-color-scale-lime-2: #a4c847;

- --base-color-scale-lemon-3-hsl: 52 82% 42%;
+ --base-color-scale-lime-3: #8ab034;

- --base-color-scale-lemon-3: hsl(52, 82%, 42%);
+ --base-color-scale-lime-4: #739826;

- --base-color-scale-lemon-4-hsl: 52 100% 33%;
+ --base-color-scale-lime-5: #5c8118;

- --base-color-scale-lemon-4: hsl(52, 100%, 33%);
+ --base-color-scale-lime-6: #46680f;

- --base-color-scale-lemon-5-hsl: 51 100% 27%;
+ --base-color-scale-lime-7: #314f07;

- --base-color-scale-lemon-5: hsl(51, 100%, 27%);
+ --base-color-scale-lime-8: #1e3703;

- --base-color-scale-lemon-6-hsl: 50 100% 22%;
+ --base-color-scale-lime-9: #102401;

- --base-color-scale-lemon-6: hsl(50, 100%, 22%);
+ --base-color-scale-teal-0: #bdeee8;

- --base-color-scale-lemon-7-hsl: 48 100% 17%;
+ --base-color-scale-teal-1: #8adfd7;

- --base-color-scale-lemon-7: hsl(48, 100%, 17%);
+ --base-color-scale-teal-2: #57ccc5;

- --base-color-scale-lemon-8-hsl: 46 100% 12%;
+ --base-color-scale-teal-3: #33b3ae;

- --base-color-scale-lemon-8: hsl(46, 100%, 12%);
+ --base-color-scale-teal-4: #2a9d9a;

- --base-color-scale-lemon-9-hsl: 43 100% 8%;
+ --base-color-scale-teal-5: #1d8281;

- --base-color-scale-lemon-9: hsl(43, 100%, 8%);
+ --base-color-scale-teal-6: #14696a;

- --base-color-scale-lime-0-hsl: 75 74% 76%;
+ --base-color-scale-teal-7: #0b5051;

- --base-color-scale-lime-0: hsl(75, 74%, 76%);
+ --base-color-scale-teal-8: #053738;

- --base-color-scale-lime-1-hsl: 76 62% 64%;
+ --base-color-scale-teal-9: #022425;

- --base-color-scale-lime-1: hsl(76, 62%, 64%);
+ --base-color-scale-indigo-0: #dbe3ff;

- --base-color-scale-lime-2-hsl: 77 54% 53%;
+ --base-color-scale-indigo-1: #c5cfff;

- --base-color-scale-lime-2: hsl(77, 54%, 53%);
+ --base-color-scale-indigo-2: #abb4ff;

- --base-color-scale-lime-3-hsl: 78 54% 45%;
+ --base-color-scale-indigo-3: #939aff;

- --base-color-scale-lime-3: hsl(78, 54%, 45%);
+ --base-color-scale-indigo-4: #797ef9;

- --base-color-scale-lime-4-hsl: 79 60% 37%;
+ --base-color-scale-indigo-5: #5d63f0;

- --base-color-scale-lime-4: hsl(79, 60%, 37%);
+ --base-color-scale-indigo-6: #464ed1;

- --base-color-scale-lime-5-hsl: 81 69% 30%;
+ --base-color-scale-indigo-7: #3238a7;

- --base-color-scale-lime-5: hsl(81, 69%, 30%);
+ --base-color-scale-indigo-8: #1e267c;

- --base-color-scale-lime-6-hsl: 83 75% 23%;
+ --base-color-scale-indigo-9: #131759;

- --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+ --brand-color-success-muted: #4bc36b99;

- --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+ --brand-color-error-muted: #ff878599;

- --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+ --brand-color-neutral-muted: #b7bfc8fe;

- --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+ --brand-color-neutral-subtle: #e9edf1fe;

- --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+ --brand-color-border-muted: #d3d9dffe;

- --brand-color-border-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.7%);
+ --brand-color-border-subtle: #e9edf1fe;

- --brand-color-success-muted: hsl(var(--base-color-scale-green-4-hsl) / 60%);
+ --brand-color-success-muted: #2e9e4299;

- --brand-color-success-subtle: hsl(var(--base-color-scale-green-4-hsl) / 85%);
+ --brand-color-success-subtle: #2e9e42d9;

- --brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
+ --brand-color-error-muted: #f8524999;

- --brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
+ --brand-color-error-subtle: #f85249d9;

- --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-4-hsl) / 99.6%);
+ --brand-color-neutral-muted: #6e7681fe;

- --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-4-hsl) / 99.9%);
+ --brand-color-neutral-subtle: #6e7681ff;

- --brand-color-border-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.7%);
+ --brand-color-border-subtle: #e9edf1fe;

- --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+ --brand-color-border-muted: #d3d9dffe;

- --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+ --brand-color-neutral-subtle: #e9edf1fe;

- --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+ --brand-color-neutral-muted: #b7bfc8fe;

- --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+ --brand-color-error-muted: #ff878599;

- --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+ --brand-color-success-muted: #4bc36b99;

- --brand-button-secondary-bgColor-hover: hsl(var(--base-color-scale-gray-3-hsl) / 20%);
+ --brand-button-secondary-bgColor-hover: #b7bfc833;

- --brand-button-secondary-bgColor-active: hsl(var(--base-color-scale-gray-3-hsl) / 40%);
+ --brand-button-secondary-bgColor-active: #b7bfc866;

- --brand-button-secondary-bgColor-hover: hsl(var(--base-color-scale-gray-3-hsl) / 20%);
+ --brand-button-secondary-bgColor-hover: #8a939e33;

- --brand-button-secondary-bgColor-active: hsl(var(--base-color-scale-gray-3-hsl) / 40%);
+ --brand-button-secondary-bgColor-active: #8a939e66;

- --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-5-hsl);
+ --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-5);

- --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-5-hsl);
+ --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-5);

- --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-2-hsl);
+ --brand-CTABanner-shadow-color-start: var(--base-color-scale-green-2);

- --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-3-hsl);
+ --brand-CTABanner-shadow-color-end: var(--base-color-scale-blue-3);

- --brand-footer-bg-color: var(--base-color-scale-white-0);
+ --brand-footer-bg-color: var(--base-color-scale-white);

- --brand-footer-bg-color: var(--base-color-scale-white-0);
+ --brand-footer-bg-color: var(--base-color-scale-white);

- --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: #fb51544d;

- --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-pink-2-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: #fb51544d;

- --brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);
+ --brand-Grid-column-bgColor-overlay: #fb51544d;

- --brand-SubdomainNavBar-canvas-default: hsl(var(--base-color-scale-white-0-hsl) / 50%);
+ --brand-SubdomainNavBar-canvas-default: #ffffff80;

- --brand-SubdomainNavBar-canvas-default: hsl(var(--base-color-scale-gray-9-hsl) / 50%);
+ --brand-SubdomainNavBar-canvas-default: #0d111780;

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

These hex values are a fair bit harder to read IMO. I think we're losing readability and the ease to correlate these values with base color scale tokens. AFAICT they also won't work with our color modes, which have different base values sans transparency.

Some ideas 💡

• As this is a JS file, how about we create a helper function that generates the final output, by using a named token as a parameter?
• Create new and locally scoped tokens with associated comments on what these hex values are and how they were created for future reference

[langermank]

Since this is just for presentation and not product UI, I wonder if we should hold off for now and add some documentation specific tokens when we have access to the new build with alpha logic later? Otherwise we can just add them now and reference the hex, but I don't think that should be a blocker for this PR IMO.

[rezrah]

doc tokens sound good, yeah let's leave as is for now 👍

[rezrah]

Wonder why the border radius is changing here 🤔

[langermank]

No idea.. but I just compared it to production, and the updated screenshot looks correct 🤷

[rezrah]

Could we add a TODO here to handle this via a StyleDictionary transformer? If the gray-9 value changes, it won't get reflected here, so would be better to handle this via interpolation in the long term. An annotation here would help remind us to do this (and also clarify this is gray-9 at 50%)

[langermank]

Remember this is temporary, so the new build process already handles this. It looks something like this:

hover: {
          $value: '{base.color.gray.2}',
          $type: 'color'
          },
          alpha: 0.2,
        },

Good idea to annotate 👍 will do that to make it easier to upgrade later

[rezrah]

This is the only one i'm seeing a regression on 👇

Think we can reduce opacity for time being. I'll push the change...

[langermank]

Yeah, I sort of on a whim aligned this closer to Primer product design tokens but we can totally revert this change if you'd prefer!

[rezrah]

👍 Yeah if that's okay, let's go back to old one for now to minimise visual regression as much as possible. I've reverted this to black at 50% now (still as a hex value)... We can put in a separate PR down the line to change the visuals.

[rezrah]

Looks great.. visual regressions appear to be minimal.

Nice work @langermank ✨ 👏 . Ship it!