{
  "button": {
    "primary": {
      "foreground": {
        "color": {
          "$type": "color",
          "$value": "{foreground.color.on.primary}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{foreground.color.on.primary}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{foreground.color.on.primary}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.on.primary}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{foreground.color.subdued}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL", "STROKE_COLOR"]
          }
        }
      },
      "background": {
        "color": {
          "$type": "color",
          "$value": "{background.color.primary}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.primary}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.primary}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{background.color.primary-hover}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.primary-hover}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.primary-hover}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{background.color.primary-active}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.primary-active}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.primary-active}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{background.color.strong}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.strong}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.strong}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        }
      },
      "border": {
        "color": {
          "$type": "color",
          "$value": "transparent",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "transparent"
              },
              "dark": {
                "$type": "color",
                "$value": "transparent"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
          }
        },
        "radius": {
          "$type": "dimension",
          "$value": "{border.radius.medium}",
          "$extensions": {
            "com.figma.scopes": ["CORNER_RADIUS"]
          }
        }
      },
      "focus-ring": {
        "color": {
          "$type": "color",
          "$value": "{focus.ring.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR"]
          }
        }
      }
    },
    "secondary": {
      "foreground": {
        "color": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{foreground.color.subdued}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL", "STROKE_COLOR"]
          }
        }
      },
      "background": {
        "color": {
          "$type": "color",
          "$value": "{background.color.secondary}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.secondary}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.secondary}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{background.color.secondary-hover}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.secondary-hover}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.secondary-hover}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{background.color.secondary-active}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.secondary-active}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.secondary-active}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{background.color.strong}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.strong}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.strong}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        }
      },
      "border": {
        "color": {
          "$type": "color",
          "$value": "transparent",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "transparent"
              },
              "dark": {
                "$type": "color",
                "$value": "transparent"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
          }
        },
        "radius": {
          "$type": "dimension",
          "$value": "{border.radius.medium}",
          "$extensions": {
            "com.figma.scopes": ["CORNER_RADIUS"]
          }
        }
      },
      "focus-ring": {
        "color": {
          "$type": "color",
          "$value": "{focus.ring.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR"]
          }
        }
      }
    },
    "ghost": {
      "foreground": {
        "color": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{foreground.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.default}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{foreground.color.subdued}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              },
              "dark": {
                "$type": "color",
                "$value": "{foreground.color.subdued}"
              }
            },
            "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL", "STROKE_COLOR"]
          }
        }
      },
      "background": {
        "color": {
          "$type": "color",
          "$value": "transparent",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "transparent"
              },
              "dark": {
                "$type": "color",
                "$value": "transparent"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-hover": {
          "$type": "color",
          "$value": "{background.color.transparent.default-hover}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.transparent.default-hover}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.transparent.default-hover}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-active": {
          "$type": "color",
          "$value": "{background.color.transparent.default-active}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.transparent.default-active}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.transparent.default-active}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        },
        "color-disabled": {
          "$type": "color",
          "$value": "{background.color.strong}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{background.color.strong}"
              },
              "dark": {
                "$type": "color",
                "$value": "{background.color.strong}"
              }
            },
            "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
          }
        }
      },
      "border": {
        "color": {
          "$type": "color",
          "$value": "transparent",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "transparent"
              },
              "dark": {
                "$type": "color",
                "$value": "transparent"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
          }
        },
        "radius": {
          "$type": "dimension",
          "$value": "{border.radius.medium}",
          "$extensions": {
            "com.figma.scopes": ["CORNER_RADIUS"]
          }
        }
      },
      "focus-ring": {
        "color": {
          "$type": "color",
          "$value": "{focus.ring.color.default}",
          "$extensions": {
            "appearance": {
              "light": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              },
              "dark": {
                "$type": "color",
                "$value": "{focus.ring.color.default}"
              }
            },
            "com.figma.scopes": ["STROKE_COLOR"]
          }
        }
      }
    },
    "danger": {
      "primary": {
        "foreground": {
          "color": {
            "$type": "color",
            "$value": "{foreground.color.on.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-hover": {
            "$type": "color",
            "$value": "{foreground.color.on.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-active": {
            "$type": "color",
            "$value": "{foreground.color.on.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-disabled": {
            "$type": "color",
            "$value": "{foreground.color.subdued}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.subdued}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.subdued}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL", "STROKE_COLOR"]
            }
          }
        },
        "background": {
          "color": {
            "$type": "color",
            "$value": "{background.color.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-hover": {
            "$type": "color",
            "$value": "{background.color.danger-hover}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger-hover}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger-hover}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-active": {
            "$type": "color",
            "$value": "{background.color.danger-active}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger-active}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger-active}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-disabled": {
            "$type": "color",
            "$value": "{background.color.strong}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.strong}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.strong}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          }
        },
        "border": {
          "color": {
            "$type": "color",
            "$value": "transparent",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "transparent"
                },
                "dark": {
                  "$type": "color",
                  "$value": "transparent"
                }
              },
              "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
            }
          },
          "radius": {
            "$type": "dimension",
            "$value": "{border.radius.medium}",
            "$extensions": {
              "com.figma.scopes": ["CORNER_RADIUS"]
            }
          }
        },
        "focus-ring": {
          "color": {
            "$type": "color",
            "$value": "{focus.ring.color.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{focus.ring.color.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{focus.ring.color.danger}"
                }
              },
              "com.figma.scopes": ["STROKE_COLOR"]
            }
          }
        }
      },
      "secondary": {
        "foreground": {
          "color": {
            "$type": "color",
            "$value": "{foreground.color.on.danger-subdued}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-hover": {
            "$type": "color",
            "$value": "{foreground.color.on.danger-subdued-hover}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued-hover}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued-hover}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-active": {
            "$type": "color",
            "$value": "{foreground.color.on.danger-subdued-active}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued-active}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.on.danger-subdued-active}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL"]
            }
          },
          "color-disabled": {
            "$type": "color",
            "$value": "{foreground.color.subdued}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{foreground.color.subdued}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{foreground.color.subdued}"
                }
              },
              "com.figma.scopes": ["TEXT_FILL", "SHAPE_FILL", "STROKE_COLOR"]
            }
          }
        },
        "background": {
          "color": {
            "$type": "color",
            "$value": "{background.color.danger-subdued}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-hover": {
            "$type": "color",
            "$value": "{background.color.danger-subdued-hover}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued-hover}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued-hover}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-active": {
            "$type": "color",
            "$value": "{background.color.danger-subdued-active}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued-active}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.danger-subdued-active}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          },
          "color-disabled": {
            "$type": "color",
            "$value": "{background.color.strong}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{background.color.strong}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{background.color.strong}"
                }
              },
              "com.figma.scopes": ["SHAPE_FILL", "FRAME_FILL", "STROKE_COLOR"]
            }
          }
        },
        "border": {
          "color": {
            "$type": "color",
            "$value": "transparent",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "transparent"
                },
                "dark": {
                  "$type": "color",
                  "$value": "transparent"
                }
              },
              "com.figma.scopes": ["STROKE_COLOR", "SHAPE_FILL", "FRAME_FILL"]
            }
          },
          "radius": {
            "$type": "dimension",
            "$value": "{border.radius.medium}",
            "$extensions": {
              "com.figma.scopes": ["CORNER_RADIUS"]
            }
          }
        },
        "focus-ring": {
          "color": {
            "$type": "color",
            "$value": "{focus.ring.color.danger}",
            "$extensions": {
              "appearance": {
                "light": {
                  "$type": "color",
                  "$value": "{focus.ring.color.danger}"
                },
                "dark": {
                  "$type": "color",
                  "$value": "{focus.ring.color.danger}"
                }
              },
              "com.figma.scopes": ["STROKE_COLOR"]
            }
          }
        }
      }
    }
  }
}