Changeset 59185 for trunk/src/wp-admin/css/colors/_admin.scss

Timestamp:

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

File:

• trunk/src/wp-admin/css/colors/_admin.scss (modified) (11 diffs)

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