diff --git a/apps/web/src/components/ui/typography/AnimatedMarkdown/AnimatedMarkdown.tsx b/apps/web/src/components/ui/typography/AnimatedMarkdown/AnimatedMarkdown.tsx index c9a22f2b6..bf548f872 100644 --- a/apps/web/src/components/ui/typography/AnimatedMarkdown/AnimatedMarkdown.tsx +++ b/apps/web/src/components/ui/typography/AnimatedMarkdown/AnimatedMarkdown.tsx @@ -5,8 +5,8 @@ import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import { useMarkdownComponents } from './useMarkdownComponents'; import { MarkdownAnimation } from './animation-helpers'; -import styles from './AnimatedMarkdown.module.css'; import { cn } from '@/lib/classMerge'; +import styles from './AnimatedMarkdown.module.css'; import './animations.css'; export interface AnimatedMarkdownProps { diff --git a/apps/web/src/components/ui/typography/AnimatedMarkdown/animation-helpers.tsx b/apps/web/src/components/ui/typography/AnimatedMarkdown/animation-helpers.tsx index 6c3b3ff4d..41761604e 100644 --- a/apps/web/src/components/ui/typography/AnimatedMarkdown/animation-helpers.tsx +++ b/apps/web/src/components/ui/typography/AnimatedMarkdown/animation-helpers.tsx @@ -22,20 +22,20 @@ export type MarkdownAnimation = export type MarkdownAnimationTimingFunction = 'ease-in-out' | 'ease-out' | 'ease-in' | 'linear'; export const animations: Record = { - fadeIn: 'buster-fadeIn', - slideUp: 'buster-slideUp', - wave: 'buster-wave', - elastic: 'buster-elastic', - bounceIn: 'buster-bounceIn', - rotateIn: 'buster-rotateIn', - colorTransition: 'buster-colorTransition', - fadeAndScale: 'buster-fadeAndScale', - slideInFromLeft: 'buster-slideInFromLeft', - blurIn: 'buster-blurIn', - typewriter: 'buster-typewriter', - highlight: 'buster-highlight', - blurAndSharpen: 'buster-blurAndSharpen', - dropIn: 'buster-dropIn', + fadeIn: 'animated-md-fadeIn', + slideUp: 'animated-md-slideUp', + wave: 'animated-md-wave', + elastic: 'animated-md-elastic', + bounceIn: 'animated-md-bounceIn', + rotateIn: 'animated-md-rotateIn', + colorTransition: 'animated-md-colorTransition', + fadeAndScale: 'animated-md-fadeAndScale', + slideInFromLeft: 'animated-md-slideInFromLeft', + blurIn: 'animated-md-blurIn', + typewriter: 'animated-md-typewriter', + highlight: 'animated-md-highlight', + blurAndSharpen: 'animated-md-blurAndSharpen', + dropIn: 'animated-md-dropIn', none: 'none' }; diff --git a/apps/web/src/components/ui/typography/AnimatedMarkdown/animations.css b/apps/web/src/components/ui/typography/AnimatedMarkdown/animations.css index 8dd1286af..221995101 100644 --- a/apps/web/src/components/ui/typography/AnimatedMarkdown/animations.css +++ b/apps/web/src/components/ui/typography/AnimatedMarkdown/animations.css @@ -1,4 +1,4 @@ -@keyframes buster-fadeIn { +@keyframes animated-md-fadeIn { from { opacity: 0; } @@ -7,7 +7,7 @@ } } -@keyframes buster-blurIn { +@keyframes animated-md-blurIn { from { opacity: 0; filter: blur(3px); @@ -18,7 +18,7 @@ } } -@keyframes buster-typewriter { +@keyframes animated-md-typewriter { from { width: 0; overflow: hidden; @@ -28,7 +28,7 @@ } } -@keyframes buster-slideInFromLeft { +@keyframes animated-md-slideInFromLeft { from { transform: translateX(-100%); opacity: 0; @@ -39,7 +39,7 @@ } } -@keyframes buster-fadeAndScale { +@keyframes animated-md-fadeAndScale { from { transform: scale(0.5); opacity: 0; @@ -50,16 +50,16 @@ } } -@keyframes buster-colorTransition { +@keyframes animated-md-colorTransition { from { - color: var(--buster-color-from, var(--color-primary)); + color: var(--animated-md-color-from, var(--color-primary)); } to { - color: var(--buster-color-to, var(--color-foreground)); + color: var(--animated-md-color-to, var(--color-foreground)); } } -@keyframes buster-rotateIn { +@keyframes animated-md-rotateIn { from { transform: rotate(-360deg); opacity: 0; @@ -70,7 +70,7 @@ } } -@keyframes buster-bounceIn { +@keyframes animated-md-bounceIn { 0%, 40%, 80%, @@ -85,7 +85,7 @@ } } -@keyframes buster-elastic { +@keyframes animated-md-elastic { 0%, 100% { transform: scale(1); @@ -95,7 +95,7 @@ } } -@keyframes buster-highlight { +@keyframes animated-md-highlight { from { background-color: yellow; } @@ -104,7 +104,7 @@ } } -@keyframes buster-blurAndSharpen { +@keyframes animated-md-blurAndSharpen { from { filter: blur(5px); opacity: 0; @@ -115,7 +115,7 @@ } } -@keyframes buster-dropIn { +@keyframes animated-md-dropIn { from { transform: translateY(-10%); opacity: 0; @@ -126,7 +126,7 @@ } } -@keyframes buster-slideUp { +@keyframes animated-md-slideUp { from { transform: translateY(10%); opacity: 0; @@ -137,7 +137,7 @@ } } -@keyframes buster-wave { +@keyframes animated-md-wave { from { transform: translateY(0); } @@ -150,13 +150,13 @@ } :root { - --buster-marker-animation: none; + --animated-md-marker-animation: none; } -.buster-custom-li::marker { - animation: var(--buster-marker-animation); +.animated-md-custom-li::marker { + animation: var(--animated-md-marker-animation); } -.buster-code-block { - animation: var(--buster-marker-animation); +.animated-md-code-block { + animation: var(--animated-md-marker-animation); }