[Summary view] [Print] [Text view]

   1  @use "sass:color";
   2  @use "sass:string";
   3  @forward "variables" show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;
   4  @use "variables";
   5  @use "mixins";
   6  @use "tokens";
   7  
   8  /**
   9   * This function name uses British English to maintain backward compatibility, as developers
  10   * may use the function in their own admin CSS files. See #56811.
  11   */
  12  @function url-friendly-colour( $color ) {
  13      @return "%23" + string.slice( "#{ $color }", 2, -1 );
  14  }
  15  
  16  body {
  17      background: variables.$body-background;
  18  }
  19  
  20  /* Links */
  21  
  22  a {
  23      color: variables.$link;
  24  
  25      &:hover,
  26      &:active,
  27      &:focus {
  28          color: variables.$link-focus;
  29      }
  30  }
  31  
  32  #post-body .misc-pub-post-status::before,
  33  #post-body #visibility::before,
  34  .curtime #timestamp::before,
  35  #post-body .misc-pub-revisions::before,
  36  span.wp-media-buttons-icon::before {
  37      color: currentColor;
  38  }
  39  
  40  /* Link button - appears as text link, no border or background */
  41  /* Matches Gutenberg's .is-link button variant */
  42  .wp-core-ui .button-link,
  43  .wp-core-ui .button.button-link {
  44      color: var(--wp-admin-theme-color);
  45  
  46      &:hover,
  47      &:active {
  48          color: var(--wp-admin-theme-color-darker-20);
  49      }
  50  
  51      &:focus {
  52          color: var(--wp-admin-theme-color);
  53          border-radius: tokens.$radius-s;
  54          box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
  55          outline: 1px solid transparent;
  56      }
  57  
  58      &:disabled,
  59      &[aria-disabled="true"] {
  60          color: tokens.$gray-600;
  61      }
  62  }
  63  
  64  .media-modal .delete-attachment,
  65  .media-modal .trash-attachment,
  66  .media-modal .untrash-attachment,
  67  /* Needs higher specificity to override the default button-link. */
  68  .wp-core-ui .button-link.button-link-delete {
  69      color: tokens.$alert-red;
  70  }
  71  
  72  .media-modal .delete-attachment:hover,
  73  .media-modal .trash-attachment:hover,
  74  .media-modal .untrash-attachment:hover,
  75  .media-modal .delete-attachment:focus,
  76  .media-modal .trash-attachment:focus,
  77  .media-modal .untrash-attachment:focus,
  78  /* Needs higher specificity to override the default button-link. */
  79  .wp-core-ui .button-link.button-link-delete:hover,
  80  .wp-core-ui .button-link.button-link-delete:focus {
  81      color: color.adjust(tokens.$alert-red, $lightness: -10%);
  82  }
  83  
  84  /* Forms */
  85  
  86  // Checkbox checked state - uses theme color
  87  input[type="checkbox"]:checked {
  88      background: var(--wp-admin-theme-color);
  89      border-color: var(--wp-admin-theme-color);
  90  }
  91  
  92  // Radio checked state - uses theme color
  93  input[type="radio"]:checked {
  94      background: var(--wp-admin-theme-color);
  95      border-color: var(--wp-admin-theme-color);
  96  }
  97  
  98  .wp-core-ui input[type="reset"]:hover,
  99  .wp-core-ui input[type="reset"]:active {
 100      color: variables.$link-focus;
 101  }
 102  
 103  // Text input focus - outset focus ring matching button focus style
 104  input[type="text"]:focus,
 105  input[type="password"]:focus,
 106  input[type="color"]:focus,
 107  input[type="date"]:focus,
 108  input[type="datetime"]:focus,
 109  input[type="datetime-local"]:focus,
 110  input[type="email"]:focus,
 111  input[type="month"]:focus,
 112  input[type="number"]:focus,
 113  input[type="search"]:focus,
 114  input[type="tel"]:focus,
 115  input[type="time"]:focus,
 116  input[type="url"]:focus,
 117  input[type="week"]:focus,
 118  select:focus,
 119  textarea:focus {
 120      border-color: var(--wp-admin-theme-color);
 121      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 122  }
 123  
 124  // Checkbox/Radio focus - Gutenberg-style outset focus ring
 125  input[type="checkbox"]:focus,
 126  input[type="radio"]:focus {
 127      border-color: tokens.$gray-900;
 128      box-shadow: 0 0 0 2px tokens.$white, 0 0 0 4px var(--wp-admin-theme-color);
 129      outline: 2px solid transparent;
 130  }
 131  
 132  // Select focus (wp-core-ui styled selects)
 133  .wp-core-ui select:focus {
 134      border-color: var(--wp-admin-theme-color);
 135      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 136  }
 137  
 138  // Autocomplete focus state
 139  .wp-tags-autocomplete .ui-state-focus,
 140  .wp-tags-autocomplete [aria-selected="true"] {
 141      background-color: var(--wp-admin-theme-color);
 142  }
 143  
 144  // Password field focus
 145  #pass1:focus,
 146  #pass1-text:focus {
 147      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 148  }
 149  
 150  // Password toggle button focus
 151  .mailserver-pass-wrap .button.wp-hide-pw:focus {
 152      border-color: var(--wp-admin-theme-color);
 153      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 154  }
 155  
 156  /* Core UI */
 157  
 158  .wp-core-ui {
 159      /* Default button - theme color border and text (matches secondary) */
 160      /* Exclude .button-link without increasing specificity. */
 161      .button:where(:not(.button-link)) {
 162          @include mixins.button-secondary();
 163      }
 164  
 165      /* Secondary button - same as default */
 166      .button-secondary {
 167          @include mixins.button-secondary();
 168      }
 169  
 170      /* Primary button - theme color background */
 171      .button-primary {
 172          @include mixins.button();
 173      }
 174  
 175      .button-group > .button.active {
 176          border-color: var(--wp-admin-theme-color);
 177          background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 178      }
 179  
 180      .wp-ui-primary {
 181          color: variables.$text-color;
 182          background-color: variables.$base-color;
 183      }
 184  
 185      .wp-ui-text-primary {
 186          color: variables.$base-color;
 187      }
 188  
 189      .wp-ui-highlight {
 190          color: variables.$menu-highlight-text;
 191          background-color: variables.$menu-highlight-background;
 192      }
 193  
 194      .wp-ui-text-highlight {
 195          color: variables.$menu-highlight-background;
 196      }
 197  
 198      .wp-ui-notification {
 199          color: variables.$menu-bubble-text;
 200          background-color: variables.$menu-bubble-background;
 201      }
 202  
 203      .wp-ui-text-notification {
 204          color: variables.$menu-bubble-background;
 205      }
 206  
 207      .wp-ui-text-icon {
 208          color: variables.$menu-icon;
 209      }
 210  }
 211  
 212  /* List tables */
 213  
 214  // .page-title-action uses secondary button styling
 215  .wrap .page-title-action {
 216      background: transparent;
 217      border: 1px solid var(--wp-admin-theme-color);
 218      border-radius: tokens.$radius-s;
 219      color: var(--wp-admin-theme-color);
 220  }
 221  
 222  .wrap .page-title-action:hover {
 223      background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 224      border-color: var(--wp-admin-theme-color-darker-20);
 225      color: var(--wp-admin-theme-color-darker-20);
 226  }
 227  
 228  .wrap .page-title-action:focus {
 229      background: transparent;
 230      border-color: var(--wp-admin-theme-color);
 231      color: var(--wp-admin-theme-color);
 232      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 233      outline: 1px solid transparent;
 234  }
 235  
 236  .wrap .page-title-action:active {
 237      background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 238      border-color: var(--wp-admin-theme-color-darker-20);
 239      color: var(--wp-admin-theme-color-darker-20);
 240      box-shadow: none;
 241  }
 242  
 243  .view-switch a.current::before {
 244      color: variables.$menu-background;
 245  }
 246  
 247  .view-switch a:hover::before {
 248      color: variables.$menu-bubble-background;
 249  }
 250  
 251  /* Admin Menu */
 252  
 253  #adminmenuback,
 254  #adminmenuwrap,
 255  #adminmenu {
 256      background: variables.$menu-background;
 257  }
 258  
 259  #adminmenu a {
 260      color: variables.$menu-text;
 261  }
 262  
 263  #adminmenu div.wp-menu-image::before {
 264      color: variables.$menu-icon;
 265  }
 266  
 267  #adminmenu a:hover,
 268  #adminmenu li.menu-top:hover,
 269  #adminmenu li.opensub > a.menu-top,
 270  #adminmenu li > a.menu-top:focus {
 271      color: variables.$menu-highlight-text;
 272      background-color: variables.$menu-highlight-background;
 273  }
 274  
 275  #adminmenu li.menu-top:hover div.wp-menu-image::before,
 276  #adminmenu li.opensub > a.menu-top div.wp-menu-image::before {
 277      color: variables.$menu-highlight-icon;
 278  }
 279  
 280  /* Active tabs use a bottom border color that matches the page background color. */
 281  
 282  .about-wrap .nav-tab-active,
 283  .nav-tab-active,
 284  .nav-tab-active:hover {
 285      background-color: variables.$body-background;
 286      border-bottom-color: variables.$body-background;
 287  }
 288  
 289  /* Admin Menu: submenu */
 290  
 291  #adminmenu .wp-submenu,
 292  #adminmenu .wp-has-current-submenu .wp-submenu,
 293  #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
 294  #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
 295      background: variables.$menu-submenu-background;
 296  }
 297  
 298  #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover::after,
 299  #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within::after {
 300      border-right-color: variables.$menu-submenu-background;
 301  }
 302  
 303  #adminmenu .wp-submenu .wp-submenu-head {
 304      color: variables.$menu-submenu-text;
 305  }
 306  
 307  #adminmenu .wp-submenu a,
 308  #adminmenu .wp-has-current-submenu .wp-submenu a,
 309  #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
 310  #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
 311      color: variables.$menu-submenu-text;
 312  
 313      &:focus,
 314      &:hover {
 315          color: variables.$menu-submenu-focus-text;
 316      }
 317  }
 318  
 319  /* Admin Menu: current */
 320  
 321  #adminmenu .wp-submenu li.current a,
 322  #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
 323  #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
 324      color: variables.$menu-submenu-current-text;
 325  
 326      &:hover,
 327      &:focus {
 328          color: variables.$menu-submenu-focus-text;
 329      }
 330  }
 331  
 332  ul#adminmenu a.wp-has-current-submenu::after,
 333  ul#adminmenu > li.current > a.current::after {
 334      border-right-color: variables.$body-background;
 335  }
 336  
 337  #adminmenu li.current a.menu-top,
 338  #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
 339  #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
 340  .folded #adminmenu li.current.menu-top {
 341      color: variables.$menu-current-text;
 342      background: variables.$menu-current-background;
 343  }
 344  
 345  #adminmenu li.wp-has-current-submenu div.wp-menu-image::before,
 346  #adminmenu a.current:hover div.wp-menu-image::before,
 347  #adminmenu li.current div.wp-menu-image::before,
 348  #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image::before,
 349  #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image::before,
 350  #adminmenu li:hover div.wp-menu-image::before,
 351  #adminmenu li a:focus div.wp-menu-image::before,
 352  #adminmenu li.opensub div.wp-menu-image::before {
 353      color: variables.$menu-current-icon;
 354  }
 355  
 356  /* Admin Menu: bubble */
 357  
 358  #adminmenu .menu-counter,
 359  #adminmenu .awaiting-mod,
 360  #adminmenu .update-plugins {
 361      color: variables.$menu-bubble-text;
 362      background: variables.$menu-bubble-background;
 363  }
 364  
 365  #adminmenu li.current a .awaiting-mod,
 366  #adminmenu li a.wp-has-current-submenu .update-plugins,
 367  #adminmenu li:hover a .awaiting-mod,
 368  #adminmenu li.menu-top:hover > a .update-plugins {
 369      color: variables.$menu-bubble-current-text;
 370      background: variables.$menu-bubble-current-background;
 371  }
 372  
 373  /* Admin Menu: collapse button */
 374  
 375  #collapse-button {
 376      color: variables.$menu-collapse-text;
 377  }
 378  
 379  #collapse-button:hover,
 380  #collapse-button:focus {
 381      color: variables.$menu-highlight-text;
 382      background: variables.$menu-highlight-background;
 383  }
 384  
 385  /* Admin Bar */
 386  
 387  #wpadminbar {
 388      color: variables.$menu-text;
 389      background: variables.$menu-background;
 390  }
 391  
 392  #wpadminbar .ab-item,
 393  #wpadminbar a.ab-item,
 394  #wpadminbar > #wp-toolbar span.ab-label,
 395  #wpadminbar > #wp-toolbar span.noticon {
 396      color: variables.$menu-text;
 397  }
 398  
 399  #wpadminbar .ab-icon,
 400  #wpadminbar .ab-icon::before,
 401  #wpadminbar .ab-item::before,
 402  #wpadminbar .ab-item::after {
 403      color: variables.$menu-icon;
 404  }
 405  
 406  #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
 407  #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
 408  #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 409  #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
 410  #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
 411      color: variables.$menu-submenu-focus-text;
 412      background: variables.$menu-submenu-background;
 413  }
 414  
 415  #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
 416  #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
 417  #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
 418      color: variables.$menu-submenu-focus-text;
 419  }
 420  
 421  #wpadminbar:not(.mobile) li:hover .ab-icon::before,
 422  #wpadminbar:not(.mobile) li:hover .ab-item::before,
 423  #wpadminbar:not(.mobile) li:hover .ab-item::after,
 424  #wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
 425      color: variables.$menu-submenu-focus-text;
 426  }
 427  
 428  /* Admin Bar: submenu */
 429  
 430  #wpadminbar .menupop .ab-sub-wrapper {
 431      background: variables.$menu-submenu-background;
 432  }
 433  
 434  #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 435  #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
 436      background: variables.$menu-submenu-background-alt;
 437  }
 438  
 439  #wpadminbar .ab-submenu .ab-item,
 440  #wpadminbar .quicklinks .menupop ul li a,
 441  #wpadminbar .quicklinks .menupop.hover ul li a,
 442  #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
 443      color: variables.$menu-submenu-text;
 444  }
 445  
 446  #wpadminbar .quicklinks li .blavatar,
 447  #wpadminbar .menupop .menupop > .ab-item::before {
 448      color: variables.$menu-icon;
 449  }
 450  
 451  #wpadminbar .quicklinks .menupop ul li a:hover,
 452  #wpadminbar .quicklinks .menupop ul li a:focus,
 453  #wpadminbar .quicklinks .menupop ul li a:hover strong,
 454  #wpadminbar .quicklinks .menupop ul li a:focus strong,
 455  #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
 456  #wpadminbar .quicklinks .menupop.hover ul li a:hover,
 457  #wpadminbar .quicklinks .menupop.hover ul li a:focus,
 458  #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 459  #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 460  #wpadminbar li:hover .ab-icon::before,
 461  #wpadminbar li:hover .ab-item::before,
 462  #wpadminbar li a:focus .ab-icon::before,
 463  #wpadminbar li .ab-item:focus::before,
 464  #wpadminbar li .ab-item:focus .ab-icon::before,
 465  #wpadminbar li.hover .ab-icon::before,
 466  #wpadminbar li.hover .ab-item::before,
 467  #wpadminbar li:hover #adminbarsearch::before,
 468  #wpadminbar li #adminbarsearch.adminbar-focused::before {
 469      color: variables.$menu-submenu-focus-text;
 470  }
 471  
 472  #wpadminbar .quicklinks li a:hover .blavatar,
 473  #wpadminbar .quicklinks li a:focus .blavatar,
 474  #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
 475  #wpadminbar .menupop .menupop > .ab-item:hover::before,
 476  #wpadminbar.mobile .quicklinks .hover .ab-icon::before,
 477  #wpadminbar.mobile .quicklinks .hover .ab-item::before {
 478      color: variables.$menu-submenu-focus-text;
 479  }
 480  
 481  #wpadminbar.mobile .quicklinks .ab-icon::before,
 482  #wpadminbar.mobile .quicklinks .ab-item::before {
 483      color: variables.$menu-icon;
 484  }
 485  
 486  /* Admin Bar: search */
 487  
 488  #wpadminbar #adminbarsearch::before {
 489      color: variables.$menu-icon;
 490  }
 491  
 492  #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 493      color: variables.$menu-text;
 494      background: variables.$adminbar-input-background;
 495  }
 496  
 497  /* Admin Bar: recovery mode */
 498  
 499  #wpadminbar #wp-admin-bar-recovery-mode {
 500      color: variables.$adminbar-recovery-exit-text;
 501      background-color: variables.$adminbar-recovery-exit-background;
 502  }
 503  
 504  #wpadminbar #wp-admin-bar-recovery-mode .ab-item,
 505  #wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
 506      color: variables.$adminbar-recovery-exit-text;
 507  }
 508  
 509  #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
 510  #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
 511  #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
 512  #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
 513      color: variables.$adminbar-recovery-exit-text;
 514      background-color: variables.$adminbar-recovery-exit-background-alt;
 515  }
 516  
 517  /* Admin Bar: my account */
 518  
 519  #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 520      border-color: variables.$adminbar-avatar-frame;
 521      background-color: variables.$adminbar-avatar-frame;
 522  }
 523  
 524  #wpadminbar #wp-admin-bar-user-info .howdy,
 525  #wpadminbar #wp-admin-bar-user-info .display-name {
 526      color: variables.$menu-text;
 527  }
 528  
 529  #wpadminbar #wp-admin-bar-user-info a:hover .howdy,
 530  #wpadminbar #wp-admin-bar-user-info a:focus .howdy,
 531  #wpadminbar #wp-admin-bar-user-info a:hover .display-name,
 532  #wpadminbar #wp-admin-bar-user-info a:focus .display-name {
 533      color: variables.$menu-submenu-focus-text;
 534  }
 535  
 536  #wpadminbar #wp-admin-bar-user-info .username {
 537      color: variables.$menu-submenu-text;
 538  }
 539  
 540  /* Pointers */
 541  
 542  .wp-pointer .wp-pointer-content h3 {
 543      background-color: variables.$highlight-color;
 544      border-color: color.adjust(variables.$highlight-color, $lightness: -5%);
 545  }
 546  
 547  .wp-pointer .wp-pointer-content h3::before {
 548      color: variables.$highlight-color;
 549  }
 550  
 551  .wp-pointer.wp-pointer-top .wp-pointer-arrow,
 552  .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
 553  .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
 554  .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
 555      border-bottom-color: variables.$highlight-color;
 556  }
 557  
 558  /* Media */
 559  
 560  .media-item .bar,
 561  .media-progress-bar div {
 562      background-color: variables.$highlight-color;
 563  }
 564  
 565  .details.attachment {
 566      box-shadow:
 567          inset 0 0 0 3px #fff,
 568          inset 0 0 0 7px variables.$highlight-color;
 569  }
 570  
 571  .attachment.details .check {
 572      background-color: variables.$highlight-color;
 573      box-shadow: 0 0 0 1px #fff, 0 0 0 2px variables.$highlight-color;
 574  }
 575  
 576  .media-selection .attachment.selection.details .thumbnail {
 577      box-shadow: 0 0 0 1px #fff, 0 0 0 3px variables.$highlight-color;
 578  }
 579  
 580  /* Themes */
 581  
 582  .theme-browser .theme.active .theme-name,
 583  .theme-browser .theme.add-new-theme a:hover::after,
 584  .theme-browser .theme.add-new-theme a:focus::after {
 585      background: variables.$highlight-color;
 586  }
 587  
 588  .theme-browser .theme.add-new-theme a:hover span::after,
 589  .theme-browser .theme.add-new-theme a:focus span::after {
 590      color: variables.$highlight-color;
 591  }
 592  
 593  .theme-section.current,
 594  .theme-filter.current {
 595      border-bottom-color: variables.$menu-background;
 596  }
 597  
 598  body.more-filters-opened .more-filters {
 599      color: variables.$menu-text;
 600      background-color: variables.$menu-background;
 601  }
 602  
 603  body.more-filters-opened .more-filters::before {
 604      color: variables.$menu-text;
 605  }
 606  
 607  body.more-filters-opened .more-filters:hover,
 608  body.more-filters-opened .more-filters:focus {
 609      background-color: variables.$menu-highlight-background;
 610      color: variables.$menu-highlight-text;
 611  }
 612  
 613  body.more-filters-opened .more-filters:hover::before,
 614  body.more-filters-opened .more-filters:focus::before {
 615      color: variables.$menu-highlight-text;
 616  }
 617  
 618  /* Widgets */
 619  
 620  .widgets-chooser li.widgets-chooser-selected {
 621      background-color: variables.$menu-highlight-background;
 622      color: variables.$menu-highlight-text;
 623  }
 624  
 625  .widgets-chooser li.widgets-chooser-selected::before,
 626  .widgets-chooser li.widgets-chooser-selected:focus::before {
 627      color: variables.$menu-highlight-text;
 628  }
 629  
 630  /* Nav Menus */
 631  
 632  .nav-menus-php .item-edit:focus::before {
 633      box-shadow:
 634          0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
 635          0 0 2px 1px variables.$button-color;
 636  }
 637  
 638  /* Responsive Component */
 639  
 640  div#wp-responsive-toggle a::before {
 641      color: variables.$menu-icon;
 642  }
 643  
 644  .wp-responsive-open div#wp-responsive-toggle a {
 645      // ToDo: make inset border
 646      border-color: transparent;
 647      background: variables.$menu-highlight-background;
 648  }
 649  
 650  .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
 651      background: variables.$menu-submenu-background;
 652  }
 653  
 654  .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
 655      color: variables.$menu-icon;
 656  }
 657  
 658  /* TinyMCE */
 659  
 660  .mce-container.mce-menu .mce-menu-item:hover,
 661  .mce-container.mce-menu .mce-menu-item.mce-selected,
 662  .mce-container.mce-menu .mce-menu-item:focus,
 663  .mce-container.mce-menu .mce-menu-item-normal.mce-active,
 664  .mce-container.mce-menu .mce-menu-item-preview.mce-active {
 665      background: variables.$highlight-color;
 666  }
 667  
 668  /* Customizer */
 669  /* stylelint-disable-next-line no-duplicate-selectors -- This file is split in sections and contains duplicate selectors based on the sections. */
 670  .wp-core-ui {
 671      #customize-controls .control-section:hover > .accordion-section-title,
 672      #customize-controls .control-section .accordion-section-title:hover,
 673      #customize-controls .control-section.open .accordion-section-title,
 674      #customize-controls .control-section .accordion-section-title:focus {
 675          color: variables.$link;
 676          border-left-color: variables.$button-color;
 677      }
 678  
 679      .customize-controls-close:focus,
 680      .customize-controls-close:hover,
 681      .customize-controls-preview-toggle:focus,
 682      .customize-controls-preview-toggle:hover {
 683          color: variables.$link;
 684          border-top-color: variables.$button-color;
 685      }
 686  
 687      .customize-panel-back:hover,
 688      .customize-panel-back:focus,
 689      .customize-section-back:hover,
 690      .customize-section-back:focus {
 691          color: variables.$link;
 692          border-left-color: variables.$button-color;
 693      }
 694  
 695      .customize-screen-options-toggle:hover,
 696      .customize-screen-options-toggle:active,
 697      .customize-screen-options-toggle:focus,
 698      .active-menu-screen-options .customize-screen-options-toggle,
 699      #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
 700      #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
 701      #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
 702          color: variables.$link;
 703      }
 704  
 705      .customize-screen-options-toggle:focus::before,
 706      #customize-controls .customize-info .customize-help-toggle:focus::before,
 707      &.wp-customizer button:focus .toggle-indicator::before,
 708      .menu-item-bar .item-delete:focus::before,
 709      #available-menu-items .item-add:focus::before,
 710      #customize-save-button-wrapper .save:focus,
 711      #publish-settings:focus {
 712          box-shadow:
 713              0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
 714              0 0 2px 1px variables.$button-color;
 715      }
 716  
 717      #customize-controls .customize-info.open .customize-help-toggle,
 718      #customize-controls .customize-info .customize-help-toggle:focus,
 719      #customize-controls .customize-info .customize-help-toggle:hover {
 720          color: variables.$link;
 721      }
 722  
 723      .control-panel-themes .customize-themes-section-title:focus,
 724      .control-panel-themes .customize-themes-section-title:hover {
 725          border-left-color: variables.$button-color;
 726          color: variables.$link;
 727      }
 728  
 729      .control-panel-themes .theme-section .customize-themes-section-title.selected::after {
 730          background: variables.$button-color;
 731      }
 732  
 733      .control-panel-themes .customize-themes-section-title.selected {
 734          color: variables.$link;
 735      }
 736  
 737      #customize-theme-controls .control-section:hover > .accordion-section-title::after,
 738      #customize-theme-controls .control-section .accordion-section-title:hover::after,
 739      #customize-theme-controls .control-section.open .accordion-section-title::after,
 740      #customize-theme-controls .control-section .accordion-section-title:focus::after,
 741      #customize-outer-theme-controls .control-section:hover > .accordion-section-title::after,
 742      #customize-outer-theme-controls .control-section .accordion-section-title:hover::after,
 743      #customize-outer-theme-controls .control-section.open .accordion-section-title::after,
 744      #customize-outer-theme-controls .control-section .accordion-section-title:focus::after {
 745          color: variables.$link;
 746      }
 747  
 748      .customize-control .attachment-media-view .button-add-media:focus {
 749          background-color: #fbfbfc;
 750          border-color: variables.$button-color;
 751          border-style: solid;
 752          box-shadow: 0 0 0 1px variables.$button-color;
 753          outline: 2px solid transparent;
 754      }
 755  
 756      .wp-full-overlay-footer .devices button:focus,
 757      .wp-full-overlay-footer .devices button.active:hover {
 758          border-bottom-color: variables.$button-color;
 759      }
 760  
 761      .wp-full-overlay-footer .devices button:hover::before,
 762      .wp-full-overlay-footer .devices button:focus::before {
 763          color: variables.$button-color;
 764      }
 765  
 766      .wp-full-overlay .collapse-sidebar:hover,
 767      .wp-full-overlay .collapse-sidebar:focus {
 768          color: variables.$button-color;
 769      }
 770  
 771      .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
 772      .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
 773          box-shadow:
 774              0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
 775              0 0 2px 1px variables.$button-color;
 776      }
 777  
 778      &.wp-customizer .theme-overlay .theme-header .close:focus,
 779      &.wp-customizer .theme-overlay .theme-header .close:hover,
 780      &.wp-customizer .theme-overlay .theme-header .right:focus:not(.disabled),
 781      &.wp-customizer .theme-overlay .theme-header .right:hover:not(.disabled),
 782      &.wp-customizer .theme-overlay .theme-header .left:focus:not(.disabled),
 783      &.wp-customizer .theme-overlay .theme-header .left:hover:not(.disabled) {
 784          border-bottom-color: variables.$button-color;
 785          color: variables.$link;
 786      }
 787  }