hicetnunc

hicetnunc copied to clipboard

Fixes #738

So far this just adds Storybook with the Design Token add-on and quickly instruments the variables.scss file for an example.

Next on the list:

• [x] add an example story for the Button component
• [x] await feedback on new shade palette and type scale proposal. This has now been accepted into the post-hicathon UI/UX WG designs:
• [ ] add these new tokens to the spec ~~- [ ] audit and document any other css custom properties / scss variables that should be considered core design tokens~~ ~~- [ ] breakpoints audit~~ ~~- [ ] basic layout grid~~

So I'm all in to bring Storybook into the project. But.. The design done during hickaton is done by the community. Pretty good stuff in there, however, for the last couple of week we have a dedicated team of designers that have been working on a new version of the design.

I'm not the one who should be deciding what design needs to be implemented. Its my understanding that Raphael (hickaton) has been in touch with Julio (Designer) but I'm not sure how they're going to move forward.

I would not make major changes in new components until that has been agreed.

@crzypatchwork would you mind giving Julio and Raphael some direction of what would you like to keep from the 2 different designes we have at the moment?

@andrevenancio Fully agree. Wasn't intending for this PR to deal w components at all, yet. Just to formalize design tokens, and that first to do is just noting that there are some proposals that need to be agreed upon, pending feedback from the core team.

I saw that you raised concerns in the Figma about contrast and I agree. That's why I put together that "shade palette" proposal with WCAG AA/AAA contrast ratios details for both the light and dark mode themes. If the core team has a different one, also cool.

Just want to ensure that fundamental palette of shades and type sizes is nailed for everyone in branch. Feels like that bit is achievable and is the best first Story.

@andrevenancio oh one other question I did have:

there are both scss variables and css custom properties in the codebase. it looks like custom properties is the preferred approach, as that's used in the components. are you moving away from scss or is the intention to use both?

@andrevenancio oh one other question I did have:

there are both scss variables and css custom properties in the codebase. it looks like custom properties is the preferred approach, as that's used in the components. are you moving away from scss or is the intention to use both?

So the project started with css. I moved in and implemented sass, there might be some old css laying around.

We've been talking about moving this project to next.js. So that's something to consider too.

this was an interesting thing for documenting the protocol if I understood it right

this was an interesting thing for documenting the protocol if I understood it right

Yeah, the MDX files would be great for that in addition to documenting the design system.

this was an interesting thing for documenting the protocol if I understood it right

Yeah, the MDX files would be great for that in addition to documenting the design system.

I can help with this addition!

I've rebased onto main, and resolved the conflicts. Added a bit back to the scope of this, as it seems like it's worth getting the design tokens into this as a part of the post-hicathon UI/UX working group's efforts.

If these simple design tokens are accepted into main, it will make the other PR's (nav, minting page, etc) easier to implement and more consistent with each other.

Design tokens will be:

• shade palette (light & dark mode)
• type sizes
• spacing units