1 files changed, 173 insertions, 0 deletions
diff --git a/smoke/docs-main/src/components/Button.astro b/smoke/docs-main/src/components/Button.astro
new file mode 100644
index 000000000..e1bddd915
--- /dev/null
+++ b/smoke/docs-main/src/components/Button.astro
@@ -0,0 +1,173 @@
+---
+const { class: className = '', style, href } = Astro.props;
+// Wrap in <span> because Houdini is disabled for a[href] for security
+
+const { variant = 'primary' } = Astro.props;
+const { before, after } = Astro.slots;
+---
+
+
+
+<span class={`link pixel variant-${variant} ${before ? 'has-before' : ''} ${after ? 'has-after' : ''} ${className}`.trim()} {style}>
+    <a {href}>
+        <slot name="before" />
+        <span><slot /></span>
+        <slot name="after" />
+    </a>
+</span>
+
+<style>
+    .pixel {
+        --link-color-stop-a: #205eff;
+        --link-color-stop-b: #c238bd;
+
+        --border-radius: 8;
+        --pixel-size: 4;
+        --background: var(--gradient-pop-1);
+        position: relative;
+        border-radius: calc(var(--border-radius) * 1px);
+    }
+    .pixel::before {
+        content: '';
+        position: absolute;
+        top: calc(var(--pixel-size) * 1px);
+        right: 0;
+        bottom: calc(var(--pixel-size) * 1px);
+        left: 0;
+        background: var(--background);
+        z-index: -1;
+    }
+    .pixel::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: calc(var(--pixel-size) * 1px);
+        bottom: 0;
+        left: calc(var(--pixel-size) * 1px);
+        background: var(--background);
+        z-index: -1;
+    }
+    .pixel.variant-outline {
+        background: rgba(255, 255, 255, 0);
+        border-radius: 0;
+    }
+    .pixel.variant-outline::before {
+        background: rgba(255, 255, 255, 0);
+        border: calc(var(--pixel-size) * 1px) solid var(--background);
+        border-top: 0;
+        border-bottom: 0;
+    }
+    .pixel.variant-outline::after {
+        background: rgba(255, 255, 255, 0);
+        border: calc(var(--pixel-size) * 1px) solid var(--background);
+        border-right: 0;
+        border-left: 0;
+    }
+    @supports (background: paint(pixel)) {
+        :global(.js) .pixel {
+            background: none !important;
+        }
+        :global(.js) .pixel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: block;
+            z-index: -1;
+            overflow: hidden;
+            border-radius: 0;
+            background: var(--background);
+            -webkit-mask-image: paint(pixel);
+            mask-image: paint(pixel);
+        }
+       :global(.js) .pixel::after {
+            content: none;
+        }
+    }
+    .link {
+        --border-radius: 8;
+        --duration: 200ms;
+        --delay: 30ms;
+        --background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+        display: flex;
+        color: white;
+        font-family: var(--font-display);
+        font-size: 1.25rem;
+        width: max-content;
+        transition-property: transform, --link-color-stop-a, --link-color-stop-b;
+        transition-duration: var(--duration);
+        transition-delay: var(--delay);
+        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .link:hover,
+    .link:focus-within {
+        transform: translateY(calc(var(--pixel-size) * -0.5px));
+    }
+    .link:active {
+        transform: translateY(0);
+    }
+    .has-before a :first-child {
+        margin-left: -1rem;
+        margin-right: 0.25rem;
+    }
+    .has-before a :last-child {
+        margin-left: 0.25rem;
+        margin-right: -1rem;
+    }
+    a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.67rem 1.25rem;
+        width: 100%;
+        height: 100%;
+        text-decoration: none;
+        color: inherit !important;
+    }
+    a > :global(* + *) {
+        margin-left: 0.25rem;
+    }
+
+    .variant-primary {
+        --variant: primary;
+        --background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+    }
+    .variant-primary:hover,
+    .variant-primary:focus-within {
+        --link-color-stop-a: #6D39FF;
+        --link-color-stop-b: #AF43FF;
+    }
+    .variant-primary:active {
+        --link-color-stop-a: #5F31E1;
+        --link-color-stop-b: #A740F3;
+    }
+
+    .variant-outline {
+        --variant: outline;
+        --background: none;
+        color: var(--background);
+    }
+    .variant-outline > a::before {
+        position: absolute;
+        top: 0;
+        right: calc(var(--pixel-size) * 1px);
+        bottom: calc(var(--pixel-size) * 1px);
+        left: calc(var(--pixel-size) * 1px);
+        content: "";
+        display: block;
+        transform-origin: bottom center;
+        background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0));
+        opacity: 0.3;
+        transform: scaleY(0);
+        transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .variant-outline:hover > a::before,
+    .variant-outline:focus-within > a::before {
+        transform: scaleY(1);
+    }
+    .variant-outline:active > a::before {
+        transform: scaleY(1);
+    }
+</style>