{
  "background": {
    "color": {
      "@base": {
        "comment": "TODO Bug 1821203 - Gray use needs to be consolidated",
        "value": {
          "forcedColors": "ButtonFace",
          "brand": {
            "default": "color-mix(in srgb, currentColor 7%, transparent)"
          },
          "platform": {
            "default": "color-mix(in srgb, currentColor 13%, transparent)"
          }
        }
      },
      "hover": {
        "value": {
          "forcedColors": "SelectedItemText",
          "brand": {
            "default": "color-mix(in srgb, currentColor 14%, transparent)"
          },
          "platform": {
            "default": "color-mix(in srgb, currentColor 17%, transparent)"
          }
        }
      },
      "active": {
        "value": {
          "forcedColors": "SelectedItemText",
          "brand": {
            "default": "color-mix(in srgb, currentColor 21%, transparent)"
          },
          "platform": {
            "default": "color-mix(in srgb, currentColor 30%, transparent)"
          }
        }
      },
      "disabled": {
        "value": {
          "default": "{button.background.color.@base}",
          "forcedColors": "ButtonFace"
        }
      },
      "primary": {
        "@base": {
          "value": "{color.accent.primary.@base}"
        },
        "hover": {
          "value": "{color.accent.primary.hover}"
        },
        "active": {
          "value": "{color.accent.primary.active}"
        },
        "disabled": {
          "value": {
            "default": "{button.background.color.primary.@base}",
            "forcedColors": "{button.text.color.disabled}"
          }
        },
        "selected": {
          "value": "{button.background.color.primary.active}"
        }
      },
      "destructive": {
        "@base": {
          "value": {
            "light": "{color.red.60}",
            "dark": "{color.red.30}",
            "forcedColors": "{button.background.color.primary.@base}"
          }
        },
        "active": {
          "value": {
            "light": "{color.red.80}",
            "dark": "{color.red.10}",
            "forcedColors": "{button.background.color.primary.active}"
          }
        },
        "disabled": {
          "value": {
            "default": "{button.background.color.destructive.@base}",
            "forcedColors": "{button.background.color.primary.disabled}"
          }
        },
        "hover": {
          "value": {
            "light": "{color.red.70}",
            "dark": "{color.red.20}",
            "forcedColors": "{button.background.color.primary.hover}"
          }
        },
        "selected": {
          "value": "{button.background.color.destructive.active}"
        }
      },
      "ghost": {
        "@base": {
          "value": {
            "default": "transparent",
            "brand": {
              "forcedColors": "{button.background.color.@base}"
            }
          }
        },
        "active": {
          "value": "{button.background.color.active}"
        },
        "disabled": {
          "value": {
            "default": "{button.background.color.ghost.@base}",
            "brand": {
              "forcedColors": "{button.background.color.disabled}"
            }
          }
        },
        "hover": {
          "value": "{button.background.color.hover}"
        },
        "selected": {
          "value": "{button.background.color.ghost.active}"
        }
      },
      "menu": {
        "@base": {
          "value": "{button.background.color.ghost.@base}"
        },
        "active": {
          "value": {
            "default": "{button.background.color.ghost.active}",
            "forcedColors": "{button.background.color.primary.@base}"
          }
        },
        "disabled": {
          "value": "{button.background.color.ghost.disabled}"
        },
        "hover": {
          "value": {
            "default": "{button.background.color.ghost.hover}",
            "forcedColors": "{button.background.color.primary.@base}"
          }
        }
      },
      "selected": {
        "value": "{button.background.color.active}"
      }
    }
  },
  "border": {
    "@base": {
      "value": "{border.width} solid {button.border.color.@base}"
    },
    "color": {
      "@base": {
        "value": {
          "default": "transparent",
          "prefersContrast": "{button.text.color.@base}",
          "forcedColors": "{border.color.interactive.@base}"
        }
      },
      "active": {
        "value": {
          "default": "{button.border.color.@base}",
          "forcedColors": "{border.color.interactive.active}"
        }
      },
      "destructive": {
        "@base": {
          "value": {
            "default": "transparent",
            "forcedColors": "{button.border.color.primary.@base}"
          }
        },
        "active": {
          "value": {
            "default": "{button.border.color.destructive.@base}",
            "forcedColors": "{button.border.color.primary.active}"
          }
        },
        "disabled": {
          "value": {
            "default": "{button.border.color.destructive.@base}",
            "forcedColors": "{button.border.color.primary.disabled}"
          }
        },
        "hover": {
          "value": {
            "default": "{button.border.color.destructive.@base}",
            "forcedColors": "{button.border.color.primary.hover}"
          }
        },
        "selected": {
          "value": "{button.border.color.destructive.active}"
        }
      },
      "disabled": {
        "value": {
          "default": "{button.border.color.@base}",
          "forcedColors": "{border.color.interactive.disabled}"
        }
      },
      "ghost": {
        "@base": {
          "value": {
            "default": "{button.border.color.@base}"
          }
        },
        "active": {
          "value": {
            "default": "{button.border.color.active}"
          }
        },
        "disabled": {
          "value": {
            "default": "{button.border.color.disabled}"
          }
        },
        "hover": {
          "value": {
            "default": "{button.border.color.hover}"
          }
        },
        "selected": {
          "value": "{button.border.color.ghost.active}"
        }
      },
      "hover": {
        "value": {
          "default": "{button.border.color.@base}",
          "forcedColors": "{border.color.interactive.hover}"
        }
      },
      "primary": {
        "@base": {
          "value": {
            "default": "transparent",
            "forcedColors": "ButtonFace"
          }
        },
        "active": {
          "value": {
            "default": "{button.border.color.primary.@base}",
            "forcedColors": "ButtonText"
          }
        },
        "disabled": {
          "value": "{button.border.color.primary.@base}"
        },
        "hover": {
          "value": {
            "default": "{button.border.color.primary.@base}",
            "forcedColors": "SelectedItemText"
          }
        },
        "selected": {
          "value": "{button.border.color.primary.active}"
        }
      },
      "selected": {
        "value": "{button.border.color.active}"
      }
    },
    "radius": {
      "value": "{border.radius.medium}"
    }
  },
  "font": {
    "size": {
      "@base": {
        "value": "{font.size.root}"
      },
      "small": {
        "value": "{font.size.small}"
      }
    },
    "weight": {
      "value": "{font.weight.semibold}"
    }
  },
  "icon": {
    "fill": {
      "value": "currentColor"
    },
    "stroke": {
      "value": "{button.icon.fill}"
    }
  },
  "min": {
    "height": {
      "@base": {
        "value": "{size.item.large}"
      },
      "small": {
        "value": "{size.item.medium}"
      }
    }
  },
  "opacity": {
    "disabled": {
      "value": {
        "default": 0.5,
        "forcedColors": 1
      }
    }
  },
  "padding": {
    "@base": {
      "value": "{space.xsmall} {space.large}"
    },
    "icon": {
      "value": 0
    }
  },
  "size": {
    "icon": {
      "@base": {
        "value": "{button.min.height.@base}"
      },
      "small": {
        "value": "{button.min.height.small}"
      }
    }
  },
  "text": {
    "color": {
      "@base": {
        "value": {
          "forcedColors": "ButtonText",
          "brand": {
            "light": "{color.gray.100}",
            "dark": "{color.gray.05}"
          },
          "platform": {
            "default": "currentColor"
          }
        }
      },
      "active": {
        "value": {
          "default": "{button.text.color.@base}",
          "forcedColors": "SelectedItem"
        }
      },
      "destructive": {
        "@base": {
          "value": {
            "light": "{color.white.@base}",
            "dark": "{color.gray.100}",
            "forcedColors": "{button.text.color.primary.@base}"
          }
        },
        "active": {
          "value": {
            "default": "{button.text.color.destructive.@base}",
            "forcedColors": "{button.text.color.primary.active}"
          }
        },
        "disabled": {
          "value": {
            "default": "{button.text.color.destructive.@base}",
            "forcedColors": "{button.text.color.primary.disabled}"
          }
        },
        "hover": {
          "value": {
            "default": "{button.text.color.destructive.@base}",
            "forcedColors": "{button.text.color.primary.hover}"
          }
        },
        "selected": {
          "value": "{button.text.color.destructive.active}"
        }
      },
      "disabled": {
        "value": {
          "default": "{button.text.color.@base}",
          "forcedColors": "GrayText"
        }
      },
      "ghost": {
        "@base": {
          "value": {
            "default": "inherit",
            "brand": {
              "prefersContrast": "{button.text.color.@base}",
              "forcedColors": "{button.text.color.@base}"
            }
          }
        },
        "active": {
          "value": {
            "default": "inherit",
            "prefersContrast": "{button.text.color.active}",
            "forcedColors": "{button.text.color.active}"
          }
        },
        "disabled": {
          "value": {
            "default": "inherit",
            "brand": {
              "prefersContrast": "{button.text.color.disabled}",
              "forcedColors": "{button.text.color.disabled}"
            }
          }
        },
        "hover": {
          "value": {
            "default": "inherit",
            "prefersContrast": "{button.text.color.hover}",
            "forcedColors": "{button.text.color.hover}"
          }
        },
        "selected": {
          "value": "{button.text.color.ghost.active}"
        }
      },
      "hover": {
        "value": {
          "default": "{button.text.color.@base}",
          "forcedColors": "SelectedItem"
        }
      },
      "menu": {
        "@base": {
          "value": "{button.text.color.ghost.@base}"
        },
        "active": {
          "value": {
            "default": "{button.text.color.ghost.active}",
            "forcedColors": "{button.text.color.primary.@base}"
          }
        },
        "disabled": {
          "value": "{button.text.color.ghost.disabled}"
        },
        "hover": {
          "value": {
            "default": "{button.text.color.ghost.hover}",
            "forcedColors": "{button.text.color.primary.@base}"
          }
        }
      },
      "primary": {
        "@base": {
          "value": {
            "forcedColors": "ButtonFace",
            "brand": {
              "light": "{color.white.@base}",
              "dark": "{color.gray.100}"
            },
            "platform": {
              "default": "AccentColorText"
            }
          }
        },
        "active": {
          "value": "{button.text.color.primary.hover}"
        },
        "disabled": {
          "value": "{button.text.color.primary.@base}"
        },
        "hover": {
          "value": {
            "default": "{button.text.color.primary.@base}",
            "forcedColors": "SelectedItemText"
          }
        },
        "selected": {
          "value": "{button.text.color.primary.active}"
        }
      },
      "selected": {
        "value": "{button.text.color.active}"
      }
    }
  }
}