Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revised dark mode box shadow for cards #2866

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
+29 −19
Open

Revised dark mode box shadow for cards #2866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
433daee
color mode again
j10sanders Mar 15, 2024
0818689
eslint disable
j10sanders Mar 18, 2024
5e15efb
remove comment
j10sanders Mar 18, 2024
b65748c
Merge branch 'main' into js-card-color-modes
j10sanders Mar 18, 2024
9ca9b27
optional with default light
j10sanders Mar 20, 2024
a1da115
Merge branch 'js-card-color-modes' of github.com:Codecademy/gamut int…
j10sanders Mar 20, 2024
eb8aeda
apparently a monolith card passes false for shadow
j10sanders Mar 21, 2024
40c97df
Merge branch 'main' into js-card-color-modes
dreamwasp Mar 27, 2024
dc212e0
fixed variant
j10sanders Mar 28, 2024
2d4866a
working with all variants
j10sanders Apr 17, 2024
dd8e863
added to storybook
j10sanders Apr 18, 2024
85f0ecd
merge conflicts
j10sanders Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions packages/gamut/src/Card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
Background,
ColorModes,
system,
theme,
useColorModes,
variant,
Expand All @@ -12,12 +11,16 @@ import * as React from 'react';

import { Box } from '../Box';

const outlineStyles = (mode: ColorModes) => ({
boxShadow: `-5px 5px ${theme.colors['background-current']}, -5px 5px 0 1px ${theme.colors.black}`,
const outlineStyles = (mode: ColorModes, variant: boolean) => ({
boxShadow: `-5px 5px ${theme.colors['background-current']}, -5px 5px 0 1px ${
mode === 'dark' && !variant ? 'white' : theme.colors.black
}`,
'&:hover': {
transform: 'translate(4px, -4px)',
boxShadow: `-8px 8px 0 ${
mode === 'dark' ? theme.colors['background-current'] : 'currentColor'
theme.colors['background-current']
}, -8px 8px 0 1px ${
mode === 'dark' && !variant ? 'white' : theme.colors.black
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

otherwise, this looks pretty good! just more curious about the context and instructions to test.

}`,
},
});
Expand All @@ -28,23 +31,23 @@ const DynamicCardWrapper = styled(Box)<CardWrapperProps>(
prop: 'shadow',
base: {
position: 'relative',
boxShadow: `0px 0px 0 currentColor`,
boxShadow: `0px 0px 0 ${theme.colors.navy}`,
transition: 'box-shadow 200ms ease, transform 200ms ease',
},
variants: {
small: {
'&:hover': {
transform: 'translate(2px, -2px)',
boxShadow: `-4px 4px 0 currentColor`,
boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
},
},
medium: {
'&:hover': {
transform: 'translate(4px, -4px)',
boxShadow: `-8px 8px 0 currentColor`,
boxShadow: `-8px 8px 0 ${theme.colors.navy}, -8px 8px 0 1px white`,
},
},
outline: outlineStyles(mode),
outline: outlineStyles(mode, false),
},
})(props)
);
Expand All @@ -54,23 +57,23 @@ const shadowVariants = (mode: ColorModes) =>
prop: 'shadow',
base: {
position: 'relative',
boxShadow: `0px 0px 0 currentColor`,
boxShadow: `0px 0px 0 ${theme.colors.navy}`,
transition: 'box-shadow 200ms ease, transform 200ms ease',
},
variants: {
small: {
'&:hover': {
transform: 'translate(2px, -2px)',
boxShadow: `-4px 4px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
},
},
medium: {
'&:hover': {
transform: 'translate(4px, -4px)',
boxShadow: `-8px 8px 0 ${mode === 'dark' ? 'white' : 'currentColor'}`,
boxShadow: `-4px 4px 0 ${theme.colors.navy}, -4px 4px 0 1px white`,
},
},
outline: outlineStyles(mode),
outline: outlineStyles(mode, true),
},
});

Expand All @@ -88,13 +91,6 @@ interface CardWrapperProps {
const CardWrapper = styled(Background)<CardWrapperProps>(
({ mode = 'light', ...props }) => ({
...shadowVariants(mode)(props),
...system.states({
outline: {
'&:hover': {
outline: '1px solid currentColor',
},
},
})(props),
})
);

Expand Down
14 changes: 14 additions & 0 deletions packages/styleguide/stories/Atoms/Card.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,20 @@ We provide 3 style variants for shadow.
</Story>
</Canvas>

Examples with variant = hyper.

<Canvas>
<Story name="SmallVariant" args={{ shadow: 'small', variant: 'hyper' }}>
{(args) => <Card {...args} />}
</Story>
<Story name="MediumVariant" args={{ shadow: 'medium', variant: 'hyper' }}>
{(args) => <Card {...args} />}
</Story>
<Story name="OutlineVariant" args={{ shadow: 'outline', variant: 'hyper' }}>
{(args) => <Card {...args} />}
</Story>
</Canvas>

### Shadow Variant "outline" with color

The outline color will inherit the color of the card.
Expand Down
Loading