Fix #3920

sass/elements/image.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
 @use "../utilities/mixins" as mx;
@@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
   }
 
   @each $pair in iv.$aspect-ratios {
-    $w: nth($pair, 1);
-    $h: nth($pair, 2);
+    $w: list.nth($pair, 1);
+    $h: list.nth($pair, 2);
 
     &.#{iv.$class-prefix}is-#{$w}by#{$h} {
       aspect-ratio: #{$w} / #{$h};

sass/elements/title.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
@@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;
@@ -119,7 +121,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
 
   // Sizes
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     &.#{iv.$class-prefix}is-#{$i} {
       font-size: $size;

sass/form/input-textarea.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 @use "shared";
 @use "../utilities/css-variables" as cv;
 @use "../utilities/initial-variables" as iv;
@@ -22,7 +24,7 @@ $textarea-colors: shared.$form-colors !default;
 
   // Colors
   @each $name, $pair in $textarea-colors {
-    $color: nth($pair, 1);
+    $color: list.nth($pair, 1);
 
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(

sass/helpers/aspect-ratio.scss

@@ -1,8 +1,10 @@
+@use "sass:list";
+
 @use "../utilities/initial-variables" as iv;
 
 @each $pair in iv.$aspect-ratios {
-  $w: nth($pair, 1);
-  $h: nth($pair, 2);
+  $w: list.nth($pair, 1);
+  $h: list.nth($pair, 2);
 
   .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
     aspect-ratio: #{$w} / #{$h};

sass/helpers/typography.scss

@@ -1,10 +1,12 @@
+@use "sass:list";
+
 @use "../utilities/derived-variables" as dv;
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/mixins" as mx;
 
 @mixin typography-size($target: "") {
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
 
     .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
       font-size: $size !important;

sass/themes/dark.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/initial-variables" as iv;
 @use "../utilities/css-variables" as cv;
@@ -19,7 +20,7 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
   @each $name, $color in dv.$colors {
     $base: $color;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
     }
 

sass/themes/light.scss

@@ -1,4 +1,5 @@
 @use "sass:list";
+@use "sass:meta";
 
 @use "../utilities/css-variables" as cv;
 @use "../utilities/derived-variables" as dv;
@@ -103,7 +104,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
     $light: null;
     $dark: null;
 
-    @if type-of($color == "list") {
+    @if meta.type-of($color == "list") {
       $base: list.nth($color, 1);
 
       @if list.length($color) > 3 {
@@ -139,7 +140,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
   @include cv.register-hsl("shadow", dv.$shadow-color);
 
   @each $size in dv.$sizes {
-    $i: index(dv.$sizes, $size);
+    $i: list.index(dv.$sizes, $size);
     $name: "size-#{$i}";
     @include cv.register-var($name, $size);
   }

sass/utilities/css-variables.scss

@@ -48,16 +48,35 @@
 @mixin register-rgb($name, $value) {
   @include register-var(
     $name,
-    (red($value), green($value), blue($value)),
+    (
+      color.channel($value, "red", $space: rgb),
+      color.channel($value, "green", $space: rgb),
+      color.channel($value, "blue", $space: rgb)
+    ),
     "",
     "-rgb"
   );
 }
 
 @mixin register-hsl($name, $value) {
-  @include register-var($name, round(hue($value)), "", "-h");
-  @include register-var($name, round(saturation($value)), "", "-s");
-  @include register-var($name, round(lightness($value)), "", "-l");
+  @include register-var(
+    $name,
+    round(color.channel($value, "hue", $space: hsl)),
+    "",
+    "-h"
+  );
+  @include register-var(
+    $name,
+    round(color.channel($value, "saturation", $space: hsl)),
+    "",
+    "-s"
+  );
+  @include register-var(
+    $name,
+    round(color.channel($value, "lightness", $space: hsl)),
+    "",
+    "-l"
+  );
 }
 
 @mixin generate-on-scheme-colors($name, $base, $scheme-main) {
@@ -76,7 +95,11 @@
       @if $ratio > 5 {
         $found-decent-color: true;
       } @else {
-        $on-scheme-color: lighten($on-scheme-color, 5%);
+        $on-scheme-color: color.adjust(
+          $on-scheme-color,
+          $lightness: 5%,
+          $space: hsl
+        );
         $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
       }
     }
@@ -87,13 +110,21 @@
       @if $ratio > 5 {
         $found-decent-color: true;
       } @else {
-        $on-scheme-color: darken($on-scheme-color, 5%);
+        $on-scheme-color: color.adjust(
+          $on-scheme-color,
+          $lightness: -5%,
+          $space: hsl
+        );
         $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
       }
     }
   }
 
-  $on-scheme-lightness: lightness($on-scheme-color);
+  $on-scheme-lightness: color.channel(
+    $on-scheme-color,
+    "lightness",
+    $space: hsl
+  );
   @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
   $on-scheme-l: getVar($name, "", "-on-scheme-l");
   @include register-var(
@@ -110,16 +141,28 @@
   @if ($scheme-main-brightness == "bright") {
     @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
       // We're on a light background, so we'll darken the test color step by step.
-      $on-scheme-color: darken($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: -5%,
+        $space: hsl
+      );
     }
   } @else {
     @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
       // We're on a dark background, so we'll lighten the test color step by step.
-      $on-scheme-color: lighten($on-scheme-color, 5%);
+      $on-scheme-color: color.adjust(
+        $on-scheme-color,
+        $lightness: 5%,
+        $space: hsl
+      );
     }
   }
 
-  $on-scheme-lightness: lightness($on-scheme-color);
+  $on-scheme-lightness: color.channel(
+    $on-scheme-color,
+    "lightness",
+    $space: hsl
+  );
   @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
 }
 
@@ -135,7 +178,12 @@
   @include register-base-color($name, $base);
 
   @if $invert {
-    @include register-var($name, lightness($invert), "", "-invert-l");
+    @include register-var(
+      $name,
+      color.channel($invert, "lightness", $space: hsl),
+      "",
+      "-invert-l"
+    );
     @include register-var("#{$name}-invert", $invert);
   }
 }
@@ -148,11 +196,11 @@
   $light: null,
   $dark: null
 ) {
-  $h: round(hue($base)); // Hue
-  $s: round(saturation($base)); // Saturation
-  $l: round(lightness($base)); // Lightness
+  $h: round(color.channel($base, "hue", $space: hsl)); // Hue
+  $s: round(color.channel($base, "saturation", $space: hsl)); // Saturation
+  $l: round(color.channel($base, "lightness", $space: hsl)); // Lightness
   $base-lum: fn.bulmaColorLuminance($base);
-  $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
+  $l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
   $l-0: 0%; // 5% or less
   $l-5: 5%; // More than 5%
   $a: 1; // Alpha
@@ -160,7 +208,7 @@
 
   // Calculate digits like "40" for the scheme-main
   $scheme-l-0: 0%;
-  $scheme-l-base: round($scheme-main-l % 10);
+  $scheme-l-base: math.round($scheme-main-l % 10);
   $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
   $pct-to-int: math.div($closest-5, 100%) * 100;
   $scheme-main-digits: #{$pct-to-int};
@@ -254,7 +302,10 @@
       // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
       $fg-lum: fn.bulmaColorLuminance($foreground);
 
-      @if (lightness($foreground) > lightness($background)) {
+      @if (
+        color.channel($foreground, "lightness", $space: hsl) >
+          color.channel($background, "lightness", $space: hsl)
+      ) {
         $is-light-fg: true;
         $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
       } @else {
@@ -323,7 +374,12 @@
 
   // If an invert color is provided by the user
   @if $invert {
-    @include register-var($name, lightness($invert), "", "-invert-l");
+    @include register-var(
+      $name,
+      color.channel($invert, "lightness", $space: hsl),
+      "",
+      "-invert-l"
+    );
     @include register-var("#{$name}-invert", $invert);
   } @else {
     $base-invert-l-digits: map.get($combos, $base-digits);
@@ -343,13 +399,33 @@
 
   // Good color on light background (90% lightness)
   @if $light and $dark {
-    @include register-var($name, lightness($light), "", "-light-l");
-    @include register-var($name, lightness($light), "", "-dark-invert-l");
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-light-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($light, "lightness", $space: hsl),
+      "",
+      "-dark-invert-l"
+    );
     @include register-var("#{$name}-light", $light);
     @include register-var("#{$name}-dark-invert", $light);
 
-    @include register-var($name, lightness($dark), "", "-dark-l");
-    @include register-var($name, lightness($dark), "", "-light-invert-l");
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-dark-l"
+    );
+    @include register-var(
+      $name,
+      color.channel($dark, "lightness", $space: hsl),
+      "",
+      "-light-invert-l"
+    );
     @include register-var("#{$name}-dark", $dark);
     @include register-var("#{$name}-light-invert", $dark);
   } @else {

sass/utilities/functions.scss

@@ -1,19 +1,25 @@
+@use "sass:color";
 @use "sass:list";
+@use "sass:map";
 @use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 
 @function mergeColorMaps($bulma-colors, $custom-colors) {
   // We return at least Bulma's hard-coded colors
   $merged-colors: $bulma-colors;
 
   // We want a map as input
-  @if type-of($custom-colors) == "map" {
+  @if meta.type-of($custom-colors) == "map" {
     @each $name, $components in $custom-colors {
       // The color name should be a string
       // and the components either a single color
       // or a colors list with at least one element
-      @if type-of($name) ==
+      @if meta.type-of($name) ==
         "string" and
-        (type-of($components) == "list" or type-of($components) == "color") and
+        (
+          type-of($components) == "list" or meta.type-of($components) == "color"
+        ) and
         length($components) >=
         1
       {
@@ -25,12 +31,12 @@
 
         // The param can either be a single color
         // or a list of 2 colors
-        @if type-of($components) == "color" {
+        @if meta.type-of($components) == "color" {
           $color-base: $components;
           $color-invert: bulmaFindColorInvert($color-base);
           $color-light: bulmaFindLightColor($color-base);
           $color-dark: bulmaFindDarkColor($color-base);
-        } @else if type-of($components) == "list" {
+        } @else if meta.type-of($components) == "list" {
           $color-base: list.nth($components, 1);
 
           // If Invert, Light and Dark are provided
@@ -56,7 +62,7 @@
         $value: $color-base, $color-invert, $color-light, $color-dark;
 
         // We only want to merge the map if the color base is an actual color
-        @if type-of($color-base) == "color" {
+        @if meta.type-of($color-base) == "color" {
           // We merge this colors elements as map with Bulma's colors map
           // (we can override them this way, no multiple definition for the same name)
           // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
@@ -91,14 +97,14 @@
 }
 
 @function bulmaColorLuminance($color) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return 0.55;
   }
 
   $color-rgb: (
-    "red": red($color),
-    "green": green($color),
-    "blue": blue($color),
+    "red": color.channel($color, "red", $space: rgb),
+    "green": color.channel($color, "green", $space: rgb),
+    "blue": color.channel($color, "blue", $space: rgb),
   );
 
   @each $name, $value in $color-rgb {
@@ -112,7 +118,7 @@
       $value: powerNumber($value, 2);
     }
 
-    $color-rgb: map-merge(
+    $color-rgb: map.merge(
       $color-rgb,
       (
         $name: $value,
@@ -120,8 +126,8 @@
     );
   }
 
-  @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
-    0.7152 + map-get($color-rgb, "blue") * 0.0722;
+  @return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") *
+    0.7152 + map.get($color-rgb, "blue") * 0.0722;
 }
 
 @function bulmaFindColorInvert($color) {
@@ -133,11 +139,11 @@
 }
 
 @function bulmaFindLightColor($color, $l: 96%) {
-  @if type-of($color) == "color" {
+  @if meta.type-of($color) == "color" {
     $l: 96%;
 
-    @if lightness($color) > 96% {
-      $l: lightness($color);
+    @if color.channel($color, "lightness", $space: hsl) > 96% {
+      $l: color.channel($color, "lightness", $space: hsl);
     }
 
     @return change-color($color, $lightness: $l);
@@ -147,7 +153,7 @@
 }
 
 @function bulmaFindDarkColor($color, $base-l: 29%) {
-  @if type-of($color) == "color" {
+  @if meta.type-of($color) == "color" {
     $luminance: bulmaColorLuminance($color);
     $luminance-delta: 0.53 - $luminance;
     $target-l: round($base-l + $luminance-delta * 53);
@@ -159,7 +165,7 @@
 }
 
 @function bulmaRgba($color, $alpha) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
@@ -167,27 +173,37 @@
 }
 
 @function bulmaDarken($color, $amount) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
-  @return darken($color, $amount);
+  @return color.adjust($color, $lightness: -$amount, $space: hsl);
 }
 
 @function bulmaLighten($color, $amount) {
-  @if type-of($color) != "color" {
+  @if meta.type-of($color) != "color" {
     @return $color;
   }
 
-  @return lighten($color, $amount);
+  @return color.adjust($color, $lightness: $amount, $space: hsl);
 }
 
 @function bulmaColorBrightness($n) {
   $color-brightness: round(
-   math.div((red($n) * 299) + (green($n) * 587) + (blue($n) * 114), 1000)
+    math.div(
+      (color.channel($n, "red", $space: rgb) * 299) +
+        (color.channel($n, "green", $space: rgb) * 587) +
+        (color.channel($n, "blue", $space: rgb) * 114),
+      1000
+    )
   );
   $light-color: round(
-    math.div((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114), 1000)
+    math.div(
+      (color.channel(#ffffff, "red", $space: rgb) * 299) +
+        (color.channel(#ffffff, "green", $space: rgb) * 587) +
+        (color.channel(#ffffff, "blue", $space: rgb) * 114),
+      1000
+    )
   );
 
   @if abs($color-brightness) < math.div($light-color, 2) {
@@ -198,12 +214,42 @@
 }
 
 @function bulmaEnoughContrast($foreground, $background) {
-  $r: (max(red($foreground), red($background))) -
-    (min(red($foreground), red($background)));
-  $g: (max(green($foreground), green($background))) -
-    (min(green($foreground), green($background)));
-  $b: (max(blue($foreground), blue($background))) -
-    (min(blue($foreground), blue($background)));
+  $r: (
+      max(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    );
+  $g: (
+      max(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    );
+  $b: (
+      max(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    );
   $sum-rgb: $r + $g + $b;
 
   @if $sum-rgb < 500 {
@@ -215,15 +261,15 @@
 
 // By Cory Simmons https://corysimmons.com/
 @function bulmaStringToNumber($value) {
-  @if type-of($value) == "number" {
+  @if meta.type-of($value) == "number" {
     @return $value;
-  } @else if type-of($value) != "string" {
+  } @else if meta.type-of($value) != "string" {
     $_: log("Value for `to-number` should be a number or a string.");
   }
 
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == "-";
+  $minus: string.slice($value, 1, 1) == "-";
   $numbers: (
     "0": 0,
     "1": 1,
@@ -237,20 +283,23 @@
     "9": 9,
   );
 
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
 
-    @if not(index(map-keys($numbers), $character) or $character == ".") {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    @if not(list.index(map.keys($numbers), $character) or $character == ".") {
+      @return to-length(
+        if($minus, -$result, $result),
+        string.slice($value, $i)
+      );
     }
 
     @if $character == "." {
       $digits: 1;
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
+      $result: $result * 10 + map.get($numbers, $character);
     } @else {
       $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
+      $result: $result + map.get($numbers, $character) / $digits;
     }
   }
 

sass/utilities/mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "initial-variables" as iv;
 @use "css-variables" as cv;
 
@@ -360,11 +362,11 @@
 }
 
 @mixin breakpoint($name) {
-  $breakpoint: map-get(iv.$breakpoints, $name);
+  $breakpoint: map.get(iv.$breakpoints, $name);
 
   @if $breakpoint {
-    $from: map-get($breakpoint, "from");
-    $until: map-get($breakpoint, "until");
+    $from: map.get($breakpoint, "from");
+    $until: map.get($breakpoint, "until");
 
     @if $from and $until {
       @include between($from, $until) {