search

Vonage / vivid-3

Vonage's web UI 🎨 toolbelt
https://vivid.deno.dev
Apache License 2.0
53 stars 11 forks source link

[State] new State component #36

Closed jshenkman closed 2 years ago

jshenkman commented 2 years ago

In Vivid-3 we are not using the material ripple component for presenting states. States component will replace it. Buttons are the first component that we will be using it. out states:

Primary color will have an exception behavior for the hover & active states. While all the connotation are getting darker primary start at its darkest hens is getting lighter.

image

The ghost Primary colors for the states will be the default states.

We are ditching the "ripple" effect. Other Animation is in consideration.

*Focus state which is a different Component - will be presented only with keyboard navigation.

jshenkman commented 2 years ago

Currently, our buttons extend Material's state system (using ripple). We want to move away from this solution and implement our own states, using colors from the palette (design tokens) Including - Button, Icon Button, and Icon Button Toggle.

You can find the states here

yinonov commented 2 years ago

the state indicator component should be unaware of its containing component. meaning it does not know anything about connotation or appearance.

suggesting to have a single behavior for all and if need to have more customization per permutation, we can expose css variables to allow it