npm - @primer/primitives - Versions diffs - 10.4.0 → 10.5.0-rc.1c002767 - Mend

@primer/primitives 10.4.0 → 10.5.0-rc.1c002767

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/build/filters/index.d.ts +1 -0
package/dist/build/filters/index.js +1 -0
package/dist/build/filters/isGradient.d.ts +7 -0
package/dist/build/filters/isGradient.js +10 -0
package/dist/build/platforms/css.js +1 -0
package/dist/build/primerStyleDictionary.js +2 -1
package/dist/build/schemas/borderToken.d.ts +3 -3
package/dist/build/schemas/colorToken.d.ts +3 -3
package/dist/build/schemas/cubicBezierToken.d.ts +3 -3
package/dist/build/schemas/designToken.js +2 -0
package/dist/build/schemas/dimensionToken.d.ts +3 -3
package/dist/build/schemas/durationToken.d.ts +3 -3
package/dist/build/schemas/fontFamilyToken.d.ts +3 -3
package/dist/build/schemas/fontWeightToken.d.ts +3 -3
package/dist/build/schemas/gradientToken.d.ts +60 -0
package/dist/build/schemas/gradientToken.js +26 -0
package/dist/build/schemas/numberToken.d.ts +3 -3
package/dist/build/schemas/referenceValue.js +1 -1
package/dist/build/schemas/shadowToken.d.ts +3 -3
package/dist/build/schemas/stringToken.d.ts +3 -3
package/dist/build/schemas/tokenType.d.ts +1 -1
package/dist/build/schemas/typographyToken.d.ts +3 -3
package/dist/build/schemas/validTokenType.d.ts +1 -1
package/dist/build/schemas/validTokenType.js +1 -0
package/dist/build/schemas/viewportRangeToken.d.ts +3 -3
package/dist/build/transformers/gradientToCss.d.ts +8 -0
package/dist/build/transformers/gradientToCss.js +23 -0
package/dist/build/transformers/index.d.ts +1 -0
package/dist/build/transformers/index.js +1 -0
package/dist/css/functional/themes/dark-colorblind.css +130 -0
package/dist/css/functional/themes/dark-dimmed.css +130 -0
package/dist/css/functional/themes/dark-high-contrast.css +142 -12
package/dist/css/functional/themes/dark-tritanopia.css +130 -0
package/dist/css/functional/themes/dark.css +130 -0
package/dist/css/functional/themes/light-colorblind.css +130 -0
package/dist/css/functional/themes/light-high-contrast.css +142 -12
package/dist/css/functional/themes/light-tritanopia.css +130 -0
package/dist/css/functional/themes/light.css +130 -0
package/dist/docs/functional/themes/dark-colorblind.json +2146 -244
package/dist/docs/functional/themes/dark-dimmed.json +2146 -244
package/dist/docs/functional/themes/dark-high-contrast.json +2167 -265
package/dist/docs/functional/themes/dark-tritanopia.json +2146 -244
package/dist/docs/functional/themes/dark.json +2146 -244
package/dist/docs/functional/themes/light-colorblind.json +2146 -244
package/dist/docs/functional/themes/light-high-contrast.json +2167 -265
package/dist/docs/functional/themes/light-tritanopia.json +2146 -244
package/dist/docs/functional/themes/light.json +2146 -244
package/dist/figma/themes/dark-colorblind.json +819 -34
package/dist/figma/themes/dark-dimmed.json +819 -34
package/dist/figma/themes/dark-high-contrast.json +831 -46
package/dist/figma/themes/dark-tritanopia.json +819 -34
package/dist/figma/themes/dark.json +819 -34
package/dist/figma/themes/light-colorblind.json +818 -33
package/dist/figma/themes/light-high-contrast.json +830 -45
package/dist/figma/themes/light-tritanopia.json +818 -33
package/dist/figma/themes/light.json +818 -33
package/dist/internalCss/dark-colorblind.css +130 -0
package/dist/internalCss/dark-dimmed.css +130 -0
package/dist/internalCss/dark-high-contrast.css +142 -12
package/dist/internalCss/dark-tritanopia.css +130 -0
package/dist/internalCss/dark.css +130 -0
package/dist/internalCss/light-colorblind.css +130 -0
package/dist/internalCss/light-high-contrast.css +142 -12
package/dist/internalCss/light-tritanopia.css +130 -0
package/dist/internalCss/light.css +130 -0
package/dist/styleLint/functional/themes/dark-colorblind.json +2126 -224
package/dist/styleLint/functional/themes/dark-dimmed.json +2126 -224
package/dist/styleLint/functional/themes/dark-high-contrast.json +2166 -264
package/dist/styleLint/functional/themes/dark-tritanopia.json +2126 -224
package/dist/styleLint/functional/themes/dark.json +2126 -224
package/dist/styleLint/functional/themes/light-colorblind.json +2126 -224
package/dist/styleLint/functional/themes/light-high-contrast.json +2166 -264
package/dist/styleLint/functional/themes/light-tritanopia.json +2126 -224
package/dist/styleLint/functional/themes/light.json +2126 -224
package/package.json +1 -1
package/src/tokens/component/contribution.json5 +0 -37
package/src/tokens/functional/color/borderColor.json5 +8 -8
package/src/tokens/functional/color/data-vis.json5 +911 -41

package/dist/styleLint/functional/themes/light-high-contrast.json CHANGED Viewed

