Suggestions for the Next Update

[mobalti]

I've been thinking a lot about Open Props and how we can make it better. After building numerous components with Open Props, here are some suggestions for the next update:

Add:

• font-size: 0.875rem | 14px (Frequently used by designers, especially for links and buttons).
• border-radius: 4px.
• border-radius: 8px.

More:

• Fluid font size.
• Fluid size.
• Gradients (especially multi-layer gradients).
• SVG filters.

I understand that you can create your own props on top of Open Props, but when you encounter certain props frequently with different designs, I think it's time for these props to be included by default.

[spartanatreyu]

My wishlist:

• All colors specified in oklch() by default.
• A 2 minute intro video on the homepage and readme (like the second half of the video on the bulma framework's homepage)
• The card code example at the top of the homepage should "animate" it's css variables being switched (e.g. --radius-2 to --radius-4 and the <pre> containing it's own styles should animate to the new values).
• Improve the main website:
  • I didn't even notice the bottom stickied navigation until my 5th time visiting the site. The website needs a side-nav that highlights the current scroll-position.
  • The color palete is so unaligned I'm getting trypophobia. A plain ol' color grid will fix this.
  • No 12-column-grid example. Throw an example in there for people to copy out when they need to as a starting point.
• Change name format of color files from props.gray.css to colors.grey.css
  • This will make it easier at a glance to see which files are color related. (This makes a large difference when the list is alphabetically sorted, e.g. shadows and sizes shouldn't appear between sand and stone.)

[mobalti]

@spartanatreyu, I completely agree with all your points. The library is indeed moving to HDR, not only for colors but also for gradients. Additionally, there's a mention of adding logical properties for animation in this issue #390

[Tihomir971]

Opinion. In forms styling move to:
<label> <span>Name</span> <input name="name" type="text" /> </label>
I don't like annoying

"for" and "id".

Also:

• as @mobalti mention font-size: 0.875rem | 14px is must have
• reorder --surface-1,2,3. Layers should be like stack of cards. It will also allow to add more layers if someone need (--surface-4 ...)

[Tihomir971]

Button group and icon button styling