@primer/primitives 7.11.8-rc.ec564b0 → 7.11.8-rc.f8fce74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.11.8-rc.ec564b0",
+  "version": "7.11.8-rc.f8fce74",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -43,7 +43,7 @@
     "prebuild:tokens": "rm -rf tokens-v2-private",
     "prebuild:next": "rm -rf tokens-next-private",
     "prepack": "npm run build && npm run build:tokens && npm run build:next",
-    "prepare": "husky install && npm run install:docs && npm run install:storybook",
+    "prepare": "husky install",
     "release": "changeset publish",
     "start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
     "test": "jest --verbose --coverage",
@@ -87,9 +87,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
-    "typescript": "^4.9.3"
-  },
-  "dependencies": {
+    "typescript": "^4.9.3",
     "markdown-table-ts": "^1.0.3"
   }
 }

package/tokens-next-private/css/functional/themes/dark-colorblind.css

@@ -42,7 +42,7 @@
   --headerSearch-bgColor: #0d1117;
   --headerSearch-borderColor: #30363d;
   --avatar-bgColor: #ffffff1a;
-  --avatar-borderColor: #00000000;
+  --avatar-borderColor: #30363d66;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
   --avatarStack-fade-bgColor-default: #30363d;
   --avatarStack-fade-bgColor-muted: #21262d;
@@ -256,6 +256,7 @@
   --color-ansi-cyan-bright: #56d4dd;
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
   --color-prettylights-syntax-entity: #d2a8ff;
   --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
   --color-prettylights-syntax-entity-tag: #a5d6ff;
@@ -264,7 +265,9 @@
   --color-prettylights-syntax-variable: #ffa657;
   --color-prettylights-syntax-brackethighlighter-unmatched: #db6d28;
   --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-invalid-illegal-bg: #762d0a;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
   --color-prettylights-syntax-carriage-return-bg: #9b4215;
   --color-prettylights-syntax-string-regexp: #a5d6ff;
   --color-prettylights-syntax-markup-list: #f2cc60;
@@ -281,100 +284,99 @@
   --color-prettylights-syntax-markup-ignored-bg: #1158c7;
   --color-prettylights-syntax-meta-diff-range: #d2a8ff;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