@@ -2207,7 +2207,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
         }
@@ -2222,7 +2222,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-accent-emphasis) /* utility class: .color-border-accent-emphasis */"
           }
@@ -2241,7 +2241,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
         }
@@ -2274,7 +2274,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-accent-muted) /* utility class: .color-border-accent */"
           }
@@ -2719,7 +2719,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-default) /* utility class: .color-border-default */"
         }
@@ -2740,7 +2740,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-default) /* utility class: .color-border-default */"
           }
@@ -2759,7 +2759,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "dark-dimmed": {
@@ -2788,7 +2788,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "dark-dimmed": {
@@ -2925,7 +2925,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": "#454c54",
@@ -2941,7 +2941,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "light-high-contrast": "{borderColor.default}",
@@ -2961,7 +2961,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"],
+        "scopes": ["borderColor", "effectColor"],
         "codeSyntax": {
           "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
         }
@@ -3000,7 +3000,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"],
+          "scopes": ["borderColor", "effectColor"],
           "codeSyntax": {
             "web": "var(--borderColor-muted) /* utility class: .color-border-muted */"
           }
@@ -3653,7 +3653,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       },
       "org.primer.overrides": {
         "light-high-contrast": {
@@ -3682,7 +3682,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         },
         "org.primer.overrides": {
           "light-high-contrast": {
@@ -3715,7 +3715,7 @@
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
-        "scopes": ["borderColor"]
+        "scopes": ["borderColor", "effectColor"]
       }
     },
     "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3727,7 +3727,7 @@
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
-          "scopes": ["borderColor"]
+          "scopes": ["borderColor", "effectColor"]
         }
       }
     },
@@ -10713,7 +10713,7 @@
     "key": "{color.prettylights.syntax.variable}"
   },
   "contribution-default-bgColor-0": {
-    "$value": "#e6eaef",
+    "$value": "#eff2f5",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -10722,15 +10722,13 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark-high-contrast": "#e6eaef",
-        "light-high-contrast": "#e6eaef",
         "dark-dimmed": "#dae0e7"
       }
     },
     "filePath": "src/tokens/component/contribution.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.color.neutral.3}",
+      "$value": "{base.color.neutral.2}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -10739,8 +10737,6 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark-high-contrast": "{base.color.neutral.3}",
-          "light-high-contrast": "{base.color.neutral.3}",
           "dark-dimmed": "{base.color.neutral.5}"
         }
       }
@@ -10881,8 +10877,8 @@
     "key": "{contribution.default.bgColor.4}"
   },
   "contribution-default-borderColor-0": {
-    "$value": "#010409",
-    "alpha": 1,
+    "$value": "#0104090d",
+    "alpha": 0.05,
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -10904,16 +10900,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -10921,7 +10907,7 @@
     "isSource": true,
     "original": {
       "$value": "{base.color.black}",
-      "alpha": 1,
+      "alpha": 0.05,
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -10943,16 +10929,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -10963,8 +10939,8 @@
     "key": "{contribution.default.borderColor.0}"
   },
   "contribution-default-borderColor-1": {
-    "$value": "#010409",
-    "alpha": 1,
+    "$value": "#0104090d",
+    "alpha": 0.05,
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -10986,16 +10962,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11003,7 +10969,7 @@
     "isSource": true,
     "original": {
       "$value": "{base.color.black}",
-      "alpha": 1,
+      "alpha": 0.05,
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -11025,16 +10991,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11045,8 +11001,8 @@
     "key": "{contribution.default.borderColor.1}"
   },
   "contribution-default-borderColor-2": {
-    "$value": "#010409",
-    "alpha": 1,
+    "$value": "#0104090d",
+    "alpha": 0.05,
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -11068,16 +11024,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11085,7 +11031,7 @@
     "isSource": true,
     "original": {
       "$value": "{base.color.black}",
-      "alpha": 1,
+      "alpha": 0.05,
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -11107,16 +11053,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11127,8 +11063,8 @@
     "key": "{contribution.default.borderColor.2}"
   },
   "contribution-default-borderColor-3": {
-    "$value": "#010409",
-    "alpha": 1,
+    "$value": "#0104090d",
+    "alpha": 0.05,
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -11150,16 +11086,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11167,7 +11093,7 @@
     "isSource": true,
     "original": {
       "$value": "{base.color.black}",
-      "alpha": 1,
+      "alpha": 0.05,
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -11189,16 +11115,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -11209,8 +11125,8 @@
     "key": "{contribution.default.borderColor.3}"
   },
   "contribution-default-borderColor-4": {
-    "$value": "#010409",
-    "alpha": 1,
+    "$value": "#0104090d",
+    "alpha": 0.05,
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -11232,16 +11148,6 @@
           "filePath": "src/tokens/component/contribution.json5",
           "isSource": true,
           "$type": "color"
-        },
-        "dark-high-contrast": {
-          "$value": "#ffffff",
-          "alpha": 1,
-          "filePath": "src/tokens/component/contribution.json5",
-          "isSource": true,
-          "$type": "color"
-        },
-        "light-high-contrast": {
-          "alpha": 1
         }
       }
     },
@@ -11249,7 +11155,7 @@
     "isSource": true,
     "original": {
       "$value": "{base.color.black}",
-      "alpha": 1,
+      "alpha": 0.05,
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -11271,16 +11177,6 @@
             "filePath": "src/tokens/component/contribution.json5",
             "isSource": true,
             "$type": "color"
-          },
-          "dark-high-contrast": {
-            "$value": "{base.color.white}",
-            "alpha": 1,
-            "filePath": "src/tokens/component/contribution.json5",
-            "isSource": true,
-            "$type": "color"
-          },
-          "light-high-contrast": {
-            "alpha": 1
           }
         }
       }
