TODO:

• //github actions
• //vite/build
• //npm publish
• //storyrbook theming setup
• css theming with vars
• docs?
• publish storybook publicly

later

• chromatic
• vp tests
• cli a11y tests
• unit/interaction tests?

core

• //button
• //link
• dropdown
• modal
• //input
• //combobox
• tooltip
• theme
• card
• //textarea
• //select
• image with server optimization/caching

modules

• hero
• layouts
• navigation
• footer
• //drawer
• theme

templates

• home
• about
• blog post
• blog archive

theming (shadcn for examples)

• background/foreground (bg/fg) system for each component group
• secondary or muted group (tabslist, skeleton, switch, card)
• overlay group (modal, popover, dropdown, tooltip)
• form group (input, select, textarea, combobox, etc)
• button primary/secondary group (buttons, links)
• universal focus ring?
• how to handle hovers? (buttons, links, select items, dropdown items, tabs)
• status colors (error, warning, success, etc)
• default border color/radius or do borders by group?
• use currentColor and EMs for svgs?

form group

• border, radius, background, foreground, focus?

link color, hover, text decoration

button group (primary/secondary/subtle)

• border, radius, background, foreground, focus

overlay group

• border, radius, background, foreground

OR

keep it really simple

• foreground (light/dark)
• background (light/dark)
• border, radius
• primary highlight
• secondary
• text primary
• text secondary