From 02d5ec9e6c14d17302ce763fee131e19ec75a3aa Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:46:22 +0000
Subject: [PATCH] chore(deps-dev): bump sass from 1.79.5 to 1.80.4 (#12027)

---
 .../browser-compatibility-table/index-desktop-md.scss    | 2 ++
 .../browser-compatibility-table/index-desktop-xl.scss    | 2 ++
 .../browser-compatibility-table/index-desktop.scss       | 2 ++
 .../browser-compatibility-table/index-mobile.scss        | 2 ++
 .../ingredients/browser-compatibility-table/index.scss   | 9 +++++----
 client/src/ui/_color-palette.scss                        | 6 ++++--
 package.json                                             | 2 +-
 yarn.lock                                                | 8 ++++----
 8 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
index bda3cc8cc3b4..048daa0ca061 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss
@@ -1,3 +1,5 @@
+@use "../../../ui/vars" as *;
+
 @media (min-width: $screen-md) {
   .table-container {
     width: calc(100% + 6rem);
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
index 26a1fcfe73f1..901f96fe73e1 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss
@@ -1,3 +1,5 @@
+@use "../../../ui/vars" as *;
+
 @media (min-width: $screen-xl) {
   .table-container {
     margin: 0;
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
index 269ae3b1dd4f..bfdec05111d1 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss
@@ -1,3 +1,5 @@
+@use "../../../ui/vars" as *;
+
 // Style for desktop.
 
 @media (min-width: $screen-sm) {
diff --git a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
index 8550e5d3a02d..e7da25d0789d 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss
@@ -1,3 +1,5 @@
+@use "../../../ui/vars" as *;
+
 // Style for mobile.
 
 @media (max-width: $screen-sm - 1px) {
diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
index be464957aaeb..bc8d888c955f 100644
--- a/client/src/document/ingredients/browser-compatibility-table/index.scss
+++ b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "~@mdn/minimalist/sass/mixins/utils" as *;
 @use "../../../ui/vars" as *;
 
@@ -383,10 +384,10 @@ dl.bc-notes-list {
   }
 }
 
-@import "./index-mobile";
-@import "./index-desktop";
-@import "./index-desktop-md";
-@import "./index-desktop-xl";
+@include meta.load-css("index-mobile");
+@include meta.load-css("index-desktop");
+@include meta.load-css("index-desktop-md");
+@include meta.load-css("index-desktop-xl");
 
 .bcd-cell-text-wrapper {
   display: flex;
diff --git a/client/src/ui/_color-palette.scss b/client/src/ui/_color-palette.scss
index 7291c20716c2..0eb572b57503 100644
--- a/client/src/ui/_color-palette.scss
+++ b/client/src/ui/_color-palette.scss
@@ -1,9 +1,11 @@
+@use "sass:color";
+
 @function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
+  @return color.mix(white, $color, $percentage);
 }
 
 @function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
+  @return color.mix(black, $color, $percentage);
 }
 
 @function mdn-color($color, $value) {
diff --git a/package.json b/package.json
index a879e7449915..83a6a1c42e32 100644
--- a/package.json
+++ b/package.json
@@ -241,7 +241,7 @@
     "resolve": "^1.22.8",
     "resolve-url-loader": "^5.0.0",
     "rough-notation": "^0.5.1",
-    "sass": "^1.79.5",
+    "sass": "^1.80.4",
     "sass-loader": "^16.0.2",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.4",
diff --git a/yarn.lock b/yarn.lock
index 0f43024ef9b9..56e21bf97fa6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13340,10 +13340,10 @@ sass-loader@^16.0.2:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.79.5:
-  version "1.79.5"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.5.tgz#646c627601cd5f84c64f7b1485b9292a313efae4"
-  integrity sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==
+sass@^1.80.4:
+  version "1.80.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.4.tgz#bc0418fd796cad2f1a1309d8b4d7fe44b7027de0"
+  integrity sha512-rhMQ2tSF5CsuuspvC94nPM9rToiAFw2h3JTrLlgmNw1MH79v8Cr3DH6KF6o6r+8oofY3iYVPUf66KzC8yuVN1w==
   dependencies:
     "@parcel/watcher" "^2.4.1"
     chokidar "^4.0.0"