@@ -14260,7 +14156,7 @@
     "path": ["data", "auburn", "color", "emphasis"],
     "key": "{data.auburn.color.emphasis}"
   },
-  "data-auburn-color-muted": {
+  "data-auburn-color-gradientStop-1": {
     "$value": "#f2e9e9",
     "$type": "color",
     "$extensions": {
@@ -14268,68 +14164,58 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#f2e9e9"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.auburn.0}",
+      "$value": "{data.auburn.color.muted}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.auburn.0}"
         }
       }
     },
-    "name": "data-auburn-color-muted",
+    "name": "data-auburn-color-gradientStop-1",
     "attributes": {},
-    "path": ["data", "auburn", "color", "muted"],
-    "key": "{data.auburn.color.muted}"
+    "path": ["data", "auburn", "color", "gradientStop", "1"],
+    "key": "{data.auburn.color.gradientStop.1}"
   },
-  "data-blue-color-emphasis": {
-    "$value": "#006edb",
+  "data-auburn-color-gradientStop-2": {
+    "$value": "#f2e9e900",
     "$type": "color",
+    "alpha": 0,
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
-        "scopes": ["bgColor", "borderColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#006edb"
+        "scopes": ["bgColor"]
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.blue.5}",
+      "$value": "{data.auburn.color.muted}",
       "$type": "color",
+      "alpha": 0,
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
-          "scopes": ["bgColor", "borderColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.blue.5}"
+          "scopes": ["bgColor"]
         }
       }
     },
-    "name": "data-blue-color-emphasis",
+    "name": "data-auburn-color-gradientStop-2",
     "attributes": {},
-    "path": ["data", "blue", "color", "emphasis"],
-    "key": "{data.blue.color.emphasis}"
+    "path": ["data", "auburn", "color", "gradientStop", "2"],
+    "key": "{data.auburn.color.gradientStop.2}"
   },
-  "data-blue-color-muted": {
-    "$value": "#d1f0ff",
+  "data-auburn-color-muted": {
+    "$value": "#f2e9e9",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14338,13 +14224,13 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark": "#d1f0ff"
+        "dark": "#f2e9e9"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.blue.0}",
+      "$value": "{base.display.color.auburn.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14353,17 +14239,49 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.blue.0}"
+          "dark": "{base.display.color.auburn.0}"
         }
       }
     },
-    "name": "data-blue-color-muted",
+    "name": "data-auburn-color-muted",
     "attributes": {},
-    "path": ["data", "blue", "color", "muted"],
-    "key": "{data.blue.color.muted}"
+    "path": ["data", "auburn", "color", "muted"],
+    "key": "{data.auburn.color.muted}"
   },
-  "data-gray-color-emphasis": {
-    "$value": "#808fa3",
+  "data-auburn-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#f2e9e9",
+        "position": 0
+      },
+      {
+        "color": "#f2e9e900",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.auburn.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.auburn.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-auburn-gradient",
+    "attributes": {},
+    "path": ["data", "auburn", "gradient"],
+    "key": "{data.auburn.gradient}"
+  },
+  "data-blue-color-emphasis": {
+    "$value": "#006edb",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14372,13 +14290,13 @@
         "scopes": ["bgColor", "borderColor"]
       },
       "org.primer.overrides": {
-        "dark": "#808fa3"
+        "dark": "#006edb"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.gray.4}",
+      "$value": "{base.display.color.blue.5}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14387,85 +14305,75 @@
           "scopes": ["bgColor", "borderColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.gray.4}"
+          "dark": "{base.display.color.blue.5}"
         }
       }
     },
-    "name": "data-gray-color-emphasis",
+    "name": "data-blue-color-emphasis",
     "attributes": {},
-    "path": ["data", "gray", "color", "emphasis"],
-    "key": "{data.gray.color.emphasis}"
+    "path": ["data", "blue", "color", "emphasis"],
+    "key": "{data.blue.color.emphasis}"
   },
-  "data-gray-color-muted": {
-    "$value": "#e8ecf2",
+  "data-blue-color-gradientStop-1": {
+    "$value": "#d1f0ff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#e8ecf2"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.gray.0}",
+      "$value": "{data.blue.color.muted}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.gray.0}"
         }
       }
     },
-    "name": "data-gray-color-muted",
+    "name": "data-blue-color-gradientStop-1",
     "attributes": {},
-    "path": ["data", "gray", "color", "muted"],
-    "key": "{data.gray.color.muted}"
+    "path": ["data", "blue", "color", "gradientStop", "1"],
+    "key": "{data.blue.color.gradientStop.1}"
   },
-  "data-green-color-emphasis": {
-    "$value": "#30a147",
+  "data-blue-color-gradientStop-2": {
+    "$value": "#d1f0ff00",
     "$type": "color",
+    "alpha": 0,
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
-        "scopes": ["bgColor", "borderColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#30a147"
+        "scopes": ["bgColor"]
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.green.4}",
+      "$value": "{data.blue.color.muted}",
       "$type": "color",
+      "alpha": 0,
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
-          "scopes": ["bgColor", "borderColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.green.4}"
+          "scopes": ["bgColor"]
         }
       }
     },
