@gitlab/ui/src/tokens/contextual/button.tokens.json

GitLab UI Components

{
  "button": {
    "default": {
      "primary": {
        "foreground": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.800}",
                "dark": "{color.neutral.50}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a default primary button in the default state."
            },
            "hover": {
              "$value": "{button.default.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a default primary button in the hover state."
            },
            "focus": {
              "$value": "{button.default.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a default primary button in the focus state."
            },
            "active": {
              "$value": "{button.default.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a default primary button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.0}",
                "dark": "rgba(137, 136, 141, 0.4)"
              },
              "$type": "color",
              "$description": "Used for the background of an default primary button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.neutral.50}",
                "dark": "rgba(137, 136, 141, 0.64)"
              },
              "$type": "color",
              "$description": "Used for the background of an default primary button in the hover state."
            },
            "focus": {
              "$value": "{button.default.primary.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of an default primary button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.neutral.100}",
                "dark": "rgba(137, 136, 141, 0.32)"
              },
              "$type": "color",
              "$description": "Used for the background of an default primary button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.200}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an default primary button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.neutral.400}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an default primary button in the hover state."
            },
            "focus": {
              "$value": "{button.default.primary.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of an default primary button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.neutral.600}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an default primary button in the active state."
            }
          }
        }
      },
      "tertiary": {
        "foreground": {
          "color": {
            "default": {
              "$value": "{action.neutral.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a default borderless, tertiary button in the default state."
            },
            "hover": {
              "$value": "{action.neutral.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a default borderless, tertiary button in the hover state."
            },
            "focus": {
              "$value": "{action.neutral.foreground.color.focus}",
              "$type": "color",
              "$description": "Used for the foreground of a default borderless, tertiary button in the focus state."
            },
            "active": {
              "$value": "{action.neutral.foreground.color.active}",
              "$type": "color",
              "$description": "Used for the foreground of a default borderless, tertiary button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": "{action.neutral.background.color.default}",
              "$type": "color",
              "$description": "Used for the background of a default borderless, tertiary button in the default state."
            },
            "hover": {
              "$value": "{action.neutral.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of a default borderless, tertiary button in the hover state."
            },
            "focus": {
              "$value": "{action.neutral.background.color.focus}",
              "$type": "color",
              "$description": "Used for the background of a default borderless, tertiary button in the focus state."
            },
            "active": {
              "$value": "{action.neutral.background.color.active}",
              "$type": "color",
              "$description": "Used for the background of a default borderless, tertiary button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": "{action.neutral.border.color.default}",
              "$type": "color",
              "$description": "Used for the border of a default borderless, tertiary button in the default state."
            },
            "hover": {
              "$value": "{action.neutral.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of a default borderless, tertiary button in the hover state."
            },
            "focus": {
              "$value": "{action.neutral.border.color.focus}",
              "$type": "color",
              "$description": "Used for the border of a default borderless, tertiary button in the focus state."
            },
            "active": {
              "$value": "{action.neutral.border.color.active}",
              "$type": "color",
              "$description": "Used for the border of a default borderless, tertiary button in the active state."
            }
          }
        }
      }
    },
    "confirm": {
      "primary": {
        "foreground": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.0}",
                "dark": "{color.neutral.950}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) primary button in the default state."
            },
            "hover": {
              "$value": "{action.strong.confirm.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) primary button in the hover state."
            },
            "focus": {
              "$value": "{action.strong.confirm.foreground.color.focus}",
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) primary button in the focus state."
            },
            "active": {
              "$value": "{action.strong.confirm.foreground.color.active}",
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) primary button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": "{action.strong.confirm.background.color.default}",
              "$type": "color",
              "$description": "Used for the background of a confirm (positive) primary button in the default state."
            },
            "hover": {
              "$value": "{action.strong.confirm.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of a confirm (positive) primary button in the hover state."
            },
            "focus": {
              "$value": "{action.strong.confirm.background.color.focus}",
              "$type": "color",
              "$description": "Used for the background of a confirm (positive) primary button in the focus state."
            },
            "active": {
              "$value": "{action.strong.confirm.background.color.active}",
              "$type": "color",
              "$description": "Used for the background of a confirm (positive) primary button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.blue.600}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a confirm (positive) primary button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.blue.800}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a confirm (positive) primary button in the hover state."
            },
            "focus": {
              "$value": "{button.confirm.primary.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of a confirm (positive) primary button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.blue.900}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a confirm (positive) primary button in the active state."
            }
          }
        }
      },
      "secondary": {
        "foreground": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.blue.500}",
                "dark": "{color.blue.100}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.blue.700}",
                "dark": "{color.blue.100}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{button.confirm.secondary.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.blue.900}",
                "dark": "{color.blue.100}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a confirm (positive) button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.0}",
                "dark": "rgba(66, 143, 220, 0.4)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined confirm (positive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.blue.50}",
                "dark": "rgba(66, 143, 220, 0.64)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{button.confirm.secondary.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of an outlined confirm (positive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.blue.100}",
                "dark": "rgba(66, 143, 220, 0.32)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined confirm (positive) button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.blue.500}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined confirm (positive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.blue.700}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{button.confirm.secondary.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of an outlined confirm (positive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.blue.900}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined confirm (positive) button in the active state."
            }
          }
        }
      },
      "tertiary": {
        "foreground": {
          "color": {
            "default": {
              "$value": "{action.confirm.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the default state."
            },
            "hover": {
              "$value": "{action.confirm.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{action.confirm.foreground.color.focus}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state."
            },
            "active": {
              "$value": "{action.confirm.foreground.color.active}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": "{action.confirm.background.color.default}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary confirm (positive) button in the default state."
            },
            "hover": {
              "$value": "{action.confirm.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{action.confirm.background.color.focus}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary confirm (positive) button in the focus state."
            },
            "active": {
              "$value": "{action.confirm.background.color.active}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary confirm (positive) button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": "{action.confirm.border.color.default}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary confirm (positive) button in the default state."
            },
            "hover": {
              "$value": "{action.confirm.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary confirm (positive) button in the hover state."
            },
            "focus": {
              "$value": "{action.confirm.border.color.focus}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary confirm (positive) button in the focus state."
            },
            "active": {
              "$value": "{action.confirm.border.color.active}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary confirm (positive) button in the active state."
            }
          }
        }
      }
    },
    "danger": {
      "primary": {
        "foreground": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.0}",
                "dark": "{color.neutral.950}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) primary button in the default state."
            },
            "hover": {
              "$value": "{button.danger.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) primary button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) primary button in the focus state."
            },
            "active": {
              "$value": "{button.danger.primary.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) primary button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.red.500}",
                "dark": "{color.red.300}"
              },
              "$type": "color",
              "$description": "Used for the background of a danger (destructive) primary button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.red.600}",
                "dark": "{color.red.200}"
              },
              "$type": "color",
              "$description": "Used for the background of a danger (destructive) primary button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.primary.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of a danger (destructive) primary button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.red.800}",
                "dark": "{color.red.400}"
              },
              "$type": "color",
              "$description": "Used for the background of a danger (destructive) primary button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.red.600}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a danger (destructive) primary button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.red.800}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a danger (destructive) primary button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.primary.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of a danger (destructive) primary button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.red.900}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of a danger (destructive) primary button in the active state."
            }
          }
        }
      },
      "secondary": {
        "foreground": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.red.500}",
                "dark": "{color.red.100}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.red.700}",
                "dark": "{color.red.50}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.secondary.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.red.900}",
                "dark": "{color.red.50}"
              },
              "$type": "color",
              "$description": "Used for the foreground of a danger (destructive) button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.neutral.0}",
                "dark": "rgba(236, 89, 65, 0.40)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined danger (destructive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.red.50}",
                "dark": "rgba(236, 89, 65, 0.64)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.secondary.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of an outlined danger (destructive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.red.100}",
                "dark": "rgba(236, 89, 65, 0.32)"
              },
              "$type": "color",
              "$description": "Used for the background of an outlined danger (destructive) button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": {
                "default": "{color.red.500}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined danger (destructive) button in the default state."
            },
            "hover": {
              "$value": {
                "default": "{color.red.700}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{button.danger.secondary.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of an outlined danger (destructive) button in the focus state."
            },
            "active": {
              "$value": {
                "default": "{color.red.900}",
                "dark": "{color.alpha.0}"
              },
              "$type": "color",
              "$description": "Used for the border of an outlined danger (destructive) button in the active state."
            }
          }
        }
      },
      "tertiary": {
        "foreground": {
          "color": {
            "default": {
              "$value": "{action.danger.foreground.color.default}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the default state."
            },
            "hover": {
              "$value": "{action.danger.foreground.color.hover}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{action.danger.foreground.color.focus}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state."
            },
            "active": {
              "$value": "{action.danger.foreground.color.active}",
              "$type": "color",
              "$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the active state."
            }
          }
        },
        "background": {
          "color": {
            "default": {
              "$value": "{action.danger.background.color.default}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary danger (destructive) button in the default state."
            },
            "hover": {
              "$value": "{action.danger.background.color.hover}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{action.danger.background.color.focus}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary danger (destructive) button in the focus state."
            },
            "active": {
              "$value": "{action.danger.background.color.active}",
              "$type": "color",
              "$description": "Used for the background of a borderless, tertiary danger (destructive) button in the active state."
            }
          }
        },
        "border": {
          "color": {
            "default": {
              "$value": "{action.danger.border.color.default}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary danger (destructive) button in the default state."
            },
            "hover": {
              "$value": "{action.danger.border.color.hover}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary danger (destructive) button in the hover state."
            },
            "focus": {
              "$value": "{action.danger.border.color.focus}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary danger (destructive) button in the focus state."
            },
            "active": {
              "$value": "{action.danger.border.color.active}",
              "$type": "color",
              "$description": "Used for the border of a borderless, tertiary danger (destructive) button in the active state."
            }
          }
        }
      }
    },
    "dashed": {
      "border": {
        "color": {
          "default": {
            "$value": {
              "default": "{color.neutral.400}",
              "dark": "{color.neutral.400}"
            },
            "$type": "color",
            "$description": "Used for the border of a dashed button in the default state."
          },
          "hover": {
            "$value": "{button.dashed.border.color.default}",
            "$type": "color",
            "$description": "Used for the border of a dashed button in the hover state."
          },
          "focus": {
            "$value": "{button.dashed.border.color.default}",
            "$type": "color",
            "$description": "Used for the border of a dashed button in the focus state."
          },
          "active": {
            "$value": {
              "default": "{color.neutral.600}",
              "dark": "{color.neutral.300}"
            },
            "$type": "color",
            "$description": "Used for the border of a dashed button in the active state."
          }
        }
      }
    },
    "link": {
      "text": {
        "color": {
          "default": {
            "$value":  "{text.color.link}",
            "$type": "color",
            "$description": "Used for the text of a link button in the default state."
          },
          "hover": {
            "$value": "{button.link.text.color.default}",
            "$type": "color",
            "$description": "Used for the text of a link button in the hover state."
          },
          "focus": {
            "$value": "{button.link.text.color.default}",
            "$type": "color",
            "$description": "Used for the text of a link button in the focus state."
          },
          "active": {
            "$value": "{button.link.text.color.default}",
            "$type": "color",
            "$description": "Used for the text of a link button in the active state."
          }
        }
      }
    },
    "selected": {
      "foreground": {
        "color": {
          "default": {
            "$value": {
              "default": "{button.default.primary.foreground.color.default}",
              "dark": "{color.neutral.900}"
            },
            "$type": "color",
            "$description": "Used for the foreground of a selected button in the default state."
          },
          "hover": {
            "$value": {
              "default": "{button.default.primary.foreground.color.hover}",
              "dark": "{color.neutral.950}"
            },
            "$type": "color",
            "$description": "Used for the foreground of a selected button in the hover state."
          },
          "focus": {
            "$value": {
              "default": "{button.default.primary.foreground.color.focus}",
              "dark": "{color.neutral.950}"
            },
            "$type": "color",
            "$description": "Used for the foreground of a selected button in the focus state."
          },
          "active": {
            "$value": {
              "default": "{button.default.primary.foreground.color.active}",
              "dark": "{color.neutral.950}"
            },
            "$type": "color",
            "$description": "Used for the foreground of a selected button in the active state."
          }
        }
      },
      "background": {
        "color": {
          "default": {
            "$value": {
              "default": "{color.neutral.50}",
              "dark": "{color.neutral.300}"
            },
            "$type": "color",
            "$description": "Used for the background of a selected button in the default state."
          },
          "hover": {
            "$value": {
              "default": "{button.default.primary.background.color.hover}",
              "dark": "{color.neutral.200}"
            },
            "$type": "color",
            "$description": "Used for the background of a selected button in the hover state."
          },
          "focus": {
            "$value": {
              "default": "{button.default.primary.background.color.focus}",
              "dark": "{color.neutral.200}"
            },
            "$type": "color",
            "$description": "Used for the background of a selected button in the focus state."
          },
          "active": {
            "$value": {
              "default": "{button.default.primary.background.color.active}",
              "dark": "{color.neutral.400}"
            },
            "$type": "color",
            "$description": "Used for the background of a selected button in the active state."
          }
        }
      },
      "border": {
        "color": {
          "default": {
            "$value": {
              "default": "{color.neutral.300}",
              "dark": "{color.alpha.0}"
            },
            "$type": "color",
            "$description": "Used for the border of a selected button in the default state."
          },
          "hover": {
            "$value": {
              "default": "{color.neutral.400}",
              "dark": "{color.alpha.0}"
            },
            "$type": "color",
            "$description": "Used for the border of a selected button in the hover state."
          },
          "focus": {
            "$value": "{button.selected.border.color.hover}",
            "$type": "color",
            "$description": "Used for the border of a selected button in the focus state."
          },
          "active": {
            "$value": {
              "default": "{color.neutral.600}",
              "dark": "{color.alpha.0}"
            },
            "$type": "color",
            "$description": "Used for the border of a selected button in the active state."
          }
        }
      }
    },
    "disabled": {
      "foreground": {
        "color": {
          "$value": {
            "default": "{color.neutral.500}",
            "dark": "{color.neutral.400}"
          },
          "$type": "color",
          "$description": "Used for the foreground of a disabled button."
        }
      },
      "background": {
        "color": {
          "$value": {
            "default": "{color.neutral.10}",
            "dark": "rgba(137, 136, 141, 0.16)"
          },
          "$type": "color",
          "$description": "Used for the background of a disabled button."
        }
      },
      "border": {
        "color": {
          "$value": {
            "default": "{color.neutral.100}",
            "dark": "{color.alpha.0}"
          },
          "$type": "color",
          "$description": "Used for the border of a disabled button."
        }
      }
    }
  }
}