WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/16/2025 09:03:12 PM (20 months ago)
Author:
desrosj
Message:

Administration: Modernize admin color scheme SASS files.

This updates the admin color scheme .sass files to address some deprecated notices caused by upstream changes.

  • string and colors are no longer globally available functions.
  • @import is deprecated in favor of @use.

There are still a few notices that are output, however this will require an update to the grunt-sass package to resolve.

Props MattyRob.
Fixes #62323.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r59185 r59656  
    1 
    2 @import 'variables';
    3 @import 'mixins';
     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';
    46
    57/**
    … …  
    810 */
    911@function url-friendly-colour( $color ) {
    10         @return '%23' + str-slice( '#{ $color }', 2, -1 );
     12        @return '%23' + string.slice( '#{ $color }', 2, -1 );
    1113}
    1214
    1315body {
    14         background: $body-background;
     16        background: variables.$body-background;
    1517}
    1618
    … …  
    1921
    2022a {
    21         color: $link;
     23        color: variables.$link;
    2224
    2325        &:hover,
    2426        &:active,
    2527        &:focus {
    26                 color: $link-focus;
     28                color: variables.$link-focus;
    2729        }
    2830}
    … …  
    3739
    3840.wp-core-ui .button-link {
    39         color: $link;
     41        color: variables.$link;
    4042
    4143        &:hover,
    4244        &:active,
    4345        &:focus {
    44                 color: $link-focus;
     46                color: variables.$link-focus;
    4547        }
    4648}
    … …  
    6769
    6870input[type=checkbox]:checked::before {
    69         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");
     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(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
    7072}
    7173
    7274input[type=radio]:checked::before {
    73         background: $form-checked;
     75        background: variables.$form-checked;
    7476}
    7577
    7678.wp-core-ui input[type="reset"]:hover,
    7779.wp-core-ui input[type="reset"]:active {
    78         color: $link-focus;
     80        color: variables.$link-focus;
    7981}
    8082
    … …  
    98100select:focus,
    99101textarea:focus {
    100         border-color: $highlight-color;
    101         box-shadow: 0 0 0 1px $highlight-color;
     102        border-color: variables.$highlight-color;
     103        box-shadow: 0 0 0 1px variables.$highlight-color;
    102104}
    103105
    … …  
    136138        .button.active:focus,
    137139        .button.active:hover {
    138                 border-color: $button-color;
     140                border-color: variables.$button-color;
    139141                color: color.adjust(#32373c, $lightness: -5%);
    140                 box-shadow: inset 0 2px 5px -3px $button-color;
     142                box-shadow: inset 0 2px 5px -3px variables.$button-color;
    141143        }
    142144
    … …  
    145147        }
    146148
    147         @if ( $low-contrast-theme != "true" ) {
     149        @if ( variables.$low-contrast-theme != "true" ) {
    148150                .button,
    149151                .button-secondary {
    150                         color: $highlight-color;
    151                         border-color: $highlight-color;
     152                        color: variables.$highlight-color;
     153                        border-color: variables.$highlight-color;
    152154                }
    153155
    … …  
    155157                .button:hover,
    156158                .button-secondary:hover{
    157                         border-color: color.adjust($highlight-color, $lightness: -10%);
    158                         color: color.adjust($highlight-color, $lightness: -10%);
     159                        border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
     160                        color: color.adjust(variables.$highlight-color, $lightness: -10%);
    159161                }
    160162
    … …  
    162164                .button:focus,
    163165                .button-secondary:focus {
    164                         border-color: color.adjust($highlight-color, $lightness: 10%);
    165                         color: color.adjust($highlight-color, $lightness: -20%);
    166                         box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
     166                        border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
     167                        color: color.adjust(variables.$highlight-color, $lightness: -20%);
     168                        box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    167169                }
    168170
    … …  
    175177
    176178        .button-primary {
    177                 @include button( $button-color );
     179                @include mixins.button( variables.$button-color );
    178180        }
    179181
    180182        .button-group > .button.active {
    181                 border-color: $button-color;
     183                border-color: variables.$button-color;
    182184        }
    183185
    184186        .wp-ui-primary {
    185                 color: $text-color;
    186                 background-color: $base-color;
     187                color: variables.$text-color;
     188                background-color: variables.$base-color;
    187189        }
    188190        .wp-ui-text-primary {
    189                 color: $base-color;
     191                color: variables.$base-color;
    190192        }
    191193
    192194        .wp-ui-highlight {
    193                 color: $menu-highlight-text;
    194                 background-color: $menu-highlight-background;
     195                color: variables.$menu-highlight-text;
     196                background-color: variables.$menu-highlight-background;
    195197        }
    196198        .wp-ui-text-highlight {
    197                 color: $menu-highlight-background;
     199                color: variables.$menu-highlight-background;
    198200        }
    199201
    200202        .wp-ui-notification {
    201                 color: $menu-bubble-text;
    202                 background-color: $menu-bubble-background;
     203                color: variables.$menu-bubble-text;
     204                background-color: variables.$menu-bubble-background;
    203205        }
    204206        .wp-ui-text-notification {
    205                 color: $menu-bubble-background;
     207                color: variables.$menu-bubble-background;
    206208        }
    207209
    208210        .wp-ui-text-icon {
    209                 color: $menu-icon;
     211                color: variables.$menu-icon;
    210212        }
    211213}
    … …  
    213215
    214216/* List tables */
    215 @if $low-contrast-theme == "true" {
     217@if variables.$low-contrast-theme == "true" {
    216218        .wrap .page-title-action:hover {
    217                 color: $menu-text;
    218                 background-color: $menu-background;
     219                color: variables.$menu-text;
     220                background-color: variables.$menu-background;
    219221        }
    220222} @else {
    221223        .wrap .page-title-action,
    222224        .wrap .page-title-action:active {
    223                 border: 1px solid $highlight-color;
    224                 color: $highlight-color;
     225                border: 1px solid variables.$highlight-color;
     226                color: variables.$highlight-color;
    225227        }
    226228
    227229        .wrap .page-title-action:hover {
    228                 color: color.adjust($highlight-color, $lightness: -10%);
    229                 border-color: color.adjust($highlight-color, $lightness: -10%);
     230                color: color.adjust(variables.$highlight-color, $lightness: -10%);
     231                border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
    230232        }
    231233
    232234        .wrap .page-title-action:focus {
    233                 border-color: color.adjust($highlight-color, $lightness: 10%);
    234                 color: color.adjust($highlight-color, $lightness: -20%);
    235                 box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
     235                border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
     236                color: color.adjust(variables.$highlight-color, $lightness: -20%);
     237                box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
    236238        }
    237239}
    238240
    239241.view-switch a.current:before {
    240         color: $menu-background;
     242        color: variables.$menu-background;
    241243}
    242244
    243245.view-switch a:hover:before {
    244         color: $menu-bubble-background;
     246        color: variables.$menu-bubble-background;
    245247}
    246248
    … …  
    251253#adminmenuwrap,
    252254#adminmenu {
    253         background: $menu-background;
     255        background: variables.$menu-background;
    254256}
    255257
    256258#adminmenu a {
    257         color: $menu-text;
     259        color: variables.$menu-text;
    258260}
    259261
    260262#adminmenu div.wp-menu-image:before {
    261         color: $menu-icon;
     263        color: variables.$menu-icon;
    262264}
    263265
    … …  
    266268#adminmenu li.opensub > a.menu-top,
    267269#adminmenu li > a.menu-top:focus {
    268         color: $menu-highlight-text;
    269         background-color: $menu-highlight-background;
     270        color: variables.$menu-highlight-text;
     271        background-color: variables.$menu-highlight-background;
    270272}
    271273
    272274#adminmenu li.menu-top:hover div.wp-menu-image:before,
    273275#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
    274         color: $menu-highlight-icon;
     276        color: variables.$menu-highlight-icon;
    275277}
    276278
    … …  
    281283.nav-tab-active,
    282284.nav-tab-active:hover {
    283         background-color: $body-background;
    284         border-bottom-color: $body-background;
     285        background-color: variables.$body-background;
     286        border-bottom-color: variables.$body-background;
    285287}
    286288
    … …  
    292294#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    293295#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    294         background: $menu-submenu-background;
     296        background: variables.$menu-submenu-background;
    295297}
    296298
    297299#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
    298300#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    299         border-right-color: $menu-submenu-background;
     301        border-right-color: variables.$menu-submenu-background;
    300302}
    301303
    302304#adminmenu .wp-submenu .wp-submenu-head {
    303         color: $menu-submenu-text;
     305        color: variables.$menu-submenu-text;
    304306}
    305307
    … …  
    308310#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
    309311#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
    310         color: $menu-submenu-text;
     312        color: variables.$menu-submenu-text;
    311313
    312314        &:focus, &:hover {
    313                 color: $menu-submenu-focus-text;
     315                color: variables.$menu-submenu-focus-text;
    314316        }
    315317}
    … …  
    321323#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
    322324#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
    323         color: $menu-submenu-current-text;
     325        color: variables.$menu-submenu-current-text;
    324326
    325327        &:hover, &:focus {
    326                 color: $menu-submenu-focus-text;
     328                color: variables.$menu-submenu-focus-text;
    327329        }
    328330}
    … …  
    330332ul#adminmenu a.wp-has-current-submenu:after,
    331333ul#adminmenu > li.current > a.current:after {
    332     border-right-color: $body-background;
     334    border-right-color: variables.$body-background;
    333335}
    334336
    … …  
    337339#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
    338340.folded #adminmenu li.current.menu-top {
    339         color: $menu-current-text;
    340         background: $menu-current-background;
     341        color: variables.$menu-current-text;
     342        background: variables.$menu-current-background;
    341343}
    342344
    … …  
    349351#adminmenu li a:focus div.wp-menu-image:before,
    350352#adminmenu li.opensub div.wp-menu-image:before {
    351         color: $menu-current-icon;
     353        color: variables.$menu-current-icon;
    352354}
    353355
    … …  
    358360#adminmenu .awaiting-mod,
    359361#adminmenu .update-plugins {
    360         color: $menu-bubble-text;
    361         background: $menu-bubble-background;
     362        color: variables.$menu-bubble-text;
     363        background: variables.$menu-bubble-background;
    362364}
    363365
    … …  
    366368#adminmenu li:hover a .awaiting-mod,
    367369#adminmenu li.menu-top:hover > a .update-plugins {
    368         color: $menu-bubble-current-text;
    369         background: $menu-bubble-current-background;
     370        color: variables.$menu-bubble-current-text;
     371        background: variables.$menu-bubble-current-background;
    370372}
    371373
    … …  
    374376
    375377#collapse-button {
    376     color: $menu-collapse-text;
     378    color: variables.$menu-collapse-text;
    377379}
    378380
    379381#collapse-button:hover,
    380382#collapse-button:focus {
    381     color: $menu-submenu-focus-text;
     383    color: variables.$menu-submenu-focus-text;
    382384}
    383385
    … …  
    385387
    386388#wpadminbar {
    387         color: $menu-text;
    388         background: $menu-background;
     389        color: variables.$menu-text;
     390        background: variables.$menu-background;
    389391}
    390392
    … …  
    393395#wpadminbar > #wp-toolbar span.ab-label,
    394396#wpadminbar > #wp-toolbar span.noticon {
    395         color: $menu-text;
     397        color: variables.$menu-text;
    396398}
    397399
    … …  
    400402#wpadminbar .ab-item:before,
    401403#wpadminbar .ab-item:after {
    402         color: $menu-icon;
     404        color: variables.$menu-icon;
    403405}
    404406
    … …  
    408410#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
    409411#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
    410         color: $menu-submenu-focus-text;
    411         background: $menu-submenu-background;
     412        color: variables.$menu-submenu-focus-text;
     413        background: variables.$menu-submenu-background;
    412414}
    413415
    … …  
    415417#wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
    416418#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
    417         color: $menu-submenu-focus-text;
     419        color: variables.$menu-submenu-focus-text;
    418420}
    419421
    … …  
    422424#wpadminbar:not(.mobile) li:hover .ab-item:after,
    423425#wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
    424         color: $menu-submenu-focus-text;
     426        color: variables.$menu-submenu-focus-text;
    425427}
    426428
    … …  
    429431
    430432#wpadminbar .menupop .ab-sub-wrapper {
    431         background: $menu-submenu-background;
     433        background: variables.$menu-submenu-background;
    432434}
    433435
    434436#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
    435437#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
    436         background: $menu-submenu-background-alt;
     438        background: variables.$menu-submenu-background-alt;
    437439}
    438440
    … …  
    441443#wpadminbar .quicklinks .menupop.hover ul li a,
    442444#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
    443         color: $menu-submenu-text;
     445        color: variables.$menu-submenu-text;
    444446}
    445447
    446448#wpadminbar .quicklinks li .blavatar,
    447449#wpadminbar .menupop .menupop > .ab-item:before {
    448         color: $menu-icon;
     450        color: variables.$menu-icon;
    449451}
    450452
    … …  
    467469#wpadminbar li:hover #adminbarsearch:before,
    468470#wpadminbar li #adminbarsearch.adminbar-focused:before {
    469         color: $menu-submenu-focus-text;
     471        color: variables.$menu-submenu-focus-text;
    470472}
    471473
    … …  
    476478#wpadminbar.mobile .quicklinks .ab-icon:before,
    477479#wpadminbar.mobile .quicklinks .ab-item:before {
    478         color: $menu-submenu-focus-text;
     480        color: variables.$menu-submenu-focus-text;
    479481}
    480482
    481483#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
    482484#wpadminbar.mobile .quicklinks .hover .ab-item:before {
    483         color: $menu-icon;
     485        color: variables.$menu-icon;
    484486}
    485487
    … …  
    488490
    489491#wpadminbar #adminbarsearch:before {
    490         color: $menu-icon;
     492        color: variables.$menu-icon;
    491493}
    492494
    493495#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
    494         color: $menu-text;
    495         background: $adminbar-input-background;
     496        color: variables.$menu-text;
     497        background: variables.$adminbar-input-background;
    496498}
    497499
    … …  
    499501
    500502#wpadminbar #wp-admin-bar-recovery-mode {
    501         color: $adminbar-recovery-exit-text;
    502         background-color: $adminbar-recovery-exit-background;
     503        color: variables.$adminbar-recovery-exit-text;
     504        background-color: variables.$adminbar-recovery-exit-background;
    503505}
    504506
    505507#wpadminbar #wp-admin-bar-recovery-mode .ab-item,
    506508#wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
    507         color: $adminbar-recovery-exit-text;
     509        color: variables.$adminbar-recovery-exit-text;
    508510}
    509511
    … …  
    512514#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
    513515#wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
    514         color: $adminbar-recovery-exit-text;
    515         background-color: $adminbar-recovery-exit-background-alt;
     516        color: variables.$adminbar-recovery-exit-text;
     517        background-color: variables.$adminbar-recovery-exit-background-alt;
    516518}
    517519
    … …  
    519521
    520522#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
    521         border-color: $adminbar-avatar-frame;
    522         background-color: $adminbar-avatar-frame;
     523        border-color: variables.$adminbar-avatar-frame;
     524        background-color: variables.$adminbar-avatar-frame;
    523525}
    524526
    525527#wpadminbar #wp-admin-bar-user-info .display-name {
    526         color: $menu-text;
     528        color: variables.$menu-text;
    527529}
    528530
    529531#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
    530         color: $menu-submenu-focus-text;
     532        color: variables.$menu-submenu-focus-text;
    531533}
    532534
    533535#wpadminbar #wp-admin-bar-user-info .username {
    534         color: $menu-submenu-text;
     536        color: variables.$menu-submenu-text;
    535537}
    536538
    … …  
    539541
    540542.wp-pointer .wp-pointer-content h3 {
    541         background-color: $highlight-color;
    542         border-color: color.adjust($highlight-color, $lightness: -5%);
     543        background-color: variables.$highlight-color;
     544        border-color: color.adjust(variables.$highlight-color, $lightness: -5%);
    543545}
    544546
    545547.wp-pointer .wp-pointer-content h3:before {
    546         color: $highlight-color;
     548        color: variables.$highlight-color;
    547549}
    548550
    … …  
    551553.wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
    552554.wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
    553         border-bottom-color: $highlight-color;
     555        border-bottom-color: variables.$highlight-color;
    554556}
    555557
    … …  
    559561.media-item .bar,
    560562.media-progress-bar div {
    561         background-color: $highlight-color;
     563        background-color: variables.$highlight-color;
    562564}
    563565
    … …  
    565567        box-shadow:
    566568                inset 0 0 0 3px #fff,
    567                 inset 0 0 0 7px $highlight-color;
     569                inset 0 0 0 7px variables.$highlight-color;
    568570}
    569571
    570572.attachment.details .check {
    571         background-color: $highlight-color;
    572         box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
     573        background-color: variables.$highlight-color;
     574        box-shadow: 0 0 0 1px #fff, 0 0 0 2px variables.$highlight-color;
    573575}
    574576
    575577.media-selection .attachment.selection.details .thumbnail {
    576         box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
     578        box-shadow: 0 0 0 1px #fff, 0 0 0 3px variables.$highlight-color;
    577579}
    578580
    … …  
    583585.theme-browser .theme.add-new-theme a:hover:after,
    584586.theme-browser .theme.add-new-theme a:focus:after {
    585         background: $highlight-color;
     587        background: variables.$highlight-color;
    586588}
    587589
    588590.theme-browser .theme.add-new-theme a:hover span:after,
    589591.theme-browser .theme.add-new-theme a:focus span:after {
    590         color: $highlight-color;
     592        color: variables.$highlight-color;
    591593}
    592594
    593595.theme-section.current,
    594596.theme-filter.current {
    595         border-bottom-color: $menu-background;
     597        border-bottom-color: variables.$menu-background;
    596598}
    597599
    598600body.more-filters-opened .more-filters {
    599         color: $menu-text;
    600         background-color: $menu-background;
     601        color: variables.$menu-text;
     602        background-color: variables.$menu-background;
    601603}
    602604
    603605body.more-filters-opened .more-filters:before {
    604         color: $menu-text;
     606        color: variables.$menu-text;
    605607}
    606608
    607609body.more-filters-opened .more-filters:hover,
    608610body.more-filters-opened .more-filters:focus {
    609         background-color: $menu-highlight-background;
    610         color: $menu-highlight-text;
     611        background-color: variables.$menu-highlight-background;
     612        color: variables.$menu-highlight-text;
    611613}
    612614
    613615body.more-filters-opened .more-filters:hover:before,
    614616body.more-filters-opened .more-filters:focus:before {
    615         color: $menu-highlight-text;
     617        color: variables.$menu-highlight-text;
    616618}
    617619
    … …  
    619621
    620622.widgets-chooser li.widgets-chooser-selected {
    621         background-color: $menu-highlight-background;
    622         color: $menu-highlight-text;
     623        background-color: variables.$menu-highlight-background;
     624        color: variables.$menu-highlight-text;
    623625}
    624626
    625627.widgets-chooser li.widgets-chooser-selected:before,
    626628.widgets-chooser li.widgets-chooser-selected:focus:before {
    627         color: $menu-highlight-text;
     629        color: variables.$menu-highlight-text;
    628630}
    629631
    … …  
    633635.nav-menus-php .item-edit:focus:before {
    634636        box-shadow:
    635                 0 0 0 1px color.adjust($button-color, $lightness: 10%),
    636                 0 0 2px 1px $button-color;
     637                0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     638                0 0 2px 1px variables.$button-color;
    637639}
    638640
    … …  
    641643
    642644div#wp-responsive-toggle a:before {
    643         color: $menu-icon;
     645        color: variables.$menu-icon;
    644646}
    645647
    … …  
    647649        // ToDo: make inset border
    648650        border-color: transparent;
    649         background: $menu-highlight-background;
     651        background: variables.$menu-highlight-background;
    650652}
    651653
    652654.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
    653         background: $menu-submenu-background;
     655        background: variables.$menu-submenu-background;
    654656}
    655657
    656658.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
    657         color: $menu-icon;
     659        color: variables.$menu-icon;
    658660}
    659661
    … …  
    665667.mce-container.mce-menu .mce-menu-item-normal.mce-active,
    666668.mce-container.mce-menu .mce-menu-item-preview.mce-active {
    667         background: $highlight-color;
     669        background: variables.$highlight-color;
    668670}
    669671
    … …  
    674676        #customize-controls .control-section.open .accordion-section-title,
    675677        #customize-controls .control-section .accordion-section-title:focus {
    676                 color: $link;
    677                 border-left-color: $button-color;
     678                color: variables.$link;
     679                border-left-color: variables.$button-color;
    678680        }
    679681
    … …  
    682684        .customize-controls-preview-toggle:focus,
    683685        .customize-controls-preview-toggle:hover {
    684                 color: $link;
    685                 border-top-color: $button-color;
     686                color: variables.$link;
     687                border-top-color: variables.$button-color;
    686688        }
    687689
    … …  
    690692        .customize-section-back:hover,
    691693        .customize-section-back:focus {
    692                 color: $link;
    693                 border-left-color: $button-color;
     694                color: variables.$link;
     695                border-left-color: variables.$button-color;
    694696        }
    695697
    … …  
    701703        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
    702704        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
    703                 color: $link;
     705                color: variables.$link;
    704706        }
    705707
    … …  
    712714        #publish-settings:focus {
    713715                box-shadow:
    714                         0 0 0 1px color.adjust($button-color, $lightness: 10%),
    715                         0 0 2px 1px $button-color;
     716                        0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     717                        0 0 2px 1px variables.$button-color;
    716718        }
    717719
    … …  
    719721        #customize-controls .customize-info .customize-help-toggle:focus,
    720722        #customize-controls .customize-info .customize-help-toggle:hover {
    721                 color: $link;
     723                color: variables.$link;
    722724        }
    723725
    724726        .control-panel-themes .customize-themes-section-title:focus,
    725727        .control-panel-themes .customize-themes-section-title:hover {
    726                 border-left-color: $button-color;
    727                 color: $link;
     728                border-left-color: variables.$button-color;
     729                color: variables.$link;
    728730        }
    729731
    730732        .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
    731                 background: $button-color;
     733                background: variables.$button-color;
    732734        }
    733735
    734736        .control-panel-themes .customize-themes-section-title.selected {
    735                 color: $link;
     737                color: variables.$link;
    736738        }
    737739
    … …  
    744746        #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
    745747        #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
    746                 color: $link;
     748                color: variables.$link;
    747749        }
    748750
    749751        .customize-control .attachment-media-view .button-add-media:focus {
    750752                background-color: #fbfbfc;
    751                 border-color: $button-color;
     753                border-color: variables.$button-color;
    752754                border-style: solid;
    753                 box-shadow: 0 0 0 1px $button-color;
     755                box-shadow: 0 0 0 1px variables.$button-color;
    754756                outline: 2px solid transparent;
    755757        }
    … …  
    757759        .wp-full-overlay-footer .devices button:focus,
    758760        .wp-full-overlay-footer .devices button.active:hover {
    759                 border-bottom-color: $button-color;
     761                border-bottom-color: variables.$button-color;
    760762        }
    761763
    762764        .wp-full-overlay-footer .devices button:hover:before,
    763765        .wp-full-overlay-footer .devices button:focus:before {
    764                 color: $button-color;
     766                color: variables.$button-color;
    765767        }
    766768
    767769        .wp-full-overlay .collapse-sidebar:hover,
    768770        .wp-full-overlay .collapse-sidebar:focus {
    769                 color: $button-color;
     771                color: variables.$button-color;
    770772        }
    771773
    … …  
    773775        .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    774776                box-shadow:
    775                         0 0 0 1px color.adjust($button-color, $lightness: 10%),
    776                         0 0 2px 1px $button-color;
     777                        0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
     778                        0 0 2px 1px variables.$button-color;
    777779        }
    778780
    … …  
    783785        &.wp-customizer .theme-overlay .theme-header .left:focus,
    784786        &.wp-customizer .theme-overlay .theme-header .left:hover {
    785                 border-bottom-color: $button-color;
    786                 color: $link;
    787         }
    788 }
     787                border-bottom-color: variables.$button-color;
     788                color: variables.$link;
     789        }
     790}
Note: See TracChangeset for help on using the changeset viewer.