Skip to content

Sparkly Text component#2

Open
qt-dork wants to merge 4 commits intomainfrom
sparkly-text
Open

Sparkly Text component#2
qt-dork wants to merge 4 commits intomainfrom
sparkly-text

Conversation

@qt-dork
Copy link
Copy Markdown

@qt-dork qt-dork commented Nov 3, 2025

Apologies for the stray commit. Finally finished writing it and writing all the documentation for it. Hoping it's all good?

Comment thread .storybook/main.ts
import remarkGfm from 'remark-gfm';

const config: StorybookConfig = {
"stories": [
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these prettier changes?

Comment thread package.json Outdated
@@ -60,12 +62,11 @@ class SparklyText extends HTMLElement {
--_sparkle-base-size: var(--sparkly-text-size, 15px);
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we default this to inherit instead? And generally do font sizes in rem so they work nicely with assistive tech that increases font size?

Comment thread src/lib/SparklyText/SparklyText.svelte

<style>
sparkly-text {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this also inherit? makes it easier to use

Comment thread src/lib/SparklyText/sparkly-text.ts
}
},
args: {
children: createRawSnippet(() => ({ render: () => 'Sparkly Text' }))
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
children: createRawSnippet(() => ({ render: () => 'Sparkly Text' }))
children: createRawSnippet(() => ({ render: () => 'Sparkly Text' })),
sparkleAmount: 8,
sparkleRate: 250,
sparkleVariance: 200,
disabled: false,
allowPausing: true,
size: '1rem',
animationLength: '900ms',
color: '#FFC700',
textShadowColor: 'none'

Comment thread src/stories/SparklyText/SparklyText.mdx Outdated
Co-authored-by: Miguel de los Reyes <8410924+migueldlr@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants