diff --git a/package.json b/package.json
index b2184216..f0918abb 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "lint": "run-s \"lint:*\" --silent",
     "lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
     "lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
-    "build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/ --silence-deprecation=global-builtin",
+    "build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/",
     "build:themes": "node scripts/build-themes",
     "build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
     "build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css",
diff --git a/scripts/build-themes.js b/scripts/build-themes.js
index 9736939b..74def78e 100644
--- a/scripts/build-themes.js
+++ b/scripts/build-themes.js
@@ -129,7 +129,6 @@ themeColors.forEach((themeColor, colorIndex) => {
       path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
       {
         outputStyle: "compressed",
-        silenceDeprecations: ["global-builtin"],
       },
     );
 
diff --git a/scss/colors/utilities/_background-colors.scss b/scss/colors/utilities/_background-colors.scss
index b8c9c2f9..2656e810 100644
--- a/scss/colors/utilities/_background-colors.scss
+++ b/scss/colors/utilities/_background-colors.scss
@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../../colors";
 @use "settings";
@@ -30,7 +31,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
   @if map.get(settings.$utilities, "background-colors") {
     // Loop through color families
     @each $family, $colors in colors.$colors {
-      @if index(map.get(settings.$palette, "color-families"), $family) {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
         $css-var-family-name: #{$css-var-color-prefix}-#{$family};
         $class-family-name: #{$background-color-property-name}-#{$family};
 
@@ -52,7 +53,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
 
           // Shades
           @else if
-            index(map.get(settings.$palette, "shades"), $shade) and
+            list.index(map.get(settings.$palette, "shades"), $shade) and
             map.get(settings.$palette, "enable-shades")
           {
             $value: $color-value;
diff --git a/scss/colors/utilities/_colors.scss b/scss/colors/utilities/_colors.scss
index ddbf795d..9f91fd66 100644
--- a/scss/colors/utilities/_colors.scss
+++ b/scss/colors/utilities/_colors.scss
@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../../colors";
 @use "settings";
@@ -11,7 +12,7 @@
 
     // Loop through color families
     @each $family, $colors in colors.$colors {
-      @if index(map.get(settings.$palette, "color-families"), $family) {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
         $css-var-family-name: #{$css-var-color-prefix}-#{$family};
         $class-family-name: #{$color-property-name}-#{$family};
 
@@ -31,7 +32,7 @@
 
           // Shades
           @else if
-            index(map.get(settings.$palette, "shades"), $shade) and
+            list.index(map.get(settings.$palette, "shades"), $shade) and
             map.get(settings.$palette, "enable-shades")
           {
             @if $enable-css-vars {
diff --git a/scss/colors/utilities/_css-vars.scss b/scss/colors/utilities/_css-vars.scss
index 2fdcb134..8007d496 100644
--- a/scss/colors/utilities/_css-vars.scss
+++ b/scss/colors/utilities/_css-vars.scss
@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass:map";
 @use "../../colors";
 @use "settings";
@@ -13,7 +14,7 @@
     :host {
       // Loop through color families
       @each $family, $colors in colors.$colors {
-        @if index(map.get(settings.$palette, "color-families"), $family) {
+        @if list.index(map.get(settings.$palette, "color-families"), $family) {
           $css-var-family-name: #{$css-var-color-prefix}-#{$family};
 
           // Loop through colors
@@ -25,7 +26,7 @@
 
             // Shades
             @else if
-              index(map.get(settings.$palette, "shades"), $shade) and
+              list.index(map.get(settings.$palette, "shades"), $shade) and
               map.get(settings.$palette, "enable-shades")
             {
               #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
diff --git a/scss/helpers/_functions.scss b/scss/helpers/_functions.scss
index a009909d..d1e9d752 100644
--- a/scss/helpers/_functions.scss
+++ b/scss/helpers/_functions.scss
@@ -1,8 +1,9 @@
 @use "sass:color";
+@use "sass:string";
 
 // Display color as RGB
 @function display-rgb($color) {
-  @return unquote(
+  @return string.unquote(
     "rgb(" + color.channel($color, "red") + ", " + color.channel($color, "green") + ", " +
       color.channel($color, "blue") + ")"
   );
diff --git a/scss/themes/default/_dark.scss b/scss/themes/default/_dark.scss
index 0b0161cd..857ff7f1 100644
--- a/scss/themes/default/_dark.scss
+++ b/scss/themes/default/_dark.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "../../colors" as *;
 @use "../../settings" as *;
@@ -7,7 +8,7 @@
 // Default: Dark theme
 @mixin theme {
   color-scheme: dark;
-  #{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
+  #{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
 
   // Text color
   #{$css-var-prefix}color: #{$zinc-200};
@@ -56,7 +57,7 @@
   #{$css-var-prefix}contrast-inverse: #{$black};
 
   // Box shadow
-  #{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
+  #{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));
 
   // Typography
   @if map.get($modules, "content/typography") {
@@ -73,8 +74,8 @@
     #{$css-var-prefix}mark-color: #{$white};
 
     // Inserted (<ins>) & Deleted (<del>)
-    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
-    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
+    #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-200)};
+    #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-200)};
 
     // Blockquote
     #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@@ -97,7 +98,7 @@
 
   // Code
   @if map.get($modules, "content/code") {
-    #{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}code-background-color: #{color.mix($slate-900, $slate-850, 75%)};
     #{$css-var-prefix}code-color: #{$zinc-400};
     #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
     #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
@@ -105,22 +106,34 @@
 
   // Form elements
   @if map.get($modules, "forms/basics") {
-    #{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
+    #{$css-var-prefix}form-element-background-color: #{color.mix($slate-900, $slate-850)};
     #{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
     #{$css-var-prefix}form-element-border-color: #{$slate-800};
     #{$css-var-prefix}form-element-color: #{$zinc-100};
     #{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
-    #{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}form-element-active-background-color: #{color.mix(
+        $slate-900,
+        $slate-850,
+        75%
+      )};
     #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
     #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
     #{$css-var-prefix}form-element-disabled-opacity: 0.5;
-    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
-    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
+        $red-500,
+        $slate-600,
+        75%
+      )};
     #{$css-var-prefix}form-element-invalid-focus-color: var(
       #{$css-var-prefix}form-element-invalid-active-border-color
     );
-    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
-    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
+    #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $slate-600)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
+        $jade-450,
+        $slate-600,
+        75%
+      )};
     #{$css-var-prefix}form-element-valid-focus-color: var(
       #{$css-var-prefix}form-element-valid-active-border-color
     );
@@ -156,7 +169,7 @@
     #{$css-var-prefix}card-background-color: #{$slate-900};
     #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
     #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
-    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
+    #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-900, $slate-850, 75%)};
   }
 
   // Dropdown (details.dropdown)
@@ -175,7 +188,7 @@
 
   // Modal (<dialog>)
   @if map.get($modules, "components/modal") {
-    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($black, $zinc-950), 0.75)};
   }
 
   // Progress
@@ -192,8 +205,8 @@
 
   // Form validation icons
   @if map.get($modules, "forms/basics") {
-    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
 
   // Focus for buttons, radio and select
diff --git a/scss/themes/default/_light.scss b/scss/themes/default/_light.scss
index 49588b42..ee862550 100644
--- a/scss/themes/default/_light.scss
+++ b/scss/themes/default/_light.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "../../colors" as *;
 @use "../../settings" as *;
@@ -17,7 +18,7 @@
 
   // Muted colors
   #{$css-var-prefix}muted-color: #{$zinc-550};
-  #{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
+  #{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
 
   // Primary colors
   #{$css-var-prefix}primary: theme-colors.get("primary", "light");
@@ -69,12 +70,12 @@
     #{$css-var-prefix}h6-color: #{$zinc-550};
 
     // Highlighted text (<mark>)
-    #{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
+    #{$css-var-prefix}mark-background-color: #{color.mix($amber-100, $amber-50)};
     #{$css-var-prefix}mark-color: #{$zinc-950};
 
     // Inserted (<ins>) & Deleted (<del>)
-    #{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
-    #{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
+    #{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
+    #{$css-var-prefix}del-color: #{color.mix($red-500, $zinc-750)};
 
     // Blockquote
     #{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
@@ -97,7 +98,7 @@
 
   // Code
   @if map.get($modules, "content/code") {
-    #{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
+    #{$css-var-prefix}code-background-color: #{color.mix($slate-50, $white, 75%)};
     #{$css-var-prefix}code-color: #{$zinc-550};
     #{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
     #{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
@@ -105,7 +106,7 @@
 
   // Form elements
   @if map.get($modules, "forms/basics") {
-    #{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}form-element-background-color: #{color.mix($slate-50, $white, 25%)};
     #{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
     #{$css-var-prefix}form-element-border-color: #{$slate-150};
     #{$css-var-prefix}form-element-color: #{$zinc-850};
@@ -114,13 +115,21 @@
     #{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
     #{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
     #{$css-var-prefix}form-element-disabled-opacity: 0.5;
-    #{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
-    #{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
+    #{$css-var-prefix}form-element-invalid-active-border-color: #{color.mix(
+        $red-500,
+        $zinc-350,
+        75%
+      )};
     #{$css-var-prefix}form-element-invalid-focus-color: var(
       #{$css-var-prefix}form-element-invalid-active-border-color
     );
-    #{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
-    #{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
+    #{$css-var-prefix}form-element-valid-border-color: #{color.mix($jade-450, $zinc-350)};
+    #{$css-var-prefix}form-element-valid-active-border-color: #{color.mix(
+        $jade-450,
+        $zinc-350,
+        75%
+      )};
     #{$css-var-prefix}form-element-valid-focus-color: var(
       #{$css-var-prefix}form-element-valid-active-border-color
     );
@@ -156,7 +165,7 @@
     #{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
     #{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
     #{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
-    #{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
+    #{$css-var-prefix}card-sectioning-background-color: #{color.mix($slate-50, $white, 25%)};
   }
 
   // Dropdown (details.dropdown)
@@ -175,7 +184,7 @@
 
   // Modal (<dialog>)
   @if map.get($modules, "components/modal") {
-    #{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
+    #{$css-var-prefix}modal-overlay-background-color: #{rgba(color.mix($zinc-100, $zinc-50), 0.75)};
   }
 
   // Progress
@@ -192,8 +201,8 @@
 
   // Form validation icons
   @if map.get($modules, "forms/basics") {
-    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    #{$css-var-prefix}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(color.mix($red-500, $zinc-350, 75%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
 
   // Focus for buttons, radio and select
diff --git a/scss/themes/default/_theme-colors.scss b/scss/themes/default/_theme-colors.scss
index 015d5be9..3d823c3f 100644
--- a/scss/themes/default/_theme-colors.scss
+++ b/scss/themes/default/_theme-colors.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "../../colors" as *;
 @use "../../settings" as *;
@@ -442,7 +443,7 @@ $color-mappings: (
       "primary-background": $yellow-100,
       "primary-underline": rgba($yellow-350, 0.5),
       "primary-hover": $yellow-250,
-      "primary-hover-background": mix($yellow-100, $yellow-50),
+      "primary-hover-background": color.mix($yellow-100, $yellow-50),
       "primary-focus": rgba($yellow-350, 0.375),
       "primary-inverse": $black,
       "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),