fix: upgrade sass and remove -- prefix from function names (#5371)

* fix: upgrade sass and remove -- from func names

* chore: update stylelint disable comment

config/jest-config-ibm-cloud-cognitive/package.json

@@ -44,6 +44,6 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-circus": "^29.7.0",
     "jest-watch-typeahead": "^2.0.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.2"
   }
 }

packages/core/package.json

@@ -59,7 +59,7 @@
     "regenerator-runtime": "^0.14.1",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "storybook": "^8.0.9",
     "typescript": "^5.3.3",
     "vite": "^5.2.10"

packages/ibm-products-community/package.json

@@ -42,7 +42,7 @@
     "jest-config-ibm-cloud-cognitive": "^1.2.0",
     "jest-environment-jsdom": "^29.6.2",
     "rimraf": "^5.0.1",
-    "sass": "^1.64.2"
+    "sass": "^1.77.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10"

packages/ibm-products-styles/package.json

@@ -57,7 +57,7 @@
     "npm-check-updates": "^16.14.12",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "yargs": "^17.7.2"
   },
   "peerDependencies": {

packages/ibm-products-styles/src/components/StatusIcon/_status-icon.scss

@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function --clr($name, $theme: light) {
+@function carbon-clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss

@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--top-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-start: -1px !important;
 }
 
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--bottom-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-end: -1px !important;
 }

packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss

@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function --get-background-color($color, $key, $contrast-key) {
+@function carbon-get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -59,7 +59,11 @@ $theme-keys: map-keys($themes);
     @each $contrast-key in $theme-keys {
       .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
         // stylelint-disable-next-line carbon/theme-token-use
-        background-color: --get-background-color($color, $key, $contrast-key);
+        background-color: carbon-get-background-color(
+          $color,
+          $key,
+          $contrast-key
+        );
       }
     }
   }

packages/ibm-products/package.json

@@ -88,7 +88,7 @@
     "rimraf": "^5.0.5",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },

yarn.lock

@@ -1760,7 +1760,7 @@ __metadata:
     regenerator-runtime: "npm:^0.14.1"
     remark-gfm: "npm:^4.0.0"
     rimraf: "npm:^5.0.5"
-    sass: "npm:^1.70.0"
+    sass: "npm:^1.77.2"
     storybook: "npm:^8.0.9"
     typescript: "npm:^5.3.3"
     vite: "npm:^5.2.10"
@@ -1780,7 +1780,7 @@ __metadata:
     jest-config-ibm-cloud-cognitive: "npm:^1.2.0"
     jest-environment-jsdom: "npm:^29.6.2"
     rimraf: "npm:^5.0.1"
-    sass: "npm:^1.64.2"
+    sass: "npm:^1.77.2"
   peerDependencies:
     "@carbon/grid": ^11.22.0
     "@carbon/layout": ^11.21.0
@@ -1808,7 +1808,7 @@ __metadata:
     npm-check-updates: "npm:^16.14.12"
     npm-run-all: "npm:^4.1.5"
     rimraf: "npm:^5.0.5"
-    sass: "npm:^1.70.0"
+    sass: "npm:^1.77.2"
     yargs: "npm:^17.7.2"
   peerDependencies:
     "@carbon/grid": ^11.22.0
@@ -1871,7 +1871,7 @@ __metadata:
     rimraf: "npm:^5.0.5"
     rollup: "npm:^2.79.1"
     rollup-plugin-strip-banner: "npm:^3.0.0"
-    sass: "npm:^1.70.0"
+    sass: "npm:^1.77.2"
     typescript-config-carbon: "npm:^0.2.1"
     yargs: "npm:^17.7.2"
   peerDependencies:
@@ -2724,37 +2724,37 @@ __metadata:
   linkType: hard
 
 "@csstools/css-parser-algorithms@npm:^2.3.1":
-  version: 2.6.1
-  resolution: "@csstools/css-parser-algorithms@npm:2.6.1"
+  version: 2.6.3
+  resolution: "@csstools/css-parser-algorithms@npm:2.6.3"
   peerDependencies:
-    "@csstools/css-tokenizer": ^2.2.4
-  checksum: 4ad4778525a92240c87ba063f3415216b36b81c45bbfcf69a4c82aab140e8943c269ef353ad6ac31de0950b776d972feb622df76b66180b402cba50951d0d58c
+    "@csstools/css-tokenizer": ^2.3.1
+  checksum: b893e284ebcccf37d7928be31be94fb0d6725defc544b39892d5e59ed5950b413366491817539b0add08deb9fc258c57588053d4436f84b7bd3b43bfeee67bb1
   languageName: node
   linkType: hard
 
 "@csstools/css-tokenizer@npm:^2.2.0":
