🐛 Fix dyn color propagation (out of tailwind)

Author: bal7hazar

packages/ui-next/src/components/modules/achievements/pin-icon/pin-icon.tsx

@@ -33,6 +33,7 @@ export interface AchievementPinIconProps
   empty?: boolean;
   theme?: boolean;
   className?: string;
+  color?: string;
 }
 
 export const AchievementPinIcon = ({
@@ -42,12 +43,14 @@ export const AchievementPinIcon = ({
   variant,
   size,
   className,
+  color,
 }: AchievementPinIconProps) => {
   return (
     <div
       data-theme={theme}
       data-empty={empty}
       className={cn(achievementPinIconVariants({ variant, size }), className)}
+      style={{ color: theme ? color : undefined }}
     >
       {empty ? (
         <div className="w-3 h-3 fa-spider-web fa-thin" />

packages/ui-next/src/components/modules/achievements/pin-icons/pin-icons.stories.tsx

@@ -54,3 +54,11 @@ export const HighlightTheme: Story = {
     theme: true,
   },
 };
+
+export const Color: Story = {
+  args: {
+    variant: "highlight",
+    theme: true,
+    color: "#ff00ff",
+  },
+};

packages/ui-next/src/components/modules/achievements/pin-icons/pin-icons.tsx

@@ -26,6 +26,7 @@ export interface AchievementPinIconsProps
   pins: { id: string; icon: string }[];
   theme?: boolean;
   className?: string;
+  color?: string;
 }
 
 export const AchievementPinIcons = ({
@@ -34,6 +35,7 @@ export const AchievementPinIcons = ({
   variant,
   size,
   className,
+  color,
 }: AchievementPinIconsProps) => {
   return (
     <div className={achievementPinsVariants({ variant, size })}>
@@ -45,6 +47,7 @@ export const AchievementPinIcons = ({
           size={size}
           theme={theme}
           className={className}
+          color={color}
         />
       ))}
       {Array.from({ length: 3 - pins.length }).map((_, index) => (

packages/ui-next/src/components/modules/achievements/progress/progress.tsx

@@ -8,6 +8,7 @@ export interface AchievementProgressProps
   points: number;
   completed?: boolean;
   className?: string;
+  color?: string;
 }
 
 const achievementProgressVariants = cva("p-3 flex items-center gap-x-3", {
@@ -30,6 +31,7 @@ export function AchievementProgress({
   completed,
   variant,
   className,
+  color,
 }: AchievementProgressProps) {
   return (
     <div className={cn(achievementProgressVariants({ variant }), className)}>
@@ -44,6 +46,7 @@ export function AchievementProgress({
         total={total}
         completed={!!completed}
         className={className}
+        color={color}
       />
       <div className="flex gap-x-1">
         <SparklesIcon

packages/ui-next/src/components/modules/achievements/summary/summary.stories.tsx

@@ -194,16 +194,8 @@ export const MultiColors: Story = {
   render: (args) => {
     return (
       <div className="flex flex-col gap-4">
-        <AchievementSummary
-          {...args}
-          active
-          className="data-[theme=true]:text-[#ff00ff] data-[completed=true]:bg-[#ff00ff]"
-        />
-        <AchievementSummary
-          {...args}
-          active
-          className="data-[theme=true]:text-[#00ff00] data-[completed=true]:bg-[#00ff00]"
-        />
+        <AchievementSummary {...args} active color="#ff00ff" />
+        <AchievementSummary {...args} active color="#00ff00" />
       </div>
     );
   },

packages/ui-next/src/components/modules/achievements/summary/summary.tsx

@@ -22,6 +22,7 @@ export interface AchievementSummaryProps
   socials?: Socials;
   active?: boolean;
   className?: string;
+  color?: string;
 }
 
 const achievementSummaryVariants = cva("border border-transparent", {
@@ -43,6 +44,7 @@ export const AchievementSummary = ({
   socials,
   active,
   className,
+  color,
   variant,
 }: AchievementSummaryProps) => {
   const { points, count } = useMemo(() => {
@@ -66,6 +68,7 @@ export const AchievementSummary = ({
         variant={variant}
         active={active}
         className={className}
+        color={color}
       />
       <CardContent className="p-0">
         <AchievementProgress
@@ -75,6 +78,7 @@ export const AchievementSummary = ({
           variant={variant}
           completed
           className={className}
+          color={color}
         />
       </CardContent>
     </Card>

packages/ui-next/src/components/modules/arcade/discovery-event/discovery-event.tsx

@@ -13,6 +13,7 @@ export interface ArcadeDiscoveryEventProps
     icon: string;
   };
   loading?: boolean;
+  color?: string;
 }
 
 export const arcadeDiscoveryEventVariants = cva(
@@ -39,6 +40,7 @@ export const ArcadeDiscoveryEvent = ({
   loading,
   variant,
   className,
+  color,
 }: ArcadeDiscoveryEventProps) => {
   const bgColor = useMemo(() => {
     switch (variant) {
@@ -71,6 +73,7 @@ export const ArcadeDiscoveryEvent = ({
             title={achievement.title}
             icon={achievement.icon}
             className={className}
+            color={color}
           />
         )}
       </div>
@@ -83,10 +86,12 @@ const AchievementEvent = ({
   title,
   icon,
   className,
+  color,
 }: {
   title: string;
   icon: string;
   className?: string;
+  color?: string;
 }) => {
   return (
     <div
@@ -95,6 +100,7 @@ const AchievementEvent = ({
         "flex items-center gap-x-1.5 data-[theme=true]:text-primary",
         className,
       )}
+      style={{ color }}
     >
       <p className="text-xs text-foreground-300">earned</p>
       <div className="flex items-center gap-1 p-1 border-background-400 border rounded-sm">

packages/ui-next/src/components/modules/arcade/discovery-group/discovery-group.stories.tsx

@@ -72,16 +72,8 @@ export const MultiColors: Story = {
   render: (args) => {
     return (
       <div className="flex flex-col gap-4">
-        <ArcadeDiscoveryGroup
-          {...args}
-          rounded
-          className="data-[theme=true]:text-[#ff00ff]"
-        />
-        <ArcadeDiscoveryGroup
-          {...args}
-          rounded
-          className="data-[theme=true]:text-[#00ff00]"
-        />
+        <ArcadeDiscoveryGroup {...args} rounded color="#ff00ff" />
+        <ArcadeDiscoveryGroup {...args} rounded color="#00ff00" />
       </div>
     );
   },

packages/ui-next/src/components/modules/arcade/discovery-group/discovery-group.tsx

@@ -40,6 +40,7 @@ export const ArcadeDiscoveryGroup = ({
   rounded,
   variant,
   className,
+  color,
 }: ArcadeDiscoveryGroupProps) => {
   return (
     <div
@@ -53,6 +54,7 @@ export const ArcadeDiscoveryGroup = ({
           loading={loading}
           className={className}
           variant={variant}
+          color={color}
           {...event}
         />
       ))}

packages/ui-next/src/components/modules/arcade/game-header/game-header.tsx

@@ -40,6 +40,7 @@ export interface ArcadeGameHeaderProps
   socials?: Socials;
   active?: boolean;
   className?: string;
+  color?: string;
 }
 
 export const arcadeGameHeaderVariants = cva(
@@ -67,6 +68,7 @@ export const ArcadeGameHeader = ({
   active,
   variant,
   className,
+  color,
 }: ArcadeGameHeaderProps) => {
   const pins = useMemo(() => {
     if (!achievements) return [];
@@ -121,6 +123,7 @@ export const ArcadeGameHeader = ({
               pins={pins}
               variant={variant}
               className={className}
+              color={color}
             />
           )}
         </div>