-    "name": "data-green-color-emphasis",
+    "name": "data-blue-color-gradientStop-2",
     "attributes": {},
-    "path": ["data", "green", "color", "emphasis"],
-    "key": "{data.green.color.emphasis}"
+    "path": ["data", "blue", "color", "gradientStop", "2"],
+    "key": "{data.blue.color.gradientStop.2}"
   },
-  "data-green-color-muted": {
-    "$value": "#caf7ca",
+  "data-blue-color-muted": {
+    "$value": "#d1f0ff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14474,13 +14382,13 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark": "#caf7ca"
+        "dark": "#d1f0ff"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.green.0}",
+      "$value": "{base.display.color.blue.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14489,32 +14397,1486 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.green.0}"
+          "dark": "{base.display.color.blue.0}"
         }
       }
     },
-    "name": "data-green-color-muted",
+    "name": "data-blue-color-muted",
     "attributes": {},
-    "path": ["data", "green", "color", "muted"],
-    "key": "{data.green.color.muted}"
+    "path": ["data", "blue", "color", "muted"],
+    "key": "{data.blue.color.muted}"
   },
-  "data-orange-color-emphasis": {
-    "$value": "#eb670f",
-    "$type": "color",
-    "$extensions": {
+  "data-blue-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#d1f0ff",
+        "position": 0
+      },
+      {
+        "color": "#d1f0ff00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.blue.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.blue.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-blue-gradient",
+    "attributes": {},
+    "path": ["data", "blue", "gradient"],
+    "key": "{data.blue.gradient}"
+  },
+  "data-brown-color-emphasis": {
+    "$value": "#856d4c",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#856d4c"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.brown.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.brown.5}"
+        }
+      }
+    },
+    "name": "data-brown-color-emphasis",
+    "attributes": {},
+    "path": ["data", "brown", "color", "emphasis"],
+    "key": "{data.brown.color.emphasis}"
+  },
+  "data-brown-color-gradientStop-1": {
+    "$value": "#eeeae2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.brown.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-brown-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "brown", "color", "gradientStop", "1"],
+    "key": "{data.brown.color.gradientStop.1}"
+  },
+  "data-brown-color-gradientStop-2": {
+    "$value": "#eeeae200",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.brown.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-brown-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "brown", "color", "gradientStop", "2"],
+    "key": "{data.brown.color.gradientStop.2}"
+  },
+  "data-brown-color-muted": {
+    "$value": "#eeeae2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#eeeae2"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.brown.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.brown.0}"
+        }
+      }
+    },
+    "name": "data-brown-color-muted",
+    "attributes": {},
+    "path": ["data", "brown", "color", "muted"],
+    "key": "{data.brown.color.muted}"
+  },
+  "data-brown-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#eeeae2",
+        "position": 0
+      },
+      {
+        "color": "#eeeae200",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.brown.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.brown.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-brown-gradient",
+    "attributes": {},
+    "path": ["data", "brown", "gradient"],
+    "key": "{data.brown.gradient}"
+  },
+  "data-coral-color-emphasis": {
+    "$value": "#d43511",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#d43511"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.coral.5}"
+        }
+      }
+    },
+    "name": "data-coral-color-emphasis",
+    "attributes": {},
+    "path": ["data", "coral", "color", "emphasis"],
+    "key": "{data.coral.color.emphasis}"
+  },
+  "data-coral-color-gradientStop-1": {
+    "$value": "#ffe5db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.coral.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-coral-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "coral", "color", "gradientStop", "1"],
+    "key": "{data.coral.color.gradientStop.1}"
+  },
+  "data-coral-color-gradientStop-2": {
+    "$value": "#ffe5db00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.coral.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-coral-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "coral", "color", "gradientStop", "2"],
+    "key": "{data.coral.color.gradientStop.2}"
+  },
+  "data-coral-color-muted": {
+    "$value": "#ffe5db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffe5db"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.coral.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.coral.0}"
+        }
+      }
+    },
+    "name": "data-coral-color-muted",
+    "attributes": {},
+    "path": ["data", "coral", "color", "muted"],
+    "key": "{data.coral.color.muted}"
+  },
+  "data-coral-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#ffe5db",
+        "position": 0
+      },
+      {
+        "color": "#ffe5db00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.coral.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.coral.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-coral-gradient",
+    "attributes": {},
+    "path": ["data", "coral", "gradient"],
+    "key": "{data.coral.gradient}"
+  },
+  "data-gray-color-emphasis": {
+    "$value": "#808fa3",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#808fa3"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.gray.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.gray.4}"
+        }
+      }
+    },
+    "name": "data-gray-color-emphasis",
+    "attributes": {},
+    "path": ["data", "gray", "color", "emphasis"],
+    "key": "{data.gray.color.emphasis}"
+  },
+  "data-gray-color-gradientStop-1": {
+    "$value": "#e8ecf2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.gray.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-gray-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "gray", "color", "gradientStop", "1"],
+    "key": "{data.gray.color.gradientStop.1}"
+  },
+  "data-gray-color-gradientStop-2": {
+    "$value": "#e8ecf200",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.gray.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-gray-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "gray", "color", "gradientStop", "2"],
+    "key": "{data.gray.color.gradientStop.2}"
+  },
+  "data-gray-color-muted": {
+    "$value": "#e8ecf2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#e8ecf2"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.gray.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.gray.0}"
+        }
+      }
+    },
+    "name": "data-gray-color-muted",
+    "attributes": {},
+    "path": ["data", "gray", "color", "muted"],
+    "key": "{data.gray.color.muted}"
+  },
+  "data-gray-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#e8ecf2",
+        "position": 0
+      },
+      {
+        "color": "#e8ecf200",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.gray.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.gray.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-gray-gradient",
+    "attributes": {},
+    "path": ["data", "gray", "gradient"],
+    "key": "{data.gray.gradient}"
+  },
+  "data-green-color-emphasis": {
+    "$value": "#30a147",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#30a147"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.green.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.green.4}"
+        }
+      }
+    },
+    "name": "data-green-color-emphasis",
+    "attributes": {},
+    "path": ["data", "green", "color", "emphasis"],
+    "key": "{data.green.color.emphasis}"
+  },
+  "data-green-color-gradientStop-1": {
+    "$value": "#caf7ca",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.green.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-green-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "green", "color", "gradientStop", "1"],
+    "key": "{data.green.color.gradientStop.1}"
+  },
+  "data-green-color-gradientStop-2": {
+    "$value": "#caf7ca00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.green.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-green-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "green", "color", "gradientStop", "2"],
+    "key": "{data.green.color.gradientStop.2}"
+  },
+  "data-green-color-muted": {
+    "$value": "#caf7ca",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#caf7ca"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.green.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.green.0}"
+        }
+      }
+    },
+    "name": "data-green-color-muted",
+    "attributes": {},
+    "path": ["data", "green", "color", "muted"],
+    "key": "{data.green.color.muted}"
+  },
+  "data-green-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#caf7ca",
+        "position": 0
+      },
+      {
+        "color": "#caf7ca00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.green.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.green.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-green-gradient",
+    "attributes": {},
+    "path": ["data", "green", "gradient"],
+    "key": "{data.green.gradient}"
+  },
+  "data-lemon-color-emphasis": {
+    "$value": "#866e04",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#866e04"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.lemon.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.lemon.5}"
+        }
+      }
+    },
+    "name": "data-lemon-color-emphasis",
+    "attributes": {},
+    "path": ["data", "lemon", "color", "emphasis"],
+    "key": "{data.lemon.color.emphasis}"
+  },
+  "data-lemon-color-gradientStop-1": {
+    "$value": "#f7eea1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.lemon.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-lemon-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "lemon", "color", "gradientStop", "1"],
+    "key": "{data.lemon.color.gradientStop.1}"
+  },
+  "data-lemon-color-gradientStop-2": {
+    "$value": "#f7eea100",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.lemon.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-lemon-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "lemon", "color", "gradientStop", "2"],
+    "key": "{data.lemon.color.gradientStop.2}"
+  },
+  "data-lemon-color-muted": {
+    "$value": "#f7eea1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#f7eea1"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.lemon.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.lemon.0}"
+        }
+      }
+    },
+    "name": "data-lemon-color-muted",
+    "attributes": {},
+    "path": ["data", "lemon", "color", "muted"],
+    "key": "{data.lemon.color.muted}"
+  },
+  "data-lemon-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#f7eea1",
+        "position": 0
+      },
+      {
+        "color": "#f7eea100",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.lemon.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.lemon.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-lemon-gradient",
+    "attributes": {},
+    "path": ["data", "lemon", "gradient"],
+    "key": "{data.lemon.gradient}"
+  },
+  "data-lime-color-emphasis": {
+    "$value": "#527a29",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#527a29"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.lime.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.lime.5}"
+        }
+      }
+    },
+    "name": "data-lime-color-emphasis",
+    "attributes": {},
+    "path": ["data", "lime", "color", "emphasis"],
+    "key": "{data.lime.color.emphasis}"
+  },
+  "data-lime-color-gradientStop-1": {
+    "$value": "#e3f2b5",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.lime.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-lime-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "lime", "color", "gradientStop", "1"],
+    "key": "{data.lime.color.gradientStop.1}"
+  },
+  "data-lime-color-gradientStop-2": {
+    "$value": "#e3f2b500",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.lime.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-lime-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "lime", "color", "gradientStop", "2"],
+    "key": "{data.lime.color.gradientStop.2}"
+  },
+  "data-lime-color-muted": {
+    "$value": "#e3f2b5",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#e3f2b5"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.lime.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.lime.0}"
+        }
+      }
+    },
+    "name": "data-lime-color-muted",
+    "attributes": {},
+    "path": ["data", "lime", "color", "muted"],
+    "key": "{data.lime.color.muted}"
+  },
+  "data-lime-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#e3f2b5",
+        "position": 0
+      },
+      {
+        "color": "#e3f2b500",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.lime.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.lime.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-lime-gradient",
+    "attributes": {},
+    "path": ["data", "lime", "gradient"],
+    "key": "{data.lime.gradient}"
+  },
+  "data-olive-color-emphasis": {
+    "$value": "#64762d",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#64762d"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.olive.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.olive.5}"
+        }
+      }
+    },
+    "name": "data-olive-color-emphasis",
+    "attributes": {},
+    "path": ["data", "olive", "color", "emphasis"],
+    "key": "{data.olive.color.emphasis}"
+  },
+  "data-olive-color-gradientStop-1": {
+    "$value": "#f0f0ad",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.olive.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-olive-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "olive", "color", "gradientStop", "1"],
+    "key": "{data.olive.color.gradientStop.1}"
+  },
+  "data-olive-color-gradientStop-2": {
+    "$value": "#f0f0ad00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.olive.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-olive-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "olive", "color", "gradientStop", "2"],
+    "key": "{data.olive.color.gradientStop.2}"
+  },
+  "data-olive-color-muted": {
+    "$value": "#f0f0ad",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#f0f0ad"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.olive.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.olive.0}"
+        }
+      }
+    },
+    "name": "data-olive-color-muted",
+    "attributes": {},
+    "path": ["data", "olive", "color", "muted"],
+    "key": "{data.olive.color.muted}"
+  },
+  "data-olive-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#f0f0ad",
+        "position": 0
+      },
+      {
+        "color": "#f0f0ad00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.olive.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.olive.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-olive-gradient",
+    "attributes": {},
+    "path": ["data", "olive", "gradient"],
+    "key": "{data.olive.gradient}"
+  },
+  "data-orange-color-emphasis": {
+    "$value": "#eb670f",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#eb670f"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.orange.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.orange.4}"
+        }
+      }
+    },
+    "name": "data-orange-color-emphasis",
+    "attributes": {},
+    "path": ["data", "orange", "color", "emphasis"],
+    "key": "{data.orange.color.emphasis}"
+  },
+  "data-orange-color-gradientStop-1": {
+    "$value": "#ffe7d1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.orange.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-orange-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "orange", "color", "gradientStop", "1"],
+    "key": "{data.orange.color.gradientStop.1}"
+  },
+  "data-orange-color-gradientStop-2": {
+    "$value": "#ffe7d100",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.orange.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-orange-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "orange", "color", "gradientStop", "2"],
+    "key": "{data.orange.color.gradientStop.2}"
+  },
+  "data-orange-color-muted": {
+    "$value": "#ffe7d1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffe7d1"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.orange.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.orange.0}"
+        }
+      }
+    },
+    "name": "data-orange-color-muted",
+    "attributes": {},
+    "path": ["data", "orange", "color", "muted"],
+    "key": "{data.orange.color.muted}"
+  },
+  "data-orange-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#ffe7d1",
+        "position": 0
+      },
+      {
+        "color": "#ffe7d100",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.orange.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.orange.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-orange-gradient",
+    "attributes": {},
+    "path": ["data", "orange", "gradient"],
+    "key": "{data.orange.gradient}"
+  },
+  "data-pine-color-emphasis": {
+    "$value": "#167e53",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#167e53"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.pine.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.pine.5}"
+        }
+      }
+    },
+    "name": "data-pine-color-emphasis",
+    "attributes": {},
+    "path": ["data", "pine", "color", "emphasis"],
+    "key": "{data.pine.color.emphasis}"
+  },
+  "data-pine-color-gradientStop-1": {
+    "$value": "#bff8db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.pine.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-pine-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "pine", "color", "gradientStop", "1"],
+    "key": "{data.pine.color.gradientStop.1}"
+  },
+  "data-pine-color-gradientStop-2": {
+    "$value": "#bff8db00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.pine.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-pine-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "pine", "color", "gradientStop", "2"],
+    "key": "{data.pine.color.gradientStop.2}"
+  },
+  "data-pine-color-muted": {
+    "$value": "#bff8db",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#bff8db"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.pine.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.pine.0}"
+        }
+      }
+    },
+    "name": "data-pine-color-muted",
+    "attributes": {},
+    "path": ["data", "pine", "color", "muted"],
+    "key": "{data.pine.color.muted}"
+  },
+  "data-pine-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#bff8db",
+        "position": 0
+      },
+      {
+        "color": "#bff8db00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.pine.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.pine.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-pine-gradient",
+    "attributes": {},
+    "path": ["data", "pine", "gradient"],
+    "key": "{data.pine.gradient}"
+  },
+  "data-pink-color-emphasis": {
+    "$value": "#ce2c85",
+    "$type": "color",
+    "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor", "borderColor"]
       },
       "org.primer.overrides": {
-        "dark": "#eb670f"
+        "dark": "#ce2c85"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.orange.4}",
+      "$value": "{base.display.color.pink.5}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14523,17 +15885,233 @@
           "scopes": ["bgColor", "borderColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.orange.4}"
+          "dark": "{base.display.color.pink.5}"
         }
       }
     },
