WordPress.org
Get WordPress

Make WordPress Core

Ticket #62323: 0001-Migrate-from-import-to-use-and-forward.patch

File 0001-Migrate-from-import-to-use-and-forward.patch, 34.2 KB (added by MattyRob, 13 months ago)

  • src/wp-admin/css/colors/_admin.scss 

    From 9a3960a5e61e231e426fd00f25323ef70b64973d Mon Sep 17 00:00:00 2001
From: mattyrob <mattyrobuk@gmail.com>
Date: Wed, 30 Oct 2024 08:24:16 +0000
Subject: [PATCH] Migrate from @import to @use and @forward

---
 src/wp-admin/css/colors/_admin.scss           | 311 +++++++++---------
 src/wp-admin/css/colors/_mixins.scss          |   3 +
 src/wp-admin/css/colors/blue/colors.scss      |  24 +-
 src/wp-admin/css/colors/coffee/colors.scss    |  15 +-
 src/wp-admin/css/colors/ectoplasm/colors.scss |  18 +-
 src/wp-admin/css/colors/light/colors.scss     |  41 ++-
 src/wp-admin/css/colors/midnight/colors.scss  |  14 +-
 src/wp-admin/css/colors/modern/colors.scss    |  24 +-
 src/wp-admin/css/colors/ocean/colors.scss     |  17 +-
 src/wp-admin/css/colors/sunrise/colors.scss   |  12 +-
 10 files changed, 244 insertions(+), 235 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 40c497ba52..05009a35de 100644
    a b  
    11
    22@use 'sass:color';
    33@use 'sass:string';
    4 @import 'variables';
    5 @import 'mixins';
     4@forward 'variables' show $scheme-name, $base-color, $body-background, $highlight-color, $notification-color, $form-checked, $icon-color, $text-color, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $button-color, $menu-highlight-text, $menu-highlight-icon, $menu-highlight-background, $menu-submenu-background, $menu-submenu-focus-text, $menu-submenu-text, $menu-bubble-text, $menu-collapse-text, $menu-collapse-focus-icon, $link, $link-focus, $low-contrast-theme;
     5@use 'variables';
     6@use 'mixins';
    67
    78/**
    89 * This function name uses British English to maintain backward compatibility, as developers
    … …  
    1314}
    1415
    1516body {
    16         background: $body-background;
     17        background: variables.$body-background;
    1718}
    1819
    1920
    2021/* Links */
    2122
    2223a {
    23         color: $link;
     24        color: variables.$link;
    2425
    2526        &:hover,
    2627        &:active,
    2728        &:focus {
    28                 color: $link-focus;
     29                color: variables.$link-focus;
    2930        }
    3031}
    3132
    … … span.wp-media-buttons-icon:before { 
    3839}
    3940
    4041.wp-core-ui .button-link {
    41         color: $link;
     42        color: variables.$link;
    4243
    4344        &:hover,
    4445        &:active,
    4546        &:focus {
    46                 color: $link-focus;
     47                color: variables.$link-focus;
    4748        }
    4849}
    4950
    … … span.wp-media-buttons-icon:before { 
    6869/* Forms */
    6970
    7071input[type=checkbox]:checked::before {
    71         content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
     72        content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
    7273}
    7374
    7475input[type=radio]:checked::before {
    75         background: $form-checked;
     76        background: variables.$form-checked;
    7677}
    7778
    7879.wp-core-ui input[type="reset"]:hover,
    7980.wp-core-ui input[type="reset"]:active {
    80         color: $link-focus;
     81        color: variables.$link-focus;
    8182}
    8283
    8384input[type="text"]:focus,
    … … input[type="checkbox"]:focus, 
    99100input[type="radio"]:focus,
    100101select:focus,
    101102textarea:focus {
    102         border-color: $highlight-color;
    103         box-shadow: 0 0 0 1px $highlight-color;
     103        border-color: variables.$highlight-color;
     104        box-shadow: 0 0 0 1px variables.$highlight-color;
    104105}
    105106
    106107
    … … textarea:focus { 
    137138        .button.active,
    138139        .button.active:focus,
    139140        .button.active:hover {
    140                 border-color: $button-color;
     141                border-color: variables.$button-color;
    141142                color: color.adjust( #32373c, $lightness: -5% );
    142                 box-shadow: inset 0 2px 5px -3px $button-color;
     143                box-shadow: inset 0 2px 5px -3px variables.$button-color;
    143144        }
    144145
    145146        .button.active:focus {
    146147                box-shadow: 0 0 0 1px #32373c;
    147148        }
    148149
    149         @if ( $low-contrast-theme != "true" ) {
     150        @if ( variables.$low-contrast-theme != "true" ) {
    150151                .button,
    151152                .button-secondary {
    152                         color: $highlight-color;
    153                         border-color: $highlight-color;
     153                        color: variables.$highlight-color;
     154                        border-color: variables.$highlight-color;
    154155                }
    155156
    156157                .button.hover,
    157158                .button:hover,
    158159                .button-secondary:hover{
    159                         border-color: color.adjust($highlight-color, $lightness: -10%);
    160                         color: color.adjust($highlight-color, $lightness: -10%);
     160                        border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
     161                        color: color.adjust(variables.$highlight-color, $lightness: -10%);
    161162                }
    162163
    163164                .button.focus,
    164165                .button:focus,
    165166                .button-secondary:focus {
    166                         border-color: color.adjust($highlight-color, $lightness: 10%);
    167                         color: color.adjust($highlight-color, $lightness: -20%);
    168                         box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
     167                        border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
     168                        color: color.adjust(variables.$highlight-color, $lightness: -20%);
     169                        box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    169170                }
    170171
    171172                .button-primary {
    … … textarea:focus { 
    176177        }
    177178
    178179        .button-primary {
    179                 @include button( $button-color );
     180                @include mixins.button( variables.$button-color );
    180181        }
    181182
    182183        .button-group > .button.active {
    183                 border-color: $button-color;
     184                border-color: variables.$button-color;
    184185        }
    185186
    186187        .wp-ui-primary {
    187                 color: $text-color;
    188                 background-color: $base-color;
     188                color: variables.$text-color;
     189                background-color: variables.$base-color;
    189190        }
    190191        .wp-ui-text-primary {
    191                 color: $base-color;
     192                color: variables.$base-color;
    192193        }
    193194
    194195        .wp-ui-highlight {
    195                 color: $menu-highlight-text;
    196                 background-color: $menu-highlight-background;
     196                color: variables.$menu-highlight-text;
     197                background-color: variables.$menu-highlight-background;
    197198        }
    198199        .wp-ui-text-highlight {
    199                 color: $menu-highlight-background;
     200                color: variables.$menu-highlight-background;
    200201        }
    201202
    202203        .wp-ui-notification {
    203                 color: $menu-bubble-text;
    204                 background-color: $menu-bubble-background;
     204                color: variables.$menu-bubble-text;
     205                background-color: variables.$menu-bubble-background;
    205206        }
    206207        .wp-ui-text-notification {
    207                 color: $menu-bubble-background;
     208                color: variables.$menu-bubble-background;
    208209        }
    209210
    210211        .wp-ui-text-icon {
    211                 color: $menu-icon;
     212                color: variables.$menu-icon;
    212213        }
    213214}
    214215
    215216
    216217/* List tables */
    217 @if $low-contrast-theme == "true" {
     218@if variables.$low-contrast-theme == "true" {
    218219        .wrap .page-title-action:hover {
    219                 color: $menu-text;
    220                 background-color: $menu-background;
     220                color: variables.$menu-text;
     221                background-color: variables.$menu-background;
    221222        }
    222223} @else {
    223224        .wrap .page-title-action,
    224225        .wrap .page-title-action:active {
    225                 border: 1px solid $highlight-color;
    226                 color: $highlight-color;
     226                border: 1px solid variables.$highlight-color;
     227                color: variables.$highlight-color;
    227228        }
    228229
    229230        .wrap .page-title-action:hover {
    230                 color: color.adjust($highlight-color, $lightness: -10%);
    231                 border-color: color.adjust($highlight-color, $lightness: -10%);
     231                color: color.adjust(variables.$highlight-color, $lightness: -10%);
     232                border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
    232233        }
    233234
    234235        .wrap .page-title-action:focus {
    235                 border-color: color.adjust($highlight-color, $lightness: 10%);
    236                 color: color.adjust($highlight-color, $lightness: -20%);
    237                 box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
     236                border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
     237                color: color.adjust(variables.$highlight-color, $lightness: -20%);
     238                box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    238239        }
    239240}
    240241
    241242.view-switch a.current:before {
    242         color: $menu-background;
     243        color: variables.$menu-background;
    243244}
    244245
    245246.view-switch a:hover:before {
    246         color: $menu-bubble-background;
     247        color: variables.$menu-bubble-background;
    247248}
    248249
    249250
    … … textarea:focus { 
    252253#adminmenuback,
    253254#adminmenuwrap,
    254255#adminmenu {
    255         background: $menu-background;
     256        background: variables.$menu-background;
    256257}
    257258
    258259#adminmenu a {
    259         color: $menu-text;
     260        color: variables.$menu-text;
    260261}
    261262
    262263#adminmenu div.wp-menu-image:before {
    263         color: $menu-icon;
     264        color: variables.$menu-icon;
    264265}
    265266
    266267#adminmenu a:hover,
    267268#adminmenu li.menu-top:hover,
    268269#adminmenu li.opensub > a.menu-top,
    269270#adminmenu li > a.menu-top:focus {
    270         color: $menu-highlight-text;
    271         background-color: $menu-highlight-background;
     271        color: variables.$menu-highlight-text;
     272        background-color: variables.$menu-highlight-background;
    272273}
    273274
    274275#adminmenu li.menu-top:hover div.wp-menu-image:before,
    275276#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
    276         color: $menu-highlight-icon;
     277        color: variables.$menu-highlight-icon;
    277278}
    278279
    279280
    … … textarea:focus { 
    282283.about-wrap .nav-tab-active,
    283284.nav-tab-active,
    284285.nav-tab-active:hover {
    285         background-color: $body-background;
    286         border-bottom-color: $body-background;
     286        background-color: variables.$body-background;
     287        border-bottom-color: variables.$body-background;
    287288}
    288289
    289290
    … … textarea:focus { 
    293294#adminmenu .wp-has-current-submenu .wp-submenu,
    294295#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    295296#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    296         background: $menu-submenu-background;
     297        background: variables.$menu-submenu-background;
    297298}
    298299
    299300#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
    300301#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    301         border-right-color: $menu-submenu-background;
     302        border-right-color: variables.$menu-submenu-background;
    302303}
    303304
    304305#adminmenu .wp-submenu .wp-submenu-head {
    305         color: $menu-submenu-text;
     306        color: variables.$menu-submenu-text;
    306307}
    307308
    308309#adminmenu .wp-submenu a,
    309310#adminmenu .wp-has-current-submenu .wp-submenu a,
    310311#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
    311312#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
    312         color: $menu-submenu-text;
     313        color: variables.$menu-submenu-text;
    313314
    314315        &:focus, &:hover {
    315                 color: $menu-submenu-focus-text;
     316                color: variables.$menu-submenu-focus-text;
    316317        }
    317318}
    318319
    … … textarea:focus { 
    322323#adminmenu .wp-submenu li.current a,
    323324#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
    324325#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
    325         color: $menu-submenu-current-text;
     326        color: variables.$menu-submenu-current-text;
    326327
    327328        &:hover, &:focus {
    328                 color: $menu-submenu-focus-text;
     329                color: variables.$menu-submenu-focus-text;
    329330        }
    330331}
    331332
    332333ul#adminmenu a.wp-has-current-submenu:after,
    333334ul#adminmenu > li.current > a.current:after {
    334     border-right-color: $body-background;
     335        border-right-color: variables.$body-background;
    335336}
    336337
    337338#adminmenu li.current a.menu-top,
    338339#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
    339340#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
    340341.folded #adminmenu li.current.menu-top {
    341         color: $menu-current-text;
    342         background: $menu-current-background;
     342        color: variables.$menu-current-text;
     343        background: variables.$menu-current-background;
    343344}
    344345
    345346#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
    … … ul#adminmenu > li.current > a.current:after { 
    350351#adminmenu li:hover div.wp-menu-image:before,
    351352#adminmenu li a:focus div.wp-menu-image:before,
    352353#adminmenu li.opensub div.wp-menu-image:before {
    353         color: $menu-current-icon;
     354        color: variables.$menu-current-icon;
    354355}
    355356
    356357
    … … ul#adminmenu > li.current > a.current:after { 
    359360#adminmenu .menu-counter,
    360361#adminmenu .awaiting-mod,
    361362#adminmenu .update-plugins {
    362         color: $menu-bubble-text;
    363         background: $menu-bubble-background;
     363        color: variables.$menu-bubble-text;
     364        background: variables.$menu-bubble-background;
    364365}
    365366
    366367#adminmenu li.current a .awaiting-mod,
    367368#adminmenu li a.wp-has-current-submenu .update-plugins,
    368369#adminmenu li:hover a .awaiting-mod,
    369370#adminmenu li.menu-top:hover > a .update-plugins {
    370         color: $menu-bubble-current-text;
    371         background: $menu-bubble-current-background;
     371        color: variables.$menu-bubble-current-text;
     372        background: variables.$menu-bubble-current-background;
    372373}
    373374
    374375
    375376/* Admin Menu: collapse button */
    376377
    377378#collapse-button {
    378     color: $menu-collapse-text;
     379        color: variables.$menu-collapse-text;
    379380}
    380381
    381382#collapse-button:hover,
    382383#collapse-button:focus {
    383     color: $menu-submenu-focus-text;
     384        color: variables.$menu-submenu-focus-text;
    384385}
    385386
    386387/* Admin Bar */
    387388
    388389#wpadminbar {
    389         color: $menu-text;
    390         background: $menu-background;
     390        color: variables.$menu-text;
     391        background: variables.$menu-background;
    391392}
    392393
    393394#wpadminbar .ab-item,
    394395#wpadminbar a.ab-item,
    395396#wpadminbar > #wp-toolbar span.ab-label,
    396397#wpadminbar > #wp-toolbar span.noticon {
    397         color: $menu-text;
     398        color: variables.$menu-text;
    398399}
    399400
    400401#wpadminbar .ab-icon,
    401402#wpadminbar .ab-icon:before,
    402403#wpadminbar .ab-item:before,
    403404#wpadminbar .ab-item:after {
    404         color: $menu-icon;
     405        color: variables.$menu-icon;
    405406}
    406407
    407408#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
    … … ul#adminmenu > li.current > a.current:after { 
    409410#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
    410411#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
    411412#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
    412         color: $menu-submenu-focus-text;
    413         background: $menu-submenu-background;
     413        color: variables.$menu-submenu-focus-text;
     414        background: variables.$menu-submenu-background;
    414415}
    415416
    416417#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
    417418#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
    418419#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
    419         color: $menu-submenu-focus-text;
     420        color: variables.$menu-submenu-focus-text;
    420421}
    421422
    422423#wpadminbar:not(.mobile) li:hover .ab-icon:before,
    423424#wpadminbar:not(.mobile) li:hover .ab-item:before,
    424425#wpadminbar:not(.mobile) li:hover .ab-item:after,
    425426#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
    426         color: $menu-submenu-focus-text;
     427        color: variables.$menu-submenu-focus-text;
    427428}
    428429
    429430
    430431/* Admin Bar: submenu */
    431432
    432433#wpadminbar .menupop .ab-sub-wrapper {
    433         background: $menu-submenu-background;
     434        background: variables.$menu-submenu-background;
    434435}
    435436
    436437#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
    437438#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
    438         background: $menu-submenu-background-alt;
     439        background: variables.$menu-submenu-background-alt;
    439440}
    440441
    441442#wpadminbar .ab-submenu .ab-item,
    442443#wpadminbar .quicklinks .menupop ul li a,
    443444#wpadminbar .quicklinks .menupop.hover ul li a,
    444445#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
    445         color: $menu-submenu-text;
     446        color: variables.$menu-submenu-text;
    446447}
    447448
    448449#wpadminbar .quicklinks li .blavatar,
    449450#wpadminbar .menupop .menupop > .ab-item:before {
    450         color: $menu-icon;
     451        color: variables.$menu-icon;
    451452}
    452453
    453454#wpadminbar .quicklinks .menupop ul li a:hover,
    … … ul#adminmenu > li.current > a.current:after { 
    468469#wpadminbar li.hover .ab-item:before,
    469470#wpadminbar li:hover #adminbarsearch:before,
    470471#wpadminbar li #adminbarsearch.adminbar-focused:before {
    471         color: $menu-submenu-focus-text;
     472        color: variables.$menu-submenu-focus-text;
    472473}
    473474
    474475#wpadminbar .quicklinks li a:hover .blavatar,
    … … ul#adminmenu > li.current > a.current:after { 
    477478#wpadminbar .menupop .menupop > .ab-item:hover:before,
    478479#wpadminbar.mobile .quicklinks .ab-icon:before,
    479480#wpadminbar.mobile .quicklinks .ab-item:before {
    480         color: $menu-submenu-focus-text;
     481        color: variables.$menu-submenu-focus-text;
    481482}
    482483
    483484#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
    484485#wpadminbar.mobile .quicklinks .hover .ab-item:before {
    485         color: $menu-icon;
     486        color: variables.$menu-icon;
    486487}
    487488
    488489
    489490/* Admin Bar: search */
    490491
    491492#wpadminbar #adminbarsearch:before {
    492         color: $menu-icon;
     493        color: variables.$menu-icon;
    493494}
    494495
    495496#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
    496         color: $menu-text;
    497         background: $adminbar-input-background;
     497        color: variables.$menu-text;
     498        background: variables.$adminbar-input-background;
    498499}
    499500
    500501/* Admin Bar: recovery mode */
    501502
    502503#wpadminbar #wp-admin-bar-recovery-mode {
    503         color: $adminbar-recovery-exit-text;
    504         background-color: $adminbar-recovery-exit-background;
     504        color: variables.$adminbar-recovery-exit-text;
     505        background-color: variables.$adminbar-recovery-exit-background;
    505506}
    506507
    507508#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
    508509#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
    509         color: $adminbar-recovery-exit-text;
     510        color: variables.$adminbar-recovery-exit-text;
    510511}
    511512
    512513#wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
    513514#wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
    514515#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
    515516#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
    516         color: $adminbar-recovery-exit-text;
    517         background-color: $adminbar-recovery-exit-background-alt;
     517        color: variables.$adminbar-recovery-exit-text;
     518        background-color: variables.$adminbar-recovery-exit-background-alt;
    518519}
    519520
    520521/* Admin Bar: my account */
    521522
    522523#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
    523         border-color: $adminbar-avatar-frame;
    524         background-color: $adminbar-avatar-frame;
     524        border-color: variables.$adminbar-avatar-frame;
     525        background-color: variables.$adminbar-avatar-frame;
    525526}
    526527
    527528#wpadminbar #wp-admin-bar-user-info .display-name {
    528         color: $menu-text;
     529        color: variables.$menu-text;
    529530}
    530531
    531532#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
    532         color: $menu-submenu-focus-text;
     533        color: variables.$menu-submenu-focus-text;
    533534}
    534535
    535536#wpadminbar #wp-admin-bar-user-info .username {
    536         color: $menu-submenu-text;
     537        color: variables.$menu-submenu-text;
    537538}
    538539
    539540
    540541/* Pointers */
    541542
    542543.wp-pointer .wp-pointer-content h3 {
    543         background-color: $highlight-color;
    544         border-color: color.adjust( $highlight-color, $lightness: -5% );
     544        background-color: variables.$highlight-color;
     545        border-color: color.adjust( variables.$highlight-color, $lightness: -5% );
    545546}
    546547
    547548.wp-pointer .wp-pointer-content h3:before {
    548         color: $highlight-color;
     549        color: variables.$highlight-color;
    549550}
    550551
    551552.wp-pointer.wp-pointer-top .wp-pointer-arrow,
    552553.wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
    553554.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
    554555.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
    555         border-bottom-color: $highlight-color;
     556        border-bottom-color: variables.$highlight-color;
    556557}
    557558
    558559
    … … ul#adminmenu > li.current > a.current:after { 
    560561
    561562.media-item .bar,
    562563.media-progress-bar div {
    563         background-color: $highlight-color;
     564        background-color: variables.$highlight-color;
    564565}
    565566
    566567.details.attachment {
    567568        box-shadow:
    568569                inset 0 0 0 3px #fff,
    569                 inset 0 0 0 7px $highlight-color;
     570                inset 0 0 0 7px variables.$highlight-color;
    570571}
    571572
    572573.attachment.details .check {
    573         background-color: $highlight-color;
    574         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
     574        background-color: variables.$highlight-color;
     575        box-shadow: 0 0 0 1px #fff, 0 0 0 2px variables.$highlight-color;
    575576}
    576577
    577578.media-selection .attachment.selection.details .thumbnail {
    578         box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
     579        box-shadow: 0 0 0 1px #fff, 0 0 0 3px variables.$highlight-color;
    579580}
    580581
    581582
    … … ul#adminmenu > li.current > a.current:after { 
    584585.theme-browser .theme.active .theme-name,
    585586.theme-browser .theme.add-new-theme a:hover:after,
    586587.theme-browser .theme.add-new-theme a:focus:after {
    587         background: $highlight-color;
     588        background: variables.$highlight-color;
    588589}
    589590
    590591.theme-browser .theme.add-new-theme a:hover span:after,
    591592.theme-browser .theme.add-new-theme a:focus span:after {
    592         color: $highlight-color;
     593        color: variables.$highlight-color;
    593594}
    594595
    595596.theme-section.current,
    596597.theme-filter.current {
    597         border-bottom-color: $menu-background;
     598        border-bottom-color: variables.$menu-background;
    598599}
    599600
    600601body.more-filters-opened .more-filters {
    601         color: $menu-text;
    602         background-color: $menu-background;
     602        color: variables.$menu-text;
     603        background-color: variables.$menu-background;
    603604}
    604605
    605606body.more-filters-opened .more-filters:before {
    606         color: $menu-text;
     607        color: variables.$menu-text;
    607608}
    608609
    609610body.more-filters-opened .more-filters:hover,
    610611body.more-filters-opened .more-filters:focus {
    611         background-color: $menu-highlight-background;
    612         color: $menu-highlight-text;
     612        background-color: variables.$menu-highlight-background;
     613        color: variables.$menu-highlight-text;
    613614}
    614615
    615616body.more-filters-opened .more-filters:hover:before,
    616617body.more-filters-opened .more-filters:focus:before {
    617         color: $menu-highlight-text;
     618        color: variables.$menu-highlight-text;
    618619}
    619620
    620621/* Widgets */
    621622
    622623.widgets-chooser li.widgets-chooser-selected {
    623         background-color: $menu-highlight-background;
    624         color: $menu-highlight-text;
     624        background-color: variables.$menu-highlight-background;
     625        color: variables.$menu-highlight-text;
    625626}
    626627
    627628.widgets-chooser li.widgets-chooser-selected:before,
    628629.widgets-chooser li.widgets-chooser-selected:focus:before {
    629         color: $menu-highlight-text;
     630        color: variables.$menu-highlight-text;
    630631}
    631632
    632633
    … … body.more-filters-opened .more-filters:focus:before { 
    634635
    635636.nav-menus-php .item-edit:focus:before {
    636637        box-shadow:
    637                 0 0 0 1px color.adjust($button-color, $lightness: 10%),
    638                 0 0 2px 1px $button-color;
     638                0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     639                0 0 2px 1px variables.$button-color;
    639640}
    640641
    641642
    642643/* Responsive Component */
    643644
    644645div#wp-responsive-toggle a:before {
    645         color: $menu-icon;
     646        color: variables.$menu-icon;
    646647}
    647648
    648649.wp-responsive-open div#wp-responsive-toggle a {
    649650        // ToDo: make inset border
    650651        border-color: transparent;
    651         background: $menu-highlight-background;
     652        background: variables.$menu-highlight-background;
    652653}
    653654
    654655.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
    655         background: $menu-submenu-background;
     656        background: variables.$menu-submenu-background;
    656657}
    657658
    658659.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
    659         color: $menu-icon;
     660        color: variables.$menu-icon;
    660661}
    661662
    662663/* TinyMCE */
    … … div#wp-responsive-toggle a:before { 
    666667.mce-container.mce-menu .mce-menu-item:focus,
    667668.mce-container.mce-menu .mce-menu-item-normal.mce-active,
    668669.mce-container.mce-menu .mce-menu-item-preview.mce-active {
    669         background: $highlight-color;
     670        background: variables.$highlight-color;
    670671}
    671672
    672673/* Customizer */
    … … div#wp-responsive-toggle a:before { 
    675676        #customize-controls .control-section .accordion-section-title:hover,
    676677        #customize-controls .control-section.open .accordion-section-title,
    677678        #customize-controls .control-section .accordion-section-title:focus {
    678                 color: $link;
    679                 border-left-color: $button-color;
     679                color: variables.$link;
     680                border-left-color: variables.$button-color;
    680681        }
    681682
    682683        .customize-controls-close:focus,
    683684        .customize-controls-close:hover,
    684685        .customize-controls-preview-toggle:focus,
    685686        .customize-controls-preview-toggle:hover {
    686                 color: $link;
    687                 border-top-color: $button-color;
     687                color: variables.$link;
     688                border-top-color: variables.$button-color;
    688689        }
    689690
    690691        .customize-panel-back:hover,
    691692        .customize-panel-back:focus,
    692693        .customize-section-back:hover,
    693694        .customize-section-back:focus {
    694                 color: $link;
    695                 border-left-color: $button-color;
     695                color: variables.$link;
     696                border-left-color: variables.$button-color;
    696697        }
    697698
    698699        .customize-screen-options-toggle:hover,
    … … div#wp-responsive-toggle a:before { 
    702703        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
    703704        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
    704705        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
    705                 color: $link;
     706                color: variables.$link;
    706707        }
    707708
    708709        .customize-screen-options-toggle:focus:before,
    … … div#wp-responsive-toggle a:before { 
    713714        #customize-save-button-wrapper .save:focus,
    714715        #publish-settings:focus {
    715716                box-shadow:
    716                         0 0 0 1px color.adjust($button-color, $lightness: 10%),
    717                         0 0 2px 1px $button-color;
     717                        0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     718                        0 0 2px 1px variables.$button-color;
    718719        }
    719720
    720721        #customize-controls .customize-info.open .customize-help-toggle,
    721722        #customize-controls .customize-info .customize-help-toggle:focus,
    722723        #customize-controls .customize-info .customize-help-toggle:hover {
    723                 color: $link;
     724                color: variables.$link;
    724725        }
    725726
    726727        .control-panel-themes .customize-themes-section-title:focus,
    727728        .control-panel-themes .customize-themes-section-title:hover {
    728                 border-left-color: $button-color;
    729                 color: $link;
     729                border-left-color: variables.$button-color;
     730                color: variables.$link;
    730731        }
    731732
    732733        .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    733                 background: $button-color;
     734                background: variables.$button-color;
    734735        }
    735736
    736737        .control-panel-themes .customize-themes-section-title.selected {
    737                 color: $link;
     738                color: variables.$link;
    738739        }
    739740
    740741        #customize-theme-controls .control-section:hover > .accordion-section-title:after,
    … … div#wp-responsive-toggle a:before { 
    745746        #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
    746747        #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
    747748        #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
    748                 color: $link;
     749                color: variables.$link;
    749750        }
    750751
    751752        .customize-control .attachment-media-view .button-add-media:focus {
    752753                background-color: #fbfbfc;
    753                 border-color: $button-color;
     754                border-color: variables.$button-color;
    754755                border-style: solid;
    755                 box-shadow: 0 0 0 1px $button-color;
     756                box-shadow: 0 0 0 1px variables.$button-color;
    756757                outline: 2px solid transparent;
    757758        }
    758759
    759760        .wp-full-overlay-footer .devices button:focus,
    760761        .wp-full-overlay-footer .devices button.active:hover {
    761                 border-bottom-color: $button-color;
     762                border-bottom-color: variables.$button-color;
    762763        }
    763764
    764765        .wp-full-overlay-footer .devices button:hover:before,
    765766        .wp-full-overlay-footer .devices button:focus:before {
    766                 color: $button-color;
     767                color: variables.$button-color;
    767768        }
    768769
    769770        .wp-full-overlay .collapse-sidebar:hover,
    770771        .wp-full-overlay .collapse-sidebar:focus {
    771                 color: $button-color;
     772                color: variables.$button-color;
    772773        }
    773774
    774775        .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
    775776        .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    776777                box-shadow:
    777                         0 0 0 1px color.adjust($button-color, $lightness: 10%),
    778                         0 0 2px 1px $button-color;
     778                        0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     779                        0 0 2px 1px variables.$button-color;
    779780        }
    780781
    781782        &.wp-customizer .theme-overlay .theme-header .close:focus,
    … … div#wp-responsive-toggle a:before { 
    784785        &.wp-customizer .theme-overlay .theme-header .right:hover,
    785786        &.wp-customizer .theme-overlay .theme-header .left:focus,
    786787        &.wp-customizer .theme-overlay .theme-header .left:hover {
    787                 border-bottom-color: $button-color;
    788                 color: $link;
     788                border-bottom-color: variables.$button-color;
     789                color: variables.$link;
    789790        }
    790791}
    791792
    792793/* Welcome Panel */
    793794.welcome-panel {
    794         background-color: $dashboard-accent-1;
     795        background-color: variables.$dashboard-accent-1;
    795796}
    796797
    797798.welcome-panel-header-image circle {
    798         stroke: $dashboard-accent-2;
    799         fill: $dashboard-accent-1;
     799        stroke: variables.$dashboard-accent-2;
     800        fill: variables.$dashboard-accent-1;
    800801}
    801802
    802803[class*="welcome-panel-icon"] {
    803         background-color: $dashboard-icon-background;
     804        background-color: variables.$dashboard-icon-background;
    804805}

  • src/wp-admin/css/colors/_mixins.scss 

    diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss
