WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/16/2025 09:03:12 PM (5 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.