{
  "tokens": {
    "color-charts-red-300": {
      "$value": {
        "light": "#ea7158",
        "dark": "#d63f38"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-red-400": {
      "$value": {
        "light": "#dc5032",
        "dark": "#ed5958"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-red-500": {
      "$value": {
        "light": "#d13313",
        "dark": "#fe6e73"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-red-600": {
      "$value": {
        "light": "#ba2e0f",
        "dark": "#ff8a8a"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-red-700": {
      "$value": {
        "light": "#a82a0c",
        "dark": "#ffa09e"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-red-800": {
      "$value": {
        "light": "#972709",
        "dark": "#ffb3b0"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-red-900": {
      "$value": {
        "light": "#892407",
        "dark": "#ffc4c0"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-red-1000": {
      "$value": {
        "light": "#7d2105",
        "dark": "#ffd2cf"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-red-1100": {
      "$value": {
        "light": "#721e03",
        "dark": "#ffe0dd"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-red-1200": {
      "$value": {
        "light": "#671c00",
        "dark": "#ffecea"
      },
      "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-orange-300": {
      "$value": {
        "light": "#e07941",
        "dark": "#c55305"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-orange-400": {
      "$value": {
        "light": "#cc5f21",
        "dark": "#de6923"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-orange-500": {
      "$value": {
        "light": "#bc4d01",
        "dark": "#f27c36"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-orange-600": {
      "$value": {
        "light": "#a84401",
        "dark": "#f89256"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-orange-700": {
      "$value": {
        "light": "#983c02",
        "dark": "#fca572"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-orange-800": {
      "$value": {
        "light": "#8a3603",
        "dark": "#ffb68b"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-orange-900": {
      "$value": {
        "light": "#7e3103",
        "dark": "#ffc6a4"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-orange-1000": {
      "$value": {
        "light": "#732c02",
        "dark": "#ffd4bb"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-orange-1100": {
      "$value": {
        "light": "#692801",
        "dark": "#ffe1cf"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-orange-1200": {
      "$value": {
        "light": "#602400",
        "dark": "#ffede2"
      },
      "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-yellow-300": {
      "$value": {
        "light": "#b2911c",
        "dark": "#977001"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-yellow-400": {
      "$value": {
        "light": "#9c7b0b",
        "dark": "#b08400"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-yellow-500": {
      "$value": {
        "light": "#8a6b05",
        "dark": "#c59600"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-yellow-600": {
      "$value": {
        "light": "#7b5f04",
        "dark": "#d3a61c"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-yellow-700": {
      "$value": {
        "light": "#6f5504",
        "dark": "#dfb52c"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-yellow-800": {
      "$value": {
        "light": "#654d03",
        "dark": "#eac33a"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-yellow-900": {
      "$value": {
        "light": "#5d4503",
        "dark": "#f1cf65"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-yellow-1000": {
      "$value": {
        "light": "#553f03",
        "dark": "#f7db8a"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-yellow-1100": {
      "$value": {
        "light": "#4d3901",
        "dark": "#fce5a8"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-yellow-1200": {
      "$value": {
        "light": "#483300",
        "dark": "#ffefc9"
      },
      "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-green-300": {
      "$value": {
        "light": "#67a353",
        "dark": "#48851a"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-green-400": {
      "$value": {
        "light": "#41902c",
        "dark": "#5a9b29"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-green-500": {
      "$value": {
        "light": "#1f8104",
        "dark": "#69ae34"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-green-600": {
      "$value": {
        "light": "#1a7302",
        "dark": "#7dbd4c"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-green-700": {
      "$value": {
        "light": "#176702",
        "dark": "#8fca61"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-green-800": {
      "$value": {
        "light": "#145d02",
        "dark": "#9fd673"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-green-900": {
      "$value": {
        "light": "#125502",
        "dark": "#b2df8d"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-green-1000": {
      "$value": {
        "light": "#104d01",
        "dark": "#c5e7a8"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-green-1100": {
      "$value": {
        "light": "#0f4601",
        "dark": "#d5efbe"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-green-1200": {
      "$value": {
        "light": "#0d4000",
        "dark": "#e4f7d5"
      },
      "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-teal-300": {
      "$value": {
        "light": "#2ea597",
        "dark": "#018977"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-teal-400": {
      "$value": {
        "light": "#1c8e81",
        "dark": "#009d89"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-teal-500": {
      "$value": {
        "light": "#0d7d70",
        "dark": "#00b09b"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-teal-600": {
      "$value": {
        "light": "#096f64",
        "dark": "#40bfa9"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-teal-700": {
      "$value": {
        "light": "#06645a",
        "dark": "#5fccb7"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-teal-800": {
      "$value": {
        "light": "#045b52",
        "dark": "#77d7c3"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-teal-900": {
      "$value": {
        "light": "#03524a",
        "dark": "#94e0d0"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-teal-1000": {
      "$value": {
        "light": "#014b44",
        "dark": "#ace9db"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-teal-1100": {
      "$value": {
        "light": "#01443e",
        "dark": "#c2f0e6"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-teal-1200": {
      "$value": {
        "light": "#003e38",
        "dark": "#d7f7f0"
      },
      "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-blue-1-300": {
      "$value": {
        "light": "#529ccb",
        "dark": "#00819c"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-blue-1-400": {
      "$value": {
        "light": "#3184c2",
        "dark": "#0497ba"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-blue-1-500": {
      "$value": {
        "light": "#0273bb",
        "dark": "#08aad2"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-blue-1-600": {
      "$value": {
        "light": "#0166ab",
        "dark": "#44b9dd"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-blue-1-700": {
      "$value": {
        "light": "#015b9d",
        "dark": "#63c6e7"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-blue-1-800": {
      "$value": {
        "light": "#015292",
        "dark": "#79d2f0"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-blue-1-900": {
      "$value": {
        "light": "#014a87",
        "dark": "#98dcf5"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-blue-1-1000": {
      "$value": {
        "light": "#01437d",
        "dark": "#b3e4f8"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-blue-1-1100": {
      "$value": {
        "light": "#003c75",
        "dark": "#caedfc"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-blue-1-1200": {
      "$value": {
        "light": "#00366d",
        "dark": "#ddf4ff"
      },
      "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-blue-2-300": {
      "$value": {
        "light": "#688ae8",
        "dark": "#486de8"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-blue-2-400": {
      "$value": {
        "light": "#5978e3",
        "dark": "#6384f5"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-blue-2-500": {
      "$value": {
        "light": "#4066df",
        "dark": "#7698fe"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-blue-2-600": {
      "$value": {
        "light": "#3759ce",
        "dark": "#8ea9ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-blue-2-700": {
      "$value": {
        "light": "#314fbf",
        "dark": "#a2b8ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-blue-2-800": {
      "$value": {
        "light": "#2c46b1",
        "dark": "#b1c5ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-blue-2-900": {
      "$value": {
        "light": "#273ea5",
        "dark": "#c3d1ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-blue-2-1000": {
      "$value": {
        "light": "#23379b",
        "dark": "#d2dcff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-blue-2-1100": {
      "$value": {
        "light": "#1f3191",
        "dark": "#dfe6ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-blue-2-1200": {
      "$value": {
        "light": "#1b2b88",
        "dark": "#ecf0ff"
      },
      "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-purple-300": {
      "$value": {
        "light": "#a783e1",
        "dark": "#8d59de"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-purple-400": {
      "$value": {
        "light": "#9469d6",
        "dark": "#a173ea"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-purple-500": {
      "$value": {
        "light": "#8456ce",
        "dark": "#b088f5"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-purple-600": {
      "$value": {
        "light": "#7749bf",
        "dark": "#bf9bf9"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-purple-700": {
      "$value": {
        "light": "#6b40b2",
        "dark": "#cbabfc"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-purple-800": {
      "$value": {
        "light": "#6237a7",
        "dark": "#d6baff"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-purple-900": {
      "$value": {
        "light": "#59309d",
        "dark": "#dfc8ff"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-purple-1000": {
      "$value": {
        "light": "#512994",
        "dark": "#e8d5ff"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-purple-1100": {
      "$value": {
        "light": "#4a238b",
        "dark": "#efe2ff"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-purple-1200": {
      "$value": {
        "light": "#431d84",
        "dark": "#f5edff"
      },
      "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-pink-300": {
      "$value": {
        "light": "#da7596",
        "dark": "#c64a70"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
    },
    "color-charts-pink-400": {
      "$value": {
        "light": "#ce567c",
        "dark": "#d56889"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
    },
    "color-charts-pink-500": {
      "$value": {
        "light": "#c33d69",
        "dark": "#e07f9d"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
    },
    "color-charts-pink-600": {
      "$value": {
        "light": "#b1325c",
        "dark": "#eb92ad"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
    },
    "color-charts-pink-700": {
      "$value": {
        "light": "#a32952",
        "dark": "#f5a2bb"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
    },
    "color-charts-pink-800": {
      "$value": {
        "light": "#962249",
        "dark": "#ffb0c8"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
    },
    "color-charts-pink-900": {
      "$value": {
        "light": "#8b1b42",
        "dark": "#ffc1d4"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
    },
    "color-charts-pink-1000": {
      "$value": {
        "light": "#81143b",
        "dark": "#ffd1de"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
    },
    "color-charts-pink-1100": {
      "$value": {
        "light": "#780d35",
        "dark": "#ffdfe8"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
    },
    "color-charts-pink-1200": {
      "$value": {
        "light": "#6f062f",
        "dark": "#ffecf1"
      },
      "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
    },
    "color-charts-status-critical": {
      "$value": {
        "light": "#7d2105",
        "dark": "#d63f38"
      },
      "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
    },
    "color-charts-status-high": {
      "$value": {
        "light": "#ba2e0f",
        "dark": "#fe6e73"
      },
      "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
    },
    "color-charts-status-medium": {
      "$value": {
        "light": "#cc5f21",
        "dark": "#f89256"
      },
      "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
    },
    "color-charts-status-low": {
      "$value": {
        "light": "#b2911c",
        "dark": "#dfb52c"
      },
      "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
    },
    "color-charts-status-positive": {
      "$value": {
        "light": "#67a353",
        "dark": "#69ae34"
      },
      "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
    },
    "color-charts-status-info": {
      "$value": {
        "light": "#3184c2",
        "dark": "#08aad2"
      },
      "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
    },
    "color-charts-status-neutral": {
      "$value": {
        "light": "#879596",
        "dark": "#879596"
      },
      "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
    },
    "color-charts-threshold-negative": {
      "$value": {
        "light": "#d13212",
        "dark": "#ff5d64"
      },
      "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
    },
    "color-charts-threshold-positive": {
      "$value": {
        "light": "#1d8102",
        "dark": "#6aaf35"
      },
      "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
    },
    "color-charts-threshold-info": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
    },
    "color-charts-threshold-neutral": {
      "$value": {
        "light": "#687078",
        "dark": "#95a5a6"
      },
      "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
    },
    "color-charts-line-grid": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "Color of the grid lines in a chart."
    },
    "color-charts-line-tick": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "Color of the tick marks in a chart."
    },
    "color-charts-line-axis": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "Color of the axis lines in a chart."
    },
    "color-charts-palette-categorical-1": {
      "$value": {
        "light": "#688ae8",
        "dark": "#486de8"
      },
      "$description": "Color #1 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-2": {
      "$value": {
        "light": "#c33d69",
        "dark": "#e07f9d"
      },
      "$description": "Color #2 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-3": {
      "$value": {
        "light": "#2ea597",
        "dark": "#018977"
      },
      "$description": "Color #3 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-4": {
      "$value": {
        "light": "#8456ce",
        "dark": "#b088f5"
      },
      "$description": "Color #4 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-5": {
      "$value": {
        "light": "#e07941",
        "dark": "#c55305"
      },
      "$description": "Color #5 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-6": {
      "$value": {
        "light": "#3759ce",
        "dark": "#8ea9ff"
      },
      "$description": "Color #6 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-7": {
      "$value": {
        "light": "#962249",
        "dark": "#ffb0c8"
      },
      "$description": "Color #7 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-8": {
      "$value": {
        "light": "#096f64",
        "dark": "#40bfa9"
      },
      "$description": "Color #8 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-9": {
      "$value": {
        "light": "#6237a7",
        "dark": "#d6baff"
      },
      "$description": "Color #9 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-10": {
      "$value": {
        "light": "#a84401",
        "dark": "#f89256"
      },
      "$description": "Color #10 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-11": {
      "$value": {
        "light": "#273ea5",
        "dark": "#c3d1ff"
      },
      "$description": "Color #11 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-12": {
      "$value": {
        "light": "#780d35",
        "dark": "#ffdfe8"
      },
      "$description": "Color #12 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-13": {
      "$value": {
        "light": "#03524a",
        "dark": "#94e0d0"
      },
      "$description": "Color #13 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-14": {
      "$value": {
        "light": "#4a238b",
        "dark": "#efe2ff"
      },
      "$description": "Color #14 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-15": {
      "$value": {
        "light": "#7e3103",
        "dark": "#ffc6a4"
      },
      "$description": "Color #15 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-16": {
      "$value": {
        "light": "#1b2b88",
        "dark": "#ecf0ff"
      },
      "$description": "Color #16 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-17": {
      "$value": {
        "light": "#ce567c",
        "dark": "#d56889"
      },
      "$description": "Color #17 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-18": {
      "$value": {
        "light": "#003e38",
        "dark": "#d7f7f0"
      },
      "$description": "Color #18 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-19": {
      "$value": {
        "light": "#9469d6",
        "dark": "#a173ea"
      },
      "$description": "Color #19 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-20": {
      "$value": {
        "light": "#602400",
        "dark": "#ffede2"
      },
      "$description": "Color #20 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-21": {
      "$value": {
        "light": "#4066df",
        "dark": "#7698fe"
      },
      "$description": "Color #21 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-22": {
      "$value": {
        "light": "#a32952",
        "dark": "#f5a2bb"
      },
      "$description": "Color #22 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-23": {
      "$value": {
        "light": "#0d7d70",
        "dark": "#00b09b"
      },
      "$description": "Color #23 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-24": {
      "$value": {
        "light": "#6b40b2",
        "dark": "#cbabfc"
      },
      "$description": "Color #24 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-25": {
      "$value": {
        "light": "#bc4d01",
        "dark": "#f27c36"
      },
      "$description": "Color #25 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-26": {
      "$value": {
        "light": "#2c46b1",
        "dark": "#b1c5ff"
      },
      "$description": "Color #26 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-27": {
      "$value": {
        "light": "#81143b",
        "dark": "#ffd1de"
      },
      "$description": "Color #27 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-28": {
      "$value": {
        "light": "#045b52",
        "dark": "#77d7c3"
      },
      "$description": "Color #28 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-29": {
      "$value": {
        "light": "#512994",
        "dark": "#e8d5ff"
      },
      "$description": "Color #29 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-30": {
      "$value": {
        "light": "#8a3603",
        "dark": "#ffb68b"
      },
      "$description": "Color #30 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-31": {
      "$value": {
        "light": "#1f3191",
        "dark": "#dfe6ff"
      },
      "$description": "Color #31 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-32": {
      "$value": {
        "light": "#da7596",
        "dark": "#c64a70"
      },
      "$description": "Color #32 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-33": {
      "$value": {
        "light": "#01443e",
        "dark": "#c2f0e6"
      },
      "$description": "Color #33 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-34": {
      "$value": {
        "light": "#a783e1",
        "dark": "#8d59de"
      },
      "$description": "Color #34 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-35": {
      "$value": {
        "light": "#692801",
        "dark": "#ffe1cf"
      },
      "$description": "Color #35 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-36": {
      "$value": {
        "light": "#5978e3",
        "dark": "#6384f5"
      },
      "$description": "Color #36 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-37": {
      "$value": {
        "light": "#b1325c",
        "dark": "#eb92ad"
      },
      "$description": "Color #37 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-38": {
      "$value": {
        "light": "#1c8e81",
        "dark": "#009d89"
      },
      "$description": "Color #38 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-39": {
      "$value": {
        "light": "#7749bf",
        "dark": "#bf9bf9"
      },
      "$description": "Color #39 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-40": {
      "$value": {
        "light": "#cc5f21",
        "dark": "#de6923"
      },
      "$description": "Color #40 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-41": {
      "$value": {
        "light": "#314fbf",
        "dark": "#a2b8ff"
      },
      "$description": "Color #41 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-42": {
      "$value": {
        "light": "#8b1b42",
        "dark": "#ffc1d4"
      },
      "$description": "Color #42 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-43": {
      "$value": {
        "light": "#06645a",
        "dark": "#5fccb7"
      },
      "$description": "Color #43 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-44": {
      "$value": {
        "light": "#59309d",
        "dark": "#dfc8ff"
      },
      "$description": "Color #44 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-45": {
      "$value": {
        "light": "#983c02",
        "dark": "#fca572"
      },
      "$description": "Color #45 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-46": {
      "$value": {
        "light": "#23379b",
        "dark": "#d2dcff"
      },
      "$description": "Color #46 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-47": {
      "$value": {
        "light": "#6f062f",
        "dark": "#ffecf1"
      },
      "$description": "Color #47 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-48": {
      "$value": {
        "light": "#014b44",
        "dark": "#ace9db"
      },
      "$description": "Color #48 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-49": {
      "$value": {
        "light": "#431d84",
        "dark": "#f5edff"
      },
      "$description": "Color #49 on the categorical data visualization palette."
    },
    "color-charts-palette-categorical-50": {
      "$value": {
        "light": "#732c02",
        "dark": "#ffd4bb"
      },
      "$description": "Color #50 on the categorical data visualization palette."
    },
    "color-charts-error-bar-marker": {
      "$value": {
        "light": "#131920",
        "dark": "#ffffff"
      },
      "$description": "Color for the error bar marker in charts."
    },
    "color-background-notification-severity-critical": {
      "$value": {
        "light": "#870303",
        "dark": "#d63f38"
      },
      "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
    },
    "color-background-notification-severity-high": {
      "$value": {
        "light": "#ce3311",
        "dark": "#fe6e73"
      },
      "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
    },
    "color-background-notification-severity-medium": {
      "$value": {
        "light": "#f89256",
        "dark": "#f89256"
      },
      "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
    },
    "color-background-notification-severity-low": {
      "$value": {
        "light": "#f2cd54",
        "dark": "#f2cd54"
      },
      "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
    },
    "color-background-notification-severity-neutral": {
      "$value": {
        "light": "#687078",
        "dark": "#687078"
      },
      "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
    },
    "color-text-notification-severity-critical": {
      "$value": {
        "light": "#fafafa",
        "dark": "#000000"
      },
      "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
    },
    "color-text-notification-severity-high": {
      "$value": {
        "light": "#fafafa",
        "dark": "#16191f"
      },
      "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
    },
    "color-text-notification-severity-medium": {
      "$value": {
        "light": "#000000",
        "dark": "#16191f"
      },
      "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
    },
    "color-text-notification-severity-low": {
      "$value": {
        "light": "#16191f",
        "dark": "#16191f"
      },
      "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
    },
    "color-text-notification-severity-neutral": {
      "$value": {
        "light": "#fafafa",
        "dark": "#fafafa"
      },
      "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
    },
    "color-background-button-link-active": {
      "$value": {
        "light": "#eaeded",
        "dark": "#16191f"
      },
      "$description": "The background color of link buttons in active state."
    },
    "color-background-button-link-hover": {
      "$value": {
        "light": "#fafafa",
        "dark": "#21252c"
      },
      "$description": "The background color of link buttons in hover state."
    },
    "color-background-button-normal-active": {
      "$value": {
        "light": "#eaeded",
        "dark": "#16191f"
      },
      "$description": "The background color of normal buttons in active state."
    },
    "color-background-button-normal-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The default background color of normal buttons."
    },
    "color-background-button-normal-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The background color of normal buttons in disabled state."
    },
    "color-background-button-normal-hover": {
      "$value": {
        "light": "#fafafa",
        "dark": "#21252c"
      },
      "$description": "The background color of normal buttons in hover state."
    },
    "color-background-toggle-button-normal-pressed": {
      "$value": {
        "light": "#eaeded",
        "dark": "#16191f"
      },
      "$description": "The background color of normal toggle buttons in pressed state."
    },
    "color-background-button-primary-active": {
      "$value": {
        "light": "#12293b",
        "dark": "#44b9d6"
      },
      "$description": "The background color of primary buttons in active state."
    },
    "color-background-button-primary-default": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The default background color of primary buttons."
    },
    "color-background-button-primary-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The background color of primary buttons in disabled state."
    },
    "color-background-button-primary-hover": {
      "$value": {
        "light": "#0a4a74",
        "dark": "#00a1c9"
      },
      "$description": "The background color of primary buttons in hover state."
    },
    "color-background-cell-shaded": {
      "$value": {
        "light": "#f2f3f3",
        "dark": "#16191f"
      },
      "$description": "The background color of shaded table cells."
    },
    "color-background-container-content": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
    },
    "color-background-container-header": {
      "$value": {
        "light": "#fafafa",
        "dark": "#21252c"
      },
      "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
    },
    "color-background-control-checked": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
    },
    "color-background-control-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1a2029"
      },
      "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
    },
    "color-background-control-disabled": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
    },
    "color-background-dropdown-item-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
    },
    "color-background-dropdown-item-filter-match": {
      "$value": {
        "light": "#f1faff",
        "dark": "#12293b"
      },
      "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
    },
    "color-background-dropdown-item-hover": {
      "$value": {
        "light": "#f2f3f3",
        "dark": "#414750"
      },
      "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
    },
    "color-background-home-header": {
      "$value": {
        "light": "#000000",
        "dark": "#000000"
      },
      "$description": "The background color of the home header, displayed on the Service's home page."
    },
    "color-background-input-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1a2029"
      },
      "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
    },
    "color-background-input-disabled": {
      "$value": {
        "light": "#eaeded",
        "dark": "#414750"
      },
      "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
    },
    "color-background-item-selected": {
      "$value": {
        "light": "#f1faff",
        "dark": "#12293b"
      },
      "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
    },
    "color-background-layout-main": {
      "$value": {
        "light": "#f2f3f3",
        "dark": "#16191f"
      },
      "$description": "The background color of the main content area on a page. For example: content area in app layout."
    },
    "color-background-layout-toggle-active": {
      "$value": {
        "light": "#2a2e33",
        "dark": "#2a2e33"
      },
      "$description": "The background color of the app layout toggle button when it's active."
    },
    "color-background-layout-toggle-default": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The default background color of the app layout toggle button."
    },
    "color-background-layout-toggle-hover": {
      "$value": {
        "light": "#545b64",
        "dark": "#545b64"
      },
      "$description": "The background color of the app layout toggle button on hover."
    },
    "color-background-layout-toggle-selected-active": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The background color of the app layout toggle button when it's selected and active."
    },
    "color-background-layout-toggle-selected-default": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The default background color of the app layout toggle button when it's selected."
    },
    "color-background-layout-toggle-selected-hover": {
      "$value": {
        "light": "#0a4a74",
        "dark": "#44b9d6"
      },
      "$description": "The background color of the app layout toggle button on hover when it's selected."
    },
    "color-background-notification-blue": {
      "$value": {
        "light": "#0073bb",
        "dark": "#0073bb"
      },
      "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
    },
    "color-background-notification-green": {
      "$value": {
        "light": "#1d8102",
        "dark": "#1d8102"
      },
      "$description": "Background color for green notifications. For example: green badges and success flash messages."
    },
    "color-background-notification-grey": {
      "$value": {
        "light": "#545b64",
        "dark": "#687078"
      },
      "$description": "Background color for grey notifications. For example: grey badges."
    },
    "color-background-notification-red": {
      "$value": {
        "light": "#d13212",
        "dark": "#d13212"
      },
      "$description": "Background color for red notifications. For example: red badges and error flash messages."
    },
    "color-background-notification-yellow": {
      "$value": {
        "light": "#ffe347",
        "dark": "#ffe347"
      },
      "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
    },
    "color-background-popover": {
      "$value": {
        "light": "#ffffff",
        "dark": "#21252c"
      },
      "$description": "Background color for the popover container."
    },
    "color-background-segment-active": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The background color of the active segment in a segmented control."
    },
    "color-background-segment-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The background color of inactive segments in a segmented control."
    },
    "color-background-segment-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#2a2e33"
      },
      "$description": "The background color of disabled segments in a segmented control."
    },
    "color-background-segment-hover": {
      "$value": {
        "light": "#fafafa",
        "dark": "#21252c"
      },
      "$description": "The background color of inactive segments in a segmented control on hover."
    },
    "color-background-status-error": {
      "$value": {
        "light": "#fdf3f1",
        "dark": "#270a11"
      },
      "$description": "The background color of an item in error state. For example: error alerts."
    },
    "color-background-status-info": {
      "$value": {
        "light": "#f1faff",
        "dark": "#12293b"
      },
      "$description": "The background color of an informational item. For example: information alerts."
    },
    "color-background-dialog": {
      "$value": {
        "light": "#f1faff",
        "dark": "#12293b"
      },
      "$description": "The background color of the feedback/input dialogue box."
    },
    "color-background-status-success": {
      "$value": {
        "light": "#f2f8f0",
        "dark": "#172211"
      },
      "$description": "The background color of an item in success state. For example: success alerts."
    },
    "color-background-status-warning": {
      "$value": {
        "light": "#fffef0",
        "dark": "#191100"
      },
      "$description": "The background color of an item in warning state. For example: warning alerts."
    },
    "color-background-toggle-checked-disabled": {
      "$value": {
        "light": "#99cbe4",
        "dark": "#0a4a74"
      },
      "$description": "The background color of checked toggles in disabled state."
    },
    "color-background-avatar-gen-ai": {
      "$value": {
        "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
        "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
      },
      "$description": "The gen-ai background color of avatars."
    },
    "color-background-avatar-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#545b64"
      },
      "$description": "The default background color of avatars."
    },
    "color-text-avatar": {
      "$value": {
        "light": "#ffffff",
        "dark": "#ffffff"
      },
      "$description": "The text and icon color of avatars."
    },
    "color-background-loading-bar-gen-ai": {
      "$value": {
        "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
        "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
      },
      "$description": "The background color of gen-ai loading bars."
    },
    "color-background-chat-bubble-outgoing": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The background color of `outgoing` chat bubble."
    },
    "color-background-chat-bubble-incoming": {
      "$value": {
        "light": "#f2f3f3",
        "dark": "#16191f"
      },
      "$description": "The background color of `incoming` chat bubble."
    },
    "color-text-chat-bubble-outgoing": {
      "$value": {
        "light": "#16191f",
        "dark": "#d5dbdb"
      },
      "$description": "Text color of `outgoing` chat bubble."
    },
    "color-text-chat-bubble-incoming": {
      "$value": {
        "light": "#16191f",
        "dark": "#d5dbdb"
      },
      "$description": "Text color of `incoming` chat bubble."
    },
    "color-border-button-normal-active": {
      "$value": {
        "light": "#545b64",
        "dark": "#879596"
      },
      "$description": "The border color of normal buttons in active state."
    },
    "color-border-button-normal-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#879596"
      },
      "$description": "The border color of normal buttons."
    },
    "color-border-toggle-button-normal-pressed": {
      "$value": {
        "light": "#545b64",
        "dark": "#879596"
      },
      "$description": "The border color of normal toggle buttons in pressed state."
    },
    "color-border-button-normal-disabled": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "The border color of normal buttons in disabled state."
    },
    "color-text-button-normal-disabled": {
      "$value": {
        "light": "#879596",
        "dark": "#879596"
      },
      "$description": "The text color of normal buttons in disabled state."
    },
    "color-border-button-normal-hover": {
      "$value": {
        "light": "#16191f",
        "dark": "#aab7b8"
      },
      "$description": "The border color of normal buttons in hover state."
    },
    "color-text-button-icon-disabled": {
      "$value": {
        "light": "#879596",
        "dark": "#879596"
      },
      "$description": "The color of icon buttons in disabled state."
    },
    "color-border-button-primary-disabled": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "The border color of primary buttons in disabled state."
    },
    "color-text-button-primary-disabled": {
      "$value": {
        "light": "#879596",
        "dark": "#879596"
      },
      "$description": "The text color of primary buttons in disabled state."
    },
    "color-item-selected": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
    },
    "color-border-container-top": {
      "$value": {
        "light": "#eaeded",
        "dark": "#2a2e33"
      },
      "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
    },
    "color-border-control-default": {
      "$value": {
        "light": "#687078",
        "dark": "#879596"
      },
      "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
    },
    "color-border-divider-default": {
      "$value": {
        "light": "#eaeded",
        "dark": "#414750"
      },
      "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
    },
    "color-border-divider-secondary": {
      "$value": {
        "light": "#eaeded",
        "dark": "#414750"
      },
      "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
    },
    "color-border-dropdown-container": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
    },
    "color-border-dropdown-item-hover": {
      "$value": {
        "light": "#879596",
        "dark": "#879596"
      },
      "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
    },
    "color-border-input-default": {
      "$value": {
        "light": "#687078",
        "dark": "#879596"
      },
      "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
    },
    "color-border-input-focused": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
    },
    "color-border-item-focused": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The color of focus states. For example: the focus ring around interactive elements."
    },
    "color-border-dropdown-item-focused": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
    },
    "color-border-item-selected": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
    },
    "color-border-popover": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#545b64"
      },
      "$description": "The border color of the popover."
    },
    "color-border-segment-active": {
      "$value": {
        "light": "#16191f",
        "dark": "#ffffff"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-default": {
      "$value": {
        "light": "#687078",
        "dark": "#879596"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-disabled": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#414750"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-hover": {
      "$value": {
        "light": "#16191f",
        "dark": "#ffffff"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-status-error": {
      "$value": {
        "light": "#d13212",
        "dark": "#d13212"
      },
      "$description": "The border color of an item in error state. For example: error alerts."
    },
    "color-border-status-info": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The border color of an informational item. For example: information alerts."
    },
    "color-border-status-success": {
      "$value": {
        "light": "#1d8102",
        "dark": "#1d8102"
      },
      "$description": "The border color of an item in success state. For example: success alerts."
    },
    "color-border-status-warning": {
      "$value": {
        "light": "#906806",
        "dark": "#fbd332"
      },
      "$description": "The border color of an item in warning state. For example: warning alerts."
    },
    "color-border-dialog": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The border color of the feedback/input dialogue box."
    },
    "color-foreground-control-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#ffffff"
      },
      "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
    },
    "color-foreground-control-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#687078"
      },
      "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
    },
    "color-foreground-control-read-only": {
      "$value": {
        "light": "#687078",
        "dark": "#95a5a6"
      },
      "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
    },
    "color-text-accent": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
    },
    "color-text-body-default": {
      "$value": {
        "light": "#16191f",
        "dark": "#d5dbdb"
      },
      "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
    },
    "color-text-body-secondary": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
    },
    "color-text-breadcrumb-current": {
      "$value": {
        "light": "#687078",
        "dark": "#d5dbdb"
      },
      "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
    },
    "color-text-breadcrumb-icon": {
      "$value": {
        "light": "#687078",
        "dark": "#687078"
      },
      "$description": "The color used for the icon delimiter between breadcrumb items."
    },
    "color-text-button-normal-active": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
    },
    "color-text-toggle-button-normal-pressed": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The pressed text color of normal toggle buttons."
    },
    "color-text-button-normal-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The default text color of normal buttons."
    },
    "color-text-button-normal-hover": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The hover text color of normal buttons."
    },
    "color-text-button-primary-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#16191f"
      },
      "$description": "The active text color of primary buttons."
    },
    "color-text-button-primary-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#16191f"
      },
      "$description": "The default text color of primary buttons."
    },
    "color-text-button-primary-hover": {
      "$value": {
        "light": "#ffffff",
        "dark": "#16191f"
      },
      "$description": "The hover text color of primary buttons."
    },
    "color-text-counter": {
      "$value": {
        "light": "#687078",
        "dark": "#95a5a6"
      },
      "$description": "The default color for counters. For example: counters in table headers"
    },
    "color-text-dropdown-item-default": {
      "$value": {
        "light": "#16191f",
        "dark": "#d5dbdb"
      },
      "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
    },
    "color-text-dropdown-item-disabled": {
      "$value": {
        "light": "#aab7b8",
        "dark": "#687078"
      },
      "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
    },
    "color-text-dropdown-item-filter-match": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
    },
    "color-text-dropdown-item-highlighted": {
      "$value": {
        "light": "#16191f",
        "dark": "#eaeded"
      },
      "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
    },
    "color-text-empty": {
      "$value": {
        "light": "#687078",
        "dark": "#d5dbdb"
      },
      "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
    },
    "color-text-form-default": {
      "$value": {
        "light": "#16191f",
        "dark": "#d5dbdb"
      },
      "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
    },
    "color-text-form-secondary": {
      "$value": {
        "light": "#687078",
        "dark": "#95a5a6"
      },
      "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
    },
    "color-text-group-label": {
      "$value": {
        "light": "#545b64",
        "dark": "#95a5a6"
      },
      "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
    },
    "color-text-label-gen-ai": {
      "$value": {
        "light": "#7300e5",
        "dark": "#bf80ff"
      },
      "$description": "The default color for labels indicating that content is produced by generative AI."
    },
    "color-text-heading-default": {
      "$value": {
        "light": "#16191f",
        "dark": "#eaeded"
      },
      "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
    },
    "color-text-heading-secondary": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
    },
    "color-text-home-header-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#eaeded"
      },
      "$description": "The color of the home header's text, displayed on the Service's home page."
    },
    "color-text-home-header-secondary": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#d5dbdb"
      },
      "$description": "The color of the home header's secondary text, displayed on the Service's home page."
    },
    "color-text-input-disabled": {
      "$value": {
        "light": "#879596",
        "dark": "#687078"
      },
      "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
    },
    "color-text-input-placeholder": {
      "$value": {
        "light": "#687078",
        "dark": "#879596"
      },
      "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
    },
    "color-text-interactive-active": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The color of clickable elements in their active state. For example: tabs and icons."
    },
    "color-text-interactive-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
    },
    "color-text-interactive-disabled": {
      "$value": {
        "light": "#aab7b8",
        "dark": "#687078"
      },
      "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
    },
    "color-text-interactive-hover": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
    },
    "color-text-toggle-button-icon-pressed": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The pressed text color of icon toggle buttons."
    },
    "color-text-interactive-inverted-default": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#d5dbdb"
      },
      "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
    },
    "color-text-interactive-inverted-hover": {
      "$value": {
        "light": "#fafafa",
        "dark": "#fafafa"
      },
      "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
    },
    "color-text-label": {
      "$value": {
        "light": "#545b64",
        "dark": "#95a5a6"
      },
      "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
    },
    "color-text-layout-toggle": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The default color of the app layout toggle."
    },
    "color-text-layout-toggle-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1a2029"
      },
      "$description": "The color of the app layout toggle button when it's active."
    },
    "color-text-layout-toggle-hover": {
      "$value": {
        "light": "#0073bb",
        "dark": "#00a1c9"
      },
      "$description": "The color of the app layout toggle button on hover."
    },
    "color-text-layout-toggle-selected": {
      "$value": {
        "light": "#ffffff",
        "dark": "#16191f"
      },
      "$description": "The color of the app layout toggle button when it's selected."
    },
    "color-text-link-default": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
    },
    "color-text-link-hover": {
      "$value": {
        "light": "#0a4a74",
        "dark": "#99cbe4"
      },
      "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
    },
    "color-text-notification-default": {
      "$value": {
        "light": "#fafafa",
        "dark": "#fafafa"
      },
      "$description": "Default text color for notifications. For example: the text on badges and flashes."
    },
    "color-text-segment-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1a2029"
      },
      "$description": "The text color of the active segment in a segmented control."
    },
    "color-text-segment-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#d5dbdb"
      },
      "$description": "The text color of inactive segments in a segmented control."
    },
    "color-text-segment-hover": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The text color of inactive segments in a segmented control on hover."
    },
    "color-text-status-error": {
      "$value": {
        "light": "#d13212",
        "dark": "#ff5d64"
      },
      "$description": "The color of error text and icons. For example: form field error text and error status indicators."
    },
    "color-text-status-inactive": {
      "$value": {
        "light": "#687078",
        "dark": "#95a5a6"
      },
      "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
    },
    "color-text-status-info": {
      "$value": {
        "light": "#0073bb",
        "dark": "#44b9d6"
      },
      "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
    },
    "color-text-status-success": {
      "$value": {
        "light": "#1d8102",
        "dark": "#6aaf35"
      },
      "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
    },
    "color-text-status-warning": {
      "$value": {
        "light": "#906806",
        "dark": "#fbd332"
      },
      "$description": "The color of warning icons."
    },
    "color-text-top-navigation-title": {
      "$value": {
        "light": "#16191f",
        "dark": "#fafafa"
      },
      "$description": "The color of the title in the top navigation."
    },
    "color-board-placeholder-active": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#687078"
      },
      "$description": "The color of board placeholder in active state."
    },
    "color-board-placeholder-hover": {
      "$value": {
        "light": "#99cbe4",
        "dark": "#0073bb"
      },
      "$description": "The color of board placeholder in hovered state."
    },
    "color-drag-placeholder-active": {
      "$value": {
        "light": "#d5dbdb",
        "dark": "#687078"
      },
      "$description": "The color of drag placeholder in active state."
    },
    "color-drag-placeholder-hover": {
      "$value": {
        "light": "#99cbe4",
        "dark": "#0073bb"
      },
      "$description": "The color of drag placeholder in hovered state."
    },
    "color-dropzone-background-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1a2029"
      },
      "$description": "The default color of file upload dropzone background."
    },
    "color-dropzone-background-hover": {
      "$value": {
        "light": "#f1faff",
        "dark": "#12293b"
      },
      "$description": "The color of file upload dropzone background in hovered state."
    },
    "color-dropzone-text-default": {
      "$value": {
        "light": "#545b64",
        "dark": "#c6c6cd"
      },
      "$description": "The default color of file upload dropzone text."
    },
    "color-dropzone-text-hover": {
      "$value": {
        "light": "#545b64",
        "dark": "#c6c6cd"
      },
      "$description": "The color of file upload dropzone text in hovered state."
    },
    "color-dropzone-border-default": {
      "$value": {
        "light": "#879596",
        "dark": "#687078"
      },
      "$description": "The default color of file upload dropzone border."
    },
    "color-dropzone-border-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#44b9d6"
      },
      "$description": "The color of file upload dropzone border in hovered state."
    },
    "color-tree-view-connector-line": {
      "$value": {
        "light": "#879596",
        "dark": "#d5dbdb"
      },
      "$description": "The color of the tree view connector lines."
    },
    "font-family-base": {
      "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
      "$description": "The default font family that will be applied globally to the product interface."
    },
    "font-family-monospace": {
      "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
      "$description": "The monospace font family that will be applied globally to the product interface."
    },
    "font-size-body-m": {
      "$value": "14px",
      "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
    },
    "font-size-body-s": {
      "$value": "12px",
      "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
    },
    "font-size-display-l": {
      "$value": "44px",
      "$description": "The default font size for large display text."
    },
    "font-size-heading-xl": {
      "$value": "28px",
      "$description": "The default font size for h1s."
    },
    "font-size-heading-l": {
      "$value": "18px",
      "$description": "The default font size for h2s."
    },
    "font-size-heading-m": {
      "$value": "18px",
      "$description": "The default font size for h3s."
    },
    "font-size-heading-s": {
      "$value": "16px",
      "$description": "The default font size for h4s."
    },
    "font-size-heading-xs": {
      "$value": "16px",
      "$description": "The default font size for h5s."
    },
    "font-weight-button": {
      "$value": "700",
      "$description": "The default font weight for button text."
    },
    "font-weight-heading-xl": {
      "$value": "400",
      "$description": "The default font weight for h1s."
    },
    "font-weight-heading-l": {
      "$value": "700",
      "$description": "The default font weight for h2s."
    },
    "font-weight-heading-m": {
      "$value": "400",
      "$description": "The default font weight for h3s."
    },
    "font-weight-heading-s": {
      "$value": "700",
      "$description": "The default font weight for h4s."
    },
    "font-weight-heading-xs": {
      "$value": "400",
      "$description": "The default font weight for h5s."
    },
    "line-height-body-m": {
      "$value": "22px",
      "$description": "The default line height for regular body text."
    },
    "line-height-body-s": {
      "$value": "16px",
      "$description": "The default line height for small body text."
    },
    "line-height-display-l": {
      "$value": "56px",
      "$description": "The default line height for large display text."
    },
    "line-height-heading-xl": {
      "$value": "36px",
      "$description": "The default line height for h1s."
    },
    "line-height-heading-l": {
      "$value": "22px",
      "$description": "The default line height for h2s."
    },
    "line-height-heading-m": {
      "$value": "22px",
      "$description": "The default line height for h3s."
    },
    "line-height-heading-s": {
      "$value": "20px",
      "$description": "The default line height for h4s."
    },
    "line-height-heading-xs": {
      "$value": "20px",
      "$description": "The default line height for h5s."
    },
    "border-radius-alert": {
      "$value": "2px",
      "$description": "The border radius of alerts."
    },
    "border-radius-badge": {
      "$value": "16px",
      "$description": "The border radius of badges."
    },
    "border-radius-button": {
      "$value": "2px",
      "$description": "The border radius of buttons and segmented control's segments."
    },
    "border-radius-calendar-day-focus-ring": {
      "$value": "2px",
      "$description": "The border radius of the focused day in date picker and date range picker."
    },
    "border-radius-container": {
      "$value": "0px",
      "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
    },
    "border-radius-control-circular-focus-ring": {
      "$value": "50%",
      "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
    },
    "border-radius-control-default-focus-ring": {
      "$value": "2px",
      "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
    },
    "border-radius-dropdown": {
      "$value": "0px",
      "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
    },
    "border-radius-dropzone": {
      "$value": "0px",
      "$description": "The border radius of file upload dropzone."
    },
    "border-radius-flashbar": {
      "$value": "0px",
      "$description": "The border radius of flash messages in flashbars."
    },
    "border-radius-item": {
      "$value": "0px",
      "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
    },
    "border-radius-input": {
      "$value": "2px",
      "$description": "The border radius of form controls. For example: input, select."
    },
    "border-radius-popover": {
      "$value": "2px",
      "$description": "The border radius of popovers."
    },
    "border-radius-tabs-focus-ring": {
      "$value": "0px",
      "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
    },
    "border-radius-tiles": {
      "$value": "2px",
      "$description": "The border radius of tiles."
    },
    "border-radius-token": {
      "$value": "2px",
      "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
    },
    "border-radius-chat-bubble": {
      "$value": "2px",
      "$description": "The border radius of chat bubbles."
    },
    "border-radius-tutorial-panel-item": {
      "$value": "2px",
      "$description": "The border radius of tutorials inside a tutorial panel."
    },
    "border-width-alert": {
      "$value": "1px",
      "$description": "The border width of alerts."
    },
    "border-width-button": {
      "$value": "1px",
      "$description": "The border width of buttons."
    },
    "border-width-dropdown": {
      "$value": "1px",
      "$description": "The border width of dropdowns."
    },
    "border-width-field": {
      "$value": "1px",
      "$description": "The border width of form fields."
    },
    "border-width-popover": {
      "$value": "1px",
      "$description": "The border width of popovers."
    },
    "border-width-token": {
      "$value": "1px",
      "$description": "The border width of tokens."
    },
    "motion-duration-avatar-gen-ai-gradient": {
      "$value": {
        "default": "3600ms",
        "disabled": "0ms"
      },
      "$description": "The duration for gradient motion of gen-ai avatars."
    },
    "motion-duration-avatar-loading-dots": {
      "$value": {
        "default": "1200ms",
        "disabled": "0ms"
      },
      "$description": "The duration for loading motion of avatars."
    },
    "motion-easing-avatar-gen-ai-gradient": {
      "$value": {
        "default": "cubic-bezier(0.7, 0, 0.3, 1)",
        "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
      },
      "$description": "The easing curve for gradient motion of gen-ai avatars."
    },
    "motion-easing-responsive": {
      "$value": {
        "default": "ease-out",
        "disabled": "ease-out"
      },
      "$description": "The easing curve for providing responsive yet smooth visual feedback."
    },
    "motion-easing-sticky": {
      "$value": {
        "default": "ease-out",
        "disabled": "ease-out"
      },
      "$description": "The easing curve for making an element sticky to a certain state."
    },
    "motion-easing-expressive": {
      "$value": {
        "default": "ease-out",
        "disabled": "ease-out"
      },
      "$description": "The easing curve for drawing a user's attention in an expressive way."
    },
    "motion-duration-responsive": {
      "$value": {
        "default": "135ms",
        "disabled": "0ms"
      },
      "$description": "The duration for making the motion feel quick and responsive."
    },
    "motion-duration-expressive": {
      "$value": {
        "default": "180ms",
        "disabled": "0ms"
      },
      "$description": "The duration for accommodating the motion with more expressiveness."
    },
    "motion-duration-complex": {
      "$value": {
        "default": "270ms",
        "disabled": "0ms"
      },
      "$description": "The duration for drawing more attention or accommodating for more complexity."
    },
    "motion-keyframes-fade-in": {
      "$value": {
        "default": "awsui-fade-in-35003c",
        "disabled": "awsui-fade-in-35003c"
      },
      "$description": "The CSS keyframes for showing an element."
    },
    "motion-keyframes-fade-out": {
      "$value": {
        "default": "awsui-fade-out-35003c",
        "disabled": "awsui-fade-out-35003c"
      },
      "$description": "The CSS keyframes for hiding an element."
    },
    "motion-keyframes-status-icon-error": {
      "$value": {
        "default": "awsui-none-35003c",
        "disabled": "awsui-none-35003c"
      },
      "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
    },
    "motion-keyframes-scale-popup": {
      "$value": {
        "default": "awsui-none-35003c",
        "disabled": "awsui-none-35003c"
      },
      "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
    },
    "space-container-horizontal": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The horizontal padding inside a container."
    },
    "space-field-horizontal": {
      "$value": {
        "comfortable": "8px",
        "compact": "8px"
      },
      "$description": "The horizontal padding inside field components."
    },
    "space-tree-view-indentation": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The indentation of tree view items."
    },
    "space-scaled-xxxs": {
      "$value": {
        "comfortable": "2px",
        "compact": "0px"
      },
      "$description": "The XXXS spacing unit which scales between modes."
    },
    "space-scaled-xxs": {
      "$value": {
        "comfortable": "4px",
        "compact": "2px"
      },
      "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
    },
    "space-scaled-xs": {
      "$value": {
        "comfortable": "8px",
        "compact": "4px"
      },
      "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
    },
    "space-scaled-s": {
      "$value": {
        "comfortable": "12px",
        "compact": "8px"
      },
      "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
    },
    "space-scaled-m": {
      "$value": {
        "comfortable": "16px",
        "compact": "12px"
      },
      "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
    },
    "space-scaled-l": {
      "$value": {
        "comfortable": "20px",
        "compact": "16px"
      },
      "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
    },
    "space-scaled-xl": {
      "$value": {
        "comfortable": "24px",
        "compact": "20px"
      },
      "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
    },
    "space-scaled-xxl": {
      "$value": {
        "comfortable": "32px",
        "compact": "24px"
      },
      "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
    },
    "space-scaled-xxxl": {
      "$value": {
        "comfortable": "40px",
        "compact": "32px"
      },
      "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
    },
    "space-static-xxxs": {
      "$value": {
        "comfortable": "2px",
        "compact": "2px"
      },
      "$description": "The static XXXS spacing unit."
    },
    "space-static-xxs": {
      "$value": {
        "comfortable": "4px",
        "compact": "4px"
      },
      "$description": "The static XXS spacing unit."
    },
    "space-static-xs": {
      "$value": {
        "comfortable": "8px",
        "compact": "8px"
      },
      "$description": "The static XS spacing unit."
    },
    "space-static-s": {
      "$value": {
        "comfortable": "12px",
        "compact": "12px"
      },
      "$description": "The static S spacing unit."
    },
    "space-static-m": {
      "$value": {
        "comfortable": "16px",
        "compact": "16px"
      },
      "$description": "The static M spacing unit."
    },
    "space-static-l": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The static L spacing unit."
    },
    "space-static-xl": {
      "$value": {
        "comfortable": "24px",
        "compact": "24px"
      },
      "$description": "The static XL spacing unit."
    },
    "space-static-xxl": {
      "$value": {
        "comfortable": "32px",
        "compact": "32px"
      },
      "$description": "The static XXL spacing unit."
    },
    "space-static-xxxl": {
      "$value": {
        "comfortable": "40px",
        "compact": "40px"
      },
      "$description": "The static XXXL spacing unit."
    },
    "shadow-container-active": {
      "$value": {
        "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
        "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
      },
      "$description": "Shadow for containers and cards in active state."
    }
  },
  "contexts": {
    "compact-table": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#12293b",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#545b64",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fdf3f1",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#f2f8f0",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#fffef0",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#eaeded",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#7300e5",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#879596",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "top-navigation": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#21252c",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#21252c",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#232f3e",
            "dark": "#232f3e"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#21252c",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#1a2029",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#232f3e",
            "dark": "#232f3e"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#12293b",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#1a2029",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#12293b",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#21252c",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#21252c",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#270a11",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#12293b",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#12293b",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#172211",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#191100",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#414750",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#fbd332",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#eaeded",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#bf80ff",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#eaeded",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#eaeded",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#1a2029",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#00a1c9",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#1a2029",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#ff5d64",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#95a5a6",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#6aaf35",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#fbd332",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#1a2029",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#12293b",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#44b9d6",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "flashbar": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#12293b",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#545b64",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fdf3f1",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#f2f8f0",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#fffef0",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#eaeded",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#7300e5",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#879596",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "flashbar-warning": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#12293b",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#545b64",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fdf3f1",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#f2f8f0",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#fffef0",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#eaeded",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#7300e5",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#879596",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "alert": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#12293b",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#545b64",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fdf3f1",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#f2f8f0",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#fffef0",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#eaeded",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#7300e5",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#879596",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "app-layout-tools-drawer-trigger": {
      "tokens": {
        "color-charts-red-300": {
          "$value": {
            "light": "#ea7158",
            "dark": "#d63f38"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-red-400": {
          "$value": {
            "light": "#dc5032",
            "dark": "#ed5958"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-red-500": {
          "$value": {
            "light": "#d13313",
            "dark": "#fe6e73"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-red-600": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#ff8a8a"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-red-700": {
          "$value": {
            "light": "#a82a0c",
            "dark": "#ffa09e"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-red-800": {
          "$value": {
            "light": "#972709",
            "dark": "#ffb3b0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-red-900": {
          "$value": {
            "light": "#892407",
            "dark": "#ffc4c0"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-red-1000": {
          "$value": {
            "light": "#7d2105",
            "dark": "#ffd2cf"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-red-1100": {
          "$value": {
            "light": "#721e03",
            "dark": "#ffe0dd"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-red-1200": {
          "$value": {
            "light": "#671c00",
            "dark": "#ffecea"
          },
          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-orange-300": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-orange-400": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-orange-500": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-orange-600": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-orange-700": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-orange-800": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-orange-900": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-orange-1000": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-orange-1100": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-orange-1200": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-yellow-300": {
          "$value": {
            "light": "#b2911c",
            "dark": "#977001"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-yellow-400": {
          "$value": {
            "light": "#9c7b0b",
            "dark": "#b08400"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-yellow-500": {
          "$value": {
            "light": "#8a6b05",
            "dark": "#c59600"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-yellow-600": {
          "$value": {
            "light": "#7b5f04",
            "dark": "#d3a61c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-yellow-700": {
          "$value": {
            "light": "#6f5504",
            "dark": "#dfb52c"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-yellow-800": {
          "$value": {
            "light": "#654d03",
            "dark": "#eac33a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-yellow-900": {
          "$value": {
            "light": "#5d4503",
            "dark": "#f1cf65"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-yellow-1000": {
          "$value": {
            "light": "#553f03",
            "dark": "#f7db8a"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-yellow-1100": {
          "$value": {
            "light": "#4d3901",
            "dark": "#fce5a8"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-yellow-1200": {
          "$value": {
            "light": "#483300",
            "dark": "#ffefc9"
          },
          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-green-300": {
          "$value": {
            "light": "#67a353",
            "dark": "#48851a"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-green-400": {
          "$value": {
            "light": "#41902c",
            "dark": "#5a9b29"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-green-500": {
          "$value": {
            "light": "#1f8104",
            "dark": "#69ae34"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-green-600": {
          "$value": {
            "light": "#1a7302",
            "dark": "#7dbd4c"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-green-700": {
          "$value": {
            "light": "#176702",
            "dark": "#8fca61"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-green-800": {
          "$value": {
            "light": "#145d02",
            "dark": "#9fd673"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-green-900": {
          "$value": {
            "light": "#125502",
            "dark": "#b2df8d"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-green-1000": {
          "$value": {
            "light": "#104d01",
            "dark": "#c5e7a8"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-green-1100": {
          "$value": {
            "light": "#0f4601",
            "dark": "#d5efbe"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-green-1200": {
          "$value": {
            "light": "#0d4000",
            "dark": "#e4f7d5"
          },
          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-teal-300": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-teal-400": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-teal-500": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-teal-600": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-teal-700": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-teal-800": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-teal-900": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-teal-1000": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-teal-1100": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-teal-1200": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-1-300": {
          "$value": {
            "light": "#529ccb",
            "dark": "#00819c"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-1-400": {
          "$value": {
            "light": "#3184c2",
            "dark": "#0497ba"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-1-500": {
          "$value": {
            "light": "#0273bb",
            "dark": "#08aad2"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-1-600": {
          "$value": {
            "light": "#0166ab",
            "dark": "#44b9dd"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-1-700": {
          "$value": {
            "light": "#015b9d",
            "dark": "#63c6e7"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-1-800": {
          "$value": {
            "light": "#015292",
            "dark": "#79d2f0"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-1-900": {
          "$value": {
            "light": "#014a87",
            "dark": "#98dcf5"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-1-1000": {
          "$value": {
            "light": "#01437d",
            "dark": "#b3e4f8"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-1-1100": {
          "$value": {
            "light": "#003c75",
            "dark": "#caedfc"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-1-1200": {
          "$value": {
            "light": "#00366d",
            "dark": "#ddf4ff"
          },
          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-blue-2-300": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-blue-2-400": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-blue-2-500": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-blue-2-600": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-blue-2-700": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-blue-2-800": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-blue-2-900": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-blue-2-1000": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-blue-2-1100": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-blue-2-1200": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-purple-300": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-purple-400": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-purple-500": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-purple-600": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-purple-700": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-purple-800": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-purple-900": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-purple-1000": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-purple-1100": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-purple-1200": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-pink-300": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1"
        },
        "color-charts-pink-400": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1"
        },
        "color-charts-pink-500": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1"
        },
        "color-charts-pink-600": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1"
        },
        "color-charts-pink-700": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1"
        },
        "color-charts-pink-800": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1"
        },
        "color-charts-pink-900": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1"
        },
        "color-charts-pink-1000": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1"
        },
        "color-charts-pink-1100": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1"
        },
        "color-charts-pink-1200": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1"
        },
        "color-charts-status-critical": {
          "$value": {
            "light": "#7d2105",
            "dark": "#d63f38"
          },
          "$description": "Color to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-charts-status-high": {
          "$value": {
            "light": "#ba2e0f",
            "dark": "#fe6e73"
          },
          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: \"Failed\" or \"Sev-2\""
        },
        "color-charts-status-medium": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#f89256"
          },
          "$description": "Color to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-charts-status-low": {
          "$value": {
            "light": "#b2911c",
            "dark": "#dfb52c"
          },
          "$description": "Color to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-charts-status-positive": {
          "$value": {
            "light": "#67a353",
            "dark": "#69ae34"
          },
          "$description": "Color to represent a positive status. *For example: \"Success\" or \"Running\""
        },
        "color-charts-status-info": {
          "$value": {
            "light": "#3184c2",
            "dark": "#08aad2"
          },
          "$description": "Color to represent an informational status. For example: \"In-progress\" or \"Updating\""
        },
        "color-charts-status-neutral": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-charts-threshold-negative": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate"
        },
        "color-charts-threshold-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Color of the axis lines in a chart."
        },
        "color-charts-palette-categorical-1": {
          "$value": {
            "light": "#688ae8",
            "dark": "#486de8"
          },
          "$description": "Color #1 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-2": {
          "$value": {
            "light": "#c33d69",
            "dark": "#e07f9d"
          },
          "$description": "Color #2 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-3": {
          "$value": {
            "light": "#2ea597",
            "dark": "#018977"
          },
          "$description": "Color #3 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-4": {
          "$value": {
            "light": "#8456ce",
            "dark": "#b088f5"
          },
          "$description": "Color #4 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-5": {
          "$value": {
            "light": "#e07941",
            "dark": "#c55305"
          },
          "$description": "Color #5 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-6": {
          "$value": {
            "light": "#3759ce",
            "dark": "#8ea9ff"
          },
          "$description": "Color #6 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-7": {
          "$value": {
            "light": "#962249",
            "dark": "#ffb0c8"
          },
          "$description": "Color #7 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-8": {
          "$value": {
            "light": "#096f64",
            "dark": "#40bfa9"
          },
          "$description": "Color #8 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-9": {
          "$value": {
            "light": "#6237a7",
            "dark": "#d6baff"
          },
          "$description": "Color #9 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-10": {
          "$value": {
            "light": "#a84401",
            "dark": "#f89256"
          },
          "$description": "Color #10 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-11": {
          "$value": {
            "light": "#273ea5",
            "dark": "#c3d1ff"
          },
          "$description": "Color #11 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-12": {
          "$value": {
            "light": "#780d35",
            "dark": "#ffdfe8"
          },
          "$description": "Color #12 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-13": {
          "$value": {
            "light": "#03524a",
            "dark": "#94e0d0"
          },
          "$description": "Color #13 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-14": {
          "$value": {
            "light": "#4a238b",
            "dark": "#efe2ff"
          },
          "$description": "Color #14 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-15": {
          "$value": {
            "light": "#7e3103",
            "dark": "#ffc6a4"
          },
          "$description": "Color #15 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-16": {
          "$value": {
            "light": "#1b2b88",
            "dark": "#ecf0ff"
          },
          "$description": "Color #16 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-17": {
          "$value": {
            "light": "#ce567c",
            "dark": "#d56889"
          },
          "$description": "Color #17 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-18": {
          "$value": {
            "light": "#003e38",
            "dark": "#d7f7f0"
          },
          "$description": "Color #18 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-19": {
          "$value": {
            "light": "#9469d6",
            "dark": "#a173ea"
          },
          "$description": "Color #19 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-20": {
          "$value": {
            "light": "#602400",
            "dark": "#ffede2"
          },
          "$description": "Color #20 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-21": {
          "$value": {
            "light": "#4066df",
            "dark": "#7698fe"
          },
          "$description": "Color #21 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-22": {
          "$value": {
            "light": "#a32952",
            "dark": "#f5a2bb"
          },
          "$description": "Color #22 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-23": {
          "$value": {
            "light": "#0d7d70",
            "dark": "#00b09b"
          },
          "$description": "Color #23 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-24": {
          "$value": {
            "light": "#6b40b2",
            "dark": "#cbabfc"
          },
          "$description": "Color #24 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-25": {
          "$value": {
            "light": "#bc4d01",
            "dark": "#f27c36"
          },
          "$description": "Color #25 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-26": {
          "$value": {
            "light": "#2c46b1",
            "dark": "#b1c5ff"
          },
          "$description": "Color #26 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-27": {
          "$value": {
            "light": "#81143b",
            "dark": "#ffd1de"
          },
          "$description": "Color #27 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-28": {
          "$value": {
            "light": "#045b52",
            "dark": "#77d7c3"
          },
          "$description": "Color #28 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-29": {
          "$value": {
            "light": "#512994",
            "dark": "#e8d5ff"
          },
          "$description": "Color #29 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-30": {
          "$value": {
            "light": "#8a3603",
            "dark": "#ffb68b"
          },
          "$description": "Color #30 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-31": {
          "$value": {
            "light": "#1f3191",
            "dark": "#dfe6ff"
          },
          "$description": "Color #31 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-32": {
          "$value": {
            "light": "#da7596",
            "dark": "#c64a70"
          },
          "$description": "Color #32 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-33": {
          "$value": {
            "light": "#01443e",
            "dark": "#c2f0e6"
          },
          "$description": "Color #33 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-34": {
          "$value": {
            "light": "#a783e1",
            "dark": "#8d59de"
          },
          "$description": "Color #34 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-35": {
          "$value": {
            "light": "#692801",
            "dark": "#ffe1cf"
          },
          "$description": "Color #35 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-36": {
          "$value": {
            "light": "#5978e3",
            "dark": "#6384f5"
          },
          "$description": "Color #36 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-37": {
          "$value": {
            "light": "#b1325c",
            "dark": "#eb92ad"
          },
          "$description": "Color #37 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-38": {
          "$value": {
            "light": "#1c8e81",
            "dark": "#009d89"
          },
          "$description": "Color #38 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-39": {
          "$value": {
            "light": "#7749bf",
            "dark": "#bf9bf9"
          },
          "$description": "Color #39 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-40": {
          "$value": {
            "light": "#cc5f21",
            "dark": "#de6923"
          },
          "$description": "Color #40 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-41": {
          "$value": {
            "light": "#314fbf",
            "dark": "#a2b8ff"
          },
          "$description": "Color #41 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-42": {
          "$value": {
            "light": "#8b1b42",
            "dark": "#ffc1d4"
          },
          "$description": "Color #42 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-43": {
          "$value": {
            "light": "#06645a",
            "dark": "#5fccb7"
          },
          "$description": "Color #43 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-44": {
          "$value": {
            "light": "#59309d",
            "dark": "#dfc8ff"
          },
          "$description": "Color #44 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-45": {
          "$value": {
            "light": "#983c02",
            "dark": "#fca572"
          },
          "$description": "Color #45 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-46": {
          "$value": {
            "light": "#23379b",
            "dark": "#d2dcff"
          },
          "$description": "Color #46 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-47": {
          "$value": {
            "light": "#6f062f",
            "dark": "#ffecf1"
          },
          "$description": "Color #47 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-48": {
          "$value": {
            "light": "#014b44",
            "dark": "#ace9db"
          },
          "$description": "Color #48 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-49": {
          "$value": {
            "light": "#431d84",
            "dark": "#f5edff"
          },
          "$description": "Color #49 on the categorical data visualization palette."
        },
        "color-charts-palette-categorical-50": {
          "$value": {
            "light": "#732c02",
            "dark": "#ffd4bb"
          },
          "$description": "Color #50 on the categorical data visualization palette."
        },
        "color-charts-error-bar-marker": {
          "$value": {
            "light": "#131920",
            "dark": "#ffffff"
          },
          "$description": "Color for the error bar marker in charts."
        },
        "color-background-notification-severity-critical": {
          "$value": {
            "light": "#870303",
            "dark": "#d63f38"
          },
          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-background-notification-severity-high": {
          "$value": {
            "light": "#ce3311",
            "dark": "#fe6e73"
          },
          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-background-notification-severity-medium": {
          "$value": {
            "light": "#f89256",
            "dark": "#f89256"
          },
          "$description": "Background color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-background-notification-severity-low": {
          "$value": {
            "light": "#f2cd54",
            "dark": "#f2cd54"
          },
          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-background-notification-severity-neutral": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-text-notification-severity-critical": {
          "$value": {
            "light": "#fafafa",
            "dark": "#000000"
          },
          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: \"Sev-1\""
        },
        "color-text-notification-severity-high": {
          "$value": {
            "light": "#fafafa",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: \"Failed\" or \"Sev-2\""
        },
        "color-text-notification-severity-medium": {
          "$value": {
            "light": "#000000",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#16191f",
            "dark": "#16191f"
          },
          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: \"Warning\" or \"Sev-4\""
        },
        "color-text-notification-severity-neutral": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: \"Pending\" or \"Sev-5\""
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#eaeded",
            "dark": "#16191f"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#12293b",
            "dark": "#44b9d6"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#00a1c9"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards."
        },
        "color-background-container-header": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on."
        },
        "color-background-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox."
        },
        "color-background-dropdown-item-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds."
        },
        "color-background-dropdown-item-filter-match": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-background-dropdown-item-hover": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#414750"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#000000",
            "dark": "#000000"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-input-disabled": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect."
        },
        "color-background-item-selected": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#2a2e33",
            "dark": "#2a2e33"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#44b9d6"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#0073bb",
            "dark": "#0073bb"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#545b64",
            "dark": "#687078"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "Background color for red notifications. For example: red badges and error flash messages."
        },
        "color-background-notification-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#21252c"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#2a2e33"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#21252c"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fdf3f1",
            "dark": "#270a11"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#f2f8f0",
            "dark": "#172211"
          },
          "$description": "The background color of an item in success state. For example: success alerts."
        },
        "color-background-status-warning": {
          "$value": {
            "light": "#fffef0",
            "dark": "#191100"
          },
          "$description": "The background color of an item in warning state. For example: warning alerts."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0a4a74"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-avatar-gen-ai": {
          "$value": {
            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)"
          },
          "$description": "The gen-ai background color of avatars."
        },
        "color-background-avatar-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#545b64"
          },
          "$description": "The default background color of avatars."
        },
        "color-text-avatar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text and icon color of avatars."
        },
        "color-background-loading-bar-gen-ai": {
          "$value": {
            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)"
          },
          "$description": "The background color of gen-ai loading bars."
        },
        "color-background-chat-bubble-outgoing": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of `outgoing` chat bubble."
        },
        "color-background-chat-bubble-incoming": {
          "$value": {
            "light": "#f2f3f3",
            "dark": "#16191f"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#545b64",
            "dark": "#879596"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#aab7b8"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-border-container-top": {
          "$value": {
            "light": "#eaeded",
            "dark": "#2a2e33"
          },
          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table."
        },
        "color-border-control-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers."
        },
        "color-border-divider-secondary": {
          "$value": {
            "light": "#eaeded",
            "dark": "#414750"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select."
        },
        "color-border-dropdown-item-hover": {
          "$value": {
            "light": "#879596",
            "dark": "#879596"
          },
          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker."
        },
        "color-border-input-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#fafafa",
            "dark": "#2a2e33"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#fafafa",
            "dark": "#2a2e33"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select."
        },
        "color-border-item-selected": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-popover": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#545b64"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#414750"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#ffffff"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#d13212"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#1d8102"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#687078"
          },
          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-foreground-control-read-only": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles."
        },
        "color-text-accent": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*"
        },
        "color-text-body-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values."
        },
        "color-text-body-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels."
        },
        "color-text-breadcrumb-current": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#687078",
            "dark": "#687078"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons."
        },
        "color-text-toggle-button-normal-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-counter": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect."
        },
        "color-text-dropdown-item-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-filter-match": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest."
        },
        "color-text-dropdown-item-highlighted": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*"
        },
        "color-text-empty": {
          "$value": {
            "light": "#687078",
            "dark": "#d5dbdb"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas."
        },
        "color-text-form-secondary": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor."
        },
        "color-text-group-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector."
        },
        "color-text-label-gen-ai": {
          "$value": {
            "light": "#7300e5",
            "dark": "#bf80ff"
          },
          "$description": "The default color for labels indicating that content is produced by generative AI."
        },
        "color-text-heading-default": {
          "$value": {
            "light": "#16191f",
            "dark": "#eaeded"
          },
          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels."
        },
        "color-text-heading-secondary": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions."
        },
        "color-text-home-header-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#eaeded"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-input-placeholder": {
          "$value": {
            "light": "#687078",
            "dark": "#879596"
          },
          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect."
        },
        "color-text-interactive-active": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*"
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#aab7b8",
            "dark": "#687078"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*"
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-interactive-inverted-hover": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#545b64",
            "dark": "#95a5a6"
          },
          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels."
        },
        "color-text-layout-toggle": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#0073bb",
            "dark": "#00a1c9"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#16191f"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-hover": {
          "$value": {
            "light": "#0a4a74",
            "dark": "#99cbe4"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#fafafa",
            "dark": "#fafafa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#d5dbdb"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#d13212",
            "dark": "#ff5d64"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#687078",
            "dark": "#95a5a6"
          },
          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators."
        },
        "color-text-status-info": {
          "$value": {
            "light": "#0073bb",
            "dark": "#44b9d6"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#1d8102",
            "dark": "#6aaf35"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#906806",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#16191f",
            "dark": "#fafafa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#d5dbdb",
            "dark": "#687078"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#99cbe4",
            "dark": "#0073bb"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1a2029"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f1faff",
            "dark": "#12293b"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#545b64",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#879596",
            "dark": "#687078"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#44b9d6"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#879596",
            "dark": "#d5dbdb"
          },
          "$description": "The color of the tree view connector lines."
        },
        "font-family-base": {
          "$value": "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-monospace": {
          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
          "$description": "The monospace font family that will be applied globally to the product interface."
        },
        "font-size-body-m": {
          "$value": "14px",
          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text."
        },
        "font-size-body-s": {
          "$value": "12px",
          "$description": "The default font size for small body text. For example, form field descriptions, or badge text."
        },
        "font-size-display-l": {
          "$value": "44px",
          "$description": "The default font size for large display text."
        },
        "font-size-heading-xl": {
          "$value": "28px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-l": {
          "$value": "18px",
          "$description": "The default font size for h2s."
        },
        "font-size-heading-m": {
          "$value": "18px",
          "$description": "The default font size for h3s."
        },
        "font-size-heading-s": {
          "$value": "16px",
          "$description": "The default font size for h4s."
        },
        "font-size-heading-xs": {
          "$value": "16px",
          "$description": "The default font size for h5s."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-heading-xl": {
          "$value": "400",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "400",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xs": {
          "$value": "400",
          "$description": "The default font weight for h5s."
        },
        "line-height-body-m": {
          "$value": "22px",
          "$description": "The default line height for regular body text."
        },
        "line-height-body-s": {
          "$value": "16px",
          "$description": "The default line height for small body text."
        },
        "line-height-display-l": {
          "$value": "56px",
          "$description": "The default line height for large display text."
        },
        "line-height-heading-xl": {
          "$value": "36px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-l": {
          "$value": "22px",
          "$description": "The default line height for h2s."
        },
        "line-height-heading-m": {
          "$value": "22px",
          "$description": "The default line height for h3s."
        },
        "line-height-heading-s": {
          "$value": "20px",
          "$description": "The default line height for h4s."
        },
        "line-height-heading-xs": {
          "$value": "20px",
          "$description": "The default line height for h5s."
        },
        "border-radius-alert": {
          "$value": "2px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "16px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "2px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-container": {
          "$value": "0px",
          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal."
        },
        "border-radius-control-circular-focus-ring": {
          "$value": "50%",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "2px",
          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger."
        },
        "border-radius-dropdown": {
          "$value": "0px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "0px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "0px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-item": {
          "$value": "0px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-input": {
          "$value": "2px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-popover": {
          "$value": "2px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "0px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "2px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "2px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-chat-bubble": {
          "$value": "2px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "2px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-alert": {
          "$value": "1px",
          "$description": "The border width of alerts."
        },
        "border-width-button": {
          "$value": "1px",
          "$description": "The border width of buttons."
        },
        "border-width-dropdown": {
          "$value": "1px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-popover": {
          "$value": "1px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "1px",
          "$description": "The border width of tokens."
        },
        "motion-duration-avatar-gen-ai-gradient": {
          "$value": {
            "default": "3600ms",
            "disabled": "0ms"
          },
          "$description": "The duration for gradient motion of gen-ai avatars."
        },
        "motion-duration-avatar-loading-dots": {
          "$value": {
            "default": "1200ms",
            "disabled": "0ms"
          },
          "$description": "The duration for loading motion of avatars."
        },
        "motion-easing-avatar-gen-ai-gradient": {
          "$value": {
            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)"
          },
          "$description": "The easing curve for gradient motion of gen-ai avatars."
        },
        "motion-easing-responsive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "ease-out",
            "disabled": "ease-out"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "135ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "180ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "270ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-35003c",
            "disabled": "awsui-fade-in-35003c"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-35003c",
            "disabled": "awsui-fade-out-35003c"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-none-35003c",
            "disabled": "awsui-none-35003c"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-scaled-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "0px"
          },
          "$description": "The XXXS spacing unit which scales between modes."
        },
        "space-scaled-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control."
        },
        "space-scaled-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe."
        },
        "space-scaled-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "8px"
          },
          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover."
        },
        "space-scaled-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container"
        },
        "space-scaled-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields."
        },
        "space-scaled-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "20px"
          },
          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content."
        },
        "space-scaled-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "24px"
          },
          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content."
        },
        "space-scaled-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "32px"
          },
          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens."
        },
        "space-static-xxxs": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The static XXXS spacing unit."
        },
        "space-static-xxs": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The static XXS spacing unit."
        },
        "space-static-xs": {
          "$value": {
            "comfortable": "8px",
            "compact": "8px"
          },
          "$description": "The static XS spacing unit."
        },
        "space-static-s": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The static S spacing unit."
        },
        "space-static-m": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The static M spacing unit."
        },
        "space-static-l": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The static L spacing unit."
        },
        "space-static-xl": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The static XL spacing unit."
        },
        "space-static-xxl": {
          "$value": {
            "comfortable": "32px",
            "compact": "32px"
          },
          "$description": "The static XXL spacing unit."
        },
        "space-static-xxxl": {
          "$value": {
            "comfortable": "40px",
            "compact": "40px"
          },
          "$description": "The static XXXL spacing unit."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 4px 8px rgba(0, 28, 36, 0.45)",
            "dark": "0px 4px 8px rgba(0, 28, 36, 0.45)"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    }
  }
}