WordPress.org
Get WordPress

Make WordPress Core

Changeset 59185


Ignore:
Timestamp:
10/06/2024 11:35:49 PM (2 years ago)
Author:
peterwilsoncc
Message:

Tests/Build Tools: Update SCSS files to use new color functions.

Replaces deprecated color functions with their updated equivalents, see ​the deprecation documentation.

This results in four changes in the built files, hsl colors with a negative lightness value are replaced with the keyword black. These changes are harmless as they have no effect on the rendered colors.

Props aslamdoctor, veryard.
Fixes #62142.

Location:
trunk/src/wp-admin/css/colors
Files:
11 edited

Legend:

Unmodified
Added
Removed

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

    r56291 r59185  
    116116        .button.focus,
    117117        .button:focus {
    118                 border-color: darken( #7e8993, 5% );
    119                 color: darken( #32373c, 5% );
     118                border-color: color.adjust(#7e8993, $lightness: -5%);
     119                color: color.adjust(#32373c, $lightness: -5%);
    120120        }
    121121
    … …  
    123123        .button:focus {
    124124                border-color: #7e8993;
    125                 color: darken( #32373c, 5% );
     125                color: color.adjust(#32373c, $lightness: -5%);
    126126                box-shadow: 0 0 0 1px #32373c;
    127127        }
    … …  
    129129        .button:active {
    130130                border-color: #7e8993;
    131                 color: darken( #32373c, 5% );
     131                color: color.adjust(#32373c, $lightness: -5%);
    132132                box-shadow: none;
    133133        }
    … …  
    137137        .button.active:hover {
    138138                border-color: $button-color;
    139                 color: darken( #32373c, 5% );
     139                color: color.adjust(#32373c, $lightness: -5%);
    140140                box-shadow: inset 0 2px 5px -3px $button-color;
    141141        }
    … …  
    155155                .button:hover,
    156156                .button-secondary:hover{
    157                         border-color: darken($highlight-color, 10);
    158                         color: darken($highlight-color, 10);
     157                        border-color: color.adjust($highlight-color, $lightness: -10%);
     158                        color: color.adjust($highlight-color, $lightness: -10%);
    159159                }
    160160
    … …  
    162162                .button:focus,
    163163                .button-secondary:focus {
    164                         border-color: lighten($highlight-color, 10);
    165                         color: darken($highlight-color, 20);;
    166                         box-shadow: 0 0 0 1px lighten($highlight-color, 10);
     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%);
    167167                }
    168168
    … …  
    226226
    227227        .wrap .page-title-action:hover {
    228                 color: darken($highlight-color, 10);
    229                 border-color: darken($highlight-color, 10);
     228                color: color.adjust($highlight-color, $lightness: -10%);
     229                border-color: color.adjust($highlight-color, $lightness: -10%);
    230230        }
    231231
    232232        .wrap .page-title-action:focus {
    233                 border-color: lighten($highlight-color, 10);
    234                 color: darken($highlight-color, 20);;
    235                 box-shadow: 0 0 0 1px lighten($highlight-color, 10);
     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%);
    236236        }
    237237}
    … …  
    540540.wp-pointer .wp-pointer-content h3 {
    541541        background-color: $highlight-color;
    542         border-color: darken( $highlight-color, 5% );
     542        border-color: color.adjust($highlight-color, $lightness: -5%);
    543543}
    544544
    … …  
    633633.nav-menus-php .item-edit:focus:before {
    634634        box-shadow:
    635                 0 0 0 1px lighten($button-color, 10),
     635                0 0 0 1px color.adjust($button-color, $lightness: 10%),
    636636                0 0 2px 1px $button-color;
    637637}
    … …  
    712712        #publish-settings:focus {
    713713                box-shadow:
    714                         0 0 0 1px lighten($button-color, 10),
     714                        0 0 0 1px color.adjust($button-color, $lightness: 10%),
    715715                        0 0 2px 1px $button-color;
    716716        }
    … …  
    773773        .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
    774774                box-shadow:
    775                         0 0 0 1px lighten($button-color, 10),
     775                        0 0 0 1px color.adjust($button-color, $lightness: 10%),
    776776                        0 0 2px 1px $button-color;
    777777        }

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

    r48360 r59185  
    1010        &:hover,
    1111        &:focus {
    12                 background: lighten( $button-color, 3% );
    13                 border-color: darken( $button-color, 3% );
     12                background: color.adjust($button-color, $lightness: 3%);
     13                border-color: color.adjust($button-color, $lightness: -3%);
    1414                color: $button-text-color;
    1515        }
    … …  
    2222
    2323        &:active {
    24                 background: darken( $button-color, 5% );
    25                 border-color: darken( $button-color, 5% );
     24                background: color.adjust($button-color, $lightness: -5%);
     25                border-color: color.adjust($button-color, $lightness: -5%);
    2626                color: $button-text-color;
    2727        }
    … …  
    3232                background: $button-color;
    3333                color: $button-text-color;
    34                 border-color: darken( $button-color, 15% );
    35                 box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
     34                border-color: color.adjust($button-color, $lightness: -15%);
     35                box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
    3636        }
    3737}

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

    r55574 r59185  
    77$text-color: #fff !default;
    88$base-color: #23282d !default;
    9 $icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
     9$icon-color: hsl(color.channel($base-color, "hue", $space: hsl), 7%, 95%) !default;
    1010$highlight-color: #0073aa !default;
    1111$notification-color: #d54e21 !default;
    … …  
    1717
    1818$link: #0073aa !default;
    19 $link-focus: lighten( $link, 10% ) !default;
     19$link-focus: color.adjust($link, $lightness: 10%) !default;
    2020
    2121$button-color: $highlight-color !default;
    … …  
    3939
    4040$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
    41 $menu-submenu-background: darken( $base-color, 7% ) !default;
    42 $menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
     41$menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
     42$menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
    4343
    4444$menu-submenu-focus-text: $highlight-color !default;
    … …  
    5555$menu-collapse-focus-icon: $menu-highlight-icon !default;
    5656
    57 $adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
    58 $adminbar-input-background: lighten( $menu-background, 7% ) !default;
     57$adminbar-avatar-frame: color.adjust($menu-background, $lightness: 7%) !default;
     58$adminbar-input-background: color.adjust($menu-background, $lightness: 7%) !default;
    5959
    6060$adminbar-recovery-exit-text: $menu-bubble-text !default;

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

    r53383 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "blue";
    24$base-color: #52accc;

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

    r52562 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "coffee";
    24$base-color: #59524c;

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

    r55574 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "ectoplasm";
    24$base-color: #523f6d;

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

    r55574 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "light";
    24$base-color: #e5e5e5;
    … …  
    2022
    2123$dashboard-accent-1: $highlight-color;
    22 $dashboard-accent-2: desaturate( lighten( $highlight-color, 7% ), 15% );
     24$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
    2325$dashboard-icon-background: $text-color;
    2426

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

    r55574 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "midnight";
    24$base-color: #363b3f;

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

    r55451 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "modern";
    24$base-color: #1e1e1e;
    … …  
    68
    79$link: $highlight-color;
    8 $link-focus: darken($highlight-color, 10%);
     10$link-focus: color.adjust($highlight-color, $lightness: -10%);
    911
    1012$custom-welcome-panel: "false";

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

    r52562 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "ocean";
    24$base-color: #738e96;

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

    r52562 r59185  
     1@use "sass:color";
     2
    13$scheme-name: "sunrise";
    24$base-color: #cf4944;
    35$highlight-color: #dd823b;
    46$notification-color: #ccaf0b;
    5 $menu-submenu-focus-text: lighten( $highlight-color, 35% );
     7$menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%);
    68
    79@import "../_admin.scss";
Note: See TracChangeset for help on using the changeset viewer.