Implement tailwind theme about shelf.nu HOT 4 CLOSED

Based on our discussion yesterday I have implemented the following sizes for headings:

Display 2xl = H1
Display xl = H2
Display lg = H3
Display md = H4
Display sm = H5
Display xs = H6

This however seems inconsistent with the design of the app.
If I look at the biggest heading on the page, based on basic HTML semantics and structure that should be an H1. However when I look at it it uses display-sm which above is defined for H5.

At this point I am confused what to do. I will override the default styles we defined, however I am concerned that in the future that will cause a domino effect when updating the UI.

from shelf.nu.

@carlosvirreira I have implemented the primary button color based on the new design you made on friday. What I am missing or I simply dont know how to see are hover/focus states of the buttons.
Also it would be good to know what the transitions are on the hover states.

from shelf.nu.

Hi @DonKoko

Our buttons have 4 states.

1. Default
2. Hover
3. Focused
4. Disabled

For the example above:

1. Default - background = base/white | border (inside) 1px - gray 300 | (drop shadow) Shadow / XS (blur = 2 / Y = 1) 101828 (5% opacity)
2. Hover - background = gray 50| border (inside) 1px - gray 300 | (drop shadow) Shadow / XS (blur = 2 / Y = 1) 101828 (5% opacity)
3. Focused - base/white | border (inside) 1px - gray 300 | (drop shadow) Shadow / XS focused 4px - gray 100 (blur = 2 / Y = 1) 101828 (5% opacity) + F2F4F7 - spread 4 (199% opacity)
4. Disabled - base/white | border (inside) 1px gray /200 | Shadow/XS

from shelf.nu.

This is done for now.

from shelf.nu.