-    "name": "data-orange-color-emphasis",
+    "name": "data-pink-color-emphasis",
     "attributes": {},
-    "path": ["data", "orange", "color", "emphasis"],
-    "key": "{data.orange.color.emphasis}"
+    "path": ["data", "pink", "color", "emphasis"],
+    "key": "{data.pink.color.emphasis}"
+  },
+  "data-pink-color-gradientStop-1": {
+    "$value": "#ffe5f1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.pink.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-pink-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "pink", "color", "gradientStop", "1"],
+    "key": "{data.pink.color.gradientStop.1}"
+  },
+  "data-pink-color-gradientStop-2": {
+    "$value": "#ffe5f100",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.pink.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-pink-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "pink", "color", "gradientStop", "2"],
+    "key": "{data.pink.color.gradientStop.2}"
+  },
+  "data-pink-color-muted": {
+    "$value": "#ffe5f1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffe5f1"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.pink.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.pink.0}"
+        }
+      }
+    },
+    "name": "data-pink-color-muted",
+    "attributes": {},
+    "path": ["data", "pink", "color", "muted"],
+    "key": "{data.pink.color.muted}"
+  },
+  "data-pink-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#ffe5f1",
+        "position": 0
+      },
+      {
+        "color": "#ffe5f100",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.pink.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.pink.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-pink-gradient",
+    "attributes": {},
+    "path": ["data", "pink", "gradient"],
+    "key": "{data.pink.gradient}"
+  },
+  "data-plum-color-emphasis": {
+    "$value": "#a830e8",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor", "borderColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#a830e8"
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.display.color.plum.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor", "borderColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{base.display.color.plum.5}"
+        }
+      }
+    },
+    "name": "data-plum-color-emphasis",
+    "attributes": {},
+    "path": ["data", "plum", "color", "emphasis"],
+    "key": "{data.plum.color.emphasis}"
+  },
+  "data-plum-color-gradientStop-1": {
+    "$value": "#f8e5ff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.plum.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-plum-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "plum", "color", "gradientStop", "1"],
+    "key": "{data.plum.color.gradientStop.1}"
+  },
+  "data-plum-color-gradientStop-2": {
+    "$value": "#f8e5ff00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.plum.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-plum-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "plum", "color", "gradientStop", "2"],
+    "key": "{data.plum.color.gradientStop.2}"
   },
