Merge pull request #10080 from janfaracik/use-modern-color-function-n…

…otation

Use modern color function notation

.stylelintrc.js

@@ -28,7 +28,6 @@ module.exports = {
         ],
       },
     ],
-    "color-function-notation": "legacy",
     "alpha-value-notation": "number",
     "number-max-precision": 5,
     "function-no-unknown": null,

src/main/scss/abstracts/_theme.scss

@@ -47,12 +47,12 @@ $semantics: (
 
   // Color palette
   --very-light-grey: #f8f8f8;
-  --light-grey: hsl(240, 20%, 96.5%);
+  --light-grey: hsl(240 20% 96.5%);
   --medium-grey: #9ba7af;
   --dark-grey: #4d545d;
 
   // branding
-  --secondary: rgb(96, 125, 159);
+  --secondary: rgb(96 125 159);
   --focus-input-border: var(--accent-color);
   --focus-input-glow: color-mix(in sRGB, var(--accent-color) 15%, transparent);
 
@@ -82,14 +82,14 @@ $semantics: (
   --search-input-color: var(--brand-link-color);
   --search-bg: var(--white);
   --search-box-completion-bg: var(--primary-hover);
-  --search-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
+  --search-box-shadow: 0 1px 7px 0 rgb(0 0 0 / 0.3);
   --header-bg-classic: #000;
   --header-link-bg-classic-hover: #404040;
   --header-link-bg-classic-active: #404040;
   --header-item-border-radius: 4px;
 
   // Breadcrumbs bar
-  --breadcrumbs-bar-background: hsla(240, 20%, 96.5%, 0.8);
+  --breadcrumbs-bar-background: hsl(240 20% 96.5% / 0.8);
 
   // Alert call outs
   --alert-success-text-color: var(--success-color);
@@ -202,35 +202,34 @@ $semantics: (
   // Command Palette
   --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
     saturate(1.4) blur(20px);
-  --command-palette-inset-shadow: inset 0 0 2px 2px rgba(255, 255, 255, 0.1);
+  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
 
   ::backdrop {
     --command-palette-backdrop-background: radial-gradient(
       farthest-corner at 50% 30vh,
-      rgba(0, 0, 0, 0.3),
-      rgba(0, 0, 0, 0.1)
+      rgb(0 0 0 / 0.3),
+      rgb(0 0 0 / 0.1)
     );
   }
 
   // Tooltips
   --tooltip-backdrop-filter: saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
-  --tooltip-box-shadow: 0 0 8px 2px rgba(0, 0, 30, 0.05),
-    0 0 1px 1px rgba(0, 0, 20, 0.025), 0 10px 20px rgba(0, 0, 20, 0.15);
+  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
+    0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
 
   // Dropdowns
   --dropdown-backdrop-filter: saturate(1.5) blur(20px);
-  --dropdown-box-shadow: 0 10px 30px rgba(0, 0, 20, 0.2),
-    0 2px 10px rgba(0, 0, 20, 0.05), inset 0 -1px 2px rgba(255, 255, 255, 0.025);
+  --dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
+    0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
 
   // Dialogs
   ::backdrop {
-    --dialog-backdrop-background: hsla(240, 10%, 20%, 0.8);
+    --dialog-backdrop-background: hsl(240 10% 20% / 0.8);
   }
 
-  --dialog-box-shadow: 0 10px 40px rgba(0, 0, 20, 0.15),
-    0 2px 15px rgba(0, 0, 20, 0.05),
-    inset 0 0 2px 2px rgba(255, 255, 255, 0.025);
+  --dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
+    0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
 
   // Dark link
   --link-dark-color: var(--text-color);
@@ -257,18 +256,18 @@ $semantics: (
   --card-background: var(--background);
   --card-background--hover: transparent;
   --card-background--active: transparent;
-  --card-border-color: hsla(240, 25%, 75%, 0.25);
-  --card-border-color--hover: hsla(240, 25%, 75%, 0.5);
-  --card-border-color--active: hsla(240, 25%, 75%, 0.75);
+  --card-border-color: hsl(240 25% 75% / 0.25);
+  --card-border-color--hover: hsl(240 25% 75% / 0.5);
+  --card-border-color--active: hsl(240 25% 75% / 0.75);
   --card-border-width: 2px;
 
   // Tab bar
   --tabs-background: var(--panel-header-bg-color);
   --tabs-item-background: transparent;
   --tabs-item-foreground: var(--text-color);
-  --tabs-item-background--hover: rgba(0, 0, 0, 0.05);
+  --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
-  --tabs-item-background--active: rgba(0, 0, 0, 0.1);
+  --tabs-item-background--active: rgb(0 0 0 / 0.1);
   --tabs-item-foreground--active: var(--text-color);
   --tabs-item-background--selected: white;
   --tabs-item-foreground--selected: var(--link-color);
@@ -322,9 +321,9 @@ $semantics: (
   --form-input-border-radius: 0.625rem;
   --form-input-glow: 0 0 0 10px transparent;
   --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
-  --pre-background: rgba(0, 0, 0, 0.05);
+  --pre-background: rgb(0 0 0 / 0.05);
   --pre-color: var(--text-color);
-  --selection-color: rgba(2, 76, 182, 0.3);
+  --selection-color: rgb(2 76 182 / 0.3);
 
   // Animations
   --standard-transition: 0.3s ease;
@@ -334,13 +333,13 @@ $semantics: (
   --menu-text-color: black;
   --menu-bg-color: var(--white);
   --menu-selected-color: #b3d4ff;
-  --menu-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  --menu-box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
 
   // Deprecated - Add form widget / configure job
   --light-bg-color: #eee;
-  --light-bg-color--hover: rgba(255, 255, 255, 0.65);
+  --light-bg-color--hover: rgb(255 255 255 / 0.65);
   --add-item-btn-decorator-border-color: #acb;
-  --add-item-btn-decorator-bg-color: rgba(245, 249, 239, 0.75);
+  --add-item-btn-decorator-bg-color: rgb(245 249 239 / 0.75);
 
   // Plugin manager
   --plugin-manager-bg-color-already-upgraded: var(--light-grey);
@@ -349,15 +348,15 @@ $semantics: (
   --auto-complete-bg-color--prehighlight: #b3d4ff;
 
   // Default button
-  --button-background: hsla(240, 25%, 75%, 0.1);
-  --button-background--hover: hsla(240, 25%, 75%, 0.175);
-  --button-background--active: hsla(240, 25%, 75%, 0.25);
-  --button-box-shadow--focus: hsla(240, 25%, 75%, 0.1);
+  --button-background: hsl(240 25% 75% / 0.1);
+  --button-background--hover: hsl(240 25% 75% / 0.175);
+  --button-background--active: hsl(240 25% 75% / 0.25);
+  --button-box-shadow--focus: hsl(240 25% 75% / 0.1);
 
   // Variables for sidebar items, card items
-  --item-background--hover: hsla(240, 25%, 75%, 0.15);
-  --item-background--active: hsla(240, 25%, 75%, 0.225);
-  --item-box-shadow--focus: hsla(240, 25%, 75%, 0.105);
+  --item-background--hover: hsl(240 25% 75% / 0.15);
+  --item-background--active: hsl(240 25% 75% / 0.225);
+  --item-box-shadow--focus: hsl(240 25% 75% / 0.105);
 
   // Deprecated
   --primary: var(--accent-color); // Use var(--accent-color) instead

src/main/scss/base/_style.scss

@@ -209,7 +209,7 @@ pre.console {
   width: 100%;
   border-radius: 3px;
   border: 1px solid var(--input-border);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.075);
   padding: 6px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;

src/main/scss/components/_badges.scss

@@ -18,7 +18,7 @@
     background: color-mix(in sRGB, var(--color) 85%, transparent);
     color: var(--white) !important;
     box-shadow: inset 0 -1px 2px var(--color, var(--text-color-secondary));
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px 1px rgb(0 0 0 / 0.1);
     backdrop-filter: blur(2.5px);
   }
 }

src/main/scss/form/_toggle-switch.scss

@@ -113,7 +113,7 @@
     transition: var(--standard-transition);
     margin-right: 1rem;
     box-shadow:
-      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+      inset 0 0 0 1px rgb(0 0 0 / 0.05),
       0 0 0 10px transparent;
   }
 
@@ -132,7 +132,7 @@
     mask-position: center;
     border-radius: 100px;
     transition: var(--standard-transition);
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 0 rgb(0 0 0 / 0.1);
   }
 
   &:hover::before {
@@ -143,7 +143,7 @@
   &:focus {
     &::before {
       box-shadow:
-        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+        inset 0 0 0 1px rgb(0 0 0 / 0.05),
         0 0 0 5px var(--focus-input-glow);
     }
 

src/main/scss/pages/_about.scss

@@ -18,7 +18,7 @@
     z-index: 1;
     background: repeating-conic-gradient(
       var(--background) 0deg,
-      rgba(100, 100, 100, 0.25) 20deg
+      rgb(100 100 100 / 0.25) 20deg
     );
     animation: app-about-starburst 100s linear infinite;
     opacity: 0.25;
@@ -48,31 +48,31 @@
     background-color: var(--color);
     background-image: radial-gradient(
         at 40% 20%,
-        hsla(28, 100%, 74%, 1) 0,
+        hsl(28 100% 74% / 1) 0,
         transparent 50%
       ),
-      radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsl(359, 70%, 46%) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
+      radial-gradient(at 80% 0%, hsl(189 100% 56% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 50%, hsl(355 85% 93% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 50%, hsl(359 70% 46%) 0, transparent 50%),
+      radial-gradient(at 0% 100%, hsl(22 100% 77% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 100%, hsl(242 100% 70% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 0%, hsl(343 100% 76% / 1) 0, transparent 50%);
     opacity: 0.4;
     animation: app-about-aurora-one 7s linear infinite;
   }
 
   &::after {
     background-image: radial-gradient(
         at 40% 20%,
-        hsla(212, 100%, 74%, 1) 0,
+        hsl(212 100% 74% / 1) 0,
         transparent 50%
       ),
-      radial-gradient(at 80% 0%, hsla(13, 100%, 56%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsla(179, 85%, 93%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsla(164, 100%, 76%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsla(206, 100%, 77%, 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsla(66, 100%, 70%, 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsla(167, 100%, 76%, 1) 0, transparent 50%);
+      radial-gradient(at 80% 0%, hsl(13 100% 56% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 50%, hsl(179 85% 93% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 50%, hsl(164 100% 76% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 100%, hsl(206 100% 77% / 1) 0, transparent 50%),
+      radial-gradient(at 80% 100%, hsl(66 100% 70% / 1) 0, transparent 50%),
+      radial-gradient(at 0% 0%, hsl(167 100% 76% / 1) 0, transparent 50%);
     opacity: 0.2;
     animation: app-about-aurora-two 14s linear infinite;
   }