From f0a75f02d3ad4c214e8905b024d662d9adccd001 Mon Sep 17 00:00:00 2001
From: Lorenzo Montanari <13736036+l0ll098@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:59:40 +0200
Subject: [PATCH 1/2] fix(field): field borders now are correctly colored, even
 on Safari

TextFields and Selects on Safari were showing a dark line, even when primary color was different.
Fixes: 5668
---
 field/internal/_outlined-field.scss | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss
index 949a754b11..5220c56e2e 100644
--- a/field/internal/_outlined-field.scss
+++ b/field/internal/_outlined-field.scss
@@ -244,7 +244,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
     // States
 
-    :hover .outline {
+    :hover .outline,
+    :hover .outline-notch {
       border-color: var(--_hover-outline-color);
       color: var(--_hover-outline-color); // Needed for Firefox HCM
     }
@@ -257,7 +258,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       border-width: var(--_hover-outline-width);
     }
 
-    .focused .outline {
+    .focused .outline,
+    .focused .outline-notch{
       border-color: var(--_focus-outline-color);
       color: var(--_focus-outline-color); // Needed for Firefox HCM
     }
@@ -270,7 +272,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       border-width: var(--_focus-outline-width);
     }
 
-    .disabled .outline {
+    .disabled .outline,
+    .disabled .outline-notch {
       border-color: var(--_disabled-outline-color);
       color: var(--_disabled-outline-color); // Needed for Firefox HCM
     }
@@ -289,18 +292,21 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       border-width: var(--_disabled-outline-width);
     }
 
-    .error .outline {
+    .error .outline,
+    .error .outline-notch {
       border-color: var(--_error-outline-color);
       color: var(--_error-outline-color); // Needed for Firefox HCM
     }
 
-    .error:hover .outline {
+    .error:hover .outline,
+    .error:hover .outline-notch {
       border-color: var(--_error-hover-outline-color);
       // Needed for Firefox HCM
       color: var(--_error-hover-outline-color);
     }
 
-    .error.focused .outline {
+    .error.focused .outline,
+    .error.focused .outline-notch {
       border-color: var(--_error-focus-outline-color);
       // Needed for Firefox HCM
       color: var(--_error-focus-outline-color);

From edada0b867c739f317bd82687825d47a7ff5a3a9 Mon Sep 17 00:00:00 2001
From: Lorenzo Montanari <13736036+l0ll098@users.noreply.github.com>
Date: Wed, 23 Oct 2024 10:36:38 +0200
Subject: [PATCH 2/2] fix: fixed dark border on Fields with error attribute on
 Safari

---
 field/internal/_outlined-field.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/field/internal/_outlined-field.scss b/field/internal/_outlined-field.scss
index 5220c56e2e..029a0b27b3 100644
--- a/field/internal/_outlined-field.scss
+++ b/field/internal/_outlined-field.scss
@@ -130,6 +130,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     .outline-notch {
       align-items: flex-start;
       border: inherit;
+      border-color: inherit !important;
       display: flex;
       margin-inline-start: calc(-1 * var(--_outline-label-padding));
       margin-inline-end: var(--_outline-label-padding);
@@ -259,7 +260,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     }
 
     .focused .outline,
-    .focused .outline-notch{
+    .focused .outline-notch {
       border-color: var(--_focus-outline-color);
       color: var(--_focus-outline-color); // Needed for Firefox HCM
     }