Tailwind Conversion

[arthyn]

At this point the library itself is converted, still need to update docs and make sure the distribution setup is correct.

General principles

• delete anything that was just a wrapper around basic elements
• anything that was a few classes either make into a utility/component class or delete because it's basic enough that TW provides it
• anything that was super basic was just applied as a global style (could be convinced against this though)
• move to non-alpha based reduced color palette based on actual usage
• mostly leave TW default config since it contains all the values of current indigo plus more, except in a few cases where we used very specific values, those were overridden
• try to always leave a className prop on every component so the user can customize as necessary

Issues and areas of improvement

addressed

• progress bar was inaccessible, added screen reader only bar with aria values
• nested labels aren't allowed in HTML and lead to confusing readouts
• simplified build and distribution using vite

not addressed

• the form elements seem to only work with controlled state
• lack of keyboard navigation for some elements and missing focus indication
• checkbox/radios could be a little easier to use wrapping the input themselves instead of delegating out
• figure out how to keep values in .ts and import into tailwind.config.js or vice-versa

Todos

now

• update docs and readmes to reflect new changes
• confirm package has all it needs for distribution and usage
• verify deps/peerDeps are correct
• bump major version & publish

later

• address some of the items mentioned above in "not addressed"
• add Storybook which would give us a good showcase/docs site
• add more interactive elements like dialogs, selects, etc.

[g-a-v-i-n]

Huge

[arthyn]

Something I realized after I did all this that I might change, the true red/blue/green/yellow should always be the same number aka 400. You can see here that red and green are missing what would be "300" https://www.figma.com/file/5RhWFWqRFSeddpD6X0Xt6C/indigo-colors?node-id=0%3A1 so I'll probably shift those.

[liam-fitzgerald]

Re the themeing stuff, consider maybe using CSS vars perhaps?

[arthyn]

Good call, found a library which will do the vars and also has the ability to make preset themes if we wanted to that later. Required a little messing around, but looks like it works.

Pretty much all the the properties that people may want to change should be in there with the exception of font-size which would require a patch in the library to support TW 2.0 use of font-size + line-height object.