Changeset 59185

Timestamp:

10/06/2024 11:35:49 PM (7 months 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:

• _admin.scss (modified) (11 diffs)
• _mixins.scss (modified) (3 diffs)
• _variables.scss (modified) (4 diffs)
• blue/colors.scss (modified) (1 diff)
• coffee/colors.scss (modified) (1 diff)
• ectoplasm/colors.scss (modified) (1 diff)
• light/colors.scss (modified) (2 diffs)
• midnight/colors.scss (modified) (1 diff)
• modern/colors.scss (modified) (2 diffs)
• ocean/colors.scss (modified) (1 diff)
• sunrise/colors.scss (modified) (1 diff)

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

@@ -116 +116 @@
     .button.focus,
     .button:focus {
-        border-color: darken( #7e8993, 5% );
-        color: darken( #32373c, 5% );
+        border-color: color.adjust(#7e8993, $lightness: -5%);
+        color: color.adjust(#32373c, $lightness: -5%);
     }
 
@@ -123 +123 @@
     .button:focus {
         border-color: #7e8993;
-        color: darken( #32373c, 5% );
+        color: color.adjust(#32373c, $lightness: -5%);
         box-shadow: 0 0 0 1px #32373c;
     }
@@ -129 +129 @@
     .button:active {
         border-color: #7e8993;
-        color: darken( #32373c, 5% );
+        color: color.adjust(#32373c, $lightness: -5%);
         box-shadow: none;
     }
@@ -137 +137 @@
     .button.active:hover {
         border-color: $button-color;
-        color: darken( #32373c, 5% );
+        color: color.adjust(#32373c, $lightness: -5%);
         box-shadow: inset 0 2px 5px -3px $button-color;
     }
@@ -155 +155 @@
         .button:hover,
         .button-secondary:hover{
-            border-color: darken($highlight-color, 10);
-            color: darken($highlight-color, 10);
+            border-color: color.adjust($highlight-color, $lightness: -10%);
+            color: color.adjust($highlight-color, $lightness: -10%);
         }
 
@@ -162 +162 @@
         .button:focus,
         .button-secondary:focus {
-            border-color: lighten($highlight-color, 10);
-            color: darken($highlight-color, 20);;
-            box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+            border-color: color.adjust($highlight-color, $lightness: 10%);
+            color: color.adjust($highlight-color, $lightness: -20%);
+            box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
         }
 
@@ -226 +226 @@
 
     .wrap .page-title-action:hover {
-        color: darken($highlight-color, 10);
-        border-color: darken($highlight-color, 10);
+        color: color.adjust($highlight-color, $lightness: -10%);
+        border-color: color.adjust($highlight-color, $lightness: -10%);
     }
 
     .wrap .page-title-action:focus {
-        border-color: lighten($highlight-color, 10);
-        color: darken($highlight-color, 20);;
-        box-shadow: 0 0 0 1px lighten($highlight-color, 10);
+        border-color: color.adjust($highlight-color, $lightness: 10%);
+        color: color.adjust($highlight-color, $lightness: -20%);
+        box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
     }
 }
@@ -540 +540 @@
 .wp-pointer .wp-pointer-content h3 {
     background-color: $highlight-color;
-    border-color: darken( $highlight-color, 5% );
+    border-color: color.adjust($highlight-color, $lightness: -5%);
 }
 
@@ -633 +633 @@
 .nav-menus-php .item-edit:focus:before {
     box-shadow:
-        0 0 0 1px lighten($button-color, 10),
+        0 0 0 1px color.adjust($button-color, $lightness: 10%),
         0 0 2px 1px $button-color;
 }
@@ -712 +712 @@
     #publish-settings:focus {
         box-shadow:
-            0 0 0 1px lighten($button-color, 10),
+            0 0 0 1px color.adjust($button-color, $lightness: 10%),
             0 0 2px 1px $button-color;
     }
@@ -773 +773 @@
     .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
         box-shadow:
-            0 0 0 1px lighten($button-color, 10),
+            0 0 0 1px color.adjust($button-color, $lightness: 10%),
             0 0 2px 1px $button-color;
     }

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

@@ -10 +10 @@
     &:hover,
     &:focus {
-        background: lighten( $button-color, 3% );
-        border-color: darken( $button-color, 3% );
+        background: color.adjust($button-color, $lightness: 3%);
+        border-color: color.adjust($button-color, $lightness: -3%);
         color: $button-text-color;
     }
@@ -22 +22 @@
 
     &:active {
-        background: darken( $button-color, 5% );
-        border-color: darken( $button-color, 5% );
+        background: color.adjust($button-color, $lightness: -5%);
+        border-color: color.adjust($button-color, $lightness: -5%);
         color: $button-text-color;
     }
@@ -32 +32 @@
         background: $button-color;
         color: $button-text-color;
-        border-color: darken( $button-color, 15% );
-        box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
+        border-color: color.adjust($button-color, $lightness: -15%);
+        box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
     }
 }

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

@@ -7 +7 @@
 $text-color: #fff !default;
 $base-color: #23282d !default;
-$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
+$icon-color: hsl(color.channel($base-color, "hue", $space: hsl), 7%, 95%) !default;
 $highlight-color: #0073aa !default;
 $notification-color: #d54e21 !default;
@@ -17 +17 @@
 
 $link: #0073aa !default;
-$link-focus: lighten( $link, 10% ) !default;
+$link-focus: color.adjust($link, $lightness: 10%) !default;
 
 $button-color: $highlight-color !default;
@@ -39 +39 @@
 
 $menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
-$menu-submenu-background: darken( $base-color, 7% ) !default;
-$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
+$menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
+$menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
 
 $menu-submenu-focus-text: $highlight-color !default;
@@ -55 +55 @@
 $menu-collapse-focus-icon: $menu-highlight-icon !default;
 
-$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
-$adminbar-input-background: lighten( $menu-background, 7% ) !default;
+$adminbar-avatar-frame: color.adjust($menu-background, $lightness: 7%) !default;
+$adminbar-input-background: color.adjust($menu-background, $lightness: 7%) !default;
 
 $adminbar-recovery-exit-text: $menu-bubble-text !default;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "blue";
 $base-color: #52accc;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "coffee";
 $base-color: #59524c;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "ectoplasm";
 $base-color: #523f6d;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "light";
 $base-color: #e5e5e5;
@@ -20 +22 @@
 
 $dashboard-accent-1: $highlight-color;
-$dashboard-accent-2: desaturate( lighten( $highlight-color, 7% ), 15% );
+$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
 $dashboard-icon-background: $text-color;
 

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "midnight";
 $base-color: #363b3f;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "modern";
 $base-color: #1e1e1e;
@@ -6 +8 @@
 
 $link: $highlight-color;
-$link-focus: darken($highlight-color, 10%);
+$link-focus: color.adjust($highlight-color, $lightness: -10%);
 
 $custom-welcome-panel: "false";

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "ocean";
 $base-color: #738e96;

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

@@ +1 @@
+@use "sass:color";
+
 $scheme-name: "sunrise";
 $base-color: #cf4944;
 $highlight-color: #dd823b;
 $notification-color: #ccaf0b;
-$menu-submenu-focus-text: lighten( $highlight-color, 35% );
+$menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%);
 
 @import "../_admin.scss";