Sparked

Sparked is an extension that helps you adopt Sparkui design system units.

Description

Sparked provides inline suggestions to help you adopt Sparkui design system units seamlessly. Instead of manually typing design system variables, the extension automatically suggests the appropriate Sparkui variables as you type.

This extension was built particularly for real world use. It focuses on developer ergonomics from the point of Sparkui.

Key Features:

• Inline Suggestions: Automatically suggests Sparkui variables as you type
• Direct Replacement: Click or press Tab to replace your text with the design system variable
• Smart Matching: Works with various formats (px, rem-calc, colors, font weights, etc.)
• Keyboard Shortcut: Press Shift+Tab to trigger suggestions manually

Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.

How to Use

1. Automatic Suggestions: As you type values like 24px, #ffffff, or semibold, the extension will automatically suggest the corresponding Sparkui variable
2. Manual Trigger: Press Shift+Tab to manually trigger suggestions
3. Accept Suggestion: Click on the suggestion or press Tab to replace your text with the design system variable

Supported Values

The extension recognizes and suggests replacements for:

• Spacings: 4px, 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px
• Font Sizes: 10px, 12px, 14px, 16px, 20px, 24px, 32px, 48px
• Font Weights: normal, semibold, 600, bold
• Border Radius: 2px, 4px, 6px, 30em
• Colors: All Sparkui color palette including blues, greens, yellows, oranges, reds, skys, inks, blacks, greys, and more
• rem-calc: rem-calc(4px), rem-calc(16px), etc.

Contributing

This is an open source project open to anyone. Contributions are welcome github