@primer/primitives 11.3.1 → 11.3.2-rc.49de51de

package/README.md

@@ -37,6 +37,9 @@ All available imports:
 @import '@primer/primitives/dist/css/functional/size/viewport.css';
 @import '@primer/primitives/dist/css/functional/typography/typography.css';
 
+/* motion */
+@import '@primer/primitives/dist/css/base/motion/motion.css';
+
 /* color */
 @import '@primer/primitives/dist/css/functional/themes/light.css';
 @import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
@@ -49,6 +52,8 @@ All available imports:
 @import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';
 ```
 
+> **Note:** Motion CSS imports are required for components with animations, such as `Spinner` from `@primer/react`. If you're experiencing issues with animated components appearing static, ensure you've imported the motion CSS files.
+
 ## Design token data
 
 Design token data is stored in the [src/tokens](./src/tokens/) directory. These tokens are compiled with [style dictionary](https://amzn.github.io/style-dictionary/#/) in [scripts/buildTokens.ts](./scripts/buildTokens.ts).

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -125,8 +125,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #addcff;
   --color-prettylights-syntax-entity: #dbb7ff;
   --color-prettylights-syntax-entity-tag: #addcff;
-  --color-prettylights-syntax-invalid-illegal-bg: #bf5e0a;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #fe9a2d;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #a74c00;
@@ -719,6 +717,8 @@
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-bgColor-0: #010409;
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
@@ -1023,8 +1023,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #addcff;
     --color-prettylights-syntax-entity: #dbb7ff;
     --color-prettylights-syntax-entity-tag: #addcff;
-    --color-prettylights-syntax-invalid-illegal-bg: #bf5e0a;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #fe9a2d;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #a74c00;
@@ -1617,6 +1615,8 @@
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-bgColor-0: #010409;
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-colorblind.css

@@ -118,8 +118,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
   --color-prettylights-syntax-entity: #d2a8ff;
   --color-prettylights-syntax-entity-tag: #a5d6ff;
-  --color-prettylights-syntax-invalid-illegal-bg: #762d0a;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #f0883e;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #5a1e02;
@@ -752,6 +750,8 @@
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
@@ -1016,8 +1016,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
     --color-prettylights-syntax-entity: #d2a8ff;
     --color-prettylights-syntax-entity-tag: #a5d6ff;
-    --color-prettylights-syntax-invalid-illegal-bg: #762d0a;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #f0883e;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #5a1e02;
@@ -1650,6 +1648,8 @@
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -129,8 +129,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
   --color-prettylights-syntax-entity: #dcbdfb;
   --color-prettylights-syntax-entity-tag: #8ddb8c;
-  --color-prettylights-syntax-invalid-illegal-bg: #922323;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #f47067;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #682d0f;
@@ -739,6 +737,8 @@
   --codeMirror-lines-bgColor: var(--bgColor-default);
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --color-ansi-white-bright: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
@@ -1027,8 +1027,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
     --color-prettylights-syntax-entity: #dcbdfb;
     --color-prettylights-syntax-entity-tag: #8ddb8c;
-    --color-prettylights-syntax-invalid-illegal-bg: #922323;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #f47067;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #682d0f;
@@ -1637,6 +1635,8 @@
     --codeMirror-lines-bgColor: var(--bgColor-default);
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --color-ansi-white-bright: #cdd9e5;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-dimmed.css

@@ -130,8 +130,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
   --color-prettylights-syntax-entity: #dcbdfb;
   --color-prettylights-syntax-entity-tag: #8ddb8c;
-  --color-prettylights-syntax-invalid-illegal-bg: #922323;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #f47067;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #682d0f;
@@ -774,6 +772,8 @@
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --color-ansi-white-bright: #cdd9e5;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
@@ -1028,8 +1028,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
     --color-prettylights-syntax-entity: #dcbdfb;
     --color-prettylights-syntax-entity-tag: #8ddb8c;
-    --color-prettylights-syntax-invalid-illegal-bg: #922323;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #f47067;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #682d0f;
@@ -1672,6 +1670,8 @@
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --color-ansi-white-bright: #cdd9e5;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-high-contrast.css

@@ -123,8 +123,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #addcff;
   --color-prettylights-syntax-entity: #dbb7ff;
   --color-prettylights-syntax-entity-tag: #72f088;
-  --color-prettylights-syntax-invalid-illegal-bg: #e82a2f;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #ff9492;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #a74c00;
@@ -717,6 +715,8 @@
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-bgColor-0: #010409;
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
@@ -1021,8 +1021,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #addcff;
     --color-prettylights-syntax-entity: #dbb7ff;
     --color-prettylights-syntax-entity-tag: #72f088;
-    --color-prettylights-syntax-invalid-illegal-bg: #e82a2f;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #ff9492;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #a74c00;
@@ -1615,6 +1613,8 @@
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-bgColor-0: #010409;
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -126,8 +126,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #addcff;
   --color-prettylights-syntax-entity: #dbb7ff;
   --color-prettylights-syntax-entity-tag: #addcff;
-  --color-prettylights-syntax-invalid-illegal-bg: #e82a2f;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #ff9492;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #cc1421;
@@ -719,6 +717,8 @@
   --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
   --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-bgColor-0: #010409;
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
@@ -1024,8 +1024,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #addcff;
     --color-prettylights-syntax-entity: #dbb7ff;
     --color-prettylights-syntax-entity-tag: #addcff;
-    --color-prettylights-syntax-invalid-illegal-bg: #e82a2f;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #ff9492;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #cc1421;
@@ -1617,6 +1615,8 @@
     --codeMirror-gutterMarker-fgColor-muted: var(--fgColor-muted);
     --codeMirror-lineNumber-fgColor: var(--fgColor-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-bgColor-0: #010409;
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark-tritanopia.css

@@ -122,8 +122,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
   --color-prettylights-syntax-entity: #d2a8ff;
   --color-prettylights-syntax-entity-tag: #a5d6ff;
-  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #ff7b72;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #67060c;
@@ -753,6 +751,8 @@
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
@@ -1020,8 +1020,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
     --color-prettylights-syntax-entity: #d2a8ff;
     --color-prettylights-syntax-entity-tag: #a5d6ff;
-    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #ff7b72;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #67060c;
@@ -1651,6 +1649,8 @@
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/dark.css

@@ -116,8 +116,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
   --color-prettylights-syntax-entity: #d2a8ff;
   --color-prettylights-syntax-entity-tag: #7ee787;
-  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
   --color-prettylights-syntax-keyword: #ff7b72;
   --color-prettylights-syntax-markup-bold: #f0f6fc;
   --color-prettylights-syntax-markup-changed-bg: #5a1e02;
@@ -748,6 +746,8 @@
   --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --color-ansi-white-bright: #ffffff;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
   --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);
@@ -1014,8 +1014,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
     --color-prettylights-syntax-entity: #d2a8ff;
     --color-prettylights-syntax-entity-tag: #7ee787;
-    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
     --color-prettylights-syntax-keyword: #ff7b72;
     --color-prettylights-syntax-markup-bold: #f0f6fc;
     --color-prettylights-syntax-markup-changed-bg: #5a1e02;
@@ -1646,6 +1644,8 @@
     --codeMirror-matchingBracket-fgColor: var(--fgColor-default);
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --color-ansi-white-bright: #ffffff;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --contribution-default-borderColor-1: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-2: var(--contribution-default-borderColor-0);
     --contribution-default-borderColor-3: var(--contribution-default-borderColor-0);

package/dist/css/functional/themes/light-colorblind-high-contrast.css

@@ -114,8 +114,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #032563;
   --color-prettylights-syntax-entity: #512598;
   --color-prettylights-syntax-entity-tag: #023b95;
-  --color-prettylights-syntax-invalid-illegal-bg: #5b2300;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
   --color-prettylights-syntax-keyword: #873800;
   --color-prettylights-syntax-markup-changed-bg: #ffc67b;
   --color-prettylights-syntax-markup-changed-text: #702c00;
@@ -727,6 +725,8 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #010409;
   --color-ansi-black: #010409;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-markup-bold: #010409;
   --color-prettylights-syntax-markup-italic: #010409;
   --color-prettylights-syntax-storage-modifier-import: #010409;
@@ -1012,8 +1012,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #032563;
     --color-prettylights-syntax-entity: #512598;
     --color-prettylights-syntax-entity-tag: #023b95;
-    --color-prettylights-syntax-invalid-illegal-bg: #5b2300;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
     --color-prettylights-syntax-keyword: #873800;
     --color-prettylights-syntax-markup-changed-bg: #ffc67b;
     --color-prettylights-syntax-markup-changed-text: #702c00;
@@ -1625,6 +1623,8 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #010409;
     --color-ansi-black: #010409;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-markup-bold: #010409;
     --color-prettylights-syntax-markup-italic: #010409;
     --color-prettylights-syntax-storage-modifier-import: #010409;

package/dist/css/functional/themes/light-colorblind.css

@@ -105,8 +105,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;
   --color-prettylights-syntax-entity-tag: #0550ae;
-  --color-prettylights-syntax-invalid-illegal-bg: #762c00;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
   --color-prettylights-syntax-keyword: #bc4c00;
   --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
   --color-prettylights-syntax-markup-changed-text: #953800;
@@ -742,6 +740,8 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #1f2328;
   --color-ansi-black: #1f2328;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-markup-bold: #1f2328;
   --color-prettylights-syntax-markup-italic: #1f2328;
   --color-prettylights-syntax-storage-modifier-import: #1f2328;
@@ -1003,8 +1003,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
     --color-prettylights-syntax-entity: #6639ba;
     --color-prettylights-syntax-entity-tag: #0550ae;
-    --color-prettylights-syntax-invalid-illegal-bg: #762c00;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
     --color-prettylights-syntax-keyword: #bc4c00;
     --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
     --color-prettylights-syntax-markup-changed-text: #953800;
@@ -1640,6 +1638,8 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #1f2328;
     --color-ansi-black: #1f2328;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-markup-bold: #1f2328;
     --color-prettylights-syntax-markup-italic: #1f2328;
     --color-prettylights-syntax-storage-modifier-import: #1f2328;

package/dist/css/functional/themes/light-high-contrast.css

@@ -111,8 +111,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #032563;
   --color-prettylights-syntax-entity: #512598;
   --color-prettylights-syntax-entity-tag: #023b95;
-  --color-prettylights-syntax-invalid-illegal-bg: #6e011a;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
   --color-prettylights-syntax-keyword: #a0111f;
   --color-prettylights-syntax-markup-changed-bg: #ffc67b;
   --color-prettylights-syntax-markup-changed-text: #702c00;
@@ -724,6 +722,8 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #010409;
   --color-ansi-black: #010409;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-markup-bold: #010409;
   --color-prettylights-syntax-markup-italic: #010409;
   --color-prettylights-syntax-storage-modifier-import: #010409;
@@ -1009,8 +1009,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #032563;
     --color-prettylights-syntax-entity: #512598;
     --color-prettylights-syntax-entity-tag: #023b95;
-    --color-prettylights-syntax-invalid-illegal-bg: #6e011a;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
     --color-prettylights-syntax-keyword: #a0111f;
     --color-prettylights-syntax-markup-changed-bg: #ffc67b;
     --color-prettylights-syntax-markup-changed-text: #702c00;
@@ -1622,6 +1620,8 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #010409;
     --color-ansi-black: #010409;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-markup-bold: #010409;
     --color-prettylights-syntax-markup-italic: #010409;
     --color-prettylights-syntax-storage-modifier-import: #010409;

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -115,8 +115,6 @@
   --color-prettylights-syntax-constant-other-reference-link: #032563;
   --color-prettylights-syntax-entity: #512598;
   --color-prettylights-syntax-entity-tag: #023b95;
-  --color-prettylights-syntax-invalid-illegal-bg: #6e011a;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
   --color-prettylights-syntax-keyword: #a0111f;
   --color-prettylights-syntax-markup-changed-bg: #ffc1bc;
   --color-prettylights-syntax-markup-changed-text: #86061d;
@@ -727,6 +725,8 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #010409;
   --color-ansi-black: #010409;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-markup-bold: #010409;
   --color-prettylights-syntax-markup-italic: #010409;
   --color-prettylights-syntax-storage-modifier-import: #010409;
@@ -1013,8 +1013,6 @@
     --color-prettylights-syntax-constant-other-reference-link: #032563;
     --color-prettylights-syntax-entity: #512598;
     --color-prettylights-syntax-entity-tag: #023b95;
-    --color-prettylights-syntax-invalid-illegal-bg: #6e011a;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
     --color-prettylights-syntax-keyword: #a0111f;
     --color-prettylights-syntax-markup-changed-bg: #ffc1bc;
     --color-prettylights-syntax-markup-changed-text: #86061d;
@@ -1625,6 +1623,8 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #010409;
     --color-ansi-black: #010409;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-markup-bold: #010409;
     --color-prettylights-syntax-markup-italic: #010409;
     --color-prettylights-syntax-storage-modifier-import: #010409;

package/dist/css/functional/themes/light-tritanopia.css

@@ -109,8 +109,7 @@
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;
   --color-prettylights-syntax-entity-tag: #0550ae;
-  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-keyword: #cf222e;
   --color-prettylights-syntax-markup-changed-bg: #ffcecb;
   --color-prettylights-syntax-markup-changed-text: #a40e26;
@@ -745,6 +744,7 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #1f2328;
   --color-ansi-black: #1f2328;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
   --color-prettylights-syntax-markup-bold: #1f2328;
   --color-prettylights-syntax-markup-italic: #1f2328;
   --color-prettylights-syntax-storage-modifier-import: #1f2328;
@@ -1007,8 +1007,7 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
     --color-prettylights-syntax-entity: #6639ba;
     --color-prettylights-syntax-entity-tag: #0550ae;
-    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-keyword: #cf222e;
     --color-prettylights-syntax-markup-changed-bg: #ffcecb;
     --color-prettylights-syntax-markup-changed-text: #a40e26;
@@ -1643,6 +1642,7 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #1f2328;
     --color-ansi-black: #1f2328;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
     --color-prettylights-syntax-markup-bold: #1f2328;
     --color-prettylights-syntax-markup-italic: #1f2328;
     --color-prettylights-syntax-storage-modifier-import: #1f2328;

package/dist/css/functional/themes/light.css

@@ -107,8 +107,7 @@
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
   --color-prettylights-syntax-entity: #6639ba;
   --color-prettylights-syntax-entity-tag: #0550ae;
-  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
   --color-prettylights-syntax-keyword: #cf222e;
   --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
   --color-prettylights-syntax-markup-changed-text: #953800;
@@ -743,6 +742,7 @@
   --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
   --codeMirror-syntax-fgColor-comment: #1f2328;
   --color-ansi-black: #1f2328;
+  --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
   --color-prettylights-syntax-markup-bold: #1f2328;
   --color-prettylights-syntax-markup-italic: #1f2328;
   --color-prettylights-syntax-storage-modifier-import: #1f2328;
@@ -1005,8 +1005,7 @@
     --color-prettylights-syntax-constant-other-reference-link: #0a3069;
     --color-prettylights-syntax-entity: #6639ba;
     --color-prettylights-syntax-entity-tag: #0550ae;
-    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+    --color-prettylights-syntax-invalid-illegal-text: var(--fgColor-danger);
     --color-prettylights-syntax-keyword: #cf222e;
     --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
     --color-prettylights-syntax-markup-changed-text: #953800;
@@ -1641,6 +1640,7 @@
     --codeMirror-selection-bgColor: var(--borderColor-accent-muted);
     --codeMirror-syntax-fgColor-comment: #1f2328;
     --color-ansi-black: #1f2328;
+    --color-prettylights-syntax-invalid-illegal-bg: var(--bgColor-danger-muted);
     --color-prettylights-syntax-markup-bold: #1f2328;
     --color-prettylights-syntax-markup-italic: #1f2328;
     --color-prettylights-syntax-storage-modifier-import: #1f2328;

package/dist/docs/functional/themes/dark-colorblind-high-contrast.json

@@ -13946,31 +13946,17 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "syntax"
-      },
-      "org.primer.overrides": {
-        "dark": "#e82a2f",
-        "dark-protanopia-deuteranopia": "#bf5e0a",
-        "dark-protanopia-deuteranopia-high-contrast": "#bf5e0a",
-        "light-protanopia-deuteranopia": "#bf5e0a",
-        "light-protanopia-deuteranopia-high-contrast": "#bf5e0a"
       }
     },
     "filePath": "src/tokens/functional/color/syntax.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.color.orange.7}",
+      "$value": "{bgColor.danger.muted}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "syntax"
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.red.7}",
-          "dark-protanopia-deuteranopia": "{base.color.orange.7}",
-          "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.7}",
-          "light-protanopia-deuteranopia": "{base.color.orange.7}",
-          "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.7}"
         }
       },
       "key": "{color.prettylights.syntax.invalid.illegal.bg}"
@@ -13978,7 +13964,7 @@
     "name": "color-prettylights-syntax-invalid-illegal-bg",
     "attributes": {},
     "path": ["color", "prettylights", "syntax", "invalid", "illegal", "bg"],
-    "value": "#bf5e0a",
+    "value": "#ff80801a",
     "type": "color"
   },
   "color-prettylights-syntax-invalid-illegal-text": {
@@ -13987,23 +13973,17 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "syntax"
-      },
-      "org.primer.overrides": {
-        "dark": "#f0f6fc"
       }
     },
     "filePath": "src/tokens/functional/color/syntax.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.color.neutral.12}",
+      "$value": "{fgColor.danger}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "syntax"
-        },
-        "org.primer.overrides": {
-          "dark": "{base.color.neutral.12}"
         }
       },
       "key": "{color.prettylights.syntax.invalid.illegal.text}"
@@ -14011,7 +13991,7 @@
     "name": "color-prettylights-syntax-invalid-illegal-text",
     "attributes": {},
     "path": ["color", "prettylights", "syntax", "invalid", "illegal", "text"],
-    "value": "#f0f6fc",
+    "value": "#ffb757",
     "type": "color"
   },
   "color-prettylights-syntax-keyword": {