-  "data-orange-color-muted": {
-    "$value": "#ffe7d1",
+  "data-plum-color-muted": {
+    "$value": "#f8e5ff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14542,13 +16120,13 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark": "#ffe7d1"
+        "dark": "#f8e5ff"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.orange.0}",
+      "$value": "{base.display.color.plum.0}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14557,17 +16135,49 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.orange.0}"
+          "dark": "{base.display.color.plum.0}"
         }
       }
     },
-    "name": "data-orange-color-muted",
+    "name": "data-plum-color-muted",
     "attributes": {},
-    "path": ["data", "orange", "color", "muted"],
-    "key": "{data.orange.color.muted}"
+    "path": ["data", "plum", "color", "muted"],
+    "key": "{data.plum.color.muted}"
   },
-  "data-pink-color-emphasis": {
-    "$value": "#ce2c85",
+  "data-plum-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#f8e5ff",
+        "position": 0
+      },
+      {
+        "color": "#f8e5ff00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.plum.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.plum.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-plum-gradient",
+    "attributes": {},
+    "path": ["data", "plum", "gradient"],
+    "key": "{data.plum.gradient}"
+  },
+  "data-purple-color-emphasis": {
+    "$value": "#894ceb",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -14576,13 +16186,13 @@
         "scopes": ["bgColor", "borderColor"]
       },
       "org.primer.overrides": {
-        "dark": "#ce2c85"
+        "dark": "#894ceb"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.pink.5}",
+      "$value": "{base.display.color.purple.5}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -14591,82 +16201,72 @@
           "scopes": ["bgColor", "borderColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.display.color.pink.5}"
+          "dark": "{base.display.color.purple.5}"
         }
       }
     },
