search

ucla-oarc-web / WebBlocks

Out of the box, WebBlocks is a platform based on modern web technologies for building full-featured, responsive sites suited for all viewports including desktops, tablets and mobile devices. It leverages existing best-in-breed web tools, defines semantics based on modern web standards and includes a large suite of UI elements and Javascript interactivity libraries. However, WebBlocks is a lot more than just a set of semantics, elements and libraries. At it's core, it is a highly modular toolkit that can be customized to meet business needs, fitted to different development paradigms and integrated into existing web solutions.
http://ucla.github.io/WebBlocks/doc
BSD 3-Clause "New" or "Revised" License
21 stars 14 forks source link

Support Dark Background with Default Branding #411

Closed ebollens closed 11 years ago

ebollens commented 11 years ago

If we set the default to a dark color, it should go ahead and set the background dark, invert the primary font color based on the default color, and use dark flavors of background for messages by default.

ebollens commented 11 years ago

As part of this change, I will be introducing two new classes:

The concept of fade is that it will be dark if the background is dark, or light if the background is light, whereas emphasize will be light if the background is dark, or dark if the background is light. These are useful for cases where one wishes to be able to re-roll their WebBlocks CSS and yet not have a jarring feeling among flavored colors. An example where this occurs is with messages, which are supposed to be somewhat faded into the background - yet if they just use the light class, then they will appear extremely emphasized when the background is switched to dark.

@loganfranken @albertwu @StillSlippery @chris4ucla @uncleerniebs @lnicks @ampodobas I think these names suck though. Any ideas on other class names that might capture the purpose better?

To ensure backwards compatibility, if we change these names later, I'm going to go ahead and place them in the Extend/Base namespace for the moment, but have the compiler default to including them. Later on, when we come up with good semantics, we'll move them to the core Base namespace and remove the Extend versions from the compiler. However, we'll leave the Extend/Base version around with the class names here, so that if someone doesn't want to swap the class names in their code, they can just compile with Extend/Base/Color at that time and still get these semantics.

ebollens commented 11 years ago

The commit f496ac4 is a partial fix of Bootstrap - which has a lot of challenges in legacy and duplicate code, as WebBlocks core has grown more full-featured over time. Will get this finished up tomorrow.

spiritcapsule commented 11 years ago

understate / mute / weak / dim / subdue

stress / amplify / boost

However, I have accessibility concerns about the fade one in general. I get the point of it. But nearly every time I see this effect it's a violation.

ebollens commented 11 years ago

@chris4ucla regarding your accessibility concerns, WebBlocks makes a best effort to pick an accessible background-foreground pair. To do this, it generates both a light and a dark version of foreground text (using the $color-grade-dk-text and $color-grade-lt-text variables to determine lightening and darkening percent against the raw color). Then, for each background color permutation (the unflavored variety plus dark and light), it transforms the background base color into YIQ equivalent and selects between the light and dark versions of the text based on which has the higher contrast ratio. However, because of the shape of the RGB space, it is possible to pick a background color that has no accessible foreground color, but we can only do our best to try and help - and in fact, when you use the light or dark variations, because they're driven off an absolute brightness, WebBlocks has a much easier time achieving an accessible contrast.