Polishing Rainbow (#8660)

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.311",
+  "version": "0.2.312",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/src/components/RainbowEffectDiv.tsx → sparkle/src/components/RainbowEffect.tsx

@@ -2,21 +2,20 @@ import * as React from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
-interface RainbowEffectDivProps {
+interface RainbowEffectProps {
   disabled?: boolean;
   className?: string;
-  outerClassName?: string;
+  containerClassName?: string;
   children: React.ReactNode;
-  backgroundColor?: string;
-  borderColor?: string;
 }
 
-export function RainbowEffectDiv({
+export function RainbowEffect({
   children,
   disabled,
   className,
+  containerClassName,
   ...props
-}: RainbowEffectDivProps) {
+}: RainbowEffectProps) {
   if (disabled) {
     return (
       <div className={cn(className)} {...props}>
@@ -26,12 +25,14 @@ export function RainbowEffectDiv({
   }
 
   const rainbowClassBlur =
-    "s-absolute s-bottom-[20%] s-left-1/2 s-z-0 s-h-1/5 s-w-4/5 s--translate-x-1/2 s-animate-rainbow s-bg-rainbow-gradient s-bg-[length:200%] [filter:blur(calc(1.5*1rem))]";
+    "s-absolute s-bottom-[14%] s-left-1/2 s-z-0 s-h-1/5 s-w-4/5 s--translate-x-1/2 s-animate-rainbow s-bg-rainbow-gradient s-bg-[length:200%] [filter:blur(calc(1.5*1rem))]";
 
   return (
-    <div className={cn(className, "s-relative")}>
+    <div className={cn(containerClassName, "s-relative")}>
       <div className={rainbowClassBlur} />
-      <div {...props}>{children}</div>
+      <div className={className} {...props}>
+        {children}
+      </div>
     </div>
   );
 }

sparkle/src/components/index.ts

@@ -86,7 +86,7 @@ export {
 export { Popup } from "./Popup";
 export { PriceTable } from "./PriceTable";
 export { RadioGroup, RadioGroupChoice, RadioGroupItem } from "./RadioGroup";
-export { RainbowEffectDiv } from "./RainbowEffectDiv";
+export { RainbowEffect } from "./RainbowEffect";
 export { ScrollArea, ScrollBar } from "./ScrollArea";
 export type { SearchbarProps } from "./Searchbar";
 export { Searchbar } from "./Searchbar";

sparkle/src/stories/AnimatedText.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { AnimatedText } from "../index_with_tw_base";
 
 const meta = {
-  title: "Primitives/AnimatedText",
+  title: "Effects/AnimatedText",
   component: AnimatedText,
 } satisfies Meta<typeof AnimatedText>;
 

sparkle/src/stories/ConfettiBackground.stories.tsx

@@ -4,7 +4,7 @@ import React, { useRef } from "react";
 import { ConfettiBackground } from "@sparkle/index";
 
 const meta = {
-  title: "Components/ConfettiBackground",
+  title: "Effects/ConfettiBackground",
   component: ConfettiBackground,
 } satisfies Meta<typeof ConfettiBackground>;
 

sparkle/src/stories/RainbowEffect.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+
+import { cn, RainbowEffect } from "../index_with_tw_base";
+
+const meta = {
+  title: "Effects/RainbowEffect",
+  component: RainbowEffect,
+} satisfies Meta<typeof RainbowEffect>;
+
+export default meta;
+
+const Example = () => (
+  <div className="s-flex s-w-[900px] s-flex-1 s-px-0">
+    <RainbowEffect containerClassName="s-w-full" className="s-w-full">
+      <div
+        className={cn(
+          "s-relative s-flex s-h-[120px] s-w-full s-flex-row s-p-3",
+          "s-rounded-2xl s-border s-border-element-500 s-border-primary-200 s-bg-primary-50 s-transition-all",
+          "s-ring-2 s-ring-highlight-300 s-ring-offset-2"
+        )}
+      >
+        Hello
+      </div>
+    </RainbowEffect>
+  </div>
+);
+
+export const Demo = () => <Example />;

sparkle/tailwind.config.js

@@ -69,7 +69,7 @@ module.exports = {
         ...theme("spacing"),
       }),
       backgroundImage: {
-        "rainbow-gradient": `linear-gradient(90deg, ${colors.red[500]}, ${colors.pink[500]}, ${colors.amber[500]}, ${colors.emerald[500]}, ${colors.sky[500]}, ${colors.blue[500]}, ${colors.purple[500]})`,
+        "rainbow-gradient": `linear-gradient(90deg, ${colors.sky[300]}, ${colors.purple[700]}, ${colors.blue[500]}, ${colors.indigo[300]}, ${colors.sky[600]}, ${colors.blue[500]}, ${colors.purple[300]})`,
       },
       keyframes: {
         pulse: {
@@ -192,7 +192,7 @@ module.exports = {
         "breathing-scale": "breathing-scale 3s infinite ease-in-out",
         "cursor-blink": "cursor-blink 0.9s infinite;",
         "move-square": "move-square 3s ease-out infinite",
-        rainbow: "rainbow var(--speed, 8s) infinite linear",
+        rainbow: "rainbow var(--speed, 6s) infinite linear",
       },
       colors: {
         brand: {