j3w1/theme implementation brief — button
theme: j3w1-theme 1.1.0  profile: default  sourceDigest: sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=
pin: https://raw.githubusercontent.com/j3w1/theme/v1.1.0/exports/components/button.json
spec: spec/components/button.md  site: https://j3w1.github.io/theme/reference/#c-button
maturity: stable  priority: R1

Summary: The native push button in the four action tones; primary is the only filled button at rest, destructive fills on hover and always needs a confirmation or an undo.

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
Tokens (resolved):
  root.bg                    #7d1310  ({color.action.primary.bg})  use
  root.text                  #f4eeee  ({color.action.primary.text})  use
  root.border                #9e231f  ({color.action.primary.border})  use
  root.bg-hover              #911410  ({color.action.primary.hover-bg})  use
  root.bg-active             #630f0d  ({color.action.primary.pressed-bg})  use
  root.ring                  #ffa2a7  ({color.interaction.focus.ring-container})  use
  secondary.bg               rgb(0 0 0 / 0%)  ({color.action.secondary.bg})  use
  secondary.text             #ffa2a7  ({color.action.secondary.text})  use
  secondary.border           #a3676b  ({color.action.secondary.border})  use
  secondary.bg-hover         #630f0d  ({color.action.secondary.hover-bg})  use
  secondary.bg-active        #420f0c  ({color.action.secondary.pressed-bg})  use
  secondary.ring             #e53935  ({color.interaction.focus.ring})  use
  tertiary.text              #e99499  ({color.action.tertiary.text})  use
  tertiary.bg-hover          #1c0a09  ({color.action.tertiary.hover-bg})  use
  tertiary.bg-active         #420f0c  ({color.interaction.pressed.bg})  use
  destructive.text           #f73f35  ({color.action.destructive.text})  use
  destructive.border         #e53935  ({color.action.destructive.border})  use
  destructive.bg-hover       #dc282e  ({color.action.destructive.hover-bg})  use
  destructive.text-hover     #f9faf9  ({color.action.destructive.hover-text})  use
  destructive.bg-active      #ae1914  ({color.action.destructive.pressed-bg})  use
  destructive.bg-filled      #dc282e  ({color.action.destructive.filled-bg})  use
  destructive.text-filled    #f9faf9  ({color.action.destructive.filled-text})  use
  root.border-active         #9e231f  ({color.action.primary.border})  use
  secondary.border-active    #e53935  ({color.border.active})  use
  tertiary.border-active     #e53935  ({color.border.active})  use
  destructive.border-active  #e53935  ({color.action.destructive.border})  use
  root.text-disabled         #8a5559  ({color.text.disabled})  use
  root.bg-disabled           #160b0b  ({color.interaction.disabled.bg})  use
  root.border-disabled       #7d1310  ({color.border.disabled})  use
  loading.glyph              #f4eeee  ({color.action.primary.text})  use

States: default, hover, focus-visible, active, disabled, loading
  default: primary: {color.action.primary.bg} fill, {color.action.primary.text}, 1px {color.action.primary.border}; secondary: 1px {color.action.secondary.border}, {color.action.secondary.text}; tertiary: {color.action.tertiary.text}, no border; destructive: 1px {color.action.destructive.border}, {color.action.destructive.text} [—]
  hover: primary → {color.action.primary.hover-bg}; secondary → {color.action.secondary.hover-bg}; tertiary → {color.action.tertiary.hover-bg}; destructive fills {color.action.destructive.hover-bg} with {color.action.destructive.hover-text} [cursor: pointer; hover-capable pointers only]
  focus-visible: ring 1px dashed at −2px: {color.interaction.focus.ring-container} on the primary fill, {color.interaction.focus.ring} on the outline tones, {color.action.destructive.hover-text} on the destructive hover fill [the ring]
  active: primary → {color.action.primary.pressed-bg}; secondary → {color.action.secondary.pressed-bg}; tertiary → {color.interaction.pressed.bg}; destructive → {color.action.destructive.pressed-bg}; primary keeps {color.action.primary.border}, secondary and tertiary use {color.border.active}, destructive keeps {color.action.destructive.border} (D-015) [border change on secondary and tertiary; no translation or scale]
  disabled: {color.text.disabled} on {color.interaction.disabled.bg} with 1px {color.border.disabled}, every tone alike; no hover or active styling [`disabled`; cursor: not-allowed; never opacity]
  loading: size unchanged; the static `⋯` glyph replaces the icon; the button keeps its tone and stays focusable but ignores activation [glyph; `aria-busy`]

Keyboard:
  Tab / Shift+Tab: Moves focus to and from the button in document order.
  Enter / Space: Activates (native); Space activates on key up.

ARIA: native <button type="button"> (https://www.w3.org/WAI/ARIA/apg/patterns/button/)
Responsive: Width follows the label; a full-width modifier is a layout decision outside the theme. Groups of buttons wrap at 320px rather than shrinking below the density height. RTL mirrors the icon side.
Portability: native <button type="button">, or type="submit" in forms; never a div or a link with role="button"; the four tones are class modifiers on the same element; loading through aria-busy and a static glyph, not a spinner.
  native: GTK4 Button with the suggested-action and destructive-action style classes.
  native: Qt QPushButton stylesheet with a dynamic tone property.
  native: Terminal UI: bracketed label; primary inverted; destructive in slot 5.

Rules: use only these values; no invented colours; radius 0; borders 1px (2px emphasis); focus is a 1px dashed ring, selection is a fill;
do not restyle unrelated elements; report deviations per agents/consume.md; record theme.lock.json at the pinned revision.