Changeset 59656 for trunk/src/wp-admin/css/colors/light/colors.scss

Timestamp:

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

File:

• trunk/src/wp-admin/css/colors/light/colors.scss (modified) (1 diff)

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

@@ -1 +1 @@
 @use "sass:color";
 
-$scheme-name: "light";
-$base-color: #e5e5e5;
-$icon-color: #999;
+$highlight-color: #04a4cc;
 $text-color: #333;
-$highlight-color: #04a4cc;
-$notification-color: #d64e07;
+$menu-avatar-frame: #aaa;
 
-$body-background: #f5f5f5;
+@use "../_admin.scss" with (
+    $scheme-name: "light",
+    $base-color: #e5e5e5,
+    $icon-color: #999,
+    $text-color: $text-color,
+    $highlight-color: $highlight-color,
+    $notification-color: #d64e07,
 
-$menu-highlight-text: #fff;
-$menu-highlight-icon: #ccc;
-$menu-highlight-background: #888;
+    $body-background: #f5f5f5,
 
-$menu-bubble-text: #fff;
-$menu-avatar-frame: #aaa;
-$menu-submenu-background: #fff;
+    $menu-highlight-text: #fff,
+    $menu-highlight-icon: #ccc,
+    $menu-highlight-background: #888,
 
-$menu-collapse-text: #777;
-$menu-collapse-focus-icon: #555;
+    $menu-bubble-text: #fff,
+    $menu-submenu-background: #fff,
 
-$dashboard-accent-1: $highlight-color;
-$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
-$dashboard-icon-background: $text-color;
+    $menu-collapse-text: #777,
+    $menu-collapse-focus-icon: #555,
 
-@import "../_admin.scss";
+    $dashboard-accent-1: $highlight-color,
+    $dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%),
+    $dashboard-icon-background: $text-color
+);
 
 /* Override the theme filter highlight color for this scheme */
 .theme-section.current,
 .theme-filter.current {
-    border-bottom-color: $highlight-color;
+    border-bottom-color: admin.$highlight-color;
 }