-  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-  --color-scale-black: #010409; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-transparent: #00000000; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-white: #ffffff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-0: #f0f6fc; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-1: #c9d1d9; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-2: #b1bac4; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-3: #8b949e; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-4: #6e7681; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-5: #484f58; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-6: #30363d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-7: #21262d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-8: #161b22; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-gray-9: #0d1117; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-blue-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-green-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-0: #f8e3a1; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-1: #f2cc60; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-2: #e3b341; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-3: #d29922; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-4: #bb8009; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-5: #9e6a03; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-6: #845306; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-7: #693e00; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-8: #4b2900; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-yellow-9: #341a00; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-0: #ffdfb6; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-1: #ffc680; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-2: #ffa657; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-3: #f0883e; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-4: #db6d28; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-5: #bd561d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-6: #9b4215; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-7: #762d0a; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-8: #5a1e02; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-orange-9: #3d1300; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-0: #ffdfb6; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-1: #ffc680; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-2: #ffa657; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-3: #f0883e; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-4: #db6d28; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-5: #bd561d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-6: #9b4215; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-7: #762d0a; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-8: #5a1e02; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-red-9: #3d1300; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-0: #eddeff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-1: #e2c5ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-2: #d2a8ff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-3: #bc8cff; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-4: #a371f7; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-5: #8957e5; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-6: #6e40c9; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-7: #553098; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-8: #3c1e70; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-purple-9: #271052; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-0: #ffdaec; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-1: #ffbedd; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-2: #ff9bce; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-3: #f778ba; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-4: #db61a2; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-5: #bf4b8a; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-6: #9e3670; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-7: #7d2457; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-8: #5e103e; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-pink-9: #42062a; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-0: #ffddd2; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-1: #ffc2b2; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-2: #ffa28b; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-3: #f78166; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-4: #ea6045; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-5: #cf462d; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-6: #ac3220; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-7: #872012; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-8: #640d04; /* Avoid using scales, use other functional tokens instead */
-  --color-scale-coral-9: #460701; /* Avoid using scales, use other functional tokens instead */
+  --color-scale-black: #010409;
+  --color-scale-transparent: #00000000;
+  --color-scale-white: #ffffff;
+  --color-scale-gray-0: #f0f6fc;
+  --color-scale-gray-1: #c9d1d9;
+  --color-scale-gray-2: #b1bac4;
+  --color-scale-gray-3: #8b949e;
+  --color-scale-gray-4: #6e7681;
+  --color-scale-gray-5: #484f58;
+  --color-scale-gray-6: #30363d;
+  --color-scale-gray-7: #21262d;
+  --color-scale-gray-8: #161b22;
+  --color-scale-gray-9: #0d1117;
+  --color-scale-blue-0: #cae8ff;
+  --color-scale-blue-1: #a5d6ff;
+  --color-scale-blue-2: #79c0ff;
+  --color-scale-blue-3: #58a6ff;
+  --color-scale-blue-4: #388bfd;
+  --color-scale-blue-5: #1f6feb;
+  --color-scale-blue-6: #1158c7;
+  --color-scale-blue-7: #0d419d;
+  --color-scale-blue-8: #0c2d6b;
+  --color-scale-blue-9: #051d4d;
+  --color-scale-green-0: #cae8ff;
+  --color-scale-green-1: #a5d6ff;
+  --color-scale-green-2: #79c0ff;
+  --color-scale-green-3: #58a6ff;
+  --color-scale-green-4: #388bfd;
+  --color-scale-green-5: #1f6feb;
+  --color-scale-green-6: #1158c7;
+  --color-scale-green-7: #0d419d;
+  --color-scale-green-8: #0c2d6b;
+  --color-scale-green-9: #051d4d;
+  --color-scale-yellow-0: #f8e3a1;
+  --color-scale-yellow-1: #f2cc60;
+  --color-scale-yellow-2: #e3b341;
+  --color-scale-yellow-3: #d29922;
+  --color-scale-yellow-4: #bb8009;
+  --color-scale-yellow-5: #9e6a03;
+  --color-scale-yellow-6: #845306;
+  --color-scale-yellow-7: #693e00;
+  --color-scale-yellow-8: #4b2900;
+  --color-scale-yellow-9: #341a00;
+  --color-scale-orange-0: #ffdfb6;
+  --color-scale-orange-1: #ffc680;
+  --color-scale-orange-2: #ffa657;
+  --color-scale-orange-3: #f0883e;
+  --color-scale-orange-4: #db6d28;
+  --color-scale-orange-5: #bd561d;
+  --color-scale-orange-6: #9b4215;
+  --color-scale-orange-7: #762d0a;
+  --color-scale-orange-8: #5a1e02;
+  --color-scale-orange-9: #3d1300;
+  --color-scale-red-0: #ffdfb6;
+  --color-scale-red-1: #ffc680;
+  --color-scale-red-2: #ffa657;
+  --color-scale-red-3: #f0883e;
+  --color-scale-red-4: #db6d28;
+  --color-scale-red-5: #bd561d;
+  --color-scale-red-6: #9b4215;
+  --color-scale-red-7: #762d0a;
+  --color-scale-red-8: #5a1e02;
+  --color-scale-red-9: #3d1300;
+  --color-scale-purple-0: #eddeff;
+  --color-scale-purple-1: #e2c5ff;
+  --color-scale-purple-2: #d2a8ff;
+  --color-scale-purple-3: #bc8cff;
+  --color-scale-purple-4: #a371f7;
+  --color-scale-purple-5: #8957e5;
+  --color-scale-purple-6: #6e40c9;
+  --color-scale-purple-7: #553098;
+  --color-scale-purple-8: #3c1e70;
+  --color-scale-purple-9: #271052;
+  --color-scale-pink-0: #ffdaec;
+  --color-scale-pink-1: #ffbedd;
+  --color-scale-pink-2: #ff9bce;
+  --color-scale-pink-3: #f778ba;
+  --color-scale-pink-4: #db61a2;
+  --color-scale-pink-5: #bf4b8a;
+  --color-scale-pink-6: #9e3670;
+  --color-scale-pink-7: #7d2457;
+  --color-scale-pink-8: #5e103e;
+  --color-scale-pink-9: #42062a;
+  --color-scale-coral-0: #ffddd2;
+  --color-scale-coral-1: #ffc2b2;
+  --color-scale-coral-2: #ffa28b;
+  --color-scale-coral-3: #f78166;
+  --color-scale-coral-4: #ea6045;
+  --color-scale-coral-5: #cf462d;
+  --color-scale-coral-6: #ac3220;
+  --color-scale-coral-7: #872012;
+  --color-scale-coral-8: #640d04;
+  --color-scale-coral-9: #460701;
   --shadow-inset: 0px 0px 0px 0px #000000;
   --shadow-highlight: 0px 0px 0px 0px #000000;
   --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