index eb98dfdbe0..c486a8d9c3 100644
    a b  
     1
     2@use 'sass:color';
     3
    14/*
    25 * Button mixin- creates a button effect with correct
    36 * highlights/shadows, based on a base color.

  • src/wp-admin/css/colors/blue/colors.scss 

    diff --git a/src/wp-admin/css/colors/blue/colors.scss b/src/wp-admin/css/colors/blue/colors.scss
index 664b5e21a5..b3d68ae2e4 100644
    a b  
    11
    2 $scheme-name: "blue";
    3 $base-color: #52accc;
    4 $icon-color: #e5f8ff;
    52$highlight-color: #096484;
    6 $notification-color: #e1a948;
    7 $button-color: #e1a948;
    83
    9 $menu-submenu-text: #e2ecf1;
    10 $menu-submenu-focus-text: #fff;
    11 $menu-submenu-background: #4796b3;
    12 
    13 $dashboard-icon-background: $highlight-color;
    14 
    15 @import "../_admin.scss";
     4@use "../_admin.scss" with (
     5        $scheme-name: "blue",
     6        $base-color: #52accc,
     7        $icon-color: #e5f8ff,
     8        $highlight-color: $highlight-color,
     9        $notification-color: #e1a948,
     10        $button-color: #e1a948,
     11        $menu-submenu-text: #e2ecf1,
     12        $menu-submenu-background: #4796b3,
     13        $menu-submenu-focus-text: #fff,
     14        $dashboard-icon-background: $highlight-color
     15);

  • src/wp-admin/css/colors/coffee/colors.scss 

    diff --git a/src/wp-admin/css/colors/coffee/colors.scss b/src/wp-admin/css/colors/coffee/colors.scss
index 4c398cc072..8548ad02d8 100644
    a b  
    11
    2 $scheme-name: "coffee";
    32$base-color: #59524c;
    4 $highlight-color: #c7a589;
    5 $notification-color: #9ea476;
    6 $low-contrast-theme: "true";
    73
    8 $form-checked: $base-color;
    9 
    10 @import "../_admin.scss";
     4@use "../_admin.scss" with (
     5        $scheme-name: "coffee",
     6        $base-color: $base-color,
     7        $highlight-color: #c7a589,
     8        $notification-color: #9ea476,
     9        $form-checked: $base-color,
     10        $low-contrast-theme: "true"
     11);

  • src/wp-admin/css/colors/ectoplasm/colors.scss 

    diff --git a/src/wp-admin/css/colors/ectoplasm/colors.scss b/src/wp-admin/css/colors/ectoplasm/colors.scss
index 769b06594d..d8611163f6 100644
    a b  
    11
    2 $scheme-name: "ectoplasm";
    32$base-color: #523f6d;
    4 $icon-color: #ece6f6;
    5 $highlight-color: #a3b745;
    6 $notification-color: #d46f15;
    73
    8 $form-checked: $base-color;
    9 
    10 $dashboard-accent-1: $base-color;
    11 
    12 @import "../_admin.scss";
     4@use "../_admin.scss" with (
     5        $scheme-name: "ectoplasm",
     6        $base-color: $base-color,
     7        $icon-color: #ece6f6,
     8        $highlight-color: #a3b745,
     9        $notification-color: #d46f15,
     10        $form-checked: $base-color,
     11        $dashboard-accent-1: $base-color
     12);

  • src/wp-admin/css/colors/light/colors.scss 

    diff --git a/src/wp-admin/css/colors/light/colors.scss b/src/wp-admin/css/colors/light/colors.scss
index 72783635a4..65595c191a 100644
    a b  
    11
    2 $scheme-name: "light";
    3 $base-color: #e5e5e5;
    4 $icon-color: #999;
    52$text-color: #333;
    6 $highlight-color: #04a4cc;
    7 $notification-color: #d64e07;
    8 
    9 $body-background: #f5f5f5;
    10 
    11 $menu-highlight-text: #fff;
    12 $menu-highlight-icon: #ccc;
    13 $menu-highlight-background: #888;
    14 
    15 $menu-bubble-text: #fff;
    163$menu-avatar-frame: #aaa;
    17 $menu-submenu-background: #fff;
    18 
    19 $menu-collapse-text: #777;
    20 $menu-collapse-focus-icon: #555;
    21 
    22 $dashboard-icon-background: $text-color;
    234
    24 @import "../_admin.scss";
     5@use "../_admin.scss" with (
     6        $scheme-name: "light",
     7        $text-color: $text-color,
     8        $base-color: #e5e5e5,
     9        $icon-color: #999,
     10        $highlight-color: #04a4cc,
     11        $notification-color: #d64e07,
     12        $body-background: #f5f5f5,
     13        $menu-highlight-text: #fff,
     14        $menu-highlight-icon: #ccc,
     15        $menu-highlight-background: #888,
     16        $menu-submenu-background: #fff,
     17        $menu-bubble-text: #fff,
     18        $menu-collapse-text: #777,
     19        $menu-collapse-focus-icon: #555,
     20        $dashboard-icon-background: $text-color
     21);
     22
     23@use "../variables";
    2524
    2625/* Override the theme filter highlight color for this scheme */
    2726.theme-section.current,
    2827.theme-filter.current {
    29         border-bottom-color: $highlight-color;
     28        border-bottom-color: variables.$highlight-color;
    3029}

  • src/wp-admin/css/colors/midnight/colors.scss 

    diff --git a/src/wp-admin/css/colors/midnight/colors.scss b/src/wp-admin/css/colors/midnight/colors.scss
