WordPress.org
Get WordPress

Make WordPress Core

Changeset 61652


Ignore:
Timestamp:
02/16/2026 05:23:02 PM (7 months ago)
Author:
joedolson
Message:

Admin: Update focus styles to match design reskin.

Apply design reskin changes to focus states on links, classic editor, media library, and other omitted contexts.

See also [61645].

Props joedolson, fabiankaegy.
Fixes #64644.

Location:
trunk/src
Files:
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r61647 r61652  
    281281.wp-person a:focus .gravatar {
    282282        color: #043959;
    283         box-shadow: 0 0 0 2px #2271b1;
     283        border-radius: 2px;
     284        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    284285        /* Only visible in Windows High Contrast mode */
    285286        outline: 2px solid transparent;
    … …  
    827828        margin-left: 2px;
    828829        border-radius: 50%;
    829         color: #2271b1;
     830        color: var(--wp-admin-theme-color, #3858e9);
    830831        /* vertically center the icon cross browsers */
    831832        line-height: 1.28;
    … …  
    844845
    845846.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
    846         box-shadow: 0 0 0 2px #2271b1;
     847        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    847848        /* Only visible in Windows High Contrast mode */
    848849        outline: 2px solid transparent;
    … …  
    25122513.accordion-section-title button.accordion-trigger:focus,
    25132514.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
    2514         box-shadow: 0 0 0 2px #2271b1;
     2515        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    25152516        outline: 2px solid transparent;
    25162517}
    … …  
    33343335.postbox .handle-order-lower:focus,
    33353336.postbox .handlediv:focus {
    3336         box-shadow: inset 0 0 0 2px #2271b1;
     3337        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
    33373338        border-radius: 50%;
    33383339        /* Only visible in Windows High Contrast mode */
    … …  
    36813682
    36823683.widget-top .widget-action:focus .toggle-indicator:before {
    3683         box-shadow: 0 0 0 2px #2271b1;
     3684        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    36843685        /* Only visible in Windows High Contrast mode */
    36853686        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/customize-controls.css

    r61645 r61652  
    16551655
    16561656.customize-control-header .choice:focus {
    1657         box-shadow: 0 0 0 2px #2271b1;
     1657        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    16581658        /* Only visible in Windows High Contrast mode */
    16591659        outline: 2px solid transparent;
    … …  
    28202820#available-widgets-filter .clear-results:focus,
    28212821#available-menu-items-search .clear-results:focus {
    2822         box-shadow: 0 0 0 2px #2271b1;
     2822        border-radius: 2px;
     2823        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    28232824        /* Only visible in Windows High Contrast mode */
    28242825        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/customize-nav-menus.css

    r61645 r61652  
    879879.menu-item-bar .item-delete:focus:before,
    880880#available-menu-items .item-add:focus:before {
    881         box-shadow: 0 0 0 2px #2271b1;
     881        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    882882        /* Only visible in Windows High Contrast mode */
    883883        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/edit.css

    r61646 r61652  
    13301330
    13311331div.tabs-panel-active:focus {
    1332         box-shadow: inset 0 0 0 2px #2271b1;
     1332        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    13331333        /* Only visible in Windows High Contrast mode */
    13341334        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/install.css

    r61636 r61652  
    2727a:focus {
    2828        color: #043959;
    29         box-shadow: 0 0 0 2px #2271b1;
     29        border-radius: 2px;
     30        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    3031        /* Only visible in Windows High Contrast mode */
    3132        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/list-tables.css

    r61646 r61652  
    539539
    540540.wp-list-table .toggle-row:focus:before {
    541         box-shadow: 0 0 0 2px #2271b1;
     541        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    542542        /* Only visible in Windows High Contrast mode */
    543543        outline: 2px solid transparent;
    … …  
    654654th.sortable a:focus,
    655655th.sorted a:focus {
    656         box-shadow: inset 0 0 0 2px #2271b1;
     656        border-radius: 2px;
     657        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    657658        /* Only visible in Windows High Contrast mode */
    658659        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/login.css

    r61651 r61652  
    3333a:focus {
    3434        color: #043959;
    35         box-shadow: 0 0 0 2px #2271b1;
     35        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    3636        /* Only visible in Windows High Contrast mode */
    3737        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/media.css

    r61645 r61652  
    342342#find-posts-close:hover,
    343343#find-posts-close:focus {
    344         color: #135e96;
     344        color: var(--wp-admin-theme-color-darker-20, #183ad6);
    345345}
    346346
    347347#find-posts-close:focus {
    348         box-shadow: 0 0 0 2px #2271b1;
     348        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    349349        /* Only visible in Windows High Contrast mode */
    350350        outline: 2px solid transparent;
    … …  
    525525.media-frame.mode-grid .selected.attachment:focus,
    526526.media-frame.mode-grid .attachment.details:focus {
    527         box-shadow: inset 0 0 0 2px #2271b1;
     527        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    528528        /* Only visible in Windows High Contrast mode */
    529529        outline: 2px solid transparent;
    … …  
    540540        box-shadow:
    541541                inset 0 0 0 3px #f0f0f1,
    542                 inset 0 0 0 7px #4f94d4;
     542                inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
    543543}
    544544

  • trunk/src/wp-admin/css/nav-menus.css

    r61645 r61652  
    756756
    757757.nav-menus-php .item-edit:focus:before {
    758         box-shadow: 0 0 0 2px #2271b1;
     758        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    759759        /* Only visible in Windows High Contrast mode */
    760760        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/revisions.css

    r61480 r61652  
    483483        background: #f0f0f1;
    484484        border-color: #8c8f94;
    485         box-shadow: 0 0 0 2px #2271b1;
     485        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    486486        /* Only visible in Windows High Contrast mode */
    487487        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/themes.css

    r61646 r61652  
    199199
    200200.theme-browser .theme .more-details:focus {
    201         box-shadow: 0 0 0 2px #2271b1;
     201        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    202202}
    203203
    204204.theme-browser .theme.focus {
    205         border-color: #2271b1;
    206         box-shadow: 0 0 0 1px #2271b1;
     205        border-color: var(--wp-admin-theme-color);
     206        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    207207        /* Only visible in Windows High Contrast mode */
    208208        outline: 2px solid transparent;
    … …  
    16491649.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
    16501650.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    1651         box-shadow: 0 0 0 2px #2271b1;
     1651        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    16521652        /* Only visible in Windows High Contrast mode */
    16531653        outline: 2px solid transparent;

  • trunk/src/wp-admin/css/widgets.css

    r61480 r61652  
    337337
    338338.sidebar-name .handlediv:focus .toggle-indicator:before {
    339         box-shadow: 0 0 0 2px #2271b1;
     339        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    340340        /* Only visible in Windows High Contrast mode */
    341341        outline: 2px solid transparent;

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

    r61645 r61652  
    8888.mce-window-head .mce-close:focus .mce-i-remove,
    8989div.mce-tab:focus {
    90         box-shadow: 0 0 0 2px #2271b1;
     90        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    9191        /* Only visible in Windows High Contrast mode */
    9292        outline: 2px solid transparent;
    … …  
    114114.mce-checkbox:focus i.mce-i-checkbox,
    115115#wp-link .query-results:focus {
    116         border-color: #4f94d4;
    117         box-shadow: 0 0 0 2px #2271b1;
     116        border-color: var(--wp-admin-theme-color-darker-10, #2145e6);
     117        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    118118        /* Only visible in Windows High Contrast mode */
    119119        outline: 2px solid transparent;
    … …  
    414414        background: #f6f7f7;
    415415        color: #1d2327;
    416         box-shadow: 0 0 0 2px #2271b1;
     416        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    417417        /* Only visible in Windows High Contrast mode */
    418418        outline: 2px solid transparent;
    … …  
    539539.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover,
    540540.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus {
    541         box-shadow: 0 0 0 2px #2271b1;
     541        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    542542        /* Only visible in Windows High Contrast mode */
    543543        outline: 2px solid transparent;
    … …  
    639639.mce-menubar .mce-menubtn:focus {
    640640        color: #043959;
    641         box-shadow: 0 0 0 2px #2271b1;
     641        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    642642        /* Only visible in Windows High Contrast mode */
    643643        outline: 2px solid transparent;
    … …  
    11671167
    11681168.wp-switch-editor:focus {
    1169         box-shadow: 0 0 0 2px #2271b1;
     1169        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    11701170        /* Only visible in Windows High Contrast mode */
    11711171        outline: 2px solid transparent;
    … …  
    14701470#wp-link-close:hover,
    14711471#wp-link-close:focus {
    1472         color: #135e96;
     1472        color: var(--wp-admin-theme-color-darker-20, #183ad6);
    14731473}
    14741474
    14751475#wp-link-close:focus {
    1476         box-shadow: 0 0 0 2px #2271b1;
     1476        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    14771477        /* Only visible in Windows High Contrast mode */
    14781478        outline: 2px solid transparent;

  • trunk/src/wp-includes/css/jquery-ui-dialog.css

    r61480 r61652  
    313313
    314314.ui-button.ui-dialog-titlebar-close:focus {
    315         box-shadow: 0 0 0 2px #2271b1;
     315        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    316316        /* Only visible in Windows High Contrast mode */
    317317        outline: 2px solid transparent;

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

    r61645 r61652  
    4646
    4747.media-frame a:focus {
    48         box-shadow: 0 0 0 2px #2271b1;
     48        border-radius: 2px;
     49        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    4950        color: #043959;
    5051        /* Only visible in Windows High Contrast mode */
    … …  
    689690
    690691.media-menu .media-menu-item:focus {
    691         box-shadow: 0 0 0 2px #2271b1;
     692        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    692693        color: #043959;
    693694        /* Only visible in Windows High Contrast mode */
    … …  
    742743
    743744.media-router .media-menu-item:focus {
    744         box-shadow: 0 0 0 2px #2271b1;
     745        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    745746        color: #043959;
    746747        /* Only visible in Windows High Contrast mode */
    … …  
    10001001        box-shadow:
    10011002                inset 0 0 2px 3px #fff,
    1002                 inset 0 0 0 7px #4f94d4;
     1003                inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
    10031004        /* Only visible in Windows High Contrast mode */
    10041005        outline: 2px solid transparent;
    … …  
    10151016        box-shadow:
    10161017                inset 0 0 0 3px #fff,
    1017                 inset 0 0 0 7px #2271b1;
     1018                inset 0 0 0 7px var(--wp-admin-theme-color-darker-20, #183ad6);
    10181019}
    10191020
    … …  
    11741175.wp-core-ui .attachment.selected .check:focus,
    11751176.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
    1176         background-color: #2271b1;
     1177        background-color: var(--wp-admin-theme-color, #3858e9);
    11771178        box-shadow:
    11781179                0 0 0 1px #fff,
    1179                 0 0 0 2px #2271b1;
     1180                0 0 0 2px var(--wp-admin-theme-color, #3858e9);
    11801181}
    11811182
    … …  
    21492150
    21502151.mejs-container:focus {
    2151         outline: 1px solid #2271b1;
    2152         box-shadow: 0 0 0 2px #2271b1;
     2152        outline: 1px solid var(--wp-admin-theme-color, #3858e9);
     2153        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    21532154}
    21542155

  • trunk/src/wp-includes/css/wp-embed-template.css

    r61636 r61652  
    218218.wp-embed-share-dialog-open:focus .dashicons,
    219219.wp-embed-share-dialog-close:focus .dashicons {
    220         box-shadow: 0 0 0 2px #2271b1;
     220        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    221221        /* Only visible in Windows High Contrast mode */
    222222        outline: 2px solid transparent;

  • trunk/src/wp-includes/functions.php

    r61637 r61652  
    39713971                a:focus {
    39723972                        color: #043959;
    3973                         box-shadow: 0 0 0 2px #2271b1;
     3973                        box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
    39743974                        outline: 2px solid transparent;
    39753975                }
Note: See TracChangeset for help on using the changeset viewer.