@terra-dev/styled-neumorphism
v0.20.1
Published
Implementation of <https://neumorphism.io/#7380c9> for the styled-components.
Downloads
32
Readme
Styled-components extension for neumorphism
Implementation of https://neumorphism.io/#7380c9 for the styled-components.
import { flat } from '@terra-dev/styled-neumorphism';
const Section = styled.section`
${flat({
color: '#1a1d2e',
distance: 5,
intensity: 0.45,
})};
`;
Examples
https://anchor-storybook.vercel.app/?path=/story/core-neumorphism--functions
__stories__/styled-neumorphism.stories.tsx
import { concave, convex, flat, pressed } from '@terra-dev/styled-neumorphism';
import styled from 'styled-components';
export default {
title: 'core/Neumorphism',
argTypes: {
distance: {
control: {
type: 'range',
min: 0,
max: 10,
},
},
},
};
interface TemplateProps {
className?: string;
distance: number;
}
const Template = styled(({ className }: TemplateProps) => (
<div className={className}>
<section className="flat">FLAT</section>
<section className="concave">CONCAVE</section>
<section className="convex">CONVEX</section>
<section className="pressed">PRESSED</section>
</div>
))`
display: grid;
grid-template-columns: repeat(4, 150px);
grid-gap: 20px;
section {
border-radius: 20px;
padding: 20px;
text-align: center;
color: ${({ theme }) => theme.textColor};
&.flat {
${({ theme, distance = 6 }) =>
flat({
color: theme.backgroundColor,
distance,
intensity: theme.intensity,
})};
}
&.concave {
${({ theme, distance = 6 }) =>
concave({
color: theme.backgroundColor,
distance,
intensity: theme.intensity,
})};
}
&.convex {
${({ theme, distance = 6 }) =>
convex({
color: theme.backgroundColor,
distance,
intensity: theme.intensity,
})};
}
&.pressed {
${({ theme, distance = 6 }) =>
pressed({
color: theme.backgroundColor,
distance,
intensity: theme.intensity,
})};
}
}
`;
export const Functions = (props: TemplateProps) => <Template {...props} />;
Functions.args = { distance: 6 };
Functions.argTypes = {
distance: {
control: {
type: 'range',
min: 0,
max: 10,
},
},
};