Sparx Design System

A React-based Design System created for Spyrothon.

Usage

pnpm add @spyrothon/sparx @spyrothon/tokens
# Create the token definitions from a default template
pnpm sparx-tokens
# Run the generate script (you'll need a native typescript runner like esno or tsx)
pnpm esno ./design/generate.ts

Then in your project, import the generated system.css and @spyrothon/sparx/style.css in order near the root of your app:

import "./design/generated/system.css";
import "@spyrothon/sparx/style.css";

Note that these have to be imported through JS in order to be resolved properly. But make sure these files aren't transpiled or clobbered by something like CSS Module transpilation.

If you're editing your tokens frequently, like when initially setting up the system, you'll probably want to add the generation as an npm script, like:

// in package.json
{
  "scripts": {
    "gen:tokens": "esno ./design/generate.ts"
  }
}

Then you can just run pnpm gen:tokens to regenerate them all.

Roadmap

Components

• Image
• Code
• Button
  • Outline look
• TextArea
• DateTimeInput
  • Use a library for a better picker experience
• TextInput variations (validators)
  • Currency
  • Email (can use native)
  • Duration
  • Phone
• SelectInput
  • Combobox
  • MultiSelect
• Control
  • Prefix
  • Suffix
  • Size options
  • Validations
• Callout
  • Dismissable
• ProgressBar
• TabGroup
  • Icons
  • Badges
• Layer
  • Modal
  • Popout
  • Tooltip
• Effects (extrusion shadow)
• Table
• List
• NavBar
  • Dropdown
• Box (like Card, but just an outline)
• Sequenced Content
  • Stepper
  • Slides