From 3c9ac05bf744747e059e1b995903e16d4b1b74cd Mon Sep 17 00:00:00 2001
From: Nikolai Lopin <code@lopin.me>
Date: Wed, 27 Sep 2023 19:45:07 +0200
Subject: [PATCH] feat(text): change default color to "inherit"

BREAKING CHANGE
Text component will inherit the color from the surrounding context by default. In most of the cases it will be the primary color.

New `primary` prop is added to enforce the primary text color
---
 src/components/Text/Text.tsx                | 13 +++++++++++--
 src/components/Text/docs/Text.stories.tsx   |  6 ++++++
 src/components/Text/docs/Text.storybook.mdx |  3 ++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 160521afb..7c8ecb049 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -29,6 +29,11 @@ interface TextProps
      * @default normal
      */
     fontWeight?: ResponsiveValue<'normal' | 'semibold' | 'bold'>;
+    /**
+     * Enforce primary color
+     */
+
+    primary?: boolean;
     /**
      * Adjust color to indicate secondary information
      * @deprecated use `secondary` instead
@@ -45,7 +50,7 @@ interface TextProps
 }
 
 function determineTextColor(props: TextProps) {
-    const { weak, secondary, disabled } = props;
+    const { primary, weak, secondary, disabled } = props;
     if (weak !== undefined) {
         deprecatedProperty('Text', weak, 'weak', 'secondary', 'Rename `weak` to `secondary` to remove the warning.');
     }
@@ -58,7 +63,11 @@ function determineTextColor(props: TextProps) {
         return getSemanticValue('foreground-neutral-emphasized');
     }
 
-    return getSemanticValue('foreground-primary');
+    if (primary) {
+        return getSemanticValue('foreground-primary');
+    }
+
+    return 'inherit';
 }
 
 const Text = styled.span.attrs({ theme })<TextProps>`
diff --git a/src/components/Text/docs/Text.stories.tsx b/src/components/Text/docs/Text.stories.tsx
index e94e55d71..900231974 100644
--- a/src/components/Text/docs/Text.stories.tsx
+++ b/src/components/Text/docs/Text.stories.tsx
@@ -68,6 +68,12 @@ type Story = StoryObj<typeof Text>;
 
 export const Default: Story = {};
 
+export const Primary: Story = {
+    args: {
+        primary: true
+    }
+};
+
 export const Secondary: Story = {
     args: {
         secondary: true
diff --git a/src/components/Text/docs/Text.storybook.mdx b/src/components/Text/docs/Text.storybook.mdx
index 240aef320..f23f301d0 100644
--- a/src/components/Text/docs/Text.storybook.mdx
+++ b/src/components/Text/docs/Text.storybook.mdx
@@ -17,7 +17,8 @@ The Text component is a wrapper component that will apply typography styles to t
 
 ## Usage
 
-By default, `Text` uses the primary color, which is the color for most interface text, whether body or headlines.
+By default, `Text` uses the color of the container, which is the primary color in most of the cases.
+This approach allows the component to adapt to the container needs. Use the `primary` property in order to force the primary color of the theme.
 
 Use the `secondary` color for supplemental information with diminished contrast (often, the “gray text”).
 Like form microcopy, captions, helper text, and other medium emphasized text elements.