import { Meta } from '@storybook/addon-docs/blocks';
import styled from 'styled-components';
import { getTokenVar, gradientBorder, getTokenVar as t } from '@preply/ds-web-core';
import { color, sizing } from '@preply/ds-core';
import { LayoutFlex } from '@preply/ds-web-lib';

export const GradientBorder = styled.div`
    width: ${t(sizing['48'])};
    height: ${t(sizing['48'])};
    background: ${t(color.background.primary)};
    border-radius: ${({ $radius = 0 }) => $radius};
    ${({ $borderWidth = 1 }) =>
        gradientBorder($borderWidth, getTokenVar(color.border.ai.button.linearGradient))}
`;

<Meta
    title="Utilities/Gradient borders"
    summary="Utilities to create gradient borders with variable border width and radius."
/>

# Gradient Borders

<LayoutFlex padding={['32', '0']} gap="8" direction="column">
    <LayoutFlex gap="8">
        <GradientBorder />
        <GradientBorder $radius="8px" />
        <GradientBorder $radius="100%" />
    </LayoutFlex>
    <LayoutFlex gap="8">
        <GradientBorder $borderWidth="2px" />
        <GradientBorder $borderWidth="2px" $radius="8px" />
        <GradientBorder $borderWidth="2px" $radius="100%" />
    </LayoutFlex>
    <LayoutFlex gap="8">
        <GradientBorder $borderWidth="4px" />
        <GradientBorder $borderWidth="4px" $radius="8px" />
        <GradientBorder $borderWidth="4px" $radius="100%" />
    </LayoutFlex>
</LayoutFlex>

The gradient border utility allows you to create gradient borders with variable border width and radius.<br/>
It applies a pseudo-element (`::before`) with a gradient background that is masked to only show in the border area using CSS masking.

Based on [this CSS technique](https://dev.to/afif/border-with-gradient-and-radius-387f).

## Usage

```css
.gradient-border(
    2px, /* border width */
    linear-gradient(red, blue), /* border color */
    papayawhip /* optional fallback color for browsers that don't support CSS masking */
);
```

## Examples

### LESS

```css
@import '~@preply/ds-web-core/dist/gradient-border/mixin.less';
@import '~@preply/ds-web-core/dist/generated/tokens.less';

.my-element {
    .gradient-border(@action-base-borderWidth, @color-border-ai-button-linearGradient);
}
```

### SCSS

```css
@use '~@preply/ds-web-core/dist/gradient-border/mixin.scss' as *;
@use '~@preply/ds-web-core/dist/generated/tokens.scss' as *;

.my-element {
    @include gradient-border($action-base-borderWidth, $color-border-ai-button-linearGradient);
}
```

### JavaScript (styled-components)

```tsx
import styled from 'styled-components';
import { gradientBorder, getTokenVar as t } from '@preply/ds-web-core';
import { color } from '@preply/ds-core';

const MyElement = styled.div`
    ${gradientBorder(t(action.base.borderWidth), t(color.border.ai.button.linearGradient))}
`;
```