Extras buttons.min.css

[argyleink]

fixes #152

• icons
• custom accents
• custom size
• adaptive (light/dark)
• reduced motion
• supports inputs and buttons, also helps unmarked buttons look like submit buttons
• file input button matches
• docs

play around with the plain css prototype here

[github-actions]

Visit the preview URL for this PR (updated for commit 65fc673):

https://open-props--pr154-buttons-x5db5f1l.web.app

_{(expires Thu, 03 Feb 2022 03:13:09 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[argyleink]

add --_size as another top level customization lever

[argyleink]

move normalize.css button styles into this file

[argyleink]

gonna need docs or some docs built into a demo codepen, so stuff like below doesnt need discovered.

filled indigo customized OP button:

.btn-solid {
  --_bg: var(--indigo-6);
  --_border: var(--indigo-5);
  --_text: var(--indigo-0);
  --_ink-shadow: 0 1px 0 var(--indigo-8);
}

[argyleink]

2 small firefox issues:

• icon stroke color
• accent and link color comment value

[davideast]

Amazing.

I think the key thing here will be explaining that:

• Including this extra will bring a very low specificity (by using where)
• You can easily customize it with other props

I started a really simple docs example to showcase some of these thoughts.

https://open-props--button-docs-a6hwptl6.web.app/#buttons

[argyleink]

seein that def gets me pumped! i bet we could easily build a little experience too that changes the accent color, size and text colors. spit out the tiny bits of mod props needed, they can copy and paste them in their css for some branded looks 🙂

i think we need an Extra section in the bottom nav instead of Buttons tho:

In extra we can document normalize props and the buttons. v1 def doesnt need to be interactive. my idea up until now was to make a normalize codepen and a buttons codepen, and kinda docublog them there. i really like the idea of an Extras section tho, really going to help clear things up. makes this related to #89 👍🏻

[argyleink]

docs to come in a separate PR, this is ready for early access