* Breakpoints & Media Queries
* Please use variables from this sheet to ensure consistency across the UI.
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
* Fonts & basic variables.
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
* These variables do not appear to be used anywhere else.
* Long content fade mixin
* Creates a fading overlay to signify that the content is longer
* Applies editor left position to the selector passed as argument
* Styles that are reused verbatim in a few places
* Allows users to opt-out of animations via OS-level preferences.
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
* Reset the WP Admin page styles for Gutenberg-like pages.
* These are default block editor widths in case the theme doesn't provide them.
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-border-width-focus: 2px;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
--wp-admin-border-width-focus: 1.5px;
.components-animate__appear {
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-animate__appear {
.components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left {
transform-origin: top right;
.components-animate__appear.is-from-top.is-from-right {
transform-origin: top left;
.components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left {
transform-origin: bottom right;
.components-animate__appear.is-from-bottom.is-from-right {
transform-origin: bottom left;
@keyframes components-animate__appear-animation {
transform: translateY(-2em) scaleY(0) scaleX(0);
transform: translateY(0%) scaleY(1) scaleX(1);
.components-animate__slide-in {
animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-animate__slide-in {
.components-animate__slide-in.is-from-left {
transform: translateX(-100%);
.components-animate__slide-in.is-from-right {
transform: translateX(100%);
@keyframes components-animate__slide-in-animation {
transform: translateX(0%);
.components-animate__loading {
animation: components-animate__loading 1.6s ease-in-out infinite;
@keyframes components-animate__loading {
.components-autocomplete__popover .components-popover__content > div {
.components-autocomplete__result.components-button {
.components-autocomplete__result.components-button.is-selected {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
.components-button-group {
.components-button-group .components-button {
box-shadow: inset 0 0 0 1px #1e1e1e;
.components-button-group .components-button + .components-button {
.components-button-group .components-button:first-child {
border-radius: 0 2px 2px 0;
.components-button-group .components-button:last-child {
border-radius: 2px 0 0 2px;
.components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
.components-button-group .components-button.is-primary {
box-shadow: inset 0 0 0 1px #1e1e1e;
-webkit-appearance: none;
transition: box-shadow 0.1s linear;
* Secondary and tertiary buttons.
* Secondary button style.
@media (prefers-reduced-motion: reduce) {
.components-button[aria-expanded=true], .components-button:hover {
color: var(--wp-admin-theme-color);
.components-button[aria-disabled=true]:hover {
.components-button:focus:not(:disabled) {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 3px solid transparent;
.components-button.is-primary {
background: var(--wp-admin-theme-color);
outline: 1px solid transparent;
.components-button.is-primary:hover:not(:disabled) {
background: var(--wp-admin-theme-color-darker-10);
.components-button.is-primary:active:not(:disabled) {
background: var(--wp-admin-theme-color-darker-20);
border-color: var(--wp-admin-theme-color-darker-20);
.components-button.is-primary:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #007cba;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
color: rgba(255, 255, 255, 0.4);
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
.components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba;
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
.components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
background-size: 100px 100%;
background-image: linear-gradient(45deg, #007cba 33%, #005a87 33%, #005a87 70%, #007cba 70%);
background-image: linear-gradient(45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
border-color: var(--wp-admin-theme-color);
.components-button.is-secondary, .components-button.is-tertiary {
outline: 1px solid transparent;
.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
color: var(--wp-admin-theme-color-darker-10);
.components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
color: var(--wp-admin-theme-color-darker-10);
box-shadow: inset 0 0 0 1px #006ba1;
box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
.components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
.components-button.is-secondary {
box-shadow: inset 0 0 0 1px #007cba;
box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
outline: 1px solid transparent;
color: var(--wp-admin-theme-color);
.components-button.is-tertiary {
color: var(--wp-admin-theme-color);
.components-button.is-tertiary .dashicon {
.components-button.is-destructive {
box-shadow: inset 0 0 0 1px #cc1818;
.components-button.is-destructive:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px #710d0d;
.components-button.is-destructive:focus:not(:disabled) {
color: var(--wp-admin-theme-color);
.components-button.is-destructive:active:not(:disabled) {
.components-button.is-destructive.is-primary {
box-shadow: inset 0 0 0 1px #cc1818;
.components-button.is-destructive.is-primary:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px #710d0d;
.components-button.is-link {
/* Mimics the default link style in common.css */
text-decoration: underline;
transition-property: border, background, color;
transition-duration: 0.05s;
transition-timing-function: ease-in-out;
@media (prefers-reduced-motion: reduce) {
.components-button.is-link {
.components-button.is-link:hover:not(:disabled), .components-button.is-link:active:not(:disabled) {
.components-button.is-link:focus {
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
box-shadow: 0 0 0 1px #5b9dd9, 0 0 var(--wp-admin-border-width-focus) 1px rgba(30, 140, 190, 0.8);
.components-button.is-link.is-destructive {
.components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) {
.components-button.is-link.is-destructive:focus:not(:disabled) {
color: var(--wp-admin-theme-color);
.components-button:not([aria-disabled=true]):active {
.components-button:disabled, .components-button[aria-disabled=true] {
.components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
animation: components-button__busy-animation 2500ms infinite linear;
background-size: 100px 100%;
background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
.components-button.is-small {
.components-button.is-small.has-icon:not(.has-text) {
.components-button.has-icon {
.components-button.has-icon .dashicon {
.components-button.has-icon.has-text {
.components-button.has-icon.has-text svg {
.components-button.is-pressed {
.components-button.is-pressed:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #007cba;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-button.is-pressed:hover:not(:disabled) {
.components-button .components-visually-hidden {
@keyframes components-button__busy-animation {
background-position: 200px 0;
.components-checkbox-control__input[type=checkbox] {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border: 1px solid #757575;
/* Fonts smaller than 16px causes mobile safari to zoom. */
/* Override core line-height. To be reviewed. */
border: 1px solid #1e1e1e;