index 305aa27c8e..7fa167f784 100644
    a b  
    11
    2 $scheme-name: "midnight";
    3 $base-color: #363b3f;
    42$highlight-color: #e14d43;
    53$notification-color: #69a8bb;
    64
    7 $dashboard-accent-1: $notification-color;
    8 $dashboard-icon-background: $highlight-color;
    9 
    10 @import "../_admin.scss";
     5@use "../_admin.scss" with (
     6        $scheme-name: "midnight",
     7        $base-color: #363b3f,
     8        $highlight-color: $highlight-color,
     9        $notification-color: $notification-color,
     10        $dashboard-accent-1: $notification-color,
     11        $dashboard-icon-background: $highlight-color
     12);

  • src/wp-admin/css/colors/modern/colors.scss 

    diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss
index 8d83bf09d8..91b3d9152c 100644
    a b  
    11@use 'sass:color';
    22
    3 $scheme-name: "modern";
    4 $base-color: #1e1e1e;
    53$highlight-color: #3858e9;
    6 $menu-submenu-focus-text: #33f078;
    7 $notification-color: $highlight-color;
    84
    9 $link: $highlight-color;
    10 $link-focus: color.adjust($highlight-color, $lightness: -10%);
    11 
    12 $dashboard-accent-1: #273fcc;
    13 $dashboard-accent-2: #627eff;
    14 $dashboard-icon-background: #1d2327;
    15 
    16 @import "../_admin.scss";
     5@use "../_admin.scss" with (
     6        $scheme-name: "modern",
     7        $base-color: #1e1e1e,
     8        $highlight-color: $highlight-color,
     9        $notification-color: $highlight-color,
     10        $link: $highlight-color,
     11        $link-focus: color.adjust($highlight-color, $lightness: -10%),
     12        $menu-submenu-focus-text: #33f078,
     13        $dashboard-accent-1: #273fcc,
     14        $dashboard-accent-2: #627eff,
     15        $dashboard-icon-background: #1d2327
     16);

  • src/wp-admin/css/colors/ocean/colors.scss 

    diff --git a/src/wp-admin/css/colors/ocean/colors.scss b/src/wp-admin/css/colors/ocean/colors.scss
