WordPress.org
Get WordPress

Make WordPress Core

Changeset 59656


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