Last modified: 2014-10-14 05:04:31 UTC
Created attachment 16571 [details] buttons-disabled Update the buttons styling to reflect the new spec (attached)
I want to discuss a few things before implementing this- 1. Buttons right now don't have borders on the side so that the bevel that shows up on hover reaches till the corners - I00f905690e2934e972cc4ffc26631ead7c2d7567. The width of the disabled buttons will change if we don't add the borders on the side. 2. We can't use the 'lighten' mixin that sass provides for these colors. They'll have to be defined in variables.less. We will also have to move the declaration of the disabled pseudo class from /src/mediawiki.less/mediawiki.ui/mixins.less to /src/mediawiki.ui/components/buttons.less and define it for each button (constructive, progressive…) separately. If we are fine with these two points I can get a patch ready.
If a buttons goes from enabled to disabled and is in the toolbar it'll make everything shift. This will happen with the "Add Topic" button in Flow.
Created attachment 16596 [details] Disabled buttons #EEE
Comment on attachment 16571 [details] buttons-disabled https://bug-attachment.wikimedia.org/attachment.cgi?id=16596
With the previous mock up, I wanted to keep the same uninviting look as the Neutral disabled on other colored buttons, but it seems like keeping the solid background on disabled is less busy and the change from disabled to active more drastic. Instead of all outlined disabled button, it will be all solid disabled buttons regardless of neutral of progressive.
I'd like us to be very purposeful with color, in a mostly monochrome, color is a powerful tool for drawing the users attention, I think with colorful (even slightly less so) disabled elements we really muddle the glanceability of where should i focus my attention, and what is my next step, so +1
(In reply to Prateek Saxena from comment #1) > 2. We can't use the 'lighten' mixin that sass provides for these colors. How come? lessphp provides it too, and we're using it in anchors.less (https://git.wikimedia.org/blob/mediawiki%2Fcore.git/2daac5f36a4de903c5e6978711ffb9fe696458f1/resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fanchors.less#L16).
(In reply to Matthew Flaschen from comment #7) > How come? lessphp provides it too, and we're using it in anchors.less I tried using it but it wasn't producing the light color according to May. It makes it look neon.
We tried to generate lighter colors mathematically but there wasn't a reliable way to generate something that we can appropriately use. Like Prateek mentioned, it appeared too neon if we tweaked the HSB value. Some color values are already maxed out on HSB value and wasn't possible to plus or minus from the HSB. Still finding a way to make this better. For now, we're relying on actual values for most of them.
(In reply to May from comment #9) > We tried to generate lighter colors mathematically but there wasn't a > reliable way to generate something that we can appropriately use. Like > Prateek mentioned, it appeared too neon if we tweaked the HSB value. Some > color values are already maxed out on HSB value and wasn't possible to plus > or minus from the HSB. > > Still finding a way to make this better. For now, we're relying on actual > values for most of them. Thanks, I appreciate the information.
May, the new spec just has a gray background for all disabled states, right?
(In reply to Prateek Saxena from comment #11) > May, the new spec just has a gray background for all disabled states, right? Yep, all buttons look the same on disabled state.
