This is a basic toggle switch style. All state styles are consistent with checkbox/radio button state styles.
Once the rough implementation is done, let's test the interaction out amongst ourselves and tweak the animation and etc until it feels right.
@Prtksxna, I've made it clearer. You can just refer to the latest. They basically follow the styles of radio/checkboxes.
@violetto Should the :focus box-shadow be outside or inside? I can show you the difference tomorrow, more visually pleasing seems outside in rendering.
@violetto I think there's a small glitch, why's the normal state's :focus on grey background?
Cus it's in focus, although not switched on.
LMK when you've somewhat implemented this, it might work, might not. But the idea is to show what is in focus even though it's not switched on.
Also, why isn't the grip changing colors on :hover at normal state? You'll see with my upcoming patch, that it's a very subtle change on :hover so far...
I think this design process needs to be more aware of the real world. We still have a process where the mocks we get for each widget are (a) several times larger than they end up appearing on most desktop (perceived colour, brightness, stroke thickness all change when scaled down), and (b) not shown alongside other widgets in the library; the theme needs to remain consistent, and constantly tweaking these widgets in isolation is why we are having these problems in the first place (such as the conflict with focus state / differences between toggleSwitch and toggleButton).
Another minor issue which is related is that the latest designs are on a grey background. Almost all implementations to date are on a white background, so that should be our primary concern when evaluating.
