From bcf51a6dd9f132b29bf5cf51e397534879f2e792 Mon Sep 17 00:00:00 2001 From: fuma-nama Date: Sun, 8 Sep 2024 20:36:08 +0800 Subject: [PATCH] UI: Improve banner rainbow variant --- .changeset/perfect-ants-sneeze.md | 5 +++++ apps/docs/app/layout.client.tsx | 14 +------------- packages/ui/src/components/banner.tsx | 5 +++-- 3 files changed, 9 insertions(+), 15 deletions(-) create mode 100644 .changeset/perfect-ants-sneeze.md diff --git a/.changeset/perfect-ants-sneeze.md b/.changeset/perfect-ants-sneeze.md new file mode 100644 index 000000000..7c2df4b64 --- /dev/null +++ b/.changeset/perfect-ants-sneeze.md @@ -0,0 +1,5 @@ +--- +'fumadocs-ui': patch +--- + +Improve banner rainbow variant diff --git a/apps/docs/app/layout.client.tsx b/apps/docs/app/layout.client.tsx index aa8b3fcb3..75085b262 100644 --- a/apps/docs/app/layout.client.tsx +++ b/apps/docs/app/layout.client.tsx @@ -2,9 +2,8 @@ import { cva } from 'class-variance-authority'; import Link from 'next/link'; -import { useParams, usePathname } from 'next/navigation'; +import { useParams } from 'next/navigation'; import { type ReactNode, useId } from 'react'; -import { Banner } from 'fumadocs-ui/components/banner'; import { cn } from '@/utils/cn'; import { modes } from '@/utils/modes'; @@ -25,20 +24,9 @@ export function Body({ children: ReactNode; }): React.ReactElement { const mode = useMode(); - const pathname = usePathname(); return ( - {pathname === '/' ? ( - - - Fumadocs MDX v10 is now available. {'->'} - - - ) : null} {children} ); diff --git a/packages/ui/src/components/banner.tsx b/packages/ui/src/components/banner.tsx index a80fc0521..aab03d745 100644 --- a/packages/ui/src/components/banner.tsx +++ b/packages/ui/src/components/banner.tsx @@ -106,7 +106,7 @@ const rainbowLayer = ( '--via': 'rgba(164,255,68,0.4)', animationDirection: 'reverse', backgroundImage: - 'repeating-linear-gradient(to right, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) 50%)', + 'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))', backgroundSize: '200% 100%', mixBlendMode: 'difference', } as object @@ -124,8 +124,9 @@ const rainbowLayer = ( '--end': 'rgba(64,0,255,0.51)', '--via': 'rgba(255,89,0,0.56)', backgroundImage: - 'repeating-linear-gradient(to right, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) 50%)', + 'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))', backgroundSize: '200% 100%', + mixBlendMode: 'color-dodge', } as object } />