fix(sass): replace deprecated if() syntax with modern Sass syntax

Sass has deprecated the legacy `if()` function in favor of the new CSS `if()` function.
To resolve this, we must use the new Sass syntax `if(sass(...): ...; else: ...)` introduced in Sass 1.95.0.

This change:
1. Updates `sass` dependency to `^1.97.3`.
2. Migrates all token files to use the new syntax.

Fixes: #5884

Co-authored-by: asyncLiz <34382620+asyncLiz@users.noreply.github.com>

Author: google-labs-jules[bot]

package-lock.json

@@ -74,7 +74,7 @@
     "jasmine": "^4.5.0",
     "playwright": "^1.49.0",
     "rollup": "^2.79.1",
-    "sass": "^1.93.2",
+    "sass": "^1.97.3",
     "sass-true": "^6.1.0",
     "typescript": "5.8.2",
     "web-test-runner-jasmine": "^0.0.6",

package.json

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -101,11 +100,11 @@ $_default: (
   $new-tokens: map.merge(
     shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
     (
-      'leading-space': if-else($exclude-hardcoded-values, null, 16px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 16px),
-      'icon-label-space': if-else($exclude-hardcoded-values, null, 8px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'icon-label-space': if(sass($exclude-hardcoded-values): null; else: 8px),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 8px),
+        if(sass($exclude-hardcoded-values): null; else: 8px),
     )
   );
 

tokens/_md-comp-assist-chip.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -94,16 +93,16 @@ $_default: (
     (
       // b/198759625 - Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'leading-space': if-else($exclude-hardcoded-values, null, 24px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 24px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 24px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       'with-leading-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       // go/keep-sorted end
     )
   );

tokens/_md-comp-elevated-button.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -94,16 +93,16 @@ $_default: (
     (
       // b/198759625 - Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'leading-space': if-else($exclude-hardcoded-values, null, 24px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 24px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 24px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       'with-leading-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       // go/keep-sorted end
     )
   );

tokens/_md-comp-filled-button.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -134,14 +133,14 @@ $_default: (
     // go/keep-sorted start
     'active-indicator-color': map.get($text-field, 'active-indicator-color'),
     'active-indicator-height': map.get($text-field, 'active-indicator-height'),
-    'bottom-space': if-else($exclude-hardcoded-values, null, 16px),
+    'bottom-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'container-color': map.get($text-field, 'container-color'),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-font': map.get($text-field, 'input-text-font'),
     'content-line-height': map.get($text-field, 'input-text-line-height'),
     'content-size': map.get($text-field, 'input-text-size'),
-    'content-space': if-else($exclude-hardcoded-values, null, 16px),
+    'content-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'content-weight': map.get($text-field, 'input-text-weight'),
     'disabled-active-indicator-color':
       map.get($text-field, 'disabled-active-indicator-color'),
@@ -212,7 +211,7 @@ $_default: (
     'focus-active-indicator-color':
       map.get($text-field, 'focus-active-indicator-color'),
     // TODO(b/259455114): remove when focus tokens update to 3px
-    'focus-active-indicator-height': if-else($exclude-hardcoded-values, null, 3px),
+    'focus-active-indicator-height': if(sass($exclude-hardcoded-values): null; else: 3px),
     'focus-content-color': map.get($text-field, 'focus-input-text-color'),
     'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),
     'focus-leading-content-color':
@@ -246,25 +245,25 @@ $_default: (
     'label-text-size': map.get($text-field, 'label-text-size'),
     'label-text-weight': map.get($text-field, 'label-text-weight'),
     'leading-content-color': map.get($text-field, 'leading-icon-color'),
-    'leading-space': if-else($exclude-hardcoded-values, null, 16px),
+    'leading-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'supporting-text-color': map.get($text-field, 'supporting-text-color'),
     'supporting-text-font': map.get($text-field, 'supporting-text-font'),
-    'supporting-text-leading-space': if-else($exclude-hardcoded-values, null, 16px),
+    'supporting-text-leading-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'supporting-text-line-height':
       map.get($text-field, 'supporting-text-line-height'),
     'supporting-text-size': map.get($text-field, 'supporting-text-size'),
-    'supporting-text-top-space': if-else($exclude-hardcoded-values, null, 4px),
-    'supporting-text-trailing-space': if-else($exclude-hardcoded-values, null, 16px),
+    'supporting-text-top-space': if(sass($exclude-hardcoded-values): null; else: 4px),
+    'supporting-text-trailing-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'supporting-text-weight': map.get($text-field, 'supporting-text-weight'),
-    'top-space': if-else($exclude-hardcoded-values, null, 16px),
+    'top-space': if(sass($exclude-hardcoded-values): null; else: 16px),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
-    'trailing-space': if-else($exclude-hardcoded-values, null, 16px),
-    'with-label-bottom-space': if-else($exclude-hardcoded-values, null, 8px),
-    'with-label-top-space': if-else($exclude-hardcoded-values, null, 8px),
+    'trailing-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+    'with-label-bottom-space': if(sass($exclude-hardcoded-values): null; else: 8px),
+    'with-label-top-space': if(sass($exclude-hardcoded-values): null; else: 8px),
     'with-leading-content-leading-space':
-      if-else($exclude-hardcoded-values, null, 12px),
+      if(sass($exclude-hardcoded-values): null; else: 12px),
     'with-trailing-content-trailing-space':
-      if-else($exclude-hardcoded-values, null, 12px),
+      if(sass($exclude-hardcoded-values): null; else: 12px),
     // go/keep-sorted end
   );
 

tokens/_md-comp-filled-field.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -150,7 +149,7 @@ $_default: (
     // go/keep-sorted start
     // TODO(b/259455114): remove when focus tokens update to 3px
     'text-field-focus-active-indicator-height':
-      if-else($exclude-hardcoded-values, null, 3px),
+      if(sass($exclude-hardcoded-values): null; else: 3px),
     // go/keep-sorted end
   );
 }

tokens/_md-comp-filled-select.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -147,23 +146,23 @@ $_default: (
   $new-tokens: map.merge(
     shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
     (
-      'icon-input-space': if-else($exclude-hardcoded-values, null, 16px),
-      'leading-space': if-else($exclude-hardcoded-values, null, 16px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 16px),
-      'top-space': if-else($exclude-hardcoded-values, null, 16px),
-      'bottom-space': if-else($exclude-hardcoded-values, null, 16px),
+      'icon-input-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'top-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'bottom-space': if(sass($exclude-hardcoded-values): null; else: 16px),
       'input-text-prefix-trailing-space':
-        if-else($exclude-hardcoded-values, null, 2px),
+        if(sass($exclude-hardcoded-values): null; else: 2px),
       'input-text-suffix-leading-space':
-        if-else($exclude-hardcoded-values, null, 2px),
-      'with-label-top-space': if-else($exclude-hardcoded-values, null, 8px),
-      'with-label-bottom-space': if-else($exclude-hardcoded-values, null, 8px),
+        if(sass($exclude-hardcoded-values): null; else: 2px),
+      'with-label-top-space': if(sass($exclude-hardcoded-values): null; else: 8px),
+      'with-label-bottom-space': if(sass($exclude-hardcoded-values): null; else: 8px),
       // TODO(b/270705687): remove when focus-caret-color token added
       'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 12px),
+        if(sass($exclude-hardcoded-values): null; else: 12px),
       'with-trailing-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 12px),
+        if(sass($exclude-hardcoded-values): null; else: 12px),
     )
   );
 
@@ -178,7 +177,7 @@ $_default: (
     $tokens,
     (
       // TODO(b/259455114): remove when focus tokens update to 3px
-      'focus-active-indicator-height': if-else($exclude-hardcoded-values, null, 3px)
+      'focus-active-indicator-height': if(sass($exclude-hardcoded-values): null; else: 3px)
     )
   );
 

tokens/_md-comp-filled-text-field.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -94,16 +93,16 @@ $_default: (
     (
       // b/198759625 - Remove once spacing tokens are formally added
       // go/keep-sorted start
-      'leading-space': if-else($exclude-hardcoded-values, null, 24px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 24px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 24px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       'with-leading-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 24px),
+        if(sass($exclude-hardcoded-values): null; else: 24px),
       'with-trailing-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 16px),
+        if(sass($exclude-hardcoded-values): null; else: 16px),
       // go/keep-sorted end
     )
   );

tokens/_md-comp-filled-tonal-button.scss

@@ -7,7 +7,6 @@
 @use 'sass:map';
 @use 'sass:string';
 // go/keep-sorted end
-@use 'utils' as *;
 // go/keep-sorted start
 @use 'internal/shape';
 @use 'internal/validate';
@@ -143,13 +142,13 @@ $_default: (
   $new-tokens: map.merge(
     shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
     (
-      'leading-space': if-else($exclude-hardcoded-values, null, 16px),
-      'trailing-space': if-else($exclude-hardcoded-values, null, 16px),
-      'icon-label-space': if-else($exclude-hardcoded-values, null, 8px),
+      'leading-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'trailing-space': if(sass($exclude-hardcoded-values): null; else: 16px),
+      'icon-label-space': if(sass($exclude-hardcoded-values): null; else: 8px),
       'with-leading-icon-leading-space':
-        if-else($exclude-hardcoded-values, null, 8px),
+        if(sass($exclude-hardcoded-values): null; else: 8px),
       'with-trailing-icon-trailing-space':
-        if-else($exclude-hardcoded-values, null, 8px),
+        if(sass($exclude-hardcoded-values): null; else: 8px),
     )
   );