WordPress.org
Get WordPress

Make WordPress Core

Changeset 62154


Ignore:
Timestamp:
03/26/2026 07:03:54 PM (40 hours ago)
Author:
joedolson
Message:

Admin: Add CSS fallback values in button and media views.

Since button and media view CSS can sometimes be enqueued by extenders in contexts where either wp-base-styles are not present or the body wrapper class is omitted, these variables should use fallback values.

Reviewed by audrasjb.
Props huzaifaalmesbah, wildworks, mukesh27, noruzzaman, joedolson, sabernhardt, audrasjb, shailu25.
Fixes #64840.

Location:
trunk/src/wp-includes/css
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/css/buttons.css

    r62106 r62154  
    148148.wp-core-ui .button,
    149149.wp-core-ui .button-secondary {
    150     color: var(--wp-admin-theme-color);
    151     border-color: var(--wp-admin-theme-color);
     150    color: var(--wp-admin-theme-color, #3858e9);
     151    border-color: var(--wp-admin-theme-color, #3858e9);
    152152    background: transparent;
    153153    vertical-align: top;
    … …  
    161161.wp-core-ui .button:hover,
    162162.wp-core-ui .button-secondary:hover {
    163     background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
    164     border-color: var(--wp-admin-theme-color-darker-20);
    165     color: var(--wp-admin-theme-color-darker-20);
     163    background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.04);
     164    border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
     165    color: var(--wp-admin-theme-color-darker-20, #183ad6);
    166166}
    167167
    … …  
    170170.wp-core-ui .button-secondary:focus {
    171171    background: transparent;
    172     border-color: var(--wp-admin-theme-color);
    173     color: var(--wp-admin-theme-color);
    174     box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     172    border-color: var(--wp-admin-theme-color, #3858e9);
     173    color: var(--wp-admin-theme-color, #3858e9);
     174    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    175175    /* Only visible in Windows High Contrast mode */
    176176    outline: 1px solid transparent;
    … …  
    182182.wp-core-ui .button:active,
    183183.wp-core-ui .button-secondary:active {
    184     background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    185     border-color: var(--wp-admin-theme-color-darker-20);
    186     color: var(--wp-admin-theme-color-darker-20);
     184    background: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
     185    border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
     186    color: var(--wp-admin-theme-color-darker-20, #183ad6);
    187187    box-shadow: none;
    188188}
    … …  
    191191.wp-core-ui .button.active,
    192192.wp-core-ui .button.active:hover {
    193     background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    194     color: var(--wp-admin-theme-color-darker-20);
    195     border-color: var(--wp-admin-theme-color);
     193    background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.08);
     194    color: var(--wp-admin-theme-color-darker-20, #183ad6);
     195    border-color: var(--wp-admin-theme-color, #3858e9);
    196196    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20);
    197197}
    … …  
    199199.wp-core-ui .button.active:focus {
    200200    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    201     color: var(--wp-admin-theme-color-darker-20);
    202     border-color: var(--wp-admin-theme-color-darker-20);
    203     box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     201    color: var(--wp-admin-theme-color-darker-20, #183ad6);
     202    border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
     203    box-shadow: inset 0 2px 6px -2px  var(--wp-admin-theme-color-darker-20), 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    204204}
    205205
    … …  
    235235    text-align: left;
    236236    /* Mimics the default link style in common.css */
    237     color: var(--wp-admin-theme-color);
     237    color: var(--wp-admin-theme-color, #3858e9);
    238238    text-decoration: underline;
    239239    transition-property: border, background, color;
    … …  
    244244.wp-core-ui .button-link:hover,
    245245.wp-core-ui .button-link:active {
    246     color: var(--wp-admin-theme-color-darker-20);
     246    color: var(--wp-admin-theme-color-darker-20, #183ad6);
    247247}
    248248
    249249.wp-core-ui .button-link:focus {
    250     color: var(--wp-admin-theme-color);
    251     box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
     250    color: var(--wp-admin-theme-color, #3858e9);
     251    box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    252252    border-radius: 2px;
    253253    /* Only visible in Windows High Contrast mode */
    … …  
    276276
    277277.wp-core-ui .button-primary {
    278     background: var(--wp-admin-theme-color);
    279     border-color: var(--wp-admin-theme-color);
     278    background: var(--wp-admin-theme-color, #3858e9);
     279    border-color: var(--wp-admin-theme-color, #3858e9);
    280280    color: #fff;
    281281    text-decoration: none;
    … …  
    285285.wp-core-ui .button-primary.hover,
    286286.wp-core-ui .button-primary:hover {
    287     background: var(--wp-admin-theme-color-darker-10);
    288     border-color: var(--wp-admin-theme-color-darker-10);
     287    background: var(--wp-admin-theme-color-darker-10, #2145e6);
     288    border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
    289289    color: #fff;
    290290}
    … …  
    292292.wp-core-ui .button-primary.focus,
    293293.wp-core-ui .button-primary:focus {
    294     background: var(--wp-admin-theme-color);
    295     border-color: var(--wp-admin-theme-color);
     294    background: var(--wp-admin-theme-color, #3858e9);
     295    border-color: var(--wp-admin-theme-color, #3858e9);
    296296    color: #fff;
    297297    box-shadow:
    298         0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
     298        0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9),
    299299        inset 0 0 0 1px #fff;
    300300    outline: 1px solid transparent;
    … …  
    305305.wp-core-ui .button-primary.active:focus,
    306306.wp-core-ui .button-primary:active {
    307     background: var(--wp-admin-theme-color-darker-20);
    308     border-color: var(--wp-admin-theme-color-darker-20);
     307    background: var(--wp-admin-theme-color-darker-20, #183ad6);
     308    border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
    309309    box-shadow: none;
    310310    color: #fff;

  • trunk/src/wp-includes/css/media-views.css

    r62104 r62154  
    145145.media-frame textarea:focus,
    146146.media-frame select:focus {
    147     border-color: var(--wp-admin-theme-color);
     147    border-color: var(--wp-admin-theme-color, #3858e9);
    148148    /* Expand border by 0.5px for total 1.5px effect */
    149     box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
     149    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
    150150    outline: 2px solid transparent;
    151151}
Note: See TracChangeset for help on using the changeset viewer.