/**
* wp-admin buttons, styled from WordPress Design System tokens.
*
* Target: visual parity with the React `Button`
* (packages/components/src/button/style.scss). The React component is the
* source of truth for *values*. The selectors here are hand-authored against
* the admin's markup and are deliberately NOT derived from it — deriving selectors
* is what sank the earlier generation POC.
*
* Cascade: everything lives in the `wpds` layer, which sits above `wp-legacy`,
* where load.php demotes WordPress's own buttons.css. Layer order means the plain
* selectors below beat WordPress's more specific ones with no specificity
* escalation — and unlayered plugin CSS still beats us, which is the point.
*
* NO `!important` IN THIS FILE. Measured: a layered `!important` outranks a
* third-party plugin's *unlayered* `!important`, even when the plugin's
* stylesheet loads later. That would silently break overrides the ecosystem
* has relied on for years. Enforced by stylelint.
*
* Colours come in the design system's matched background and foreground
* pairs, state by state, exactly as `@wordpress/ui` Button uses them. Never mix
* a pair's background with another pair's foreground: the pairs are what
* guarantee contrast. They follow the user's colour scheme through
* 05-scheme-tokens.css.
*/
@layer wpds-overrides, wp-legacy, wpds;
@layer wpds {
/* -----------------------------------------------------------------------
Base — shared by default, primary and secondary
----------------------------------------------------------------------- */
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/*
* NO height here, deliberately. WordPress's default is already 40px, which is
* exactly --wpds-dimension-size-lg, so asserting it gains nothing — and it
* costs a great deal, because a height declared in this layer outranks
* WordPress's CONTEXTUAL overrides regardless of their specificity. WordPress makes
* 67 such rules (`.wp-core-ui .tablenav .button` and friends) to make
* toolbars compact; declaring a height here silently flattened all of
* them, and the list-table toolbar rendered as a mix of 32px and 40px
* controls that no longer shared a midline.
*
* Height belongs to buttons.css. Appearance is ours.
*/
margin: 0;
padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-md);
font-family: inherit;
font-size: var(--wpds-typography-font-size-md);
font-weight: var(--wpds-typography-font-weight-emphasis);
/*
* `normal`, not `1`. A line box exactly as tall as the font is shorter than
* the font's own ascender-plus-descender — measured, 13px against 15px — so a
* descender has nowhere to go. On the `.button` anchors it simply overflows,
* which is invisible, but `#submit` is an `` and those
* clip their content by default, so "Save Changes" lost the tail of its "g".
* Same defect the text inputs had in 20-input.css.
*
* There is no token for this: the line-height tokens are pixel values on a
* 4px rhythm (16, 20, 24…) meant to pair with a size, and the smallest of
* them would pin the label's box rather than let the font size it. `normal`
* cannot clip and does not compete with the contextual heights WordPress sets.
*/
line-height: normal;
text-decoration: none;
white-space: nowrap;
/*
* NO vertical-align either. WordPress varies it by context — `top` for the
* base, `baseline` for `p .button`, `middle` for `.button-group` — and a
* blanket value here flattens those the same way a height would. It is how
* the control sits in a line of other content, which is layout, not
* appearance. Measured: forcing `top` pushed the list table's "156 items"
* label 7px above the midline of its own toolbar.
*
* `line-height` stays ours: it pairs with our padding to centre the label
* inside the box, and reverting it makes buttons 34px tall.
*/
appearance: none;
cursor: var(--wpds-cursor-control);
border: var(--wpds-border-width-xs) solid transparent;
border-radius: var(--wpds-border-radius-sm);
background: none;
color: var(--wpds-color-foreground-content-neutral);
box-shadow: none;
text-shadow: none;
}
/* -----------------------------------------------------------------------
Button groups
The base rule's `margin` and `border-radius` apply to every button, and
from this layer they outrank buttons.css's `.button-group` rules, which
join grouped buttons into one control: square inner corners, and a -1px
margin so neighbouring borders overlap instead of doubling. That joining
is geometry, so it is repeated here from buttons.css with only the radius
value taken from the scale.
----------------------------------------------------------------------- */
.wp-core-ui .button-group > .button {
border-radius: 0;
margin-inline-end: -1px;
}
.wp-core-ui .button-group > .button:first-child {
border-start-start-radius: var(--wpds-border-radius-sm);
border-end-start-radius: var(--wpds-border-radius-sm);
}
.wp-core-ui .button-group > .button:last-child {
border-start-end-radius: var(--wpds-border-radius-sm);
border-end-end-radius: var(--wpds-border-radius-sm);
}
.wp-core-ui .button-group > .button-primary + .button {
border-inline-start: 0;
}
/* -----------------------------------------------------------------------
Focus — outline/outline-offset, never box-shadow.
WordPress's legacy ring is a box-shadow; the base rule above clears it.
----------------------------------------------------------------------- */
.wp-core-ui .button:focus,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-secondary:focus,
.wp-core-ui .button.focus,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-secondary.focus {
outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
outline-offset: var(--wpds-border-width-focus);
box-shadow: none;
}
/* React suppresses the ring while the button is actively pressed. */
.wp-core-ui .button:focus:active,
.wp-core-ui .button-primary:focus:active,
.wp-core-ui .button-secondary:focus:active {
outline-color: transparent;
}
/* -----------------------------------------------------------------------
Default and secondary — `@wordpress/ui` Button, brand tone, outline
----------------------------------------------------------------------- */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
border-color: var(--wpds-color-stroke-interactive-brand);
color: var(--wpds-color-foreground-interactive-brand);
background: var(--wpds-color-background-interactive-brand-weak);
}
@media not (prefers-reduced-motion) {
.wp-core-ui .button,
.wp-core-ui .button-secondary {
transition: border-color 0.1s linear;
}
}
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.hover,
.wp-core-ui .button-secondary.hover {
border-color: var(--wpds-color-stroke-interactive-brand-active);
color: var(--wpds-color-foreground-interactive-brand-active);
background: var(--wpds-color-background-interactive-brand-weak-active);
}
/*
* Pressed takes the same border as hover. `@wordpress/ui` Button drives
* hover, active and focus from one `border-color-active` custom property,
* and the persistent `.active` rule below already uses that value, so an
* earlier `border-color: transparent` here was the only state in this file
* that dropped the edge — the button appeared to lose its outline for as
* long as the pointer was down.
*/
.wp-core-ui .button:active,
.wp-core-ui .button-secondary:active {
border-color: var(--wpds-color-stroke-interactive-brand-active);
background: var(--wpds-color-background-interactive-brand-weak-active);
}
/*
* `.active` is a PERSISTENT selected state in the admin, toggled by
* legacy admin JS. It is not `:active`. Never conflate the two.
*/
.wp-core-ui .button.active,
.wp-core-ui .button-secondary.active {
border-color: var(--wpds-color-stroke-interactive-brand-active);
color: var(--wpds-color-foreground-interactive-brand-active);
background: var(--wpds-color-background-interactive-brand-weak-active);
}
/* -----------------------------------------------------------------------
The page title action — appearance only
"Add Post" and its siblings are `` with no
`button` class, so none of the rules above reach them. They still look
like our buttons, because WordPress draws them with
`var(--wp-admin-theme-color)` and the scheme tokens now feed that — but
the weight stays WordPress's 500 while every real button is at the emphasis
token, which is the difference you see side by side in a list table header.
Only the weight is taken. WordPress gives this control `min-height: 40px`,
`line-height: 2.71428571` and `top: -3px` to sit it against the page
title, and adopting it properly means taking on that geometry — which is
the contextual sizing this experiment leaves alone on purpose. Covering
the control fully is a separate question; matching the weight is not.
----------------------------------------------------------------------- */
.wrap .page-title-action {
font-weight: var(--wpds-typography-font-weight-emphasis);
}
/*
* And the focus ring, for the same reason. WordPress rings this control with
* `box-shadow: 0 0 0 1px` plus an accent border and a transparent outline for
* forced-colors mode, while every button above takes an `outline`. Side by
* side the two rings read as different controls. Appearance again, so it is
* safe to take; the geometry stays WordPress's.
*/
.wrap .page-title-action:focus {
outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
outline-offset: var(--wpds-border-width-focus);
box-shadow: none;
}
/* -----------------------------------------------------------------------
Primary — `@wordpress/ui` Button, brand tone, solid. The border takes
the background colour, as it does there.
----------------------------------------------------------------------- */
.wp-core-ui .button-primary {
border-color: var(--wpds-color-background-interactive-brand-strong);
background: var(--wpds-color-background-interactive-brand-strong);
color: var(--wpds-color-foreground-interactive-brand-strong);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:active,
.wp-core-ui .button-primary.active {
border-color: var(--wpds-color-background-interactive-brand-strong-active);
background: var(--wpds-color-background-interactive-brand-strong-active);
color: var(--wpds-color-foreground-interactive-brand-strong-active);
}
/* -----------------------------------------------------------------------
Disabled — the admin drives this from classes as well as attributes.
buttons.css marks most of these `!important`; 99-overrides.css repeats
the same values to cancel that.
----------------------------------------------------------------------- */
.wp-core-ui .button:disabled,
.wp-core-ui .button[disabled],
.wp-core-ui .button.disabled,
.wp-core-ui .button[aria-disabled="true"],
.wp-core-ui .button-secondary:disabled,
.wp-core-ui .button-secondary[disabled],
.wp-core-ui .button-secondary.disabled,
.wp-core-ui .button-secondary[aria-disabled="true"],
.wp-core-ui .button-disabled {
border-color: var(--wpds-color-stroke-interactive-brand-disabled);
color: var(--wpds-color-foreground-interactive-brand-disabled);
background: var(--wpds-color-background-interactive-brand-weak-disabled);
transform: none;
}
.wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary[disabled],
.wp-core-ui .button-primary.disabled,
.wp-core-ui .button-primary[aria-disabled="true"],
.wp-core-ui .button-primary-disabled {
border-color: var(--wpds-color-background-interactive-brand-strong-disabled);
background: var(--wpds-color-background-interactive-brand-strong-disabled);
color: var(--wpds-color-foreground-interactive-brand-strong-disabled);
}
/* Disabled buttons keep their focus ring when focused. */
.wp-core-ui .button:disabled:focus,
.wp-core-ui .button[aria-disabled="true"]:focus,
.wp-core-ui .button-primary:disabled:focus,
.wp-core-ui .button-primary[aria-disabled="true"]:focus {
outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
outline-offset: var(--wpds-border-width-focus);
}
}