@demos-europe/demosplan-ui 0.3.19 → 0.3.21

package/tokens/dist/js/color.ui.js

@@ -1,22 +1,1914 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 13:02:56 GMT
+ * Generated on Mon, 22 Jul 2024 09:37:27 GMT
  */
 
 module.exports = {
   "color": {
+    "ui-tailwind": {
+      "color": {
+        "interactive": {
+          "DEFAULT": {
+            "$description": "Color for default state of interactive elements.",
+            "value": "#006fd0",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Color for default state of interactive elements.",
+              "value": "{color.palette.blue.base}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindColorInteractiveDefault",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "color",
+              "subitem": "interactive",
+              "state": "DEFAULT"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "color",
+              "interactive",
+              "DEFAULT"
+            ]
+          },
+          "hover": {
+            "$description": "Color for hover state of interactive elements.",
+            "value": "#005eb1",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Color for hover state of interactive elements.",
+              "value": "{color.palette.blue.dark-1}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindColorInteractiveHover",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "color",
+              "subitem": "interactive",
+              "state": "hover"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "color",
+              "interactive",
+              "hover"
+            ]
+          },
+          "active": {
+            "$description": "Color for active state of interactive elements.",
+            "value": "#004078",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Color for active state of interactive elements.",
+              "value": "{color.palette.blue.dark-2}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindColorInteractiveActive",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "color",
+              "subitem": "interactive",
+              "state": "active"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "color",
+              "interactive",
+              "active"
+            ]
+          }
+        }
+      },
+      "textColor": {
+        "default": {
+          "$description": "Default color for text that should be readable.",
+          "value": "#333333",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Default color for text that should be readable.",
+            "value": "{color.palette.neutral.dark-2}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindTextColorDefault",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "textColor",
+            "subitem": "default"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "textColor",
+            "default"
+          ]
+        },
+        "muted": {
+          "$description": "Color for text that should stand out a little less. Has sufficient contrast on white.",
+          "value": "#757575",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Color for text that should stand out a little less. Has sufficient contrast on white.",
+            "value": "{color.palette.neutral.base}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindTextColorMuted",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "textColor",
+            "subitem": "muted"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "textColor",
+            "muted"
+          ]
+        },
+        "on-dark": {
+          "$description": "Color for text that has sufficient contrast on dark backgrounds.",
+          "value": "#ffffff",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Color for text that has sufficient contrast on dark backgrounds.",
+            "value": "{color.palette.white}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindTextColorOnDark",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "textColor",
+            "subitem": "on-dark"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "textColor",
+            "on-dark"
+          ]
+        },
+        "marked": {
+          "$description": "Color for highlighting portions of text. To be used together with bg-text-marked",
+          "value": "#004078",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Color for highlighting portions of text. To be used together with bg-text-marked",
+            "value": "{color.palette.blue.dark-2}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindTextColorMarked",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "textColor",
+            "subitem": "marked"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "textColor",
+            "marked"
+          ]
+        },
+        "message": {
+          "info": {
+            "DEFAULT": {
+              "$description": "Text color to communicate uncritical information within system feedback components.",
+              "value": "#004078",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate uncritical information within system feedback components.",
+                "value": "{color.palette.blue.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageInfoDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "info"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "info",
+                "DEFAULT"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate uncritical information within system feedback components.",
+              "value": "#005eb1",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate uncritical information within system feedback components.",
+                "value": "{color.palette.blue.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageInfoIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "info"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "info",
+                "icon"
+              ]
+            },
+            "interactive": {
+              "$description": "Color for interactive text to communicate uncritical information within system feedback components.",
+              "value": "#006fd0",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Color for interactive text to communicate uncritical information within system feedback components.",
+                "value": "{color.palette.blue.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageInfoInteractive",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "info"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "info",
+                "interactive"
+              ]
+            }
+          },
+          "warning": {
+            "DEFAULT": {
+              "$description": "Text color to noticeably communicate uncritical information within system feedback components.",
+              "value": "#845d01",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to noticeably communicate uncritical information within system feedback components.",
+                "value": "{color.palette.yellow.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageWarningDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "warning"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "warning",
+                "DEFAULT"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to noticeably communicate uncritical information within system feedback components.",
+              "value": "#845d01",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to noticeably communicate uncritical information within system feedback components.",
+                "value": "{color.palette.yellow.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageWarningIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "warning"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "warning",
+                "icon"
+              ]
+            },
+            "interactive": {
+              "$description": "Color for interactive text to noticeably communicate uncritical information within system feedback components.",
+              "value": "#845d01",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Color for interactive text to noticeably communicate uncritical information within system feedback components.",
+                "value": "{color.palette.yellow.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageWarningInteractive",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "warning"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "warning",
+                "interactive"
+              ]
+            }
+          },
+          "severe": {
+            "DEFAULT": {
+              "$description": "Text color to communicate importance, danger, and immediate action within system feedback components.",
+              "value": "#820000",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate importance, danger, and immediate action within system feedback components.",
+                "value": "{color.palette.red.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSevereDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "severe"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "severe",
+                "DEFAULT"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate importance, danger, and immediate action within system feedback components.",
+              "value": "#b20000",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate importance, danger, and immediate action within system feedback components.",
+                "value": "{color.palette.red.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSevereIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "severe"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "severe",
+                "icon"
+              ]
+            },
+            "interactive": {
+              "$description": "Color for interactive text to communicate importance, danger, and immediate action within system feedback components.",
+              "value": "#b20000",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Color for interactive text to communicate importance, danger, and immediate action within system feedback components.",
+                "value": "{color.palette.red.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSevereInteractive",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "severe"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "severe",
+                "interactive"
+              ]
+            }
+          },
+          "success": {
+            "DEFAULT": {
+              "$description": "Text color to communicate successful state change within system feedback components.",
+              "value": "#064006",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate successful state change within system feedback components.",
+                "value": "{color.palette.green.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSuccessDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "success"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "success",
+                "DEFAULT"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate successful state change within system feedback components.",
+              "value": "#186218",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate successful state change within system feedback components.",
+                "value": "{color.palette.green.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSuccessIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "success"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "success",
+                "icon"
+              ]
+            },
+            "interactive": {
+              "$description": "Color for interactive text to communicate successful state change within system feedback components.",
+              "value": "#228b22",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Color for interactive text to communicate successful state change within system feedback components.",
+                "value": "{color.palette.green.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageSuccessInteractive",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "success"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "success",
+                "interactive"
+              ]
+            }
+          },
+          "debug": {
+            "DEFAULT": {
+              "$description": "Text color to communicate information for debugging purposes within system feedback components.",
+              "value": "#4b0085",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate information for debugging purposes within system feedback components.",
+                "value": "{color.palette.purple.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageDebugDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "debug"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "debug",
+                "DEFAULT"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate information for debugging purposes within system feedback components.",
+              "value": "#5e00a6",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate information for debugging purposes within system feedback components.",
+                "value": "{color.palette.purple.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageDebugIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "debug"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "debug",
+                "icon"
+              ]
+            },
+            "interactive": {
+              "$description": "Color for interactive text to communicate information for debugging purposes within system feedback components.",
+              "value": "#5e00a6",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Color for interactive text to communicate information for debugging purposes within system feedback components.",
+                "value": "{color.palette.purple.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorMessageDebugInteractive",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "message",
+                "state": "debug"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "message",
+                "debug",
+                "interactive"
+              ]
+            }
+          }
+        },
+        "selected": {
+          "$description": "Color used to visualize selected elements (ex: selection-text).",
+          "value": "#005eb1",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Color used to visualize selected elements (ex: selection-text).",
+            "value": "{color.palette.blue.dark-1}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindTextColorSelected",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "textColor",
+            "subitem": "selected"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "textColor",
+            "selected"
+          ]
+        },
+        "status": {
+          "progress": {
+            "DEFAULT": {
+              "$description": "Text color to communicate that something is in progress.",
+              "value": "#005eb1",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate that something is in progress.",
+                "value": "{color.palette.blue.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusProgressDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "progress"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "progress",
+                "DEFAULT"
+              ]
+            },
+            "fill": {
+              "$description": "Fill color to communicate that something is in progress. Use for charts.",
+              "value": "#006fd0",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that something is in progress. Use for charts.",
+                "value": "{color.palette.blue.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusProgressFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "progress"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "progress",
+                "fill"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate that something is in progress.",
+              "value": "#006fd0",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate that something is in progress.",
+                "value": "{color.palette.blue.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusProgressIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "progress"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "progress",
+                "icon"
+              ]
+            }
+          },
+          "changed": {
+            "DEFAULT": {
+              "$description": "Text color to communicate something has moved or changed.",
+              "value": "#845d01",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate something has moved or changed.",
+                "value": "{color.palette.yellow.dark-2}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusChangedDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "changed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "changed",
+                "DEFAULT"
+              ]
+            },
+            "fill": {
+              "$description": "Fill color to communicate something has moved or changed. Use for charts.",
+              "value": "#ffbe24",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate something has moved or changed. Use for charts.",
+                "value": "{color.palette.yellow.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusChangedFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "changed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "changed",
+                "fill"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate something has moved or changed.",
+              "value": "#d09200",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate something has moved or changed.",
+                "value": "{color.palette.yellow.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusChangedIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "changed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "changed",
+                "icon"
+              ]
+            }
+          },
+          "failed": {
+            "DEFAULT": {
+              "$description": "Text color to communicate that an action or validation has failed on an item.",
+              "value": "#b20000",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate that an action or validation has failed on an item.",
+                "value": "{color.palette.red.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusFailedDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "failed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "failed",
+                "DEFAULT"
+              ]
+            },
+            "fill": {
+              "$description": "Fill color to communicate that an action or validation has failed on an item. Use for charts.",
+              "value": "#e52222",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that an action or validation has failed on an item. Use for charts.",
+                "value": "{color.palette.red.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusFailedFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "failed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "failed",
+                "fill"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate that an action or validation has failed on an item.",
+              "value": "#e52222",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate that an action or validation has failed on an item.",
+                "value": "{color.palette.red.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusFailedIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "failed"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "failed",
+                "icon"
+              ]
+            }
+          },
+          "complete": {
+            "DEFAULT": {
+              "$description": "Text color to communicate that an action has completed, or something has been added.",
+              "value": "#186218",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate that an action has completed, or something has been added.",
+                "value": "{color.palette.green.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusCompleteDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "complete"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "complete",
+                "DEFAULT"
+              ]
+            },
+            "fill": {
+              "$description": "Fill color to communicate that an action has completed, or something has been added. Use for charts.",
+              "value": "#228b22",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate that an action has completed, or something has been added. Use for charts.",
+                "value": "{color.palette.green.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusCompleteFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "complete"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "complete",
+                "fill"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate that an action has completed, or something has been added.",
+              "value": "#228b22",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate that an action has completed, or something has been added.",
+                "value": "{color.palette.green.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusCompleteIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "complete"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "complete",
+                "icon"
+              ]
+            }
+          },
+          "neutral": {
+            "DEFAULT": {
+              "$description": "Text color to communicate neutral or unknown status.",
+              "value": "#595959",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate neutral or unknown status.",
+                "value": "{color.palette.neutral.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusNeutralDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "neutral"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "neutral",
+                "DEFAULT"
+              ]
+            },
+            "fill": {
+              "$description": "Fill color to communicate neutral or unknown status. Use for charts.",
+              "value": "#757575",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Fill color to communicate neutral or unknown status. Use for charts.",
+                "value": "{color.palette.neutral.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusNeutralFill",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "neutral"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "neutral",
+                "fill"
+              ]
+            },
+            "icon": {
+              "$description": "Icon color to communicate neutral or unknown status.",
+              "value": "#757575",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Icon color to communicate neutral or unknown status.",
+                "value": "{color.palette.neutral.base}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindTextColorStatusNeutralIcon",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "textColor",
+                "subitem": "status",
+                "state": "neutral"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "textColor",
+                "status",
+                "neutral",
+                "icon"
+              ]
+            }
+          }
+        }
+      },
+      "backgroundColor": {
+        "interactive": {
+          "subtle-hover": {
+            "$description": "Background color for hover state of bigger areas or subtle buttons.",
+            "value": "#f5f5f5",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for hover state of bigger areas or subtle buttons.",
+              "value": "{color.palette.neutral.light-4}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorInteractiveSubtleHover",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "interactive",
+              "state": "subtle-hover"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "interactive",
+              "subtle-hover"
+            ]
+          },
+          "subtle-active": {
+            "$description": "Background color for active state of bigger areas or subtle buttons.",
+            "value": "#ebe9e9",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for active state of bigger areas or subtle buttons.",
+              "value": "{color.palette.neutral.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorInteractiveSubtleActive",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "interactive",
+              "state": "subtle-active"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "interactive",
+              "subtle-active"
+            ]
+          },
+          "muted": {
+            "$description": "Background color for interactive elements that reveal their base state on:hover of a parent element, eg. in a table row. Note that this is not to be conflated with the disabled state, which is communicated via opacity.",
+            "value": "#aeaeae",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for interactive elements that reveal their base state on:hover of a parent element, eg. in a table row. Note that this is not to be conflated with the disabled state, which is communicated via opacity.",
+              "value": "{color.palette.neutral.light-1}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorInteractiveMuted",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "interactive",
+              "state": "muted"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "interactive",
+              "muted"
+            ]
+          }
+        },
+        "message": {
+          "info": {
+            "$description": "Background color to communicate uncritical information within system feedback components.",
+            "value": "#cee6fb",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate uncritical information within system feedback components.",
+              "value": "{color.palette.blue.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorMessageInfo",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "message",
+              "state": "info"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "message",
+              "info"
+            ]
+          },
+          "warning": {
+            "$description": "Background color to noticeably communicate uncritical information within system feedback components.",
+            "value": "#ffefca",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to noticeably communicate uncritical information within system feedback components.",
+              "value": "{color.palette.yellow.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorMessageWarning",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "message",
+              "state": "warning"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "message",
+              "warning"
+            ]
+          },
+          "severe": {
+            "$description": "Background color to communicate importance, danger, and immediate action within system feedback components.",
+            "value": "#fcdddd",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate importance, danger, and immediate action within system feedback components.",
+              "value": "{color.palette.red.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorMessageSevere",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "message",
+              "state": "severe"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "message",
+              "severe"
+            ]
+          },
+          "success": {
+            "$description": "Background color to communicate successful state change within system feedback components.",
+            "value": "#def7de",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate successful state change within system feedback components.",
+              "value": "{color.palette.green.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorMessageSuccess",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "message",
+              "state": "success"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "message",
+              "success"
+            ]
+          },
+          "debug": {
+            "$description": "Background color to communicate information for debugging purposes within system feedback components.",
+            "value": "#dfcced",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate information for debugging purposes within system feedback components.",
+              "value": "{color.palette.purple.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorMessageDebug",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "message",
+              "state": "debug"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "message",
+              "debug"
+            ]
+          }
+        },
+        "selected": {
+          "$description": "Background Color used to visualize selected elements (ex: selection-bg).",
+          "value": "#cee6fb",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Background Color used to visualize selected elements (ex: selection-bg).",
+            "value": "{color.palette.blue.light-3}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindBackgroundColorSelected",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "backgroundColor",
+            "subitem": "selected"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "backgroundColor",
+            "selected"
+          ]
+        },
+        "status": {
+          "progress": {
+            "$description": "Background color to communicate that something is in progress (ex: status-progress-text).",
+            "value": "#006fd0",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate that something is in progress (ex: status-progress-text).",
+              "value": "{color.palette.blue.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorStatusProgress",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "status",
+              "state": "progress"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "status",
+              "progress"
+            ]
+          },
+          "changed": {
+            "$description": "Background color to communicate something has moved or changed.",
+            "value": "#ffbe24",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate something has moved or changed.",
+              "value": "{color.palette.yellow.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorStatusChanged",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "status",
+              "state": "changed"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "status",
+              "changed"
+            ]
+          },
+          "failed": {
+            "$description": "Background color to communicate that an action or validation has failed on an item.",
+            "value": "#e52222",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate that an action or validation has failed on an item.",
+              "value": "{color.palette.red.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorStatusFailed",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "status",
+              "state": "failed"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "status",
+              "failed"
+            ]
+          },
+          "complete": {
+            "$description": "Background color to communicate that an action has completed, or something has been added.",
+            "value": "#228b22",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color to communicate that an action has completed, or something has been added.",
+              "value": "{color.palette.green.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorStatusComplete",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "status",
+              "state": "complete"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "status",
+              "complete"
+            ]
+          },
+          "neutral": {
+            "DEFAULT": {
+              "$description": "Text color to communicate neutral or unknown status.",
+              "value": "#595959",
+              "$type": "color",
+              "filePath": "tokens/src/color/color.ui-tailwind.json",
+              "isSource": true,
+              "original": {
+                "$description": "Text color to communicate neutral or unknown status.",
+                "value": "{color.palette.neutral.dark-1}",
+                "$type": "color"
+              },
+              "name": "ColorUiTailwindBackgroundColorStatusNeutralDefault",
+              "attributes": {
+                "category": "color",
+                "type": "ui-tailwind",
+                "item": "backgroundColor",
+                "subitem": "status",
+                "state": "neutral"
+              },
+              "path": [
+                "color",
+                "ui-tailwind",
+                "backgroundColor",
+                "status",
+                "neutral",
+                "DEFAULT"
+              ]
+            }
+          }
+        },
+        "surface": {
+          "DEFAULT": {
+            "$description": "Default color used for backgrounds.",
+            "value": "#ffffff",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Default color used for backgrounds.",
+              "value": "{color.palette.white}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorSurfaceDefault",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "surface",
+              "state": "DEFAULT"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "surface",
+              "DEFAULT"
+            ]
+          },
+          "light": {
+            "$description": "Lightest background color that is discernible on normal monitors.",
+            "value": "#f5f5f5",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Lightest background color that is discernible on normal monitors.",
+              "value": "{color.palette.neutral.light-4}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorSurfaceLight",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "surface",
+              "state": "light"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "surface",
+              "light"
+            ]
+          },
+          "medium": {
+            "$description": "Medium background color for boxes etc.",
+            "value": "#ebe9e9",
+            "themeable": true,
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Medium background color for boxes etc.",
+              "value": "{color.palette.neutral.light-3}",
+              "themeable": true,
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorSurfaceMedium",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "surface",
+              "state": "medium"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "surface",
+              "medium"
+            ]
+          }
+        },
+        "text": {
+          "deleted": {
+            "$description": "Background color for deleted (del) text.",
+            "value": "#ffe5a7",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for deleted (del) text.",
+              "value": "{color.palette.yellow.light-2}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorTextDeleted",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "text",
+              "state": "deleted"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "text",
+              "deleted"
+            ]
+          },
+          "deleted-muted": {
+            "$description": "Background color for deleted (del) areas of text.",
+            "value": "#ffefca",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for deleted (del) areas of text.",
+              "value": "{color.palette.yellow.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorTextDeletedMuted",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "text",
+              "state": "deleted-muted"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "text",
+              "deleted-muted"
+            ]
+          },
+          "inserted": {
+            "$description": "Background color for inserted (ins) text.",
+            "value": "#cee6fb",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for inserted (ins) text.",
+              "value": "{color.palette.blue.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorTextInserted",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "text",
+              "state": "inserted"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "text",
+              "inserted"
+            ]
+          },
+          "inserted-muted": {
+            "$description": "Background color for highlighting portions of text, that is discernible from 'bg-text-marked'",
+            "value": "#ebf5ff",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for highlighting portions of text, that is discernible from 'bg-text-marked'",
+              "value": "{color.palette.blue.light-4}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorTextInsertedMuted",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "text",
+              "state": "inserted-muted"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "text",
+              "inserted-muted"
+            ]
+          },
+          "marked": {
+            "$description": "Background color for highlighting portions of text.",
+            "value": "#cee6fb",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Background color for highlighting portions of text.",
+              "value": "{color.palette.blue.light-3}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBackgroundColorTextMarked",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "backgroundColor",
+              "subitem": "text",
+              "state": "marked"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "backgroundColor",
+              "text",
+              "marked"
+            ]
+          }
+        }
+      },
+      "borderColor": {
+        "message": {
+          "info": {
+            "$description": "Border color to communicate uncritical information within system feedback components.",
+            "value": "#44a8ff",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to communicate uncritical information within system feedback components.",
+              "value": "{color.palette.blue.light-1}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorMessageInfo",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "message",
+              "state": "info"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "message",
+              "info"
+            ]
+          },
+          "warning": {
+            "$description": "Border color to noticeably communicate uncritical information within system feedback components.",
+            "value": "#ffbe24",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to noticeably communicate uncritical information within system feedback components.",
+              "value": "{color.palette.yellow.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorMessageWarning",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "message",
+              "state": "warning"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "message",
+              "warning"
+            ]
+          },
+          "severe": {
+            "$description": "Border color to communicate importance, danger, and immediate action within system feedback components.",
+            "value": "#fc5e5e",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to communicate importance, danger, and immediate action within system feedback components.",
+              "value": "{color.palette.red.light-1}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorMessageSevere",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "message",
+              "state": "severe"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "message",
+              "severe"
+            ]
+          },
+          "success": {
+            "$description": "Border color to communicate successful state change within system feedback components.",
+            "value": "#5cba5c",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to communicate successful state change within system feedback components.",
+              "value": "{color.palette.green.light-1}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorMessageSuccess",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "message",
+              "state": "success"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "message",
+              "success"
+            ]
+          },
+          "debug": {
+            "$description": "Border color to communicate information for debugging purposes within system feedback components.",
+            "value": "#a572cd",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to communicate information for debugging purposes within system feedback components.",
+              "value": "{color.palette.purple.light-1}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorMessageDebug",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "message",
+              "state": "debug"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "message",
+              "debug"
+            ]
+          }
+        },
+        "neutral": {
+          "$description": "Default color used for borders within the application.",
+          "value": "#d3d3d3",
+          "$type": "color",
+          "filePath": "tokens/src/color/color.ui-tailwind.json",
+          "isSource": true,
+          "original": {
+            "$description": "Default color used for borders within the application.",
+            "value": "{color.palette.neutral.light-2}",
+            "$type": "color"
+          },
+          "name": "ColorUiTailwindBorderColorNeutral",
+          "attributes": {
+            "category": "color",
+            "type": "ui-tailwind",
+            "item": "borderColor",
+            "subitem": "neutral"
+          },
+          "path": [
+            "color",
+            "ui-tailwind",
+            "borderColor",
+            "neutral"
+          ]
+        },
+        "status": {
+          "failed": {
+            "$description": "Border color to communicate that an action or validation has failed on an item.",
+            "value": "#e52222",
+            "$type": "color",
+            "filePath": "tokens/src/color/color.ui-tailwind.json",
+            "isSource": true,
+            "original": {
+              "$description": "Border color to communicate that an action or validation has failed on an item.",
+              "value": "{color.palette.red.base}",
+              "$type": "color"
+            },
+            "name": "ColorUiTailwindBorderColorStatusFailed",
+            "attributes": {
+              "category": "color",
+              "type": "ui-tailwind",
+              "item": "borderColor",
+              "subitem": "status",
+              "state": "failed"
+            },
+            "path": [
+              "color",
+              "ui-tailwind",
+              "borderColor",
+              "status",
+              "failed"
+            ]
+          }
+        }
+      }
+    },
     "ui": {
       "interactive": {
         "default": {
           "$description": "Default state.",
           "value": "#006fd0",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Default state.",
             "value": "{color.palette.blue.base}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveDefault",
           "attributes": {
@@ -36,12 +1928,14 @@ module.exports = {
           "$description": "Hover state.",
           "value": "#005eb1",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Hover state.",
             "value": "{color.palette.blue.dark-1}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveHover",
           "attributes": {
@@ -61,12 +1955,14 @@ module.exports = {
           "$description": "Use as background to visualize hover state for bigger areas or buttons.",
           "value": "#f5f5f5",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Use as background to visualize hover state for bigger areas or buttons.",
             "value": "{color.palette.neutral.light-4}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveSubtleHover",
           "attributes": {
@@ -86,12 +1982,14 @@ module.exports = {
           "$description": "Use as background to visualize active state for bigger areas or buttons.",
           "value": "#ebe9e9",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Use as background to visualize active state for bigger areas or buttons.",
             "value": "{color.palette.neutral.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveSubtleActive",
           "attributes": {
@@ -111,12 +2009,14 @@ module.exports = {
           "$description": "Active/pressed state.",
           "value": "#004078",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Active/pressed state.",
             "value": "{color.palette.blue.dark-2}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveActive",
           "attributes": {
@@ -136,12 +2036,14 @@ module.exports = {
           "$description": "Use for interactive elements that reveal their base state on:hover of a parent element, eg. in a table row. Note that this is not to be conflated with the disabled state, which is communicated via opacity.",
           "value": "#aeaeae",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Use for interactive elements that reveal their base state on:hover of a parent element, eg. in a table row. Note that this is not to be conflated with the disabled state, which is communicated via opacity.",
             "value": "{color.palette.neutral.light-1}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiInteractiveMuted",
           "attributes": {
@@ -163,11 +2065,13 @@ module.exports = {
           "bg": {
             "value": "#cee6fb",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.light-3}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageInfoBg",
             "attributes": {
@@ -188,11 +2092,13 @@ module.exports = {
           "border": {
             "value": "#44a8ff",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.light-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageInfoBorder",
             "attributes": {
@@ -213,11 +2119,13 @@ module.exports = {
           "fill": {
             "value": "#005eb1",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageInfoFill",
             "attributes": {
@@ -238,11 +2146,13 @@ module.exports = {
           "interactive": {
             "value": "#006fd0",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageInfoInteractive",
             "attributes": {
@@ -263,11 +2173,13 @@ module.exports = {
           "text": {
             "value": "#004078",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageInfoText",
             "attributes": {
@@ -290,11 +2202,13 @@ module.exports = {
           "bg": {
             "value": "#ffefca",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.light-3}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageWarningBg",
             "attributes": {
@@ -315,11 +2229,13 @@ module.exports = {
           "border": {
             "value": "#ffbe24",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageWarningBorder",
             "attributes": {
@@ -340,11 +2256,13 @@ module.exports = {
           "fill": {
             "value": "#845d01",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageWarningFill",
             "attributes": {
@@ -365,11 +2283,13 @@ module.exports = {
           "interactive": {
             "value": "#845d01",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageWarningInteractive",
             "attributes": {
@@ -390,11 +2310,13 @@ module.exports = {
           "text": {
             "value": "#845d01",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageWarningText",
             "attributes": {
@@ -417,11 +2339,13 @@ module.exports = {
           "bg": {
             "value": "#fcdddd",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.light-3}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSevereBg",
             "attributes": {
@@ -442,11 +2366,13 @@ module.exports = {
           "border": {
             "value": "#fc5e5e",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.light-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSevereBorder",
             "attributes": {
@@ -467,11 +2393,13 @@ module.exports = {
           "fill": {
             "value": "#b20000",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSevereFill",
             "attributes": {
@@ -492,11 +2420,13 @@ module.exports = {
           "interactive": {
             "value": "#b20000",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSevereInteractive",
             "attributes": {
@@ -517,11 +2447,13 @@ module.exports = {
           "text": {
             "value": "#820000",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSevereText",
             "attributes": {
@@ -544,11 +2476,13 @@ module.exports = {
           "bg": {
             "value": "#def7de",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.light-3}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSuccessBg",
             "attributes": {
@@ -569,11 +2503,13 @@ module.exports = {
           "border": {
             "value": "#5cba5c",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.light-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSuccessBorder",
             "attributes": {
@@ -594,11 +2530,13 @@ module.exports = {
           "fill": {
             "value": "#186218",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSuccessFill",
             "attributes": {
@@ -619,11 +2557,13 @@ module.exports = {
           "interactive": {
             "value": "#228b22",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSuccessInteractive",
             "attributes": {
@@ -644,11 +2584,13 @@ module.exports = {
           "text": {
             "value": "#064006",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageSuccessText",
             "attributes": {
@@ -671,11 +2613,13 @@ module.exports = {
           "bg": {
             "value": "#dfcced",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.purple.light-3}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageDebugBg",
             "attributes": {
@@ -696,11 +2640,13 @@ module.exports = {
           "border": {
             "value": "#a572cd",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.purple.light-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageDebugBorder",
             "attributes": {
@@ -721,11 +2667,13 @@ module.exports = {
           "fill": {
             "value": "#5e00a6",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.purple.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageDebugFill",
             "attributes": {
@@ -746,11 +2694,13 @@ module.exports = {
           "interactive": {
             "value": "#5e00a6",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.purple.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageDebugInteractive",
             "attributes": {
@@ -771,11 +2721,13 @@ module.exports = {
           "text": {
             "value": "#4b0085",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.purple.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiMessageDebugText",
             "attributes": {
@@ -800,11 +2752,13 @@ module.exports = {
           "fill": {
             "value": "#006fd0",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusProgressFill",
             "attributes": {
@@ -825,11 +2779,13 @@ module.exports = {
           "text": {
             "value": "#005eb1",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.blue.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusProgressText",
             "attributes": {
@@ -852,11 +2808,13 @@ module.exports = {
           "fill": {
             "value": "#d09200",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusChangedFill",
             "attributes": {
@@ -877,11 +2835,13 @@ module.exports = {
           "text": {
             "value": "#845d01",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.yellow.dark-2}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusChangedText",
             "attributes": {
@@ -904,11 +2864,13 @@ module.exports = {
           "border": {
             "value": "#e52222",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusFailedBorder",
             "attributes": {
@@ -929,11 +2891,13 @@ module.exports = {
           "fill": {
             "value": "#e52222",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusFailedFill",
             "attributes": {
@@ -954,11 +2918,13 @@ module.exports = {
           "text": {
             "value": "#b20000",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.red.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusFailedText",
             "attributes": {
@@ -981,11 +2947,13 @@ module.exports = {
           "fill": {
             "value": "#228b22",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusCompleteFill",
             "attributes": {
@@ -1006,11 +2974,13 @@ module.exports = {
           "text": {
             "value": "#186218",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.green.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusCompleteText",
             "attributes": {
@@ -1033,11 +3003,13 @@ module.exports = {
           "fill": {
             "value": "#757575",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.neutral.base}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusNeutralFill",
             "attributes": {
@@ -1058,11 +3030,13 @@ module.exports = {
           "text": {
             "value": "#595959",
             "themeable": true,
+            "$type": "color",
             "filePath": "tokens/src/color/color.ui.json",
             "isSource": true,
             "original": {
               "value": "{color.palette.neutral.dark-1}",
-              "themeable": true
+              "themeable": true,
+              "$type": "color"
             },
             "name": "ColorUiStatusNeutralText",
             "attributes": {
@@ -1087,12 +3061,14 @@ module.exports = {
           "$description": "Default color for text that should be readable.",
           "value": "#333333",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Default color for text that should be readable.",
             "value": "{color.palette.neutral.dark-2}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextDefault",
           "attributes": {
@@ -1112,12 +3088,14 @@ module.exports = {
           "$description": "Default color for text that should stand out a little less. Has sufficient contrast on white.",
           "value": "#757575",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Default color for text that should stand out a little less. Has sufficient contrast on white.",
             "value": "{color.palette.neutral.base}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextMuted",
           "attributes": {
@@ -1137,12 +3115,14 @@ module.exports = {
           "$description": "Default color for text that has sufficient contrast on dark backgrounds.",
           "value": "#ffffff",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Default color for text that has sufficient contrast on dark backgrounds.",
             "value": "{color.palette.white}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextOnDark",
           "attributes": {
@@ -1162,12 +3142,14 @@ module.exports = {
           "$description": "Color for highlighting portions of text.",
           "value": "#004078",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Color for highlighting portions of text.",
             "value": "{color.palette.blue.dark-2}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextMarked",
           "attributes": {
@@ -1187,12 +3169,14 @@ module.exports = {
           "$description": "Background color for highlighting portions of text.",
           "value": "#cee6fb",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Background color for highlighting portions of text.",
             "value": "{color.palette.blue.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextMarkedBg",
           "attributes": {
@@ -1212,12 +3196,14 @@ module.exports = {
           "$description": "Background color for inserted (ins) text.",
           "value": "#cee6fb",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Background color for inserted (ins) text.",
             "value": "{color.palette.blue.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextInsertedBg",
           "attributes": {
@@ -1237,12 +3223,14 @@ module.exports = {
           "$description": "Background color for highlighting portions of text, that is discernible from 'marked-bg'",
           "value": "#ebf5ff",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Background color for highlighting portions of text, that is discernible from 'marked-bg'",
             "value": "{color.palette.blue.light-4}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextInsertedBgMuted",
           "attributes": {
@@ -1262,12 +3250,14 @@ module.exports = {
           "$description": "Background color for deleted (del) text.",
           "value": "#ffe5a7",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Background color for deleted (del) text.",
             "value": "{color.palette.yellow.light-2}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextDeletedBg",
           "attributes": {
@@ -1287,12 +3277,14 @@ module.exports = {
           "$description": "Background color for deleted (del) text.",
           "value": "#ffefca",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Background color for deleted (del) text.",
             "value": "{color.palette.yellow.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiTextDeletedBgMuted",
           "attributes": {
@@ -1311,13 +3303,17 @@ module.exports = {
       },
       "selection": {
         "text": {
+          "$description": "Color used to visualize selected elements.",
           "value": "#005eb1",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
+            "$description": "Color used to visualize selected elements.",
             "value": "{color.palette.blue.dark-1}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiSelectionText",
           "attributes": {
@@ -1334,13 +3330,17 @@ module.exports = {
           ]
         },
         "bg": {
+          "$description": "Background Color used to visualize selected elements.",
           "value": "#cee6fb",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
+            "$description": "Background Color used to visualize selected elements.",
             "value": "{color.palette.blue.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiSelectionBg",
           "attributes": {
@@ -1389,12 +3389,14 @@ module.exports = {
           "$description": "Default color used for backgrounds.",
           "value": "#ffffff",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Default color used for backgrounds.",
             "value": "{color.palette.white}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiBackgroundDefault",
           "attributes": {
@@ -1414,12 +3416,14 @@ module.exports = {
           "$description": "Lightest background color that is discernible on normal monitors.",
           "value": "#f5f5f5",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Lightest background color that is discernible on normal monitors.",
             "value": "{color.palette.neutral.light-4}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiBackgroundLight",
           "attributes": {
@@ -1439,12 +3443,14 @@ module.exports = {
           "$description": "Medium background color for boxes etc.",
           "value": "#ebe9e9",
           "themeable": true,
+          "$type": "color",
           "filePath": "tokens/src/color/color.ui.json",
           "isSource": true,
           "original": {
             "$description": "Medium background color for boxes etc.",
             "value": "{color.palette.neutral.light-3}",
-            "themeable": true
+            "themeable": true,
+            "$type": "color"
           },
           "name": "ColorUiBackgroundMedium",
           "attributes": {