Fix color

cengage · Dec 4, 2023 · 6738191 · 6738191
1 parent 18906b2
commit 6738191
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/packages/react-magma-dom/src/components/Heading/Heading.test.js b/packages/react-magma-dom/src/components/Heading/Heading.test.js
@@ -259,7 +259,7 @@ describe('Heading', () => {
       );
       const heading = getByText(headingText);
 
-      expect(heading).toHaveStyleRule('color', magma.colors.neutral700);
+      expect(heading).toHaveStyleRule('color', magma.colors.primary600);
       expect(heading).toHaveStyleRule(
         'font-family',
         magma.headingExpressiveFont

diff --git a/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx b/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
@@ -12,66 +12,66 @@ export const Default = () => {
   return (
     <>
       <Paragraph visualStyle={TypographyVisualStyle.bodyLarge}>
-        Body Large
+        Paragraph Body Large
       </Paragraph>
       <Paragraph visualStyle={TypographyVisualStyle.bodyMedium}>
-        Body Medium
+        Paragraph Body Medium
       </Paragraph>
       <Paragraph visualStyle={TypographyVisualStyle.bodySmall}>
-        Body Small
+        Paragraph Body Small
       </Paragraph>
       <Paragraph visualStyle={TypographyVisualStyle.bodyXSmall}>
-        Body X-Small
+        Paragraph Body X-Small
       </Paragraph>
 
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyLarge}
         contextVariant={TypographyContextVariant.narrative}
       >
-        Narrative Large
+        Paragraph Narrative Large
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyMedium}
         contextVariant={TypographyContextVariant.narrative}
       >
-        Narrative Medium
+        Paragraph Narrative Medium
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodySmall}
         contextVariant={TypographyContextVariant.narrative}
       >
-        Narrative Small
+        Paragraph Narrative Small
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyXSmall}
         contextVariant={TypographyContextVariant.narrative}
       >
-        Narrative X-Small
+        Paragraph Narrative X-Small
       </Paragraph>
 
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyLarge}
         contextVariant={TypographyContextVariant.expressive}
       >
-        Expressive Large
+        Paragraph Expressive Large
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyMedium}
         contextVariant={TypographyContextVariant.expressive}
       >
-        Expressive Medium
+        Paragraph Expressive Medium
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodySmall}
         contextVariant={TypographyContextVariant.expressive}
       >
-        Expressive Small
+        Paragraph Expressive Small
       </Paragraph>
       <Paragraph
         visualStyle={TypographyVisualStyle.bodyXSmall}
         contextVariant={TypographyContextVariant.expressive}
       >
-        Expressive X-Small
+        Paragraph Expressive X-Small
       </Paragraph>
     </>
   );

diff --git a/packages/react-magma-dom/src/components/Typography/index.tsx b/packages/react-magma-dom/src/components/Typography/index.tsx
@@ -61,6 +61,8 @@ export function getBodyFontFamily(props) {
 export const colorStyles = props => css`
   color: ${props.isInverse
     ? props.theme.colors.neutral100
+    : props.contextVariant === 'expressive'
+    ? props.theme.colors.primary600
     : props.theme.colors.neutral700};
 
   ${props.color === TypographyColor.danger &&
@@ -124,6 +126,7 @@ export const paragraphLargeStyles = props => css`
 
   ${props.contextVariant === TypographyContextVariant.expressive &&
   css`
+    color: ${props.theme.colors.neutral700};
     font-size: ${props.theme.typographyExpressiveVisualStyles.bodyLarge.mobile
       .fontSize};
     line-height: ${props.theme.typographyExpressiveVisualStyles.bodyLarge.mobile