From 1b8b2aba2e2849f12a422be7e071319901ad6d38 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Wed, 28 Jul 2021 09:16:09 -0400
Subject: [PATCH] [TextField] Fix disabled text color in Safari

---
 UNRELEASED.md                           | 2 ++
 src/components/TextField/TextField.scss | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 0b9c30dd843..0bf87a94a50 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -11,6 +11,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed a bug `TextField` where Safari would render the incorrect text color ([#4344](https://github.com/Shopify/polaris-react/pull/4344))
+
 ### Documentation
 
 ### Development workflow
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index c63647087ad..b1058a4b242 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -112,10 +112,10 @@ $stacking-order: (
   }
 
   &:disabled {
-    background: none;
-    color: currentColor;
     opacity: 1;
-    -webkit-text-fill-color: currentColor;
+    background: none;
+    color: var(--p-text-disabled);
+    -webkit-text-fill-color: var(--p-text-disabled);
   }
 
   // remove the box shadow in Firefox when the input is invalid