# @terra-dev/styled-neumorphism

> Implementation of for the styled-components.

Latest version **0.20.1** (published 2021-07-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @terra-dev/styled-neumorphism
pnpm add @terra-dev/styled-neumorphism
yarn add @terra-dev/styled-neumorphism
bun add @terra-dev/styled-neumorphism
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.20.1 |
| Published | 2021-07-15 |
| First published | 2021-03-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 48.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 99 |
| Author | Ian |
| Maintainers | ssen |

## Links

- npm: https://www.npmjs.com/package/@terra-dev/styled-neumorphism
- Repository: https://github.com/Anchor-Protocol/anchor-web-app
- Homepage: https://github.com/Anchor-Protocol/anchor-web-app/tree/master/packages/src/@terra-dev/styled-neumorphism
- Issues: https://github.com/Anchor-Protocol/anchor-web-app/issues
- npm.io page: https://npm.io/package/@terra-dev/styled-neumorphism

## Dependencies (1)

- [color](https://npm.io/package/color.md) ^3.1.3

## Recent versions

- 0.20.1 (latest) — 2021-07-15
- 0.16.0-alpha.4 (canary) — 2021-06-13
- 0.20.0 — 2021-07-14
- 0.19.0 — 2021-07-09
- 0.18.0 — 2021-06-29
- 0.17.1 — 2021-06-28
- 0.17.0 — 2021-06-28
- 0.16.0 — 2021-06-21
- 0.16.0-alpha.3 — 2021-06-13
- 0.16.0-alpha.2 — 2021-06-13
- 0.16.0-alpha.1 — 2021-06-13
- 0.15.0 — 2021-06-01
- 0.14.0 — 2021-05-30
- 0.13.1 — 2021-05-15
- 0.13.0 — 2021-05-13
- … 15 more at https://npm.io/package/@terra-dev/styled-neumorphism/versions

## README

# Styled-components extension for neumorphism

Implementation of <https://neumorphism.io/#7380c9> for the styled-components.

```js
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>

<!-- source __stories__/*.stories.tsx -->

[\_\_stories\_\_/styled-neumorphism.stories.tsx](__stories__/styled-neumorphism.stories.tsx)

```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,
    },
  },
};
```

<!-- /source -->

---
_Source: https://npm.io/package/@terra-dev/styled-neumorphism · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._