[chore] Migrate Sass global built-in functions to module system (#7601)

Author: ggdouglas

packages/core/src/_typography.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:list";
 @import "common/variables";
 @import "common/variables-extended";
 @import "common/mixins";
@@ -62,8 +63,8 @@ $headings: (
 
 @each $tag, $props in $headings {
   %#{$tag} {
-    font-size: nth($props, 1);
-    line-height: nth($props, 2);
+    font-size: list.nth($props, 1);
+    line-height: list.nth($props, 2);
   }
 
   #{$tag}.#{$ns}-heading {

packages/core/src/common/_mixins.scss

@@ -1,7 +1,9 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:map";
 @use "sass:math";
+@use "sass:meta";
 @import "@blueprintjs/colors/lib/scss/colors";
 @import "flex";
 
@@ -34,7 +36,7 @@ $pt-dark-intent-text-colors: (
 ) !default;
 
 @mixin intent-color($intentName) {
-  color: map-get($pt-intent-colors, $intentName);
+  color: map.get($pt-intent-colors, $intentName);
 }
 
 @mixin position-all($position, $value) {
@@ -101,15 +103,15 @@ $pt-dark-intent-text-colors: (
 // returns the padding necessary to center text in a container of the given height.
 // default line-height is that of base typography, 18px assuming 14px font-size.
 
-@function centered-text($height, $line-height: floor($pt-font-size * $pt-line-height)) {
-  @return floor(($height - $line-height) * 0.5);
+@function centered-text($height, $line-height: math.floor($pt-font-size * $pt-line-height)) {
+  @return math.floor(($height - $line-height) * 0.5);
 }
 
 // Removes the unit from a Sass numeric value (if present): `strip-unit(12px) => 12`
 // @see https://css-tricks.com/snippets/sass/strip-unit-function/
 
 @function strip-unit($number) {
-  @if type-of($number) == "number" and not unitless($number) {
+  @if meta.type-of($number) == "number" and not math.is-unitless($number) {
     @return math.div($number, $number * 0 + 1);
   }
 

packages/core/src/common/_react-transition.scss

@@ -1,6 +1,9 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:list";
+@use "sass:map";
+
 /*
 A mixin to generate the classes for a React CSSTransition which animates any number of CSS
 properties at once.
@@ -93,7 +96,7 @@ If `exit` phase is given then property values are animated in reverse, from fina
     @include each-prop($properties, $end-index);
     transition-delay: $delay;
     transition-duration: $duration;
-    transition-property: map-keys($properties);
+    transition-property: map.keys($properties);
     /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
     transition-timing-function: $easing;
   }
@@ -107,7 +110,7 @@ Example: `each-prop((opacity: 0 1), 2)` will print "opacity: 1"
 */
 @mixin each-prop($properties, $index) {
   @each $prop, $values in $properties {
-    #{$prop}: nth($values, $index);
+    #{$prop}: list.nth($values, $index);
   }
 }
 

packages/core/src/components/button/_button-group.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:list";
 @import "../../common/variables";
 @import "../forms/common";
 @import "./common";
@@ -12,50 +13,50 @@
     // ensure button can never be smaller than its default size
     flex: 0 0 auto;
     position: relative;
-    z-index: index($control-group-stack, "button-default");
+    z-index: list.index($control-group-stack, "button-default");
 
     // the ordering of these z-index CSS rules is particular because of CSS
     // selector specificity. specifically, disabled styles should have
     // precedence over hover and active styles to prevent mouse interactions on
     // disabled buttons from reordering elements in the stack.
 
     &:focus {
-      z-index: index($control-group-stack, "button-focus");
+      z-index: list.index($control-group-stack, "button-focus");
     }
 
     &:hover {
-      z-index: index($control-group-stack, "button-hover");
+      z-index: list.index($control-group-stack, "button-hover");
     }
 
     &:active,
     &.#{$ns}-active {
-      z-index: index($control-group-stack, "button-active");
+      z-index: list.index($control-group-stack, "button-active");
     }
 
     &:disabled,
     &.#{$ns}-disabled {
-      z-index: index($control-group-stack, "button-disabled");
+      z-index: list.index($control-group-stack, "button-disabled");
     }
 
     &[class*="#{$ns}-intent-"] {
-      z-index: index($control-group-stack, "intent-button-default");
+      z-index: list.index($control-group-stack, "intent-button-default");
 
       &:focus {
-        z-index: index($control-group-stack, "intent-button-focus");
+        z-index: list.index($control-group-stack, "intent-button-focus");
       }
 
       &:hover {
-        z-index: index($control-group-stack, "intent-button-hover");
+        z-index: list.index($control-group-stack, "intent-button-hover");
       }
 
       &:active,
       &.#{$ns}-active {
-        z-index: index($control-group-stack, "intent-button-active");
+        z-index: list.index($control-group-stack, "intent-button-active");
       }
 
       &:disabled,
       &.#{$ns}-disabled {
-        z-index: index($control-group-stack, "intent-button-disabled");
+        z-index: list.index($control-group-stack, "intent-button-disabled");
       }
     }
   }

packages/core/src/components/button/_common.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:map";
 @import "../../common/mixins";
 @import "../../common/variables";
 @import "../../common/variables-extended";
@@ -401,12 +402,12 @@ $dark-minimal-active-text-colors: (
 );
 
 @mixin pt-button-minimal-intent($intent) {
-  $intent-color: map-get($pt-intent-colors, $intent);
-  $text-color: map-get($pt-intent-text-colors, $intent);
-  $active-text-color: map-get($pt-intent-active-text-colors, $intent);
-  $dark-text-color: map-get($pt-dark-intent-text-colors, $intent);
-  $dark-active-text-color: map-get($dark-minimal-active-text-colors, $intent);
-  $dark-hover-text-color: map-get($dark-minimal-hover-text-colors, $intent);
+  $intent-color: map.get($pt-intent-colors, $intent);
+  $text-color: map.get($pt-intent-text-colors, $intent);
+  $active-text-color: map.get($pt-intent-active-text-colors, $intent);
+  $dark-text-color: map.get($pt-dark-intent-text-colors, $intent);
+  $dark-active-text-color: map.get($dark-minimal-active-text-colors, $intent);
+  $dark-hover-text-color: map.get($dark-minimal-hover-text-colors, $intent);
 
   color: $text-color;
 
@@ -499,8 +500,8 @@ $dark-minimal-active-text-colors: (
   @each $intent, $colors in $button-intents {
     &.#{$ns}-intent-#{$intent} {
       @include pt-button-outlined-intent(
-        map-get($pt-intent-text-colors, $intent),
-        map-get($pt-dark-intent-text-colors, $intent)
+        map.get($pt-intent-text-colors, $intent),
+        map.get($pt-dark-intent-text-colors, $intent)
       );
     }
   }

packages/core/src/components/callout/_callout.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:map";
 @import "../../common/variables-extended";
 
 $callout-padding: $pt-spacing * 4;
@@ -85,7 +86,7 @@ $callout-padding-compact: $pt-spacing * 2;
 
   @each $intent, $color in $pt-intent-colors {
     &.#{$ns}-intent-#{$intent} {
-      color: map-get($pt-intent-text-colors, $intent);
+      color: map.get($pt-intent-text-colors, $intent);
 
       &:not(.#{$ns}-minimal) {
         background-color: rgba($color, 0.1);
@@ -98,11 +99,11 @@ $callout-padding-compact: $pt-spacing * 2;
       &[class*="#{$ns}-icon-"]::before,
       > .#{$ns}-icon:first-child,
       .#{$ns}-heading {
-        color: map-get($pt-intent-text-colors, $intent);
+        color: map.get($pt-intent-text-colors, $intent);
       }
 
       .#{$ns}-dark & {
-        color: map-get($pt-dark-intent-text-colors, $intent);
+        color: map.get($pt-dark-intent-text-colors, $intent);
 
         &:not(.#{$ns}-minimal) {
           background-color: rgba($color, 0.2);
@@ -111,7 +112,7 @@ $callout-padding-compact: $pt-spacing * 2;
         &[class*="#{$ns}-icon-"]::before,
         > .#{$ns}-icon:first-child,
         .#{$ns}-heading {
-          color: map-get($pt-dark-intent-text-colors, $intent);
+          color: map.get($pt-dark-intent-text-colors, $intent);
         }
       }
     }

packages/core/src/components/card/_card.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:list";
 @import "./card-variables";
 
 .#{$ns}-card {
@@ -25,13 +26,13 @@
   }
 }
 
-@for $index from 1 through length($elevation-shadows) {
+@for $index from 1 through list.length($elevation-shadows) {
   .#{$ns}-elevation-#{$index - 1} {
-    box-shadow: nth($elevation-shadows, $index);
+    box-shadow: list.nth($elevation-shadows, $index);
 
     &.#{$ns}-dark,
     .#{$ns}-dark & {
-      box-shadow: nth($dark-elevation-shadows, $index);
+      box-shadow: list.nth($dark-elevation-shadows, $index);
     }
 
     @media (forced-colors: active) and (prefers-color-scheme: dark) {

packages/core/src/components/entity-title/_entity-title.scss

@@ -1,6 +1,7 @@
 // Copyright 2024 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:list";
 @import "../../common/variables";
 @import "../../common/variables-extended";
 
@@ -72,7 +73,7 @@
       align-items: center;
       display: flex;
       // Aligning icon which has unknown dimensions on the title size
-      height: nth($props, 2);
+      height: list.nth($props, 2);
     }
   }