{
  "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": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$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": "#db0000",
        "dark": "#ff7a7a"
      },
      "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
    },
    "color-charts-threshold-positive": {
      "$value": {
        "light": "#00802f",
        "dark": "#2bb534"
      },
      "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
    },
    "color-charts-threshold-info": {
      "$value": {
        "light": "#006ce0",
        "dark": "#75cfff"
      },
      "$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": "#656871",
        "dark": "#a4a4ad"
      },
      "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
    },
    "color-charts-line-grid": {
      "$value": {
        "light": "#dedee3",
        "dark": "#424650"
      },
      "$description": "Color of the grid lines in a chart."
    },
    "color-charts-line-tick": {
      "$value": {
        "light": "#dedee3",
        "dark": "#424650"
      },
      "$description": "Color of the tick marks in a chart."
    },
    "color-charts-line-axis": {
      "$value": {
        "light": "#dedee3",
        "dark": "#424650"
      },
      "$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": "#656871",
        "dark": "#656871"
      },
      "$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": "#f9f9fa",
        "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": "#f9f9fa",
        "dark": "#0f141a"
      },
      "$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": "#0f141a",
        "dark": "#0f141a"
      },
      "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
    },
    "color-text-notification-severity-low": {
      "$value": {
        "light": "#0f141a",
        "dark": "#0f141a"
      },
      "$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": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$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-border-badge-severity-critical": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of badges representing a critical severity level."
    },
    "color-border-badge-severity-high": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of badges representing a high severity level."
    },
    "color-border-badge-severity-medium": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of badges representing a medium severity level."
    },
    "color-border-badge-severity-low": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of badges representing a low severity level."
    },
    "color-border-badge-severity-neutral": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of badges representing a neutral severity level."
    },
    "color-text-badge-severity-critical": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#000000"
      },
      "$description": "The text color of badges representing a critical severity level."
    },
    "color-text-badge-severity-high": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#0f141a"
      },
      "$description": "The text color of badges representing a high severity level."
    },
    "color-text-badge-severity-medium": {
      "$value": {
        "light": "#0f141a",
        "dark": "#0f141a"
      },
      "$description": "The text color of badges representing a medium severity level."
    },
    "color-text-badge-severity-low": {
      "$value": {
        "light": "#0f141a",
        "dark": "#0f141a"
      },
      "$description": "The text color of badges representing a low severity level."
    },
    "color-text-badge-severity-neutral": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The text color of badges representing a neutral severity level."
    },
    "color-background-badge-icon": {
      "$value": {
        "light": "#db0000",
        "dark": "#ff7a7a"
      },
      "$description": "The background color of the badge indicator on navigation and panel buttons."
    },
    "color-background-button-link-active": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#333843"
      },
      "$description": "The background color of link buttons in active state."
    },
    "color-background-button-link-default": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The background color of link buttons in default state."
    },
    "color-background-button-link-disabled": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The background color of link buttons in disabled state."
    },
    "color-background-button-link-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#1b232d"
      },
      "$description": "The background color of link buttons in hover state."
    },
    "color-background-button-normal-active": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#333843"
      },
      "$description": "The background color of normal buttons in active state."
    },
    "color-background-button-normal-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The default background color of normal buttons."
    },
    "color-background-button-normal-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of normal buttons in disabled state."
    },
    "color-background-button-normal-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#1b232d"
      },
      "$description": "The background color of normal buttons in hover state."
    },
    "color-background-toggle-button-normal-pressed": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#333843"
      },
      "$description": "The background color of normal toggle buttons in pressed state."
    },
    "color-background-toggle-button-normal-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The default background color of normal toggle buttons."
    },
    "color-background-toggle-button-normal-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#1b232d"
      },
      "$description": "The background color of normal toggle buttons in hover state."
    },
    "color-background-button-primary-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#42b4ff"
      },
      "$description": "The background color of primary buttons in active state."
    },
    "color-background-button-primary-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default background color of primary buttons."
    },
    "color-background-button-primary-disabled": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#232b37"
      },
      "$description": "The background color of primary buttons in disabled state."
    },
    "color-background-button-primary-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The background color of primary buttons in hover state."
    },
    "color-background-cell-shaded": {
      "$value": {
        "light": "#f6f6f9",
        "dark": "#1b232d"
      },
      "$description": "The background color of shaded table cells."
    },
    "color-background-card": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of a card."
    },
    "color-background-container-content": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$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": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
    },
    "color-background-control-checked": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$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": "#161d26"
      },
      "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
    },
    "color-background-control-disabled": {
      "$value": {
        "light": "#dedee3",
        "dark": "#333843"
      },
      "$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": "#1b232d"
      },
      "$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": "#f0fbff",
        "dark": "#333843"
      },
      "$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": "#f3f3f7",
        "dark": "#131920"
      },
      "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
    },
    "color-background-dropdown-item-selected": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#001129"
      },
      "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
    },
    "color-background-home-header": {
      "$value": {
        "light": "#0f141a",
        "dark": "#0f141a"
      },
      "$description": "The background color of the home header, displayed on the Service's home page."
    },
    "color-background-input-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$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": "#ebebf0",
        "dark": "#1b232d"
      },
      "$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": "#f0fbff",
        "dark": "#001129"
      },
      "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
    },
    "color-background-side-navigation-item-active": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The background color of an active (highlighted) side navigation item."
    },
    "color-background-layout-main": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of the main content area on a page. For example: content area in app layout."
    },
    "color-background-backdrop": {
      "$value": {
        "light": "rgba(35, 43, 55, 0.7)",
        "dark": "rgba(15, 20, 26, 0.7)"
      },
      "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
    },
    "color-background-layout-panel": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
    },
    "color-background-layout-panel-content": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
    },
    "color-background-layout-toolbar": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
    },
    "color-background-layout-toggle-active": {
      "$value": {
        "light": "#424650",
        "dark": "#424650"
      },
      "$description": "The background color of the app layout toggle button when it's active."
    },
    "color-background-layout-toggle-default": {
      "$value": {
        "light": "#424650",
        "dark": "#424650"
      },
      "$description": "The default background color of the app layout toggle button."
    },
    "color-background-layout-toggle-hover": {
      "$value": {
        "light": "#656871",
        "dark": "#656871"
      },
      "$description": "The background color of the app layout toggle button on hover."
    },
    "color-background-layout-toggle-selected-active": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The background color of the app layout toggle button when it's selected and active."
    },
    "color-background-layout-toggle-selected-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default background color of the app layout toggle button when it's selected."
    },
    "color-background-layout-toggle-selected-hover": {
      "$value": {
        "light": "#004a9e",
        "dark": "#75cfff"
      },
      "$description": "The background color of the app layout toggle button on hover when it's selected."
    },
    "color-background-notification-blue": {
      "$value": {
        "light": "#006ce0",
        "dark": "#006ce0"
      },
      "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
    },
    "color-background-notification-green": {
      "$value": {
        "light": "#00802f",
        "dark": "#00802f"
      },
      "$description": "Background color for green notifications. For example: green badges and success flash messages."
    },
    "color-background-notification-grey": {
      "$value": {
        "light": "#424650",
        "dark": "#656871"
      },
      "$description": "Background color for grey notifications. For example: grey badges."
    },
    "color-background-notification-red": {
      "$value": {
        "light": "#db0000",
        "dark": "#db0000"
      },
      "$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-flashbar-success": {
      "$value": {
        "light": "#00802f",
        "dark": "#00802f"
      },
      "$description": "The background color of success flash messages."
    },
    "color-background-flashbar-error": {
      "$value": {
        "light": "#db0000",
        "dark": "#db0000"
      },
      "$description": "The background color of error flash messages."
    },
    "color-background-flashbar-info": {
      "$value": {
        "light": "#006ce0",
        "dark": "#006ce0"
      },
      "$description": "The background color of info and in-progress flash messages."
    },
    "color-background-flashbar-warning": {
      "$value": {
        "light": "#ffe347",
        "dark": "#ffe347"
      },
      "$description": "The background color of warning flash messages."
    },
    "color-background-popover": {
      "$value": {
        "light": "#ffffff",
        "dark": "#1b232d"
      },
      "$description": "Background color for the popover container."
    },
    "color-background-progress-bar-value-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default background color of the progress bar value."
    },
    "color-background-progress-bar-default": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#333843"
      },
      "$description": "The default background color of the progress bar."
    },
    "color-background-segment-active": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The background color of the active segment in a segmented control."
    },
    "color-background-segment-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of inactive segments in a segmented control."
    },
    "color-background-segment-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of disabled segments in a segmented control."
    },
    "color-background-segment-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#1b232d"
      },
      "$description": "The background color of inactive segments in a segmented control on hover."
    },
    "color-background-segment-wrapper": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of segmented control wrapper."
    },
    "color-background-slider-range-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default background color of the slider range."
    },
    "color-background-slider-range-active": {
      "$value": {
        "light": "#004a9e",
        "dark": "#75cfff"
      },
      "$description": "The background color of the slider range in active state."
    },
    "color-background-slider-handle-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default background color of the slider handle."
    },
    "color-background-slider-handle-active": {
      "$value": {
        "light": "#004a9e",
        "dark": "#75cfff"
      },
      "$description": "The background color of the slider handle in active state."
    },
    "color-background-slider-track-default": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The default background color of the slider track."
    },
    "color-background-status-error": {
      "$value": {
        "light": "#fff5f5",
        "dark": "#1f0000"
      },
      "$description": "The background color of an item in error state. For example: error alerts."
    },
    "color-background-status-info": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#001129"
      },
      "$description": "The background color of an informational item. For example: information alerts."
    },
    "color-background-dialog": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#001129"
      },
      "$description": "The background color of the feedback/input dialogue box."
    },
    "color-background-status-success": {
      "$value": {
        "light": "#effff1",
        "dark": "#001401"
      },
      "$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-tiles-disabled": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#1b232d"
      },
      "$description": "The background color of disabled tiles."
    },
    "color-background-toggle-checked-disabled": {
      "$value": {
        "light": "#b8e7ff",
        "dark": "#002b66"
      },
      "$description": "The background color of checked toggles in disabled state."
    },
    "color-background-toggle-default": {
      "$value": {
        "light": "#424650",
        "dark": "#8c8c94"
      },
      "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
        "dark": "#424650"
      },
      "$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": "#f6f6f9",
        "dark": "#0f141a"
      },
      "$description": "The background color of `incoming` chat bubble."
    },
    "color-text-chat-bubble-outgoing": {
      "$value": {
        "light": "#0f141a",
        "dark": "#c6c6cd"
      },
      "$description": "Text color of `outgoing` chat bubble."
    },
    "color-text-chat-bubble-incoming": {
      "$value": {
        "light": "#0f141a",
        "dark": "#c6c6cd"
      },
      "$description": "Text color of `incoming` chat bubble."
    },
    "color-border-button-link-disabled": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of link buttons in disabled state."
    },
    "color-border-button-normal-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of normal buttons in active state."
    },
    "color-border-button-normal-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of normal buttons."
    },
    "color-border-toggle-button-normal-pressed": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of normal toggle buttons in pressed state."
    },
    "color-border-toggle-button-normal-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default border color of normal toggle buttons."
    },
    "color-border-toggle-button-normal-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of normal toggle buttons in hover state."
    },
    "color-border-button-normal-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The border color of normal buttons in disabled state."
    },
    "color-text-button-normal-disabled": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$description": "The text color of normal buttons in disabled state."
    },
    "color-border-button-normal-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of normal buttons in hover state."
    },
    "color-text-button-icon-disabled": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$description": "The color of icon buttons in disabled state."
    },
    "color-border-button-primary-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#42b4ff"
      },
      "$description": "The border color of primary buttons in active state."
    },
    "color-border-button-primary-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of primary buttons."
    },
    "color-border-button-primary-disabled": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#232b37"
      },
      "$description": "The border color of primary buttons in disabled state."
    },
    "color-border-button-primary-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of primary buttons in hover state."
    },
    "color-text-button-primary-disabled": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$description": "The text color of primary buttons in disabled state."
    },
    "color-item-selected": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
    },
    "color-text-side-navigation-item-active": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The text color of an active (highlighted) side navigation item."
    },
    "color-border-card": {
      "$value": {
        "light": "#c6c6cd",
        "dark": "#424650"
      },
      "$description": "The border color of a card."
    },
    "color-border-container-top": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$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": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
    },
    "color-border-divider-default": {
      "$value": {
        "light": "#c6c6cd",
        "dark": "#424650"
      },
      "$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": "#ebebf0",
        "dark": "#232b37"
      },
      "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
    },
    "color-border-dropdown-container": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$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": "#8c8c94",
        "dark": "#656871"
      },
      "$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": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
    },
    "color-border-input-focused": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
    },
    "color-border-item-focused": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The color of focus states. For example: the focus ring around interactive elements."
    },
    "color-border-dropdown-item-focused": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$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": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
    },
    "color-border-layout-side-navigation": {
      "$value": {
        "light": "#c6c6cd",
        "dark": "#424650"
      },
      "$description": "The border color of the side navigation divider in the app layout."
    },
    "color-border-popover": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The border color of the popover."
    },
    "color-border-segment-active": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-default": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-disabled": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-divider": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The color of the dividers between segments in a segmented control."
    },
    "color-border-segment-hover": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "Deprecated - this token is no longer in use."
    },
    "color-border-segment-wrapper": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The border color of the segmented control wrapper."
    },
    "color-border-status-error": {
      "$value": {
        "light": "#db0000",
        "dark": "#ff7a7a"
      },
      "$description": "The border color of an item in error state. For example: error alerts."
    },
    "color-border-status-info": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of an informational item. For example: information alerts."
    },
    "color-border-status-success": {
      "$value": {
        "light": "#00802f",
        "dark": "#2bb534"
      },
      "$description": "The border color of an item in success state. For example: success alerts."
    },
    "color-border-status-warning": {
      "$value": {
        "light": "#855900",
        "dark": "#fbd332"
      },
      "$description": "The border color of an item in warning state. For example: warning alerts."
    },
    "color-border-dialog": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The border color of the feedback/input dialogue box."
    },
    "color-foreground-control-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$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": "#161d26"
      },
      "$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": "#656871",
        "dark": "#a4a4ad"
      },
      "$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-shadow-toggle-handle": {
      "$value": {
        "light": "rgba(0, 0, 0, 0.25)",
        "dark": "rgba(0, 0, 0, 0.25)"
      },
      "$description": "The color of the drop shadow under the toggle handle."
    },
    "color-text-accent": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
    },
    "color-text-body-default": {
      "$value": {
        "light": "#0f141a",
        "dark": "#c6c6cd"
      },
      "$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": "#424650",
        "dark": "#c6c6cd"
      },
      "$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": "#656871",
        "dark": "#8c8c94"
      },
      "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
    },
    "color-text-breadcrumb-icon": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The color used for the icon delimiter between breadcrumb items."
    },
    "color-text-button-inline-icon-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default color of inline button icons."
    },
    "color-text-button-inline-icon-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The color of inline button icons in disabled state."
    },
    "color-text-button-inline-icon-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The color of inline button icons in hover state."
    },
    "color-text-button-normal-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$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": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The pressed text color of normal toggle buttons."
    },
    "color-text-button-normal-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default text color of normal buttons."
    },
    "color-text-button-normal-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The hover text color of normal buttons."
    },
    "color-text-button-link-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The text color of link buttons in active state."
    },
    "color-text-button-link-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default text color of link buttons."
    },
    "color-text-button-link-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The text color of link buttons in disabled state."
    },
    "color-text-button-link-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The text color of link buttons in hover state."
    },
    "color-text-button-primary-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$description": "The active text color of primary buttons."
    },
    "color-text-button-primary-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$description": "The default text color of primary buttons."
    },
    "color-text-button-primary-hover": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$description": "The hover text color of primary buttons."
    },
    "color-text-calendar-date-selected": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The text color of selected dates in the calendar."
    },
    "color-text-counter": {
      "$value": {
        "light": "#656871",
        "dark": "#a4a4ad"
      },
      "$description": "The default color for counters. For example: counters in table headers"
    },
    "color-text-dropdown-item-default": {
      "$value": {
        "light": "#0f141a",
        "dark": "#dedee3"
      },
      "$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": "#b4b4bb",
        "dark": "#656871"
      },
      "$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": "#006ce0",
        "dark": "#75cfff"
      },
      "$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": "#0f141a",
        "dark": "#ebebf0"
      },
      "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
    },
    "color-text-dropdown-item-secondary": {
      "$value": {
        "light": "#656871",
        "dark": "#a4a4ad"
      },
      "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
    },
    "color-text-empty": {
      "$value": {
        "light": "#656871",
        "dark": "#dedee3"
      },
      "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
    },
    "color-text-expandable-section-default": {
      "$value": {
        "light": "#0f141a",
        "dark": "#dedee3"
      },
      "$description": "The default color of the expandable section header text."
    },
    "color-text-expandable-section-hover": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The color of the expandable section header text in hover state."
    },
    "color-text-expandable-section-navigation-icon-default": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "The default color of the expand icon in the navigation variant of the expandable section."
    },
    "color-text-form-default": {
      "$value": {
        "light": "#0f141a",
        "dark": "#dedee3"
      },
      "$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": "#656871",
        "dark": "#a4a4ad"
      },
      "$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": "#424650",
        "dark": "#c6c6cd"
      },
      "$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": "#0f141a",
        "dark": "#ebebf0"
      },
      "$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": "#424650",
        "dark": "#a4a4ad"
      },
      "$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": "#ebebf0",
        "dark": "#ebebf0"
      },
      "$description": "The color of the home header's text, displayed on the Service's home page."
    },
    "color-text-home-header-secondary": {
      "$value": {
        "light": "#c6c6cd",
        "dark": "#c6c6cd"
      },
      "$description": "The color of the home header's secondary text, displayed on the Service's home page."
    },
    "color-text-icon-subtle": {
      "$value": {
        "light": "#656871",
        "dark": "#b4b4bb"
      },
      "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
    },
    "color-text-input-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$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": "#656871",
        "dark": "#a4a4ad"
      },
      "$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": "#0f141a",
        "dark": "#f9f9fa"
      },
      "$description": "The color of clickable elements in their active state. For example: tabs and icons."
    },
    "color-text-interactive-default": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
    },
    "color-text-interactive-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
    },
    "color-text-interactive-hover": {
      "$value": {
        "light": "#0f141a",
        "dark": "#f9f9fa"
      },
      "$description": "The color of clickable elements on hover. For example: icons on hover."
    },
    "color-text-toggle-button-icon-pressed": {
      "$value": {
        "light": "#0f141a",
        "dark": "#f9f9fa"
      },
      "$description": "The pressed text color of icon toggle buttons."
    },
    "color-text-interactive-inverted-default": {
      "$value": {
        "light": "#dedee3",
        "dark": "#dedee3"
      },
      "$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": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
    },
    "color-text-label": {
      "$value": {
        "light": "#0f141a",
        "dark": "#dedee3"
      },
      "$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": "#ffffff",
        "dark": "#ffffff"
      },
      "$description": "The default color of the app layout toggle."
    },
    "color-text-layout-toggle-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The color of the app layout toggle button when it's active."
    },
    "color-text-layout-toggle-hover": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The color of the app layout toggle button on hover."
    },
    "color-text-layout-toggle-selected": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$description": "The color of the app layout toggle button when it's selected."
    },
    "color-text-link-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$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": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
    },
    "color-text-link-decoration-default": {
      "$value": {
        "light": "currentColor",
        "dark": "currentColor"
      },
      "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
    },
    "color-text-link-decoration-hover": {
      "$value": {
        "light": "currentColor",
        "dark": "currentColor"
      },
      "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
    },
    "color-text-link-secondary-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
    },
    "color-text-link-secondary-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
    },
    "color-text-link-info-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default color for info links."
    },
    "color-text-link-info-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The hover color for info links."
    },
    "color-text-notification-default": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "Default text color for notifications. For example: the text on badges and flashes."
    },
    "color-text-notification-yellow": {
      "$value": {
        "light": "#0f141a",
        "dark": "#0f141a"
      },
      "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
    },
    "color-text-segment-active": {
      "$value": {
        "light": "#ffffff",
        "dark": "#0f141a"
      },
      "$description": "The text color of the active segment in a segmented control."
    },
    "color-text-segment-default": {
      "$value": {
        "light": "#424650",
        "dark": "#dedee3"
      },
      "$description": "The text color of inactive segments in a segmented control."
    },
    "color-text-segment-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The text color of inactive segments in a segmented control on hover."
    },
    "color-text-status-error": {
      "$value": {
        "light": "#db0000",
        "dark": "#ff7a7a"
      },
      "$description": "The color of error text and icons. For example: form field error text and error status indicators."
    },
    "color-text-status-inactive": {
      "$value": {
        "light": "#656871",
        "dark": "#a4a4ad"
      },
      "$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": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
    },
    "color-text-status-success": {
      "$value": {
        "light": "#00802f",
        "dark": "#2bb534"
      },
      "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
    },
    "color-text-status-warning": {
      "$value": {
        "light": "#855900",
        "dark": "#fbd332"
      },
      "$description": "The color of warning icons."
    },
    "color-text-top-navigation-title": {
      "$value": {
        "light": "#0f141a",
        "dark": "#f9f9fa"
      },
      "$description": "The color of the title in the top navigation."
    },
    "color-board-placeholder-active": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#656871"
      },
      "$description": "The color of board placeholder in active state."
    },
    "color-board-placeholder-hover": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#006ce0"
      },
      "$description": "The color of board placeholder in hovered state."
    },
    "color-drag-placeholder-active": {
      "$value": {
        "light": "#ebebf0",
        "dark": "#656871"
      },
      "$description": "The color of drag placeholder in active state."
    },
    "color-drag-placeholder-hover": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#006ce0"
      },
      "$description": "The color of drag placeholder in hovered state."
    },
    "color-dropzone-background-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The default color of file upload dropzone background."
    },
    "color-dropzone-background-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#001129"
      },
      "$description": "The color of file upload dropzone background in hovered state."
    },
    "color-dropzone-text-default": {
      "$value": {
        "light": "#424650",
        "dark": "#c6c6cd"
      },
      "$description": "The default color of file upload dropzone text."
    },
    "color-dropzone-text-hover": {
      "$value": {
        "light": "#424650",
        "dark": "#c6c6cd"
      },
      "$description": "The color of file upload dropzone text in hovered state."
    },
    "color-dropzone-border-default": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#656871"
      },
      "$description": "The default color of file upload dropzone border."
    },
    "color-dropzone-border-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The color of file upload dropzone border in hovered state."
    },
    "color-tree-view-connector-line": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#dedee3"
      },
      "$description": "The color of the tree view connector lines."
    },
    "color-background-action-card-default": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The default background color of action cards."
    },
    "color-background-action-card-hover": {
      "$value": {
        "light": "#f0fbff",
        "dark": "#1b232d"
      },
      "$description": "The background color of action cards in hover state."
    },
    "color-background-action-card-active": {
      "$value": {
        "light": "#d1f1ff",
        "dark": "#333843"
      },
      "$description": "The background color of action cards in active state."
    },
    "color-border-action-card-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default border color of action cards."
    },
    "color-border-action-card-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of action cards in hover state."
    },
    "color-border-action-card-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The border color of action cards in active state."
    },
    "color-border-action-card-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The border color of action cards in disabled state."
    },
    "color-background-action-card-disabled": {
      "$value": {
        "light": "#ffffff",
        "dark": "#161d26"
      },
      "$description": "The background color of action cards in disabled state."
    },
    "color-text-action-card-disabled": {
      "$value": {
        "light": "#8c8c94",
        "dark": "#8c8c94"
      },
      "$description": "The text color of action cards in disabled state."
    },
    "color-text-action-card-icon-default": {
      "$value": {
        "light": "#006ce0",
        "dark": "#42b4ff"
      },
      "$description": "The default color of icons in action cards."
    },
    "color-text-action-card-icon-hover": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The color of icons in action cards in hover state."
    },
    "color-text-action-card-icon-active": {
      "$value": {
        "light": "#002b66",
        "dark": "#75cfff"
      },
      "$description": "The color of icons in action cards in active state."
    },
    "color-text-action-card-icon-disabled": {
      "$value": {
        "light": "#b4b4bb",
        "dark": "#656871"
      },
      "$description": "The color of icons in action cards in disabled state."
    },
    "color-background-badge-green": {
      "$value": {
        "light": "#00802f",
        "dark": "#00802f"
      },
      "$description": "The background color of green badges."
    },
    "color-background-badge-blue": {
      "$value": {
        "light": "#006ce0",
        "dark": "#006ce0"
      },
      "$description": "The background color of blue badges."
    },
    "color-background-badge-red": {
      "$value": {
        "light": "#db0000",
        "dark": "#db0000"
      },
      "$description": "The background color of red badges."
    },
    "color-background-badge-yellow": {
      "$value": {
        "light": "#ffe347",
        "dark": "#ffe347"
      },
      "$description": "The background color of yellow badges."
    },
    "color-background-badge-grey": {
      "$value": {
        "light": "#424650",
        "dark": "#656871"
      },
      "$description": "The background color of grey badges."
    },
    "color-border-badge": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The default border color of badges."
    },
    "color-border-badge-grey": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of grey badges."
    },
    "color-border-badge-green": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of green badges."
    },
    "color-border-badge-blue": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of blue badges."
    },
    "color-border-badge-red": {
      "$value": {
        "light": "transparent",
        "dark": "transparent"
      },
      "$description": "The border color of red badges."
    },
    "color-text-badge-grey": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The text color of grey badges."
    },
    "color-text-badge-green": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The text color of green badges."
    },
    "color-text-badge-blue": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The text color of blue badges."
    },
    "color-text-badge-red": {
      "$value": {
        "light": "#f9f9fa",
        "dark": "#f9f9fa"
      },
      "$description": "The text color of red badges."
    },
    "color-background-code-view": {
      "$value": {
        "light": "#f8f8f8",
        "dark": "#282c34"
      },
      "$description": "The background color of the code view component."
    },
    "font-family-base": {
      "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
      "$description": "The default font family that will be applied globally to the product interface."
    },
    "font-family-display": {
      "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
      "$description": "The font family for display text. Defaults to the base font family."
    },
    "font-family-heading": {
      "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
      "$description": "The font family for headings and component headers. Defaults to the base font family."
    },
    "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": "42px",
      "$description": "The default font size for large display text."
    },
    "font-size-display-xl": {
      "$value": "64px",
      "$description": "The default font size for extra large display text."
    },
    "font-size-heading-l": {
      "$value": "20px",
      "$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-xl": {
      "$value": "24px",
      "$description": "The default font size for h1s."
    },
    "font-size-heading-xs": {
      "$value": "14px",
      "$description": "The default font size for h5s."
    },
    "font-size-tabs": {
      "$value": "16px",
      "$description": "The default font size for tabs."
    },
    "font-weight-alert-header": {
      "$value": "700",
      "$description": "The default font weight for alert header text."
    },
    "font-weight-bold": {
      "$value": "700",
      "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
    },
    "font-weight-button": {
      "$value": "700",
      "$description": "The default font weight for button text."
    },
    "font-weight-display-l": {
      "$value": "700",
      "$description": "The default font weight for large display text."
    },
    "font-weight-display-xl": {
      "$value": "400",
      "$description": "The default font weight for extra large display text."
    },
    "font-weight-flashbar-header": {
      "$value": "700",
      "$description": "The default font weight for flashbar header text."
    },
    "font-weight-heading-l": {
      "$value": "700",
      "$description": "The default font weight for h2s."
    },
    "font-weight-heading-m": {
      "$value": "700",
      "$description": "The default font weight for h3s."
    },
    "font-weight-heading-s": {
      "$value": "700",
      "$description": "The default font weight for h4s."
    },
    "font-weight-heading-xl": {
      "$value": "700",
      "$description": "The default font weight for h1s."
    },
    "font-weight-heading-xs": {
      "$value": "700",
      "$description": "The default font weight for h5s."
    },
    "font-weight-heavy": {
      "$value": "700",
      "$description": "The default heavy font weight."
    },
    "font-weight-lighter": {
      "$value": "300",
      "$description": "The default lighter font weight."
    },
    "font-weight-normal": {
      "$value": "400",
      "$description": "The default normal font weight."
    },
    "font-weight-tabs": {
      "$value": "700",
      "$description": "The default font weight for tabs."
    },
    "font-weight-tabs-disabled": {
      "$value": "700",
      "$description": "The default font weight for disabled tabs."
    },
    "letter-spacing-display-l": {
      "$value": "-0.03em",
      "$description": "The default letter spacing for large display text."
    },
    "letter-spacing-display-xl": {
      "$value": "-0.03em",
      "$description": "The default letter spacing for extra large display text."
    },
    "letter-spacing-heading-l": {
      "$value": "-0.015em",
      "$description": "The default letter spacing for h2s."
    },
    "letter-spacing-heading-m": {
      "$value": "-0.010em",
      "$description": "The default letter spacing for h3s."
    },
    "letter-spacing-heading-s": {
      "$value": "-0.005em",
      "$description": "The default letter spacing for h4s."
    },
    "letter-spacing-heading-xl": {
      "$value": "-0.02em",
      "$description": "The default letter spacing for h1s."
    },
    "letter-spacing-heading-xs": {
      "$value": "normal",
      "$description": "The default letter spacing for h5s."
    },
    "line-height-body-m": {
      "$value": "20px",
      "$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": "48px",
      "$description": "The default line height for large display text."
    },
    "line-height-display-xl": {
      "$value": "72px",
      "$description": "The default line height for extra large display text."
    },
    "line-height-heading-l": {
      "$value": "24px",
      "$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-xl": {
      "$value": "30px",
      "$description": "The default line height for h1s."
    },
    "line-height-heading-xs": {
      "$value": "18px",
      "$description": "The default line height for h5s."
    },
    "line-height-tabs": {
      "$value": "20px",
      "$description": "The default line height for tabs."
    },
    "border-radius-action-card-default": {
      "$value": "16px",
      "$description": "The border radius of default action cards."
    },
    "border-radius-action-card-embedded": {
      "$value": "8px",
      "$description": "The border radius of embedded action cards."
    },
    "border-radius-alert": {
      "$value": "12px",
      "$description": "The border radius of alerts."
    },
    "border-radius-badge": {
      "$value": "4px",
      "$description": "The border radius of badges."
    },
    "border-radius-button": {
      "$value": "20px",
      "$description": "The border radius of buttons and segmented control's segments."
    },
    "border-radius-calendar-day-focus-ring": {
      "$value": "3px",
      "$description": "The border radius of the focused day in date picker and date range picker."
    },
    "border-radius-card-default": {
      "$value": "16px",
      "$description": "The border radius of default cards."
    },
    "border-radius-card-embedded": {
      "$value": "8px",
      "$description": "The border radius of embedded cards."
    },
    "border-radius-chat-bubble": {
      "$value": "8px",
      "$description": "The border radius of chat bubbles."
    },
    "border-radius-support-prompt": {
      "$value": "8px",
      "$description": "The border radius of support prompts."
    },
    "border-radius-container": {
      "$value": "16px",
      "$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": "4px",
      "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
    },
    "border-radius-control-default-focus-ring": {
      "$value": "4px",
      "$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": "8px",
      "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
    },
    "border-radius-dropzone": {
      "$value": "12px",
      "$description": "The border radius of file upload dropzone."
    },
    "border-radius-flashbar": {
      "$value": "12px",
      "$description": "The border radius of flash messages in flashbars."
    },
    "border-radius-input": {
      "$value": "8px",
      "$description": "The border radius of form controls. For example: input, select."
    },
    "border-radius-item": {
      "$value": "8px",
      "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
    },
    "border-radius-popover": {
      "$value": "8px",
      "$description": "The border radius of popovers."
    },
    "border-radius-tabs-focus-ring": {
      "$value": "20px",
      "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
    },
    "border-radius-tiles": {
      "$value": "8px",
      "$description": "The border radius of tiles."
    },
    "border-radius-token": {
      "$value": "8px",
      "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
    },
    "border-radius-token-inline": {
      "$value": "4px",
      "$description": "The border radius of inline tokens. For example: multiselect component."
    },
    "border-radius-tutorial-panel-item": {
      "$value": "8px",
      "$description": "The border radius of tutorials inside a tutorial panel."
    },
    "border-width-action-card-active": {
      "$value": "1px",
      "$description": "The border width of action cards in active state."
    },
    "border-width-action-card-default": {
      "$value": "1px",
      "$description": "The border width of action cards in default state."
    },
    "border-width-action-card-disabled": {
      "$value": "1px",
      "$description": "The border width of action cards in disabled state."
    },
    "border-width-action-card-hover": {
      "$value": "1px",
      "$description": "The border width of action cards in hover state."
    },
    "border-width-alert": {
      "$value": "2px",
      "$description": "The border width of alerts."
    },
    "border-width-alert-block-end": {
      "$value": "2px",
      "$description": "The block-end border width of alerts."
    },
    "border-width-alert-block-start": {
      "$value": "2px",
      "$description": "The block-start border width of alerts."
    },
    "border-width-alert-inline-end": {
      "$value": "2px",
      "$description": "The inline-end border width of alerts."
    },
    "border-width-alert-inline-start": {
      "$value": "2px",
      "$description": "The inline-start border width of alerts."
    },
    "border-width-flashbar-inline-start": {
      "$value": "0px",
      "$description": "The inline-start border width of flash messages in flashbars."
    },
    "border-width-button": {
      "$value": "2px",
      "$description": "The border width of buttons."
    },
    "border-width-card": {
      "$value": "1px",
      "$description": "The border width of a card."
    },
    "border-width-card-selected": {
      "$value": "2px",
      "$description": "The border width of a selected card."
    },
    "border-width-dropdown": {
      "$value": "2px",
      "$description": "The border width of dropdowns."
    },
    "border-width-field": {
      "$value": "1px",
      "$description": "The border width of form fields."
    },
    "border-width-icon-big": {
      "$value": "3px",
      "$description": "The visual stroke width of big icons."
    },
    "border-width-icon-large": {
      "$value": "4px",
      "$description": "The visual stroke width of large icons."
    },
    "border-width-icon-medium": {
      "$value": "2px",
      "$description": "The visual stroke width of medium icons."
    },
    "border-width-icon-normal": {
      "$value": "2px",
      "$description": "The visual stroke width of normal icons."
    },
    "border-width-icon-small": {
      "$value": "2px",
      "$description": "The visual stroke width of small icons."
    },
    "border-width-icon-x-small": {
      "$value": "1.5px",
      "$description": "The visual stroke width of extra small icons."
    },
    "border-width-item-selected": {
      "$value": "2px",
      "$description": "The border width of selected items, like table rows."
    },
    "border-width-layout-side-navigation": {
      "$value": "1px",
      "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
    },
    "border-width-badge": {
      "$value": "0px",
      "$description": "The border width of badges."
    },
    "border-width-popover": {
      "$value": "2px",
      "$description": "The border width of popovers."
    },
    "border-width-token": {
      "$value": "2px",
      "$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": "cubic-bezier(0, 0, 0, 1)",
        "disabled": "cubic-bezier(0, 0, 0, 1)"
      },
      "$description": "The easing curve for providing responsive yet smooth visual feedback."
    },
    "motion-easing-sticky": {
      "$value": {
        "default": "cubic-bezier(1, 0, 0.83, 1)",
        "disabled": "cubic-bezier(1, 0, 0.83, 1)"
      },
      "$description": "The easing curve for making an element sticky to a certain state."
    },
    "motion-easing-expressive": {
      "$value": {
        "default": "cubic-bezier(0.84, 0, 0.16, 1)",
        "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
      },
      "$description": "The easing curve for drawing a user's attention in an expressive way."
    },
    "motion-duration-responsive": {
      "$value": {
        "default": "115ms",
        "disabled": "0ms"
      },
      "$description": "The duration for making the motion feel quick and responsive."
    },
    "motion-duration-expressive": {
      "$value": {
        "default": "165ms",
        "disabled": "0ms"
      },
      "$description": "The duration for accommodating the motion with more expressiveness."
    },
    "motion-duration-complex": {
      "$value": {
        "default": "250ms",
        "disabled": "0ms"
      },
      "$description": "The duration for drawing more attention or accommodating for more complexity."
    },
    "motion-duration-tooltip-enter": {
      "$value": {
        "default": "115ms",
        "disabled": "0ms"
      },
      "$description": "The duration for the tooltip enter transition."
    },
    "motion-easing-tooltip-enter": {
      "$value": {
        "default": "cubic-bezier(0, 0, 0, 1)",
        "disabled": "cubic-bezier(0, 0, 0, 1)"
      },
      "$description": "The easing curve for the tooltip enter transition."
    },
    "motion-keyframes-fade-in": {
      "$value": {
        "default": "awsui-fade-in-jiml2r",
        "disabled": "awsui-fade-in-jiml2r"
      },
      "$description": "The CSS keyframes for showing an element."
    },
    "motion-keyframes-fade-out": {
      "$value": {
        "default": "awsui-fade-out-au27m5",
        "disabled": "awsui-fade-out-au27m5"
      },
      "$description": "The CSS keyframes for hiding an element."
    },
    "motion-keyframes-status-icon-error": {
      "$value": {
        "default": "awsui-status-icon-error-mjjk3s",
        "disabled": "awsui-status-icon-error-mjjk3s"
      },
      "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
    },
    "motion-keyframes-scale-popup": {
      "$value": {
        "default": "awsui-scale-popup-2m9987",
        "disabled": "awsui-scale-popup-2m9987"
      },
      "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
    },
    "size-vertical-input": {
      "$value": {
        "comfortable": "32px",
        "compact": "28px"
      },
      "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
    },
    "size-side-navigation-item-height": {
      "$value": {
        "comfortable": "28px",
        "compact": "24px"
      },
      "$description": "The minimum height of side navigation items."
    },
    "size-side-navigation-item-collapsed": {
      "$value": {
        "comfortable": "30px",
        "compact": "28px"
      },
      "$description": "The square size of collapsed side navigation items."
    },
    "size-side-navigation-collapsed-width": {
      "$value": {
        "comfortable": "52px",
        "compact": "52px"
      },
      "$description": "The default width of the collapsed side navigation rail."
    },
    "space-alert-vertical": {
      "$value": {
        "comfortable": "8px",
        "compact": "4px"
      },
      "$description": "The vertical padding inside alert components."
    },
    "space-button-horizontal": {
      "$value": {
        "comfortable": "20px",
        "compact": "16px"
      },
      "$description": "The horizontal padding inside buttons."
    },
    "space-button-vertical": {
      "$value": {
        "comfortable": "4px",
        "compact": "2px"
      },
      "$description": "The vertical padding inside buttons."
    },
    "space-token-vertical": {
      "$value": {
        "comfortable": "4px",
        "compact": "2px"
      },
      "$description": "The vertical padding inside tokens."
    },
    "space-field-vertical": {
      "$value": {
        "comfortable": "5px",
        "compact": "3px"
      },
      "$description": "The vertical padding inside control components."
    },
    "space-card-horizontal-default": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The default horizontal padding inside a card."
    },
    "space-card-horizontal-embedded": {
      "$value": {
        "comfortable": "12px",
        "compact": "10px"
      },
      "$description": "The horizontal padding inside embedded a card."
    },
    "space-card-vertical-default": {
      "$value": {
        "comfortable": "16px",
        "compact": "12px"
      },
      "$description": "The default vertical padding inside a card."
    },
    "space-card-vertical-embedded": {
      "$value": {
        "comfortable": "10px",
        "compact": "8px"
      },
      "$description": "The vertical padding inside embedded a card."
    },
    "space-container-horizontal": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The horizontal padding inside a container."
    },
    "space-field-horizontal": {
      "$value": {
        "comfortable": "12px",
        "compact": "12px"
      },
      "$description": "The horizontal padding inside field components."
    },
    "space-tabs-vertical": {
      "$value": {
        "comfortable": "4px",
        "compact": "2px"
      },
      "$description": "The vertical padding inside tabs."
    },
    "space-tree-view-indentation": {
      "$value": {
        "comfortable": "24px",
        "compact": "24px"
      },
      "$description": "The indentation of tree view items."
    },
    "space-side-navigation-item-default-gap": {
      "$value": {
        "comfortable": "0px",
        "compact": "0px"
      },
      "$description": "The vertical gap between side navigation items when no item has an icon."
    },
    "space-side-navigation-item-icon-gap": {
      "$value": {
        "comfortable": "4px",
        "compact": "4px"
      },
      "$description": "The vertical gap between side navigation items when at least one item has an icon."
    },
    "space-action-card-horizontal-default": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The default horizontal padding inside an action card."
    },
    "space-action-card-horizontal-embedded": {
      "$value": {
        "comfortable": "12px",
        "compact": "10px"
      },
      "$description": "The horizontal padding inside an embedded action card."
    },
    "space-action-card-vertical-default": {
      "$value": {
        "comfortable": "16px",
        "compact": "12px"
      },
      "$description": "The default vertical padding inside an action card."
    },
    "space-action-card-vertical-embedded": {
      "$value": {
        "comfortable": "10px",
        "compact": "8px"
      },
      "$description": "The vertical padding inside an embedded action card."
    },
    "space-option-padding-vertical": {
      "$value": {
        "comfortable": "4px",
        "compact": "4px"
      },
      "$description": "The vertical padding inside dropdown option items."
    },
    "space-option-padding-horizontal": {
      "$value": {
        "comfortable": "20px",
        "compact": "20px"
      },
      "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
    },
    "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: left indentation of grouped options in a select."
    },
    "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-card": {
      "$value": {
        "light": "none",
        "dark": "none"
      },
      "$description": "The shadow of a card."
    },
    "shadow-container-active": {
      "$value": {
        "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
        "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
      },
      "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f6f6f9",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#333843"
          },
          "$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": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#333843"
          },
          "$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": "#f3f3f7",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ebebf0",
            "dark": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(35, 43, 55, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fff5f5",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#effff1",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#b8e7ff",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#f6f6f9",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$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": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$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": "#161d26"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#656871",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#656871",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$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": "#424650",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#656871",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#f8f8f8",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "28px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "16px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "2px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#333843",
            "dark": "#333843"
          },
          "$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": "#131920",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#1b232d",
            "dark": "#1b232d"
          },
          "$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": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(15, 20, 26, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#1f0000",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#001401",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#002b66",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$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": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#282c34",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "header": {
      "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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$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": "#1b232d",
            "dark": "#1b232d"
          },
          "$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": "#333843",
            "dark": "#333843"
          },
          "$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": "#131920",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#1b232d",
            "dark": "#1b232d"
          },
          "$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": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(15, 20, 26, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#1f0000",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#001401",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#002b66",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$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": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#282c34",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "app-layout-toolbar": {
      "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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f6f6f9",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#333843"
          },
          "$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": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#333843"
          },
          "$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": "#f3f3f7",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ebebf0",
            "dark": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#fcfcfd",
            "dark": "#131920"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(35, 43, 55, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fff5f5",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#effff1",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#b8e7ff",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#f6f6f9",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$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": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$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": "#161d26"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#656871",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#656871",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$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": "#424650",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#656871",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#f8f8f8",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.2)",
            "dark": "rgba(0, 7, 22, 0.2)"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.15)",
            "dark": "rgba(0, 7, 22, 0.15)"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.15)",
            "dark": "rgba(0, 7, 22, 0.15)"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f6f6f9",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#333843"
          },
          "$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": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#333843"
          },
          "$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": "#f3f3f7",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ebebf0",
            "dark": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(35, 43, 55, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "rgba(255, 255, 255, 0.25)",
            "dark": "rgba(255, 255, 255, 0.25)"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.15)",
            "dark": "rgba(0, 7, 22, 0.15)"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fff5f5",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#effff1",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#b8e7ff",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#f6f6f9",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$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": "#161d26"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#656871",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#656871",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#656871",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#f8f8f8",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.1)",
            "dark": "rgba(0, 7, 22, 0.1)"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(0, 7, 22, 0.05)"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(0, 7, 22, 0.05)"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f6f6f9",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#333843"
          },
          "$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": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#333843"
          },
          "$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": "#f3f3f7",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ebebf0",
            "dark": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(35, 43, 55, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.1)",
            "dark": "rgba(0, 0, 0, 0.1)"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(0, 7, 22, 0.05)"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fff5f5",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#effff1",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#b8e7ff",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#f6f6f9",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$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": "#161d26"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#656871",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#656871",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#656871",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#f8f8f8",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.1)",
            "dark": "rgba(255, 255, 255, 0.15)"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#f6f6f9",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#333843"
          },
          "$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": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#333843"
          },
          "$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": "#f3f3f7",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$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": "#ebebf0",
            "dark": "#1b232d"
          },
          "$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": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(35, 43, 55, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "rgba(0, 7, 22, 0.05)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#004a9e",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#fff5f5",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#effff1",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#b8e7ff",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#f6f6f9",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#ebebf0",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$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": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#006ce0",
            "dark": "#f9f9fa"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The border color of an item in success state. For example: success alerts."
        },
        "color-border-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The border color of an item in warning state. For example: warning alerts."
        },
        "color-border-dialog": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$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": "#161d26"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#c6c6cd"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#656871",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#656871",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#424650",
            "dark": "#c6c6cd"
          },
          "$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": "#0f141a",
            "dark": "#ebebf0"
          },
          "$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": "#424650",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#656871",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#0f141a",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$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": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#424650",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#ffffff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#656871",
            "dark": "#a4a4ad"
          },
          "$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": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color of success text and icons. For example: success status indicators and success alert icon."
        },
        "color-text-status-warning": {
          "$value": {
            "light": "#855900",
            "dark": "#fbd332"
          },
          "$description": "The color of warning icons."
        },
        "color-text-top-navigation-title": {
          "$value": {
            "light": "#0f141a",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#ebebf0",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#001129"
          },
          "$description": "The color of file upload dropzone background in hovered state."
        },
        "color-dropzone-text-default": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The default color of file upload dropzone text."
        },
        "color-dropzone-text-hover": {
          "$value": {
            "light": "#424650",
            "dark": "#c6c6cd"
          },
          "$description": "The color of file upload dropzone text in hovered state."
        },
        "color-dropzone-border-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#f0fbff",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#d1f1ff",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#ffffff",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#006ce0",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#002b66",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#424650",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#f8f8f8",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    },
    "alert-header": {
      "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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$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": "#db0000",
            "dark": "#ff7a7a"
          },
          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit"
        },
        "color-charts-threshold-positive": {
          "$value": {
            "light": "#00802f",
            "dark": "#2bb534"
          },
          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate"
        },
        "color-charts-threshold-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#75cfff"
          },
          "$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": "#656871",
            "dark": "#a4a4ad"
          },
          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline"
        },
        "color-charts-line-grid": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the grid lines in a chart."
        },
        "color-charts-line-tick": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$description": "Color of the tick marks in a chart."
        },
        "color-charts-line-axis": {
          "$value": {
            "light": "#dedee3",
            "dark": "#424650"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#f9f9fa",
            "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": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "Text color in a notification to represent a medium-level of severity. For example: \"Sev-3\""
        },
        "color-text-notification-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$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-border-badge-severity-critical": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a critical severity level."
        },
        "color-border-badge-severity-high": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a high severity level."
        },
        "color-border-badge-severity-medium": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a medium severity level."
        },
        "color-border-badge-severity-low": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a low severity level."
        },
        "color-border-badge-severity-neutral": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of badges representing a neutral severity level."
        },
        "color-text-badge-severity-critical": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#000000"
          },
          "$description": "The text color of badges representing a critical severity level."
        },
        "color-text-badge-severity-high": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a high severity level."
        },
        "color-text-badge-severity-medium": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a medium severity level."
        },
        "color-text-badge-severity-low": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of badges representing a low severity level."
        },
        "color-text-badge-severity-neutral": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of badges representing a neutral severity level."
        },
        "color-background-badge-icon": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The background color of the badge indicator on navigation and panel buttons."
        },
        "color-background-button-link-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of link buttons in active state."
        },
        "color-background-button-link-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in default state."
        },
        "color-background-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of link buttons in disabled state."
        },
        "color-background-button-link-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of link buttons in hover state."
        },
        "color-background-button-normal-active": {
          "$value": {
            "light": "rgba(255, 255, 255, 0.15)",
            "dark": "rgba(255, 255, 255, 0.15)"
          },
          "$description": "The background color of normal buttons in active state."
        },
        "color-background-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal buttons."
        },
        "color-background-button-normal-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of normal buttons in disabled state."
        },
        "color-background-button-normal-hover": {
          "$value": {
            "light": "rgba(255, 255, 255, 0.1)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of normal buttons in hover state."
        },
        "color-background-toggle-button-normal-pressed": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of normal toggle buttons in pressed state."
        },
        "color-background-toggle-button-normal-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default background color of normal toggle buttons."
        },
        "color-background-toggle-button-normal-hover": {
          "$value": {
            "light": "rgba(255, 255, 255, 0.1)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of normal toggle buttons in hover state."
        },
        "color-background-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of primary buttons in active state."
        },
        "color-background-button-primary-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default background color of primary buttons."
        },
        "color-background-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The background color of primary buttons in disabled state."
        },
        "color-background-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The background color of primary buttons in hover state."
        },
        "color-background-cell-shaded": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of shaded table cells."
        },
        "color-background-card": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of a card."
        },
        "color-background-container-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections."
        },
        "color-background-control-checked": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color."
        },
        "color-background-control-disabled": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$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": "#1b232d",
            "dark": "#1b232d"
          },
          "$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": "#333843",
            "dark": "#333843"
          },
          "$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": "#131920",
            "dark": "#131920"
          },
          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-dropdown-item-selected": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of selected dropdown items. For example: background of selected items in select, multiselect, autosuggest, and datepicker dropdowns."
        },
        "color-background-home-header": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of the home header, displayed on the Service's home page."
        },
        "color-background-input-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#1b232d",
            "dark": "#1b232d"
          },
          "$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": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds."
        },
        "color-background-side-navigation-item-active": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of an active (highlighted) side navigation item."
        },
        "color-background-layout-main": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the main content area on a page. For example: content area in app layout."
        },
        "color-background-backdrop": {
          "$value": {
            "light": "rgba(15, 20, 26, 0.7)",
            "dark": "rgba(15, 20, 26, 0.7)"
          },
          "$description": "The background color of the backdrop shown behind overlay surfaces such as modals and drawers."
        },
        "color-background-layout-panel": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the selected (active) drawer panel in the app layout. Use this token to theme the background of the open drawer."
        },
        "color-background-layout-panel-content": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of app layout panel content area. For example: The side navigation and tools panel content background color."
        },
        "color-background-layout-toolbar": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons."
        },
        "color-background-layout-toggle-active": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The background color of the app layout toggle button when it's active."
        },
        "color-background-layout-toggle-default": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The default background color of the app layout toggle button."
        },
        "color-background-layout-toggle-hover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of the app layout toggle button on hover."
        },
        "color-background-layout-toggle-selected-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the app layout toggle button when it's selected and active."
        },
        "color-background-layout-toggle-selected-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the app layout toggle button when it's selected."
        },
        "color-background-layout-toggle-selected-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the app layout toggle button on hover when it's selected."
        },
        "color-background-notification-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "Background color for blue notifications. For example: blue badges and info flash messages."
        },
        "color-background-notification-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "Background color for green notifications. For example: green badges and success flash messages."
        },
        "color-background-notification-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "Background color for grey notifications. For example: grey badges."
        },
        "color-background-notification-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$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-flashbar-success": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of success flash messages."
        },
        "color-background-flashbar-error": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of error flash messages."
        },
        "color-background-flashbar-info": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of info and in-progress flash messages."
        },
        "color-background-flashbar-warning": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of warning flash messages."
        },
        "color-background-popover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "Background color for the popover container."
        },
        "color-background-progress-bar-value-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the progress bar value."
        },
        "color-background-progress-bar-default": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The default background color of the progress bar."
        },
        "color-background-segment-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The background color of the active segment in a segmented control."
        },
        "color-background-segment-default": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The background color of inactive segments in a segmented control."
        },
        "color-background-segment-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of disabled segments in a segmented control."
        },
        "color-background-segment-hover": {
          "$value": {
            "light": "rgba(255, 255, 255, 0.1)",
            "dark": "rgba(255, 255, 255, 0.1)"
          },
          "$description": "The background color of inactive segments in a segmented control on hover."
        },
        "color-background-segment-wrapper": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of segmented control wrapper."
        },
        "color-background-slider-range-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider range."
        },
        "color-background-slider-range-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider range in active state."
        },
        "color-background-slider-handle-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default background color of the slider handle."
        },
        "color-background-slider-handle-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The background color of the slider handle in active state."
        },
        "color-background-slider-track-default": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The default background color of the slider track."
        },
        "color-background-status-error": {
          "$value": {
            "light": "#1f0000",
            "dark": "#1f0000"
          },
          "$description": "The background color of an item in error state. For example: error alerts."
        },
        "color-background-status-info": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of an informational item. For example: information alerts."
        },
        "color-background-dialog": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$description": "The background color of the feedback/input dialogue box."
        },
        "color-background-status-success": {
          "$value": {
            "light": "#001401",
            "dark": "#001401"
          },
          "$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-tiles-disabled": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of disabled tiles."
        },
        "color-background-toggle-checked-disabled": {
          "$value": {
            "light": "#002b66",
            "dark": "#002b66"
          },
          "$description": "The background color of checked toggles in disabled state."
        },
        "color-background-toggle-default": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default background color of the toggle track in its unchecked 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": "#424650",
            "dark": "#424650"
          },
          "$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": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The background color of `incoming` chat bubble."
        },
        "color-text-chat-bubble-outgoing": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `outgoing` chat bubble."
        },
        "color-text-chat-bubble-incoming": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "Text color of `incoming` chat bubble."
        },
        "color-border-button-link-disabled": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of link buttons in disabled state."
        },
        "color-border-button-normal-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in active state."
        },
        "color-border-button-normal-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The border color of normal buttons."
        },
        "color-border-toggle-button-normal-pressed": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of normal toggle buttons in pressed state."
        },
        "color-border-toggle-button-normal-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default border color of normal toggle buttons."
        },
        "color-border-toggle-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal toggle buttons in hover state."
        },
        "color-border-button-normal-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of normal buttons in disabled state."
        },
        "color-text-button-normal-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of normal buttons in disabled state."
        },
        "color-border-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of normal buttons in hover state."
        },
        "color-text-button-icon-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The color of icon buttons in disabled state."
        },
        "color-border-button-primary-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of primary buttons in active state."
        },
        "color-border-button-primary-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The border color of primary buttons."
        },
        "color-border-button-primary-disabled": {
          "$value": {
            "light": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color of primary buttons in disabled state."
        },
        "color-border-button-primary-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The border color of primary buttons in hover state."
        },
        "color-text-button-primary-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of primary buttons in disabled state."
        },
        "color-item-selected": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items."
        },
        "color-text-side-navigation-item-active": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The text color of an active (highlighted) side navigation item."
        },
        "color-border-card": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The border color of a card."
        },
        "color-border-container-top": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The default border color of form controls. For example: radio buttons and checkboxes."
        },
        "color-border-divider-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#232b37",
            "dark": "#232b37"
          },
          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences."
        },
        "color-border-dropdown-container": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-input-focused": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect."
        },
        "color-border-item-focused": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of focus states. For example: the focus ring around interactive elements."
        },
        "color-border-dropdown-item-focused": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders."
        },
        "color-border-layout-side-navigation": {
          "$value": {
            "light": "#424650",
            "dark": "#424650"
          },
          "$description": "The border color of the side navigation divider in the app layout."
        },
        "color-border-popover": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the popover."
        },
        "color-border-segment-active": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-disabled": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-divider": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of the dividers between segments in a segmented control."
        },
        "color-border-segment-hover": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "Deprecated - this token is no longer in use."
        },
        "color-border-segment-wrapper": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of the segmented control wrapper."
        },
        "color-border-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The border color of an item in error state. For example: error alerts."
        },
        "color-border-status-info": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of an informational item. For example: information alerts."
        },
        "color-border-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The border color of the feedback/input dialogue box."
        },
        "color-foreground-control-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$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": "#161d26",
            "dark": "#161d26"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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-shadow-toggle-handle": {
          "$value": {
            "light": "rgba(0, 0, 0, 0.25)",
            "dark": "rgba(0, 0, 0, 0.25)"
          },
          "$description": "The color of the drop shadow under the toggle handle."
        },
        "color-text-accent": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The accent text color used to guide a user. For example: the highlighted page in the side navigation, active tab text, selected day text color in date picker, and hover state in expandable section."
        },
        "color-text-body-default": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing."
        },
        "color-text-breadcrumb-icon": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color used for the icon delimiter between breadcrumb items."
        },
        "color-text-button-inline-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of inline button icons."
        },
        "color-text-button-inline-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of inline button icons in disabled state."
        },
        "color-text-button-inline-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of inline button icons in hover state."
        },
        "color-text-button-normal-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The pressed text color of normal toggle buttons."
        },
        "color-text-button-normal-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default text color of normal buttons."
        },
        "color-text-button-normal-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The hover text color of normal buttons."
        },
        "color-text-button-link-active": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in active state."
        },
        "color-text-button-link-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default text color of link buttons."
        },
        "color-text-button-link-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The text color of link buttons in disabled state."
        },
        "color-text-button-link-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of link buttons in hover state."
        },
        "color-text-button-primary-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The active text color of primary buttons."
        },
        "color-text-button-primary-default": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The default text color of primary buttons."
        },
        "color-text-button-primary-hover": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The hover text color of primary buttons."
        },
        "color-text-calendar-date-selected": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The text color of selected dates in the calendar."
        },
        "color-text-counter": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The default color for counters. For example: counters in table headers"
        },
        "color-text-dropdown-item-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The text color of hovered or selected dropdown items. For example: label text color of the item on hover in a select, multiselect, and autosuggest."
        },
        "color-text-dropdown-item-secondary": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$description": "The text color of secondary information in dropdown items. For example: descriptions and tags text color in a select, multiselect, and autosuggest."
        },
        "color-text-empty": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text."
        },
        "color-text-expandable-section-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expandable section header text."
        },
        "color-text-expandable-section-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The color of the expandable section header text in hover state."
        },
        "color-text-expandable-section-navigation-icon-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The default color of the expand icon in the navigation variant of the expandable section."
        },
        "color-text-form-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#ebebf0",
            "dark": "#ebebf0"
          },
          "$description": "The color of the home header's text, displayed on the Service's home page."
        },
        "color-text-home-header-secondary": {
          "$value": {
            "light": "#c6c6cd",
            "dark": "#c6c6cd"
          },
          "$description": "The color of the home header's secondary text, displayed on the Service's home page."
        },
        "color-text-icon-subtle": {
          "$value": {
            "light": "#b4b4bb",
            "dark": "#b4b4bb"
          },
          "$description": "The color of subtle icons. For example: secondary icons with lower visual emphasis."
        },
        "color-text-input-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$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": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements in their active state. For example: tabs and icons."
        },
        "color-text-interactive-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of clickable elements in their default state. For example: tabs, and icons."
        },
        "color-text-interactive-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons."
        },
        "color-text-interactive-hover": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of clickable elements on hover. For example: icons on hover."
        },
        "color-text-toggle-button-icon-pressed": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The pressed text color of icon toggle buttons."
        },
        "color-text-interactive-inverted-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar."
        },
        "color-text-label": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$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": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The default color of the app layout toggle."
        },
        "color-text-layout-toggle-active": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The color of the app layout toggle button when it's active."
        },
        "color-text-layout-toggle-hover": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of the app layout toggle button on hover."
        },
        "color-text-layout-toggle-selected": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The color of the app layout toggle button when it's selected."
        },
        "color-text-link-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$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": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links."
        },
        "color-text-link-decoration-default": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The default color of the text decoration (underline) of links. Defaults to the link text color."
        },
        "color-text-link-decoration-hover": {
          "$value": {
            "light": "currentColor",
            "dark": "currentColor"
          },
          "$description": "The hover color of the text decoration (underline) of links. Defaults to the link hover text color."
        },
        "color-text-link-secondary-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-secondary-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content."
        },
        "color-text-link-info-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color for info links."
        },
        "color-text-link-info-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The hover color for info links."
        },
        "color-text-notification-default": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "Default text color for notifications. For example: the text on badges and flashes."
        },
        "color-text-notification-yellow": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text and foreground color used on warning flash messages (yellow notification surface)."
        },
        "color-text-segment-active": {
          "$value": {
            "light": "#0f141a",
            "dark": "#0f141a"
          },
          "$description": "The text color of the active segment in a segmented control."
        },
        "color-text-segment-default": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The text color of inactive segments in a segmented control."
        },
        "color-text-segment-hover": {
          "$value": {
            "light": "#ffffff",
            "dark": "#ffffff"
          },
          "$description": "The text color of inactive segments in a segmented control on hover."
        },
        "color-text-status-error": {
          "$value": {
            "light": "#ff7a7a",
            "dark": "#ff7a7a"
          },
          "$description": "The color of error text and icons. For example: form field error text and error status indicators."
        },
        "color-text-status-inactive": {
          "$value": {
            "light": "#a4a4ad",
            "dark": "#a4a4ad"
          },
          "$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": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The color of info text and icons. For example: info status indicators and info alert icon."
        },
        "color-text-status-success": {
          "$value": {
            "light": "#2bb534",
            "dark": "#2bb534"
          },
          "$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": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The color of the title in the top navigation."
        },
        "color-board-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of board placeholder in active state."
        },
        "color-board-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of board placeholder in hovered state."
        },
        "color-drag-placeholder-active": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of drag placeholder in active state."
        },
        "color-drag-placeholder-hover": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The color of drag placeholder in hovered state."
        },
        "color-dropzone-background-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default color of file upload dropzone background."
        },
        "color-dropzone-background-hover": {
          "$value": {
            "light": "#001129",
            "dark": "#001129"
          },
          "$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": "#656871",
            "dark": "#656871"
          },
          "$description": "The default color of file upload dropzone border."
        },
        "color-dropzone-border-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of file upload dropzone border in hovered state."
        },
        "color-tree-view-connector-line": {
          "$value": {
            "light": "#dedee3",
            "dark": "#dedee3"
          },
          "$description": "The color of the tree view connector lines."
        },
        "color-background-action-card-default": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The default background color of action cards."
        },
        "color-background-action-card-hover": {
          "$value": {
            "light": "#1b232d",
            "dark": "#1b232d"
          },
          "$description": "The background color of action cards in hover state."
        },
        "color-background-action-card-active": {
          "$value": {
            "light": "#333843",
            "dark": "#333843"
          },
          "$description": "The background color of action cards in active state."
        },
        "color-border-action-card-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default border color of action cards."
        },
        "color-border-action-card-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in hover state."
        },
        "color-border-action-card-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The border color of action cards in active state."
        },
        "color-border-action-card-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The border color of action cards in disabled state."
        },
        "color-background-action-card-disabled": {
          "$value": {
            "light": "#161d26",
            "dark": "#161d26"
          },
          "$description": "The background color of action cards in disabled state."
        },
        "color-text-action-card-disabled": {
          "$value": {
            "light": "#8c8c94",
            "dark": "#8c8c94"
          },
          "$description": "The text color of action cards in disabled state."
        },
        "color-text-action-card-icon-default": {
          "$value": {
            "light": "#42b4ff",
            "dark": "#42b4ff"
          },
          "$description": "The default color of icons in action cards."
        },
        "color-text-action-card-icon-hover": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in hover state."
        },
        "color-text-action-card-icon-active": {
          "$value": {
            "light": "#75cfff",
            "dark": "#75cfff"
          },
          "$description": "The color of icons in action cards in active state."
        },
        "color-text-action-card-icon-disabled": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The color of icons in action cards in disabled state."
        },
        "color-background-badge-green": {
          "$value": {
            "light": "#00802f",
            "dark": "#00802f"
          },
          "$description": "The background color of green badges."
        },
        "color-background-badge-blue": {
          "$value": {
            "light": "#006ce0",
            "dark": "#006ce0"
          },
          "$description": "The background color of blue badges."
        },
        "color-background-badge-red": {
          "$value": {
            "light": "#db0000",
            "dark": "#db0000"
          },
          "$description": "The background color of red badges."
        },
        "color-background-badge-yellow": {
          "$value": {
            "light": "#ffe347",
            "dark": "#ffe347"
          },
          "$description": "The background color of yellow badges."
        },
        "color-background-badge-grey": {
          "$value": {
            "light": "#656871",
            "dark": "#656871"
          },
          "$description": "The background color of grey badges."
        },
        "color-border-badge": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The default border color of badges."
        },
        "color-border-badge-grey": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of grey badges."
        },
        "color-border-badge-green": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of green badges."
        },
        "color-border-badge-blue": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of blue badges."
        },
        "color-border-badge-red": {
          "$value": {
            "light": "transparent",
            "dark": "transparent"
          },
          "$description": "The border color of red badges."
        },
        "color-text-badge-grey": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of grey badges."
        },
        "color-text-badge-green": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of green badges."
        },
        "color-text-badge-blue": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of blue badges."
        },
        "color-text-badge-red": {
          "$value": {
            "light": "#f9f9fa",
            "dark": "#f9f9fa"
          },
          "$description": "The text color of red badges."
        },
        "color-background-code-view": {
          "$value": {
            "light": "#282c34",
            "dark": "#282c34"
          },
          "$description": "The background color of the code view component."
        },
        "font-family-base": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The default font family that will be applied globally to the product interface."
        },
        "font-family-display": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for display text. Defaults to the base font family."
        },
        "font-family-heading": {
          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
          "$description": "The font family for headings and component headers. Defaults to the base font family."
        },
        "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": "42px",
          "$description": "The default font size for large display text."
        },
        "font-size-display-xl": {
          "$value": "64px",
          "$description": "The default font size for extra large display text."
        },
        "font-size-heading-l": {
          "$value": "20px",
          "$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-xl": {
          "$value": "24px",
          "$description": "The default font size for h1s."
        },
        "font-size-heading-xs": {
          "$value": "14px",
          "$description": "The default font size for h5s."
        },
        "font-size-tabs": {
          "$value": "16px",
          "$description": "The default font size for tabs."
        },
        "font-weight-alert-header": {
          "$value": "700",
          "$description": "The default font weight for alert header text."
        },
        "font-weight-bold": {
          "$value": "700",
          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content."
        },
        "font-weight-button": {
          "$value": "700",
          "$description": "The default font weight for button text."
        },
        "font-weight-display-l": {
          "$value": "700",
          "$description": "The default font weight for large display text."
        },
        "font-weight-display-xl": {
          "$value": "400",
          "$description": "The default font weight for extra large display text."
        },
        "font-weight-flashbar-header": {
          "$value": "700",
          "$description": "The default font weight for flashbar header text."
        },
        "font-weight-heading-l": {
          "$value": "700",
          "$description": "The default font weight for h2s."
        },
        "font-weight-heading-m": {
          "$value": "700",
          "$description": "The default font weight for h3s."
        },
        "font-weight-heading-s": {
          "$value": "700",
          "$description": "The default font weight for h4s."
        },
        "font-weight-heading-xl": {
          "$value": "700",
          "$description": "The default font weight for h1s."
        },
        "font-weight-heading-xs": {
          "$value": "700",
          "$description": "The default font weight for h5s."
        },
        "font-weight-heavy": {
          "$value": "700",
          "$description": "The default heavy font weight."
        },
        "font-weight-lighter": {
          "$value": "300",
          "$description": "The default lighter font weight."
        },
        "font-weight-normal": {
          "$value": "400",
          "$description": "The default normal font weight."
        },
        "font-weight-tabs": {
          "$value": "700",
          "$description": "The default font weight for tabs."
        },
        "font-weight-tabs-disabled": {
          "$value": "700",
          "$description": "The default font weight for disabled tabs."
        },
        "letter-spacing-display-l": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for large display text."
        },
        "letter-spacing-display-xl": {
          "$value": "-0.03em",
          "$description": "The default letter spacing for extra large display text."
        },
        "letter-spacing-heading-l": {
          "$value": "-0.015em",
          "$description": "The default letter spacing for h2s."
        },
        "letter-spacing-heading-m": {
          "$value": "-0.010em",
          "$description": "The default letter spacing for h3s."
        },
        "letter-spacing-heading-s": {
          "$value": "-0.005em",
          "$description": "The default letter spacing for h4s."
        },
        "letter-spacing-heading-xl": {
          "$value": "-0.02em",
          "$description": "The default letter spacing for h1s."
        },
        "letter-spacing-heading-xs": {
          "$value": "normal",
          "$description": "The default letter spacing for h5s."
        },
        "line-height-body-m": {
          "$value": "20px",
          "$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": "48px",
          "$description": "The default line height for large display text."
        },
        "line-height-display-xl": {
          "$value": "72px",
          "$description": "The default line height for extra large display text."
        },
        "line-height-heading-l": {
          "$value": "24px",
          "$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-xl": {
          "$value": "30px",
          "$description": "The default line height for h1s."
        },
        "line-height-heading-xs": {
          "$value": "18px",
          "$description": "The default line height for h5s."
        },
        "line-height-tabs": {
          "$value": "20px",
          "$description": "The default line height for tabs."
        },
        "border-radius-action-card-default": {
          "$value": "16px",
          "$description": "The border radius of default action cards."
        },
        "border-radius-action-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded action cards."
        },
        "border-radius-alert": {
          "$value": "12px",
          "$description": "The border radius of alerts."
        },
        "border-radius-badge": {
          "$value": "4px",
          "$description": "The border radius of badges."
        },
        "border-radius-button": {
          "$value": "20px",
          "$description": "The border radius of buttons and segmented control's segments."
        },
        "border-radius-calendar-day-focus-ring": {
          "$value": "3px",
          "$description": "The border radius of the focused day in date picker and date range picker."
        },
        "border-radius-card-default": {
          "$value": "16px",
          "$description": "The border radius of default cards."
        },
        "border-radius-card-embedded": {
          "$value": "8px",
          "$description": "The border radius of embedded cards."
        },
        "border-radius-chat-bubble": {
          "$value": "8px",
          "$description": "The border radius of chat bubbles."
        },
        "border-radius-support-prompt": {
          "$value": "8px",
          "$description": "The border radius of support prompts."
        },
        "border-radius-container": {
          "$value": "16px",
          "$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": "4px",
          "$description": "The border radius of the focus indicator of circular controls. For example: radio button."
        },
        "border-radius-control-default-focus-ring": {
          "$value": "4px",
          "$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": "8px",
          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker."
        },
        "border-radius-dropzone": {
          "$value": "12px",
          "$description": "The border radius of file upload dropzone."
        },
        "border-radius-flashbar": {
          "$value": "12px",
          "$description": "The border radius of flash messages in flashbars."
        },
        "border-radius-input": {
          "$value": "8px",
          "$description": "The border radius of form controls. For example: input, select."
        },
        "border-radius-item": {
          "$value": "8px",
          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days."
        },
        "border-radius-popover": {
          "$value": "8px",
          "$description": "The border radius of popovers."
        },
        "border-radius-tabs-focus-ring": {
          "$value": "20px",
          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar."
        },
        "border-radius-tiles": {
          "$value": "8px",
          "$description": "The border radius of tiles."
        },
        "border-radius-token": {
          "$value": "8px",
          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens."
        },
        "border-radius-token-inline": {
          "$value": "4px",
          "$description": "The border radius of inline tokens. For example: multiselect component."
        },
        "border-radius-tutorial-panel-item": {
          "$value": "8px",
          "$description": "The border radius of tutorials inside a tutorial panel."
        },
        "border-width-action-card-active": {
          "$value": "1px",
          "$description": "The border width of action cards in active state."
        },
        "border-width-action-card-default": {
          "$value": "1px",
          "$description": "The border width of action cards in default state."
        },
        "border-width-action-card-disabled": {
          "$value": "1px",
          "$description": "The border width of action cards in disabled state."
        },
        "border-width-action-card-hover": {
          "$value": "1px",
          "$description": "The border width of action cards in hover state."
        },
        "border-width-alert": {
          "$value": "2px",
          "$description": "The border width of alerts."
        },
        "border-width-alert-block-end": {
          "$value": "2px",
          "$description": "The block-end border width of alerts."
        },
        "border-width-alert-block-start": {
          "$value": "2px",
          "$description": "The block-start border width of alerts."
        },
        "border-width-alert-inline-end": {
          "$value": "2px",
          "$description": "The inline-end border width of alerts."
        },
        "border-width-alert-inline-start": {
          "$value": "2px",
          "$description": "The inline-start border width of alerts."
        },
        "border-width-flashbar-inline-start": {
          "$value": "0px",
          "$description": "The inline-start border width of flash messages in flashbars."
        },
        "border-width-button": {
          "$value": "2px",
          "$description": "The border width of buttons."
        },
        "border-width-card": {
          "$value": "1px",
          "$description": "The border width of a card."
        },
        "border-width-card-selected": {
          "$value": "2px",
          "$description": "The border width of a selected card."
        },
        "border-width-dropdown": {
          "$value": "2px",
          "$description": "The border width of dropdowns."
        },
        "border-width-field": {
          "$value": "1px",
          "$description": "The border width of form fields."
        },
        "border-width-icon-big": {
          "$value": "3px",
          "$description": "The visual stroke width of big icons."
        },
        "border-width-icon-large": {
          "$value": "4px",
          "$description": "The visual stroke width of large icons."
        },
        "border-width-icon-medium": {
          "$value": "2px",
          "$description": "The visual stroke width of medium icons."
        },
        "border-width-icon-normal": {
          "$value": "2px",
          "$description": "The visual stroke width of normal icons."
        },
        "border-width-icon-small": {
          "$value": "2px",
          "$description": "The visual stroke width of small icons."
        },
        "border-width-icon-x-small": {
          "$value": "1.5px",
          "$description": "The visual stroke width of extra small icons."
        },
        "border-width-item-selected": {
          "$value": "2px",
          "$description": "The border width of selected items, like table rows."
        },
        "border-width-layout-side-navigation": {
          "$value": "1px",
          "$description": "The border width of the side navigation divider in the AppLayout and AppLayoutToolbar components."
        },
        "border-width-badge": {
          "$value": "0px",
          "$description": "The border width of badges."
        },
        "border-width-popover": {
          "$value": "2px",
          "$description": "The border width of popovers."
        },
        "border-width-token": {
          "$value": "2px",
          "$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": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for providing responsive yet smooth visual feedback."
        },
        "motion-easing-sticky": {
          "$value": {
            "default": "cubic-bezier(1, 0, 0.83, 1)",
            "disabled": "cubic-bezier(1, 0, 0.83, 1)"
          },
          "$description": "The easing curve for making an element sticky to a certain state."
        },
        "motion-easing-expressive": {
          "$value": {
            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)"
          },
          "$description": "The easing curve for drawing a user's attention in an expressive way."
        },
        "motion-duration-responsive": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for making the motion feel quick and responsive."
        },
        "motion-duration-expressive": {
          "$value": {
            "default": "165ms",
            "disabled": "0ms"
          },
          "$description": "The duration for accommodating the motion with more expressiveness."
        },
        "motion-duration-complex": {
          "$value": {
            "default": "250ms",
            "disabled": "0ms"
          },
          "$description": "The duration for drawing more attention or accommodating for more complexity."
        },
        "motion-duration-tooltip-enter": {
          "$value": {
            "default": "115ms",
            "disabled": "0ms"
          },
          "$description": "The duration for the tooltip enter transition."
        },
        "motion-easing-tooltip-enter": {
          "$value": {
            "default": "cubic-bezier(0, 0, 0, 1)",
            "disabled": "cubic-bezier(0, 0, 0, 1)"
          },
          "$description": "The easing curve for the tooltip enter transition."
        },
        "motion-keyframes-fade-in": {
          "$value": {
            "default": "awsui-fade-in-jiml2r",
            "disabled": "awsui-fade-in-jiml2r"
          },
          "$description": "The CSS keyframes for showing an element."
        },
        "motion-keyframes-fade-out": {
          "$value": {
            "default": "awsui-fade-out-au27m5",
            "disabled": "awsui-fade-out-au27m5"
          },
          "$description": "The CSS keyframes for hiding an element."
        },
        "motion-keyframes-status-icon-error": {
          "$value": {
            "default": "awsui-status-icon-error-mjjk3s",
            "disabled": "awsui-status-icon-error-mjjk3s"
          },
          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention."
        },
        "motion-keyframes-scale-popup": {
          "$value": {
            "default": "awsui-scale-popup-2m9987",
            "disabled": "awsui-scale-popup-2m9987"
          },
          "$description": "The CSS keyframes for scaling up an element to draw the user's attention."
        },
        "size-vertical-input": {
          "$value": {
            "comfortable": "32px",
            "compact": "28px"
          },
          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker."
        },
        "size-side-navigation-item-height": {
          "$value": {
            "comfortable": "28px",
            "compact": "24px"
          },
          "$description": "The minimum height of side navigation items."
        },
        "size-side-navigation-item-collapsed": {
          "$value": {
            "comfortable": "30px",
            "compact": "28px"
          },
          "$description": "The square size of collapsed side navigation items."
        },
        "size-side-navigation-collapsed-width": {
          "$value": {
            "comfortable": "52px",
            "compact": "52px"
          },
          "$description": "The default width of the collapsed side navigation rail."
        },
        "space-alert-vertical": {
          "$value": {
            "comfortable": "8px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside alert components."
        },
        "space-button-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "16px"
          },
          "$description": "The horizontal padding inside buttons."
        },
        "space-button-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside buttons."
        },
        "space-token-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tokens."
        },
        "space-field-vertical": {
          "$value": {
            "comfortable": "5px",
            "compact": "3px"
          },
          "$description": "The vertical padding inside control components."
        },
        "space-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside a card."
        },
        "space-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside embedded a card."
        },
        "space-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside a card."
        },
        "space-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside embedded a card."
        },
        "space-container-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside a container."
        },
        "space-field-horizontal": {
          "$value": {
            "comfortable": "12px",
            "compact": "12px"
          },
          "$description": "The horizontal padding inside field components."
        },
        "space-tabs-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "2px"
          },
          "$description": "The vertical padding inside tabs."
        },
        "space-tree-view-indentation": {
          "$value": {
            "comfortable": "24px",
            "compact": "24px"
          },
          "$description": "The indentation of tree view items."
        },
        "space-side-navigation-item-default-gap": {
          "$value": {
            "comfortable": "0px",
            "compact": "0px"
          },
          "$description": "The vertical gap between side navigation items when no item has an icon."
        },
        "space-side-navigation-item-icon-gap": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical gap between side navigation items when at least one item has an icon."
        },
        "space-action-card-horizontal-default": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The default horizontal padding inside an action card."
        },
        "space-action-card-horizontal-embedded": {
          "$value": {
            "comfortable": "12px",
            "compact": "10px"
          },
          "$description": "The horizontal padding inside an embedded action card."
        },
        "space-action-card-vertical-default": {
          "$value": {
            "comfortable": "16px",
            "compact": "12px"
          },
          "$description": "The default vertical padding inside an action card."
        },
        "space-action-card-vertical-embedded": {
          "$value": {
            "comfortable": "10px",
            "compact": "8px"
          },
          "$description": "The vertical padding inside an embedded action card."
        },
        "space-option-padding-vertical": {
          "$value": {
            "comfortable": "4px",
            "compact": "4px"
          },
          "$description": "The vertical padding inside dropdown option items."
        },
        "space-option-padding-horizontal": {
          "$value": {
            "comfortable": "20px",
            "compact": "20px"
          },
          "$description": "The horizontal padding inside dropdown option 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: horizontal padding inside a popover."
        },
        "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: left indentation of grouped options in a select."
        },
        "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-card": {
          "$value": {
            "light": "none",
            "dark": "none"
          },
          "$description": "The shadow of a card."
        },
        "shadow-container-active": {
          "$value": {
            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c"
          },
          "$description": "Shadow for containers and cards in active state."
        }
      }
    }
  }
}