Skip to content

Commit

Permalink
Remove primary color from expressive body paragraph
Browse files Browse the repository at this point in the history
  • Loading branch information
@silvalaura
silvalaura committed Dec 5, 2023
1 parent 6738191 commit 6059b80
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 113 deletions.
189 changes: 92 additions & 97 deletions packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,67 +11,136 @@ import { Meta } from '@storybook/react/types-6-0';
export default {
component: Heading,
title: 'Heading',
argTypes: {
isInverse: {
control: {
type: 'boolean',
},
defaultValue: false,
},
},
} as Meta;

export const Default = () => {
export const Default = args => {
return (
<>
<Heading level={1}>Heading 1 (X-Large) - Productive</Heading>
<Heading level={2}>Heading 2 (Large) - Productive</Heading>
<Heading level={3}>Heading 3 (Medium) - Productive</Heading>
<Heading level={4}>Heading 4 (Small) - Productive</Heading>
<Heading level={5}>Heading 5 (X-Small) - Productive</Heading>
<Heading level={6}>Heading 6 (2X-Small) - Productive</Heading>
<Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
<Heading level={1} {...args}>
Heading 1 (X-Large) - Productive
</Heading>
<Heading level={2} {...args}>
Heading 2 (Large) - Productive
</Heading>
<Heading level={3} {...args}>
Heading 3 (Medium) - Productive
</Heading>
<Heading level={4} {...args}>
Heading 4 (Small) - Productive
</Heading>
<Heading level={5} {...args}>
Heading 5 (X-Small) - Productive
</Heading>
<Heading level={6} {...args}>
Heading 6 (2X-Small) - Productive
</Heading>
<br />
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
visualStyle={TypographyVisualStyle.heading2XLarge}
{...args}
>
Heading 1 (2X-Large) - Expressive
</Heading>
<Heading level={1} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 1 (X-Large) - Expressive
</Heading>
<Heading level={2} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={2}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 2 (Large) - Expressive
</Heading>
<Heading level={3} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={3}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 3 (Medium) - Expressive
</Heading>
<Heading level={4} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={4}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 4 (Small) - Expressive
</Heading>
<Heading level={5} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={5}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 5 (X-Small) - Expressive
</Heading>
<Heading level={6} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={6}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 6 (2X-Small) - Expressive
</Heading>
<br />
<Heading level={1} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={1}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 1 (X-Large) - Narrative
</Heading>
<Heading level={2} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={2}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 2 (Large) - Narrative
</Heading>
<Heading level={3} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={3}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 3 (Medium) - Narrative
</Heading>
<Heading level={4} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={4}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 4 (Small) - Narrative
</Heading>
<Heading level={5} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={5}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 5 (X-Small) - Narrative
</Heading>
<Heading level={6} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={6}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 6 (2X-Small) - Narrative
</Heading>
</>
</Card>
);
};

export const Colors = () => {
export const Colors = args => {
return (
<>
<Card style={{ padding: '0 24px' }}>
Expand Down Expand Up @@ -104,78 +173,4 @@ export const Colors = () => {
);
};

export const Inverse = () => {
return (
<Card isInverse style={{ padding: '0 24px' }}>
<Heading level={1} isInverse>
Heading 1 (X-Large) - Productive
</Heading>
<Heading level={2} isInverse>
Heading 2 (Large) - Productive
</Heading>
<Heading level={3} isInverse>
Heading 3 (Medium) - Productive
</Heading>
<Heading level={4} isInverse>
Heading 4 (Small) - Productive
</Heading>
<Heading level={5} isInverse>
Heading 5 (X-Small) - Productive
</Heading>
<Heading level={6} isInverse>
Heading 6 (2X-Small) - Productive
</Heading>
<br />
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
visualStyle={TypographyVisualStyle.heading2XLarge}
isInverse
>
Heading 1 (2X-Large) - Expressive
</Heading>
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 1 (X-Large) - Expressive
</Heading>
<Heading
level={2}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 2 (Large) - Expressive
</Heading>
<Heading
level={3}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 3 (Medium) - Expressive
</Heading>
<Heading
level={4}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 4 (Small) - Expressive
</Heading>
<Heading
level={5}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 5 (X-Small) - Expressive
</Heading>
<Heading
level={6}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 6 (2X-Small) - Expressive
</Heading>
</Card>
);
};
Colors.parameters = { controls: { exclude: ['isInverse'] } };
31 changes: 24 additions & 7 deletions packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,94 @@ import React from 'react';
import { Paragraph } from '.';
import { TypographyContextVariant, TypographyVisualStyle } from '../Typography';
import { Meta } from '@storybook/react/types-6-0';
import { Card } from '../..';

export default {
component: Paragraph,
title: 'Paragraph',
argTypes: {
isInverse: {
control: {
type: 'boolean',
},
defaultValue: false,
},
},
} as Meta;

export const Default = () => {
export const Default = args => {
return (
<>
<Paragraph visualStyle={TypographyVisualStyle.bodyLarge}>
<Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
<Paragraph visualStyle={TypographyVisualStyle.bodyLarge} {...args}>
Paragraph Body Large
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodyMedium}>
<Paragraph visualStyle={TypographyVisualStyle.bodyMedium} {...args}>
Paragraph Body Medium
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodySmall}>
<Paragraph visualStyle={TypographyVisualStyle.bodySmall} {...args}>
Paragraph Body Small
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodyXSmall}>
<Paragraph visualStyle={TypographyVisualStyle.bodyXSmall} {...args}>
Paragraph Body X-Small
</Paragraph>

<Paragraph
visualStyle={TypographyVisualStyle.bodyLarge}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Paragraph Narrative Large
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyMedium}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Paragraph Narrative Medium
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodySmall}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Paragraph Narrative Small
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyXSmall}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Paragraph Narrative X-Small
</Paragraph>

<Paragraph
visualStyle={TypographyVisualStyle.bodyLarge}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Paragraph Expressive Large
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyMedium}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Paragraph Expressive Medium
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodySmall}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Paragraph Expressive Small
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyXSmall}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Paragraph Expressive X-Small
</Paragraph>
</>
</Card>
);
};
28 changes: 19 additions & 9 deletions packages/react-magma-dom/src/components/Typography/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,23 @@ 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};
export function getBaseFontColor(props, isHeading = false) {
if (props.isInverse) {
return props.theme.colors.neutral100;
}

// Expressive headings use primary color
if (
props.contextVariant === TypographyContextVariant.expressive &&
isHeading
) {
return props.theme.colors.primary600;
}
return props.theme.colors.neutral700;
}

export const colorStyles = (props, isHeading: boolean) => css`
color: ${getBaseFontColor(props, isHeading)};
${props.color === TypographyColor.danger &&
!props.isInverse &&
Expand Down Expand Up @@ -104,7 +115,7 @@ ${props.color === TypographyColor.subdued &&
`;

const baseParagraphStyles = props => css`
${colorStyles(props)}
${colorStyles(props, false)}
font-family: ${getBodyFontFamily(props)};
font-weight: normal;
`;
Expand All @@ -126,7 +137,6 @@ 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
Expand Down Expand Up @@ -221,7 +231,7 @@ const baseHeadingStyles = props => css`
transition: border 0.1s linear;
}
${colorStyles(props)}
${colorStyles(props, true)}
`;

export const heading2XLargeStyles = props => css`
Expand Down

0 comments on commit 6059b80

Please sign in to comment.