From 7e70ff7b8e9e87f46fc1d4dad23b76e977eaa0dc Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Wed, 9 Oct 2024 09:11:32 +0200
Subject: [PATCH] Working with Sass 1.79.4

---
 package-lock.json                        |  38 ++-
 package.json                             |   2 +-
 scss/_functions.scss                     | 294 ++++++++++++++++++++++-
 scss/tests/mixins/_color-modes.test.scss |   4 +-
 4 files changed, 328 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 29fac7314f8d..c1e977ee71e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,7 @@
         "rollup": "^4.23.0",
         "rollup-plugin-istanbul": "^5.0.0",
         "rtlcss": "^4.3.0",
-        "sass": "1.78.0",
+        "sass": "1.79.4",
         "sass-true": "^8.0.0",
         "shelljs": "^0.8.5",
         "stylelint": "^16.9.0",
@@ -10950,12 +10950,12 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.78.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
-      "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
+      "version": "1.79.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.4.tgz",
+      "integrity": "sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
+        "chokidar": "^4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
@@ -10981,6 +10981,34 @@
         "node": ">=18"
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/search-insights": {
       "version": "2.17.2",
       "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz",
diff --git a/package.json b/package.json
index a72b96d235fd..93e0d3f38c84 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "rollup": "^4.23.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
-    "sass": "1.78.0",
+    "sass": "1.79.4",
     "sass-true": "^8.0.0",
     "shelljs": "^0.8.5",
     "stylelint": "^16.9.0",
