{
  "color": {
    "bg": {
      "active": { "$value": "{color.primary.base}" }
    },
    "theme": {
      "bg": {
        "primary": {
          "$value": "{color.primary.100}",
          "$type": "color",
          "$description": "Theme-specific primary background color."
        },
        "brand": {
          "$value": "{color.brand.100}",
          "$type": "color",
          "$description": "Theme-specific brand background color."
        },
        "success": {
          "$value": "{color.success.100}",
          "$type": "color",
          "$description": "Theme-specific success background color."
        },
        "info": {
          "$value": "{color.info.100}",
          "$type": "color",
          "$description": "Theme-specific info background color."
        },
        "warning": {
          "$value": "{color.warning.100}",
          "$type": "color",
          "$description": "Theme-specific warning background color."
        },
        "danger": {
          "$value": "{color.danger.100}",
          "$type": "color",
          "$description": "Theme-specific danger background color."
        },
        "light": {
          "$value": "{color.light.100}",
          "$type": "color",
          "$description": "Theme-specific light background color."
        },
        "dark": {
          "$value": "{color.dark.100}",
          "$type": "color",
          "$description": "Theme-specific dark background color."
        },
        "gray": {
          "$value": "{color.gray.100}",
          "$type": "color",
          "$description": "Theme-specific gray background color."
        }
      },
      "border": {
        "primary": {
          "$value": "{color.primary.200}",
          "$type": "color",
          "$description": "Theme-specific primary border color."
        },
        "brand": {
          "$value": "{color.brand.200}",
          "$type": "color",
          "$description": "Theme-specific brand border color."
        },
        "success": {
          "$value": "{color.success.200}",
          "$type": "color",
          "$description": "Theme-specific success border color."
        },
        "info": {
          "$value": "{color.info.200}",
          "$type": "color",
          "$description": "Theme-specific info border color."
        },
        "warning": {
          "$value": "{color.warning.200}",
          "$type": "color",
          "$description": "Theme-specific warning border color."
        },
        "danger": {
          "$value": "{color.danger.200}",
          "$type": "color",
          "$description": "Theme-specific danger border color."
        },
        "light": {
          "$value": "{color.light.200}",
          "$type": "color",
          "$description": "Theme-specific light border color."
        },
        "dark": {
          "$value": "{color.dark.200}",
          "$type": "color",
          "$description": "Theme-specific dark border color."
        },
        "gray": {
          "$value": "{color.gray.200}",
          "$type": "color",
          "$description": "Theme-specific gray border color."
        }
      },
      "focus": {
        "primary": {
          "$value": "{color.primary.500}",
          "$type": "color",
          "$description": "Theme-specific primary focus color."
        },
        "brand": {
          "$value": "{color.brand.500}",
          "$type": "color",
          "$description": "Theme-specific brand focus color."
        },
        "success": {
          "$value": "{color.success.500}",
          "$type": "color",
          "$description": "Theme-specific success focus color."
        },
        "info": {
          "$value": "{color.info.500}",
          "$type": "color",
          "$description": "Theme-specific info focus color."
        },
        "warning": {
          "$value": "{color.warning.500}",
          "$type": "color",
          "$description": "Theme-specific warning focus color."
        },
        "danger": {
          "$value": "{color.danger.500}",
          "$type": "color",
          "$description": "Theme-specific danger focus color."
        },
        "light": {
          "$value": "{color.light.500}",
          "$type": "color",
          "$description": "Theme-specific light focus color."
        },
        "dark": {
          "$value": "{color.dark.500}",
          "$type": "color",
          "$description": "Theme-specific dark focus color."
        },
        "gray": {
          "$value": "{color.gray.500}",
          "$type": "color",
          "$description": "Theme-specific gray focus color."
        }
      },
      "default": {
        "primary": {
          "$value": "{color.primary.500}",
          "$type": "color",
          "$description": "Theme-specific primary default color."
        },
        "brand": {
          "$value": "{color.brand.500}",
          "$type": "color",
          "$description": "Theme-specific brand default color."
        },
        "success": {
          "$value": "{color.success.500}",
          "$type": "color",
          "$description": "Theme-specific success default color."
        },
        "info": {
          "$value": "{color.info.500}",
          "$type": "color",
          "$description": "Theme-specific info default color."
        },
        "warning": {
          "$value": "{color.warning.500}",
          "$type": "color",
          "$description": "Theme-specific warning default color."
        },
        "danger": {
          "$value": "{color.danger.500}",
          "$type": "color",
          "$description": "Theme-specific danger default color."
        },
        "light": {
          "$value": "{color.light.500}",
          "$type": "color",
          "$description": "Theme-specific light default color."
        },
        "dark": {
          "$value": "{color.dark.500}",
          "$type": "color",
          "$description": "Theme-specific dark default color."
        },
        "gray": {
          "$value": "{color.gray.500}",
          "$type": "color",
          "$description": "Theme-specific gray default color."
        }
      },
      "hover": {
        "primary": {
          "$value": "{color.primary.700}",
          "$type": "color",
          "$description": "Theme-specific primary hover color."
        },
        "brand": {
          "$value": "{color.brand.700}",
          "$type": "color",
          "$description": "Theme-specific brand hover color."
        },
        "success": {
          "$value": "{color.success.700}",
          "$type": "color",
          "$description": "Theme-specific success hover color."
        },
        "info": {
          "$value": "{color.info.700}",
          "$type": "color",
          "$description": "Theme-specific info hover color."
        },
        "warning": {
          "$value": "{color.warning.700}",
          "$type": "color",
          "$description": "Theme-specific warning hover color."
        },
        "danger": {
          "$value": "{color.danger.700}",
          "$type": "color",
          "$description": "Theme-specific danger hover color."
        },
        "light": {
          "$value": "{color.light.700}",
          "$type": "color",
          "$description": "Theme-specific light hover color."
        },
        "dark": {
          "$value": "{color.dark.700}",
          "$type": "color",
          "$description": "Theme-specific dark hover color."
        },
        "gray": {
          "$value": "{color.gray.700}",
          "$type": "color",
          "$description": "Theme-specific gray hover color."
        }
      },
      "active": {
        "primary": {
          "$value": "{color.primary.900}",
          "$type": "color",
          "$description": "Theme-specific primary active color."
        },
        "brand": {
          "$value": "{color.brand.900}",
          "$type": "color",
          "$description": "Theme-specific brand active color."
        },
        "success": {
          "$value": "{color.success.900}",
          "$type": "color",
          "$description": "Theme-specific success active color."
        },
        "info": {
          "$value": "{color.info.900}",
          "$type": "color",
          "$description": "Theme-specific info active color."
        },
        "warning": {
          "$value": "{color.warning.900}",
          "$type": "color",
          "$description": "Theme-specific warning active color."
        },
        "danger": {
          "$value": "{color.danger.900}",
          "$type": "color",
          "$description": "Theme-specific danger active color."
        },
        "light": {
          "$value": "{color.light.900}",
          "$type": "color",
          "$description": "Theme-specific light active color."
        },
        "dark": {
          "$value": "{color.dark.900}",
          "$type": "color",
          "$description": "Theme-specific dark active color."
        },
        "gray": {
          "$value": "{color.gray.900}",
          "$type": "color",
          "$description": "Theme-specific gray active color."
        }
      }
    }
  }
}