fix: correct Carbon theme snippet formatting and token values (#320)

* fix: escape dollar signs in snippet body values

* fix: convert comment sections to valid JSON format

Author: Yashrajsingh2001

.vscode/carbon-theme.code-snippets

@@ -1,8 +1,8 @@
 // WARNING: installed by carbon-vscode-snippets local updates will be lost on running package install
 {
-  "// ============================================": {},
-  "// Background Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Background Tokens
+  // ============================================
   "Carbon background": {
     "prefix": "$background",
     "body": "$$background",
@@ -43,9 +43,9 @@
     "body": "$$background-brand",
     "description": "Feature background color"
   },
-  "// ============================================": {},
-  "// Layer Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Layer Tokens
+  // ============================================
   "Carbon layer 01": {
     "prefix": "$layer-01",
     "body": "$$layer-01",
@@ -153,12 +153,12 @@
   },
   "Carbon layer selected disabled": {
     "prefix": "$layer-selected-disabled",
-    "body": "$layer-selected-disabled",
+    "body": "$$layer-selected-disabled",
     "description": "Disabled color for selected layers"
   },
-  "// ============================================": {},
-  "// Layer Accent Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Layer Accent Tokens
+  // ============================================
   "Carbon layer accent 01": {
     "prefix": "$layer-accent-01",
     "body": "$$layer-accent-01",
@@ -196,7 +196,7 @@
   },
   "Carbon layer accent hover": {
     "prefix": "$layer-accent-hover",
-    "body": "$layer-accent-hover",
+    "body": "$$layer-accent-hover",
     "description": "Contextual layer accent hover token; Automatically matches layer context"
   },
   "Carbon layer accent active 01": {
@@ -216,12 +216,12 @@
   },
   "Carbon layer accent active": {
     "prefix": "$layer-accent-active",
-    "body": "$layer-accent-active",
+    "body": "$$layer-accent-active",
     "description": "Contextual layer accent active token; Automatically matches layer context"
   },
-  "// ============================================": {},
-  "// Field Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Field Tokens
+  // ============================================
   "Carbon field 01": {
     "prefix": "$field-01",
     "body": "$$field-01",
@@ -262,9 +262,9 @@
     "body": "$$field-hover",
     "description": "Contextual field hover token; Automatically matches layer context"
   },
-  "// ============================================": {},
-  "// Border Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Border Tokens
+  // ============================================
   "Carbon border interactive": {
     "prefix": "$border-interactive",
     "body": "$$border-interactive",
@@ -312,7 +312,7 @@
   },
   "Carbon border subtle selected": {
     "prefix": "$border-subtle-selected",
-    "body": "$border-subtle-selected",
+    "body": "$$border-subtle-selected",
     "description": "Contextual subtle selected border token; Automatically matches layer context"
   },
   "Carbon border strong 01": {
@@ -365,9 +365,9 @@
     "body": "$$border-disabled",
     "description": "Disabled border color (excluding border-subtles)"
   },
-  "// ============================================": {},
-  "// Text Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Text Tokens
+  // ============================================
   "Carbon text primary": {
     "prefix": "$text-primary",
     "body": "$$text-primary",
@@ -385,7 +385,7 @@
   },
   "Carbon text on color": {
     "prefix": "$text-on-color",
-    "body": "$text-on-color",
+    "body": "$$text-on-color",
     "description": "Text on interactive colors; Text on button colors"
   },
   "Carbon text on color disabled": {
@@ -413,17 +413,17 @@
     "body": "$$text-disabled",
     "description": "Disabled text color"
   },
-  "// ============================================": {},
-  "// Link Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Link Tokens
+  // ============================================
   "Carbon link primary": {
     "prefix": "$link-primary",
     "body": "$$link-primary",
     "description": "Primary links"
   },
   "Carbon link primary hover": {
     "prefix": "$link-primary-hover",
-    "body": "$link-primary-hover",
+    "body": "$$link-primary-hover",
     "description": "Hover color for $link-primary"
   },
   "Carbon link secondary": {
@@ -438,27 +438,27 @@
   },
   "Carbon link inverse hover": {
     "prefix": "$link-inverse-hover",
-    "body": "$link-inverse-hover",
+    "body": "$$link-inverse-hover",
     "description": "Hover color for links on $background-inverse backgrounds"
   },
   "Carbon link inverse active": {
     "prefix": "$link-inverse-active",
-    "body": "$link-inverse-active",
+    "body": "$$link-inverse-active",
     "description": "Active color for links on $background-inverse backgrounds"
   },
   "Carbon link inverse visited": {
     "prefix": "$link-inverse-visited",
-    "body": "$link-inverse-visited",
+    "body": "$$link-inverse-visited",
     "description": "Color for visited links on $background-inverse backgrounds"
   },
   "Carbon link visited": {
     "prefix": "$link-visited",
     "body": "$$link-visited",
     "description": "Color for visited links"
   },
-  "// ============================================": {},
-  "// Icon Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Icon Tokens
+  // ============================================
   "Carbon icon primary": {
     "prefix": "$icon-primary",
     "body": "$$icon-primary",
@@ -471,7 +471,7 @@
   },
   "Carbon icon on color": {
     "prefix": "$icon-on-color",
-    "body": "$icon-on-color",
+    "body": "$$icon-on-color",
     "description": "Icons on interactive colors; Icons on non-layer colors"
   },
   "Carbon icon on color disabled": {
@@ -494,9 +494,9 @@
     "body": "$$icon-disabled",
     "description": "Disabled icon color"
   },
-  "// ============================================": {},
-  "// Support Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Support Tokens
+  // ============================================
   "Carbon support error": {
     "prefix": "$support-error",
     "body": "$$support-error",
@@ -552,9 +552,9 @@
     "body": "$support-caution-undefined",
     "description": "Undefined status"
   },
-  "// ============================================": {},
-  "// Focus Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Focus Tokens
+  // ============================================
   "Carbon focus": {
     "prefix": "$focus",
     "body": "$$focus",
@@ -570,9 +570,9 @@
     "body": "$$focus-inverse",
     "description": "Focus on high contrast moments"
   },
-  "// ============================================": {},
-  "// Miscellaneous Tokens": {},
-  "// ============================================": {},
+  // ============================================
+  // Miscellaneous Tokens
+  // ============================================
   "Carbon interactive": {
     "prefix": "$interactive",
     "body": "$$interactive",