WordPress.org
Get WordPress

Make WordPress Core

Changeset 59656


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

Location:
trunk
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/package-lock.json

    r59509 r59656  
    145145                                "qunit": "~2.23.1",
    146146                                "react-refresh": "0.14.0",
    147                                 "sass": "1.79.6",
     147                                "sass": "1.83.4",
    148148                                "sinon": "16.1.3",
    149149                                "sinon-test": "~3.1.6",
    … …  
    37283728                        "hasInstallScript": true,
    37293729                        "license": "MIT",
     3730                        "optional": true,
    37303731                        "dependencies": {
    37313732                                "detect-libc": "^1.0.3",
    … …  
    40364037                        "dev": true,
    40374038                        "license": "MIT",
     4039                        "optional": true,
    40384040                        "dependencies": {
    40394041                                "fill-range": "^7.1.1"
    … …  
    40494051                        "dev": true,
    40504052                        "license": "MIT",
     4053                        "optional": true,
    40514054                        "dependencies": {
    40524055                                "to-regex-range": "^5.0.1"
    … …  
    40624065                        "dev": true,
    40634066                        "license": "MIT",
     4067                        "optional": true,
    40644068                        "engines": {
    40654069                                "node": ">=0.12.0"
    … …  
    40724076                        "dev": true,
    40734077                        "license": "MIT",
     4078                        "optional": true,
    40744079                        "dependencies": {
    40754080                                "braces": "^3.0.3",
    … …  
    40864091                        "dev": true,
    40874092                        "license": "MIT",
     4093                        "optional": true,
    40884094                        "dependencies": {
    40894095                                "is-number": "^7.0.0"
    … …  
    1420614212                        "dev": true,
    1420714213                        "license": "Apache-2.0",
     14214                        "optional": true,
    1420814215                        "bin": {
    1420914216                                "detect-libc": "bin/detect-libc.js"
    … …  
    2009120098                },
    2009220099                "node_modules/immutable": {
    20093                         "version": "4.3.7",
    20094                         "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
    20095                         "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
     20100                        "version": "5.0.3",
     20101                        "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
     20102                        "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
    2009620103                        "dev": true,
    2009720104                        "license": "MIT"
    … …  
    2623026237                        "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
    2623126238                        "dev": true,
    26232                         "license": "MIT"
     26239                        "license": "MIT",
     26240                        "optional": true
    2623326241                },
    2623426242                "node_modules/node-domexception": {
    … …  
    3091130919                },
    3091230920                "node_modules/sass": {
    30913                         "version": "1.79.6",
    30914                         "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.6.tgz",
    30915                         "integrity": "sha512-PVVjeeiUGx6Nj4PtEE/ecwu8ltwfPKzHxbbVmmLj4l1FYHhOyfA0scuVF8sVaa+b+VY4z7BVKjKq0cPUQdUU3g==",
    30916                         "dev": true,
    30917                         "license": "MIT",
    30918                         "dependencies": {
    30919                                 "@parcel/watcher": "^2.4.1",
     30921                        "version": "1.83.4",
     30922                        "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
     30923                        "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
     30924                        "dev": true,
     30925                        "license": "MIT",
     30926                        "dependencies": {
    3092030927                                "chokidar": "^4.0.0",
    30921                                 "immutable": "^4.0.0",
     30928                                "immutable": "^5.0.2",
    3092230929                                "source-map-js": ">=0.6.2 <2.0.0"
    3092330930                        },
    … …  
    3092730934                        "engines": {
    3092830935                                "node": ">=14.0.0"
     30936                        },
     30937                        "optionalDependencies": {
     30938                                "@parcel/watcher": "^2.4.1"
    3092930939                        }
    3093030940                },

  • trunk/package.json

    r59509 r59656  
    6767                "qunit": "~2.23.1",
    6868                "react-refresh": "0.14.0",
    69                 "sass": "1.79.6",
     69                "sass": "1.83.4",
    7070                "sinon": "16.1.3",
    7171                "sinon-test": "~3.1.6",

  • 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}

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

    r59185 r59656  
     1@use 'sass:color';
     2
    13/*
    24 * Button mixin- creates a button effect with correct

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

    r59185 r59656  
     1@use "sass:color";
     2
    13// assign default value to all undefined variables
    24
    … …  
    3840$menu-current-background: $menu-highlight-background !default;
    3941
    40 $menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
     42$menu-submenu-text: color.mix( $base-color, $text-color, 30% ) !default;
    4143$menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
    4244$menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
    … …  
    6062$adminbar-recovery-exit-text: $menu-bubble-text !default;
    6163$adminbar-recovery-exit-background: $menu-bubble-background !default;
    62 $adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default;
     64$adminbar-recovery-exit-background-alt: color.mix(black, $adminbar-recovery-exit-background, 10%) !default;
    6365
    64 $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
     66$menu-customizer-text: color.mix( $base-color, $text-color, 40% ) !default;
    6567
    6668// Dashboard Colors

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

    r59185 r59656  
    1 @use "sass:color";
     1$highlight-color: #096484;
    22
    3 $scheme-name: "blue";
    4 $base-color: #52accc;
    5 $icon-color: #e5f8ff;
    6 $highlight-color: #096484;
    7 $notification-color: #e1a948;
    8 $button-color: #e1a948;
     3@use "../_admin.scss" with (
     4        $scheme-name: "blue",
     5        $base-color: #52accc,
     6        $icon-color: #e5f8ff,
     7        $highlight-color: $highlight-color,
     8        $notification-color: #e1a948,
     9        $button-color: #e1a948,
    910
    10 $menu-submenu-text: #e2ecf1;
    11 $menu-submenu-focus-text: #fff;
    12 $menu-submenu-background: #4796b3;
     11        $menu-submenu-text: #e2ecf1,
     12        $menu-submenu-focus-text: #fff,
     13        $menu-submenu-background: #4796b3,
    1314
    14 $dashboard-icon-background: $highlight-color;
    15 
    16 @import "../_admin.scss";
     15        $dashboard-icon-background: $highlight-color
     16);

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

    r59185 r59656  
    1 @use "sass:color";
     1$base-color: #59524c;
    22
    3 $scheme-name: "coffee";
    4 $base-color: #59524c;
    5 $highlight-color: #c7a589;
    6 $notification-color: #9ea476;
    7 $low-contrast-theme: "true";
     3@use "../_admin.scss" with (
     4        $scheme-name: "coffee",
     5        $base-color: $base-color,
     6        $highlight-color: #c7a589,
     7        $notification-color: #9ea476,
     8        $form-checked: $base-color,
    89
    9 $form-checked: $base-color;
    10 
    11 @import "../_admin.scss";
     10        $low-contrast-theme: "true"
     11);

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

    r59185 r59656  
    1 @use "sass:color";
     1$base-color: #523f6d;
    22
    3 $scheme-name: "ectoplasm";
    4 $base-color: #523f6d;
    5 $icon-color: #ece6f6;
    6 $highlight-color: #a3b745;
    7 $notification-color: #d46f15;
     3@use "../_admin.scss" with (
     4        $scheme-name: "ectoplasm",
     5        $base-color: $base-color,
     6        $icon-color: #ece6f6,
     7        $highlight-color: #a3b745,
     8        $notification-color: #d46f15,
    89
    9 $form-checked: $base-color;
    10 
    11 @import "../_admin.scss";
     10        $form-checked: $base-color,
     11);

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

    r59185 r59656  
    11@use "sass:color";
    22
    3 $scheme-name: "light";
    4 $base-color: #e5e5e5;
    5 $icon-color: #999;
     3$highlight-color: #04a4cc;
    64$text-color: #333;
    7 $highlight-color: #04a4cc;
    8 $notification-color: #d64e07;
     5$menu-avatar-frame: #aaa;
    96
    10 $body-background: #f5f5f5;
     7@use "../_admin.scss" with (
     8        $scheme-name: "light",
     9        $base-color: #e5e5e5,
     10        $icon-color: #999,
     11        $text-color: $text-color,
     12        $highlight-color: $highlight-color,
     13        $notification-color: #d64e07,
    1114
    12 $menu-highlight-text: #fff;
    13 $menu-highlight-icon: #ccc;
    14 $menu-highlight-background: #888;
     15        $body-background: #f5f5f5,
    1516
    16 $menu-bubble-text: #fff;
    17 $menu-avatar-frame: #aaa;
    18 $menu-submenu-background: #fff;
     17        $menu-highlight-text: #fff,
     18        $menu-highlight-icon: #ccc,
     19        $menu-highlight-background: #888,
    1920
    20 $menu-collapse-text: #777;
    21 $menu-collapse-focus-icon: #555;
     21        $menu-bubble-text: #fff,
     22        $menu-submenu-background: #fff,
    2223
    23 $dashboard-accent-1: $highlight-color;
    24 $dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
    25 $dashboard-icon-background: $text-color;
     24        $menu-collapse-text: #777,
     25        $menu-collapse-focus-icon: #555,
    2626
    27 @import "../_admin.scss";
     27        $dashboard-accent-1: $highlight-color,
     28        $dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%),
     29        $dashboard-icon-background: $text-color
     30);
    2831
    2932/* Override the theme filter highlight color for this scheme */
    3033.theme-section.current,
    3134.theme-filter.current {
    32         border-bottom-color: $highlight-color;
     35        border-bottom-color: admin.$highlight-color;
    3336}

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

    r59185 r59656  
    11@use "sass:color";
    22
    3 $scheme-name: "midnight";
    43$base-color: #363b3f;
    54$highlight-color: #e14d43;
    65$notification-color: #69a8bb;
    76
    8 $dashboard-accent-2: mix($base-color, $notification-color, 90%);
     7@use "../_admin.scss" with (
     8        $scheme-name: "midnight",
     9        $base-color: $base-color,
     10        $highlight-color: $highlight-color,
     11        $notification-color: $notification-color,
    912
    10 @import "../_admin.scss";
     13        $dashboard-accent-2: color.mix($base-color, $notification-color, 90%),
     14);

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

    r59419 r59656  
    11@use "sass:color";
    22
    3 $scheme-name: "modern";
    4 $base-color: #1e1e1e;
    53$highlight-color: #3858e9;
    6 $menu-submenu-focus-text: #7b90ff;
    7 $notification-color: $highlight-color;
    84
    9 $link: $highlight-color;
    10 $link-focus: color.adjust($highlight-color, $lightness: -10%);
     5@use "../_admin.scss" with (
     6        $scheme-name: "modern",
     7        $base-color: #1e1e1e,
     8        $highlight-color: #3858e9,
     9        $menu-submenu-focus-text: #7b90ff,
     10        $notification-color: $highlight-color,
    1111
    12 $custom-welcome-panel: "false";
     12        $link: $highlight-color,
     13        $link-focus: color.adjust($highlight-color, $lightness: -10%),
    1314
    14 @import "../_admin.scss";
     15        $custom-welcome-panel: "false"
     16);

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

    r59185 r59656  
    1 @use "sass:color";
     1$base-color: #738e96;
    22
    3 $scheme-name: "ocean";
    4 $base-color: #738e96;
    5 $icon-color: #f2fcff;
    6 $highlight-color: #9ebaa0;
    7 $notification-color: #aa9d88;
    8 $low-contrast-theme: "true";
     3@use "../_admin.scss" with (
     4        $scheme-name: "ocean",
     5        $base-color: $base-color,
     6        $icon-color: #f2fcff,
     7        $highlight-color: #9ebaa0,
     8        $notification-color: #aa9d88,
     9        $form-checked: $base-color,
    910
    10 $form-checked: $base-color;
    11 
    12 @import "../_admin.scss";
     11        $low-contrast-theme: "true"
     12);

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

    r59185 r59656  
    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);
Note: See TracChangeset for help on using the changeset viewer.