@@ -430,7 +432,7 @@
     --headerSearch-bgColor: #0d1117;
     --headerSearch-borderColor: #30363d;
     --avatar-bgColor: #ffffff1a;
-    --avatar-borderColor: #00000000;
+    --avatar-borderColor: #30363d66;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;
     --avatarStack-fade-bgColor-default: #30363d;
     --avatarStack-fade-bgColor-muted: #21262d;
@@ -644,6 +646,7 @@
     --color-ansi-cyan-bright: #56d4dd;
     --color-prettylights-syntax-comment: #8b949e;
     --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
     --color-prettylights-syntax-entity: #d2a8ff;
     --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
     --color-prettylights-syntax-entity-tag: #a5d6ff;
@@ -652,7 +655,9 @@
     --color-prettylights-syntax-variable: #ffa657;
     --color-prettylights-syntax-brackethighlighter-unmatched: #db6d28;
     --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-invalid-illegal-bg: #762d0a;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
     --color-prettylights-syntax-carriage-return-bg: #9b4215;
     --color-prettylights-syntax-string-regexp: #a5d6ff;
     --color-prettylights-syntax-markup-list: #f2cc60;
@@ -669,100 +674,99 @@
     --color-prettylights-syntax-markup-ignored-bg: #1158c7;
     --color-prettylights-syntax-meta-diff-range: #d2a8ff;
     --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
