@carbon/themes 11.77.0 → 11.78.0

package/src/dtcg/g10.json

@@ -0,0 +1,1453 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Gray 10 theme - Light theme with subtle contrast, ideal for data-dense interfaces and professional applications",
+  "$extensions": {
+    "org.carbon": {
+      "color-scheme": "light"
+    }
+  },
+  "ai": {
+    "aura": {
+      "end": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "End color for AI aura gradient effect. Creates a fade-to-transparent effect at the edge of AI-enhanced elements.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0
+          }
+        }
+      },
+      "hover": {
+        "background": {
+          "$type": "color",
+          "$value": "{blue.10}",
+          "$description": "Background color for AI aura on hover. Use when user hovers over AI-enhanced interactive elements."
+        },
+        "end": {
+          "$type": "color",
+          "$value": "{white.default}",
+          "$description": "End color for AI aura gradient on hover. Creates hover state fade effect for AI elements.",
+          "$extensions": {
+            "org.carbon": {
+              "alphaModifier": 0
+            }
+          }
+        },
+        "start": {
+          "$type": "color",
+          "$value": "{blue.50}",
+          "$description": "Start color for AI aura gradient on hover. Provides the vibrant blue beginning of the hover gradient.",
+          "$extensions": {
+            "org.carbon": {
+              "alphaModifier": 0.32
+            }
+          }
+        }
+      },
+      "start": {
+        "$type": "color",
+        "$value": "{blue.50}",
+        "$description": "Start color for AI aura gradient effect. Provides the vibrant blue beginning of the gradient for AI-enhanced elements.",
+        "sm": {
+          "$type": "color",
+          "$value": "{blue.50}",
+          "$description": "Start color for small AI aura gradient. Use for compact AI indicators or smaller UI elements.",
+          "$extensions": {
+            "org.carbon": {
+              "alphaModifier": 0.16
+            }
+          }
+        },
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.1
+          }
+        }
+      }
+    },
+    "border": {
+      "end": {
+        "$type": "color",
+        "$value": "{blue.40}",
+        "$description": "End color for AI border gradient. Creates the lighter edge of gradient borders on AI elements."
+      },
+      "start": {
+        "$type": "color",
+        "$value": "{blue.30}",
+        "$description": "Start color for AI border gradient. Creates the darker edge of gradient borders on AI elements.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.64
+          }
+        }
+      },
+      "strong": {
+        "$type": "color",
+        "$value": "{blue.50}",
+        "$description": "Strong border color for AI elements. Use for high-emphasis AI borders that need clear definition."
+      }
+    },
+    "drop": {
+      "shadow": {
+        "$type": "color",
+        "$value": "{blue.60}",
+        "$description": "Drop shadow color for AI elements. Provides depth and elevation for AI-enhanced components.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.1
+          }
+        }
+      }
+    },
+    "inner": {
+      "shadow": {
+        "$type": "color",
+        "$value": "{blue.50}",
+        "$description": "Inner shadow color for AI elements. Creates inset depth effect for AI-enhanced surfaces.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.1
+          }
+        }
+      }
+    },
+    "overlay": {
+      "$type": "color",
+      "$value": "{blue.100}",
+      "$description": "Overlay color for AI modal backgrounds. Use to dim content behind AI dialogs or popovers.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.5
+        }
+      }
+    },
+    "popover": {
+      "background": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background color for AI popovers and tooltips. Provides the base surface for AI-generated content displays."
+      },
+      "caret": {
+        "bottom": {
+          "$type": "color",
+          "$value": "{blue.40}",
+          "$description": "Bottom caret color for AI popovers. Creates the gradient pointer at the bottom of AI tooltips.",
+          "background": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.917647,
+                0.945098,
+                1
+              ],
+              "hex": "#eaf1ff"
+            },
+            "$description": "Background color for bottom caret of AI popovers. Provides the base color for the popover pointer.",
+            "actions": {
+              "$type": "color",
+              "$value": {
+                "colorSpace": "srgb",
+                "components": [
+                  0.913725,
+                  0.937255,
+                  0.980392
+                ],
+                "hex": "#e9effa"
+              },
+              "$description": "Background color for action area in AI popover bottom caret. Use for interactive sections within AI tooltips."
+            }
+          }
+        },
+        "center": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.627451,
+              0.764706,
+              1
+            ],
+            "hex": "#a0c3ff"
+          },
+          "$description": "Center color for AI popover caret gradient. Creates the vibrant middle of the gradient pointer."
+        }
+      },
+      "shadow": {
+        "outer": {
+          "01": {
+            "$type": "color",
+            "$value": "{blue.70}",
+            "$description": "Primary outer shadow for AI popovers. Provides the first layer of depth for elevated AI elements.",
+            "$extensions": {
+              "org.carbon": {
+                "alphaModifier": 0.06
+              }
+            }
+          },
+          "02": {
+            "$type": "color",
+            "$value": "{black.default}",
+            "$description": "Secondary outer shadow for AI popovers. Adds additional depth layer for AI element elevation.",
+            "$extensions": {
+              "org.carbon": {
+                "alphaModifier": 0.04
+              }
+            }
+          }
+        }
+      }
+    },
+    "skeleton": {
+      "background": {
+        "$type": "color",
+        "$value": "{blue.20}",
+        "$description": "Background color for AI skeleton loaders. Use while AI-generated content is loading."
+      },
+      "element": {
+        "background": {
+          "$type": "color",
+          "$value": "{blue.50}",
+          "$description": "Element background color for AI skeleton loaders. Provides the animated shimmer effect for loading AI content."
+        }
+      }
+    }
+  },
+  "background": {
+    "$type": "color",
+    "$value": "{gray.10}",
+    "$description": "Default page background color. Use as the base surface for the entire application or page.",
+    "active": {
+      "$type": "color",
+      "$value": "{gray.50}",
+      "$description": "Background color for active/pressed state. Use when user clicks or presses interactive elements.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.5
+        }
+      }
+    },
+    "brand": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Brand color for backgrounds. Use for branded sections, headers, or promotional areas."
+    },
+    "hover": {
+      "$type": "color",
+      "$value": "{gray.50}",
+      "$description": "Background color for hover state. Use when user hovers over interactive elements to provide visual feedback.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.12
+        }
+      }
+    },
+    "inverse": {
+      "$type": "color",
+      "$value": "{gray.80}",
+      "$description": "Inverse background color for dark UI elements. Use for tooltips, inverse buttons, or dark-themed sections.",
+      "hover": {
+        "$type": "color",
+        "$value": "{gray.80Hover}",
+        "$description": "Hover state for inverse backgrounds. Use when user hovers over dark UI elements."
+      }
+    },
+    "selected": {
+      "$type": "color",
+      "$value": "{gray.50}",
+      "$description": "Background color for selected state. Use to highlight currently selected items or active states.",
+      "hover": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Hover state for selected backgrounds. Use when user hovers over already-selected items.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.32
+          }
+        }
+      },
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.2
+        }
+      }
+    }
+  },
+  "border": {
+    "disabled": {
+      "$type": "color",
+      "$value": "{gray.30}",
+      "$description": "Border color for disabled elements. Use when borders need to indicate unavailable or inactive state."
+    },
+    "interactive": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Border color for interactive elements. Use for focused inputs, active selections, or clickable borders."
+    },
+    "inverse": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Border color for inverse/dark UI elements. Use for borders on dark backgrounds or inverse components."
+    },
+    "strong": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Strong border color for layer 01. Use for high-contrast borders that need clear definition on first layer."
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Strong border color for layer 02. Use for high-contrast borders on second layer surfaces."
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Strong border color for layer 03. Use for high-contrast borders on third layer surfaces."
+      }
+    },
+    "subtle": {
+      "00": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Subtle border color for base layer. Use for low-contrast borders on page background."
+      },
+      "01": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Subtle border color for layer 01. Use for low-contrast borders on first layer surfaces."
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Subtle border color for layer 02. Use for low-contrast borders on second layer surfaces."
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Subtle border color for layer 03. Use for low-contrast borders on third layer surfaces."
+      },
+      "selected": {
+        "01": {
+          "$type": "color",
+          "$value": "{gray.30}",
+          "$description": "Subtle border for selected items on layer 01. Use for low-contrast borders on selected elements."
+        },
+        "02": {
+          "$type": "color",
+          "$value": "{gray.30}",
+          "$description": "Subtle border for selected items on layer 02. Use for low-contrast borders on selected elements."
+        },
+        "03": {
+          "$type": "color",
+          "$value": "{gray.30}",
+          "$description": "Subtle border for selected items on layer 03. Use for low-contrast borders on selected elements."
+        }
+      }
+    },
+    "tile": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.40}",
+        "$description": "Border color for tiles on layer 01. Use for card or tile borders on first layer."
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Border color for tiles on layer 02. Use for card or tile borders on second layer."
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.40}",
+        "$description": "Border color for tiles on layer 03. Use for card or tile borders on third layer."
+      }
+    }
+  },
+  "chat": {
+    "avatar": {
+      "agent": {
+        "$type": "color",
+        "$value": "{gray.80}",
+        "$description": "Avatar background color for human agents in chat. Use to distinguish agent messages from bot or user."
+      },
+      "bot": {
+        "$type": "color",
+        "$value": "{gray.60}",
+        "$description": "Avatar background color for AI bots in chat. Use to identify automated or AI-generated responses."
+      },
+      "user": {
+        "$type": "color",
+        "$value": "{blue.60}",
+        "$description": "Avatar background color for users in chat. Use to identify messages from the current user."
+      }
+    },
+    "bubble": {
+      "agent": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background color for agent message bubbles. Use for messages from human agents in chat interfaces.",
+        "text": {
+          "$type": "color",
+          "$value": "{gray.100}",
+          "$description": "Text color for agent message bubbles. Ensures readable contrast in agent messages."
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Border color for chat message bubbles. Provides visual definition for all message types."
+      },
+      "user": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Background color for user message bubbles. Use for messages from the current user in chat interfaces.",
+        "text": {
+          "$type": "color",
+          "$value": "{gray.100}",
+          "$description": "Text color for user message bubbles. Ensures readable contrast in user messages."
+        }
+      }
+    },
+    "button": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Icon color for chat action buttons. Use for interactive elements within chat interface.",
+      "active": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Background color for chat buttons in active/pressed state. Use when user clicks chat actions.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.5
+          }
+        }
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Background color for chat buttons on hover. Use to provide feedback when hovering over chat actions.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.12
+          }
+        }
+      },
+      "selected": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Background color for selected chat buttons. Use to highlight currently active chat action.",
+        "$extensions": {
+          "org.carbon": {
+            "alphaModifier": 0.2
+          }
+        }
+      },
+      "text": {
+        "hover": {
+          "$type": "color",
+          "$value": "{blue.70}",
+          "$description": "Text color for chat buttons on hover. Provides visual feedback for interactive chat elements."
+        },
+        "selected": {
+          "$type": "color",
+          "$value": "{gray.70}",
+          "$description": "Text color for selected chat buttons. Indicates the currently active chat action."
+        }
+      }
+    },
+    "header": {
+      "background": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background color for chat header. Use for the top section of chat interfaces."
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Text color for chat header. Ensures readable titles and labels in chat header."
+      }
+    },
+    "prompt": {
+      "background": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background color for chat input prompt area. Use for the message composition field."
+      },
+      "border": {
+        "end": {
+          "$type": "color",
+          "$value": "{gray.10}",
+          "$description": "End color for chat prompt border gradient. Creates fade effect at edge of input area.",
+          "$extensions": {
+            "org.carbon": {
+              "alphaModifier": 0
+            }
+          }
+        },
+        "start": {
+          "$type": "color",
+          "$value": "{gray.10}",
+          "$description": "Start color for chat prompt border gradient. Defines the beginning of input border gradient."
+        }
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Text color for chat input prompt. Ensures readable text in message composition area."
+      }
+    },
+    "shell": {
+      "background": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background color for chat container shell. Use as the base surface for entire chat interface."
+      }
+    }
+  },
+  "field": {
+    "01": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Background color for form fields on layer 01. Use for input fields, text areas, and selects on first layer."
+    },
+    "02": {
+      "$type": "color",
+      "$value": "{gray.10}",
+      "$description": "Background color for form fields on layer 02. Use for input fields on second layer surfaces."
+    },
+    "03": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Background color for form fields on layer 03. Use for input fields on third layer surfaces."
+    },
+    "hover": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover background for fields on layer 01. Use when user hovers over input fields on first layer."
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover background for fields on layer 02. Use when user hovers over input fields on second layer."
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover background for fields on layer 03. Use when user hovers over input fields on third layer."
+      }
+    }
+  },
+  "focus": {
+    "$type": "color",
+    "$value": "{blue.60}",
+    "$description": "Focus indicator color. Use for focus rings and outlines on interactive elements for keyboard navigation.",
+    "inset": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Inset focus indicator color. Use for inner focus rings on elements with colored backgrounds."
+    },
+    "inverse": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Focus indicator for inverse/dark elements. Use for focus rings on dark backgrounds."
+    }
+  },
+  "highlight": {
+    "$type": "color",
+    "$value": "{blue.20}",
+    "$description": "Highlight color for selected text or emphasized content. Use for text selection or search result highlighting."
+  },
+  "icon": {
+    "disabled": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Icon color for disabled state. Use when icons need to indicate unavailable or inactive functionality.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.25
+        }
+      }
+    },
+    "interactive": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Icon color for interactive elements. Use for clickable icons, buttons, and actionable items."
+    },
+    "inverse": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Icon color for inverse/dark backgrounds. Use for icons on dark surfaces or inverse components."
+    },
+    "on": {
+      "color": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Icon color for colored backgrounds. Use for icons on brand colors, buttons, or colored surfaces.",
+        "disabled": {
+          "$type": "color",
+          "$value": "{gray.50}",
+          "$description": "Disabled icon color on colored backgrounds. Use when icons on colored surfaces are inactive."
+        }
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Primary icon color. Use for main icons with highest visual priority and emphasis."
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{gray.70}",
+      "$description": "Secondary icon color. Use for supporting icons with less emphasis than primary."
+    }
+  },
+  "interactive": {
+    "$type": "color",
+    "$value": "{blue.60}",
+    "$description": "Interactive element color. Use for clickable elements, links, and actionable items."
+  },
+  "layer": {
+    "01": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Primary layer background"
+    },
+    "02": {
+      "$type": "color",
+      "$value": "{gray.10}",
+      "$description": "02. Token for 02 in the design system."
+    },
+    "03": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Tertiary layer background"
+    },
+    "accent": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Primary accent layer"
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Secondary accent layer"
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Tertiary accent layer"
+      },
+      "active": {
+        "01": {
+          "$type": "color",
+          "$value": "{gray.40}",
+          "$description": "Active state for accent layer 01"
+        },
+        "02": {
+          "$type": "color",
+          "$value": "{gray.40}",
+          "$description": "Active state for accent layer 02"
+        },
+        "03": {
+          "$type": "color",
+          "$value": "{gray.40}",
+          "$description": "Active state for accent layer 03"
+        }
+      },
+      "hover": {
+        "01": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for accent layer 01"
+        },
+        "02": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for accent layer 02"
+        },
+        "03": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for accent layer 03"
+        }
+      }
+    },
+    "active": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Active state for layer 01"
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Active state for layer 02"
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.30}",
+        "$description": "Active state for layer 03"
+      }
+    },
+    "background": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.10}",
+        "$description": "Background behind layer 01"
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Background behind layer 02"
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.10}",
+        "$description": "Background behind layer 03"
+      }
+    },
+    "hover": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover state for layer 01"
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover state for layer 02"
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.10Hover}",
+        "$description": "Hover state for layer 03"
+      }
+    },
+    "selected": {
+      "01": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Selected state for layer 01"
+      },
+      "02": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Selected state for layer 02"
+      },
+      "03": {
+        "$type": "color",
+        "$value": "{gray.20}",
+        "$description": "Selected state for layer 03"
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{gray.50}",
+        "$description": "Disabled. Token for disabled in the design system."
+      },
+      "hover": {
+        "01": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for selected layer 01"
+        },
+        "02": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for selected layer 02"
+        },
+        "03": {
+          "$type": "color",
+          "$value": "{gray.20Hover}",
+          "$description": "Hover state for selected layer 03"
+        }
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Inverse. Token for inverse in the design system."
+      }
+    }
+  },
+  "link": {
+    "inverse": {
+      "$type": "color",
+      "$value": "{blue.40}",
+      "$description": "Link color for dark backgrounds. Use for links on inverse or dark surfaces.",
+      "active": {
+        "$type": "color",
+        "$value": "{gray.10}",
+        "$description": "Active state for inverse links. Use when user clicks links on dark backgrounds."
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{blue.30}",
+        "$description": "Hover state for inverse links. Use when hovering over links on dark backgrounds."
+      },
+      "visited": {
+        "$type": "color",
+        "$value": "{purple.40}",
+        "$description": "Visited link color for dark backgrounds. Use for previously clicked links on inverse surfaces."
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Primary link color. Use for standard hyperlinks and navigation links.",
+      "hover": {
+        "$type": "color",
+        "$value": "{blue.70}",
+        "$description": "Hover color for primary links. Use when user hovers over standard links."
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{blue.70}",
+      "$description": "Secondary link color. Use for less prominent links or alternative link styles."
+    },
+    "visited": {
+      "$type": "color",
+      "$value": "{purple.60}",
+      "$description": "Color for visited links. Use to indicate previously clicked links."
+    }
+  },
+  "overlay": {
+    "$type": "color",
+    "$value": "{black.default}",
+    "$description": "Overlay color for modal backgrounds. Use to dim content behind dialogs and modals.",
+    "$extensions": {
+      "org.carbon": {
+        "alphaModifier": 0.6
+      }
+    }
+  },
+  "shadow": {
+    "$type": "color",
+    "$value": "{black.default}",
+    "$description": "Shadow color for elevation. Provides depth and layering for elevated components.",
+    "$extensions": {
+      "org.carbon": {
+        "alphaModifier": 0.3
+      }
+    }
+  },
+  "skeleton": {
+    "background": {
+      "$type": "color",
+      "$value": "{gray.10Hover}",
+      "$description": "Background color for skeleton loaders. Use as base for loading placeholders."
+    },
+    "element": {
+      "$type": "color",
+      "$value": "{gray.30}",
+      "$description": "Element color for skeleton loaders. Provides the animated shimmer effect for loading states."
+    }
+  },
+  "support": {
+    "caution": {
+      "major": {
+        "$type": "color",
+        "$value": "{orange.40}",
+        "$description": "Major caution color. Use for high-severity warnings or significant issues."
+      },
+      "minor": {
+        "$type": "color",
+        "$value": "{yellow.30}",
+        "$description": "Minor caution color. Use for low-severity warnings or minor issues."
+      },
+      "undefined": {
+        "$type": "color",
+        "$value": "{purple.60}",
+        "$description": "Undefined caution color. Use for unknown or indeterminate caution states."
+      }
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{red.60}",
+      "$description": "Error color for critical states. Use for error messages, failed validations, and critical alerts.",
+      "inverse": {
+        "$type": "color",
+        "$value": "{red.50}",
+        "$description": "Error color for dark backgrounds. Use for error indicators on inverse surfaces."
+      }
+    },
+    "info": {
+      "$type": "color",
+      "$value": "{blue.70}",
+      "$description": "Info color for informational states. Use for helpful tips, neutral information, and guidance.",
+      "inverse": {
+        "$type": "color",
+        "$value": "{blue.50}",
+        "$description": "Info color for dark backgrounds. Use for info indicators on inverse surfaces."
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": "{green.50}",
+      "$description": "Success color for positive states. Use for success messages, completed actions, and confirmations.",
+      "inverse": {
+        "$type": "color",
+        "$value": "{green.40}",
+        "$description": "Success color for dark backgrounds. Use for success indicators on inverse surfaces."
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": "{yellow.30}",
+      "$description": "Warning color for caution states. Use for warnings, potential issues, and items needing attention.",
+      "inverse": {
+        "$type": "color",
+        "$value": "{yellow.30}",
+        "$description": "Warning color for dark backgrounds. Use for warning indicators on inverse surfaces."
+      }
+    }
+  },
+  "syntax": {
+    "angle": {
+      "bracket": {
+        "$type": "color",
+        "$value": "{coolGray.60}",
+        "$description": "Bracket. Token for bracket in the design system."
+      }
+    },
+    "annotation": {
+      "$type": "color",
+      "$value": "{teal.60}",
+      "$description": "Annotation. Token for annotation in the design system."
+    },
+    "arithmetic": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "atom": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Atom. Token for atom in the design system."
+    },
+    "attribute": {
+      "$type": "color",
+      "$value": "{cyan.70}",
+      "$description": "Attribute. Token for attribute in the design system.",
+      "name": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "Name. Token for name in the design system."
+      },
+      "value": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Value. Token for value in the design system."
+      }
+    },
+    "bitwise": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "block": {
+      "comment": {
+        "$type": "color",
+        "$value": "{green.60}",
+        "$description": "Comment. Token for comment in the design system."
+      }
+    },
+    "bool": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Bool. Token for bool in the design system."
+    },
+    "brace": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Brace. Token for brace in the design system."
+    },
+    "bracket": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Bracket. Token for bracket in the design system."
+    },
+    "character": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Character. Token for character in the design system."
+    },
+    "class": {
+      "name": {
+        "$type": "color",
+        "$value": "{teal.60}",
+        "$description": "Name. Token for name in the design system."
+      }
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Color. Token for color in the design system."
+    },
+    "comment": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Comment. Token for comment in the design system."
+    },
+    "compare": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "constant": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Constant. Token for constant in the design system."
+    },
+    "content": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Content. Token for content in the design system.",
+      "separator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Separator. Token for separator in the design system."
+      }
+    },
+    "control": {
+      "keyword": {
+        "$type": "color",
+        "$value": "{purple.70}",
+        "$description": "Keyword. Token for keyword in the design system."
+      },
+      "operator": {
+        "$type": "color",
+        "$value": "{purple.70}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "definition": {
+      "$type": "color",
+      "$value": "{cyan.70}",
+      "$description": "Definition. Token for definition in the design system.",
+      "keyword": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "Keyword. Token for keyword in the design system."
+      },
+      "operator": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "deleted": {
+      "$type": "color",
+      "$value": "{red.20}",
+      "$description": "Deleted. Token for deleted in the design system."
+    },
+    "deref": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "doc": {
+      "comment": {
+        "$type": "color",
+        "$value": "{green.60}",
+        "$description": "Comment. Token for comment in the design system."
+      },
+      "string": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "String. Token for string in the design system."
+      }
+    },
+    "document": {
+      "meta": {
+        "$type": "color",
+        "$value": "{green.60}",
+        "$description": "Meta. Token for meta in the design system."
+      }
+    },
+    "emphasis": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Emphasis. Token for emphasis in the design system."
+    },
+    "escape": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Escape. Token for escape in the design system."
+    },
+    "float": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Float. Token for float in the design system."
+    },
+    "function": {
+      "$type": "color",
+      "$value": "{yellow.60}",
+      "$description": "Function. Token for function in the design system."
+    },
+    "heading": {
+      "1": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "1. Token for 1 in the design system."
+      },
+      "2": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "2. Token for 2 in the design system."
+      },
+      "3": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "3. Token for 3 in the design system."
+      },
+      "4": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "4. Token for 4 in the design system."
+      },
+      "5": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "5. Token for 5 in the design system."
+      },
+      "6": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "6. Token for 6 in the design system."
+      },
+      "$type": "color",
+      "$value": "{cyan.70}",
+      "$description": "Heading. Token for heading in the design system."
+    },
+    "inserted": {
+      "$type": "color",
+      "$value": "{green.20}",
+      "$description": "Inserted. Token for inserted in the design system."
+    },
+    "integer": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Integer. Token for integer in the design system."
+    },
+    "invalid": {
+      "$type": "color",
+      "$value": "{red.60}",
+      "$description": "Invalid. Token for invalid in the design system."
+    },
+    "keyword": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Keyword. Token for keyword in the design system."
+    },
+    "label": {
+      "name": {
+        "$type": "color",
+        "$value": "{blue.60}",
+        "$description": "Name. Token for name in the design system."
+      }
+    },
+    "line": {
+      "comment": {
+        "$type": "color",
+        "$value": "{green.60}",
+        "$description": "Comment. Token for comment in the design system."
+      }
+    },
+    "link": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Link. Token for link in the design system."
+    },
+    "list": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "List. Token for list in the design system."
+    },
+    "literal": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Literal. Token for literal in the design system."
+    },
+    "local": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Local. Token for local in the design system."
+    },
+    "logic": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "macro": {
+      "name": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Name. Token for name in the design system."
+      }
+    },
+    "meta": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Meta. Token for meta in the design system."
+    },
+    "modifier": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Modifier. Token for modifier in the design system."
+    },
+    "module": {
+      "keyword": {
+        "$type": "color",
+        "$value": "{purple.70}",
+        "$description": "Keyword. Token for keyword in the design system."
+      }
+    },
+    "monospace": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Monospace. Token for monospace in the design system."
+    },
+    "name": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Name. Token for name in the design system."
+    },
+    "namespace": {
+      "$type": "color",
+      "$value": "{teal.60}",
+      "$description": "Namespace. Token for namespace in the design system."
+    },
+    "null": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Null. Token for null in the design system."
+    },
+    "number": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Number. Token for number in the design system."
+    },
+    "operator": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Operator. Token for operator in the design system.",
+      "keyword": {
+        "$type": "color",
+        "$value": "{blue.60}",
+        "$description": "Keyword. Token for keyword in the design system."
+      }
+    },
+    "paren": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Paren. Token for paren in the design system."
+    },
+    "processing": {
+      "instruction": {
+        "$type": "color",
+        "$value": "{gray.100}",
+        "$description": "Instruction. Token for instruction in the design system."
+      }
+    },
+    "property": {
+      "name": {
+        "$type": "color",
+        "$value": "{cyan.70}",
+        "$description": "Name. Token for name in the design system."
+      }
+    },
+    "punctuation": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Punctuation. Token for punctuation in the design system."
+    },
+    "quote": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Quote. Token for quote in the design system."
+    },
+    "regexp": {
+      "$type": "color",
+      "$value": "{purple.70}",
+      "$description": "Regexp. Token for regexp in the design system."
+    },
+    "self": {
+      "$type": "color",
+      "$value": "{teal.60}",
+      "$description": "Self. Token for self in the design system."
+    },
+    "separator": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Separator. Token for separator in the design system."
+    },
+    "special": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Special. Token for special in the design system.",
+      "string": {
+        "$type": "color",
+        "$value": "{purple.60}",
+        "$description": "String. Token for string in the design system."
+      }
+    },
+    "square": {
+      "bracket": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Bracket. Token for bracket in the design system."
+      }
+    },
+    "standard": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Standard. Token for standard in the design system."
+    },
+    "strikethrough": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Strikethrough. Token for strikethrough in the design system."
+    },
+    "string": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "String. Token for string in the design system."
+    },
+    "strong": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Strong. Token for strong in the design system."
+    },
+    "tag": {
+      "$type": "color",
+      "$value": "{teal.60}",
+      "$description": "Tag. Token for tag in the design system.",
+      "name": {
+        "$type": "color",
+        "$value": "{teal.60}",
+        "$description": "Name. Token for name in the design system."
+      }
+    },
+    "type": {
+      "$type": "color",
+      "$value": "{teal.60}",
+      "$description": "Type. Token for type in the design system.",
+      "name": {
+        "$type": "color",
+        "$value": "{teal.60}",
+        "$description": "Name. Token for name in the design system."
+      },
+      "operator": {
+        "$type": "color",
+        "$value": "{teal.60}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "unit": {
+      "$type": "color",
+      "$value": "{green.60}",
+      "$description": "Unit. Token for unit in the design system."
+    },
+    "update": {
+      "operator": {
+        "$type": "color",
+        "$value": "{coolGray.80}",
+        "$description": "Operator. Token for operator in the design system."
+      }
+    },
+    "url": {
+      "$type": "color",
+      "$value": "{coolGray.80}",
+      "$description": "Url. Token for url in the design system."
+    },
+    "variable": {
+      "$type": "color",
+      "$value": "{blue.60}",
+      "$description": "Variable. Token for variable in the design system.",
+      "name": {
+        "$type": "color",
+        "$value": "{blue.60}",
+        "$description": "Name. Token for name in the design system."
+      }
+    }
+  },
+  "text": {
+    "disabled": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Disabled. Token for disabled in the design system.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.25
+        }
+      }
+    },
+    "error": {
+      "$type": "color",
+      "$value": "{red.60}",
+      "$description": "Error. Token for error in the design system."
+    },
+    "helper": {
+      "$type": "color",
+      "$value": "{gray.60}",
+      "$description": "Helper. Token for helper in the design system."
+    },
+    "inverse": {
+      "$type": "color",
+      "$value": "{white.default}",
+      "$description": "Inverse. Token for inverse in the design system."
+    },
+    "on": {
+      "color": {
+        "$type": "color",
+        "$value": "{white.default}",
+        "$description": "Color. Token for color in the design system.",
+        "disabled": {
+          "$type": "color",
+          "$value": "{gray.50}",
+          "$description": "Disabled. Token for disabled in the design system."
+        }
+      }
+    },
+    "placeholder": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Placeholder. Token for placeholder in the design system.",
+      "$extensions": {
+        "org.carbon": {
+          "alphaModifier": 0.4
+        }
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{gray.100}",
+      "$description": "Primary. Token for primary in the design system."
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{gray.70}",
+      "$description": "Secondary. Token for secondary in the design system."
+    }
+  },
+  "toggle": {
+    "off": {
+      "$type": "color",
+      "$value": "{gray.50}",
+      "$description": "Off. Token for off in the design system."
+    }
+  }
+}