From 0f9206cdc58cbe1cfba242a8d38beb32c89da9f9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 4 Nov 2024 14:42:19 +0100
Subject: [PATCH] fix(material/form-field): incorrect form field border radius
 with system-level themes

Fixes that the form field had the wrong border radius when using a system-level theme in M3.
---
 .../core/tokens/_token-definition.scss        |  7 ++++---
 .../tokens/m3/mdc/_filled-text-field.scss     | 20 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/material/core/tokens/_token-definition.scss b/src/material/core/tokens/_token-definition.scss
index 1208b89d9af9..aa4803556ca6 100644
--- a/src/material/core/tokens/_token-definition.scss
+++ b/src/material/core/tokens/_token-definition.scss
@@ -124,11 +124,12 @@ $_system-fallbacks: null;
 /// Maps the values in a map to new values using the given mapping function
 /// @param {Map} $map The maps whose values will be mapped to new values.
 /// @param {Function} $fn The value mapping function.
-/// @param {Map} A new map with its values updated using the mapping function.
-@function map-values($map, $fn) {
+/// @param {ArgList} $args Additional arguments to pass to the mapping function.
+/// @return {Map} A new map with its values updated using the mapping function.
+@function map-values($map, $fn, $args...) {
   $result: ();
   @each $key, $value in $map {
-    $result: map.set($result, $key, meta.call($fn, $value));
+    $result: map.set($result, $key, meta.call($fn, $value, $args...));
   }
   @return $result;
 }
diff --git a/src/material/core/tokens/m3/mdc/_filled-text-field.scss b/src/material/core/tokens/m3/mdc/_filled-text-field.scss
index f098158e3783..7311e947fddc 100644
--- a/src/material/core/tokens/m3/mdc/_filled-text-field.scss
+++ b/src/material/core/tokens/m3/mdc/_filled-text-field.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
 @use '../../token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,8 +33,8 @@ $prefix: (mdc, filled-text-field);
   );
 
   @return token-definition.namespace-tokens($prefix, (
-    _fix-tokens($mdc-tokens),
-    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+    _fix-tokens($mdc-tokens, $systems),
+    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems)
   ), $token-slots);
 }
 
@@ -43,8 +42,9 @@ $prefix: (mdc, filled-text-field);
 /// Fixes inconsistent values in the filled text field tokens so that they can produce valid
 /// styles.
 /// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @param {Map} $systems The MDC system tokens
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-tokens($initial-tokens) {
+@function _fix-tokens($initial-tokens, $systems) {
   // Need to get the hardcoded values, because they include opacities that are used for the disabled
   // state.
   $hardcoded-tokens: token-definition.get-mdc-tokens('filled-text-field', (), false);
@@ -80,13 +80,11 @@ $prefix: (mdc, filled-text-field);
     )
   ));
 
-  $container-shape: map.get($tokens, container-shape);
-
-  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
-  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
-  // token slot in M2.
-  @if meta.type-of($container-shape) == 'list' {
-    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  // The system tokens have this set as `corner-extra-small-top` which assumes that the value will
+  // be set as a `border-radius`, however we set it as `border-top-left-radius` and
+  // `border-top-right-radius`. Changing it at this point will be breaking so instead we remap it.
+  @if (map.get($tokens, container-shape)) {
+    $tokens: map.set($tokens, container-shape, map.get($systems, md-sys-shape, corner-extra-small));
   }
 
   @return $tokens;