-    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-    --color-scale-black: #010409; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-transparent: #00000000; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-white: #ffffff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-0: #f0f6fc; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-1: #c9d1d9; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-2: #b1bac4; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-3: #8b949e; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-4: #6e7681; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-5: #484f58; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-6: #30363d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-7: #21262d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-8: #161b22; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-gray-9: #0d1117; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-blue-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-green-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-0: #f8e3a1; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-1: #f2cc60; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-2: #e3b341; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-3: #d29922; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-4: #bb8009; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-5: #9e6a03; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-6: #845306; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-7: #693e00; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-8: #4b2900; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-yellow-9: #341a00; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-0: #ffdfb6; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-1: #ffc680; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-2: #ffa657; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-3: #f0883e; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-4: #db6d28; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-5: #bd561d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-6: #9b4215; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-7: #762d0a; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-8: #5a1e02; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-orange-9: #3d1300; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-0: #ffdfb6; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-1: #ffc680; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-2: #ffa657; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-3: #f0883e; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-4: #db6d28; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-5: #bd561d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-6: #9b4215; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-7: #762d0a; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-8: #5a1e02; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-red-9: #3d1300; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-0: #eddeff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-1: #e2c5ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-2: #d2a8ff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-3: #bc8cff; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-4: #a371f7; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-5: #8957e5; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-6: #6e40c9; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-7: #553098; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-8: #3c1e70; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-purple-9: #271052; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-0: #ffdaec; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-1: #ffbedd; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-2: #ff9bce; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-3: #f778ba; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-4: #db61a2; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-5: #bf4b8a; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-6: #9e3670; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-7: #7d2457; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-8: #5e103e; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-pink-9: #42062a; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-0: #ffddd2; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-1: #ffc2b2; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-2: #ffa28b; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-3: #f78166; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-4: #ea6045; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-5: #cf462d; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-6: #ac3220; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-7: #872012; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-8: #640d04; /* Avoid using scales, use other functional tokens instead */
-    --color-scale-coral-9: #460701; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-black: #010409;
+    --color-scale-transparent: #00000000;
+    --color-scale-white: #ffffff;
+    --color-scale-gray-0: #f0f6fc;
+    --color-scale-gray-1: #c9d1d9;
+    --color-scale-gray-2: #b1bac4;
+    --color-scale-gray-3: #8b949e;
+    --color-scale-gray-4: #6e7681;
+    --color-scale-gray-5: #484f58;
+    --color-scale-gray-6: #30363d;
+    --color-scale-gray-7: #21262d;
+    --color-scale-gray-8: #161b22;
+    --color-scale-gray-9: #0d1117;
+    --color-scale-blue-0: #cae8ff;
+    --color-scale-blue-1: #a5d6ff;
+    --color-scale-blue-2: #79c0ff;
+    --color-scale-blue-3: #58a6ff;
+    --color-scale-blue-4: #388bfd;
+    --color-scale-blue-5: #1f6feb;
+    --color-scale-blue-6: #1158c7;
+    --color-scale-blue-7: #0d419d;
+    --color-scale-blue-8: #0c2d6b;
+    --color-scale-blue-9: #051d4d;
+    --color-scale-green-0: #cae8ff;
+    --color-scale-green-1: #a5d6ff;
+    --color-scale-green-2: #79c0ff;
+    --color-scale-green-3: #58a6ff;
+    --color-scale-green-4: #388bfd;
+    --color-scale-green-5: #1f6feb;
+    --color-scale-green-6: #1158c7;
+    --color-scale-green-7: #0d419d;
+    --color-scale-green-8: #0c2d6b;
+    --color-scale-green-9: #051d4d;
+    --color-scale-yellow-0: #f8e3a1;
+    --color-scale-yellow-1: #f2cc60;
+    --color-scale-yellow-2: #e3b341;
+    --color-scale-yellow-3: #d29922;
+    --color-scale-yellow-4: #bb8009;
+    --color-scale-yellow-5: #9e6a03;
+    --color-scale-yellow-6: #845306;
+    --color-scale-yellow-7: #693e00;
+    --color-scale-yellow-8: #4b2900;
+    --color-scale-yellow-9: #341a00;
+    --color-scale-orange-0: #ffdfb6;
+    --color-scale-orange-1: #ffc680;
+    --color-scale-orange-2: #ffa657;
+    --color-scale-orange-3: #f0883e;
+    --color-scale-orange-4: #db6d28;
+    --color-scale-orange-5: #bd561d;
+    --color-scale-orange-6: #9b4215;
+    --color-scale-orange-7: #762d0a;
+    --color-scale-orange-8: #5a1e02;
+    --color-scale-orange-9: #3d1300;
+    --color-scale-red-0: #ffdfb6;
+    --color-scale-red-1: #ffc680;
+    --color-scale-red-2: #ffa657;
+    --color-scale-red-3: #f0883e;
+    --color-scale-red-4: #db6d28;
+    --color-scale-red-5: #bd561d;
+    --color-scale-red-6: #9b4215;
+    --color-scale-red-7: #762d0a;
+    --color-scale-red-8: #5a1e02;
+    --color-scale-red-9: #3d1300;
+    --color-scale-purple-0: #eddeff;
+    --color-scale-purple-1: #e2c5ff;
+    --color-scale-purple-2: #d2a8ff;
+    --color-scale-purple-3: #bc8cff;
+    --color-scale-purple-4: #a371f7;
+    --color-scale-purple-5: #8957e5;
+    --color-scale-purple-6: #6e40c9;
+    --color-scale-purple-7: #553098;
+    --color-scale-purple-8: #3c1e70;
+    --color-scale-purple-9: #271052;
+    --color-scale-pink-0: #ffdaec;
+    --color-scale-pink-1: #ffbedd;
+    --color-scale-pink-2: #ff9bce;
+    --color-scale-pink-3: #f778ba;
+    --color-scale-pink-4: #db61a2;
+    --color-scale-pink-5: #bf4b8a;
+    --color-scale-pink-6: #9e3670;
+    --color-scale-pink-7: #7d2457;
+    --color-scale-pink-8: #5e103e;
+    --color-scale-pink-9: #42062a;
+    --color-scale-coral-0: #ffddd2;
+    --color-scale-coral-1: #ffc2b2;
+    --color-scale-coral-2: #ffa28b;
+    --color-scale-coral-3: #f78166;
+    --color-scale-coral-4: #ea6045;
+    --color-scale-coral-5: #cf462d;
+    --color-scale-coral-6: #ac3220;
+    --color-scale-coral-7: #872012;
+    --color-scale-coral-8: #640d04;
+    --color-scale-coral-9: #460701;
     --shadow-inset: 0px 0px 0px 0px #000000;
     --shadow-highlight: 0px 0px 0px 0px #000000;
     --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;