index cf17112b85..477f1aa49a 100644
    a b  
    11
    2 $scheme-name: "ocean";
    32$base-color: #738e96;
    4 $icon-color: #f2fcff;
    5 $highlight-color: #9ebaa0;
    6 $notification-color: #aa9d88;
    7 $low-contrast-theme: "true";
    83
    9 $form-checked: $base-color;
    10 
    11 @import "../_admin.scss";
     4@use "../_admin.scss" with (
     5        $scheme-name: "ocean",
     6        $base-color: $base-color,
     7        $icon-color: #f2fcff,
     8        $highlight-color: #9ebaa0,
     9        $notification-color: #aa9d88,
     10        $form-checked: $base-color,
     11        $low-contrast-theme: "true"
     12);

  • src/wp-admin/css/colors/sunrise/colors.scss 

    diff --git a/src/wp-admin/css/colors/sunrise/colors.scss b/src/wp-admin/css/colors/sunrise/colors.scss
index e40e24be99..fea890c3c8 100644
    a b  
    11@use 'sass:color';
    22
    3 $scheme-name: "sunrise";
    4 $base-color: #cf4944;
    53$highlight-color: #dd823b;
    6 $notification-color: #ccaf0b;
    7 $menu-submenu-focus-text: color.adjust( $highlight-color, $lightness: 35% );
    84
    9 @import "../_admin.scss";
     5@use "../_admin.scss" with (
     6        $scheme-name: "sunrise",
     7        $base-color: #cf4944,
     8        $highlight-color: $highlight-color,
     9        $notification-color: #ccaf0b,
     10        $menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%)
     11);