-    "name": "data-pink-color-emphasis",
+    "name": "data-purple-color-emphasis",
     "attributes": {},
-    "path": ["data", "pink", "color", "emphasis"],
-    "key": "{data.pink.color.emphasis}"
+    "path": ["data", "purple", "color", "emphasis"],
+    "key": "{data.purple.color.emphasis}"
   },
-  "data-pink-color-muted": {
-    "$value": "#ffe5f1",
+  "data-purple-color-gradientStop-1": {
+    "$value": "#f1e5ff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#ffe5f1"
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.pink.0}",
+      "$value": "{data.purple.color.muted}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
           "scopes": ["bgColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.pink.0}"
         }
       }
     },
-    "name": "data-pink-color-muted",
+    "name": "data-purple-color-gradientStop-1",
     "attributes": {},
-    "path": ["data", "pink", "color", "muted"],
-    "key": "{data.pink.color.muted}"
+    "path": ["data", "purple", "color", "gradientStop", "1"],
+    "key": "{data.purple.color.gradientStop.1}"
   },
-  "data-purple-color-emphasis": {
-    "$value": "#894ceb",
+  "data-purple-color-gradientStop-2": {
+    "$value": "#f1e5ff00",
     "$type": "color",
+    "alpha": 0,
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component",
-        "scopes": ["bgColor", "borderColor"]
-      },
-      "org.primer.overrides": {
-        "dark": "#894ceb"
+        "scopes": ["bgColor"]
       }
     },
     "filePath": "src/tokens/functional/color/data-vis.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.display.color.purple.5}",
+      "$value": "{data.purple.color.muted}",
       "$type": "color",
+      "alpha": 0,
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component",
-          "scopes": ["bgColor", "borderColor"]
-        },
-        "org.primer.overrides": {
-          "dark": "{base.display.color.purple.5}"
+          "scopes": ["bgColor"]
         }
       }
     },
-    "name": "data-purple-color-emphasis",
+    "name": "data-purple-color-gradientStop-2",
     "attributes": {},