-  version: 2.2.4
-  resolution: "@csstools/css-tokenizer@npm:2.2.4"
-  checksum: 13cc71a8ebc3ff81c49a459e57e1a94031969b70ce0e582bc949fa4f2d97900c07319866b080c57020896e4f5bee0968cc14f7bf41e7f105eb1c04a6c7bc33c4
+  version: 2.3.1
+  resolution: "@csstools/css-tokenizer@npm:2.3.1"
+  checksum: 25c8643151667bfc2ce653174786d9f97fea93aa38d48432937bc634d8478dfa03e5e6ad18d3fff3d6fa245e9f6578f87ca07d9fd764a274702e4bb8dd34dede
   languageName: node
   linkType: hard
 
 "@csstools/media-query-list-parser@npm:^2.1.4":
-  version: 2.1.9
-  resolution: "@csstools/media-query-list-parser@npm:2.1.9"
+  version: 2.1.11
+  resolution: "@csstools/media-query-list-parser@npm:2.1.11"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^2.6.1
-    "@csstools/css-tokenizer": ^2.2.4
-  checksum: 320b5916189b4899ec1186e4802483bcd28943d06af88d158f0f8289b04f57914fc6ff6a3fa9cd5b6a612b955a10f43e31d8de7ba74a7f9092c0a5dfced57102
+    "@csstools/css-parser-algorithms": ^2.6.3
+    "@csstools/css-tokenizer": ^2.3.1
+  checksum: 23ede5583c6f1f51ec45b9293fcaf1ecac0f69c7ea750bfe2245926a66a6ae8f7dea8b3604fc4a5b8be4a25c1bccf519a357bf926d486a7ff479e89685011ff4
   languageName: node
   linkType: hard
 
 "@csstools/selector-specificity@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "@csstools/selector-specificity@npm:3.0.3"
+  version: 3.1.1
+  resolution: "@csstools/selector-specificity@npm:3.1.1"
   peerDependencies:
     postcss-selector-parser: ^6.0.13
-  checksum: 287f17aefe2f22a39cb1c01d45d9e2c4c8c7cf11d9af67c44fe14fa2ed2e11178406661d1b6b023c8a447cdb08933ac134352a0c1452d409af4e7db2570684f3
+  checksum: 3786a6afea97b08ad739ee8f4004f7e0a9e25049cee13af809dbda6462090744012a54bd9275a44712791e8f103f85d21641f14e81799f9dab946b0459a5e1ef
   languageName: node
   linkType: hard
 
@@ -14896,7 +14896,7 @@ __metadata:
     jest-circus: "npm:^29.7.0"
     jest-watch-typeahead: "npm:^2.0.0"
     npm-check-updates: "npm:^16.14.12"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.2"
   peerDependencies:
     jest: ^29.7.0
   languageName: unknown
@@ -21023,16 +21023,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.51.0, sass@npm:^1.64.2, sass@npm:^1.70.0":
-  version: 1.75.0
-  resolution: "sass@npm:1.75.0"
+"sass@npm:^1.77.2":
+  version: 1.77.2
+  resolution: "sass@npm:1.77.2"
   dependencies:
     chokidar: "npm:>=3.0.0 <4.0.0"
     immutable: "npm:^4.0.0"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 9f2d1b5adfe0b008e7062ef2f42fd9b26672e39e36ef3d234166636a4082d1f66c01804070e4e07b50ec872cdd9485ccf10fae8f87b3c00b9de6400c6e73efe8
+  checksum: 4df71f1a01cd59613e7a25bfcec96ddf06e3546c238ba3238b96c6ac0dcf34b9ce238b4de7b39656f6cb0a5e7acccde19f53b521ae4abcdcbe600e0de9c97644
   languageName: node
   linkType: hard
 
@@ -22305,9 +22305,10 @@ __metadata:
   linkType: hard
 
 "stylelint-plugin-carbon-tokens@npm:^2.3.1":
-  version: 2.4.0
-  resolution: "stylelint-plugin-carbon-tokens@npm:2.4.0"
+  version: 2.8.0
+  resolution: "stylelint-plugin-carbon-tokens@npm:2.8.0"
   dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
     lodash: "npm:^4.17.21"
     postcss: "npm:^8.4.16"
     postcss-scss: "npm:^4.0.4"
@@ -22318,7 +22319,7 @@ __metadata:
     "@carbon/motion": ">=10 <= 11"
     "@carbon/themes": ">=10 <= 11"
     "@carbon/type": ">=10 <= 11"
-  checksum: 4d96b91ae388f301473932116c8f22477c2142d383cf10ada7f2663700cf374c4ae46355e9eb438f9c88e11018dbc88193f1f397dd2b52083e9a79a8cbe96347
+  checksum: 1201c75c77ea028fdd7b0b2220871249fce08fb12d54cd4a20887773a696fc197332798c07c6f8f17c8120c61f11144f7c757d34af3cf5e81f19829631a51799
   languageName: node
   linkType: hard