Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Ryan, I agree this need to be iterated on. Thanks for pointing it out.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
This is what it looks like when the checkbox uses #ddd instead of "lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal tparscal@wikimedia.org wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal tparscal@wikimedia.org wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal tparscal@wikimedia.org wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal tparscal@wikimedia.org wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
For history the checkboxes were first developed in beta features, long before the style guide. There will be these kind of hiccups when it comes to the checkboxes. :-)
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal tparscal@wikimedia.org wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal <tparscal@wikimedia.org
wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal tparscal@wikimedia.org wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal <tparscal@wikimedia.org
wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari rkaldari@wikimedia.org wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal tparscal@wikimedia.org wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal tparscal@wikimedia.org wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari <rkaldari@wikimedia.org
wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it.
Thanks! Ryan Kaldari
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I recommend using @colorDisabledText for the label, and @colorGray15 for the fill.
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal tparscal@wikimedia.org wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal <tparscal@wikimedia.org
wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < rkaldari@wikimedia.org> wrote:
> Maybe it's just me, but the new disabled checkbox doesn't look > disabled to me: > https://tools.wmflabs.org/styleguide/desktop/section-5.html > > The normal convention for making a form element disabled is to make > it faded out (<100% opacity), not giving it a gray fill. > > I have no idea where this design came from or who is responsible for > it, but I was wondering if the design team could revisit it. > > Thanks! > Ryan Kaldari > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I was looking for a background color that has as little contrast as possible with #CCC. Important to have the border show but not dark enough that when it stands alone, it looks like an active checkbox. I made a version with #F9F9F9. What do you guys think? [image: Inline image 1]
On Tue, Aug 19, 2014 at 12:55 PM, Trevor Parscal tparscal@wikimedia.org wrote:
I recommend using @colorDisabledText for the label, and @colorGray15 for the fill.
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal tparscal@wikimedia.org wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
> This is what it looks like when the checkbox uses #ddd instead of " > lightgrey" and the surrounding .mw-ui-checkbox div is 50% > transparent. > > - Trevor > > > On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < > rkaldari@wikimedia.org> wrote: > >> Maybe it's just me, but the new disabled checkbox doesn't look >> disabled to me: >> https://tools.wmflabs.org/styleguide/desktop/section-5.html >> >> The normal convention for making a form element disabled is to make >> it faded out (<100% opacity), not giving it a gray fill. >> >> I have no idea where this design came from or who is responsible >> for it, but I was wondering if the design team could revisit it. >> >> Thanks! >> Ryan Kaldari >> >> _______________________________________________ >> Design mailing list >> Design@lists.wikimedia.org >> https://lists.wikimedia.org/mailman/listinfo/design >> >> > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I really like it. The #ccc outline, #f9f9f9 fill and #ccc text looks great.
- Trevor
On Tue, Aug 19, 2014 at 1:10 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
I was looking for a background color that has as little contrast as possible with #CCC. Important to have the border show but not dark enough that when it stands alone, it looks like an active checkbox. I made a version with #F9F9F9. What do you guys think? [image: Inline image 1]
On Tue, Aug 19, 2014 at 12:55 PM, Trevor Parscal tparscal@wikimedia.org wrote:
I recommend using @colorDisabledText for the label, and @colorGray15 for the fill.
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal <tparscal@wikimedia.org
wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
> Trevor, thanks, thats looking closer. I'll let may weigh in before > we finalize. > > > > *Jared Zimmerman * \ Director of User Experience \ Wikimedia > Foundation > M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0 > > > > On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < > tparscal@wikimedia.org> wrote: > >> This is what it looks like when the checkbox uses #ddd instead of " >> lightgrey" and the surrounding .mw-ui-checkbox div is 50% >> transparent. >> >> - Trevor >> >> >> On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < >> rkaldari@wikimedia.org> wrote: >> >>> Maybe it's just me, but the new disabled checkbox doesn't look >>> disabled to me: >>> https://tools.wmflabs.org/styleguide/desktop/section-5.html >>> >>> The normal convention for making a form element disabled is to >>> make it faded out (<100% opacity), not giving it a gray fill. >>> >>> I have no idea where this design came from or who is responsible >>> for it, but I was wondering if the design team could revisit it. >>> >>> Thanks! >>> Ryan Kaldari >>> >>> _______________________________________________ >>> Design mailing list >>> Design@lists.wikimedia.org >>> https://lists.wikimedia.org/mailman/listinfo/design >>> >>> >> >> _______________________________________________ >> Design mailing list >> Design@lists.wikimedia.org >> https://lists.wikimedia.org/mailman/listinfo/design >> >> > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I agree. The second one looks great to me.
Kaldari
On Tue, Aug 19, 2014 at 1:12 PM, Trevor Parscal tparscal@wikimedia.org wrote:
I really like it. The #ccc outline, #f9f9f9 fill and #ccc text looks great.
- Trevor
On Tue, Aug 19, 2014 at 1:10 PM, May Tee-Galloway <mgalloway@wikimedia.org
wrote:
I was looking for a background color that has as little contrast as possible with #CCC. Important to have the border show but not dark enough that when it stands alone, it looks like an active checkbox. I made a version with #F9F9F9. What do you guys think? [image: Inline image 1]
On Tue, Aug 19, 2014 at 12:55 PM, Trevor Parscal tparscal@wikimedia.org wrote:
I recommend using @colorDisabledText for the label, and @colorGray15 for the fill.
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal < tparscal@wikimedia.org> wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
> I'm confident she will come up with something sensible. > > - Trevor > > > On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < > jared.zimmerman@wikimedia.org> wrote: > >> Trevor, thanks, thats looking closer. I'll let may weigh in before >> we finalize. >> >> >> >> *Jared Zimmerman * \ Director of User Experience \ Wikimedia >> Foundation >> M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0 >> >> >> >> On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < >> tparscal@wikimedia.org> wrote: >> >>> This is what it looks like when the checkbox uses #ddd instead of >>> "lightgrey" and the surrounding .mw-ui-checkbox div is 50% >>> transparent. >>> >>> - Trevor >>> >>> >>> On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < >>> rkaldari@wikimedia.org> wrote: >>> >>>> Maybe it's just me, but the new disabled checkbox doesn't look >>>> disabled to me: >>>> https://tools.wmflabs.org/styleguide/desktop/section-5.html >>>> >>>> The normal convention for making a form element disabled is to >>>> make it faded out (<100% opacity), not giving it a gray fill. >>>> >>>> I have no idea where this design came from or who is responsible >>>> for it, but I was wondering if the design team could revisit it. >>>> >>>> Thanks! >>>> Ryan Kaldari >>>> >>>> _______________________________________________ >>>> Design mailing list >>>> Design@lists.wikimedia.org >>>> https://lists.wikimedia.org/mailman/listinfo/design >>>> >>>> >>> >>> _______________________________________________ >>> Design mailing list >>> Design@lists.wikimedia.org >>> https://lists.wikimedia.org/mailman/listinfo/design >>> >>> >> >> _______________________________________________ >> Design mailing list >> Design@lists.wikimedia.org >> https://lists.wikimedia.org/mailman/listinfo/design >> >> > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Side note: how does/ought a checkbox that is both checked and disabled look? I haven't skinned a checkbox since Mac OS 9, but my experience from then involved creating checked and unchecked versions of disabled, normal, and active checkboxes, and I haven't seen any examples of disabled checked ones here. Is the checkmark still bright green on disabled checkboxes? The colour might throw people off if they're expecting the checkmark to be greyed-out as well as the box.
Oh yeah, we definitely need a checked disabled checkbox as well. See, for example, https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsection-echo. Any ideas May or Trevor? I imagine we would want the color of the checkbox to match that of the disabled text label.
On Tue, Aug 19, 2014 at 1:39 PM, Nihiltres nihiltres@ataraxic.net wrote:
Side note: how does/ought a checkbox that is both checked and disabled look? I haven't skinned a checkbox since Mac OS 9, but my experience from then involved creating checked and unchecked versions of disabled, normal, and active checkboxes, and I haven't seen any examples of disabled checked ones here. Is the checkmark still bright green on disabled checkboxes? The colour might throw people off if they're expecting the checkmark to be greyed-out as well as the box. _______________________________________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 08/19/2014 04:39 PM, Nihiltres wrote:
Side note: how does/ought a checkbox that is both checked and disabled look? I haven't skinned a checkbox since Mac OS 9, but my experience from then involved creating checked and unchecked versions of disabled, normal, and active checkboxes, and I haven't seen any examples of disabled checked ones here. Is the checkmark still bright green on disabled checkboxes?
Definitely not. In fact, it's only supposed to be green when focused. See https://trello.com/c/JETLmm7F/7-check-boxes
Matt Flaschen
The problem I have here is that if I allow my eyes to blur a bit with the image at the expected resolution (half the size of the screenshot), it appears as a grey smudge. I'm only aware that there is a control there because I know there's supposed to be one.
On Aug 19, 2014, at 1:10 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
I was looking for a background color that has as little contrast as possible with #CCC. Important to have the border show but not dark enough that when it stands alone, it looks like an active checkbox. I made a version with #F9F9F9. What do you guys think? <Screenshot 2014-08-19 13.06.39.png>
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
On Tue, Aug 19, 2014 at 1:21 PM, Brandon Harris bharris@wikimedia.org wrote:
The problem I have here is that if I allow my eyes to blur a bitwith the image at the expected resolution (half the size of the screenshot), it appears as a grey smudge. I'm only aware that there is a control there because I know there's supposed to be one.
Yup. [Insert standard message here, concerning: Text lighter than #777 on a white background, will not pass WCAG. Everything lighter than @colorGray7 should probably be explicitly cautioned-against for text, in the styleguide.*
The defaults have to be accessible, until such time as there's an easy appearance menu for everyone to tweak their preferred/required aesthetics.
* with the possible exception-that-defines-the-rule, of placeholder-class text, such as in the SearchBox, where nobody needs to be able to read what it says to use the interface successfully. This really only applies to utterly obvious locations like a searchbox, that typically have a button labelled "Search" right next to them. Currently as the placeholder text colors, our vector searchbox uses #757575 (but it only has a magifying glass icon, so that contrast is needed), and our login-form uses #898989. The monobook searchbox uses #959595, but it has buttons labelled "Go" & "Search". (in firefox, according to colorzilla)
@Nihiltres: For an example of where disabled checkboxes appear, see here. The "Invert selection" checkbox is disabled, until we change the "Namespace" dropdown/drawer-menu option. You can then check a box, and then change the dropdown back to "All", to see a Checked&Disabled box. http://mwui.wmflabs.org/wiki/Special:RecentChanges (Compare with https://outreach.wikimedia.org/wiki/Special:RecentChanges )
HTH. quiddity
On 08/19/2014 04:21 PM, Brandon Harris wrote:
The problem I have here is that if I allow my eyes to blur a bit with the image at the expected resolution (half the size of the screenshot), it appears as a grey smudge. I'm only aware that there is a control there because I know there's supposed to be one.
I agree. We need to be very careful to avoid going too light. I think #CCC, #F9F9F9, #CCC is too hard to see.
Matt Flaschen
On a this monitor, @colorGray15 is completely indistinguishable from white when used for the fill. It's crappy, yes, but also not unusual. The #eee is also hard to tell the difference, but better.
On 19/08/14 19:55, Trevor Parscal wrote:
I recommend using @colorDisabledText for the label, and @colorGray15 for the fill.
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson <jrobson@wikimedia.org mailto:jrobson@wikimedia.org> wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text. @colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest @colorDisabledText: @colorGray12; On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal <tparscal@wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close. - Trevor On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway <mgalloway@wikimedia.org <mailto:mgalloway@wikimedia.org>> wrote: I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons <http://tools.wmflabs.org/styleguide/desktop/section-2.html>. If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value? Inline image 2 On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal <tparscal@wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: I'm confident she will come up with something sensible. - Trevor On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman <jared.zimmerman@wikimedia.org <mailto:jared.zimmerman@wikimedia.org>> wrote: Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize. * * * * *Jared Zimmerman *\\Director of User Experience \\Wikimedia Foundation M +1 415 609 4043 <tel:%2B1%C2%A0415%20609%204043> \\ @jaredzimmerman <http://loo.ms/g0> On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal <tparscal@wikimedia.org <mailto:tparscal@wikimedia.org>> wrote: This is what it looks like when the checkbox uses #ddd instead of "lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent. - Trevor On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari <rkaldari@wikimedia.org <mailto:rkaldari@wikimedia.org>> wrote: Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill. I have no idea where this design came from or who is responsible for it, but I was wondering if the design team could revisit it. Thanks! Ryan Kaldari _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design _______________________________________________ Design mailing list Design@lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal tparscal@wikimedia.org wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal <tparscal@wikimedia.org
wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
This is what it looks like when the checkbox uses #ddd instead of " lightgrey" and the surrounding .mw-ui-checkbox div is 50% transparent.
- Trevor
On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < rkaldari@wikimedia.org> wrote:
> Maybe it's just me, but the new disabled checkbox doesn't look > disabled to me: > https://tools.wmflabs.org/styleguide/desktop/section-5.html > > The normal convention for making a form element disabled is to make > it faded out (<100% opacity), not giving it a gray fill. > > I have no idea where this design came from or who is responsible for > it, but I was wondering if the design team could revisit it. > > Thanks! > Ryan Kaldari > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
I think for a disabled and checked box, the check should be visible but gray, not green. Will probably look best if there's a similar chroma difference between the gray check and the outline as the enabled version has between the green check and the outline.
- Trevor
On Tue, Aug 19, 2014 at 1:53 PM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 12:42 PM, Jon Robson jrobson@wikimedia.org wrote:
MediaWiki UI already has the current grays defined. According to current spec colour gray 12 (#ccc) is used for disabled text.
@colorGray1: #111; // darkest @colorGray2: #222; @colorGray3: #333; @colorGray4: #444; @colorGray5: #555; @colorGray6: #666; @colorGray7: #777; @colorGray8: #888; @colorGray9: #999; @colorGray10: #AAA; @colorGray11: #BBB; @colorGray12: #CCC; @colorGray13: #DDD; @colorGray14: #EEE; @colorGray15: #F9F9F9; // lightest
@colorDisabledText: @colorGray12;
On Tue, Aug 19, 2014 at 12:40 PM, Trevor Parscal tparscal@wikimedia.org wrote:
The label being grayed out is important. The outline being closer to white also helps a lot, but as you said, when it's alone the outline change is not enough. I think the gray fill is still a little dark, maybe use #f5f5f5 if you can swing it, but B is getting close.
- Trevor
On Tue, Aug 19, 2014 at 12:03 PM, May Tee-Galloway < mgalloway@wikimedia.org> wrote:
I made a few of variations to compare. I think B works the best because it doesn't look like you can do anything about it. I greyed the text out, just like what happens to disabled buttons http://tools.wmflabs.org/styleguide/desktop/section-2.html.
If A and C stood alone without the standard checkbox, they may not be as clear that they're disabled. Is there a reason we're using lightgrey instead of actual value?
[image: Inline image 2]
On Tue, Aug 19, 2014 at 11:20 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
I'm confident she will come up with something sensible.
- Trevor
On Tue, Aug 19, 2014 at 11:11 AM, Jared Zimmerman < jared.zimmerman@wikimedia.org> wrote:
Trevor, thanks, thats looking closer. I'll let may weigh in before we finalize.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 11:08 AM, Trevor Parscal < tparscal@wikimedia.org> wrote:
> This is what it looks like when the checkbox uses #ddd instead of " > lightgrey" and the surrounding .mw-ui-checkbox div is 50% > transparent. > > - Trevor > > > On Tue, Aug 19, 2014 at 11:02 AM, Ryan Kaldari < > rkaldari@wikimedia.org> wrote: > >> Maybe it's just me, but the new disabled checkbox doesn't look >> disabled to me: >> https://tools.wmflabs.org/styleguide/desktop/section-5.html >> >> The normal convention for making a form element disabled is to make >> it faded out (<100% opacity), not giving it a gray fill. >> >> I have no idea where this design came from or who is responsible >> for it, but I was wondering if the design team could revisit it. >> >> Thanks! >> Ryan Kaldari >> >> _______________________________________________ >> Design mailing list >> Design@lists.wikimedia.org >> https://lists.wikimedia.org/mailman/listinfo/design >> >> > > _______________________________________________ > Design mailing list > Design@lists.wikimedia.org > https://lists.wikimedia.org/mailman/listinfo/design > >
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Jared Zimmerman wrote:
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
I'd also argue that we need fewer grays. Surely fifteen grays is overkill.
I think enumerating the grays was kind of a cop-out. We should be able to clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it probably doesn't need to be part of the palette. For now, we can side-step the fact that most of these colors are indistinguishable on the hardware that many users use (both human eyes and computer monitors). :-)
MZMcBride
MZ we had that conversation already ;) we opted for semantic names for colors, and numerical names for our limited grey palette. The Living style guide will outline some uses for each grey but they will be divergent enough that a single name is not likely to make sense. If when we are building the color usage section of the living style guide we find enough commonality in usages for the shades of grey we can revisit semantic names.
*Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman http://loo.ms/g0
On Tue, Aug 19, 2014 at 4:21 PM, MZMcBride z@mzmcbride.com wrote:
Jared Zimmerman wrote:
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
I'd also argue that we need fewer grays. Surely fifteen grays is overkill.
I think enumerating the grays was kind of a cop-out. We should be able to clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it probably doesn't need to be part of the palette. For now, we can side-step the fact that most of these colors are indistinguishable on the hardware that many users use (both human eyes and computer monitors). :-)
MZMcBride
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
One thing at a time. We are building software and we can't get everything right first time :)
I agree semantic names are what we should aim to but the purpose of the numeric colours was an attempt to at least stop introducing even more :)
Sounds like we have identified disabledComponentGray to go with disabledTextGray during this process:) On 19 Aug 2014 16:32, "Jared Zimmerman" jared.zimmerman@wikimedia.org wrote:
MZ we had that conversation already ;) we opted for semantic names for
colors, and numerical names for our limited grey palette. The Living style guide will outline some uses for each grey but they will be divergent enough that a single name is not likely to make sense. If when we are building the color usage section of the living style guide we find enough commonality in usages for the shades of grey we can revisit semantic names.
Jared Zimmerman \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman
On Tue, Aug 19, 2014 at 4:21 PM, MZMcBride z@mzmcbride.com wrote:
Jared Zimmerman wrote:
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
I'd also argue that we need fewer grays. Surely fifteen grays is
overkill.
I think enumerating the grays was kind of a cop-out. We should be able to clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it
probably
doesn't need to be part of the palette. For now, we can side-step the
fact
that most of these colors are indistinguishable on the hardware that many users use (both human eyes and computer monitors). :-)
MZMcBride
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
You can see how specific grays are being used here https://trello.com/c/IRqbu8p4/15-color-swatches.
On Tue, Aug 19, 2014 at 6:39 PM, Jon Robson jdlrobson@gmail.com wrote:
One thing at a time. We are building software and we can't get everything right first time :)
I agree semantic names are what we should aim to but the purpose of the numeric colours was an attempt to at least stop introducing even more :)
Sounds like we have identified disabledComponentGray to go with disabledTextGray during this process:)
On 19 Aug 2014 16:32, "Jared Zimmerman" jared.zimmerman@wikimedia.org wrote:
MZ we had that conversation already ;) we opted for semantic names for
colors, and numerical names for our limited grey palette. The Living style guide will outline some uses for each grey but they will be divergent enough that a single name is not likely to make sense. If when we are building the color usage section of the living style guide we find enough commonality in usages for the shades of grey we can revisit semantic names.
Jared Zimmerman \ Director of User Experience \ Wikimedia Foundation
M +1 415 609 4043 \ @jaredzimmerman
On Tue, Aug 19, 2014 at 4:21 PM, MZMcBride z@mzmcbride.com wrote:
Jared Zimmerman wrote:
I definitely think we should dim the text as well I think B works
well,
we should just make sure we're using existing LESS greys for
everything.
I'd also argue that we need fewer grays. Surely fifteen grays is
overkill.
I think enumerating the grays was kind of a cop-out. We should be able
to
clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it
probably
doesn't need to be part of the palette. For now, we can side-step the
fact
that most of these colors are indistinguishable on the hardware that
many
users use (both human eyes and computer monitors). :-)
MZMcBride
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Who will do this work? Is there a bug or trello card tracking this and a person who wants to own getting this fixed?
On Tue, Aug 19, 2014 at 6:49 PM, May Tee-Galloway mgalloway@wikimedia.org wrote:
You can see how specific grays are being used here.
On Tue, Aug 19, 2014 at 6:39 PM, Jon Robson jdlrobson@gmail.com wrote:
One thing at a time. We are building software and we can't get everything right first time :)
I agree semantic names are what we should aim to but the purpose of the numeric colours was an attempt to at least stop introducing even more :)
Sounds like we have identified disabledComponentGray to go with disabledTextGray during this process:)
On 19 Aug 2014 16:32, "Jared Zimmerman" jared.zimmerman@wikimedia.org wrote:
MZ we had that conversation already ;) we opted for semantic names for colors, and numerical names for our limited grey palette. The Living style guide will outline some uses for each grey but they will be divergent enough that a single name is not likely to make sense. If when we are building the color usage section of the living style guide we find enough commonality in usages for the shades of grey we can revisit semantic names.
Jared Zimmerman \ Director of User Experience \ Wikimedia Foundation M +1 415 609 4043 \ @jaredzimmerman
On Tue, Aug 19, 2014 at 4:21 PM, MZMcBride z@mzmcbride.com wrote:
Jared Zimmerman wrote:
I definitely think we should dim the text as well I think B works well, we should just make sure we're using existing LESS greys for everything.
I'd also argue that we need fewer grays. Surely fifteen grays is overkill.
I think enumerating the grays was kind of a cop-out. We should be able to clearly define each gray, recognizing of course that naming is very difficult. If a gray and its purpose can't be clearly defined, it probably doesn't need to be part of the palette. For now, we can side-step the fact that most of these colors are indistinguishable on the hardware that many users use (both human eyes and computer monitors). :-)
MZMcBride
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 08/19/2014 02:02 PM, Ryan Kaldari wrote:
Maybe it's just me, but the new disabled checkbox doesn't look disabled to me: https://tools.wmflabs.org/styleguide/desktop/section-5.html
The normal convention for making a form element disabled is to make it faded out (<100% opacity), not giving it a gray fill.
I disagree. I think gray fill is a understood convention because it is a browser default for text inputs. In Firefox, it's also the same convention for checkboxes. Try http://jsfiddle.net/ap1d28ka/1/ in various browsers including Firefox (both gray fill) and Chromium (both gray fill, checkbox also apparently translucent).
I think the extension to checkboxes is fairly straightforward. I don't claim this is the only reasonable way to do disabled checkboxes, but it's an option.
Matt Flaschen
