feat(libs/magic-ui/rainbow-button): add component

libs/external/magic-ui/components/ui/rainbow-button.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RainbowButton } from './rainbow-button'
+
+const meta: Meta = {
+  title: 'Magic UI/Rainbow Button',
+  component: RainbowButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    children: 'Button',
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+}

libs/external/magic-ui/components/ui/rainbow-button.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@shadcn/lib/utils'
+
+import React from 'react'
+
+interface RainbowButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function RainbowButton({
+  children,
+  className,
+  ...props
+}: RainbowButtonProps) {
+  return (
+    <button
+      className={cn(
+        'group relative inline-flex h-11 animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+
+        // before styles
+        'before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]',
+
+        // light mode colors
+        'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+        // dark mode colors
+        'dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

libs/shared/config/tailwind/shadcn.ts

@@ -51,6 +51,13 @@ export function buildConfig(
             DEFAULT: 'hsl(var(--card))',
             foreground: 'hsl(var(--card-foreground))',
           },
+          colors: {
+            'color-1': 'hsl(var(--color-1))',
+            'color-2': 'hsl(var(--color-2))',
+            'color-3': 'hsl(var(--color-3))',
+            'color-4': 'hsl(var(--color-4))',
+            'color-5': 'hsl(var(--color-5))',
+          },
         },
         borderRadius: {
           lg: `var(--radius)`,
@@ -76,11 +83,16 @@ export function buildConfig(
                 'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
             },
           },
+          'rainbow': {
+            '0%': { 'background-position': '0%' },
+            '100%': { 'background-position': '200%' },
+          },
         },
         animation: {
           'accordion-down': 'accordion-down 0.2s ease-out',
           'accordion-up': 'accordion-up 0.2s ease-out',
           'orbit': 'orbit calc(var(--duration)*1s) linear infinite',
+          'rainbow': 'rainbow var(--speed, 2s) infinite linear',
         },
       },
     },

libs/shared/ui/global.css

@@ -32,6 +32,11 @@
     --radius: 0.5rem;
     --g-keyboardblack-start: 0 0% 5%;
     --light-black: 0 0% 0% / 5%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
 
   .dark {