WordPress.org
Get WordPress

Make WordPress Core

Changeset 61652


Ignore:
Timestamp:
02/16/2026 05:23:02 PM (8 weeks 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.