diff --git a/scss/_functions.scss b/scss/_functions.scss
index e04b5c61b39f..ec569329c425 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,6 +1,296 @@
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+$named-colors: (
+  "aliceblue": #f0f8ff,
+  "antiquewhite": #faebd7,
+  "aqua": #00ffff,
+  "aquamarine": #7fffd4,
+  "azure": #f0ffff,
+  "beige": #f5f5dc,
+  "bisque": #ffe4c4,
+  "black": #000000,
+  "blanchedalmond": #ffebcd,
+  "blue": #0000ff,
+  "blueviolet": #8a2be2,
+  "brown": #a52a2a,
+  "burlywood": #deb887,
+  "cadetblue": #5f9ea0,
+  "chartreuse": #7fff00,
+  "chocolate": #d2691e,
+  "coral": #ff7f50,
+  "cornflowerblue": #6495ed,
+  "cornsilk": #fff8dc,
+  "crimson": #dc143c,
+  "cyan": #00ffff,
+  "darkblue": #00008b,
+  "darkcyan": #008b8b,
+  "darkgoldenrod": #b8860b,
+  "darkgray": #a9a9a9,
+  "darkgreen": #006400,
+  "darkgrey": #a9a9a9,
+  "darkkhaki": #bdb76b,
+  "darkmagenta": #8b008b,
+  "darkolivegreen": #556b2f,
+  "darkorange": #ff8c00,
+  "darkorchid": #9932cc,
+  "darkred": #8b0000,
+  "darksalmon": #e9967a,
+  "darkseagreen": #8fbc8f,
+  "darkslateblue": #483d8b,
+  "darkslategray": #2f4f4f,
+  "darkturquoise": #00ced1,
+  "darkviolet": #9400d3,
+  "deeppink": #ff1493,
+  "deepskyblue": #00bfff,
+  "dimgray": #696969,
+  "dodgerblue": #1e90ff,
+  "firebrick": #b22222,
+  "floralwhite": #fffaf0,
+  "forestgreen": #228b22,
+  "fuchsia": #ff00ff,
+  "gainsboro": #dcdcdc,
+  "ghostwhite": #f8f8ff,
+  "gold": #ffd700,
+  "goldenrod": #daa520,
+  "gray": #808080,
+  "green": #008000,
+  "greenyellow": #adff2f,
+  "grey": #808080,
+  "honeydew": #f0fff0,
+  "hotpink": #ff69b4,
+  "indianred": #cd5c5c,
+  "indigo": #4b0082,
+  "ivory": #fffff0,
+  "khaki": #f0e68c,
+  "lavender": #e6e6fa,
+  "lavenderblush": #fff0f5,
+  "lawngreen": #7cfc00,
+  "lemonchiffon": #fffacd,
+  "lightblue": #add8e6,
+  "lightcoral": #f08080,
+  "lightcyan": #e0ffff,
+  "lightgoldenrodyellow": #fafad2,
+  "lightgray": #d3d3d3,
+  "lightgreen": #90ee90,
+  "lightgrey": #d3d3d3,
+  "lightpink": #ffb6c1,
+  "lightsalmon": #ffa07a,
+  "lightseagreen": #20b2aa,
+  "lightskyblue": #87cefa,
+  "lightslategray": #778899,
+  "lightsteelblue": #b0c4de,
+  "lightyellow": #ffffe0,
+  "lime": #00ff00,
+  "limegreen": #32cd32,
+  "linen": #faf0e6,
+  "magenta": #ff00ff,
+  "maroon": #800000,
+  "mediumaquamarine": #66cdaa,
+  "mediumblue": #0000cd,
+  "mediumorchid": #ba55d3,
+  "mediumpurple": #9370db,
+  "mediumseagreen": #3cb371,
+  "mediumslateblue": #7b68ee,
+  "mediumspringgreen": #00fa9a,
+  "mediumturquoise": #48d1cc,
+  "mediumvioletred": #c71585,
+  "midnightblue": #191970,
+  "mintcream": #f5fffa,
+  "mistyrose": #ffe4e1,
+  "moccasin": #ffe4b5,
+  "navajowhite": #ffdead,
+  "navy": #000080,
+  "oldlace": #fdf5e6,
+  "olive": #808000,
+  "olivedrab": #6b8e23,
+  "orange": #ffa500,
+  "orangered": #ff4500,
+  "orchid": #da70d6,
+  "palegoldenrod": #eee8aa,
+  "palegreen": #98fb98,
+  "paleturquoise": #afeeee,
+  "palevioletred": #db7093,
+  "papayawhip": #ffefd5,
+  "peachpuff": #ffdab9,
+  "peru": #cd853f,
+  "pink": #ffc0cb,
+  "plum": #dda0dd,
+  "powderblue": #b0e0e6,
+  "purple": #800080,
+  "red": #ff0000,
+  "rosybrown": #bc8f8f,
+  "royalblue": #4169e1,
+  "saddlebrown": #8b4513,
+  "salmon": #fa8072,
+  "sandybrown": #f4a460,
+  "seagreen": #2e8b57,
+  "seashell": #fff5ee,
+  "sienna": #a0522d,
+  "silver": #c0c0c0,
+  "skyblue": #87ceeb,
+  "slateblue": #6a5acd,
+  "slategray": #708090,
+  "snow": #fffafa,
+  "springgreen": #00ff7f,
+  "steelblue": #4682b4,
+  "tan": #d2b48c,
+  "teal": #008080,
+  "thistle": #d8bfd8,
+  "tomato": #ff6347,
+  "turquoise": #40e0d0,
+  "violet": #ee82ee,
+  "wheat": #f5deb3,
+  "white": #ffffff,
+  "whitesmoke": #f5f5f5,
+  "yellow": #ffff00,
+  "yellowgreen": #9acd32
+) !default;
+
+@function to-number($value, $base: 10) {
+  @if type-of($value) == "number" {
+    @return $value;
+  } @else if type-of($value) != "string" {
+    @error "Value for `to-number` should be a number or a string.";
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == "-";
+  $numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "a": 10, "b": 11, "c": 12, "d": 13, "e": 14, "f": 15);
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if (index(map-keys($numbers), $character) or $character == ".") {
+      @if $character == "." {
+        $digits: 1;
+      } @else if $digits == 0 {
+        $result: $result * $base + map-get($numbers, $character);
+      } @else {
+        $digits: $digits * $base;
+        $result: $result + divide(map-get($numbers, $character), $digits);
+      }
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}
+
+@function red($value) {
+  $str-value: "#{$value}";
+  @if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
+    $value-number: to-number(str-slice($str-value, 2, 2), 16);
+    // @debug $value "red-hex:" $value-number * 16 + $value-number;
+    @return $value-number * 16 + $value-number;
+  }
+  @if str-slice($str-value, 1, 1) == "#" {
+    $return-value: to-number(str-slice($str-value, 2, 3), 16);
+    // @debug $value "red-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
+    @return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
+  }
+  @if str-slice($str-value, 1, 4) == "rgba" {
+    $rgba-values: str-slice($str-value, str-index($str-value, "("));
+    $red-value: to-number(str-slice($rgba-values, 2, str-index($rgba-values, ",") - 1));
+    @while str-index($rgba-values, ",") != null {
+      $rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
+    }
+    $alpha-value: to-number(str-slice($rgba-values, 1, -2));
+    $return-value: round($red-value * $alpha-value);
+    // @debug $value "red-rgba:" $return-value;
+    @return $return-value;
+  }
+  @if str-slice($str-value, 1, 3) == "rgb" {
+    $rgb-values: str-slice($str-value, str-index($str-value, "("));
+    $return-value: round(to-number(str-slice($rgb-values, 2, str-index($rgb-values, ",") - 1)));
+    // @debug $value "red-rgb:" $return-value;
+    @return $return-value;
+  }
+  @if map-has-key($named-colors, $str-value) {
+    @return red(map-get($named-colors, $str-value));
+  }
+  @error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
+}
+
+@function green($value) {
+  $str-value: "#{$value}";
+  @if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
+    $value-number: to-number(str-slice($str-value, 3, 3), 16);
+    // @debug $value "green-hex:" $value-number * 16 + $value-number;
+    @return $value-number * 16 + $value-number;
+  }
+  @if str-slice($str-value, 1, 1) == "#" {
+    $return-value: to-number(str-slice($str-value, 4, 5), 16);
+    // @debug $value "green-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
+    @return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
+  }
+  @if str-slice($str-value, 1, 4) == "rgba" {
+    $rgba-values: str-slice($str-value, str-index($str-value, "("));
+    $gba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
+    $green-value: to-number(str-slice($gba-values, 1, str-index($gba-values, ",") - 1));
+    @while str-index($rgba-values, ",") != null {
+      $rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
+    }
+    $alpha-value: to-number(str-slice($rgba-values, 1, -2));
+    $return-value: round($green-value * $alpha-value);
+    // @debug $value "green-rgba:" $return-value;
+    @return $return-value;
+  }
+  @if str-slice($str-value, 1, 3) == "rgb" {
+    $rgb-values: str-slice($str-value, str-index($str-value, "("));
+    $gb-values: str-slice($rgb-values, str-index($rgb-values, ",") + 1);
+    $return-value: round(to-number(str-slice($gb-values, 1, str-index($gb-values, ",") - 1)));
+    // @debug $value "green-rgb:" $return-value;
+    @return $return-value;
+  }
+  @if map-has-key($named-colors, $str-value) {
+    @return green(map-get($named-colors, $str-value));
+  }
+  @error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
+}
+
+@function blue($value) {
+  $str-value: "#{$value}";
+  @if str-slice($str-value, 1, 1) == "#" and str-length($str-value) == 4 {
+    $value-number: to-number(str-slice($str-value, 4, 4), 16);
+    // @debug $value "blue-hex:" $value-number * 16 + $value-number;
+    @return $value-number * 16 + $value-number;
+  }
+  @if str-slice($str-value, 1, 1) == "#" {
+    $return-value: to-number(str-slice($str-value, 6, 7), 16);
+    // @debug $value "blue-hex6:" if(str-length($str-value) == 9, $return-value * to-number(str-slice($str-value, 8, 9), 16) / 255, $return-value);
+    @return if(str-length($str-value) == 9, round($return-value * to-number(str-slice($str-value, 8, 9), 16) / 255), $return-value);
+  }
+  @if str-slice($str-value, 1, 4) == "rgba" {
+    $rgba-values: str-slice($str-value, str-index($str-value, "("));
+    $gba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
+    $ba-values: str-slice($gba-values, str-index($gba-values, ",") + 1);
+    $blue-value: to-number(str-slice($ba-values, 1, str-index($ba-values, ",")));
+    @while str-index($rgba-values, ",") != null {
+      $rgba-values: str-slice($rgba-values, str-index($rgba-values, ",") + 1);
+    }
+    $alpha-value: to-number(str-slice($rgba-values, 1, -2));
+    $return-value: round($blue-value * $alpha-value);
+    // @debug $value "blue-rgba:" $return-value;
+    @return $return-value;
+  }
+  @if str-slice($str-value, 1, 3) == "rgb" {
+    $rgb-values: str-slice($str-value, str-index($str-value, "("));
+    $gb-values: str-slice($rgb-values, str-index($rgb-values, ",") + 1);
+    $b-values: str-slice($gb-values, str-index($gb-values, ",") + 1);
+    $return-value: round(to-number(str-slice($b-values, 2, str-index($b-values, ")") - 1)));
+    // @debug $value "blue-rgb:" $return-value;
+    @return to-number($return-value);
+  }
+  @if map-has-key($named-colors, $str-value) {
+    @return blue(map-get($named-colors, $str-value));
+  }
+  @error "#{$value} format isn't supported. Supported format: named colors, hex codes or rgb values.";
+}
+
+.test {
+  color: to-rgb(rgba(#ffffff, .5));
+}
 
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
@@ -204,12 +494,12 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // scss-docs-start color-functions
 // Tint a color: mix a color with white
 @function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
+  @return mix($white, $color, $weight);
 }
 
 // Shade a color: mix a color with black
 @function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
+  @return mix($black, $color, $weight);
 }
 
 // Shade the color if the weight is positive, else tint it
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 9ecc628deabe..97ceb322696f 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -26,7 +26,7 @@
           background-color: var(--bs-primary-bg-subtle);
         }
         [data-bs-theme=dark] {
-          --custom-color: #3a3ff8;
+          --custom-color: rgb(57.5, 63, 247.5);
         }
       }
     }
@@ -58,7 +58,7 @@
         }
         @media (prefers-color-scheme: dark) {
           :root {
-            --custom-color: #3a3ff8;
+            --custom-color: rgb(57.5, 63, 247.5);
           }
         }
       }