Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to Tailwind plugin, use @low and @high priorities, new docs, and more #22

Merged
merged 128 commits into from
Dec 28, 2021

Conversation

milesmcc
Copy link
Owner

@milesmcc milesmcc commented Dec 27, 2021

This large update to a17t migrates it from a traditional CSS library to a Tailwind CSS plugin! This is an incredibly exciting update, which will make a17t an even more compelling way to build interfaces.

With such a large update, though, come some fundamental changes.

Major Changes

  • There are only two priorities: @low and @high. I made this change because the middle priority — @normal — often felt forced. In many cases, the @low priority variant also didn't make much sense. In this update, !normal is now @low, and !high is now @high.
  • You might have noticed that priorities now use the "at" symbol as the prefix rather than an exclamation point. I changed the prefix for the priority classes because Tailwind's default CSS purge system wasn't detecting classes with the exclamation point prefix. Using an at symbol just makes everything much more reliable. I wish we didn't have to make this change, but we do. (Fortunately, migration is as simple as a find and replace.)
  • a17t no longer can be distributed as a simple CSS file; rather, it needs to be installed as a Tailwind CSS plugin. I'm confident this is the right direction for the project, but I also acknowledge that this will inconvenience some existing users. I'm sorry! But I promise using Tailwind is worth it.
  • Buttons look slightly different now. (They look better.)
  • Cards function slightly differently now. Specifically, card on its own is a neutral white card, while card ~neutral is a gray card, and card ~neutral @high is a dark gray card. (This change preserves the old plain white card while also easily supporting the new @low and @high priorities.
  • CSS variable customization is no longer supported. While this was one of a17t's original differentiators, in retrospect it was misguided. There is already a much better way to customize the toolkit: using tailwind.config.js! And since a17t now reads important values like spacing, colors, and border radii from the Tailwind config, you only need to apply customizations once (rather than twice, once for a17t and once for Tailwind).

Minor Changes

  • .kbd now has a dark background with white text, rather than the inverse. It was always meant to be white text on a dark background; I'm not sure when that changed, but it was a regression.
  • The documentation now has a new landing page.
  • The documentation no longer has an off-white background.
  • The documentation has more examples.
  • Inputs and textareas were removed from the docs, because they are redundant to fields. Going forward, I recommend just using the .field selector for these elements. To preserve backwards compatibility, the .input and .textarea selectors will still work — like before, they are identical to .field. (That is to say that inputs, textareas, and fields were all merged into one.)

What Didn't Change

  • a17t is still as atomic and dynamic as it ever was!

@milesmcc milesmcc marked this pull request as ready for review December 28, 2021 04:17
@milesmcc milesmcc merged commit 4dd8c86 into master Dec 28, 2021
@milesmcc milesmcc deleted the refresh branch December 28, 2021 21:46
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.

1 participant