feat: syntax tokens for code-snippet inserted and deleted lines (#22037)

annawen1 · web-flow · commit c93243c00458 · 2026-04-16T18:21:16.000Z
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -371,6 +371,7 @@ exports[`Public API should only change with a semver change 1`] = `
   "syntaxDefinition",
   "syntaxDefinitionKeyword",
   "syntaxDefinitionOperator",
+  "syntaxDeleted",
   "syntaxDerefOperator",
   "syntaxDocComment",
   "syntaxDocString",
@@ -386,6 +387,7 @@ exports[`Public API should only change with a semver change 1`] = `
   "syntaxHeading4",
   "syntaxHeading5",
   "syntaxHeading6",
+  "syntaxInserted",
   "syntaxInteger",
   "syntaxInvalid",
   "syntaxKeyword",
diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -217,6 +217,8 @@ describe('@carbon/styles/scss/theme', () => {
         "syntax-standard",
         "syntax-local",
         "syntax-special",
+        "syntax-inserted",
+        "syntax-deleted",
         "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
@@ -34,12 +34,14 @@ import {
   // Support
   blue50,
   cyan70,
+  green20,
   green40,
   green50,
   green60,
   yellow30,
   yellow60,
   orange40,
+  red20,
   red50,
   red60,
   purple40,
@@ -306,6 +308,8 @@ export const syntaxFunction = yellow60;
 export const syntaxStandard = blue60;
 export const syntaxLocal = blue60;
 export const syntaxSpecial = blue60;
+export const syntaxInserted = green20;
+export const syntaxDeleted = red20;
 
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -36,11 +36,13 @@ import {
   green30,
   green40,
   green50,
+  green60,
   yellow30,
   orange40,
   red40,
   red50,
   red60,
+  red70,
   purple40,
   purple50,
   purple60,
@@ -307,6 +309,8 @@ export const syntaxFunction = yellow30;
 export const syntaxStandard = blue50;
 export const syntaxLocal = blue30;
 export const syntaxSpecial = blue50;
+export const syntaxInserted = green60;
+export const syntaxDeleted = red70;
 
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -33,16 +33,18 @@ import {
   // Support
   blue30,
   blue50,
-  green30,
   cyan40,
+  green30,
   green40,
   green50,
+  green60,
   yellow30,
   orange40,
   red30,
   red40,
   red50,
   red60,
+  red70,
   purple40,
   purple50,
   purple60,
@@ -309,6 +311,8 @@ export const syntaxFunction = yellow30;
 export const syntaxStandard = blue50;
 export const syntaxLocal = blue30;
 export const syntaxSpecial = blue50;
+export const syntaxInserted = green60;
+export const syntaxDeleted = red70;
 
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
diff --git a/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap b/packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap
@@ -332,6 +332,8 @@ exports[`v11 v11 token group 1`] = `
   "syntax-standard",
   "syntax-local",
   "syntax-special",
+  "syntax-inserted",
+  "syntax-deleted",
   "ai-popover-background",
   "ai-popover-shadow-outer-01",
   "ai-popover-shadow-outer-02",
diff --git a/packages/themes/src/tokens/__tests__/metadata-test.js b/packages/themes/src/tokens/__tests__/metadata-test.js
@@ -1285,6 +1285,14 @@ test('metadata', () => {
           "name": "syntax-special",
           "type": "color",
         },
+        {
+          "name": "syntax-inserted",
+          "type": "color",
+        },
+        {
+          "name": "syntax-deleted",
+          "type": "color",
+        },
         {
           "name": "ai-popover-background",
           "type": "color",
diff --git a/packages/themes/src/tokens/v11TokenGroup.js b/packages/themes/src/tokens/v11TokenGroup.js
@@ -441,6 +441,8 @@ export const syntaxHighlight = TokenGroup.create({
     'syntax-standard',
     'syntax-local',
     'syntax-special',
+    'syntax-inserted',
+    'syntax-deleted',
   ],
 });
 
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
@@ -34,12 +34,14 @@ import {
   // Support
   blue50,
   cyan70,
+  green20,
   green40,
   green50,
   green60,
   yellow30,
   yellow60,
   orange40,
+  red20,
   red50,
   red60,
   purple40,
@@ -306,6 +308,8 @@ export const syntaxFunction = yellow60;
 export const syntaxStandard = blue60;
 export const syntaxLocal = blue60;
 export const syntaxSpecial = blue60;
+export const syntaxInserted = green20;
+export const syntaxDeleted = red20;
 
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
