@gitlab/duo-ui 0.1.0

package/src/tokens/contextual/button.tokens.json

@@ -0,0 +1,874 @@
+{
+  "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": "{color.neutral.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of an default primary button in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.neutral.50}",
+                "dark": "{color.neutral.900}"
+              },
+              "$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": "{color.neutral.800}"
+              },
+              "$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.neutral.700}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of an default primary button in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.neutral.400}",
+                "dark": "{color.neutral.500}"
+              },
+              "$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.neutral.300}"
+              },
+              "$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": "{action.strong.confirm.foreground.color.default}",
+              "$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.blue.300}"
+              },
+              "$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.blue.100}"
+              },
+              "$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.blue.50}"
+              },
+              "$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.400}"
+              },
+              "$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.200}"
+              },
+              "$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.50}"
+              },
+              "$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": "{color.neutral.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of an outlined confirm (positive) button in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.blue.50}",
+                "dark": "{color.blue.900}"
+              },
+              "$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": "{color.blue.800}"
+              },
+              "$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.blue.400}"
+              },
+              "$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.blue.200}"
+              },
+              "$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.blue.50}"
+              },
+              "$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": "{color.neutral.0}",
+              "$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.400}"
+              },
+              "$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.300}"
+              },
+              "$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.100}"
+              },
+              "$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.red.300}"
+              },
+              "$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.red.100}"
+              },
+              "$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.red.50}"
+              },
+              "$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.400}"
+              },
+              "$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.200}"
+              },
+              "$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": "{color.neutral.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of an outlined danger (destructive) button in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$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": "{color.red.800}"
+              },
+              "$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.red.400}"
+              },
+              "$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.red.200}"
+              },
+              "$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.red.50}"
+              },
+              "$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": "{border.color.strong}",
+            "$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": "{button.default.primary.foreground.color.default}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected button in the default state."
+          },
+          "hover": {
+            "$value": "{button.default.primary.foreground.color.hover}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected button in the hover state."
+          },
+          "focus": {
+            "$value": "{button.default.primary.foreground.color.focus}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected button in the focus state."
+          },
+          "active": {
+            "$value": "{button.default.primary.foreground.color.active}",
+            "$type": "color",
+            "$description": "Used for the foreground of a selected button in the active state."
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "default": {
+            "$value": "{button.default.primary.background.color.default}",
+            "$type": "color",
+            "$description": "Used for the background of a selected button in the default state."
+          },
+          "hover": {
+            "$value": "{button.default.primary.background.color.hover}",
+            "$type": "color",
+            "$description": "Used for the background of a selected button in the hover state."
+          },
+          "focus": {
+            "$value": "{button.default.primary.background.color.focus}",
+            "$type": "color",
+            "$description": "Used for the background of a selected button in the focus state."
+          },
+          "active": {
+            "$value": "{button.default.primary.background.color.active}",
+            "$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.neutral.600}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of a selected button in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.neutral.400}",
+              "dark": "{color.neutral.500}"
+            },
+            "$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.neutral.300}"
+            },
+            "$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": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "$description": "Used for the background of a disabled button."
+        }
+      },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "$description": "Used for the border of a disabled button."
+        }
+      }
+    }
+  }
+}