-    "path": ["data", "purple", "color", "emphasis"],
-    "key": "{data.purple.color.emphasis}"
+    "path": ["data", "purple", "color", "gradientStop", "2"],
+    "key": "{data.purple.color.gradientStop.2}"
   },
   "data-purple-color-muted": {
     "$value": "#f1e5ff",
@@ -14702,6 +16302,38 @@
     "path": ["data", "purple", "color", "muted"],
     "key": "{data.purple.color.muted}"
   },
+  "data-purple-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#f1e5ff",
+        "position": 0
+      },
+      {
+        "color": "#f1e5ff00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.purple.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.purple.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-purple-gradient",
+    "attributes": {},
+    "path": ["data", "purple", "gradient"],
+    "key": "{data.purple.gradient}"
+  },
   "data-red-color-emphasis": {
     "$value": "#df0c24",
     "$type": "color",
@@ -14736,6 +16368,64 @@
     "path": ["data", "red", "color", "emphasis"],
     "key": "{data.red.color.emphasis}"
   },
+  "data-red-color-gradientStop-1": {
+    "$value": "#ffe2e0",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.red.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-red-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "red", "color", "gradientStop", "1"],
+    "key": "{data.red.color.gradientStop.1}"
+  },
+  "data-red-color-gradientStop-2": {
+    "$value": "#ffe2e000",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.red.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-red-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "red", "color", "gradientStop", "2"],
+    "key": "{data.red.color.gradientStop.2}"
+  },
   "data-red-color-muted": {
     "$value": "#ffe2e0",
     "$type": "color",
@@ -14770,6 +16460,38 @@
     "path": ["data", "red", "color", "muted"],
     "key": "{data.red.color.muted}"
   },
+  "data-red-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#ffe2e0",
+        "position": 0
+      },
+      {
+        "color": "#ffe2e000",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.red.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.red.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-red-gradient",
+    "attributes": {},
+    "path": ["data", "red", "gradient"],
+    "key": "{data.red.gradient}"
+  },
   "data-teal-color-emphasis": {
     "$value": "#179b9b",
     "$type": "color",
@@ -14804,6 +16526,64 @@
     "path": ["data", "teal", "color", "emphasis"],
     "key": "{data.teal.color.emphasis}"
   },
+  "data-teal-color-gradientStop-1": {
+    "$value": "#c7f5ef",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.teal.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-teal-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "teal", "color", "gradientStop", "1"],
+    "key": "{data.teal.color.gradientStop.1}"
+  },
+  "data-teal-color-gradientStop-2": {
+    "$value": "#c7f5ef00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.teal.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-teal-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "teal", "color", "gradientStop", "2"],
+    "key": "{data.teal.color.gradientStop.2}"
+  },
   "data-teal-color-muted": {
     "$value": "#c7f5ef",
     "$type": "color",
@@ -14838,6 +16618,38 @@
     "path": ["data", "teal", "color", "muted"],
     "key": "{data.teal.color.muted}"
   },
+  "data-teal-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#c7f5ef",
+        "position": 0
+      },
+      {
+        "color": "#c7f5ef00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.teal.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.teal.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-teal-gradient",
+    "attributes": {},
+    "path": ["data", "teal", "gradient"],
+    "key": "{data.teal.gradient}"
+  },
   "data-yellow-color-emphasis": {
     "$value": "#b88700",
     "$type": "color",
@@ -14872,6 +16684,64 @@
     "path": ["data", "yellow", "color", "emphasis"],
     "key": "{data.yellow.color.emphasis}"
   },
+  "data-yellow-color-gradientStop-1": {
+    "$value": "#ffec9e",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.yellow.color.muted}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-yellow-color-gradientStop-1",
+    "attributes": {},
+    "path": ["data", "yellow", "color", "gradientStop", "1"],
+    "key": "{data.yellow.color.gradientStop.1}"
+  },
+  "data-yellow-color-gradientStop-2": {
+    "$value": "#ffec9e00",
+    "$type": "color",
+    "alpha": 0,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{data.yellow.color.muted}",
+      "$type": "color",
+      "alpha": 0,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "data-yellow-color-gradientStop-2",
+    "attributes": {},
+    "path": ["data", "yellow", "color", "gradientStop", "2"],
+    "key": "{data.yellow.color.gradientStop.2}"
+  },
   "data-yellow-color-muted": {
     "$value": "#ffec9e",
     "$type": "color",
@@ -14906,6 +16776,38 @@
     "path": ["data", "yellow", "color", "muted"],
     "key": "{data.yellow.color.muted}"
   },
+  "data-yellow-gradient": {
+    "$type": "gradient",
+    "$value": [
+      {
+        "color": "#ffec9e",
+        "position": 0
+      },
+      {
+        "color": "#ffec9e00",
+        "position": 1
+      }
+    ],
+    "filePath": "src/tokens/functional/color/data-vis.json5",
+    "isSource": true,
+    "original": {
+      "$type": "gradient",
+      "$value": [
+        {
+          "color": "{data.yellow.color.gradientStop.1}",
+          "position": 0
+        },
+        {
+          "color": "{data.yellow.color.gradientStop.2}",
+          "position": 1
+        }
+      ]
+    },
+    "name": "data-yellow-gradient",
+    "attributes": {},
+    "path": ["data", "yellow", "gradient"],
+    "key": "{data.yellow.gradient}"
+  },
   "diffBlob-additionLine-bgColor": {
     "$value": "#d2fedb",
     "$type": "color",