Fix SCSS deprecation warnings in theme files (#7968)

Fixed the SCSS deprecation warnings in three themes - default, one-dark,
and pink.

- Replaced deprecated lighten() and darken() functions with
color.adjust()
- Add @use 'sass:color' imports to all theme files
- Add standard background-clip property alongside
-webkit-background-clip for CSS compatibility
- Fixes the warnings for the files mentioned in #7112: 45 SCSS
deprecation warnings

I tried the automatic migrator mentioned in #7112 and here's how it
went:

What worked perfectly:
Color function migration: npx sass-migrator color successfully converted
all deprecated color functions:

lighten($color, 10%) → color.adjust($color, $lightness: 10%)
darken($color, 15%) → color.adjust($color, $lightness: -15%)

Individual theme file migration: npx sass-migrator module worked well
for standalone theme files like:
static/styles/themes/default-theme.scss
static/styles/themes/pink-theme.scss
static/styles/themes/one-dark-theme.scss

Automatic @use imports: The migrator correctly added @use 'sass:color';
imports at the top of files

However, the migrator couldn't handle:
Complex nested import structures: The conditional theme loading system
in static/styles/explorer.scss was too complex for automatic migration.

and Conditional @import statements in explorer.scss: The migrator failed
on lines like: &[data-theme='pink'] {
    @import 'themes/pink-theme';
}

Therefore the migrator can be used in conjunction with manual editing of
files.

static/styles/themes/default-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import '~golden-layout/src/css/goldenlayout-light-theme';
 
 /*
@@ -117,6 +118,7 @@ a.navbar-brand img.logo.normal {
 
 .rainbow-decoration {
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: linear-gradient(
         60deg,
@@ -259,7 +261,7 @@ a.navbar-brand img.logo.normal {
     color: #ffffff !important;
     text-decoration: none !important;
 
-    
+
 }
 
 #socialshare .share-bluesky,
@@ -399,7 +401,7 @@ div.argmenuitem span.argdescription {
 
 .currentCursorPosition {
     color: #15a3b9;
-    background-color: darken(rgba(248, 249, 250, 0.85), 3%);
+    background-color: color.adjust(rgba(248, 249, 250, 0.85), $lightness: -3%);
     border: 1px solid #d2d3d4;
 }
 
@@ -418,7 +420,7 @@ div.argmenuitem span.argdescription {
             }
             &:hover,
             &.active {
-                background: lighten(#f5f5f5, 5%);
+                background: color.adjust(#f5f5f5, $lightness: 5%);
             }
             &.changed {
                 color: #148624;
@@ -449,7 +451,7 @@ div.argmenuitem span.argdescription {
     .compilers-col .group-wrapper .group {
         .label {
             // taking the color tom-select uses, but I find that a little low-contrast
-            background: darken(#f6f6f6, 3%);
+            background: color.adjust(#f6f6f6, $lightness: -3%);
         }
         .compiler {
             &:hover {

static/styles/themes/one-dark-theme.scss

@@ -1,4 +1,5 @@
 // based on pink-theme.scss
+@use 'sass:color';
 @import 'custom-golden-layout-themes/one-dark';
 
 $logo-primary: #67c52a;
@@ -16,7 +17,7 @@ $darker: #1e1f22;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: lighten($lighter, 10%);
+    background: color.adjust($lighter, $lightness: 10%);
 }
 
 a {
@@ -153,7 +154,7 @@ textarea.form-control {
 
     &:disabled,
     &:disabled:hover {
-        background-color: lighten($light, 5%) !important;
+        background-color: color.adjust($light, $lightness: 5%) !important;
         color: #7c8895 !important;
     }
 }
@@ -179,7 +180,7 @@ textarea.form-control {
 
         &:disabled,
         &:disabled:hover {
-            background-color: lighten($light, 5%) !important;
+            background-color: color.adjust($light, $lightness: 5%) !important;
             color: #7c8895 !important;
         }
     }
@@ -359,7 +360,7 @@ textarea.form-control {
 }
 
 .linked-code-decoration-line {
-    background: lighten($lighter, 5%) !important;
+    background: color.adjust($lighter, $lightness: 5%) !important;
 }
 
 .linked-code-decoration-margin {
@@ -578,8 +579,8 @@ textarea.form-control {
 
 .popover .arrow::after,
 .popover .arrow::before {
-    border-left-color: lighten($light, 2%) !important;
-    border-right-color: lighten($light, 2%) !important;
+    border-left-color: color.adjust($light, $lightness: 2%) !important;
+    border-right-color: color.adjust($light, $lightness: 2%) !important;
 }
 
 .popover {
@@ -609,6 +610,7 @@ textarea.form-control {
 
 .rainbow-decoration {
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: linear-gradient(
         60deg,
@@ -676,7 +678,7 @@ textarea.form-control {
         color: #eee;
 
         &:hover {
-            background-color: lighten($base, 5%) !important;
+            background-color: color.adjust($base, $lightness: 5%) !important;
         }
     }
 }

static/styles/themes/pink-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'custom-golden-layout-themes/pink';
 
 $logo-primary: #67c52a;
@@ -9,11 +10,11 @@ $dark: #e3a5e3;
 $darker: #e787e7;
 
 ::-webkit-scrollbar {
-    background: lighten(#1e1e1e, 10%);
+    background: color.adjust(#1e1e1e, $lightness: 10%);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: lighten(#1e1e1e, 20%);
+    background: color.adjust(#1e1e1e, $lightness: 20%);
 }
 
 a {
@@ -136,7 +137,7 @@ textarea.form-control {
         //color: #fff !important;
 
         &:hover {
-            background-color: darken($darker, 5%) !important;
+            background-color: color.adjust($darker, $lightness: -5%) !important;
         }
     }
 
@@ -146,7 +147,7 @@ textarea.form-control {
 
     &:disabled,
     &:disabled:hover {
-        background-color: lighten($base, 5%) !important;
+        background-color: color.adjust($base, $lightness: 5%) !important;
         //color: #fff !important;
     }
 }
@@ -185,7 +186,7 @@ textarea.form-control {
 
 .currentCursorPosition {
     color: white;
-    background-color: opacify($dark, 0.8);
+    background-color: color.adjust($dark, $alpha: 0.8);
 }
 
 .form-select {
@@ -253,7 +254,7 @@ textarea.form-control {
 }
 
 .form-control:disabled {
-    background-color: darken(#474747, 10%);
+    background-color: color.adjust(#474747, $lightness: -10%);
 }
 
 .graph-container {
@@ -308,7 +309,7 @@ textarea.form-control {
 }
 
 .linked-code-decoration-line {
-    background: lighten($base, 5%) !important;
+    background: color.adjust($base, $lightness: 5%) !important;
 }
 
 .linked-code-decoration-margin {
@@ -543,7 +544,7 @@ textarea.form-control {
     border-color: $dark !important;
     background-color: $dark !important;
     &:hover {
-        background-color: darken($dark, 5%) !important;
+        background-color: color.adjust($dark, $lightness: -5%) !important;
     }
 }
 
@@ -557,6 +558,7 @@ textarea.form-control {
 
 .rainbow-decoration {
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: linear-gradient(
         60deg,